@charset "UTF-8";
/* ==========================================================
   奥飛騨冬物語 TOP — concept セクション
   2026-08-05 新カンプ改版（旧: y800–2732/h1932・金スクリプト → 新: y800–2635/h1835）
   白背景・銀スクリプト(This/is/Okuhida/Winter)＋散らし写真8枚
   ＋中央揃えコピー2ブロック＋青ピルボタン
   座標は 2xマスター（top_server.jpg 2730×25337）実測値の1x換算
   ========================================================== */

.concept {
  position: relative;
  width: 1365px;
  height: 1835px;
  background: var(--color-white);
  overflow: hidden;
}

/* ---- 筆記体（Pinyon Script画像・銀 #ebecee） ----
   新カンプ実測: 旧金 #b38b55 → #ebecee（base.cssの --color-script #b8c7db より大幅に明るい。
   2xマスターのストローク芯 RGB(236,236.6,238.3)・最大偏差23 が根拠）。
   重なり順: 写真がスクリプトの上（This×bridge / Okuhida×frost / Winter×night で
   ストロークが写真の縁で切れている）。is は 2026-08-18 からオーバーレイ廃止＝
   花火写真アセットにカンプごと焼き込み（左右余白込みで切り直し。パララックス速度差の二重見え解消） */
.concept__script {
  position: absolute;
  z-index: 1;
  line-height: 1;
  white-space: nowrap;
}
.concept__script--this    { left: 275px; top: 96px;   width: 364px; height: 195px; background-image: url(../../img/script/this_silver.png); }
.concept__script--okuhida { left: 53px;  top: 836px;  width: 634px; height: 176px; background-image: url(../../img/script/okuhida_silver.png); }
.concept__script--winter  { left: 674px; top: 1446px; width: 608px; height: 171px; background-image: url(../../img/script/winter_silver.png); }

/* ---- 散らし写真（2xマスター直切り・スクリプトより前面） ---- */
.concept__photo {
  position: absolute;
  z-index: 2;
  object-fit: cover;
}
.concept__photo--bridge    { left: 92px;   top: 205px;  width: 230px; height: 160px; }
.concept__photo--fireworks { left: 962px;  top: 217px;  width: 329px; height: 432px; } /* is焼き込み一体化で左へ27px拡張（2026-08-18） */
.concept__photo--ropeway   { left: 0;      top: 529px;  width: 360px; height: 260px; }
.concept__photo--forest    { left: 958px;  top: 912px;  width: 362px; height: 260px; }
.concept__photo--frost     { left: 116px;  top: 947px;  width: 220px; height: 320px; }
.concept__photo--shishimai { left: 1136px; top: 1143px; width: 229px; height: 160px; }
.concept__photo--onsen     { left: 0;      top: 1358px; width: 286px; height: 286px; }
.concept__photo--night     { left: 1015px; top: 1574px; width: 286px; height: 200px; }

/* ---- 中央揃えコピー（インク#37393c・Zen Old Mincho 21px・行送り50px） ----
   カンプは Figma の文字詰め（palt = 約物・かなをプロポーショナル送り）で組まれており、
   漢字の送り24px／かな約21.7px／「、」「・」約13.5px と字種で送りが変わる。
   Google Fonts 版 Zen Old Mincho の woff2 には palt/halt/pkna が入っておらず
   （font-feature-settings を当てても描画が1pxも変わらないことを確認済み）、
   Web側は全字全角送りにしかできない。

   2026-09-02 文字組み修正: 一律 letter-spacing:0.2px（12行の最小二乗フィット）を
   「文字種span＋行トラッキング」の二層構成に置き換えた。
   ★このCSSは index.html 側の span 付与（.concept__l1〜l12／.concept__kj／
     .concept__yk／.concept__nk／.concept__ko／.concept__kc）とセットで初めて成立する。
     span を入れずにこのCSSだけ当てると padding-left の中心補正が過小になる（約3px右へずれる）。
   2xカンプ実測（1x換算）:
     漢字の送り  カンプ 24.0px / 実装 21.2px（+2.8）… L5「平湯・…」の漢字間 23.5〜24.5
     、。の送り  カンプ 14.7px（L1「は、厳」の 、→厳 ピッチ 14.0 vs 実装 20.5）
     ・の送り    カンプ 13.6px・墨も左へ5.1px寄る（L5の ・前後ピッチ 26.0/11.5 vs 28.5/13.5）
     」の送り    カンプ 10〜12px（L4「語」とは」の 」→と ピッチ 13.5 vs 24.5）
   カンプの行幅は字種構成だけでは説明できず（かなの pkna 幅が字ごとに違うため。
   例: と の墨幅はカンプ8.0px/実装11.5px）、残差は行ごとの --ls で合わせる。
   --ls の初期値 0.0095em は旧 0.2px(PC)/0.13px(SP) と等価。
   padding-left は行末「、」「。」の送り分の中心ズレ補正（span化で必要量が減る） */
.concept__copy {
  position: absolute;
  left: 0;
  width: 1365px;
  padding-left: 3px;
  text-align: center;
  color: var(--color-ink);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 21px;
  --ls: 0.0095em;
  letter-spacing: var(--ls);
  z-index: 4;
}
.concept__copy--1 { top: 382px; }
.concept__copy--2 { top: 1064px; }
.concept__copy p {
  margin: 0;
  height: 50px;
  line-height: 50px;
}
.concept__copy-gap { height: 50px; }

/* 文字種別の送り（値は em＝PC21px/SP14px 共通。--ls は行トラッキングで上書きされる） */
.concept__copy .concept__kj { letter-spacing: calc(var(--ls) + 0.224em); } /* 漢字ラン +4.7px(PC) */
.concept__copy .concept__yk { letter-spacing: calc(var(--ls) - 0.230em); } /* 、。 -4.8px(PC) */
.concept__copy .concept__nk {                                             /* ・ 左右均等詰め */
  margin-left: -0.243em;
  letter-spacing: calc(var(--ls) - 0.019em);
}
.concept__copy .concept__ko { margin-left: -0.357em; }                     /* 「 左を詰めて墨を左へ */
.concept__copy .concept__kc { letter-spacing: calc(var(--ls) - 0.357em); } /* 」 右を詰める */

/* 行トラッキング（カンプ行墨幅への実測フィット。値は em で PC/SP 共通） */
.concept__l1 { --ls: -0.0575em; letter-spacing: var(--ls); }
.concept__l2 { --ls: -0.1338em; letter-spacing: var(--ls); }
.concept__l3 { --ls: -0.0881em; letter-spacing: var(--ls); }
.concept__l4 { --ls: -0.0703em; letter-spacing: var(--ls); }
.concept__l5 { --ls: -0.0913em; letter-spacing: var(--ls); }
.concept__l6 { --ls: -0.058em; letter-spacing: var(--ls); } /* 2026-09-16 文言変更（河野さん指摘・市岡さん案2選択）: カンプに行幅が無いため他11行の中央値 */
.concept__l7 { --ls: 0.0452em; letter-spacing: var(--ls); }
.concept__l8 { --ls: -0.0592em; letter-spacing: var(--ls); }
.concept__l9 { --ls: -0.0394em; letter-spacing: var(--ls); }
.concept__l10 { --ls: -0.0474em; letter-spacing: var(--ls); }
.concept__l11 { --ls: -0.1121em; letter-spacing: var(--ls); }
.concept__l12 { --ls: -0.05em; letter-spacing: var(--ls); }

/* ---- ボタン（base.css の .u-btn 290×60 をそのまま使用・センター） ---- */
.concept__btn {
  position: absolute;
  left: 537.5px;
  top: 1666px;  /* 2026-08-19 市岡さん指示: ボタン上余白をPC50px/SP45pxに統一（カンプのばらつき補正） */
  z-index: 4;
}

/* ラベルのかな詰め（2026-09-02 文字組み修正・.u-btn グローバルは触らない）
   カンプ実測(1x): 漢字送り PC 23.5px / SP 17.3px＝実装(24.0/17.1)とほぼ一致。
   かな「と」の送りは PC 16〜17px / SP 12.5〜13px で、実装の全角送りより約7px(PC)
   狭い（Figma の palt/pkna）。かな2字を letter-spacing:-0.15em で送り一致
   （と→は ピッチ 実装15.0 vs カンプ15.0）、margin-left:-0.125em はカンプの
   「語→と」の空き（カンプ7.0px / 実装9.5px）に合わせる墨の引き寄せ。
   text-indent は .u-btn の 0.2em（末尾lsの中心補正）を詰め直した値で、
   ラベル墨の中心をピル中心＝カンプのラベル中心（PC 682.75）に戻すためのもの。
   残差: ラベル墨幅は PC 104.5 / カンプ 100.5（+4.0）。カンプのかな字面が
   pkna で別グリフ（と の墨幅 8.0px vs 実装 11.5px）のため、これ以上は詰められない
   （詰めると「とは」が接触する）。両端は ±2.0px に収まっている。
   ★ .concept__btn-label で全体を包むのは、.u-btn が display:flex のため
     span を直に置くとテキストとspanが別々のフレックスアイテムに割れるから。 */
.concept__btn .concept__btn-kana { margin-left: -0.125em; letter-spacing: -0.15em; }
.concept__btn { text-indent: -0.075em; }

/* FV写真の白フェード尾（統合時追加 2026-08-06。カンプ y800-843 の焼き込みストリップ） */
.concept__fvtail {
  position: absolute;
  top: 0;
  left: 0;
  width: 1365px;
  height: 43px;
  z-index: 0;
}

/* ==========================================================
   SP（設計幅393px）— 2026-08-05 SPカンプ実測で再構築
   セクション境界の実測: y795–2219（h1424）。
   ・上端795 は fv の高さ795（SP仕様書のfv申し送り）に合わせた値。
     SP版のFV写真は y683 で完全に白へ抜けるため、PC用の焼き込み尾
     .concept__fvtail はSPでは不要 → display:none。
   ・下端は banner1 の山写真がフェードイン開始する y2219。
     共通仕様表の「concept 795–2100 / banner1 2100–2430」は近似値で、
     「冬物語とは」ボタン(y2128.5–2173)が banner1 側の基準画像に写り込んでいる。
     ボタンは #concept の子要素なので concept が描くしかない＝境界を2219に補正した。
     → banner1 は 2219–2430（h211）になる。統合時に要調整（返却JSON flags 参照）。
   ・筆記体 This は y713 から始まり concept の上端(795)より上に82pxはみ出す。
     .concept は overflow:visible にして top:-82px で置く。#canvas(z:1) が
     .fv(z:0) より上なので、FV下端の白地の上に正しく載る。
   座標はすべて SP 2xマスター（top_sp_server.jpg 786×20435）実測値の1x換算。
   ========================================================== */
@media (max-width: 767px) {

  /* 幅は sp.css の `.concept { width: var(--canvas) }` が担当。ここでは高さと
     クリップだけを扱う（This のはみ出しを描くため overflow を解除する） */
  .concept {
    /* 統合時修正 2026-08-06: banner1実測（写真開始 y2206・ボタン下端2173の33px下）に合わせ
       1424→1411へ。concept実測の「2219」はフェード判定閾値の差で、2206–2219は準白帯 */
    height: 1411px;
    overflow: visible;
  }

  /* PC専用の焼き込み尾。SPではFV側(0–795)に収まっているため不要 */
  .concept__fvtail { display: none; }

  /* ---- 筆記体（SP専用アセット・#ececec 実測 RGB(236,236,236)） ----
     グリフは新カンプPC版と同一のため *_pc.png のアルファから作成し、
     SP表示サイズの2xで書き出した（*_sp_silver.png）。
     重なり順はPCと同じ: 写真(z2)がスクリプト(z1)の上／is だけ花火の前(z3) */
  .concept__script--this {
    left: 18px;  top: -82px;  width: 168px; height: 90px;
    background-image: url(../../img/script/this_sp_silver.png);
  }
  .concept__script--okuhida {
    left: 14px;  top: 529px;  width: 291px; height: 81px;
    background-image: url(../../img/script/okuhida_sp_silver.png);
  }
  .concept__script--winter {
    left: 106px; top: 1139px; width: 279px; height: 79px;
    background-image: url(../../img/script/winter_sp_silver.png);
  }

  /* ---- 散らし写真（SP 2xマスター直切り img/sp/concept_*.jpg・<picture>で切替） ----
     構図はPC版と同一だが表示が小さく、PC画像(2倍以上の縮小)を使うと
     リサンプル差だけで写真面の30〜40%が閾値16を超える。SP専用に等倍2xを切る。
     ★罠: 切り出しは必ず2xマスターの「偶数」境界＝1x整数座標で行うこと。
        奇数境界(1xで.5px)で切ると縮小結果が半画素ずれ、写真面のdiffが
        0%→30%に跳ね上がる（実測）。矩形は1x書き出しPNGの非白bboxで確定した */
  .concept__photo--bridge    { left: 53px;  top: -1px;   width: 139px; height: 98px; }
  .concept__photo--fireworks { left: 243px; top: 42px;   width: 128px; height: 206px; } /* is焼き込み一体化で下へ24px拡張（2026-08-18） */
  .concept__photo--ropeway   { left: 0;     top: 138px;  width: 143px; height: 103px; }
  .concept__photo--frost     { left: 54px;  top: 585px;  width: 101px; height: 147px; }
  .concept__photo--forest    { left: 195px; top: 666px;  width: 171px; height: 124px; }
  .concept__photo--shishimai { left: 295px; top: 773px;  width: 98px;  height: 68px; }
  .concept__photo--onsen     { left: 0;     top: 1075px; width: 130px; height: 131px; }
  .concept__photo--night     { left: 228px; top: 1208px; width: 123px; height: 88px; }

  /* ---- 中央揃えコピー ----
     カンプ実測: 行送り28px・漢字の送り約16px（PC版と同じくFigmaのpalt詰め）。
     根拠: SP/PCの同一行の墨面幅比が 273/410・244/366 いずれも 0.666。
     カンプ12行の墨面中心はすべて x195.5〜195.75（キャンバス中心196.5）。
     2026-09-02 文字組み修正: 文字種span・行トラッキング（--ls）はすべて em 指定なので
     PC の値がそのまま効く（SP専用の letter-spacing は不要になったので削除）。
     必要 em を PC/SP 別々に実測したところ差は最大 0.004em（SPで0.06px）で、
     12行とも共通値で墨幅が±0.5px に収まることを確認済み。
     padding-left は行末「、」「。」の送り分の中心ズレ補正。span化で必要量が
     8px → 1.5px に減った（12行の中心ズレ平均が +0.77px → 0.0px になる値）。
     top は「行ボックス上端 = カンプの墨面上端 − 8.667px」から算出
     （PC実測のオフセット17px を L=50/F=21 → L=28/F=14 へ換算した値。
      copy1=1092.5-8.667-795、copy2は実測最小の +1.5px を足した値） */
  .concept__copy {
    width: 393px;
    padding-left: 1.5px;
    font-size: 14px;
    /* letter-spacing は PC 側の var(--ls)（em指定）をそのまま使う。
       旧 0.13px は 0.0095em＝PC 0.2px の等倍換算なので値は変わらない */
  }
  .concept__copy--1 { top: 288.8px; }
  .concept__copy--2 { top: 843.3px; }
  .concept__copy p,
  .concept__copy-gap { height: 28px; line-height: 28px; }

  /* ---- ボタン（sp.css の .u-btn 214×45・カンプ実測 x89–303.5 / y2128.5–2173） ---- */
  .concept__btn {
    left: 89.5px;
    top: 1313px;  /* 2026-08-19 市岡さん指示: ボタン上余白をPC50px/SP45pxに統一（カンプのばらつき補正） */
  }

  /* ---- ボタンラベルの字面サイズ（2026-09-02 サイズ相殺の再点検で検出・SP限定） ----
     「行幅は合っているのに字面が違う」典型。2xカンプ実測（地→白の50%閾値・墨bbox）:
       カンプのラベル漢字 冬24×26 / 物24×26 / 語25×25
       同じカンプの本文14px（L4「冬物語」）  冬24×26 / 物24×26 / 語24×25  ＝ 同一サイズ
       実装（sp.css .u-btn 15px）           冬26×27 / 物27×27 / 語27×26  ＝ 本文の約1.07倍
     テンプレートのスケール探索でも最良一致は 0.93〜0.96（＝14/15）。
     字送りは逆にカンプの方が広く（漢字ピッチ カンプ17.375px vs 実装17.1px）、
     「小さい字面 × 広い字間」で墨幅だけが一致していた（墨幅 カンプ74.0 / 実装75.0px）。
     → font-size 15→14px、letter-spacing 2.1→3.375px（漢字ピッチ17.375px）に組み直す。
     かなは margin-left -3.5px / letter-spacing -0.25px で
     「語→と」13.875px・「と→は」13.75px（いずれもカンプ実測）に合わせる。
     text-indent は末尾lsぶんの中心補正の付け直し（ラベル墨の中心をピル中心 x196.5 に戻す）。
     ピルの位置・サイズ（214×45・top1313＝2026-08-19 市岡さん指示）は変更しない。
     ★ .u-btn（base.css / sp.css）はグローバルなので触らず、concept 側の上書きだけで閉じる。 */
  .concept__btn { text-indent: 1.1px; }
  .concept__btn .concept__btn-label {
    font-size: 14px;
    letter-spacing: 3.375px;
  }
  .concept__btn .concept__btn-kana {
    margin-left: -3.5px;
    letter-spacing: -0.25px;
  }
}

/* ==========================================================
   【2026-10-01 横山さん指示（冬物語ルーム・SPのスクリーンショット付き）・市岡さん選択「PCにも入れる」】
   「ここの文字がガタガタになっていたり、文字間がバラバラなので統一して読みやすいようにしたいです。」
   原因: 2026-09-02 にカンプ（Figma の palt 詰め）へ寄せるため、漢字だけ広く（+0.224em）・
   「、。」を詰め（−0.230em）・行ごとに別の詰め（−0.134〜+0.045em）を当てていた。
   Web の Zen Old Mincho は palt を持たないので、かなが全角のまま漢字だけ空き、字間が字種で波打って見えていた。
   → 12行すべて・全字を同じ送り（1文字＋0.05em）にそろえる。字種別の詰め（.concept__kj ほか）と
     行ごとの --ls は打ち消す（HTMLの span はそのまま＝元に戻す時はこのブロックを消すだけ）。
   行末はすべて「、」「。」で終わり、その字の右半分が空く＝行の墨が左へ寄る。
   padding-left 0.55em で中心を戻す。実測（墨の左右端の中点−キャンバス中央・12行）:
   SP −0.75〜+1.75px ／ PC −0.92〜+0.98px（変更前は SP −1.5〜+1.5 ／ PC −1.87〜+0.5）。
   英語ページ（en.html・lang="en"）は文の組みが別なので html[lang="ja"] で日本語ページだけに当てる
   ========================================================== */
html[lang="ja"] .concept__copy { --ls: 0.05em; padding-left: 0.55em; }
html[lang="ja"] .concept__copy [class^="concept__l"] { --ls: 0.05em; letter-spacing: var(--ls); }
html[lang="ja"] .concept__copy .concept__kj,
html[lang="ja"] .concept__copy .concept__yk,
html[lang="ja"] .concept__copy .concept__nk,
html[lang="ja"] .concept__copy .concept__kc { letter-spacing: var(--ls); margin-left: 0; }
/* 「 は字面が右半分にある＝行頭に来ると墨が右へ寄る（実測 SP +3.0px）。行頭の空きだけ左へ戻す
   （行の頭を詰めるだけで字と字の間隔は変えない） */
html[lang="ja"] .concept__copy .concept__ko { margin-left: -0.43em; }

/* ==========================================================
   【2026-10-06 字間そろえ（字種別の詰めを廃止）】ボタン「冬物語とは」: かな「とは」だけの詰め
   （PC letter-spacing -0.15em・margin-left -0.125em ／ SP -0.25px・margin-left -3.5px）をやめ、全字同じ送りに。
   値は現状の平均送りを保つ（実寸 PC 1.082em → 0.08em ／ SP 1.115em → 0.115em）。ピルの寸法・位置は不変。日本語ページだけ。
   ※ 値の導出（2026-10-06 レビューで補正）: PC はキャンバス 1365px を幅 1440px へ等比拡大して表示しているため、
      ビューポート px で測った送りは 1.0549 倍に見える。平均送りは実寸（÷1.0549）で取り直した
   ========================================================== */
html[lang="ja"] .concept__btn .concept__btn-label { letter-spacing: 0.08em; }
html[lang="ja"] .concept__btn .concept__btn-kana { margin-left: 0; letter-spacing: inherit; }
@media (max-width: 767px) {
  html[lang="ja"] .concept__btn .concept__btn-label { letter-spacing: 0.115em; }
}

/* ==========================================================
   【2026-10-07 FV 写真5枚のフェード】FV下端の裾（y800〜843 の焼き込み帯）も写真ごとに5枚。
   .concept__fvtail は箱（溶解スクラブの opacity は main.js が箱に掛ける）、中の img を FV と同じ番号に切り替える。
   切替の作法は FV と同じ（is-active が前面でフェードイン・is-prev は下で表示したまま）
   ========================================================== */
.concept__fvtail-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.concept__fvtail-img.is-active {
  z-index: 2;
  opacity: 1;
  transition: opacity 2s cubic-bezier(0.45, 0, 0.55, 1);
}
.concept__fvtail-img.is-prev { z-index: 1; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .concept__fvtail-img.is-active { transition: none; }
}

/* ==========================================================
   【2026-10-08 HEROU定例 10/7（横山さん）】SP「冬物語とは」: 「真ん中あたりで読むのに、アニメーション（写真）が
   かぶりすぎてて」「文字にかぶらないように写真を配置する。でも写真が縮こまる・固まるのは嫌」［09:05:30〜09:07:26］
   原因: 写真はスクロールに合わせて data-speed の割合でずれる（main.js §4）。文章の上の写真は下へ、下の写真は上へ寄るので、
         静止位置では離れていても、読んでいる間に行へ食い込んでいた（実測: ロープウェイ 最大67px・露天風呂 最大80px・霧氷 17px・花火 10px）
   新: 大きさは変えず、元の上・中・下の帯の中で置き直す＋3枚だけ SP の動き幅を下げる（data-speed-sp・PCは不変）。
       判定＝文章の各行が画面に完全に見えている間のどのスクロール位置でも、写真が行（＋余白6px）に重ならないこと。
       画面の高さ 667／750／844／932px の4通り・日本語と英語の両方で合格する配置を計算で探した
       （work/review_20261008/sim_*.py。写真どうしも静止位置で6px以上離す・ボタンにかけない）
       橋 9px上／花火 12px上／ロープウェイ 44px上・動き0.22→0.143／霧氷 48px左・動き0.18→0.144／
       樹林 80px左（中央寄り）／獅子舞 49px上／露天風呂 71px下・動き0.2→0.16／夜の湯畑 2px上
   戻す時はこのブロックを消し、index.html の data-speed-sp を外す
   ========================================================== */
@media (max-width: 767px) {
  .concept__photo--bridge    { left: 53px;  top: -10px; }
  .concept__photo--fireworks { left: 243px; top: 30px; }
  .concept__photo--ropeway   { left: 0;     top: 94px; }
  .concept__photo--frost     { left: 6px;   top: 584px; }
  .concept__photo--forest    { left: 115px; top: 668px; }
  .concept__photo--shishimai { left: 295px; top: 724px; }
  .concept__photo--onsen     { left: 0;     top: 1146px; }
  .concept__photo--night     { left: 228px; top: 1206px; }
}

/* ==========================================================
   【2026-10-14 河野さん修正リスト・TOP「メインビジュアル下部に線？のようなものが見える」②（PC）】
   PC はスクロールし始めると、固定の FV の上を本文（#canvas）がせり上がる。本文の先頭の裾の帯（.concept__fvtail＝FV 写真の続き・
   静止時にカンプと一致させる焼き込み）と、その裏に見えている FV の明るさが合わず、本文の上端が横一直線の線に見えていた
   （2026-10-13 本番実測 PC1440: スクロール 20〜90px で上端の段差 輝度 +17〜+28、境目の1画素はさらに −2〜−11。
   カーテン先導霧はスクロール量に比例して湧くため、出始めは隠しきれない）。
   裾の帯と本文の白地を、上端 0 → 43px（帯の高さ）で透明 → 不透明にぼかして FV と溶け合わせる。
   静止時（スクロール 0）は帯が画面の外なので見た目は変わらない。SP は帯なし・カーテン演出なし＝対象外。戻す時はこのブロックを消す
   ========================================================== */
@media (min-width: 768px) {
  .concept { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 43px); }
  .concept__fvtail {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 43px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 43px);
  }
}

/* ==========================================================
   【2026-10-15 TOP「線がまだ残っている」（市岡さん 10/15・PC）】
   10/14 の②で本文の上端 43px を常に透明→白のぼかしにしたため、スクロールが進んで上の霧（.curtain-fog）が真っ白になった後も
   上端から FV の写真が透けて見え、霧の白と本文の白の間に淡い写真の帯（横線）が出ていた（本番実測 PC1440: 境目の下の暗い帯 最大 26.1・
   1920: 20.9・1280: 30.9。10/14 以前は 2.6／1.8／4.5）。
   上端の透け具合を --fvedge-a（0＝透明・1＝白）にし、main.js §4 が霧のかぶり量で切り替える:
     霧の板は本文の上端より lag×0.05（設計px）下までかぶっている（lag＝画面高−スクロール量）。かぶりが焼き込み帯 43px を割って
     約 30〜35px になった所で帯が出始める（1280／1440／1920 で 31／35／34px）→ かぶり 34px で透け始めをやめ、30px で白（10/14 以前と同じ）。
   実測（境目の下の暗い帯／スクロールし始めの段差・最大）: 1280 4.5／8.9（60px の1コマ）・1440 4.1／3.4・1920 1.8／3.1・2560 0／2.7
   （今の本番 30.9／2.3・26.1／3.4・20.9／3.1・0／2.7、10/14 以前 4.5／14.4・2.6／14.6・1.8／23.4）。SP は帯なし＝対象外。
   戻す時はこのブロックと main.js §4 の --fvedge-a の1行を消す（10/14 の②に戻る）
   ========================================================== */
@media (min-width: 768px) {
  .concept { background: linear-gradient(to bottom, rgba(255, 255, 255, var(--fvedge-a, 0)) 0, #fff 43px); }
  .concept__fvtail {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--fvedge-a, 0)) 0, #000 43px);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--fvedge-a, 0)) 0, #000 43px);
  }
}

/* ==========================================================
   【2026-10-16 横山さん（冬物語ルーム 10/16 9:06・スクリーンショット）「スクロールした際に黒い線が出てくる」（PC）】
   原因: 上の霧の板（.curtain-fog__l1・img/fog_cap.png）は下端約 60px が不透明の白で、本文の上端より lag×0.05（設計px・
   lag＝画面高−スクロール量）下までかぶる。その硬い下端の下には裾の帯（.concept__fvtail＝FV 写真の続き）の淡い灰がまだ
   見えていて、輝度 255→249 の段差が横一直線の線に見えていた（2026-10-16 本番実測・同じ位置で前後を撮った比較。
   1710×1030 DPR2: スクロール 309px で段差 5.1・412px で 4.0／1920: 6.4／2560: 7.3）。
   直し方: main.js §4 が霧のかぶり量を --fogcov（設計px）で渡し、裾の帯を「霧の下端の 12px 上〜16px 下で透明」に、本文の白地を
   「霧の下端から不透明の白」にする（霧の下端より上は霧の白・下は本文の白＝段差が出ない。溶かし始めは霧に隠れる位置）。
   霧が湧き切るまで（スクロールが画面高の12%まで・霧の不透明度 rise＜1）は --fogcov を (1−rise)×60px 下へ逃がす＝静止時は効かない。
   霧の板を下端でぼかす案・霧の下に白のぼかしを足す案は、裾の濃い所がのぞく／広い画面で最初の写真を白く覆うので不採用。
   直した後（main.js 込み）: 1710 5.0→0.9／4.0→0.9（WebKit 5.4→1.0）・1920 6.4→1.2・1440 4.7→2.0・1366 5.4→3.0・2560 7.1→0.5。写真・筆記体・本文の差は最大5階調。
   静止時（スクロール0）と霧が湧き切る前は効かない（同じページで --fogcov を無効にした時と同じ画素。差が出たのは画面最下行だけで、
   この行は本番も読み込みごとに 207〜213 で揺れる）。JS が無い時は --fogcov が無く 10/15 と同じ。
   2560 幅のスクロール 432px 前後で霧の下端が最初の写真にかかる段差（14.6）は別件・今回は未変更。
   戻す時はこのブロックと main.js §4 の --fogcov の1行を消す（10/15 に戻る）
   ========================================================== */
@media (min-width: 768px) {
  .concept { background: linear-gradient(to bottom, rgba(255, 255, 255, var(--fvedge-a, 0)) 0, #fff min(43px, var(--fogcov, 43px))); }
  .concept__fvtail {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--fvedge-a, 0)) 0, #000 43px), linear-gradient(to bottom, #000 calc(var(--fogcov, 200px) - 12px), transparent calc(var(--fogcov, 200px) + 16px));
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--fvedge-a, 0)) 0, #000 43px), linear-gradient(to bottom, #000 calc(var(--fogcov, 200px) - 12px), transparent calc(var(--fogcov, 200px) + 16px));
    mask-composite: intersect;
  }
}

/* ==========================================================
   【2026-10-16b HEROU定例 10/16（横山さん）】SP「冬物語とは」の花火の写真「花火の位置が低いかな・もう少し気持ち上げれるのであれば」
   ［文字起こし 09:13:38〜09:13:53］→ 市岡さん選択「SPの散らし写真を上へ」。PC は変えない。
   花火（右上・下端に筆記体 is を焼き込んだ1枚）は 10/8 の置き直しで top 30px＝左の橋（top −10px）より 40px 低く、
   写真が画面に入ってくる位置では右だけ一段下がって見えていた（本番実測 440×956: 橋 389px／花火 418px）。
   30px 上げて top 0（静止位置で橋との差 10px。動き幅 0.08 は変えない）。
   10/8 の検算（work/review_20261008/sim_concept_sp.py の overlaps・画面高 667/750/844/932・日英）で、文章の行に重ならない（深さ 0）ことを確認済み。
   戻す時はこのブロックを消す
   ========================================================== */
@media (max-width: 767px) {
  .concept__photo--fireworks { top: 0; }
}

/* ==========================================================
   【2026-10-16c 市岡さん（10/16 夜・PC の Chrome）「FV からスクロールしたときの線も直ってない」】
   上の【2026-10-16】は裾の帯を「霧の下端の 12px 上〜16px 下」で透明にしていた。霧の板（fog_cap.png）は下端で硬く切れるので、
   霧の下端から 16px 下までの間だけ裾の写真（FV の続き・不透明度 0.4〜0.9）が透けて残り、霧の硬い下端の直下に薄い点線状の帯が
   横一直線に見えていた（2026-10-16 23:58 本番実測 1512×982 DPR2・スクロール 500px・写真1枚目: 霧の下端＝本文の上端＋--fogcov の直下）。
   直し方: 裾が消え切る位置を霧の下端より上へ（霧の下端の 36px 上で不透明 → 6px 上で透明）。霧の板の下端 60px は不透明の白なので、
   消えていく途中は霧に隠れ、霧の下端の下は本文の白だけになる。霧が湧き切る前（rise＜1）は --fogcov が (1−rise)×60px 下へ逃げる計算のまま
   ＝スクロールし始めと静止時（スクロール 0）は従来どおり裾が見える。JS が無い時は --fogcov が無く 10/15 と同じ。
   戻す時はこのブロックを消す（10/16 の「12px 上〜16px 下」に戻る）
   ========================================================== */
@media (min-width: 768px) {
  .concept__fvtail {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--fvedge-a, 0)) 0, #000 43px), linear-gradient(to bottom, #000 calc(var(--fogcov, 200px) - 36px), transparent calc(var(--fogcov, 200px) - 6px));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--fvedge-a, 0)) 0, #000 43px), linear-gradient(to bottom, #000 calc(var(--fogcov, 200px) - 36px), transparent calc(var(--fogcov, 200px) - 6px));
  }
}