/* pages/index.css — index 固有スタイル
   トップ専用ブロックは p-index-*、p-index はページ全体のラッパー。 */

/* 地色とテクスチャは、MVの上へ重なる .p-index__flow が持つ（body 側の
   base.css の地は、固定されたMVに隠れて見えなくなるため）。

   main は base.css の既定（position: relative / overflow: clip）のまま使う。
   hidden にするとスクロールコンテナができ、その中の position: sticky が
   ビューポートではなく main を基準にしてMVが留まらない。clip はコンテナを
   作らずに切るだけなので、星の横はみ出しは同じように切れて sticky も効く。
   ここに overflow を書き足さないこと。 */

/* MVの上へ重なってスクロールする面。
   MVは sticky で画面に留まり続けるので、この面がMVを覆っていく。地色と
   テクスチャ（＝これまで body::before が敷いていたもの）を、そっくり
   こちらへ移して持たせる。
   z-index はMV（0）より上。sticky なMVは positioned なので、
   ここも positioned にしないと後ろへ回ってしまう。

   先頭 --flow-fade-h は硬い縁ではなく渡りで、グレーが下から染み込むように
   MVへ乗る。渡りはスクロールと同じ速さで上がるので、MVが覆われ切るまでに
   かかるスクロールは渡りの高さぶん増える。
   帯には本文を置かない（padding-top で空ける）。ここへ文字が入ると、
   まだ透けているグレーの上でMVの青と重なって読めない */
.p-index__flow {
  /* 渡りの高さ。基準はMVの --mv-h と同じ1画面ぶんだが、画面の幅で頭打ちにする。
     縦長のSPでは1画面ぶんが長すぎ、MVを抜けるまでの指の運動量が倍になる。
     横長の画面では幅のほうが大きいので、頭打ちは効かない */
  --flow-fade-h: min(100vh, 100vw);
  /* 網点で溶かす。画像はアルファマスク（網点＝不透明 / 地＝透明）で、
     mask-mode は既定の match-source（画像はアルファ参照）のまま使う。
     輝度で作ると白地が不透明になって上下が反転する。
     画像が覆うのは渡りの高さぶんだけ。マスク画像の外側はマスク対象外＝透明に
     なるので、その下のベタは 2 枚目のレイヤーが持つ */
  --flow-fade-mask:
    url("../../img/mask-fade-y.png"),
    linear-gradient(#000, #000);
  /* mask-fade-y.png の幅 / 高さ（px） */
  --flow-fade-mask-ratio: calc(2397 / 1448);
  position: relative;
  z-index: 1;
  padding-top: var(--flow-fade-h);
}
/* 渡りの高さもMVと同じ基準で svh へ切り替える */
@supports (height: 100svh) {
  .p-index__flow { --flow-fade-h: min(100svh, 100vw); }
}
/* 地色と紙目。マスクは .p-index__flow 自身へ掛けないこと。本文まで一緒に
   薄くなるうえ、ページ丈のサブツリー全体が1つの合成グループになる。
   描画順は ::before → ::after なので、地色が先で紙目が後 */
.p-index__flow::before,
.p-index__flow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: var(--flow-fade-mask);
  mask-image: var(--flow-fade-mask);
  /* 高さは渡りへ合わせ、幅は画像の比率どおりを基本にする。画像は左右の端が
     つながらないので繰り返さず、画面が画像より横長のときだけ横へ引き伸ばして
     幅いっぱいに敷く（その分だけ網点が横に伸びる）。
     比率は --flow-fade-mask-ratio。画像を差し替えたら必ず合わせる */
  --flow-fade-mask-w: max(100%, calc(var(--flow-fade-h) * var(--flow-fade-mask-ratio)));
  -webkit-mask-size: var(--flow-fade-mask-w) var(--flow-fade-h), 100% calc(100% - var(--flow-fade-h));
  mask-size: var(--flow-fade-mask-w) var(--flow-fade-h), 100% calc(100% - var(--flow-fade-h));
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.p-index__flow::before {
  background-color: var(--color-surface);
}
.p-index__flow::after {
  background-image: url("../../img/texture.jpg");
  background-repeat: repeat;
  background-size: var(--texture-size);
  mix-blend-mode: multiply;
  opacity: var(--texture-body-opacity);
}

/* ==========================================================================
   MV
   ========================================================================== */
/* 高さは --mv-h（100svh、未対応ブラウザは 100vh へフォールバック）。
   svh を使うのは、iOS Safari でアドレスバーが伸縮するたびに 100vh が
   変わり、MV の高さが跳ねるのを避けるため。最小ビューポート基準にすると
   バーが出ている状態を基準にするので、伸縮しても高さが動かない。
   下限（min-height）は持たせない。MV は sticky で top: 0 に留まるので、
   画面より高くすると超えた分がスクロールしても永久に見えない。
   実測では 1366×640 で 43px、844×390 で 32px が届かなくなっていた。
   縦に低い画面は「MV を高くして逃がす」のではなく、中身の並びで受ける
   （下の .p-index-mv__inner と @media (max-height: 540px)）。
   これで MV の実高さと --mv-h が常に一致するため、星の下端マスクの
   計算（--mv-h 参照）もズレない。
   overflow は切らず、星の下側はマスクで自然にフェードさせる */
.p-index-mv {
  --mv-h: 100vh;
  /* sticky で画面に留める。上の .p-index__flow がこの上へ重なってくるので、
     MVは動かないまま下から隠れていく。
     sticky なら包含ブロックが #swup の transform に左右されないので、
     遷移中に位置が飛ぶことがない（fixed だと飛ぶ） */
  position: sticky;
  top: 0;
  z-index: 0;
  height: var(--mv-h);
  background-color: var(--color-brand);
}
/* 本体を伸ばすと星の50%基準が動くため、UI伸縮差ぶんの青だけを背面へ足す */
.p-index-mv::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: -1;
  height: calc(100lvh - 100svh);
  background-color: var(--color-brand);
  pointer-events: none;
}
/* 星のマスク位置も --mv-h を参照するので、差し替えはこの1箇所で足りる */
@supports (height: 100svh) {
  .p-index-mv { --mv-h: 100svh; }
}
/* 廃止した暗転レイヤーの名残。index.html の span は残してあるので、
   通常の流し込みへ入らないよう隠すだけにする。position を外すと空の
   インライン要素として行ボックスを作り、後ろの __inner を押し下げる。
   HTMLへ手を入れられる時に span ごと消す */
.p-index-mv__dim {
  display: none;
}
/* MV の中身は「EN」と「下段（キャッチ＋バナー）」の 2 つだけを持つ 3 行グリッド。
   1fr / auto / 1fr の上下対称な組みで、閾値もJSも使わずに次の2つを両立させる。

   ■ 余裕のある画面 … EN は画面のちょうど上下中央
   上下の padding と row-gap を対称にしてあるので、上下の 1fr が等しくなった
   時点で EN の中心は画面の中心と一致する（1920×1080 で中心 540 ＝ Figma、
   390×844 で中心 422）。下段は align-self: end で画面下端から --space-y-48。

   ■ 低い画面 … 重なりが構造的に起きない
   1fr の自動最小サイズは中身の min-content なので、下段の行は「均等割り」と
   「下段の実高さ」の大きいほうになる。足りなくなると上の 1fr が 0 まで潰れ、
   EN は下段の上へ押し出される。行が分かれているので、EN が右下のバナー列へ
   横から届く問題（実測 1024×600 ほか）も同時に消える。

   高さの閾値でレイアウトを切り替える案は採らない。必要な高さは幅とキャッチの
   行数で変わり（実測 577〜776px）、単一の閾値では 375×667 のような
   現在成立している画面まで巻き込むため。

   box-sizing は base.css に全体指定が無いのでここで付ける。付けないと
   padding-block が height: 100% の外側へ出て、MV より高くなる */
.p-index-mv__inner {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: var(--space-y-24) var(--space-x-24);
  height: 100%;
  padding-block: var(--space-y-48);
  padding-inline: var(--space-side);
}
/* 粒子テクスチャ（main_bg 相当：overlay 合成）。GNAV・フッターの __burst と
   同じ持ち方。星の上へ重ねる（DOM順がそのまま重なり順なので、HTML では
   __star の後ろに置く）。overlay は下に描かれたものと混ざるので、
   地色だけでなく星にも紙目が乗る。

   星と同じ量だけ上へ流す（scroll-effects.js の PARALLAX）。面が上へずれると
   MV 下端に紙目の敷かれていない帯ができる。上に重なる .p-index__flow は
   先頭が透けた渡りなのでそこを覆い切れず、帯が地との差になって出る。
   移動量は渡りの長さで決まるが、渡りは1画面ぶんで頭打ちなので上限がある
   （scroll-effects.js の mvTravel は範囲を画面数で割る）。その上限より少しだけ
   多く下へ足す。合成のかかる面なので、必要以上に広げない。
   MV 下端は常に画面下端なので、はみ出しても見えない */
.p-index-mv__burst {
  position: absolute;
  inset: 0 0 -200px;
  inset-block-end: calc(-200px - (100lvh - 100svh));
  background-image: url("../../img/texture.jpg");
  background-repeat: repeat;
  background-size: var(--texture-size);
  mix-blend-mode: overlay;
  opacity: var(--texture-opacity);
  pointer-events: none;
}

/* 放射シンボル（Figma: 星ベクター 2741.82×3170.26 / 白 opacity .75 ×
   background グループ opacity .75）。位置は星の中心で持つ。横は画面中央から
   右へ 382.26px（1920基準、Figma の中心 x=1342.26）、縦は MV の上下センター。
   幅を変えても中心は動かない（左端から置くと両者が連動してしまう） */
/* 位置決めはこの箱が持ち、中身の img は演出用に空けておく
   （transform を JS で動かすと、ここの translateY(-50%) が壊れるため）。
   高さは中身の img がアスペクト比から決める */
.p-index-mv__star {
  display: block;
  position: absolute;
  top: 50%;
  left: calc(50% + 19.909vw);   /* 画面中央から右へ 382.26 / 1920 */
  width: 142.803vw;             /* 2741.82 / 1920 */
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%); /* 星の中心 = left / top の位置 */
  pointer-events: none;
  z-index: 0;
  /* Figma の透明グラデーションマスク：MV 下端（= 画像内 50% + MV高さの半分）
     から 270px 相当（1920基準で 14.0625vw）かけて透明へフェード。
     MV高さは親から継承する --mv-h。星の中心と MV の中心が一致しているので、
     MV 下端は星から見て「中央 + 高さの半分」になる */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 calc(50% + var(--mv-h) / 2),
    transparent calc(50% + var(--mv-h) / 2 + 14.0625vw)
  );
  mask-image: linear-gradient(
    to bottom,
    #000 calc(50% + var(--mv-h) / 2),
    transparent calc(50% + var(--mv-h) / 2 + 14.0625vw)
  );
}
/* 星の SVG は不透明。濃さは使う側で決める。
   img 側に置くのは、ローディング明けの演出（scroll-effects.js の REVEAL）が
   opacity をこの値へ戻すため（wrapper に置くと二重に掛かる）。
   REVEAL の to にも同じ値があるので、変えるときは両方。

   縁のぼかしは tokens.css の --star-mask-gradient（円形マスク）。wrapper 側の
   MV 下端フェードとは別の要素に載っているので、2 つは掛け合わせで効く。
   ベタと渡りの比を変えるときは :root の --star-mask-solid を変える
   （要素側へ書いても効かない。理由は tokens.css の該当箇所） */
.p-index-mv__star img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.1;
  -webkit-mask-image: var(--star-mask-gradient);
  mask-image: var(--star-mask-gradient);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* EN は上下中央（Figma: y504+h72 → 中心 540 = 1080/2）。中央寄せはグリッドの
   対称な 1fr が担うので、この要素自身は行の指定だけを持つ。
   位置決めに transform を使わないこと（パララックスが y を書くため）*/
.p-index-mv__en {
  grid-row: 2;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: var(--fs-48);
  line-height: 1.5;
  letter-spacing: 0.075em;
  color: #fff;
  font-feature-settings: "palt" 1;
}
/* キャッチとバナーの塊。画面下端基準にして、画面を広げても下にひっつく。
   下の余白は MV / gnav / footer 共通で 48px（親の padding-block が持つ）。
   文字は line-height の余白を内側に持つので、それが無いバナーには
   +16px の視覚補正を足して見た目を揃える */
.p-index-mv__foot {
  grid-row: 3;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-y-24) var(--space-x-40);
}
.p-index-mv__copy {
  font-family: var(--font-mincho-r);
  font-weight: normal;
  font-size: var(--fs-80);
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: #fff;
  font-feature-settings: "palt" 1;
}
.p-index-mv__banners {
  flex: 0 0 auto;
  padding-bottom: var(--space-y-16);  /* 文字の line-height 相当の視覚補正 */
  display: flex;
  flex-direction: column;
  gap: var(--space-y-24) var(--space-x-24);
}
/* Figma 240×120 の固定。可変トークンに乗せると1440pxで186pxまで縮んで
   小さくなりすぎるので、ここは固定で持つ。
   高さは画像そのものに決めさせる（banner-*.jpg は 480×240 ＝ 240:120） */
/* 影は GNAV のバナー（.c-site-gnav__banner）と同じ。1枚ずつの box-shadow で、
   角丸に沿った矩形の影になる。親へ filter: drop-shadow を掛けると、
   描画されたアルファの形に沿うので2枚の間の余白まで影が回り込む。

   色は黒12%。フッターのバナーは同じ形で青15%（rgba(56,125,206,.15)）だが、
   あちらは薄いグレーの上に置かれるから成立する。MVは地がコーポレートブルーに
   なったので、青の影は沈んで見えない。同じ理由で GNAV も黒を使っている */
/* max-width は全帯共通の頭打ち。PCとタブレットでは width（240px / 23.4375vw）が
   すでに 240px 以下なので効かず、SPで内幅いっぱいに伸ばす構成のときだけ働く。
   GNAV・フッターのバナーも同じ 240px。変えるときは3箇所を一緒に動かす */
.p-index-mv__banner {
  display: block;
  width: 240px;
  max-width: 240px;
  height: auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 8px 8px 6px rgba(0, 0, 0, 0.12);
}
.p-index-mv__banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.p-index-about {
  position: relative;
  padding: var(--space-y-240) var(--space-side) var(--space-y-240);
}
/* Figma: 左 900（x60-960）/ 右 900（x960-1860）で、2カラムはぴったり接している。
   gap を入れるとその分だけ 50%/50% から外れるので gap は 0。
   カラム間の見た目の間隔は、左カラム内の画像の右余白（下記 20%）が作る */
.p-index-about__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
/* 放射シンボル。基準は .p-index-about__body（= .p-index-about__col が
   position: relative を持つ）。body は inner の右半分で、右端と高さは
   inner と一致するため、割合だけ倍にすれば見た目は inner 基準と同じになる。
   高さ: Figma の星 755px = body の高さ 755px → 100%（本文量で伸縮）
   横位置: 星の中心を body 右端から 146.5px（= 900 の 16.28%）に置く
          （right で右端を合わせ、translateX(50%) で中心基準に変換）
   本文より後ろへ回すため z-index: -1。body 自身が z-index: 1 の
   スタッキングコンテキストなので、セクション背景より後ろへは抜けない */
/* 位置決めはこの箱が持ち、中身の img は演出用に空けておく
   （transform を JS で動かすと、ここの translateX(50%) が壊れるため）。

   0.85 倍は見た目の大きさそのもので、演出の終わりの値ではない。JS 側は
   どの星も素の状態（1.0）へ戻すだけにしたいので、縮小はここで持つ。
   translateX の % は要素の素の幅基準なので、後ろの scale には影響されない */
.p-index-about__star {
  display: block;
  position: absolute;
  top: 0;
  right: 16.28%;
  transform: translateX(50%) scale(0.85);
  height: 100%;
  width: fit-content;   /* 中身の img の幅に合わせる（縦横比は SVG に任せる） */
  max-width: none;
  pointer-events: none;
  z-index: -1;
}
/* 濃さは img 側。REVEAL が opacity を 0 から動かすので、戻り先は
   scroll-effects.js の to にも同じ値を書いてある。

   縁のぼかしは tokens.css の --star-mask-gradient（円形マスク）。
   ベタと渡りの比を変えるときは :root の --star-mask-solid を変える
   （要素側へ書いても効かない。理由は tokens.css の該当箇所） */
.p-index-about__star img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  opacity: 0.75;
  -webkit-mask-image: var(--star-mask-gradient);
  mask-image: var(--star-mask-gradient);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.p-index-about__col {
  position: relative;
  z-index: 1;
  flex: 0 0 50%;   /* padding が付いても 50%/50% が崩れないよう basis で固定 */
  min-width: 0;
}
/* 左カラムは右カラムの高さまで伸ばし、画像は下揃え（Figma: justify-end） */
.p-index-about__col--media {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-y-60) var(--space-x-60);   /* 見出しと画像の最低間隔（Figma: pt-60） */
}
.p-index-about__visual {
  margin-top: auto;
  /* Figma: 左カラム 900 の中で画像は 720 幅（右に 180 空く）→ 180/900 = 20% */
  margin-right: 20%;
  border-radius: 4px;
  overflow: hidden;
}
/* 高さは画像そのものに決めさせる（about-image.jpg は 1500×1000） */
.p-index-about__visual img {
  width: 100%;
  height: auto;
  display: block;
}
.p-index-about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-80) var(--space-x-80);
}
.p-index-about__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-40) var(--space-x-40);
  font-family: var(--font-mincho-m);
  font-weight: normal;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}
.p-index-about__lead-head {
  font-size: var(--fs-32);
  line-height: 2;
  letter-spacing: 0.15em;
}
.p-index-about__lead p:not(.p-index-about__lead-head) {
  font-size: var(--fs-20);
  line-height: 2.5;
  letter-spacing: 0.15em;
}

/* ==========================================================================
   装飾テキスト（Designing... / Integrated...）
   ========================================================================== */
.p-index-deco {
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-y-240);
}
.p-index-deco__text {
  font-family: var(--font-en);
  font-weight: 400;
  line-height: 1;
  color: #000;
  opacity: 0.06;
  font-feature-settings: "palt" 1;
}
/* 大きさと字送りは modifier ごとに持つ。Figma は PC を共通 200px としているが、
   Metropolis は Gotham より字幅が狭く、共通サイズだと足りない分を字送りで埋める
   ことになって字面が緩む。大きさで埋めれば字送りを 0 に保てる。
   値は Gotham 時代の描画幅（@1920 で a:1827 / b:1809）へ合わせた実測値で、
   Figma由来ではない。a:b = 1.065 は SP 側の 66:62 と同じ比率。
   経緯は docs/font-strategy.md 決定12。
   **--b は 11.1vw を超えると <br> 固定の行が入りきらず3行に割れる** */
.p-index-deco--a .p-index-deco__text { font-size: 11.18vw; letter-spacing: 0; }   /* 214.7 / 1920 */
.p-index-deco--b .p-index-deco__text { font-size: 10.5vw;  letter-spacing: 0; }   /* 201.6 / 1920 */

/* ==========================================================================
   WORKS
   Figma: セクション 1920×917。見出し行（60px高）→ スライダー（カード506px /
   画像380px / 間 10px）→ VIEW ALL。スライダーは左 60px から右端まで開放して
   次カードが見切れる。
   ========================================================================== */
.p-index-works {
  padding: 0 var(--space-side) var(--space-y-240);
}
/* 見出しとフィルタは同じ行に置くが、入らなくなったらフィルタごと次の行へ落とす。
   落ちた先では space-between が単独アイテムを行頭へ置くので、
   SPの縦積み（見出し → 左揃えのフィルタ）と同じ並びになる。
   行間はSPと同じ --space-y-24 を使う */
.p-index-works__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-y-24) var(--space-x-60);
  margin-bottom: var(--space-y-60);
}
.p-index-works__head > .c-sec-title {
  flex-shrink: 0;
}
/* CMS で項目数が増える前提。行が増えても崩れないよう折り返す。
   伸ばさない（flex: 1 1 auto を持たせない）ことで、1行に収まるうちは
   内容幅のまま右端へ、折り返したら行頭から並ぶ */
.p-index-works__filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-y-8) var(--space-x-16);   /* 行間 8px / 項目間 16px */
  min-width: 0;
}

.p-index-works__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-y-60);
}

/* ==========================================================================
   ビジュアル帯（WORKS と SERVICE の間）
   ========================================================================== */
/* 画面幅いっぱいの画像。高さは NEXT / CONTACT の帯と同じ可変トークンで持つ
   （--space-y-800、SPは 600）。c-band そのものを使わないのは、あちらが色と
   テクスチャと文字色を持つ「リンクの帯」で、こちらは写真が主役だから。

   ■ この帯はMVとセットの意匠
   どちらもパララックスを主題にしているため、2つで1つとして扱っている。
   実装としてはMVに依存しておらず単独でも動くので、分ける・分けないは
   デザイン上の判断で決まる。

   中の img は上下へ --visual-parallax ぶん大きく取り、その範囲で流す
   （scroll-effects.js の PARALLAX）。はみ出しはここで切るので、
   動かしても帯の外へは出ない。値は JS 側の from / to と対で、
   どちらかだけ変えると動かした先に地が見える */
.p-index-visual {
  /* 画像が帯からはみ出せる量（片側）。この構造で取れる上限で決めている。

     素材は 3:2（1500×1000）。object-fit: cover は「幅基準」と「高さ基準」の
     拡大率の大きいほうを採るので、画像の箱の高さが (2/3)幅 を超えると
     高さ基準へ切り替わる。切り替わること自体は問題ではなく、必要な倍率が
     1 倍を超えたときだけ写真が甘くなる。

     効いてくるのは 1280px 幅（帯 640px / 箱 845px に対し (2/3)幅 = 853px）で、
     余裕は 8px しかない。1920px 幅では 800 / 1107 に対し 1280 で余裕 173px。
     narrow 側（およそ1100px以下）は高さ基準へ移るが、必要な倍率は 1 倍を
     下回る（966px幅で 0.80、375px幅で 0.54）ので画質は落ちない。
     以上から片側 8vw が上限。JS 側の from / to は帯の実幅の 8% で、
     vw（スクロールバーを含む）より必ず小さくなるので余りを食い破らない */
  --visual-parallax: 8vw;
  position: relative;
  height: var(--space-y-800);
  overflow: hidden;
}
.p-index-visual img {
  position: absolute;
  top: calc(var(--visual-parallax) * -1);
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% + var(--visual-parallax) * 2);
  object-fit: cover;
}
/* 粒子テクスチャ。持ち方は MV・GNAV・フッターの __burst と同じだが、
   合成は screen にしてある（他は overlay）。写真の上では overlay が
   明暗を両方向へ押して粒が硬く出るため、明るい側だけへ乗せる。
   画像と同じ速さで一緒に流すので、箱も画像と同じだけ上下へ大きく取る
   （この余りが無いと、動かした先で帯の端に地が見える）。
   紙目は repeat なので、動いても継ぎ目は出ない */
.p-index-visual__burst {
  position: absolute;
  top: calc(var(--visual-parallax) * -1);
  left: 0;
  width: 100%;
  height: calc(100% + var(--visual-parallax) * 2);
  background-image: url("../../img/texture.jpg");
  background-repeat: repeat;
  background-size: var(--texture-size);
  mix-blend-mode: screen;
  opacity: var(--texture-opacity);
  pointer-events: none;
}
/* 全体を落とす黒。画像・紙目より後ろに書いてあるので、DOM順で最後に重なり、
   両方まとめて暗くなる。ホバーでは変化させない。

   濃さはスクロールに追従する（scroll-effects.js）。帯の上端が画面下端に
   来たところで --shade-max、帯が画面へ収まり切った（下端が画面下端に来た）
   ところで --shade-min。疑似要素ではなく実体の
   要素にしてあるのは、GSAP が疑似要素を動かせないため。
   開始値をここで持つので、JS の張り込みが遅れても薄いまま出ることがない */
.p-index-visual__shade {
  --shade-max: 0.6;
  --shade-min: 0.1;
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: var(--shade-max);
  pointer-events: none;
}
/* 帯いっぱいに広がるリンク。組み立ては .c-band-contact__link に合わせてある。
   z-index は黒（__shade）より上。__shade は z-index を持たない absolute なので、
   ここが 1 を持てば必ず前に出る */
.p-index-visual__link {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding-inline: var(--space-side);
  color: inherit;
}
/* 組み立ては CONTACT帯の見出しに合わせているが、寸法は NEXT帯の主セル
   （.c-band-next__en--lg）に揃えて --fs-60。CONTACT帯の --fs-120 は
   帯の主役が文字だから成立するもので、ここは写真が主役なので合わない。
   あちらは右カラムと半分ずつ分けるため flex: 1 1 0 を持つが、ここは見出しと
   VIEW MORE の2つだけで space-between が効くので要らない。
   ホバーでの文字送りは text-swap-hover.js が担当（帯の見出しと同じ扱いで登録済み） */
.p-index-visual__title {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: var(--fs-60);
  line-height: 1;
  color: #fff;
}
/* c-view-more（--white 付き）が本体。寸法も NEXT帯の主セルに揃えるので、
   font-size は上書きせず既定（--fs-18）のまま使う。
   縦積みになる幅で縮まないよう flex-shrink だけ持たせる */
.p-index-visual__view {
  flex-shrink: 0;
}
/* ホバーの反応は中身（見出しの文字送り・VIEW MORE）とカーソルの円に持たせる。
   base.css の a:hover は既定で減光するので、それだけ打ち消す */
@media (hover: hover) {
  .p-index-visual__link:hover {
    opacity: 1;
  }
}

/* ==========================================================================
   SERVICE
   ========================================================================== */
/* 上の 240 は ABOUT の上余白と同じ。直前がビジュアル帯になり、
   セクションどうしが接していた頃の「前のセクションの下余白」が無くなったため、
   ここで受ける */
.p-index-service {
  padding: var(--space-y-240) var(--space-side) var(--space-y-240);
}
.p-index-service__inner {
  width: 100%;
}
.p-index-service__body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-y-80) var(--space-x-80);
  margin-top: var(--space-y-40);
}
/* 幅は px で持たせない。
   図は SVG の固有サイズ（796×734）、本文は改行済みテキストの自然幅で決まる。
   狭い画面では flex-shrink で縮む（img は max-width:100% で追従）。
   ただし本文を圧迫しないよう、図の幅に上限を持たせる
   （flex-basis で同じ値を書くと「上限」ではなく「常にその幅」になり、
     1920 で実寸 796px より大きくなってしまうため max-width で持つ） */
.p-index-service__diagram {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
}
.p-index-service__diagram img { width: 100%; height: auto; }
.p-index-service__text {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-y-80) var(--space-x-80);
}
.p-index-service__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-y-40) var(--space-x-40);
  font-family: var(--font-mincho-m);
  font-weight: normal;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}
.p-index-service__lead-head {
  font-size: var(--fs-32);
  line-height: 2;
  letter-spacing: 0.15em;
}
.p-index-service__lead p:not(.p-index-service__lead-head) {
  font-size: var(--fs-20);
  line-height: 2.5;
  letter-spacing: 0.15em;
}

/* ==========================================================================
   NEWS
   ========================================================================== */
/* Figma: about と同じく左 900 / 右 900 で接する（gap なし）。
   右カラム内のリストは 800 幅なので、間隔は下の padding-right: 100px が作る */
.p-index-news {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 0 var(--space-side) var(--space-y-240);
}
/* 幅は 50% で固定する。flex: 1 1 0 だと、padding を持つ右カラム側にその分だけ
   多く配分されてしまい（border-box でも flex base size は 0 にならない）、
   50%/50% にならない */
.p-index-news__head {
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* 装飾テキストは背面レイヤー。重なってもニュース本文が上に来る */
.p-index-news__deco {
  position: relative;
  z-index: 0;
  margin-top: auto;
  margin-bottom: calc(var(--fs-20) * -1);
  font-family: var(--font-en);
  font-weight: 400;
  /* Figma 200/1920 由来の 10.4167vw で動かす。上限は --fs-160 で、
     1280〜1920pxではこちらが採られる（1920で160px / 1280で120px）。
     .p-index-deco__text も元は同じ式だったが、書体差を大きさで吸収するため
     modifier ごとの値へ分かれた。連動しないので揃えに行かないこと */
  font-size: min(10.4167vw, var(--fs-160));
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  opacity: 1;
  white-space: nowrap;
  font-feature-settings: "palt" 1;
}
.p-index-news__body {
  position: relative;
  z-index: 1;          /* 装飾テキストより前面 */
  flex: 0 0 50%;
  min-width: 0;
  padding-right: var(--space-x-100);   /* Figma: 900 のカラム内でリストは 800 */
}
/* padding ごとリンクにして、行全体をクリック可能にする */
/* 行の体裁は components/news-item.css。ここは配置だけ */
.p-index-news__more { margin-top: var(--space-y-60); }

/* --- NEWS本文の右padding だけ 1280px で切る（決定2の「1024 or 1280」）------
   PCは Figma のカラム内でリストを800pxに収めるための追い込み（--space-x-100）。
   1280px以下ではカラム自体が痩せるので、追い込む余地が無くなる。
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .p-index-news__body {
    padding-right: 0;
  }
}

/* --- 中間層 + SP 共通（max-width: 1023px）---------------------------------
   ファーストビューの英文・キャッチ・バナーをvw基準へ切り替える。
   1280px以下はトークンが頭打ちになり、キャッチ60.89px・バナー240pxのまま
   画面だけが縮むため、894px以下でキャッチの行末がバナーの下へ入る。
   英文も同じ理由で右端が764pxに固定され、806px以下で右の余白（42px）を食う。
   起点は1024pxの実寸なので、境界で段差は出ない。
     英文     … 37.2444 / 1024 = 3.6371vw
     キャッチ … 60.8889 / 1024 = 5.9462vw
     バナー   … 240 / 1024 = 23.4375vw（Figma 240px）
   SPは静的配置と別サイズへ切り替わるので、この指定はSPブロックで上書きされる。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-index-mv__en {
    font-size: 3.6371vw;
  }

  .p-index-mv__copy {
    font-size: 5.9462vw;
  }

  .p-index-mv__banner {
    width: 23.4375vw;
  }
}

/* ==========================================================================
   SP（Figma 422:1960 / 390px 等倍）

   PCの2カラム（ABOUT・NEWS）と横並び（MVのコピー↔バナー、SERVICEの図↔本文）を
   すべて縦積みにする。セクションの下余白は --space-y-240（192px）から
   --space-y-120（96px）へ落とす。

   トークンで賄えず選び直したのは、いずれも --fs-80 以上の大きい側
   （docs/sp-strategy.md 決定1の★4種）と、vw固定の装飾テキスト。
   ========================================================================== */
@media (max-width: 767px) {
  /* ビジュアル帯。SPは帯を低くする。画面が狭いぶん 800 のままだと
     画面のほとんどを写真が占めてしまう */
  .p-index-visual {
    height: var(--space-y-600);
  }

  /* SPで縦積みへ。見出しを --fs-60（NEXT帯の主セルと同じ）に
     揃えてあるので、中間層までは横並びのまま入る */
  .p-index-visual__link {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-y-60) var(--space-x-60);
    padding-block: var(--space-y-48);
  }

  /* --- MV ---------------------------------------------------------------
     Figma（422:1966）はコピーもバナーも左揃えで、下から バナー → コピー の順。
     PCは下段（.p-index-mv__foot）がコピー↔バナーの横並びなので、SPでは
     そこだけ縦積みにする。inner のグリッドとENの中央寄せは基本形のまま。

     padding-block は上下で同じ値にする。下だけ変えると
     EN の中心が画面の中心から padding の差の半分ぶんずれる（基本形のコメント）。
     上の余白は空の行なので、揃えても見た目には出ない。
     ---------------------------------------------------------------------- */
  .p-index-mv__inner {
    gap: var(--space-y-20) var(--space-x-20);
    padding-block: var(--space-y-40);
  }

  .p-index-mv__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-y-28) 0;
  }

  /* 星は画面に対してPCより大きく取る（Figma: 1223 / 390 = 313.6vw）。
     中心の横位置は画面中央から右へ 75.5 / 390 */
  .p-index-mv__star {
    left: calc(50% + 19.359vw);
    width: 313.59vw;
  }

  /* ENとキャッチは幅に追従させる。トークンはSP帯で頭打ちになり（決定1）、
     320pxでも430pxでも同じ実寸になるため、ここだけvwへ切り替える。
     起点はFigma SPカンプ（390px）での現行実装値なので、390pxの見た目は変わらない。
       EN     … 19.1333 / 390 = 4.9060vw
       キャッチ … 33.8889 / 390 = 8.6895vw

     上限は768px（中間層）での実寸で止める。SP側の係数のほうが大きいので、
     そのまま伸ばすと767pxでEN 37.6px・キャッチ 66.7px まで育ち、768pxの
     27.93px / 45.67px へ落ちる段差が境界に出る。さらに640〜767px
     （SPレイアウトのまま幅だけ広い帯）でキャッチが内幅を超えて折り返す。
     頭打ちにすると EN は569px、キャッチは526px から上が768pxと同値になり、
     境界が連続する */
  .p-index-mv__en {
    font-size: min(4.9060vw, 27.9329px);
  }

  .p-index-mv__copy {
    font-size: min(8.6895vw, 45.6668px);
  }

  .p-index-mv__banners {
    align-self: stretch;
    flex-direction: row;
    gap: var(--space-y-16) var(--space-x-16);
    padding-bottom: 0;
  }

  /* Figma: 170×85 を2枚、間隔10px。内幅いっぱいまで伸ばす。
     高さと比率は基本形が持つので、ここでは幅の指定だけ解く。
     上限（基本形の max-width: 240px）は残るので、530px前後で頭打ちになる。
     縦に低い画面ではこの後の @media (max-height: 540px) の 46svh が
     さらに手前で効く（後勝ちで、より小さい側が採られる） */
  .p-index-mv__banner {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  /* SPはバナーが細る（Figma 170px）ので、影も PC の 240px 基準から縮める（×170/240 を丸めた値）。
     MV・GNAV・フッターの3箇所で同じ値。変えるときは一緒に動かす */
  .p-index-mv__banner {
    box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.12);
  }

  /* --- ABOUT ------------------------------------------------------------- */
  /* PCが上下とも --space-y-240 で揃っているので、SPも上下同値で受ける
     （docs/sp-strategy.md 決定14のセクションの縦リズム）*/
  .p-index-about {
    padding-block: var(--space-y-120);
  }

  /* 縦積みなので、写真と本文の間に行間を持たせる。
     PCは横並びで gap: 0 のため、ここで初めて必要になる */
  .p-index-about__inner {
    flex-direction: column;
    gap: var(--space-y-80) var(--space-x-80);
  }

  .p-index-about__col {
    flex: 0 0 auto;
    width: 100%;
  }

  .p-index-about__col--media {
    order: 0;
  }

  /* PCは右カラムを見込んだ追い込み（20%）。1列では不要 */
  .p-index-about__visual {
    margin-right: 0;
  }

  .p-index-about__body {
    order: 1;
    gap: var(--space-y-60) var(--space-x-60);
  }

  /* --- 装飾テキスト -------------------------------------------------------
     PCは1行 nowrap だが、SPは単語ごとに折り返して4行／3行にする
     （Figma 422:1988 は66px・4行、422:2057 は62px・3行）。
     ---------------------------------------------------------------------- */
  /* Figmaの装飾テキストは左右に14〜18px残る（422:1988 は x=16 で幅358）。
     --space-side（19.6px）まで空けると最長語が入らず語中で折れるため、
     ここだけ一段狭い余白にする */
  .p-index-deco {
    padding-inline: var(--space-x-20);
    padding-bottom: var(--space-y-120);
  }

  /* 幅は最長行に合わせる。full width のままだと親の justify-content: center が
     効かず、行が画面左端に張り付く */
  .p-index-deco__text {
    width: fit-content;
    max-width: 100%;
  }

  /* PCの改行位置は1行 nowrap 前提のもの。SPは幅に合わせて流し込むので
     固定改行を無効にする（br の直後に半角スペースがあるので語は繋がらない）*/
  .p-index-deco__text br,
  .p-index-news__deco br {
    display: none;
  }

  /* Figma は --a 66px / --b 62px だが、どちらも大きくしてある。PCと同じ理由で、
     字送り 0 のまま Gotham 時代の幅へ戻すぶんを大きさで埋めているため。
     結果どちらも画面の約91%を占め、Gotham時代（91.5% / 89.7%）と同じ収まりになる。

     **--b は 16.1vw が上限。** これを超えると 320px で3行から4行へ割れる
     （375px以上なら 16.3vw まで保つが、--a の 91.3% を超えて広くなる）。
     --b の行は1行あたりの文字数が多く、折り返しの余地がほとんど無い */
  .p-index-deco--a .p-index-deco__text { font-size: 18.5vw; }   /* 72.2 / 390 */
  .p-index-deco--b .p-index-deco__text { font-size: 16.1vw; }   /* 62.8 / 390 */

  /* SPでも装飾の英文と同じ大きさにする。基準は --a（Figma 66/390）。

     上限（--fs-160）は基本形と同じく残す。SP帯の --fs-160 は
     --fs-ratio-l: 0.5 の再計算後で80px固定なので、473px付近から上では
     上限側が採られて deco とは一致しなくなるが、これは外せない。
     この装飾はSPでは90度回して縦に置くため、文字を大きくすると回した後の
     長さがセクションを越え、白文字がNEXT帯（紺地）へはみ出す
     （実測：上限なしで 640px で20px、767px で144px）。
     実機の縦持ち（320〜430px）は上限が効かない側なので deco と一致する */
  .p-index-news__deco {
    font-size: min(16.923vw, var(--fs-160));
  }

  /* --- WORKS ------------------------------------------------------------- */
  .p-index-works {
    padding-bottom: var(--space-y-120);
  }

  /* 見出しとフィルタを同じ行に置けないので縦積みへ。フィルタは左揃え */
  .p-index-works__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-y-24) var(--space-x-24);
    margin-bottom: var(--space-y-40);
  }

  .p-index-works__foot {
    margin-top: var(--space-y-40);
  }

  /* --- SERVICE ----------------------------------------------------------- */
  /* 上も書く。padding-bottom だけ上書きしていたため、PCの --space-y-240
     （SP実寸192px）が素通りして、ビジュアル帯との間だけ他の2倍空いていた */
  .p-index-service {
    padding-block: var(--space-y-120);
  }

  .p-index-service__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-y-48) var(--space-x-48);
  }

  .p-index-service__diagram {
    max-width: 100%;
  }

  .p-index-service__text {
    gap: var(--space-y-60) var(--space-x-60);
  }

  /* --- NEWS -------------------------------------------------------------- */
  .p-index-news {
    position: relative;
    flex-direction: column;
    padding-bottom: var(--space-y-120);
  }

  .p-index-news__head,
  .p-index-news__body {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Figma（422:2965）はSPだけ装飾テキストを90度回して右端へ立てる。
     横に寝かせたままだと --fs-160（SP実寸80px）でも内幅に収まらない。
     絶対配置にして行の高さへ影響させない */
  /* 左上を軸に90度回すと、要素は軸から左へ「行の高さ」ぶん、下へ「行の長さ」ぶん
     伸びる。軸を画面右端から --space-x-24 内側に置くことで、回した後の右端を
     その位置に揃え、上端はセクションの上端に揃える */
  .p-index-news__deco {
    position: absolute;
    top: 0;
    left: calc(100% - var(--space-x-24));
    margin: 0;
    transform: rotate(90deg);
    transform-origin: 0 0;
  }

  .p-index-news__more {
    margin-top: var(--space-y-40);
  }
}

/* ==========================================================================
   縦に極端に低い画面（横向きのスマートフォン、低く潰したウィンドウ）

   グリッドが重なりは防ぐが、EN 1行＋バナー2段の実高さが画面へ入らなければ
   下段が MV の外へ出てしまう。ここでは縦のリズムだけを詰めて収める。
   横並び／縦積みの構成は幅で決まる既定のまま変えない。

   境界の 540px は、どの実機の高さからも離れた位置に取ってある
   （横画面 375〜430 / 縦画面 568〜932 / タブレット 768〜1024）。
   iOS でアドレスバーが伸縮してもこの境界を跨がないため、スクロール中に
   レイアウトが入れ替わることがない。
   ========================================================================== */
@media (max-height: 540px) {
  .p-index-mv__inner {
    gap: var(--space-y-12) var(--space-x-12);
    padding-block: var(--space-y-24);
  }

  /* バナーは高さ基準で頭打ちにする。240px のままだと 2 段で画面高の 7 割近くを
     使い、375px 高では 1px 足りずに溢れる。svh 非対応環境ではこの宣言ごと
     落ちて従来の幅に戻るだけで、破綻はしない */
  .p-index-mv__banner {
    max-width: 46svh;
  }

  .p-index-mv__banners {
    padding-bottom: 0;
  }
}