/* gnav（通常DOM・FLOCSS）。後日 PHP でコンポーネント化する範囲 */

/* 開閉は左右方向の透明グラデーションマスクで切り替える。
   マスクは「不透明 ＋ 渡り ＋ 透明」を横に並べた1枚で、これを画面の上で
   横移動させる。位置は px 相当（vw）で指定し、閉じた状態はマスクを左へ
   --gnav-mask-travel ぶんずらして透明部分だけを画面に重ねた状態、
   開いた状態は 0 まで戻して不透明部分を画面へ重ねた状態。
   つまりマスクは伸縮せず、常に同じ形のまま平行移動する。
   opacity は使わない（面が薄くなる見え方にせず、境界だけを動かす）。 */
.c-site-gnav {
  /* 両端のベタ（不透明側・透明側）の幅。開き切り／閉じ切りで画面を
     覆い切る必要があるので 100vw を下回らせない */
  --gnav-mask-solid: 100vw;
  /* 渡り（グラデーション）の幅。ぼけ幅の調整はここだけで効く */
  --gnav-mask-band: 160vw;
  position: fixed;
  inset: 0;
  z-index: var(--z-gnav);
  overflow: hidden;
  background-color: var(--color-brand);
  color: #fff;
  visibility: hidden;
  pointer-events: none;
  /* 既定値は閉じるとき。開くときの尺だけ html.is-gnav-open で上書きする。
     カーブは開閉で共通。値そのものは実際の見え方で詰めたものだが、
     選び直すときも次の 2 つは外さないこと。
     ・制御点の y が 0 から始まる形（純粋な ease-in）は動き出しの初速が
       ゼロになり、そこが「遅延して見える」静止区間として出るため使わない。
     ・強弱は付けすぎない。expo 系まで寄せると序盤で大半を移動して終盤が
       止まって見え、掃きというより張り付いた印象になる。

     開閉の状態は html.is-gnav-open で持つ（gnav.js）。ヘッダーが gnav より
     前面にいて同じ状態を読む必要があるため、状態はルート要素に置いてある。 */
  --gnav-mask-dur: 0.6s;
  --gnav-mask-ease: cubic-bezier(0, 0.55, 0.45, 1);
  /* 移動量＝--gnav-mask-solid + --gnav-mask-band */
  --gnav-mask-travel: calc(var(--gnav-mask-solid) + var(--gnav-mask-band));
  /* 渡りは直線ではなくイージング（smoothstep: t^2*(3-2t)）で刻む。
     直線だと不透明側・透明側それぞれの開始点で傾きが急に変わり、
     そこが筋になって見える。両端ほど刻みを細かくし、傾きが 0 から
     立ち上がる形にして境目をなじませる。
     各ストップの位置は「不透明ベタの終わり + 渡り幅 × 進捗」 */
  --gnav-mask-gradient: linear-gradient(
    to right,
    #000 0,
    #000 var(--gnav-mask-solid),
    rgba(0, 0, 0, 0.993) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.05),
    rgba(0, 0, 0, 0.972) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.1),
    rgba(0, 0, 0, 0.936) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.15),
    rgba(0, 0, 0, 0.896) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.2),
    rgba(0, 0, 0, 0.844) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.25),
    rgba(0, 0, 0, 0.784) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.3),
    rgba(0, 0, 0, 0.648) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.4),
    rgba(0, 0, 0, 0.5) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.5),
    rgba(0, 0, 0, 0.352) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.6),
    rgba(0, 0, 0, 0.216) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.7),
    rgba(0, 0, 0, 0.156) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.75),
    rgba(0, 0, 0, 0.104) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.8),
    rgba(0, 0, 0, 0.065) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.85),
    rgba(0, 0, 0, 0.028) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.9),
    rgba(0, 0, 0, 0.007) calc(var(--gnav-mask-solid) + var(--gnav-mask-band) * 0.95),
    rgba(0, 0, 0, 0) var(--gnav-mask-travel),
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: var(--gnav-mask-gradient);
  mask-image: var(--gnav-mask-gradient);
  -webkit-mask-size: calc(var(--gnav-mask-solid) * 2 + var(--gnav-mask-band)) 100%;
  mask-size: calc(var(--gnav-mask-solid) * 2 + var(--gnav-mask-band)) 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 閉じた状態＝マスクを左へ寄せ、透明部分だけが画面に重なる位置 */
  -webkit-mask-position: calc(var(--gnav-mask-travel) * -1) 0;
  mask-position: calc(var(--gnav-mask-travel) * -1) 0;
  /* 閉じるときはマスクが引き切ってから hidden にする（visibility は補間せず遅延で切替） */
  transition: -webkit-mask-position var(--gnav-mask-dur) var(--gnav-mask-ease),
    mask-position var(--gnav-mask-dur) var(--gnav-mask-ease),
    visibility 0s linear var(--gnav-mask-dur);
}
html.is-gnav-open .c-site-gnav {
  /* 開くほうを長く取る（閉じるは既定の --gnav-mask-dur） */
  --gnav-mask-dur: 0.9s;
  visibility: visible;
  pointer-events: auto;
  /* 開いた状態＝マスクを --gnav-mask-travel ぶん戻し、不透明部分が画面に重なる位置 */
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  /* 開くときは即 visible にする（そうしないと直後にフォーカスを当てられない） */
  transition: -webkit-mask-position var(--gnav-mask-dur) var(--gnav-mask-ease),
    mask-position var(--gnav-mask-dur) var(--gnav-mask-ease), visibility 0s;
}

/* 粒子テクスチャ（main_bg 相当：overlay 合成） */
.c-site-gnav__burst {
  position: absolute;
  inset: 0;
  background-image: url("../../img/texture.jpg");
  background-repeat: repeat;
  background-size: var(--texture-size);
  mix-blend-mode: overlay;
  opacity: 0.1;
  pointer-events: none;
}

/* 放射シンボル（Figma: 白 opacity .05 / 2741.82×3170.26）。
   位置は星の中心で持つ。横は画面中央から右へ 382.26px（1920基準、Figma の
   中心 x=1342.26）、縦は画面の上下センター。MV の星と同じ寸法・同じ持ち方 */
.c-site-gnav__star {
  position: absolute;
  top: 50%;
  left: calc(50% + 19.909vw);   /* 画面中央から右へ 382.26 / 1920 */
  width: 142.803vw;             /* 2741.82 / 1920 */
  max-width: none;   /* 画像既定の max-width:100% で縮まないように */
  height: auto;
  transform: translate(-50%, -50%); /* 星の中心 = left / top の位置 */
  pointer-events: none;
  z-index: 0;
}
/* 濃さは img 側。星の SVG は不透明で、使う側ごとに決める。

   縁のぼかしは tokens.css の --star-mask-gradient（円形マスク）で、MV / ABOUT の
   星と同じ持ち方。ベタと渡りの比を変えるときは :root の --star-mask-solid を変える
   （要素側へ書いても効かない。理由は tokens.css の該当箇所）。
   MV の wrapper 側にある「MV 下端へ向かうフェード」は MV 高さ基準の別マスクなので、
   全画面の gnav には持たせない */
.c-site-gnav__star img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.05;
  -webkit-mask-image: var(--star-mask-gradient);
  mask-image: var(--star-mask-gradient);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* スクロールコンテナ。マウス環境では OverlayScrollbars を初期化する要素になる
   （OS は初期化先に display:flex を付けて内部にビューポートを作るので、
   レイアウトは持たせない）。

   overflow はタッチ端末用。OS はタッチ端末では初期化されない（scrollbar.js）ので、
   ここが無いと gnav の中身がはみ出しても一切スクロールできない。
   マウス環境には影響しない。OS 初期化後のホストは vendor 側の
   `[data-overlayscrollbars~=host] { overflow: hidden !important }` を受けるため、
   !important の無いこの指定は必ず負ける。

   overscroll-behavior は、行き止まりで背面のページへスクロールが繋がらないように
   する。マウス環境では data-lenis-prevent 経由で vendor/lenis.css が同じ値を
   当てているが、Lenis の有無に関わらず必要なので gnav 自身の責務として持つ */
.c-site-gnav__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 実レイアウト面。本文 → ポリシー の縦積みで、
   本文が残りの高さを占めて上下中央に来る。上端はヘッダーのぶんを空ける。
   高さは最低 100dvh（未対応ブラウザは 100vh）。中身が収まらなければ縦に
   伸びてスクロールする。GNAV は開いている間だけの全画面なので、MV の svh とは
   別に、実際の可視領域へ追従させる（docs/sp-strategy.md 決定11） */
.c-site-gnav__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* 上端はヘッダーのぶんを空ける */
  padding: var(--header-height) var(--space-side) var(--space-y-48);
}

/* --- コピー（背景扱い）: ファーストビューのキャッチと同じ左下位置 ---------
   リンクより下のレイヤーに置き、画面が小さいときはリンクが上に重なる */
.c-site-gnav__copy {
  position: absolute;
  left: var(--space-side);
  bottom: var(--space-y-48);
  z-index: 1;
  font-family: var(--font-mincho-r);
  font-weight: normal;
  font-size: var(--fs-80);
  line-height: 1.5;
  letter-spacing: 0.15em;             /* 80px × .15 = 12px */
  color: rgba(255, 255, 255, 0.2);
  font-feature-settings: "palt" 1;
  pointer-events: none;
}

/* --- 本文（ナビ + バナー）------------------------------------------------
   ヘッダーぶんの上部余白とポリシーに挟まれた残りの高さを占め、その中で上下中央。
   上下の padding は、画面が低くて残り高さが詰まったときに
   ロゴ・ポリシーへ近づきすぎないための最小クリアランス。上は最前面のヘッダー、
   下はポリシーが相手で、詰まり方が違うので別々に持つ。
   上は 48px（--space-y-60）では低い画面でロゴに接近しすぎた（実測：
   1024×600 と 844×390 で下限に張り付く）。767px以下は下の SP ブロックで緩める。
   左は Figma のナビ左端 160 に合わせて stage の内側からさらに 100 下げる。
   右端は stage の padding（--space-side）に任せる */
.c-site-gnav__body {
  position: relative;
  z-index: 2;
  flex: 1;
  padding-block: var(--space-y-120) var(--space-y-48);
  padding-left: var(--space-x-100);   /* 160 - 60（stage の左 padding） */
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-content: center;              /* ナビブロックを残り高さの上下中央へ */
  align-items: start;                 /* バナーはナビ上端に揃える */
}
.c-site-gnav__nav {
  display: flex;
  /* 入らなくなったら列ごと次の行へ落とす（縦1列へは畳まない） */
  flex-wrap: wrap;
  gap: var(--space-y-160) var(--space-x-160);
}
/* ナビとバナーは開くときにマスクの掃きと同時にフェードアップする。
   閉じるときは動かさず、その場でフェードするだけ。位置の戻しは
   透明になり切ってから 0 秒で行う（補間しないので下へ沈まない）。
   マスクが引き切る 0.4s より先に消えるので、中身だけ残らない。
   2つで1つの動きなので、片方だけ値を変えない */
.c-site-gnav__nav,
.c-site-gnav__banners {
  opacity: 0;
  transform: translateY(var(--space-y-20));
  transition: opacity 0.3s var(--ease), transform 0s linear 0.3s;
}
html.is-gnav-open .c-site-gnav__nav,
html.is-gnav-open .c-site-gnav__banners {
  opacity: 1;
  transform: none;
  /* マスクの掃きと同時に立ち上げる（遅延なし） */
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.c-site-gnav__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-40) var(--space-x-40);
}
.c-site-gnav__link {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-56);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #fff;
  font-feature-settings: "palt" 1;
}

.c-site-gnav__banners {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-20) var(--space-x-20);
  width: 240px;
  flex-shrink: 0;
}
/* max-width は全帯共通の頭打ち。__banners が 240px 幅を持つ PC では効かず、
   幅いっぱいに伸ばす 1023px 以下でだけ働く。MV・フッターのバナーと同じ 240px。
   変えるときは3箇所を一緒に動かす（由来は index.css の .p-index-mv__banner）*/
.c-site-gnav__banner {
  display: block;
  max-width: 240px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.12);
}
.c-site-gnav__banner img { width: 100%; height: auto; }

/* --- ポリシー（stage の最下段。右寄せ）---------------------------------- */
.c-site-gnav__policy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-y-16) var(--space-x-16);
  padding-bottom: var(--space-y-16);  /* 文字の line-height 相当の視覚補正 */
  color: rgba(255, 255, 255, 0.85);
}
.c-site-gnav__policy-links {
  display: flex;
  gap: var(--space-y-32) var(--space-x-32);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-14);
  letter-spacing: 0.1em;
}
.c-site-gnav__copyright {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: var(--fs-12);
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.7);
}

/* --- 1279px 以下 ---------------------------------------------------------
   Figma のナビ左端 160px（stage の内側からさらに --space-x-100）は 1920px の
   設計値。1024px では本文幅 870px に対しナビ 598 + バナー 240 が入り、
   両者の間が 32px しか残らない。この帯では追い込みを解いて左端を stage へ
   揃える（1024px で 32 → 102px）。1023px 以下でも同じことをしているので、
   実質はその帯を 1279px まで広げたもの。
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .c-site-gnav__body {
    padding-left: 0;
  }

  /* 列間も詰める。--space-x-160（実寸112px）のままだとナビが 598px あり、
     バナー 240px と合わせて本文幅を圧迫する。84px にするとナビは 570px */
  .c-site-gnav__nav {
    gap: var(--space-y-120) var(--space-x-120);
  }
}

/* --- 中間層 + SP 共通（max-width: 1023px）---------------------------------
   ヘッダーのインラインナビが消える帯なので、パネルが唯一の導線になる。
   PCはナビとバナーを横に並べる（grid-auto-flow: column）が、1024px未満では
   ナビ列が痩せてリンクの文字が切れる（調査は docs/tablet-audit.md）。
   Figma SPと同じくナビブロックとバナーブロックを縦に積み、
   バナーは横2枚に開く。ナビ自体の2カラムは中間層では維持し、SPだけ1列にする。
   左の追い込み（--space-x-100）は幅が惜しいのでここで解く。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .c-site-gnav__body {
    grid-auto-flow: row;
    align-items: stretch;
    gap: var(--space-y-48) var(--space-x-48);
    padding-left: 0;
  }

  /* 縦積みになる帯では、右寄せだとナビ・バナーの左端と揃わず浮く */
  .c-site-gnav__policy {
    align-items: flex-start;
  }

  /* 背景に敷くキャッチ。この帯ではバナーとポリシーの下に潜り込むだけで
     装飾として成立しない（実測：900×900 でバナーと20px、844×390 で88px重なり、
     ポリシーとは全域で重なる）。SPも含めて出さない */
  .c-site-gnav__copy {
    display: none;
  }

  .c-site-gnav__banners {
    flex-direction: row;
    gap: var(--space-y-16) var(--space-x-16);
    width: 100%;
  }

  .c-site-gnav__banner {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* --- SP -------------------------------------------------------------------
   SPカンプにGNAVの展開状態は無いため、PCの構成（上：ロゴ+閉じる／
   中：ナビ+バナー／下：ポリシー）を保ったまま、横並びだけを縦積みへ置き換える。

   - 上部はヘッダーと同じ見え方に揃える（ロゴ157px、閉じるは箱の上下中央）。
   - 本文はナビの右にバナーを置けないので、ナビ→バナーの縦積みにする。
     ナビ自体も2列を1列へ繋げ、7項目の連続した並びとして読ませる。
   - バナーはMVと同じ横2枚（Figma 422:2740 の170px×2、間隔10px）。
   - コピーは --fs-80（SP実寸43.11px）だと1行に2文字強しか入らないので、
     --fs-48（同28.36px）へ選び直す（docs/sp-strategy.md 決定1の★4種）。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* SPはバナーが細る（Figma 170px）ので、影も PC の 240px 基準から縮める（×170/240 を丸めた値）。
     MV・GNAV・フッターの3箇所で同じ値。変えるときは一緒に動かす */
  .c-site-gnav__banner {
    box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.12);
  }

  /* 上のクリアランスは緩める。SPはヘッダーが 50px と低く、
     120（実寸96px）では本文が下へ押し出されて縦スクロールが増える */
  .c-site-gnav__body {
    padding-block: var(--space-y-80) var(--space-y-48);
  }

  /* 星はPCと同じくMVと同寸にする。PCの 142.803vw のままだとSPでは
     MV（313.59vw）の半分以下になり、ページを跨いで大きさが揃わない。
     値は index.css の .p-index-mv__star（SP）と同じ Figma 1223 / 390 基準。
     中心の横位置も揃える（画面中央から右へ 75.5 / 390） */
  .c-site-gnav__star {
    left: calc(50% + 19.359vw);
    width: 313.59vw;
  }

  /* SPも2列を保つ。PCの追い込み（--space-x-160 = 112px）では
     内幅335pxに2列入らないので、列間を詰めて内幅を等分する。
     列が痩せるぶんリンクの文字は下の cqw の頭打ちが自動で受ける */
  .c-site-gnav__nav {
    gap: var(--space-y-48) var(--space-x-48);
  }

  /* 列を文字サイズの基準にする。ここは flex: 1 1 0 で幅が外から決まるので
     inline-size の封じ込めを入れても潰れない（PC帯の列は内容幅で決まるため、
     同じことをすると幅0になる。この指定を帯の外へ出さないこと）*/
  .c-site-gnav__col {
    container-type: inline-size;
    flex: 1 1 0;
    min-width: 0;
    gap: var(--space-y-24) var(--space-x-24);
  }

  /* 列幅に連動させ、列からはみ出さないようにする。最長の「ABOUT US」は
     font-size の 5.85倍の幅を持つため、素のトークンでは 320px 側で溢れる。
     係数は 390px の列幅 158.61px に対して 24px となる比（24 / 158.61）*/
  .c-site-gnav__link {
    font-size: min(var(--fs-48), 15.1315cqw);
  }

  .c-site-gnav__policy {
    padding-bottom: 0;
  }

  /* --fs-12（SP実寸11.76px）＋ letter-spacing .1em では1行に収まらず、
     2行になって背景コピーと重なる。1段落として11.29pxへ落とす */
  .c-site-gnav__copyright {
    font-size: var(--fs-11);
  }

}