@charset "UTF-8";

/* ========================================
   base.css
   サイト全体の基本スタイル・変数定義
======================================== */

:root {
  /* ---- カラー ---- */
  --color-text: #222;
  --color-text-light: #666;
  --color-bg: #FFFDF4; /* オフホワイト（ページ全体の地色）*/
  --color-primary: #c3002f;   /* NISSANレッド（仮） */
  --color-secondary: #000;
  --color-accent: #f5f5f5;
  --color-border: #e0e0e0;

  /* ---- フォント ---- */
  --font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-family-en: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.7;

  /* ---- レイアウト ---- */
  --max-width: 1200px;
  --gutter: 24px;
  /* ★2026-08-20 PCヘッダーを 100px → 72px に（跡田さん選択＝案C）。
     PC側だけ Figma 実測との突き合わせがされておらず、ロゴがヘッダー高の60%を占めて
     大きく見えていた（SPは52%）。ロゴとENTRYも同じ比率(60%→43px)で縮めている。
     高さだけ詰めるとロゴが窮屈に見えるため。SP(68px)は変更なし */
  --header-height: 72px;         /* PC 時のヘッダー高さ */
  --header-height-sp: 68px;      /* ドロワー時（≦1160px）のヘッダー高さ。★2026-08-03 Figma公式(54:34196)実測68pxに統一 */
  --header-h-now: var(--header-height); /* 現在の実効ヘッダー高さ（幅で自動切替）。追従ヘッダー基準の余白計算に使う */
  --drawer-overlap: 2px;         /* ドロワー/オーバーレイをヘッダー下端に重ねる量（境界線を隠す）*/

  /* ---- ブレークポイント（参考用 / メディアクエリ内では数値を直接記述） ---- */
  --bp-sp: 767px;
  --bp-tab: 1024px;
  /* ★2026-08-17 E-2案A: 1120px → 1160px（跡田さん選択）。
     1120pxだと切替直後の 1121〜1159px で ENTRY ボタンが画面外へ出て
     横スクロールが発生していた（1121pxで32px・1152pxで6pxのはみ出しを実測）。
     PCナビ＋ENTRYが収まる最小幅は実測1160px。ここを下限にする。
     ※ 当初検討した1024pxは、ENTRY込みでは113pxはみ出すため不可だった。
     この値を変える時は header.css のメディアクエリと interview.css の
     「ヘッダー切替と同期」ブロックも合わせること（header.js はここを読む）*/
  --bp-drawer: 1160px;           /* PC ↔ ドロワー 切替幅。header.js が JS 側でこの値を参照する */

  /* ---- スクロールバー（独自スタイル） ---- */
  --scrollbar-size: 10px;        /* 幅 */
  --scrollbar-track: transparent;
  --scrollbar-thumb: #cfcfcf;
  --scrollbar-thumb-hover: #b3b3b3;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* 実効ヘッダー高さは 1160px（--bp-drawer）以下で 64px に切り替わる。
   --header-h-now を更新すると、.l-main の最小高さやインタビュー左ナビ（sticky）の
   追従基準も自動で合う。
   ※ アンカー（#qaN）ジャンプの着地オフセットは interview.css 側の
     scroll-margin-top で個別管理している。html に scroll-padding-top を足すと
     二重に効いて行き過ぎるため、ここでは付けない。 */
@media screen and (max-width: 1160px) {   /* ★2026-08-17 E-2案A: --bp-drawer と一致させる */
  :root {
    --header-h-now: var(--header-height-sp);
  }
}

body {
  font-family: var(--font-family-base);
  font-size: 1.6rem;
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- 共通レイアウトクラス ---- */
.l-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 端末側で「視差効果を減らす」を有効にしている利用者には動きを出さない */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.l-main {
  display: block;
  min-height: calc(100vh - var(--header-h-now));
  min-height: calc(100dvh - var(--header-h-now)); /* スマホのアドレスバー分を除いた実表示高に追従 */
}

/* ========================================
   スクロール領域（.l-scroll）
   ヘッダーをスクロール領域の外（上部）に出し、本文（main + footer）を
   .l-scroll の中でスクロールさせる。これにより:
   - スクロールバーが「ヘッダーの下」から始まる（ヘッダー横には出ない）
   - ヘッダー右のハンバーガーがスクロールバーと干渉しない
   - 独自スクロールバー（細め・配色）を .l-scroll に適用できる
   .l-scroll は include.js が実行時に生成し、<body> に .has-scroll を付与する。
   JS が無効/失敗した場合は .has-scroll が付かず、body が通常スクロール（フォールバック）。
======================================== */
body.has-scroll {
  /* ★2026-08-03 スマホでヘッダー/フッターが見切れる不具合の修正(跡田さん報告)。
     スマホの 100vh は「アドレスバーが隠れた状態」の高さを指すが、ここは
     overflow:hidden のためバーが隠れることがなく、実表示領域より body が
     バーの高さ分だけ縦に大きくなる。結果、上に引っ張るとヘッダーが画面外へ、
     下端ではフッターの末尾がバーの裏に回り込んで見えなくなっていた。
     dvh（実表示領域に追従する単位）を使うことで解消する。
     ※ 100vh は dvh 非対応の古い環境向けフォールバック（順序を入れ替えないこと） */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* body 自身はスクロールしない */
  overscroll-behavior-y: none;   /* 端で引っ張った時に外側がずれるのを抑止 */
}

.has-scroll #js-header {
  flex: 0 0 auto;                /* ヘッダーは固定高（スクロール領域の外で常に上部に残る）*/
}

.has-scroll .l-scroll {
  flex: 1 1 auto;
  min-height: 0;                 /* flex 子要素が内部スクロールできるように */
  overflow-y: auto;
  overflow-x: hidden;            /* 100vw 等による横スクロールを抑止 */
  /* スクロールバーの出現/消滅（アコーディオン開閉・ページ遷移）で
     コンテンツ幅が変わり左右にずれるのを防ぐ＝バー領域を常に確保する */
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  /* 独自スクロールバー（Firefox）*/
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* 独自スクロールバー（Chrome / Edge / Safari）*/
.has-scroll .l-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
}
.has-scroll .l-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.has-scroll .l-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: calc(var(--scrollbar-size) / 2);
}
.has-scroll .l-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* スマホ幅ではスクロールバーを非表示にする。
   実機はオーバーレイスクロール（バーが幅を取らない）が標準のため、
   バー・溝ぶんの帯が右端に見えて「コンテンツが見切れている」ように
   見えるのを防ぐ。バーが無い＝幅が常に一定なので、ずれも起きない。
   スクロール自体はタッチ／ホイールで従来どおり可能。 */
@media (max-width: 767px) {
  .has-scroll .l-scroll {
    scrollbar-width: none;         /* Firefox */
    scrollbar-gutter: auto;        /* 溝の確保も解除（バーが無いので不要） */
  }
  .has-scroll .l-scroll::-webkit-scrollbar {
    display: none;                 /* Chrome / Edge / Safari */
  }
}

/* ---- ユーティリティ ---- */
.u-pc-only {
  display: block;
}

.u-sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .u-pc-only {
    display: none;
  }
  .u-sp-only {
    display: block;
  }
}


/* 画面には出さないが、検索エンジンと読み上げには伝えたい文字。
   ★2026-08-14 F-1 対応で learning.css のスコープ付き定義を全体共通へ移動。
   display:none は読み上げからも消えるため使わず、1px に潰して視界の外へ出す */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   フォントユーティリティ
   ※ Dela Gothic One は Google Fonts、コーポレート・ロゴ ver2 は Adobe Fonts。
     どちらも各ページの <head> でローダー（typekit.js / Google Fonts <link>）の読み込みが必要
======================================== */

/* Dela Gothic One */
.f-dela {
  font-family: "Dela Gothic One", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
}

/* コーポレート・ロゴ ver2 Bold（Adobe Fonts） */
.f-corp-bold {
  font-family: "corporate-logo-ver2", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* コーポレート・ロゴ ver2 Medium（Adobe Fonts） */
.f-corp-medium {
  font-family: "corporate-logo-ver2", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* 游ゴシック体 Bold */
.f-yu-bold {
  font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 700;
}

/* 游ゴシック体 Medium */
.f-yu-medium {
  font-family: "游ゴシック体 Medium", "YuGothic Medium", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: 500;
}

/* ============================================================
   スクロールで現れる動き（G-3・跡田さん選択=案1「ふわっと上へ」）
   動かすのは reveal.js。値はデモで提示したものと同じ:
     0.6秒 / 28px 下から / 減速カーブ / 同じ並びは 0.12 秒ずつ順番に

   初期状態を .has-reveal の下にだけ置いているのが要点。
   reveal.js が走らない環境（JS無効・IntersectionObserver無し・
   「動きを減らす」設定）では has-reveal が付かず、要素は最初から見える。
   ここを素の .js-reveal に書くと、動かない環境で中身が消える。
============================================================ */
.has-reveal .js-reveal {
  opacity: 0;
  transform: translateY(28px);
}
.has-reveal .js-reveal.is-revealed {
  /* 最終状態をアニメーションの fill に頼らず自前で持つ。
     こうしておくと、アニメーションが走らなかった場合でも透明のまま固まらない */
  opacity: 1;
  transform: none;
  animation: reveal-up 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s) backwards;
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
/* 動きを減らす設定では、透明のまま固まらないよう明示的に戻す */
@media (prefers-reduced-motion: reduce) {
  .has-reveal .js-reveal {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}