@charset "UTF-8";
/* ==========================================================
   奥飛騨冬物語 TOP — fv.css（ファーストビュー / 100vh）
   2026-08-05カンプ改版:
     ・スライダー3枚 → 福地温泉「青だる」の単写真（クリーン原本から直切り＝焼き込み文字なし）
     ・下端は白フェードで次セクション（白地）へ溶ける
     ・ヘッダーロゴに冬マーク＋月を追加、キャッチは金→白
     ・emblem下に白（実測 #c8ccce）の筆記体2行を新設
   （アニメーション・JSは書かない。静的状態＝カンプそのもの）
   ========================================================== */

.fv {
  /* カーテン効果: FVは画面に固定され、後続セクション（#canvas）が下からせり上がる。
     stickyはWebKitがtransform配下でスケール補正しないバグがあるため、
     #canvasの外に出して fixed（変形祖先なし=全ブラウザで正確）。
     スケールは main.js が canvas と同値を直接付与する */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; /* #canvas(z:1)が上に被さる */
  transform-origin: 0 0;
  width: var(--canvas);
  height: var(--fv-h, 100vh); /* zoom等比縮小時はmain.jsが実ビューポート高を補正 */
  overflow: hidden;
  background: #0a1a33; /* 画像読込前の下地 */
}

/* ---- 中央ロックアップの縦位置（2026-09-10 河野さん指摘「若干ロゴを下げたい。ヘッダーを考慮した中央に」）----
   .fv__emblem / .fv__script / .fv__catch の3要素を、相対関係を1pxも変えずに同量だけ平行移動する。
   ロックアップ箱＝emblem上端139 〜 script下端542.39（実測 高さ403.39px・半分201.7px）。
   ヘッダー88pxを除いた領域の縦中心 ＝ (88 + --fv-h) / 2 に箱の中心を置く。
   低背ウィンドウでヘッダー帯へ食い込ませないため下限96pxでクランプする（マックス関数）。
   ※ --fv-h は main.js が設計座標px（実ビューポート高 ÷ 等比スケール）で :root に書く。
     .loading__stage も同じ --fv-h の箱なので、ローディングのロゴも自動で同じだけ下がる */
:root {
  --fv-type-top: max(96px, calc((88px + var(--fv-h, 100vh)) / 2 - 201.7px));
}

/* ---- 背景写真（新カンプは単写真。スライダーのクラス語彙は演出用に維持） ---- */
.fv__slider { position: absolute; inset: 0; z-index: 0; }
.fv__slide  { position: absolute; inset: 0; }
.fv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 2枚目以降を足す場合は透過で重ねる（後工程JSがクロスフェード） */
.fv__slide--2,
.fv__slide--3 { opacity: 0; }

/* ---- 下端の白フェード ----
   カンプ実測(1x): alpha 0 = y646.9 / alpha 1 = y842.1（完全線形）。
   FV下端(=100vh)を基準に置くため bottom:-43px・高さ195px。
   セクション内で見えるのは alpha 0→0.78 まで＝残りの尾はconcept側へ被る */
.fv__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -43px;
  height: 195px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

/* ---- オーバーレイ群（写真cover変形への追従ラッパー・main.jsがtransformを書く） ---- */
.fv__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 0 0;
}

/* ---- ヘッダー ---- */
.fv__header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  height: 88px;
}

/* 左上ロゴ（冬マーク＋月＋奥飛騨冬物語の合成PNG・990×162=2x → 1x 247.5×40.5） */
.fv__logo {
  position: absolute;
  left: 25.3px;
  /* 2026-08-29 ロゴ90%化。高さ 40.5→36.45px に伴い、ヘッダー(88px)の縦中心44.0に合わせ直す
     （44.05 - 36.45/2 = 25.825）。左端25.3pxは基準アンカーとして据え置き */
  top: 25.825px;
  display: block;
}
.fv__logo img {
  width: 222.75px;   /* 247.5 × 0.9 */
  height: 36.45px;   /* 40.5 × 0.9 */
}

/* 右上ナビ（白・明朝16px）。
   カンプ実測（5項目時）: 項目インク開始 x420.5 / 523.5 / 640.5 / 761.5 / 850.0（1x）
   → 字送り16px（letter-spacing 0）＋項目間の個別マージンで一致させる
   2026-08-31 市岡さん指示で「アクセス」を お知らせ の後ろに追加＝6項目。
   幅合計 524.5 → 612.5px（+24マージン +64文字幅）。キャンバス中心 682.25 を保つため
   left = 682.25 − 612.5/2 = 376px。項目間マージンは字送りの実測値なので触らない
   （5番目に アクセス が入るので nth-child(5) が アクセス・(6) が お問い合わせ になる。
     nth-child(6) を足し忘れると お問い合わせ のマージンが0になり密着する） */
.fv__nav {
  position: absolute;
  top: 32px;
  left: 376px;
  display: flex;
  align-items: flex-start;
  /* 2026-08-29 市岡さん指示「文字・ロゴを90%」。まずヘッダーのみ試行。
     font-size を縮めると nth-child の実測マージン(23/21/24/24.5px)だけが原寸で取り残され、
     項目が最大33.6px左へドリフトする（8/29の破綻原因）。transform なら字送り・マージン・
     下線が同率で縮むので、カンプ実測値の引き直しが要らない。
     origin 50% はナビが元々キャンバス中央(682.25)に置かれているため中心が動かない */
  transform: scale(0.9);
  transform-origin: 50% 0;
}
.fv__nav-item {
  position: relative;
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-white);
  white-space: nowrap;
}
.fv__nav-item:nth-child(2) { margin-left: 23px; }
.fv__nav-item:nth-child(3) { margin-left: 21px; }
.fv__nav-item:nth-child(4) { margin-left: 24px; }
.fv__nav-item:nth-child(5) { margin-left: 24px; }    /* = アクセス（2026-08-31 追加） */
.fv__nav-item:nth-child(6) { margin-left: 24.5px; }  /* = お問い合わせ（従来の nth-child(5) の値） */

/* アクティブ（冬物語とは）の白下線（カンプ実測 x414.0–496.5 / y56.5–58.5） */
.fv__nav-item--active::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 24.5px;
  width: 83px;
  height: 2px;
  background: var(--color-white);
}

/* ホバー下線（2026-08-31 市岡さん指示「フッターのメニュー同様に、カーソルを持って行った際に
   下線が出るように」）。フッター（footer.css）と同じ「左から伸びる」演出。
   ::after は現在地の下線が占有済みなので ::before を使う。
   現在地（--active）は常時下線があるため出さない＝同じyに2本重なるのを防ぐ。
   色は currentColor＝TOPは白／下層は墨が自動で当たる（lower.css 側も同じ実装）。
   タッチ端末では :hover が張り付くので hover 可能な環境だけに限定する */
@media (hover: hover) {
  .fv__nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24.5px;      /* 現在地下線と同じ高さ */
    width: 100%;      /* flexアイテム＝文字幅ぴったり */
    height: 2px;      /* 現在地下線と同じ太さ */
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-sig, ease);
  }
  .fv__nav-item:hover::before { transform: scaleX(1); }
  .fv__nav-item--active::before { content: none; }
}

/* ---- 中央エンブレム（奥飛騨 / 冬＋月 / 物語。筆記体は別要素へ分離） ----
   カンプ実測(1x): x616.5–750.3 / y198.0–512.1 */
/* .loading__logo を同居させているのは意図的。STARTローディングのロゴを
   FVのロゴと画素一致させるため、座標の定義箇所をここ1つに保つ（2026-08-11） */
.fv__emblem,
.loading__logo {
  position: absolute;
  left: 616.5px;
  /* 2026-08-12 市岡さん指示「ロゴをキャッチコピーの上のつらにあわせる」。
     実測: エンブレムのインク上端213 / キャッチのインク上端154 → 59px上げる。
     筆記体も同じだけ上げてロックアップの間隔は保つ（カンプ値198→139） */
  /* 2026-09-10 ロックアップ全体をヘッダー考慮の縦中央へ。139px固定 → 画面高追従の変数。
     ここが3要素の基準＝script/catch は同変数からの一定オフセットで追従する */
  top: var(--fv-type-top);
  width: 133.8px;
  height: 314.1px;
  z-index: 2;
}

/* ---- emblem下の筆記体2行（This is Okuhida / Winter・実測色 #c8ccce） ----
   カンプ実測(1x): x589.0–777.0 / y537.5–601.4 */
.fv__script,
.loading__script {
  position: absolute;
  left: 589px;
  /* 2026-09-10 ロックアップ縦中央化。旧478.5px ＝ emblem(139) + 339.5px。
     このオフセット339.5pxが emblem との相対関係そのもの＝変えない */
  top: calc(var(--fv-type-top) + 339.5px);
  width: 188px;
  height: 63.9px;
  z-index: 2;
}

/* ---- 右側 縦書きキャッチ（白・3列） ----
   カンプ実測(1x): 列ピッチ63.875px / 漢字インク38×38.5px / 漢字送り51.75px。
   仮名の送りだけ41.5〜47.5px＝カンプは仮名がプロポーショナル詰め。
   Zen Old Mincho（Google Fonts配信）はpalt/pwidを持たず全角固定なので、
   仮名を .fv__catch-kana で包んで送りを詰め、実測ピッチ（平均44px）に合わせる */
.fv__catch {
  position: absolute;
  /* 2026-09-10 ロックアップ縦中央化。旧151px ＝ emblem(139) + 12px。オフセット12pxは不変 */
  top: calc(var(--fv-type-top) + 12px);
  right: 147.5px;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.5208;
  letter-spacing: 9.75px;  /* 漢字の送り = 42 + 9.75 = 51.75px */
  color: var(--color-white);
}
.fv__catch-kana { letter-spacing: 2px; } /* 仮名の送り = 44px */

/* 境界1文字の字送り（2026-09-02 文字組みドリフト修正）
   上の「漢字51.75 / 仮名44」の二値だけでは、漢字↔仮名の境目でカンプに合わない。
   カンプ(top_server.jpg 2x)と実装の同一グリフをサブピクセルNCC＋インク上下端の
   2手法で照合し、グリフ位置差 Δ(2x, comp−live) から境界の送りを逆算した実測値:
     会→う 46.2 / う→冬 51.05 / 冬→が 47.65 / 語→に 47.95（1x）
   ＝ 実装の 51.75 / 44 / 51.75 / 51.75 に対し −5.55 / +7.05 / −4.1 / −3.8。
   反映後の各グリフのインク位置誤差は最大2.3px（列全体が一様に約2px下＝ブロック位置差、
   相対リズムの誤差は0.3px以下）。※ .fv__catch-kana より後に置くこと（同詳細度＝後勝ち） */
.fv__catch-b1 { letter-spacing: 4.2px; }  /* 会→う 送り46.2 */
.fv__catch-b2 { letter-spacing: 9.05px; } /* う→冬 送り51.05 */
.fv__catch-b3 { letter-spacing: 5.65px; } /* 冬→が 送り47.65 */
.fv__catch-b4 { letter-spacing: 5.95px; } /* 語→に 送り47.95 */


/* FV溶解マスク（参考サイト実測準拠）:
   横S字境界のマスク(自作mask_hrzn.png・左40%不透明→右透明)を500%×200%で敷き、
   スクロール0.2vh→1.0vhで position (0,0)→(130%,70%) へ main.js がlerpスクラブ。
   FV自体が霧の形に溶けて消える＝本文カーテンの直線エッジが立たない */
.js .fv {
  -webkit-mask-image: url(../../img/mask_hrzn.png);
  mask-image: url(../../img/mask_hrzn.png);
  -webkit-mask-size: 500% 200%;
  mask-size: 500% 200%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  /* will-change: mask-position は付けない（2026-08-25）: 全画面レイヤーが毎フレーム
     再描画され、スクラブ中のスクロールが詰まる。実測 FV帯 p90 32.9ms→17.5ms・
     33ms超フレーム 48/498→2/514（Chrome cpu6倍スロットリング）。見た目は同一 */
}
@media (prefers-reduced-motion: reduce) {
  .js .fv { -webkit-mask-image: none; mask-image: none; }
  .js .fv__cloud { display: none; }
}

/* FVカーテンのスペーサー（fixed化したFVの流し込み高さを#canvas内で確保） */
.fv-spacer { height: var(--fv-h, 100vh); }

/* ============================================================
   カーテン先導霧（参考サイト準拠のリッチ遷移）
   本文(#canvas)の先頭エッジに、地色（白）の霧テクスチャが先行して
   FV写真を有機的な形で覆っていく。0高さコンテナをconcept先頭に置き、
   子レイヤーがbottom基準で上方向へ伸びる（=FV帯にだけ被る）。
   表示はJS演出時のみ（no-JS/reduceは非表示＝カンプ照合に影響しない）。
   不透明度・もや遅延はmain.jsがスクロール量でスクラブ。
   ============================================================ */
.curtain-fog { display: none; }
.js .curtain-fog {
  display: block;
  position: absolute;
  top: var(--fv-h, 100vh);
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  z-index: 5;
}
.js .curtain-fog__l1,
.js .curtain-fog__l2 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: url(../../img/fog_cap.png?v=20260718a) bottom center / 100% 100% no-repeat;
  transform-origin: bottom center; /* 溶接エッジ基準で伸縮＝境界線が出ない */
  will-change: transform;
}
.js .curtain-fog__l1 { height: 470px; }
.js .curtain-fog__l1 { opacity: 0; } /* 静止時不可視（JSがスクロールで湧かせる） */
.js .curtain-fog__l2 {
  height: 640px;
  opacity: 0;
  transform: scaleX(-1); /* 反転で別の雲形に見せる（JSがscaleYを合成） */
}

/* FV内ドリフト雲（スクロールで横流れ・.fvの溶解マスクを継承して一緒に消える） */
.js .fv__cloud {
  position: absolute;
  pointer-events: none;
  background: url(../../img/cloud_wisp.png) center / 100% 100% no-repeat;
  will-change: transform;
  z-index: 3;
}
.js .fv__cloud--1 { left: -5%; top: 42%; width: 75%; height: 260px; opacity: 0; }
.js .fv__cloud--2 { right: -8%; top: 12%; width: 60%; height: 220px; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .curtain-fog { display: none; }
}

/* ==========================================================
   SP（設計幅393px・2026-08-05 SPカンプ実測 / セクション高795px）
   旧sp.cssのFVブロックを新カンプ値で再構築。
   骨子: .fv を fixed→absolute の普通の流しに戻し、マスク・雲・
   カーテン霧はSPでは無効（カーテン演出自体をSPでは使わないため）。
   背景写真は SP 2xマスター 0–795 の直切り（下端の白フェードは
   カンプに焼き込み済み＝CSSの .fv__fade はSPでは使わない）。
   ※ 1x y712–790 に写る筆記体「This」はconceptセクションの要素なので、
     FV写真からは白で消してある（セクション責務の分離）。
   ========================================================== */
@media (max-width: 767px) {

  /* ---- 骨格 ---- */
  .fv {
    position: absolute;
    height: 795px;
  }
  .fv-spacer { height: 795px; }

  /* 溶解マスク・ドリフト雲・カーテン霧はSPでは使わない */
  .js .fv {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .fv__cloud,
  .js .fv__cloud,
  .curtain-fog,
  .js .curtain-fog { display: none; }

  /* 白フェードは img/sp/fv_photo_01.webp に焼き込み済み（二重掛け防止） */
  .fv__fade { display: none; }

  /* ---- ヘッダー ---- */
  .fv__header { height: 60px; }

  /* ロゴ（カンプ実測 1x: x12.0–176.0 / y15.0–41.8。0.5px単位で残差最小の値に微調整）
     2026-09-01 横山さん指示「ロゴとハンバーガーは中心揃えで、横幅（左右の余白）も合わせる」:
     左端 12 → 20.5px。ハンバーガーの線の右余白と同値にし、SPの基準ガター
     （.footer__nav の 20.5px）にも揃える。縦は据え置き＝ink中心 28.8px */
  .fv__logo { left: 20.5px; top: 15.5px; }
  .fv__logo img { width: 163px; height: 26.6px; }

  /* PCの横並びナビはSPでは畳む（ハンバーガー＝sp.cssのグローバル） */
  .fv__nav { display: none; }

  /* ハンバーガーのカンプ実測値（1x）: 線 x345.5–372.5 / y22.5・27.9・33.2（太さ約1.3px）。
     ※ここには以前 `.fv .fv__burger { ... }` のルール一式が書かれていたが、
       <button class="fv__burger"> は transform の影響を避けるため .fv の**外**に置いてある
       （index.html でも .fv セクションより前）。したがって**本番の7ページでは一致しない**。
       ※セクション単体確認用の _dev_fv.html だけはボタンが .fv 内にあるため当たっていた。
       本番では一致しておらず、
       実際に効いているのは sp.css の `.fv__burger`（44×44のタップ領域つき）だけだった。
       2026-09-01 にロゴとの中心ズレ（ロゴ28.8 / ハンバーガー31.75）を直す際に発見。
       復活させると当たり判定が 27×12 になり44px未満になるため、値は記録だけ残して削除する。
       実座標は sp.css の `.fv__burger`（top/right）と `.fv__burger span` が正。 */

  /* ---- 中央エンブレム（実測 x155.5–254.0 / y177.0–408.5・画面中心より約8px右） ---- */
  /* 2026-09-10 ロックアップ縦中央化（PCと同じ河野さん指摘）。SPは .fv が795px固定なので
     画面高追従は不要＝実数で置く。箱中心 325.9 → ヘッダー60pxを考慮した中央 (60+795)/2 = 427.5
     ＝ 3要素まとめて +101.6px。SP背景写真は y≈590 より下が白く焼き込まれており銀の筆記体が
     消えるため、これ以上は下げられない（筆記体下端 576.4px＝白開始の14px手前） */
  .fv__emblem,
  .loading__logo {
    left: 155.5px;
    top: 278.6px;   /* 旧177px + 101.6 */
    width: 98.5px;
    height: 231.3px;
  }

  /* ---- emblem下の筆記体2行（実測 x135.0–273.5 / y427.5–474.6） ---- */
  .fv__script,
  .loading__script {
    left: 135.5px;
    top: 529.6px;   /* 旧428px + 101.6（下端 529.6+46.8 = 576.4px） */
    width: 137.5px;
    height: 46.8px;
  }

  /* ---- 右の縦書きキャッチ（新カンプは2列） ----
     実測(1x): 列ピッチ35.75px / 漢字インク幅約19.9px / 1列目インク右端358.5px /
     1文字目「は」インク上端87.0px / 仮名送り約24.8px・漢字送り約28.1px。
     PCは<br>2本で3列。SPは1本目だけ潰して「はじめて出会う冬が、／物語になる。」の2列にする
     （旧実装のheight固定による折返しは字幅変化に弱いのでbrで確定させる） */
  /* 2026-09-02 実効文字サイズの修正 22px → 23.5px。
     カンプのグリフは22px描画より約7.5%大きい。根拠4本（いずれもSPカンプ2xで実測）:
       ① live→comp のスケール当てはめ（同一PNG素材のエンブレムを対照＝バイアス+1%）
          物1.10 / 語1.06〜1.08 / 出1.05〜1.10 / 冬1.03〜1.10 ＝平均 +7.5%
       ② 漢字インク高(2x) live 39 → comp 42（+7.7%）、インク幅 18.6→19.9（+7%）
       ③ 列ピッチ35.75 ÷ PCと同じ行送り比1.5208 = 23.51px
       ④ 送り/em比がPCと一致（漢字28.1/23.5=1.196・仮名24.8/23.5=1.055 ⇔ PC 1.232/1.048。
          22px だと 1.277/1.127 でPCから外れる）
     ※ 列ピッチ35.75pxと送り（漢字28.1/仮名24.8）は据え置き＝行数・折返し・列幅は不変。
       line-height と letter-spacing をfont-size増分だけ引き直している */
  .fv__catch {
    top: 186px;              /* 旧84.4px + 101.6（2026-09-10 ロックアップ縦中央化。字送り・列位置は不変） */
    right: 27.3px;           /* 26.5→27.3。列インクのx残差を左右に均す（1列目 −0.38 / 2列目 +0.49px） */
    font-size: 23.5px;
    line-height: 35.75px;    /* 実測の列ピッチ（= 23.5 × 1.5213。PCの行送り比と同値） */
    letter-spacing: 4.6px;   /* 漢字の送り = 23.5 + 4.6 = 28.1px */
  }
  .fv__catch-kana { letter-spacing: 1.3px; } /* 仮名の送り = 23.5 + 1.3 = 24.8px */
  /* PCの境界字送り(b1〜b4)はSPには持ち込まない＝SPの送りは基本どおり漢字28.1/仮名24.8。
     2026-09-02（字面サイズ再点検パス）にSPカンプの境界送りを実測して凍結を解除。
     まず字面サイズは相殺なしを確認済み: 全16グリフのインク高がカンプと±1px(2x)一致、
     二値IoUのスケール探索も最頻値1.00（≒等倍）＝font-size 23.5px は正しい。
     そのうえで各グリフのインク中心を3手法（インクバンドしきい値215/190・二値IoU）で
     照合したところ、「冬」だけがカンプより 2.5〜2.75px(1x) 上に出ていた（他は±1.5px以内）。
     ＝う→冬 が詰まりすぎ・冬→が が空きすぎ。カンプ実効送りは う→冬 27.3〜27.9 /
     冬→が 25.1〜25.6（1x）。b2 +2.6 / b3 −2.6 の等量入替で列長と「が・、」の位置は不変。
     b1（会→う）・b4（語→に）は残差が目標±2px内なので触らない */
  .fv__catch-b1,
  .fv__catch-b4 { letter-spacing: 4.6px; }
  .fv__catch-b2 { letter-spacing: 3.9px; } /* う→冬 送り27.4（旧24.8＝カンプ比2.6px不足） */
  .fv__catch-b3 { letter-spacing: 2.0px; } /* 冬→が 送り25.5（旧28.1＝カンプ比2.6px過大） */
  .fv__catch br:first-of-type { display: none; }
}

/* ==========================================================
   【2026-10-01 横山さん指示（冬物語ルーム・iPhoneのスクリーンショット付き）】
   「SPのタイトル位置がズレているので、バランスよく配置お願いいたします。」
   実測（393×852・変更前）:
     縦書きキャッチ（右） 文字の範囲 y186.0–443.9（中心 315.0）
     タイトル（エンブレム＋筆記体） y278.6–576.4（中心 427.5）＝キャッチより112.5px下
     横: エンブレム中心 x204.75（画面中央196.5より8.25px右・カンプ由来）
   iPhone の Safari では上下のバーで見える高さが約660pxしかなく、9/10 に .fv(795px) の
   縦中央へ下げたタイトルは見える範囲の下寄り（筆記体が下のバーに掛かる）、キャッチは上寄りに見えていた。
   → タイトルの縦の中心をキャッチの中心（315.0）に揃える＝ −112.6px（エンブレム上端 166.0）。
     あわせて横はキャンバス中央（196.5）に揃える＝ −8.25px。キャッチは動かさない。
   ローディングのロゴ（.loading__logo / .loading__script）は FV のロゴへ受け渡すので同じ値で動かす
   ========================================================== */
@media (max-width: 767px) {
  .fv__emblem,
  .loading__logo {
    left: 147.25px;   /* 196.5 − 98.5/2 */
    top: 166px;       /* 278.6 − 112.6 */
  }
  .fv__script,
  .loading__script {
    left: 127.75px;   /* 196.5 − 137.5/2 */
    top: 417px;       /* 529.6 − 112.6（エンブレムとの間隔 19.7px は不変） */
  }
}

/* ==========================================================
   【2026-10-06 字間そろえ（字種別の詰めを廃止）】縦書きキャッチ「はじめて出会う冬が、物語になる。」:
   漢字 51.75px／仮名 44px の二値と境界4か所（b1〜b4）の個別送りをやめ、全字同じ送りに。
   値は現状の平均送りを保つ（実寸 PC 1.107em → 4.5px ／ SP 1.106em → 2.5px）。列の天は不変、列の長さは ±10px 以内で変わる（「はじめて」+10 ／「出会う冬が、」−8px・衝突なし）。
   ※ 値の導出（2026-10-06 レビューで補正）: PC はキャンバス 1365px を幅 1440px へ等比拡大して表示しているため、
      ビューポート px で測った送りは 1.0549 倍に見える。平均送りは実寸（÷1.0549）で取り直した。
   キャッチは en.html でも日本語のまま（lang="ja"）なので日英共通。戻す時はこのブロックを消すだけ
   ========================================================== */
p.fv__catch { letter-spacing: 4.5px; }
p.fv__catch span { letter-spacing: inherit; }
@media (max-width: 767px) {
  p.fv__catch { letter-spacing: 2.5px; }
}

/* ==========================================================
   【2026-10-07 カクつき対策】横山さん「WindowsのPCでFVが少しカクカクする」。
   FV溶解（スクロール 0.2vh→1.0vh で霧の形に溶ける）を、マスク位置の毎フレーム書き換えから
   「境界の帯の画像＋その右の白い箱（.fv__dissolve）を transform で動かす」方式に置き換える。
   ・旧: .js .fv に mask-image を掛け、JS が mask-position を毎フレーム更新。マスク付きのFVは静止中も別の面で
     合成され、溶解中はマスク層を毎フレーム描き直す（GPUの弱い環境＝ソフト描画で模擬すると、読み込み直後に
     20ms超のフレームが約19%・マスクを外すと約11%。2026-10-07 計測）
   ・新: 帯の画像 img/mask_hrzn_band.png は mask_hrzn.png の 88〜186 列のアルファを反転したもの（白）。
     .fv の背後はページの白なので「FV×a＋白×(1−a)」で旧と同じ画になる。左の不透明部分（0〜87列）は何も置かず、
     右の透明部分（187列〜と、マスク画像の外＝FVが見えない所）は白い箱。静止中は箱ごと画面の右外にある。
     位置: 旧の mask-size 500%×200%・mask-position (130·t %, 70·t %) ＝ ずれ (−5.2W·t, −0.7H·t)。
       箱の左端 = 88/250×500% = 176%・幅 = 460%・高さ 200%。幅の根拠: 溶け終わり（t=1）で右端 1.76W＋4.6W−5.2W＝1.16W ≧ W
       （旧はマスク画像 5W の外＝FVが見えない所。600%だと t>0.96 で右端が画面内に入り、右上にFVが細く見えていた＝10/7 レビューで修正）
       帯 = 99列 = 198% → 箱の 43.0435%／白 = 187列目（374%）から右 → 箱の 43.0435% から（境目は少し重ねる）
       x のずれ −520%·t（FV幅基準）= 箱の幅基準で −113.0435%·t、y のずれ −0.7H·t = 箱の高さ基準で −35%·t（main.js §2.8）
   戻す時はこのブロックを消し、index.html の .fv__dissolve と main.js §2.8 を mask-position の2行に戻す
   ========================================================== */
.js .fv {
  -webkit-mask-image: none;
  mask-image: none;
}
.fv__dissolve { display: none; }
.js .fv__dissolve {
  display: block;
  position: absolute;
  left: 176%;
  top: 0;
  width: 460%;
  height: 200%;
  z-index: 4;          /* 雲(3)・文字(2)・白フェード(1) より上＝旧のマスクと同じく全部をまとめて溶かす */
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.fv__dissolve-band,
.fv__dissolve-white {
  position: absolute;
  top: 0;
  height: 100%;
}
.fv__dissolve-band {
  left: 0;
  width: 43.0435%;
  background: url(../../img/mask_hrzn_band.png) left top / 100% 100% no-repeat;
}
.fv__dissolve-white {
  left: 43%;
  right: 0;
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .js .fv__dissolve { display: none; }
}
@media (max-width: 767px) {
  .js .fv__dissolve { display: none; }   /* SPは溶解演出なし（旧もマスクなし） */
}

/* ==========================================================
   【2026-10-14 河野さん修正リスト（10/13 横山さん転載）・TOP「メインビジュアル下部に線？のようなものが見える」①】
   FV の下地（画像読込前の紺 #0a1a33）が、等比スケールで端数になった FV の下端（例 SP390 で 788.93px）の1画素ににじみ、
   写真の下端に紺の細い線が出ていた（2026-10-13 本番実測: SP390/375 で周囲より輝度 −23〜−27・Chromium/WebKit とも。
   PC は画面の最下行 −9〜−39）。下地の下端3pxだけ白にする（写真の下端は白へフェードしているので白で溶ける）。
   読込前の紺はそのまま。戻す時はこのブロックを消す
   ========================================================== */
.fv { background: linear-gradient(to bottom, #0a1a33 calc(100% - 3px), #fff calc(100% - 3px)); }

/* ==========================================================
   【2026-10-14 HEROU定例（横山さん）SP の FV にも「白い霧がふわっと出る」演出】
   「PCの時は白いのがふわっと出ると思うんだけど、SPの方はそれが薄い。SPでもちゃんとふわっとするといい」。
   PC はスクロールすると ①本文の先頭から白い霧が湧き上がる（.curtain-fog・img/fog_cap.png）
   ②FV に薄い雲が流れる（.fv__cloud・img/cloud_wisp.png）③FV が霧の形で白に溶ける（.fv__dissolve）の3つが出る。
   SP は 2026-08-05 の SP 再構築でこの3つを display:none にしていた（上の SP 節）＝白はカンプ焼き込みの直線グラデだけ。
   SP でも同じ3つを出す。FV は今までどおりページと一緒に流れる（カーテン固定はしない）。
   ・霧の板と雲は PC と同じ設計px の大きさの絵（霧 1365×470／640・雲 1024×260／819×220）を幅393px の窓から見せる
     （SP 幅に縮めると霧の形が縦長につぶれる）。霧は FV の範囲（0〜795px）で切る＝本文の上には出ない。
     重なりは本文の筆記体 This（z-index:1）より下（0）。
   ・#canvas > * の pointer-events:auto（base.css・ID の詳細度）が霧の箱にも当たり、795px の箱が FV のロゴ・EN を
     覆って押せなくなるので、同じ詳細度で none に戻す。
   ・動き: 不透明度・伸び・横流れは main.js §4 が PC と同じ式で既に書いている。溶解と「霧を写真に対して持ち上げる」は main.js §9。
   静止時（スクロール0）は3つとも見えない＝今の SP の見た目は変わらない。動きを減らす設定では出さない。
   PC には効かない（すべて max-width:767px の中）。戻す時はこのブロックと main.js §9 を消すだけ
   ========================================================== */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .curtain-fog {
    display: block;
    top: 0;
    height: 795px;          /* SP の FV の高さ（上の SP 節 .fv）。この中だけに霧を出す */
    overflow: hidden;
    z-index: 0;
  }
  #canvas > .curtain-fog { pointer-events: none; }
  .js .curtain-fog__l1,
  .js .curtain-fog__l2 {
    background-size: 1365px 100%;   /* PC と同じ横幅の絵の中央を見せる（板は SP 幅のまま＝合成の面積を増やさない） */
  }
  .js .curtain-fog__fill {          /* main.js §9 が作る。持ち上げた霧の下を白で埋める */
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100%;
    background: #fff;
    will-change: transform;
  }
  .js .fv__cloud { display: block; }
  .js .fv__cloud--1 { left: -420px; width: 1024px; }   /* PC: 1365 の 75% */
  .js .fv__cloud--2 { right: -360px; width: 819px; }   /* PC: 1365 の 60% */
  .js .fv__dissolve { display: block; }
}