/* ============================================================
   Auguri! ─ 下層ページ FV「地になる」（本番・2026-09-19 高野様ご確定）
   ------------------------------------------------------------
   デモ 27 番の **3 地になる** を、FV に写真を持つ下層ページすべてに入れる
   （暮らしの品々・美容とエステ・お知らせ・店舗のご案内・お問い合わせ）。

     ・スクロールに追随して、右の写真の枠が **右端（罫線 1800）を留めたまま左端だけ 0 まで**進む
     ・広がるあいだ画面は止まる（720px）→ 広がりきったまま **留まる**（--fvm-dwell）
     ・見出し・ラベル・英文・リードは動かず、**白に変わって写真の上に残る**（左側だけ薄い陰）
     ・中の写真は元の写真をそのまま縮めた写し（<番号>-wide.webp）。
       枠が 840 幅のあいだは本番の切り抜きと同じ絵、広がると元の写真の全体が見える

   ・JS が動いたときだけ（.fvm-wrap.is-on）。JS が無い環境では ai のまま動かない（再発防止 25）
   ・動きを減らす設定では動かさない（JS が is-on を付けない）
   ・ai 突き合わせ（.compare）では出さない
   ・デモのページ（body に data-fvm が付く 27 番）では、デモの側に任せる
   ============================================================ */

:root {
  /* ↓ この 2 つは **スクロールする量（画面の px）**。版面の大きさ（--s）では縮めない。
     2026-09-19 高野様「とどまる長さが反映されていないように見える」→ 原因の 1 つめ：
     以前は 1920px 基準の値に --s を掛けていたので、画面が狭いほど留まりが短くなっていた
     （統合プレビューを 1512px の窓で開くと --s は .658。960 のはずが実際は 632px）。
     「何 px スクロールするあいだ留まるか」は画面の広さによらず同じであるべきなので、画面の px で持つ。 */
  --fvm-grow: 720;     /* 写真が広がるのに使うスクロール（画面の px） */
  --fvm-dwell: 960;    /* 広がりきったあと留まる長さ。2026-09-19 高野様ご確定「960 ピクセルに」
                          （前回 360 → 2 案 A 720／B 1080 を見比べて 960 に。デモ 28 番） */
}

.fvm-wrap { position: relative; }
.fvm-wrap.is-on { height: calc(1280 * var(--s) + (var(--fvm-grow) + var(--fvm-dwell)) * 1px); }
.fvm-wrap.is-on > .b-hero { position: sticky; top: 0; }
/* 帯のつなぎ目（02-base.css の main.page > .band + .band と同じ手当て） */
.fvm-wrap + .band { box-sizing: content-box; margin-top: -1px; padding-top: 1px; }

/* 写真の枠：右端を留めて、左端だけ進む */
.fvm-wrap.is-on .hero__ph {
  left:  calc((960 - 960 * var(--fvm-e, 0)) * var(--s));
  width: calc((840 + 960 * var(--fvm-e, 0)) * var(--s));
}
.fvm-wrap.is-on .hero__ph > img { object-fit: cover; object-position: 50% 50%; }
/* 見出しが読めるよう、写真の左側だけを少し落とす（右へいくほど何もしない） */
.fvm-wrap.is-on .hero__ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.22) 38%, rgba(0,0,0,0) 62%);
  opacity: var(--fvm-e, 0);
}
/* 文字は動かず、黒 → 白 */
.fvm-wrap.is-on .hero__h, .fvm-wrap.is-on .hero__en,
.fvm-wrap.is-on .hero__lead, .fvm-wrap.is-on .hero__label {
  color: color-mix(in srgb, #fff calc(var(--fvm-e, 0) * 100%), #000);
  z-index: 2;
}
.fvm-wrap.is-on .hero__rule {
  background-color: color-mix(in srgb, #fff calc(var(--fvm-e, 0) * 100%), #000);
  z-index: 2;
}

/* ── 「美容とエステ」などのラベルを、見出しのそばへ（2026-09-19 高野様） ──
   ai では写真の枠の中（x≈1300・20px）。写真が入ると読めないため、見出しの 1 行目の肩へ。
   2026-09-19 高野様ご確定「ラベルは 20 ピクセルのまま、見出しとの間は 40 ピクセル」。
   **大きさは ai のまま 20px**。あき 40px は **目に見える文字の形どうし**
   （ラベルの字の下端 → 見出しの字の上端）で測った値（1920px 幅で実測・verify/out/fvp_gap.txt）。
   位置は build/common.py の hero() が ai の見出しから出して、ラベル自身に
   --fvm-lab-x（見出し 1 行目の x）と --fvm-lab-bl（ラベルのベースライン）で持たせる。
   JS に頼らない（動きではなく組みの変更なので）。.compare では ai の位置のまま。 */
body:not([data-fvm]):not(.compare) .hero__label[style*="--fvm-lab-x"] {
  left: calc(var(--fvm-lab-x) * var(--s));
  top: calc(var(--s) * (var(--fvm-lab-bl) - 10 - 20 * var(--k-jp-20, var(--k-jp))));
}

.compare .fvm-wrap { height: auto !important; }
.compare .fvm-wrap > .b-hero { position: relative !important; }

/* ── 作り替え（2026-09-22・中間レビュー B-1・高野様「作り替え案にして」で本番に）──
   以前の作り（上の left／width を毎フレーム変える）に戻すときは、html に data-fvm-mode="old" を付ける（静的ページなら ?fvm=old）。
   ai 突き合わせ（.compare）では枠を ai の位置・大きさのまま測れるよう、以前の作りで出す ──
   これまでは枠の left と width を毎フレーム変えていた（＝毎フレーム配置の計算と写真の描き直し）。
   案では枠を最初から広がりきった大きさ（左 0・幅 1800）に置き、
     ・見える範囲は clip-path で左から削る（配置の計算が起きない）
     ・中の写真は transform の拡大と横移動で、これまでと同じ切り抜きに合わせる（--fvm-ar＝写真の縦横比。JS が 1 回だけ入れる）
   これまでの「枠が 840 幅のあいだは本番と同じ絵、広がると写真の全体が見える」を、計算で同じ絵にしている */
html:not([data-fvm-mode="old"]):not(.compare) body:not(.compare) .fvm-wrap.is-on .hero__ph {
  left: 0; width: calc(1800 * var(--s));
  clip-path: inset(0 0 0 calc(960 * (1 - var(--fvm-e, 0)) * var(--s)));
  --fvm-wv: calc(840 + 960 * var(--fvm-e, 0));                 /* 見えている幅（1920 基準の数） */
  --fvm-dw: max(var(--fvm-wv), 1160 * var(--fvm-ar, 1.5));     /* これまでの切り抜きでの写真の幅 */
  --fvm-bw: max(1800, 1160 * var(--fvm-ar, 1.5));              /* 枠いっぱい（1800）での写真の幅 */
}
html:not([data-fvm-mode="old"]):not(.compare) body:not(.compare) .fvm-wrap.is-on .hero__ph > img {
  /* 写真は元の縦横比のまま、枠いっぱい（1800）に覆う大きさで置く（切り抜きは枠がする）。大きさは動かさない */
  position: absolute; max-width: none; object-fit: fill;
  width: calc(var(--fvm-bw) * var(--s)); height: calc(var(--fvm-bw) / var(--fvm-ar, 1.5) * var(--s));
  left: calc((1800 - var(--fvm-bw)) / 2 * var(--s)); top: calc((1160 - var(--fvm-bw) / var(--fvm-ar, 1.5)) / 2 * var(--s));
  transform-origin: 50% 50%;
  /* 写真の寄せ（object-position。写真ごとの FOCUS）も合わせる：--fvm-ox／--fvm-oy（0〜1）は JS が 1 回だけ入れる */
  transform: translate(calc((960 * (1 - var(--fvm-e, 0)) + (var(--fvm-wv) - var(--fvm-dw)) * var(--fvm-ox, .5) + var(--fvm-dw) / 2 - 900) * var(--s)),
                       calc(((1160 - var(--fvm-dw) / var(--fvm-ar, 1.5)) * var(--fvm-oy, .5) + var(--fvm-dw) / var(--fvm-ar, 1.5) / 2 - 580) * var(--s)))
             scale(calc(var(--fvm-dw) / var(--fvm-bw)));
}
html:not([data-fvm-mode="old"]):not(.compare) body:not(.compare) .fvm-wrap.is-on .hero__ph::after {
  transform-origin: 0 0;
  transform: translateX(calc(960 * (1 - var(--fvm-e, 0)) * var(--s))) scaleX(calc(var(--fvm-wv) / 1800));
}

/* ============================================================
   SP（767px 以下）の「地になる」＝「横に広がる」（本番・2026-09-24 高野様「FVは横に広がるで反映して」）
   ------------------------------------------------------------
   PC と同じ向き。FV は 1 画面の高さ。文字は左の列（幅の 60%）、写真は右の縦長の枠（幅の 62% から右端・ヘッダーの下から FV の下まで）。
   送ると画面が止まり、写真の枠が右端を留めて左へ広がり、画面いっぱいの地になる。文字は黒 → 白、左側に薄い陰。広がりきったあと留まる。
   動かすのは transform と opacity だけ（なめらかさのため。枠の広がりは「枠ごと右へずらし、中の写真を逆へずらす」で作る）。
   文字の色は、広がりが 3 割を越えたら 0.8 秒かけて白へ（スクロールのたびに文字を描き直さない）。
   JS（fv-motion.js の SP の部分）が .is-sph を付けたときだけ。JS が無い・動きを減らす設定では、今までの SP の組み（写真 → 文字）のまま。
   改行は build/sp.py の FV_BREAKS（<br class="fv-br">・意味のまとまりで改行）。
   ============================================================ */
br.fv-br { display: none; }
/* SP の FV の組みだけに足す文字（build/sp.py の FV_ADD。2026-09-24「その人らしい、健やかな美しさへ。」の読点） */
.fv-add { display: none; }
@media (max-width: 767px) {
  main.page .fvm-wrap.is-sph > .b-hero { position: sticky; top: var(--fvs-top, 0px); }
  main.page .fvm-wrap.is-sph .b-hero .band__in {
    min-height: 100vh; min-height: 100lvh;
    flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: flex-start;
    padding-top: 88px; padding-bottom: 40px; padding-bottom: calc(40px + 100lvh - 100svh);   /* 文字は「アドレスバーが出ているときに見える高さ」の中で上下中央 */
  }
  main.page .fvm-wrap.is-sph .b-hero .hero__ph {
    position: absolute; left: 0; top: 64px; bottom: 0; width: 100%; height: auto; margin: 0; overflow: hidden; background-color: transparent; z-index: 1;
  }
  .fvs-mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; will-change: transform; }
  .fvs-mask > img { position: absolute; left: 0; top: 0; max-width: none; object-fit: fill; transform-origin: 0 0; will-change: transform; }
  .fvs-veil { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; will-change: opacity, transform; pointer-events: none;
    background-image: linear-gradient(90deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.22) 38%, rgba(0,0,0,0) 62%); }
  main.page .fvm-wrap.is-sph .hero__ph > .ph__no, main.page .fvm-wrap.is-sph .hero__ph > .ph__label { left: 62%; z-index: 2; }
  main.page .fvm-wrap.is-sph .hero__label, main.page .fvm-wrap.is-sph .hero__h, main.page .fvm-wrap.is-sph .hero__en,
  main.page .fvm-wrap.is-sph .hero__lead, main.page .fvm-wrap.is-sph .hero__rule {
    position: relative; left: auto; top: auto; z-index: 2; width: calc(60vw - var(--sp-gutter)); white-space: normal;   /* 列の右端＝画面の 60%（写真の枠は 62% から） */
  }
  main.page .fvm-wrap.is-sph .hero__label, main.page .fvm-wrap.is-sph .hero__h,
  main.page .fvm-wrap.is-sph .hero__en, main.page .fvm-wrap.is-sph .hero__lead { color: #000; transition: color .8s cubic-bezier(.22,1,.36,1); }
  main.page .fvm-wrap.is-sph .hero__rule { background-color: #000; transition: background-color .8s cubic-bezier(.22,1,.36,1); }
  main.page .fvm-wrap.is-sph.is-ground .hero__label, main.page .fvm-wrap.is-sph.is-ground .hero__h,
  main.page .fvm-wrap.is-sph.is-ground .hero__en, main.page .fvm-wrap.is-sph.is-ground .hero__lead { color: #fff; }
  main.page .fvm-wrap.is-sph.is-ground .hero__rule { background-color: #fff; }
  main.page .fvm-wrap.is-sph .hero__h { font-size: clamp(20px, 6.2vw, 24px); letter-spacing: .04em; word-break: keep-all; overflow-wrap: normal; }
  main.page .fvm-wrap.is-sph .hero__en { font-size: clamp(14px, 4.1vw, 16px); }
  main.page .fvm-wrap.is-sph .hero__lead { font-size: clamp(12px, 3.35vw, 13px); line-height: 1.9; letter-spacing: .04em; }
  main.page .fvm-wrap.is-sph .hero__lead .ln { display: inline; }
  main.page .fvm-wrap.is-sph .b-hero br.fv-br { display: inline; }
  main.page .fvm-wrap.is-sph .b-hero .fv-add { display: inline; }
  /* 「1 行に」とご指定のあった行（build/sp.py の FV_FIT・2026-09-24）。折り返さず、列（画面の 60%）から写真の手前（62% の 4px 手前）までに収める。
     字間は 0 にし、それでも入らない狭い画面だけ文字を小さくする（ほかの行より大きくはしない） */
  main.page .fvm-wrap.is-sph .b-hero .fv-fit {
    white-space: nowrap; letter-spacing: 0;
    font-size: min(1em, calc((62vw - var(--sp-gutter) - 4px) / (var(--n) * 1.02)));
  }
  main.page .fvm-wrap.is-sph .b-hero .fv-fit wbr { display: none; }
  /* FV のすぐ下の帯と写真のあいだの白い筋（2026-09-24 高野様「画像との間に微妙な隙間」・暮らしの品々 24 と 25）。
     帯のつなぎ目の手当て（.fvm-wrap + .band を 1px 上から塗る）が、この組みでは FV の写真の下端 1px を
     帯の地（白）で塗りつぶしていた。この組みの FV は画面の高さちょうど（整数 px）で終わるので、手当ては要らない */
  main.page .fvm-wrap.is-sph + .band { margin-top: 0; padding-top: 0; }
  /* 店舗のご案内：FV のすぐ下の動画（66）を FV にすき間なくつける（2026-09-24 高野様「FV と動画を隙間なくくっつけて」）。
     帯の上の余白（約 49px）はこの組みでは写真と写真のあいだの白になるので 0 に。広がらない組み（写真→文字）では余白のまま */
  main.page .fvm-wrap.is-sph + .b-sh-welcome .band__in { padding-top: 0; }
}
/* 幅 360 未満（SE 第 1 世代 320 など）：列が 170px ほどになるので、リードの字間を詰めて 1 行に収め、上下の余白も少し詰める */
@media (max-width: 359px) {
  main.page .fvm-wrap.is-sph .hero__lead { letter-spacing: .01em; }
  main.page .fvm-wrap.is-sph .b-hero .band__in { padding-top: 80px; padding-bottom: 28px; padding-bottom: calc(28px + 100lvh - 100svh); }
}