/* 生成物：_work/build_theme.py が書き出します。直接編集しないでください。
   直す時は _work/build_fv_a.py / build_fv_b.py を直して再生成します。
   ★2案のCSSは data-variant で名前空間を分けています（連結すると後勝ちで潰し合うため）。 */

/* ===== MV案A ===== */
/* ===== 書体（2026-08-29 中尾さん指示「書体はaiに記載されたもので」）
     ヒラギノはWebフォント配信ができない＝ローカル参照。Mac/iOSは本物、Win/AndroidはNoto Sans JPへ。
     ★見え方が環境で変わる点は 40_未解決 U-19 に起票済み。 */
.fv[data-variant="A"] {
    /* ★MVも同じ受け皿を挟む（U-392）＝ヒラギノが無い機（Windows/Android）で、
         **どの機でも同じ幅**になる。中尾さんのスクショで最初に崩れていたのがMVなので、
         ここを外すと一番目立つ所が直らない。@font-face の定義は sections.css にある。 */
    --jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "KKPC", "Noto Sans JP", "Yu Gothic", sans-serif;
    --ink:#5c4e42; --accent:#c2591c; --line:#5c4e42;
    --fv-h: 782.0;
  }
  *{box-sizing:border-box}
  /* ★font-smoothing は antialiased のまま（2026-08-29 実測＝外したら c5_sub が 7.35→10.36 と悪化。
     「スタッフ募集」の輪郭差の原因ではなかった）。 */
  body{margin:0;font-family:var(--jp);background:#fff;color:#251e1c;-webkit-font-smoothing:antialiased}

  /* 設計幅1440pxを基準に、幅に比例して全体が縮む（絶対配置の再現ビルド） */
.fv[data-variant="A"] .stage {position:relative;width:1440px;transform-origin:top left;margin:0 auto}
  /* ★overflow:visible ＝「続きを見る」丸ボタンはFVと次セクションの境界にまたがるデザイン
     （実測 y747.8〜855.4 に対しFVは782で終わる）。hiddenにするとボタンが切れる。 */
  /* ★z-index を持たせて**積み重ねの箱**にする。
     持たせないと、`.fv` の中の「続きを見る」丸ボタン（z-index 43）が、
     次の区画の中身（z-index 100〜300）と**同じ土俵で競う**ことになり、
     境界にまたがる丸ボタンが下の区画へ潜り込む
     （2026-08-31 中尾さん指摘「MVの下のアイコンのレイヤーが下層に潜り込んでいる」）。
     `.sec` は position:relative だが z-index が無いので箱を作らず、
     中の z-index が外へ漏れているのが本当の原因。 */
  /* ★margin:0 auto ＝**MV自身を中央寄せする**。
     テーマ側には `.stage`（中央寄せの器）が無く、CSSの `.stage` 指定も
     `.fv[data-variant] .stage` と入れ子違いで空振りしていた。
     その結果、区画（.sec は margin:0 auto）は中央、MVだけ左端に寄り、
     **画面が1440pxより広いと全部ずれる**
     （2026-08-31 中尾さん Safari 実機・幅1993px で発覚。
      「続きを見る」丸が2つに見えたのは、MVの生きた丸と
      s01の絵に描かれた丸の下半分が、ずれて別々に出ていたため）。 */
/* ★書体は **.fv 自身**に載せる。body の指定に書くと、テーマ化の時に
     セレクタが `.fv[data-variant] body` になる／変数 --jp が `.fv` にしか
     載っていないため **var(--jp) が未定義になって無効**になり、
     ブラウザの既定書体で出る。**Safari の既定は明朝**なので、
     Safariだけ見出しが明朝になっていた
     （2026-08-31 中尾さん実機「ヘッドラインのフォントも明朝になってますね」）。 */
.fv[data-variant="A"] {position:relative;font-family:var(--jp);color:#251e1c;-webkit-font-smoothing:antialiased;margin:0 auto;z-index:20;width:1440px;height:782px;background:#fff}
.fv[data-variant="A"] .fv-tiles {position:absolute;inset:0;overflow:hidden;z-index:5}

  /* ---- ヘッダー ---- */
  /* ★ヘッダーの白帯は不透明ではない＝下の写真が薄く透ける（2026-08-29 設計画像を実測）。
     不透明度は帯なし版との差から較正する（HEAD_A）。 */
.fv[data-variant="A"] .hd {position:absolute;left:0;top:0;width:1440px;height:80.00px;z-index:62;pointer-events:none}
.fv[data-variant="A"] .hd::before {content:"";position:absolute;inset:0;background:#fff;opacity:0.867}
.fv[data-variant="A"] .hd > * {position:absolute}
.fv[data-variant="A"] .hd img.logo {position:absolute;left:41.00px;top:19.00px;width:286.00px;height:47.50px}
.fv[data-variant="A"] .hd .sitename {position:absolute;left:339.70px;top:23.00px;font-size:24px;line-height:1.6375;color:#3e3a39;font-weight:400}
.fv[data-variant="A"] .hd img.menu {position:absolute;left:1369.00px;top:12.00px;width:55.00px;height:54.00px;cursor:pointer}

  /* ---- 写真タイル（★差し替えスロット） ---- */
  /* z-index は設計SVGの描画順を焼く（y順ではない＝2026-08-29 実測） */
.fv[data-variant="A"] .fv-tile {position:absolute;overflow:hidden}
  /* ★width/height/marginは各タイルのstyleで個別指定（設計のマスク位置を再現）。
     object-fit:cover は使わない＝中央基準になり設計とズレる。 */
.fv[data-variant="A"] .fv-tile img {display:block;max-width:none}

  /* ---- 中央カード ---- */
  /* ★z-index は全てSVGの描画順(idx)に合わせる。固定値で並べると重なりが逆転する
     （2026-08-29 実測＝色面をカードの上に置いてしまい t08/t12 が悪化）。
     カード42 / 丸43 / 続きを見る44 / 見出し45-48 / 帯49 / 生野区50 / 募集51 / 枠52 / 未経験53
     / チップ54,56,58,60 / チップ文字55,57,59,61 / ヘッダー62 / サイト名63 / ロゴ64-89 */
.fv[data-variant="A"] .fv-card {position:absolute;z-index:42;background:#fff;box-sizing:border-box;
    border:4px solid var(--line);
    box-shadow:0 0.0px 10.0px rgba(0,0,0,0.6),
               inset 0 0 0 8px #fff, inset 0 0 0 10px var(--line);
    left:421.00px;top:205.00px;width:598.00px;height:442.00px}
  /* ★角丸は実測値。999px（カプセル）にすると形が変わる＝設計は「角を丸めた長方形」。
     バッジ＝上端から9pxで全幅到達→半径9px／チップ＝7px→半径7px（2026-08-30 走査で実測）。
     ただし「未経験／ブランク／異業種」の線囲みだけは設計もカプセル（＝一律にしない）。 */
.fv[data-variant="A"] .fv-tag {position:absolute;z-index:49;background:var(--ink);border-radius:9px;
    left:612.00px;top:246.00px;width:216.00px;height:38.00px}
.fv[data-variant="A"] .fv-sub {position:absolute;z-index:52;border:1px solid var(--line);border-radius:999px;
    left:582.40px;top:483.00px;width:275.20px;height:31.80px}
.fv[data-variant="A"] .fv-chip {position:absolute;border-radius:8px}  /* z-index は各spanで指定 */
  /* 装飾の色面＝タイルより上・カードより下 */
.fv[data-variant="A"] .fv-panel {position:absolute;pointer-events:none}  /* z-index は各spanで指定＝SVGの描画順 */
  /* line-height は各spanのstyleで個別指定（＝設計の行高＝ベースライン一致）。ここでは指定しない */
  /* ★Illustratorの字送りは OpenType の palt（プロポーショナルメトリクス）で決まる。
     切ったままだと1文字ずつの配分がずれ、全体幅を letter-spacing で合わせても
     文字位置が食い違う（2026-08-29 実測＝「募」が3〜4px右にずれた）。 */
.fv[data-variant="A"] .fv-t {position:absolute;white-space:nowrap;font-feature-settings:"palt" 1;font-kerning:normal}
  /* ★約物（、。・／）を含む run は palt を外す。
     Illustratorは約物を詰めておらず、paltを掛けると詰まりすぎる
     （2026-08-29 実測＝「は、」が 0.705 まで縮んだ）。
     ＝[[例外の適用範囲は事故の最小単位まで絞る]]：paltを全体に横展開しない。 */
.fv[data-variant="A"] .fv-t.nopalt {font-feature-settings:"palt" 0}
  /* ★見出しは「白フチ＋その形の影」。設計画像の走査（y=421）で
     墨→純白7px→薄いグレー8px(最暗226/255≒alpha.11) を実測した（2026-08-29）。
     白地に白フチなので縁そのものは見えず、効いているのは"膨らんだ形の影"のほう。
     ★**付けるのは大見出し4run（介護／は、／はじめて／でもいい）だけ**。
       「スタッフ募集」は設計にフチも影も無い＝横展開したら mean 33 まで悪化させた
       （2026-08-29／[[例外の適用範囲は事故の最小単位まで絞る]]）。
     paint-order:stroke fill ＝ フチを先に描いて塗りを上に置く（文字が痩せない）。 */
.fv[data-variant="A"] .fv-hl {paint-order:stroke fill;-webkit-text-stroke:14.0px #fff;
    filter:drop-shadow(0 3.0px 4.0px rgba(0,0,0,0.28))}

  /* ---- 「続きを見る」丸ボタン ---- */
.fv[data-variant="A"] .fv-more {position:absolute;z-index:43;border-radius:50%;background:var(--accent);
    left:666.20px;top:747.80px;width:107.60px;height:107.60px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;
    color:#fff;font-size:1.2500vw;font-weight:700;line-height:1.15;border:0;cursor:default;user-select:none}
.fv[data-variant="A"] .fv-more svg {width:30px;height:auto;margin-top:.14em}

  /* ★「毎回違う写真」バッジ＝スポGOMI hero.php から移す体験の核。
     これが無いと"毎回変わること"に気づかれない（＝ランダムにした意味が伝わらない）。
     見た目は基弘会のトンマナに合わせる（スポGOMIの原色の丸ではない）。 */
  /* 写真を引き直すボタン（スポGOMI型の"目立つ演出"）
     ★脈打つ輪＋回る矢印。動きを止めたい人には prefers-reduced-motion で止める。 */
.fv[data-variant="A"] .fv-shuffle {position:absolute;z-index:70;left:26px;top:104px;
    width:96px;height:96px;border-radius:999px;text-decoration:none;cursor:pointer;
    display:block;-webkit-tap-highlight-color:transparent}
.fv[data-variant="A"] .fv-shuffle-ring {position:absolute;inset:0;border-radius:999px;background:#e0803a;
    pointer-events:none;animation:fv-ring 1.6s cubic-bezier(0,.2,.8,1) infinite}
.fv[data-variant="A"] .fv-shuffle-in {position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;width:96px;height:96px;border-radius:999px;
    background:linear-gradient(135deg,#c2591c 0%,#e0803a 55%,#b78e48 100%);
    color:#fff;border:4px solid #fff;box-shadow:0 18px 34px -12px rgba(0,0,0,.45);
    transition:transform .2s ease}
.fv[data-variant="A"] .fv-shuffle:hover .fv-shuffle-in {transform:scale(1.08)}
.fv[data-variant="A"] .fv-shuffle:active .fv-shuffle-in {transform:scale(.95)}
.fv[data-variant="A"] .fv-shuffle svg {width:26px;height:26px;animation:fv-spin 3.2s linear infinite}
.fv[data-variant="A"] .fv-shuffle b {font-size:11px;font-weight:900;line-height:1.25;letter-spacing:.02em}
.fv[data-variant="A"] .fv-shuffle b:first-of-type {margin-top:3px}
  @keyframes fv-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.5);opacity:0}}
  @keyframes fv-spin{to{transform:rotate(-360deg)}}
  @media (prefers-reduced-motion: reduce){
    .fv-shuffle-ring,.fv-shuffle svg{animation:none}
    .fv-shuffle-in{transition:none}}

  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ===== MV案B（FV2） ===== */
.fv[data-variant="B"] {
    /* ★MVも同じ受け皿を挟む（U-392）＝ヒラギノが無い機（Windows/Android）で、
         **どの機でも同じ幅**になる。中尾さんのスクショで最初に崩れていたのがMVなので、
         ここを外すと一番目立つ所が直らない。@font-face の定義は sections.css にある。 */
    --jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","KKPC","Noto Sans JP","Yu Gothic",sans-serif;
    --ink:#614d3f; --accent:#fbe229;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:var(--jp);background:#fff;color:#251e1c;-webkit-font-smoothing:antialiased}
.fv[data-variant="B"] .stage {position:relative;width:1450px;transform-origin:top left;margin:0 auto}
  /* ★margin:0 auto ＝**MV自身を中央寄せする**。
     テーマ側には `.stage`（中央寄せの器）が無く、CSSの `.stage` 指定も
     `.fv[data-variant] .stage` と入れ子違いで空振りしていた。
     その結果、区画（.sec は margin:0 auto）は中央、MVだけ左端に寄り、
     **画面が1440pxより広いと全部ずれる**
     （2026-08-31 中尾さん Safari 実機・幅1993px で発覚。
      「続きを見る」丸が2つに見えたのは、MVの生きた丸と
      s01の絵に描かれた丸の下半分が、ずれて別々に出ていたため）。 */
/* ★書体は **.fv 自身**に載せる。body の指定に書くと、テーマ化の時に
     セレクタが `.fv[data-variant] body` になる／変数 --jp が `.fv` にしか
     載っていないため **var(--jp) が未定義になって無効**になり、
     ブラウザの既定書体で出る。**Safari の既定は明朝**なので、
     Safariだけ見出しが明朝になっていた
     （2026-08-31 中尾さん実機「ヘッドラインのフォントも明朝になってますね」）。 */
/* ★案Bのアートボードは1449.71px＝**ページ幅1440より広い（ブリード）**。
     ①`margin:0 auto` は「入れ物より広い箱」を中央に置けない（左端に張り付く）
     ②画面が1440以下だと**区画(1440)も左端に張り付く**ので、単純な中央寄せでは揃わない
     （2026-08-31 実測＝幅1440で MV中心713／区画中心720。縦スクロールバーの分、
       使える幅は1425しかない）。
     ∴ **区画と同じ寄せ方**（max(0, 50%-720px)）に合わせ、そこからブリードの半分だけ左へ。
     ＝どの画面幅でも、設計の中心が区画の中心と一致する。 */
.fv[data-variant="B"] {position:relative;font-family:var(--jp);color:#251e1c;-webkit-font-smoothing:antialiased;margin-left:calc(max(0px, 50% - 720px) - 4.855px);margin-right:0;width:1450px;height:793px;overflow:visible;background:#2b2724}
  /* ★背景は object-fit:cover にしない。設計では 1480.08x809.55 の実寸で左上から置かれており、
     cover（中央寄せ）にすると位置がずれる（2026-08-30 実測）。 */
  /* ★背景は cover のまま。設計SVGの矩形は 1480.08x809.55（枠より大きい）だが、
     設計レンダはアートボードでクリップされるので結果は cover と同じ絵になる。
     実寸配置に変えたら mean 12.23→13.71 と悪化したため戻した（2026-08-30 実測）。 */
.fv[data-variant="B"] .bg {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:1}

  /* ★「続きを見る」丸ボタン。**案Bの設計には描かれていない**が、
     次の区画(s01)の絵には**丸の下半分だけ**が描いてある（案Aとつながる前提の絵）。
     案Bのままだと上半分が無く「下層に埋もれた」ように見える
     （2026-08-31 中尾さん指摘）。∴ 案Aと同じ食い込み方で丸を置き、絵をつなぐ。
     位置＝案Aは MV下端から34.2px上に丸の上端。案Bも同じにする。 */
.fv[data-variant="B"] .fv-more {position:absolute;left:671.06px;top:758.80px;
    width:107.6px;height:107.6px;border-radius:50%;background:#c2591c;z-index:43;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;
    color:#fff;font-size:18px;font-weight:700;line-height:1.15;border:0;cursor:default;user-select:none}
.fv[data-variant="B"] .fv-more svg {width:30px;height:auto;margin-top:.14em}
.fv[data-variant="B"] .tile {position:absolute;overflow:hidden}
.fv[data-variant="B"] .tile img {display:block;max-width:none}
.fv[data-variant="B"] .sh {position:absolute}
.fv[data-variant="B"] .t {position:absolute;white-space:nowrap;font-feature-settings:"palt" 1;font-kerning:normal}
.fv[data-variant="B"] .hw {position:absolute;display:block}
.fv[data-variant="B"] .t.nopalt {font-feature-settings:"palt" 0}
  /* 写真を引き直すボタン（スポGOMI型の"目立つ演出"）
     ★脈打つ輪＋回る矢印。動きを止めたい人には prefers-reduced-motion で止める。 */
  /* ★★クラス名は**案Aと同じ `fv-shuffle`**にする（2026-09-02）★★
     中尾さん「MVの画像切替のボタンは**フロート**なので**追従させて**下さい」。
     ★正体＝**案Bだけ `.shuffle` という別の名前**だった。共通の `fv-shuffle.js` は
       `.fv-shuffle` しか探さないので**案Bでは素通り**＝①追従の層へ出されない
       （MVの中に置きっぱなし＝スクロールで流れて消える）②押すと**ページを読み直す**
       （案Aは写真だけ入れ替わる＝U-241/U-243）。
     ★**同じ物は同じ名前**にする＝名前が違うだけで、片方だけ機能が付かない事故になる。 */
.fv[data-variant="B"] .fv-shuffle {position:absolute;z-index:70;left:26px;top:104px;
    width:96px;height:96px;border-radius:999px;text-decoration:none;cursor:pointer;
    display:block;-webkit-tap-highlight-color:transparent}
.fv[data-variant="B"] .fv-shuffle-ring {position:absolute;inset:0;border-radius:999px;background:#e0803a;
    pointer-events:none;animation:sh-ring 1.6s cubic-bezier(0,.2,.8,1) infinite}
.fv[data-variant="B"] .fv-shuffle-in {position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;width:96px;height:96px;border-radius:999px;
    background:linear-gradient(135deg,#c2591c 0%,#e0803a 55%,#b78e48 100%);
    color:#fff;border:4px solid #fff;box-shadow:0 18px 34px -12px rgba(0,0,0,.45);
    transition:transform .2s ease}
.fv[data-variant="B"] .fv-shuffle:hover .fv-shuffle-in {transform:scale(1.08)}
.fv[data-variant="B"] .fv-shuffle:active .fv-shuffle-in {transform:scale(.95)}
.fv[data-variant="B"] .fv-shuffle svg {width:26px;height:26px;animation:sh-spin 3.2s linear infinite}
.fv[data-variant="B"] .fv-shuffle b {font-size:11px;font-weight:900;line-height:1.25;letter-spacing:.02em}
.fv[data-variant="B"] .fv-shuffle b:first-of-type {margin-top:3px}
  @keyframes sh-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.5);opacity:0}}
  @keyframes sh-spin{to{transform:rotate(-360deg)}}
  @media (prefers-reduced-motion: reduce){
    .fv-shuffle-ring,.fv-shuffle svg{animation:none}
    .fv-shuffle-in{transition:none}}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}