/* ==========================================================================
   STEEL LIVE — SKY LAYER   v3.0  (Phase 1)
   --------------------------------------------------------------------------
   FROM JAPAN TO THE WORLD.  FROM THE WORLD TO JAPAN.

   主役の優先順位（この順位を崩さないこと）
     1 タイポグラフィ / 2 一本の軌道 / 3 三角の太陽 /
     4 青空・昼夜 / 5 月 / 6 虹 / 7 星
   虹・月・星は世界観の補助であり主役ではない。
   バランスは デザイン性 70 / 信用性 20 / 遊び心 10。

   Phase 1 の対象: HERO / STATEMENT / WORLD ⇄ JAPAN / うまの助スロット
   虹（分光）は Phase 2 で VISION に実装する。
   ========================================================================== */

/* ==========================================================================
   共通: 星
   1px の点のみ。四芒星の「キラキラ」形状は使わない。瞬かせない。
   不透明度は 3 段階だけ（--star-o1 / o2 / o3）。
   ========================================================================== */
.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 1px;
  height: 1px;
  background: var(--star);
  opacity: var(--o, 0.3);
  pointer-events: none;
}

/* 2px の星は「近い星」。数を絞る */
.star--near { width: 2px; height: 2px; }

/* ==========================================================================
   共通: 一本の軌道
   HERO のピリオドから CONTACT の画面外まで、章をまたいで途切れない 1px。
   ========================================================================== */
.trace {
  position: absolute;
  background: var(--trace-dim);
  pointer-events: none;
}

.trace--v { width: 1px; }
.trace--h { height: 1px; }

/* ==========================================================================
   共通: 章のステージ
   ========================================================================== */
.chapter {
  position: relative;
  /* isolation が無いと、z-index:-1 の .sky が
     章自身の背景ではなく body の背景の裏へ回り、見えなくなる */
  isolation: isolate;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ==========================================================================
   STATEMENT — 夜明け（05:20）
   三角の太陽が水平線から少しだけ昇る。日本から世界へ向かう始まり。
   ========================================================================== */
.chapter--dawn {
  /* 上端は HERO の色、下端は BUSINESS（v2 のまま）へ滑らかに落とす。
     章の境目に色の段差を作らないことが「ひとつの空」の条件。 */
  background: linear-gradient(180deg,
    var(--sky-predawn) 0%,
    var(--sky-dawn-1) 26%,
    #0d2246 68%,
    var(--sky-dawn-2) 100%);
}

/* 水平線。1px の線だけで示す */
.sky__horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon-y, 78%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244, 240, 230, 0.22) 22%,
    rgba(244, 240, 230, 0.40) 50%,
    rgba(244, 240, 230, 0.16) 78%,
    transparent 100%);
}

/* 日の出直前の、藍から橙へごくわずかに転じる帯。
   橙の面積を増やすと一気に「風景イラスト」になるため極小に抑える。 */
.sky__glow {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--horizon-y, 78%) - 90px);
  height: 90px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(210, 150, 110, 0.05) 60%,
    rgba(235, 190, 150, 0.10) 100%);
}

/* 水平線より下。三角の太陽の下半分を隠して「半分埋まった」状態を作る */
.sky__below {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon-y, 78%);
  bottom: 0;
  background: linear-gradient(180deg, #0b1c38 0%, #0a1a34 55%, var(--sl-ink) 100%);
}

/* --- 三角の太陽 -----------------------------------------------------------
   丸い太陽にしない。ダーツのフライト（羽根）＝三角形を巨大化したもの。
   黄色のベタ塗りアイコンにしない。輪郭と空気感で三角と分かる程度に留める。
   -------------------------------------------------------------------------- */
.sun-tri {
  position: absolute;
  /* 空の中に浮かべる。地平線や床の上に置かれて見えない高さに取る。
     --sun-w は三角本体の幅。コロナと光線は viewBox の外へ描くので、
     overflow: visible により箱の外まで伸びる。 */
  left: var(--sun-x, 84%);
  top: var(--sun-y, 21%);
  width: var(--sun-w, 7%);
  height: auto;
  transform: translate(-50%, calc(-100% + var(--sun-sink, 45%)));
  pointer-events: none;
  overflow: visible;
}

/* --- 三角本体 -------------------------------------------------------------
   立体物ではなく「発光する記号」。明るい芯から端へ向かって溶かし、
   底辺が地面に接する底面に見えないようにする。 */
.sun-tri__face  { fill: url(#sunGrad); }
.sun-tri__g1    { stop-color: rgba(255, 233, 199, 0.80); }   /* 芯 */
.sun-tri__g2    { stop-color: rgba(250, 198, 138, 0.60); }
.sun-tri__g3    { stop-color: rgba(232, 160, 100, 0.15); }   /* 端＝空へ溶ける */

/* 中心の芯。三角の内側だけに効かせる（clip-path） */
.sun-tri__core  { fill: url(#sunCore); }
.sun-tri__k1    { stop-color: rgba(255, 246, 228, 0.55); }
.sun-tri__k2    { stop-color: rgba(252, 214, 160, 0.18); }
.sun-tri__k3    { stop-color: rgba(248, 196, 132, 0); }

/* 輪郭は上の 2 辺のみ。小さくても三角と分かる最小限の線 */
.sun-tri__edge  { fill: none; stroke: rgba(253, 232, 200, 0.42); stroke-width: 1;
                  vector-effect: non-scaling-stroke; }

/* --- コロナ ---------------------------------------------------------------
   丸い太陽を足さない。三角そのものをぼかして 2 枚重ね、
   光の輪郭が三角に沿うようにする。強いグローにはしない。 */
.sun-tri__halo--near { fill: rgba(249, 199, 143, 0.26); filter: url(#sunHaloNear); }
.sun-tri__halo--far  { fill: rgba(236, 162, 104, 0.13); filter: url(#sunHaloFar); }

/* --- 光線 -----------------------------------------------------------------
   本体の際から始まり外へ抜けていく。棒を並べない。
   non-scaling-stroke なので画面が小さくても 0.8〜1.2px を保つ。 */
.sun-tri__rays  { stroke: url(#sunRay); stroke-linecap: round; }
.sun-tri__ray   { stroke-width: var(--rw, 1); vector-effect: non-scaling-stroke; }
.sun-tri__r1    { stop-color: rgba(255, 242, 219, 0.72); }   /* 本体際＝最も明るい */
.sun-tri__r2    { stop-color: rgba(246, 190, 132, 0.26); }
.sun-tri__r3    { stop-color: rgba(238, 172, 112, 0); }      /* 空へ消える */

/* --- ごく静かな呼吸 -------------------------------------------------------
   回転も点滅もしない。気づかない程度に留める。 */
@media (prefers-reduced-motion: no-preference) {
  .sun-tri__rays {
    animation: sunRaysBreath 9s ease-in-out infinite;
  }
  .sun-tri__corona {
    transform-box: view-box;
    transform-origin: 100px 116px;
    animation: sunCoronaBreath 11s ease-in-out infinite;
  }
}

@keyframes sunRaysBreath {
  0%, 100% { opacity: 0.86; }
  50%      { opacity: 1; }
}

@keyframes sunCoronaBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }   /* 約 2% */
}

/* ==========================================================================
   WORLD ⇄ JAPAN — 昼と夜が出会う場所（HOME 最大の見せ場）
   ========================================================================== */
.chapter--wj { background: var(--sky-night); }

/* スクロールで昼夜境界を動かすための距離。
   ステージはこの中で sticky する */
.wj__scroll {
  position: relative;
  height: 220vh;
}

.wj__stage {
  /* 月と、その夜光は同じ点を中心にする。片方だけずれないよう変数はここに置く */
  --moon-x: 9%;
  --moon-y: 44%;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* --- 昼夜境界（ターミネーター）--------------------------------------------
   50:50 に割らない。18°傾いたエッジが、スクロールで右から左へ移動する。
   --wj-split は JS が 72% → 38% へ動かす。
   -------------------------------------------------------------------------- */
.wj__sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(108deg,
    var(--sky-night) 0%,
    var(--sky-night) calc(var(--wj-split, 72%) - 5%),
    #123356 var(--wj-split, 72%),
    var(--sky-day-horiz) calc(var(--wj-split, 72%) + 6%),
    var(--sky-day-zenith) 100%);
}

/* VISION の夜からの接続。章が始まった瞬間に昼の楔が現れると、
   そこが境界だと分かってしまう。ステージが止まってしばらくの間は
   VISION 終端とまったく同じ夜で覆い、そこから昼夜境界が育つ。 */
/* 章の終わりでも同じ夜で閉じる。ステージは昼が広がったところで終わるため、
   ここで夜へ戻しておかないと、次章の夜と水平に切り替わって見える。
   昼夜境界の動き・タイポ・月・三角の太陽・軌道はそのまま。空だけを沈める。 */
.wj__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--sky-night);
  opacity: max(var(--wj-join, 1), var(--wj-exit, 0));
}

/* 星も境界で一斉に現れない。夜が明けていくのと同じ速さで浮かび上がる */
.wj__stars {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: calc(1 - var(--wj-join, 0));
}

.wj__grain {
  position: absolute; inset: 0; z-index: -1;
  /* VISION 終端の夜には粒子がない。ステージ上端でも 0.04 のまま置くと
     その差が横線に見えるため、上端だけ 0 から立ち上げる */
  opacity: 0.04;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
  background-image: var(--grain); pointer-events: none;
}

/* --- 月（WORLD 側）--------------------------------------------------------
   リアルな月面は描かない。円・欠け・光だけで抽象化する。
   -------------------------------------------------------------------------- */
.wj__moon {
  position: absolute;
  /* 「世界 → 日本」の軌道の起点付近に置く。光の出どころを構図で示す。
     viewBox は 200 角で、月の直径は箱の 52%。--moon-w は箱の幅なので、
     画面に対する月の直径は --moon-w × 0.52 になる。 */
  left: var(--moon-x);
  top: var(--moon-y);
  /* 直径 = 箱の 52%。三角の太陽（幅 13%）と釣り合う大きさにする。
     ただし月の位置は高さ比（44%）で決まるため、幅だけで決めると
     横長の画面で章見出しに乗り上げる。高さ側にも上限を置く。 */
  width: min(var(--moon-w, 18.5%), 28vh);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* ① 本体：銀白 → 淡いシルバー → ごく薄い藤色。
      「紫の月」にならないよう、藤色は影側の端にしか置かない */
.wj__moon-face { fill: url(#moonFaceWj); }
.wj__moon-f1   { stop-color: #f4f7fc; stop-opacity: 0.94; }   /* 光っている縁 */
.wj__moon-f2   { stop-color: #dfe2ee; stop-opacity: 0.78; }   /* 淡いシルバー */
.wj__moon-f3   { stop-color: #c6bfe0; stop-opacity: 0.46; }   /* 影際の藤色 */

/* ② 影：欠けた側も消さない。ここだけが藤色。
      これがあるので「三日月」ではなく「銀の球が夜に浮かんでいる」に見える */
.wj__moon-earth { fill: url(#moonEarthWj); }
.wj__moon-e1    { stop-color: #b7afdc; stop-opacity: 0.10; }
.wj__moon-e2    { stop-color: #8d84c2; stop-opacity: 0.045; }
.wj__moon-e3    { stop-color: #6f68a8; stop-opacity: 0; }

/* ③ 外側：深い青紫。輪郭を持たせない。ネオンにしない */
.wj__moon-halo { fill: url(#moonHaloWj); }
.wj__moon-h1   { stop-color: #a79ee0; stop-opacity: 0.17; }   /* 本体の縁 */
.wj__moon-h2   { stop-color: #8f85d2; stop-opacity: 0.098; }
.wj__moon-h3   { stop-color: #6a63b4; stop-opacity: 0.046; }
.wj__moon-h4   { stop-color: #45437f; stop-opacity: 0.016; }
.wj__moon-h5   { stop-color: #2f3169; stop-opacity: 0; }

.wj__moon-edge { fill: none; stroke: #dcdff0; stroke-width: 1; opacity: 0.20;
                 vector-effect: non-scaling-stroke; }

/* 夜空そのものへのにじみ。月を「夜側の光源」にするための最外層。
   月の SVG より広く、はるかに薄い。境界も輪郭も出さない。 */
.wj__moonlight {
  position: absolute;
  left: var(--moon-x);
  top: var(--moon-y);
  /* にじみがステージ上端に届くと、VISION との継ぎ目で切り口が出る。
     半径（幅の半分）が月の中心の高さ 44vh を超えないようにする。 */
  width: min(var(--moonlight-w, 54%), 86vh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle closest-side,
    rgba(132, 122, 202, 0.16) 0%,
    rgba(90, 84, 166, 0.095) 30%,
    rgba(56, 58, 122, 0.042) 56%,
    rgba(36, 40, 88, 0.016) 74%,
    transparent 100%);
}

/* --- 三角の太陽（JAPAN 側）------------------------------------------------
   この章では完全に昇りきっている。ロゴのように乱用せず、ここでは 1 つだけ。
   -------------------------------------------------------------------------- */
.wj__sun {
  position: absolute;
  left: var(--wjsun-x, 79%);
  top: var(--wjsun-y, 21%);
  width: var(--wjsun-w, 13%);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* --- 2本の軌道 ------------------------------------------------------------
   JAPAN → WORLD と WORLD → JAPAN。1点で交差する。
   -------------------------------------------------------------------------- */
.wj__paths {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.wj__paths--sp { display: none; }

@media (max-width: 767.98px) {
  .wj__paths--pc { display: none; }
  .wj__paths--sp { display: block; }
}

/* 軌道線の材質。WORLD ⇄ JAPAN の軌道 a と終章の軌道は
   接続点でつながる「1 本の同じ線」なので、
   色・太さ・線端・スケール非依存は ここ 1 か所だけで定義して共有する。
   片方だけ数値を変えると接続点で材質が変わってしまうため、
   これらを個別に上書きしないこと。 */
.wj__path,
.coda__trace {
  fill: none;
  stroke: var(--trace);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;   /* 非等比スケールでも 1px を保つ */
}

/* 描き進みの状態だけは、線ごとに別の変数で持つ */
.wj__path {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--dash, 2000);
}

/* a（日本 → 世界・白）は上の共通定義そのまま。終章の軌道と同じ材質になる */
.wj__path--b { stroke: var(--metal-200); opacity: 0.72; }  /* 世界 → 日本（銀） */

/* --- 巨大タイポ -----------------------------------------------------------
   左右対称にしない。JAPAN を小さく高く、WORLD を大きく低く。
   両端で断ち切る。
   -------------------------------------------------------------------------- */
.wj__label {
  position: absolute;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--metal-100);
  pointer-events: none;
}

.wj__label--world {
  left: -3.5%;
  top: 70%;
  transform: translateY(-50%);
  font-size: 15vw;
}

.wj__label--japan {
  right: -3%;
  top: 28%;
  transform: translateY(-50%);
  font-size: 12.5vw;                     /* JAPAN を小さく。事実を構図で述べる */
  /* 昼側は背景が明るいため、輪郭にごく薄い陰を置いて可読性を守る */
  text-shadow: 0 1px 24px rgba(4, 10, 24, 0.45);
}

/* --- 交点 = STEEL LIVE ----------------------------------------------------
   派手に発光させない。小さな着弾点だけで表現する。
   位置は JS が軌道の実座標から算出して CSS 変数に入れる。
   -------------------------------------------------------------------------- */
.wj__cross {
  position: absolute;
  z-index: 2;
  left: var(--cross-x, 52%);
  top: var(--cross-y, 71%);
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) scale(var(--cross-s, 0));
  border: 1px solid var(--metal-100);
  border-radius: 50%;                    /* 着弾点のみ円を許容 */
  background: rgba(242, 244, 246, 0.14);
  transition: transform var(--dur-base) var(--ease);
  pointer-events: none;
}

.wj__mark {
  position: absolute;
  z-index: 2;
  left: var(--cross-x, 52%);
  top: calc(var(--cross-y, 71%) + 22px);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--metal-100);
  text-shadow: 0 1px 12px rgba(4, 10, 24, 0.55);
  opacity: var(--mark-o, 0);
  transition: opacity var(--dur-slow) var(--ease);
  white-space: nowrap;
  pointer-events: none;
}

/* --- 第二コピー -----------------------------------------------------------
   2 本の軌道に沿わせる。角度と位置は JS が実測して与える。
   -------------------------------------------------------------------------- */
.wj__copy {
  position: absolute;
  z-index: 0;                            /* 巨大タイポの背面を通す */
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  transform: translate(-50%, -50%) rotate(var(--cr, 0deg));
  transform-origin: 50% 50%;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--metal-100);
  text-shadow: 0 1px 12px rgba(4, 10, 24, 0.45);
  opacity: 0.55;
  white-space: nowrap;
  pointer-events: none;
}

/* 軌道上での既定位置（JS が角度を実測して付与する） */
.wj__copy--a { --cx: 61%;   --cy: 57.8%; }
.wj__copy--b { --cx: 72.9%; --cy: 87%; }

/* うまの助は交点の少し下・わずかに右 */
/* 交点の下。768〜1920px の全域で WORLD / JAPAN / 第二コピー / 刻印と
   重ならない位置を実測で選定（768/900/1024/1200/1440 で検証済み） */
.uma-slot { --uma-x: 50%; --uma-y: 80%; }

/* --- 章見出し（ステージ内の左上）------------------------------------------ */
.wj__head {
  position: absolute;
  z-index: 3;
  left: max(var(--gutter), env(safe-area-inset-left));
  top: calc(var(--header-h-lg) + var(--sp-4));
  max-width: min(30rem, 46%);
}

/* ステージ内の見出しは、巨大タイポと張り合わせない。
   主役は WORLD / JAPAN と軌道であり、見出しは説明側に回す */
.wj__head .chapter-title {
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.5rem);
  margin-top: var(--sp-3);
}

.wj__head .statement--lg { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); }

/* ==========================================================================
   うまの助 — スロットのみ（正式素材は未受領）
   --------------------------------------------------------------------------
   交点から「生まれる」演出にしすぎない。
   世界と日本をつないだあと、緊張感のある画面に初めて人間味が入る瞬間。
   飛び出す・跳ねる・光る演出は実装しない。

   構造契約:
     状態は data-uma-state のみで制御（hidden / peek / half / full）
     中身は img / svg / canvas / Rive いずれにも差し替え可能
     位置とサイズは CSS 変数で外部制御
     装飾要素のため aria-hidden="true"
   ========================================================================== */
.uma-slot {
  position: absolute;
  z-index: 2;
  left: var(--uma-x, 52%);
  top: var(--uma-y, 78%);
  /* 高さを基準に、素材の比率 347:384 から幅を算出する。
     幅と高さを別々に指定すると 1px 未満のズレで足元が切れる。 */
  height: var(--uma-h, 128px);
  width: calc(var(--uma-h, 128px) * 347 / 384);
  /* 2.5D: スクロール連動のごく僅かな上下移動と傾き。
     クリップごと動かすため、頭部・足元が切れない。 */
  transform: translateX(-50%)
             translateY(var(--uma-shift, 0px))
             rotate(var(--uma-tilt, 0deg));
  transform-origin: 50% 100%;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

.uma-slot__img {
  display: block;
  height: 100%;
  width: auto;
}

/* 状態は「見えている高さ」だけで表現する。跳ねさせない・光らせない */
.uma-slot[data-uma-state="hidden"] { --uma-reveal: 0%; }
.uma-slot[data-uma-state="peek"]   { --uma-reveal: 22%; }
.uma-slot[data-uma-state="half"]   { --uma-reveal: 55%; }
.uma-slot[data-uma-state="full"]   { --uma-reveal: 100%; }

.uma-slot__inner {
  position: absolute;
  inset: 0;
  /* 上から順に見えてくる（＝顔から出る）。下からせり上がらせない */
  clip-path: inset(0 0 calc(100% - var(--uma-reveal, 0%)) 0);
  transition: clip-path var(--dur-slow) var(--ease);
}

/* --- 雷の反射 --------------------------------------------------------------
   STEEL × LIGHTNING を示す、一度だけの反射。
   黒鉄の面が雷色を「拾う」程度に留める。
   身体を走り続ける線・ネオン・全身発光はしない。
   マスクにうまの助の PNG を使い、シルエットの内側だけを光らせる。
   -------------------------------------------------------------------------- */
.uma-slot__flash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: url("/assets/img/umanosuke.png");
          mask-image: url("/assets/img/umanosuke.png");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

.uma-slot__flash::before {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 55%;
  background: linear-gradient(104deg,
    transparent 0%,
    rgba(245, 208, 106, 0.50) 50%,
    transparent 100%);
  transform: translateX(-140%);
}

/* 一度きり。JS が data-uma-flash を一度だけ付与し、以後外さない */
.uma-slot[data-uma-flash="done"] .uma-slot__flash {
  animation: umaFlashFade 1100ms var(--ease) both;
}

.uma-slot[data-uma-flash="done"] .uma-slot__flash::before {
  animation: umaFlashSweep 1100ms var(--ease) both;
}

@keyframes umaFlashFade {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes umaFlashSweep {
  0%   { transform: translateX(-140%); }
  100% { transform: translateX(260%); }
}

/* ==========================================================================
   iPhone（〜767px）— PC を縮小しただけにしない
   縦方向の物語として組み替える:
     夜（上） → 昼（下） / WORLD（上） → JAPAN（下） / 軌道は上下から交差
   ========================================================================== */
@media (max-width: 767.98px) {

  .wj__scroll { height: 240vh; }

  /* 境界を水平にする。上が昼（日本）、下が夜（世界）。
     8deg は下から上へ向かう軸。--wj-split が縮むほど昼が下へ広がり、
     「日本から世界へ届いていく」動きになる */
  .wj__sky {
    background: linear-gradient(8deg,
      var(--sky-night) 0%,
      var(--sky-night) calc(var(--wj-split, 66%) - 6%),
      #123356 var(--wj-split, 66%),
      var(--sky-day-horiz) calc(var(--wj-split, 66%) + 8%),
      var(--sky-day-zenith) 100%);
  }

  /* iPhone の縦構成（上から下へ）
       見出し → 三角の太陽 → JAPAN → 軌道 → 交点 → うまの助 → 月 → WORLD
     日本から始まり、世界へ着く順に読ませる。
     端で断ち切る組版は PC のみ。スマホでは単語全体が画面に収まるようにする。
     字幅も vw で決まるので、内側へ入れた分だけ字を落として比率を保つ。 */
  .wj__label--japan {
    right: 2.5%;
    left: auto;
    top: 37%;                 /* 下げて、第二コピーとの間を詰める */
    font-size: 20.5vw;
  }

  .wj__label--world {
    left: 2.5%;
    right: auto;
    top: 92%;                 /* うまの助との間を空けるため下げる */
    font-size: 23.5vw;
  }

  /* 縦一画面に収めるため、ステージ内の見出しは最小構成にする。
     主役は WORLD / JAPAN と軌道であり、見出しではない */
  .wj__head .label           { font-size: 9px; letter-spacing: 0.16em; }
  .wj__head .chapter-title   { font-size: 1.4rem; margin-top: var(--sp-2); }
  .wj__head .statement--lg   { font-size: 0.8125rem; margin-top: var(--sp-3) !important; }

  /* 三角の太陽は昼側（上・JAPAN の空）、月は夜側（下・WORLD の空）。
     太陽は VISION から続く一本の軌道が横切る位置に置く */
  /* 太陽と月は JAPAN の下の帯に、左右一組で置く。
     中心を 28% / 72% に取り、画面中央から等距離にする。
     三角は全体を画面内に入れる（固定ヘッダーの下・JAPAN の上には
     78px しか空きがなく収まらないため、JAPAN の下の 100px の帯を使う）。 */
  .wj__sun       { --wjsun-x: 28%; --wjsun-y: 48%; --wjsun-w: 22%; }
  .wj__stage     { --moon-x: 72%; --moon-y: 48%; }
  .wj__moon      { --moon-w: 34%; }        /* 直径 17.7% */
  .wj__moonlight { --moonlight-w: 96%; }

  /* 交点はモバイル用軌道の交差位置（50%, 60%）に合わせる */
  .wj__cross { --cross-x: 50%; --cross-y: 60%; }
  .wj__mark  { --cross-x: 50%; --cross-y: 60%; }

  /* 縦軌道に沿わせると読めないため、コピーは水平のまま交点の上に置く */
  .wj__copy { transform: translate(-50%, -50%); font-size: 9.5px; letter-spacing: 0.2em; }
  .wj__copy--a { --cx: 50%; --cy: 54.5%; }
  .wj__copy--b { --cx: 50%; --cy: 67%; }
  /* うまの助は第二コピーの下。ここから WORLD までは
     「世界へ向かっている」と感じられるだけの間を空ける（実測で最適化） */
  .uma-slot    { --uma-x: 50%; --uma-y: 69%; }

  .wj__head {
    top: calc(var(--header-h) + var(--sp-3));
    max-width: 86%;
  }

  .uma-slot { --uma-h: 92px; }

  /* STATEMENT
     SP は見出しが画面幅いっぱいに広がるため、PC のように横へ逃がせない。
     見出しの上に空いている 142px の空へ、三角を収まる大きさで置く。
     48% のままだと高さ 163px となり、必ず本文と重なる。 */
  .sun-tri { --sun-w: 9.5%; --sun-x: 72%; --sun-y: 19%; }
  .chapter--dawn { --horizon-y: 72%; }
}

/* ==========================================================================
   モーション低減
   すべての章が「変化」を前提にしているため、
   各章の完成形の 1 フレームを静止状態として成立させる。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* VISION: 場面の出入りも段階演出も止め、すべて表示済みの状態にする */
  .vis-scene__num, .vis-scene__line, .vis-scene__sub, .vis-scene__final,
  .vis-scene__mega { opacity: 1; transform: none; }
  /* VISION: 段階演出を止め、雨と虹が既に生まれている一枚として見せる */
  .vis__in  { --vdash: 0; }
  /* 出口の軌道は静止状態でも見せる。ここが WORLD ⇄ JAPAN の軌道 a へ
     つながる一本なので、消すと次章の線が宙から始まってしまう。
     濃さは --trace に合わせ、継ぎ目で明るさが変わらないようにする。 */
  .chapter--prism .vis__out { --odash: 0; opacity: 0.55; stroke: var(--trace); }
  .vis__spark { opacity: 0; }
  .vis__rain  { opacity: 1; }
  .vis__drop  { opacity: 0.45; }
  .vis__sun   { opacity: 0.6; animation: none; }
  .vis__bow   { opacity: 0.85; }
  .chapter--prism { --vis-bow: 0.85; --vis-narrow: 0; --vis-dusk: 0.55; --vis-star: 1; }
  :root { --stars-in: 1; --stars-out: 1; }   /* 星は出そろった一枚として静止 */
  .vis__star { transform: none; }

  /* BUSINESS: 進行に合わせた描画も光点の移動も雷も止め、静的な一枚の空にする */
  .biz__trunk, .biz__branch, .biz__out { --bdash: 0; }
  .biz__spark { opacity: 0; }
  .biz__mono  { opacity: 0.16; animation: none; }   /* 薄い静的な星座として成立させる */
  .biz__bolt  { animation: none; opacity: 0; }
  .chapter--day .sky::before { opacity: 0.6; }

  .wj__sky   { --wj-split: 54%; }        /* 昼夜の中間で固定 */
  .wj__stage { --wj-join: 0; --wj-exit: 0; }
  .wj__path  { stroke-dashoffset: 0; }   /* 軌道は描画済みで固定 */
  .wj__cross { transform: translate(-50%, -50%) scale(1); }
  .wj__mark  { opacity: 0.75; }
  /* うまの助は全身表示で固定。2.5D と雷反射は停止するが、表示自体は正常に */
  .uma-slot  { --uma-reveal: 100%; --uma-shift: 0px; --uma-tilt: 0deg; }
  .uma-slot__inner { transition: none; }
  .uma-slot[data-uma-flash="done"] .uma-slot__flash,
  .uma-slot[data-uma-flash="done"] .uma-slot__flash::before { animation: none; }
  .uma-slot__flash { opacity: 0; }
}

/* ==========================================================================
   ══ PHASE 2 ══  情報を増やすのではなく、余韻を増やす。
   --------------------------------------------------------------------------
   HOME 全体を、章の切れ目のない一枚の空にする。
   各章の背景は「前章の下端の色」から始め、「次章の上端の色」で終える。
   ========================================================================== */

/* ==========================================================================
   BUSINESS — 青空（11:00）  JAPAN → DIGITAL → AI → WORLD
   爽やかな水色にはしない。深度のある青と、白い光の帯と、広い余白で
   「世界へ開かれている空間」を作る。
   ========================================================================== */
.chapter--day {
  background: linear-gradient(180deg,
    var(--sky-dawn-2) 0%,
    #164a8f 46%,
    #17509c 100%);
}

/* 白い光の帯。面ではなく帯で入れる。雲は描かない */
.chapter--day .sky::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -30%;
  width: 90%;
  height: 150%;
  transform: rotate(24deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.055) 45%,
    rgba(255, 255, 255, 0.085) 55%,
    transparent 100%);
}

/* 事業カテゴリ名。見出しの直上に置く小見出し。
   01 → 04 の広がりは、行のインデントと章を貫く軌道が担う */
.index-row__cat {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--metal-200);
  opacity: 0.66;
  margin-bottom: var(--sp-2);
}

@media (min-width: 900px) {
  /* 04 へ進むほど左インデントが深まり、視野が開いていく */
  .chapter--day .index-row { padding-left: var(--row-indent, 0); }
  .chapter--day .index-row:nth-child(2) { --row-indent: 2.5%; }
  .chapter--day .index-row:nth-child(3) { --row-indent: 5%; }
  .chapter--day .index-row:nth-child(4) { --row-indent: 7.5%; }

  /* 番号 / 見出し / 説明 の 3 列。見出しが泣き別れしない幅を確保する */
  .chapter--day .index-row { grid-template-columns: 5rem minmax(0, 1.5fr) minmax(0, 0.78fr); }
  /* 見出しは 4 行とも同じサイズ。強弱は行の余白とインデントで付ける */
  .chapter--day .index-row__title { font-size: clamp(1.375rem, 0.85rem + 1.5vw, 2.5rem); }
}

/* --- 章を貫く一本の軌道（座標は JS が実測） ---------------------------------
   カードを囲う線ではなく、空間を通過する飛行軌道として扱う。
   01 地平線 → 02 交差 → 03 分岐 → 04 再収束 → VISION のプリズム入射点へ。 */
.biz__trace { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.biz__trace path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* 01 遠くの地平線。線というより気配 */
.biz__horizon { stroke: var(--trace-dim); opacity: 0.42; }

/* 幹・分岐・出口。章の進行に合わせて描かれていく */
.biz__trunk, .biz__branch, .biz__out {
  stroke: rgba(242, 244, 246, 0.40);
  stroke-dasharray: var(--blen, 2000);
  stroke-dashoffset: var(--bdash, 0);
}
/* 03 の分岐は幹よりさらに細く見せる。線幅は変えず不透明度で差をつける */
.biz__branch { opacity: 0.42; }
.biz__branch[style*="--bi:1"] { opacity: 0.68; }

/* 04 のあと、余白を上へ膨らんでから抜けていく一本。
   わずかにシャンパンを混ぜて「出口」だけ温度を変える */
.biz__out { stroke: rgba(246, 236, 214, 0.42); }

/* 02 世界からの 2 本目。両端は空へ溶かす */
.biz__counter { stroke: url(#bizCounter); opacity: 0.7; }
.biz__cs0 { stop-color: rgba(242, 244, 246, 0); }
.biz__cs1 { stop-color: rgba(242, 244, 246, 0.26); }

/* 各節の極小の光点 */
.biz__node  { fill: var(--metal-100); opacity: 0.42; }
/* 軌道上を進む光点。スクロールに紐づくので勝手には動かない */
.biz__spark { fill: rgba(255, 248, 232, 0.9); }

/* --- いっかくじゅう座 -------------------------------------------------------
   昼の空にほとんど見えない。軌道の光点がその高さを通るときだけ、
   --mono-o が上がってごく淡く浮かび、通り過ぎればまた空へ溶ける。 */
.biz__mono  { opacity: calc(0.06 + 0.40 * var(--mono-o, 0)); }

/* 3 秒ごとに一度だけ、星座がふっと強くなる。
   基準の明るさはスクロール（--mono-o）が決めるので、
   キーフレーム側もその値を土台にして持ち上げるだけにする。 */
@media (prefers-reduced-motion: no-preference) {
  .biz__mono { animation: bizMonoFlash 3000ms linear infinite; }
}
@keyframes bizMonoFlash {
  0%, 86% { opacity: calc(0.06 + 0.40 * var(--mono-o, 0)); }
  89%     { opacity: calc(0.34 + 0.62 * var(--mono-o, 0)); }
  100%    { opacity: calc(0.06 + 0.40 * var(--mono-o, 0)); }
}
.biz__star  { fill: rgba(255, 252, 244, 0.95); }
.biz__cline { stroke: rgba(233, 240, 250, 0.17); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* 狭い画面では軌道が本文の上を通る割合が増えるため、線をさらに引く */
@media (max-width: 767.98px) {
  .biz__trunk, .biz__branch, .biz__out { stroke: rgba(242, 244, 246, 0.29); }
  .biz__out    { stroke: rgba(246, 236, 214, 0.31); }
  .biz__counter { opacity: 0.5; }
  .biz__cline  { stroke: rgba(233, 240, 250, 0.14); }
  .biz__node   { opacity: 0.34; }
}

/* --- 雷。雲の奥で一度だけ光る ---------------------------------------------- */
.biz__bolt {
  stroke: rgba(250, 236, 206, 0.85);
  stroke-width: 1;
  stroke-linejoin: round;
  opacity: 0;
}
/* 章に入ってから、2〜4 秒の不規則な間隔で光り続ける。
   9 秒周期の中に 3 回、等間隔でない位置に置くことで、
   間隔が 2.2 → 3.5 → 3.3 秒と変化し、規則的に見えない。
   1 回の発光は 0.3 秒前後。それ以外は完全に消えている。 */
.chapter--day[data-biz-bolt="done"] .biz__bolt {
  animation: bizBolt 9000ms linear infinite;
}
@keyframes bizBolt {
  0%,  17%  { opacity: 0; }
  18%       { opacity: 1; }
  19.4%     { opacity: 0.15; }
  20.4%     { opacity: 0.72; }
  21.5%     { opacity: 0; }

  41.4%     { opacity: 0; }
  42.4%     { opacity: 0.96; }
  43.8%     { opacity: 0.2; }
  44.8%     { opacity: 0.64; }
  45.9%     { opacity: 0; }

  80.3%     { opacity: 0; }
  81.3%     { opacity: 0.88; }
  82.7%     { opacity: 0.14; }
  83.7%     { opacity: 0.58; }
  84.8%     { opacity: 0; }
  100%      { opacity: 0; }
}

/* --- 時間の推移。朝の濃い青 → 澄んだ昼 → 白い光が混じる青 ------------------
   気づくか気づかないか程度。面で塗らず、上に薄い層を重ねるだけ。 */
.chapter--day .sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(9, 28, 66, 0.34) 0%,
    rgba(9, 28, 66, 0) 38%,
    rgba(255, 255, 255, 0) 62%,
    rgba(226, 238, 252, 0.10) 100%);
  opacity: calc(0.35 + 0.65 * var(--biz-t, 0));
}

.index-list, .chapter--day .container { position: relative; z-index: 1; }

/* ==========================================================================
   VISION — 分光（15:00）
   虹は「軌道が三角を通過した結果」としてのみ発生する。
   七色にしない。半円にしない。5 本・低彩度・必ず 1 本に戻る。
   ========================================================================== */
/* VISION の空は「時間そのもの」。章の高さ全体を使って
   昼 → 午後 → 夕方 → 薄暮 → 夜 へ進む。
   上端は BUSINESS の終端色、下端は WORLD ⇄ JAPAN の夜色に完全一致させ、
   セクション境界に色差が出ないようにする。 */
.chapter--prism {
  background: linear-gradient(180deg,
    #17509c 0%,      /* BUSINESS 終端と同色。継ぎ目を作らない */
    #1a5aa8 16%,     /* 01 昼 */
    #17539c 34%,     /* 02 光がわずかに柔らぐ */
    #16498c 52%,     /* 03 午後 */
    #17407a 68%,     /* 虹のあと、夕方へ */
    #15325f 80%,     /* 薄暮 */
    #101f3f 88%,
    #0b1228 93%,
    var(--sky-night) 97%,     /* ここで夜に到達し、*/
    var(--sky-night) 100%);   /* 最後は平らなまま WORLD ⇄ JAPAN と同色で終わる */
}

/* 夕方の残光。空全体をオレンジにしない。
   地平寄りの低い位置に、ごく薄い暖色と紫を置くだけ。
   スクロール進行（--vis-dusk）で静かに濃くなる。 */
.chapter--prism::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 26% at 70% 72%, rgba(238, 172, 126, 0.16) 0%, transparent 64%),
    radial-gradient(110% 24% at 26% 79%, rgba(146, 118, 190, 0.13) 0%, transparent 68%),
    radial-gradient(140% 20% at 52% 86%, rgba(226, 150, 138, 0.09) 0%, transparent 70%);
  opacity: var(--vis-dusk, 0);
}

.prism { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vis__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 前章から受け取る一本の軌道と、最後に一本へ戻る光 */
/* 線そのものを見せたいのではない。光点が主役で、線はその軌跡 */
.vis__in, .vis__out {
  fill: none;
  /* 夜に近づくほど、同じ一本の軌道が少しだけ認識しやすくなる */
  /* 夜に近づくほど認識しやすくなり、章の終端で WORLD ⇄ JAPAN の
     --trace (0.55) と同じ濃さに達する。継ぎ目で明るさが変わらない */
  stroke: rgba(242, 244, 246, calc(0.22 + 0.33 * var(--vis-dusk, 0)));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* 軌道は「いま見ている高さ」まで描かれる（進行は JS が実測で決める） */
.vis__in  { stroke-dasharray: var(--vlen, 2000); stroke-dashoffset: var(--vdash, 2000); }
.vis__out { stroke-dasharray: var(--olen, 2000); stroke-dashoffset: var(--odash, 0); }

/* 軌道の先端を先導する極小の光点。BUSINESS と同じ扱い */
.vis__spark { fill: rgba(255, 252, 244, 0.95); opacity: 0; }
/* 出口の光は虹が細り始めてから現れる。
   常時出していると、太陽から線が伸びているように見えてしまう。 */
.vis__out { opacity: var(--vis-narrow, 0); }

/* 02 雲の気配。輪郭は描かない */
.vis__cloud { fill: rgba(255, 255, 255, 0.035); }

/* 雨。細く、静かに。本数は JS が段階的に増やす */
.vis__rain {
  stroke: rgba(226, 238, 252, 0.34);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: opacity 420ms var(--ease);
}
/* 雨粒に反射する色。虹が生まれてから灯る */
.vis__drop { opacity: 0; transition: opacity 520ms var(--ease); }

/* --- 最初の星 -------------------------------------------------------------
   昼から夜へ変わったことを示す 1 つだけの星。
   ★ の形にしない。中心の一点と、そこから伸びる非常に細い光で作る。
   瞬かせない・ループさせない。一度灯ったら灯ったまま。
   -------------------------------------------------------------------------- */
.vis__star {
  opacity: var(--vis-star, 0);
  transform: scale(calc(0.82 + 0.18 * var(--vis-star, 0)));
  /* 拡大の中心は星そのもの。user space の座標指定は単位が必要なため、
     図形自身の外接矩形を基準にする */
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.vis__star-halo { fill: url(#visStarHalo); }
.vis__star-ray  { fill: url(#visStarFade); }
.vis__star-ray--x { opacity: 0.72; }
.vis__star-core { fill: #fffdf6; }

/* 光は中心だけが明るく、外へ向かって完全に消える */
.vis__s0 { stop-color: #fffdf6; stop-opacity: 0.92; }
.vis__s1 { stop-color: var(--champagne, #efe0c2); stop-opacity: 0.34; }
.vis__s2 { stop-color: var(--champagne, #efe0c2); stop-opacity: 0; }
.vis__h0 { stop-color: #f6ecd8; stop-opacity: 0.07; }
.vis__h1 { stop-color: #f6ecd8; stop-opacity: 0; }

/* 三角の太陽。STATEMENT と同じ図形・同じ塗りをそのまま使う。
   プリズムではない。雨と出会ったとき、一度だけ強く光る。 */
.vis__sun { opacity: 0; }  /* 光量の減衰は JS が opacity で行う */
@media (prefers-reduced-motion: no-preference) {
  .chapter--prism[data-vis-flash="done"] .vis__sun {
    animation: visSunFlash 1400ms var(--ease) 1;
  }
}
@keyframes visSunFlash {
  0%   { filter: none; }
  16%  { filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55))
                drop-shadow(0 0 46px rgba(246, 214, 158, 0.40)); }
  46%  { filter: drop-shadow(0 0 22px rgba(246, 208, 148, 0.42))
                drop-shadow(0 0 64px rgba(232, 150, 86, 0.30)); }
  100% { filter: none; }
}

/* --- 虹 -------------------------------------------------------------------
   半円のイラストにしない。光の帯・細い色の線・淡い霧を重ね、
   「空気そのものに色が現れた」ように見せる。 */
.vis__bow {
  opacity: var(--vis-bow, 0);
  /* 夕方へ向かうにつれて彩度が落ち、色ではなく光になっていく */
  filter: saturate(calc(1 - 0.55 * var(--vis-dusk, 0)));
}

/* 光の帯。太くごく薄い */
.vis__band {
  fill: none;
  stroke: rgba(255, 246, 232, 0.10);
  stroke-width: calc(14px + 26px * var(--vis-bow, 0));
  stroke-linecap: round;
  opacity: calc(0.5 * (1 - 0.75 * var(--vis-narrow, 0)));
}
/* 細い色の線。6 色。虹が細るにつれて消え、白い一本へ戻る */
.vis__line {
  fill: none;
  stroke-width: calc(1px + 2.4px * var(--vis-bow, 0));
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: calc((0.34 + 0.62 * var(--vis-bow, 0)) * (1 - var(--vis-narrow, 0)));
}
/* 淡い霧状の色 */
.vis__mist { fill: url(#visMist); opacity: calc(0.9 * (1 - 0.8 * var(--vis-narrow, 0))); }
.vis__m0 { stop-color: rgba(255, 236, 206, 0.16); }
.vis__m1 { stop-color: rgba(196, 214, 240, 0.09); }
.vis__m2 { stop-color: rgba(160, 190, 232, 0); }

@media (max-width: 767.98px) {
  /* 狭い画面では虹が見出しの上を通る割合が増えるため、色を引いて可読性を優先する */
  .vis__band { stroke-width: calc(9px + 13px * var(--vis-bow, 0)); }
  .vis__line {
    stroke-width: calc(1px + 1.6px * var(--vis-bow, 0));
    opacity: calc((0.22 + 0.40 * var(--vis-bow, 0)) * (1 - var(--vis-narrow, 0)));
  }
  .vis__rain { stroke: rgba(226, 238, 252, 0.30); }
  .vis__mist { opacity: calc(0.6 * (1 - 0.8 * var(--vis-narrow, 0))); }
}

/* 02「融合」だけ、文字を象徴として少し大きく */
.beat__key {
  font-style: normal;
  font-size: 1.35em;
  letter-spacing: 0.04em;
}

.chapter--prism .container { position: relative; z-index: 1; }

/* ==========================================================================
   VISION の 4 場面
   --------------------------------------------------------------------------
   読むリストにしない。1 場面ずつスクロールで通過していく構成。
   場面の高さは 72〜85vh。100vh を機械的に並べると
   「青いだけの画面」が生まれるため、必ず次の場面が下から覗く高さにする。
   巨大文字も viewport の外へは逃がさない。全部読めることを優先する。
   ========================================================================== */
.vis-head { padding-bottom: clamp(var(--sp-5), 7vh, var(--sp-7)); }

.vis-scenes { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }

.vis-scene {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72vh;
  min-height: 72svh;
}
.vis-scene--2 { min-height: 76vh; min-height: 76svh; }
.vis-scene--3 { min-height: 85vh; min-height: 85svh; }   /* 雨 → 太陽 → 虹の場面 */
.vis-scene--4 { min-height: 78vh; min-height: 78svh; }

/* 現れて、遠ざかる。--s は「画面中央にどれだけ近いか」を JS が入れる */
.vis-scene__num,
.vis-scene__line,
.vis-scene__mega,
.vis-scene__sub,
.vis-scene__final {
  opacity: calc(0.22 + 0.78 * var(--s, 1));
  transform: translateY(calc((1 - var(--s, 1)) * 14px));
  will-change: opacity, transform;
}

.vis-scene__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  color: var(--fg-dim);
  margin-bottom: clamp(var(--sp-3), 2.6vh, var(--sp-5));
}
.vis-scene__num--tiny { font-size: 0.6875rem; }

.vis-scene__line {
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: clamp(1.625rem, 4.4vw, 4rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--metal-100);
  margin: 0;
  max-width: 20em;
}

/* 02 の英字 */
.vis-scene__line--en {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.125rem, 2.9vw, 2.5rem);
  letter-spacing: 0.02em;
  line-height: 1.35;
  max-width: none;
}
.vis-scene__x {
  display: inline-block;
  margin: 0 clamp(0.4rem, 1.4vw, 1.25rem);
  color: var(--champagne);
  opacity: 0.7;
  font-weight: var(--fw-medium);
}

/* 「融合」＝ 02 の主役。コンテナの内側に置き、2 文字とも必ず収まる大きさにする。
   1440px で 416px/字 ＝ 840px（コンテナ 1282px）。320px でも 194px（同 272px）。 */
.vis-scene__mega {
  margin: clamp(var(--sp-3), 2.2vh, var(--sp-5)) 0 0;
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: clamp(4.5rem, 30vw, 26rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: rgba(232, 242, 255, 0.16);
  user-select: none;
}

/* 03 AI */
.vis-scene__line--ai {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -0.01em;
  max-width: none;
}
.vis-scene__sub {
  font-family: var(--font-serif-jp);
  font-size: clamp(1rem, 1.7vw, 1.75rem);
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--fg);
  margin: clamp(var(--sp-3), 2.4vh, var(--sp-5)) 0 0;
}

/* 04 結論。中央に置き、必ず全文読める大きさにする */
.vis-scene--4 .container { text-align: center; }
.vis-scene__final {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  /* 768〜1920px で 1 行に収まる上限（実測） */
  font-size: clamp(2rem, 5.6vw, 5.25rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--metal-100);
  margin: 0;
}
.vis-scene__w { display: inline; }

@media (max-width: 767.98px) {
  .vis-scene   { min-height: 70svh; }
  .vis-scene--2 { min-height: 74svh; }
  .vis-scene--3 { min-height: 84svh; }
  .vis-scene--4 { min-height: 74svh; }
  /* SP は 3 行で組む。1 行では文字が小さくなりすぎる */
  .vis-scene__w { display: block; }
  .vis-scene__final { font-size: clamp(2rem, 11vw, 3.25rem); }
  .vis-scene__line--en { font-size: clamp(1.0625rem, 5.4vw, 1.5rem); }
  .vis-scene__x { display: block; margin: 0.12em 0; }
}

/* ==========================================================================
   COMPANY — 月（19:30）
   世界へ広がった物語が、会社という現実へ戻ってくる。
   紙面はカードにしない。画面を大きく断ち切る面として使う。
   ========================================================================== */
.chapter--moon {
  /* 月だけを見せる画面は持たない。RECRUIT の夜空から、
     夜明け前 → 白い光 → 紙面 へ、止まる場所を作らずに明度だけを上げる。
     グラデーションの高さを実寸で固定し、紙面が始まる位置と正確に合わせる。 */
  --dawn-h: clamp(215px, 30vh, 380px);
  padding-block: var(--dawn-h) 0;
  background:
    linear-gradient(180deg,
      #04060f 0%,        /* RECRUIT の終端色 */
      #070c1c 13%,       /* 夜 */
      #101a36 30%,       /* 夜明け前 */
      #2b3a5e 47%,
      #5e6a86 63%,
      #949aa4 76%,       /* ここから青みを抜き、紙の色へ寄せていく */
      #c2c2be 87%,
      #e3e1db 95%,
      var(--sl-paper) 100%)
      top / 100% var(--dawn-h) no-repeat,
    var(--sl-paper);
}

/* 月光に照らされた紙面。全幅で断ち切る。角丸なし、枠なし */
/* 夜明けを受けた紙面。上端で断ち切らない。
   白い罫線と落ち影は、明度で連続させる今回の接続では境界線になるため置かない。 */
.paper-plane {
  position: relative;
  background: var(--sl-paper);
  color: var(--sl-paper-dim);
  padding-block: clamp(40px, 4.5vw, 84px) clamp(72px, 10vw, 180px);
}

.paper-plane h2,
.paper-plane h3,
.paper-plane .chapter-title { color: var(--sl-paper-ink); }
.paper-plane .label         { color: var(--sl-paper-dim); }
.paper-plane .label::before { background: var(--sl-paper-line); }
.paper-plane .link          { color: var(--sl-paper-ink); }
.paper-plane .note          { color: var(--sl-paper-dim); }
.paper-plane .slot {
  border-color: #a8912a;
  background: rgba(168, 145, 42, 0.08);
  color: #6d5c14;
}

/* 下層ページ（一覧 / 詳細 / ポリシー / 404）の空 */

/* narrow コンテナでは --fs-2xl が広すぎ、見出しが語中で折れる */
.chapter--news-page .chapter-title {
  font-size: clamp(1.625rem, 1rem + 2.4vw, 3.25rem);
}

.chapter--news-page {
  background: linear-gradient(180deg, var(--sky-predawn) 0%, #0b1226 40%, #0a1020 100%);
  min-height: 78vh;
  padding-top: calc(var(--header-h-lg) + var(--sp-6));
}

/* ==========================================================================
   RECRUIT — 星（23:00）
   星は装飾ではない。人 / 選手 / 店舗 / メーカー / ファン / 仲間の象徴。
   1px の点と、非常に細い線だけで成立させる。
   ========================================================================== */
.chapter--stars {
  /* 上は終章の終端色。下は COMPANY の夜明けへ渡す色。境界を作らない */
  background: linear-gradient(180deg, #04060f 0%, #03050b 44%, #04060f 100%);
  /* 前後の間を詰める。星座が終わったらすぐ夜明けが始まるようにする。
     .section--tall は STATEMENT と共用のため、この章だけ上書きする。
     ただし星のタグは章の高さに対する % で置かれているため、
     詰めすぎると本文の上へ降りてくる。実測で重なりが元の状態と
     同程度に収まる高さを下限にしている。 */
  padding-block: clamp(150px, 18vw, 280px) clamp(96px, 10.5vw, 170px);
}

/* PC では上 259px / 下 151px に対して本文が 518px しかなく、章の 44% が空白。
   夜空の広さは残したいので詰めきらず、上を一段だけ落とす。
   星のタグは章の高さに対する % なので、変更後に全幅で重なりを再検証すること。 */
@media (min-width: 768px) {
  .chapter--stars { padding-block: clamp(150px, 15vw, 235px) clamp(96px, 9.5vw, 150px); }
}


.starfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ラベル付きの星。これが「星は装飾ではない」ことを示す唯一の装置 */
.star-tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.star-tag__dot {
  width: 2px; height: 2px; flex: none;
  background: var(--star);
  opacity: var(--star-o3);
}

.star-tag__label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--star);
  opacity: 0.32;
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease);
}

@media (hover: hover) {
  .star-tag:hover .star-tag__label { opacity: 0.72; }
}

.star-tag:focus-within .star-tag__label { opacity: 0.72; }

/* 未完成の星座。閉じない。閉じないことが「まだない星」の視覚化 */
.constellation { position: absolute; inset: 0; pointer-events: none; }
.constellation polyline {
  fill: none;
  stroke: var(--star);
  stroke-width: 1;
  opacity: 0.15;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--clen, 600);
  stroke-dashoffset: var(--cdash, 600);
}

.chapter--stars .container { position: relative; z-index: 1; }

/* ==========================================================================
   CODA — 終章（お知らせ → お問い合わせ）
   2 枚のページを縦に並べない。ひとつの夜空の中を視線が下りていくだけ。
   カードにしない。枠で囲わない。背景を途中で切り替えない。
   ここで足すのは情報ではなく、余韻。
   ========================================================================== */
.coda {
  position: relative;
  isolation: isolate;
  --meteor-travel: clamp(230px, 39vw, 580px);
  /* WORLD ⇄ JAPAN の夜をそのまま受け取り、単調に沈めて RECRUIT へ渡す。
     この章の中に色の切り替わりを作らない。 */
  background: linear-gradient(180deg,
    var(--sky-night) 0%,
    #070b16 30%,
    #060913 58%,
    #050811 80%,
    #04060f 100%);
  padding-block: clamp(120px, 16vw, 260px) clamp(80px, 9vw, 140px);
}

/* PC では直前の WORLD ⇄ JAPAN がステージを外したあと、さらに 230px 空いてから
   「お知らせ」が始まっていた。章が変わったことは伝わる範囲で一段落とす。 */
@media (min-width: 768px) {
  .coda { padding-block: clamp(120px, 13vw, 210px) clamp(80px, 8vw, 128px); }
}

.coda__part { position: relative; z-index: 1; }

/* お知らせ と お問い合わせ の間。章の切れ目に見えない距離に留める。
   離しすぎると 2 枚のページに戻り、詰めすぎると窮屈になる。 */
.coda__part--contact { margin-top: clamp(96px, 12vw, 190px); }

/* --- お知らせ -------------------------------------------------------------
   罫線で仕切らない。行が夜空に浮かんでいるだけの状態にする。
   /news/ の一覧は従来のまま。ここでの指定は終章の中だけに閉じる。
   -------------------------------------------------------------------------- */
.coda .news-list { border-top: 0; margin-top: var(--sp-5); }
.coda .news-row  { border-bottom: 0; }
.coda .news-row + .news-row { margin-top: var(--sp-4); }

.coda .news-row__link {
  /* 日付と見出しを左右に組まない。日付の下に見出しが置かれるだけにする */
  grid-template-columns: minmax(0, 1fr);
  padding-block: 0;
  gap: var(--sp-2);
  transition: opacity var(--dur-base) var(--ease);
}
@media (hover: hover) {
  .coda .news-row__link:hover { opacity: 0.72; background: none; }
  .coda .news-row__link:hover .news-row__title { color: var(--metal-100); }
}

.coda .news-row__meta  { opacity: 0.78; }
.coda .news-row__title { font-size: var(--fs-lg); line-height: 1.6; }

/* --- お問い合わせ ---------------------------------------------------------
   企業サイトの問い合わせ欄にしない。旅の終着点として置く。
   -------------------------------------------------------------------------- */
.coda__mail { margin-top: var(--sp-5); }
.coda__mail .link {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- 最後の一区間 ---------------------------------------------------------
   サイト全体をつないできた一本の軌道が、お知らせの脇を静かに通り、
   小さな光点へ収束して終わる。派手にしない。消える直前の明るさに留める。
   -------------------------------------------------------------------------- */
/* 軌道は章の上端より前から始める。ここで inset:0 のままだと、
   線が WORLD ⇄ JAPAN との境界ちょうどから生えて見え、
   1 本の線が途中で切れているように読めてしまう。
   上へ --coda-lead ぶん伸ばし、境界をまたいで 1 本に見せる。 */
.coda__field {
  --coda-lead: clamp(180px, 34vh, 420px);
  position: absolute;
  top: calc(-1 * var(--coda-lead));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.coda__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- 流れ星 ---------------------------------------------------------------
   章が変わったことを一度だけ知らせる。1 本きり。ループさせない。
   頭を先端に置き、尾は進行方向の後ろへ伸ばして消える。
   -------------------------------------------------------------------------- */
.coda__meteor {
  position: absolute;
  top: 2%;
  left: 88%;
  width: clamp(90px, 13vw, 190px);
  height: 1px;
  transform-origin: 100% 50%;
  transform: rotate(155deg) translateX(0) scaleX(0.2);
  background: linear-gradient(90deg,
    rgba(255, 253, 246, 0) 0%,
    rgba(244, 240, 230, 0.42) 58%,
    rgba(255, 253, 246, 0.92) 100%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .coda[data-meteor="done"] .coda__meteor {
    animation: codaMeteor 1250ms cubic-bezier(0.22, 0.6, 0.3, 1) 1;
  }
}
@keyframes codaMeteor {
  0%   { opacity: 0;    transform: rotate(155deg) translateX(0) scaleX(0.18); }
  14%  { opacity: 0.95; transform: rotate(155deg) translateX(calc(var(--meteor-travel) * 0.18)) scaleX(0.7); }
  68%  { opacity: 0.85; transform: rotate(155deg) translateX(calc(var(--meteor-travel) * 0.74)) scaleX(1); }
  100% { opacity: 0;    transform: rotate(155deg) translateX(var(--meteor-travel)) scaleX(0.55); }
}

/* 星は終章と RECRUIT で同じ変数から灯す。境界で一度消して出し直さない */
.coda .star,
.chapter--stars .starfield[aria-hidden="true"] .star {
  opacity: calc(var(--o, 0.5) * var(--stars-in, 1) * var(--stars-out, 1));
}

/* 材質は .wj__path と共通（上部でまとめて定義）。ここでは進み具合だけ */
.coda__trace {
  stroke-dasharray: var(--tlen, 1200);
  stroke-dashoffset: var(--tdash, 1200);
}

/* 収束点。HERO のピリオドと同じ円だが、ここでは灯りきらない */
.coda__point {
  position: absolute;
  left: var(--coda-px, 50%);
  top: var(--coda-py, 90%);   /* JS が軌道レイヤー基準の実寸で入れる */
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--metal-100);
  opacity: calc(0.42 * var(--coda-end, 0));
  box-shadow: 0 0 14px rgba(226, 236, 248, calc(0.20 * var(--coda-end, 0)));
}

/* ==========================================================================
   iPhone 調整（Phase 2 分）
   ========================================================================== */
@media (max-width: 767.98px) {
  .index-row__cat { opacity: 0.7; }

  /* 事業名が長いため、モバイルでは見出しを一段小さくする。
     28px のままだと 01 が 4 行になり、最終行が「運営」だけ残る */
  .chapter--day .index-row__title { font-size: 1.5rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .vis__in, .vis__out { stroke-dashoffset: 0; }   /* 軌道は引き終わった形で静止 */
  .constellation polyline { stroke-dashoffset: 0; }
  /* 終章の軌道は引き終わった形で静止し、光点は灯った状態にする */
  .coda__trace { stroke-dashoffset: 0; }
  .coda        { --coda-end: 1; }
}

/* ==========================================================================
   iPhone — 縦の圧縮
   余白は世界観として残す。ただし「演出のための余白」と
   「CSS 上たまたま空いている余白」を分け、後者を落とす。
   ここは max-width: 767.98px の中だけ。PC には一切効かせない。
   ========================================================================== */
@media (max-width: 767.98px) {
  /* 余白の段階そのものを一段下げる。インライン指定もトークン経由なので
     ここを変えるだけで章内の間合いがまとめて縮む */
  :root {
    --sp-5: 40px;          /* 48px */
    --sp-6: 68px;          /* 88px */
    --sp-7: 94px;          /* 140px */
    --sp-8: 146px;         /* 220px */
    --sp-section: 68px;    /* 88px */
  }

  /* 余白そのものを主役にする章。スマホでは半分強に */
  .section--tall { padding-block: 76px; }

  /* BUSINESS — 4 つの事業。行間の余白だけを詰める。本文には触れない */
  .index-row { padding-block: 30px; }

  /* COMPANY — 会社概要の表。9 行あるので 1 行あたりの余白が効く */
  .spec__row { padding-block: 22px; }

  /* VISION — 場面の高さは「読む速度」を作るためのもの。
     1 画面 1 場面という関係は保ったまま、1 場面を画面の半分弱に縮める */
  .vis-head     { padding-bottom: 36px; }
  .vis-scene    { min-height: 40svh; }
  .vis-scene--2 { min-height: 45svh; }
  .vis-scene--3 { min-height: 56svh; }   /* 雨 → 太陽 → 虹。ここだけ広く残す */
  .vis-scene--4 { min-height: 45svh; }

  /* WORLD ⇄ JAPAN — ステージは 1 画面のまま。
     動かすための助走距離だけを縮め、WORLD と JAPAN を一続きに感じさせる */
  .wj__scroll { height: 140vh; }

  /* 終章・RECRUIT・COMPANY の章間 */
  .coda           { padding-block: 86px 64px; }
  .chapter--stars { padding-block: 104px 76px; }
  .chapter--moon  { --dawn-h: 212px; }
  .paper-plane    { padding-block: 36px 72px; }
}