/* ============================================================
   MUKIAI v2 事例ページ（case-v2.html）だけの見た目（v9 2026-10-11／v9.1 検査の指摘を直した版）
   読む順：top.css → … → sections.css → cta.css → このファイル（最後）。共通ファイルは触らず、ここで上書きする。
   主役の演出は1つだけ：ヒーローの数字ブロック「ばらばらが、並ぶ」（.case-stat）。
     87項目の四角が、ばらばらから15列の格子に並び、時間まで書けた71個が明るくなり、週270.7時間の帯の左32.0%が点く。
     読み込み時に一度だけ。CSS の transition だけで動かす（class を付けるのは case-v2.html のヒーロー直後のインラインの1行。page-case.js は使わない）。
   ほかは足さずに減らす：ヒーローの軌道の線を消す、#graduate のピン留めをやめる（HTML 側）、物語の場面を詰める、スマホの舞台の絵を5枚に減らす、
   場面4の舞台から格子とカウントアップを外す（v9.1）。
   ============================================================ */

/* ---------------- 1. ヒーロー ---------------- */
.space.sub .page-hero .orbit-deco{display:none}
/* 1440×900 の最初の画面に、数字3つと「AIで減らせる見込み」まで入れるため、上下の余白を詰める */
.space.sub .page-hero{padding-top:calc(var(--header-h) + clamp(32px,2.4vw,40px));padding-bottom:clamp(64px,7vw,96px)}
/* 見出しは --t2 に下げて、数字（.cn .n）をこの画面で一番大きい文字にする */
.space.sub .page-title{font-size:var(--t2);line-height:var(--lh2);letter-spacing:-.01em;max-width:21em}
.space.sub .page-hero .page-lead{margin-top:clamp(14px,1.2vw,18px)}
/* 日付の途中（2026／年9月29日）で折り返さないよう、<wbr> の所でだけ折る。inline-flex のままだと文節の塊が横に並んではみ出すので block にする */
.space.sub .page-hero .page-tag{display:block}
.space.sub .page-hero .page-tag::before{display:inline-block;vertical-align:middle;margin:-2px 12px 0 0}

/* 数字ブロック：左に格子、右に数字3段（スマホは1列） */
.case-stat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(24px,2.2vw,32px);overflow:hidden}
@supports (overflow-clip-margin:1px){.case-stat{overflow:clip;overflow-clip-margin:16px}}   /* 帯の光（box-shadow）の左端だけ切れないように */

/* 格子：15列。--sx/--sy は格子の箱の幅・高さに対する割合なので、箱を container にして cqw で解く（高さ＝6段≒幅の0.4） */
.case-field{container-type:inline-size;display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:3px;align-content:start}
.case-field>i{display:block;aspect-ratio:1;border-radius:3px;background:#2B4A8C}
.case-field>i.hi{background:#6EA6FF}
.case-field>i:nth-of-type(3n+1){--c0:#3B82F6}
.case-field>i:nth-of-type(3n+2){--c0:#2B4A8C}
.case-field>i:nth-of-type(3n){--c0:#06B6D4}

/* 帯：高さ8px・格子の幅。左 32.0% がブランドの2色で点く */
.case-bar{grid-column:1 / -1;position:relative;display:block;margin-top:15px;padding-top:8px}
.case-bar-fill,.case-bar-lit{position:absolute;left:0;top:0;height:8px;border-radius:4px;transform-origin:0 50%}
.case-bar-fill{right:0;background:rgba(255,255,255,.14)}
.case-bar-lit{width:32%;background:linear-gradient(90deg,#3B82F6,#06B6D4);box-shadow:0 0 18px rgba(59,130,246,.55)}
.case-bar small{display:block;margin-top:10px;font-size:var(--t5);line-height:var(--lh5);font-weight:500;color:var(--note)}
/* v9.1：添え書きは2行。四角の明るさの意味と、帯の光っている部分（AIで減らせる見込み）を、絵のすぐ下で言う */
.case-bar small>span{display:block;word-break:keep-all;overflow-wrap:anywhere}

/* 数字3段：--rule の線で区切る */
.case-nums{display:grid;border-bottom:1px solid var(--rule)}
.case-nums .cn{padding:clamp(12px,1vw,14px) 0;border-top:1px solid var(--rule)}
.cn dt{display:flex;flex-wrap:wrap;align-items:baseline;color:#fff;line-height:1;text-shadow:0 0 22px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.9)}
/* 数字の大きさは type.css の例外（料金の数字と同じ扱い） */
.cn .n{font-family:var(--font-en);font-weight:800;font-size:clamp(44px,6vw,96px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cn small{font-size:var(--t4);font-weight:900;margin:0 4px}
.cn dt>small:first-child{margin-left:0}
.cn em{font-style:normal;font-size:var(--t3);font-weight:700;margin-left:10px;background:linear-gradient(90deg,#3B82F6,#06B6D4);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.cn dd{margin:4px 0 0;word-break:keep-all;overflow-wrap:anywhere;font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body);text-shadow:0 0 14px rgba(3,6,14,.9)}
.cn dd.cn-note{margin-top:2px;font-size:var(--t5);line-height:var(--lh5);font-weight:500;color:var(--note)}

/* ---- 出る前の形（.is-armed はインラインの1行が描画前に付ける。動きを減らす設定・JS無効のときは付かない＝最初から完成形） ---- */
.case-stat.is-armed:not(.is-play) .case-field>i{transform:translate(calc(var(--sx) * 100cqw),calc(var(--sy) * 40cqw)) rotate(var(--sr));opacity:.5;background:var(--c0,#2B4A8C)}
.case-stat.is-armed:not(.is-play) .case-bar-fill,.case-stat.is-armed:not(.is-play) .case-bar-lit{transform:scaleX(0)}
.case-stat.is-armed:not(.is-play) .cn{opacity:0;transform:translateY(10px)}

/* ---- 出方（.is-play もインラインの1行が .is-armed と同時に付ける。最初の描画から 2.3秒で終わり、以後は静止） ----
   v9.1：読み込みから数字が出そろうまで 4.8秒かかっていた（page-case.js の defer 待ち＋フォント待ち最大 2.5秒＋200ms のあとに再生）。
     再生の合図をインラインに移して待ちをなくし、時間割も詰めた。数える起点は最初の描画。
     0〜1.06s 四角が格子へ（--k×3ms ずらし）／0.9〜1.42s 71個が明るく（--k×2ms ずらし）／1.45〜2.05s 帯が伸びる／1.8〜2.3s 左32.0%が点く
     数字：87 は 0.12s、270.7 は 0.9s（71個が明るくなるのと同時）、86.7 と「※見込みです」は 1.8s（帯が点くのと同時）
     --d0：ページ遷移の紺の面で入ってきたとき（.is-late）は、面が抜けるのを待つ分だけ全体を 500ms 遅らせる
   フォントは待たない。Manrope が遅れて届くと、出ている途中の数字の字形が一度だけ替わる（文字の幅は tabular-nums でほぼ同じ）
   will-change は付けない（87個分の層を確保しないため） */
.case-stat{--d0:0ms}
.case-stat.is-late{--d0:500ms}
.case-stat.is-play .case-field>i{transition:transform 800ms cubic-bezier(.22,1,.36,1) calc(var(--d0) + var(--k) * 3ms),opacity 500ms ease calc(var(--d0) + var(--k) * 3ms),background-color 350ms ease calc(var(--d0) + 900ms + var(--k) * 2ms)}
.case-stat.is-play .case-bar-fill{transition:transform 600ms cubic-bezier(.3,0,.2,1) calc(var(--d0) + 1450ms)}
.case-stat.is-play .case-bar-lit{transition:transform 500ms cubic-bezier(.3,0,.2,1) calc(var(--d0) + 1800ms)}
.case-stat.is-play .cn{transition:opacity 480ms ease,transform 520ms cubic-bezier(.22,1,.36,1)}
.case-stat.is-play .cn:nth-child(1){transition-delay:calc(var(--d0) + 120ms)}
.case-stat.is-play .cn:nth-child(2){transition-delay:calc(var(--d0) + 900ms)}
.case-stat.is-play .cn:nth-child(3){transition-delay:calc(var(--d0) + 1800ms)}

/* 数字の直後の相談ボタン（index-v2.html の .inline-cta と同じ作り。story.css はこのページで読まないので、同じ値をここに置く）。
   上の線は付けない：すぐ上に数字3段の下の線があり、線が2本並んでしまうため */
.space.sub .page-hero .inline-cta{margin-top:clamp(36px,4.4vw,64px)}
.space.sub .page-hero .inline-cta-lead{margin:0 0 clamp(18px,2vw,28px);font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff;text-shadow:0 0 22px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.9)}
.space.sub .page-hero .inline-cta .btn-row{margin-top:0}

/* ---------------- 2. 物語（#story）：見出し・幕・結論・変わったこと ---------------- */
.space.sub #story .h2{margin-bottom:clamp(8px,1.4vw,20px)}
/* 文字の大きさの段（v9.1）：節の見出し .h2（t2：28/56px）＞ 幕の見出し .act-t（24/44px）＞ 場面の見出し・変わったことの4行・先に結論（t3：20/30px）＞ 本文（t4）
   幕の見出しは t2 と t3 の間に置く（type.css に無い段なので、ここだけの例外）。t2 にするとページの見出し・節の見出しと同じ大きさになり、
   t3 だと場面と区別がつかないため。場面の見出しは PC と同じく、スマホでも t3 に下げる（スマホで 28px のままだと幕より大きくなる） */
.space.sub .scene h2{font-size:var(--t3);line-height:var(--lh3);letter-spacing:0;max-width:22em}   /* 行の長さは今までと同じ約660px（--t2 の 12em ≒ 672px）に保つ */

/* 幕の見出し（.scene ではないので、top.js の場面の数え方には入らない） */
.space.sub .act{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:baseline;margin-top:clamp(28px,3.4vw,56px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid rgba(201,210,234,.42)}
.space.sub .act-n{grid-row:1;font-family:var(--font-en);font-weight:800;font-size:var(--t4);line-height:1;letter-spacing:.08em;color:var(--soft)}
.space.sub .act-t{grid-column:2;margin:0;font-size:clamp(24px,3.05vw,44px);line-height:1.25;letter-spacing:-.01em;font-weight:900;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.space.sub .act-s{grid-column:2;margin:0;word-break:keep-all;overflow-wrap:anywhere;font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body)}
/* 先に結論（場面1の直後）：言いたいこと（止まる原因が3つ）を大きく、つなぎの一文を本文の大きさにする（v9.1 で大小を入れ替え） */
.space.sub .scenes>.conclusion{margin-top:clamp(8px,1vw,16px)}
.space.sub #story .conclusion b{font-size:var(--t3);line-height:var(--lh3);letter-spacing:0;font-weight:900;color:#fff;margin-bottom:4px;word-break:keep-all;overflow-wrap:anywhere}
.space.sub #story .conclusion p{font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body)}
/* 右の打ち手は場面へのリンク */
.space.sub .concl a{word-break:keep-all;overflow-wrap:anywhere;color:#fff;font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--rule);text-underline-offset:.32em;transition:color 200ms ease}
.space.sub .concl a:hover{color:var(--soft)}
/* 幕3の頭「変わったこと」。v9.1 から場面10の中の先頭に置く（読んでいる間、左の舞台は「いまの位置」）。
   番号の列は幕の見出しと同じ 40px にそろえる（共通の 3em だと --t3 の3文字分＝約90px 空く） */
.space.sub .scene>.act-rows{margin-top:0}
.space.sub .act-rows>li{grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:clamp(14px,1.4vw,20px) 0}
.space.sub .act-rows>li small{word-break:keep-all;overflow-wrap:anywhere;font-size:var(--t5);line-height:var(--lh5)}   /* <wbr> の所で折る。添え書きは数字の下の但し書きと同じ --t5 */
.space.sub .act-rows+.scene-k{margin-top:clamp(36px,4vw,56px)}

/* 舞台のラベルは日本語（入る前…いまの位置）。大きさは type.css の --t5 */
.space.sub .stage-label{font-family:var(--font-ja);font-size:var(--t5);letter-spacing:.08em}

/* 物語の詰め（PC）：場面の高さ 92vh → 中身の高さ・上下の余白 8vh → 4vh、舞台の箱の空きを減らす。
   設計は 76vh だったが、場面はほとんどが中身の高さで決まっていて（中身 400〜880px）、76vh では全高が 11,800px まで縮まない（実測 12,958px）。
   そこで次の5つで詰めた（どれも新しい仕掛けを足さず、減らすほう）：
   ・場面の見出しを --t2（56px）→ --t3（30px）（上の「文字の大きさの段」。v9.1 からスマホも同じ）
   ・物語の列を 1.05:1 → .92:1.08（文字の列を少し広げる。舞台は 5:4 のまま）
   ・#story の上下の余白 var(--sec)（173px）→ 最大120px
   ・幕3の「変わったこと」の番号の列を 3em → 40px、添え書きを --t5 に（上の .act-rows）
   ・場面の最低の高さを外す（一番短い場面でも 430px ほどあり、舞台の切り替えは1→10の順のまま） */
@media (min-width:861px){
  .space.sub #story{padding-block:clamp(96px,8.4vw,120px)}
  .space.sub .story{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .space.sub .scene{min-height:0;padding:4vh 0}
  .space.sub .stage{aspect-ratio:5/4}
  .space.sub .sv{inset:60px 28px 24px}
  /* v9.1：列の幅を変えたら、段落の最後が1〜2文字だけ次の行に落ちる所が出た（「変わりまし／た。」など）。最後の行が短くなりすぎないよう、行の割り方だけ整える */
  .space.sub .scene .body,.space.sub .scene .body p,.space.sub .scene .note,.space.sub .scene .state,.space.sub .exp,.space.sub .why-box p,.space.sub .grad-sub{text-wrap:pretty}
  /* pretty だけでは「せん。」「した。」のような2文字＋句点が残る。短い文（注記・いまの位置の一覧・#graduate の一文）は文節の切れ目でだけ折る。
     本文の段落は行末がそろわなくなるので文節折りにせず、HTML 側で最後の語だけ折らないようにした（場面4「変わりました。」、場面7「足しました。」） */
  .space.sub .scene .note,.space.sub .bdl dd,.space.sub .grad-sub{word-break:auto-phrase}
}

/* ---------------- 3. これから（#graduate）：平らな場面。見た目はサービスページの #graduate（pages-space.css の .grad-flat）のまま、ここでは何も足さない ---------------- */

/* ---------------- 4. 最後の呼びかけ：料金の1行のリンク ----------------
   v9.1：ピン留めの長さは共通の 250vh に戻した（200vh だと、ピン留めが始まった瞬間にフッターが下から重なり始め、ボタンと料金の行が全部見える間が 250〜300px しかなかった） */
.space.sub .end-inner .notes a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(201,210,234,.5);text-underline-offset:.3em}
.space.sub .end-inner .notes a:hover{color:var(--soft)}
.space.sub .end-inner .notes .note-price{word-break:keep-all;overflow-wrap:anywhere}

/* ---------------- 5. 幅ごとの組み替え ---------------- */
@media (max-width:860px){
  .case-stat{grid-template-columns:1fr;gap:20px}
  .cn .n{font-size:clamp(40px,11vw,48px)}
  .space.sub .concl a{grid-column:2}
  /* スマホの場面の余白（34px/60px → 20px/28px）と、場面の中に置いた絵の余白、#story の上下の余白（96px → 72px）を詰める */
  .space.sub #story{padding-block:72px}
  .sv-inline .space.sub .scene{padding:20px 0 28px}
  .sv-inline .space.sub .scene .sv{margin-top:16px;padding:16px 14px 12px}
  .space.sub .concl a::before{content:"→";display:inline-block;margin-right:.4em;color:var(--soft);font-weight:400}
  /* スマホの舞台の絵は、数字と流れを持つ 1・4・5・8・10 の5枚だけ残す */
  .sv-inline .space.sub .scene .sv[data-sv="2"],.sv-inline .space.sub .scene .sv[data-sv="3"],.sv-inline .space.sub .scene .sv[data-sv="6"],
  .sv-inline .space.sub .scene .sv[data-sv="7"],.sv-inline .space.sub .scene .sv[data-sv="9"]{display:none}
  /* v9.1：上に張りつく舞台の帯（進み具合の線とラベル）は不透明にする。共通の帯は下 38% が透けていて、下を流れる本文が線と重なって見えた。
     本文との境目は、帯の下に 12px のぼかしを別に付ける（帯の中は透けない） */
  html.sv-inline body.space.sub #story.sf-panel .stage-wrap{background:#0E172E}
  html.sv-inline body.space.sub #story.sf-panel .stage-wrap::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;pointer-events:none;background:linear-gradient(180deg,#0E172E,rgba(14,23,46,0))}
  /* v9.1：結論のリンク（#scene-2/3/4）で飛んだとき、場面の頭（SCENE 0X / 10 と、済・予定のバッジ）が舞台の帯に隠れないよう、帯の高さぶん余分に空ける */
  .sv-inline .space.sub .scene{scroll-margin-top:calc(var(--header-h) + 56px)}
}
/* v9.1：768〜860px では格子が全幅（1マス約47px・縦約300px）になり、数字より目立っていた。600px 以上は PC と同じ左右2列に戻す */
@media (min-width:600px) and (max-width:860px){
  .case-stat{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3.4vw,32px)}
}
/* 1列のとき（599px 以下）も、格子は幅 420px までにする（599px で1マス約34px・縦約300px になり、数字より目立つため。390px では効かない） */
@media (max-width:599px){
  .case-field{max-width:420px}
}
@media (max-width:760px){
  .space.sub .page-hero .inline-cta .btn{width:100%}
}

/* ---------------- 6. 動きを減らす設定：最初から完成形（インラインの1行も .is-armed を付けないが、二重の安全） ---------------- */
@media (prefers-reduced-motion:reduce){
  .case-stat.is-armed .case-field>i,.case-stat.is-armed .case-bar-fill,.case-stat.is-armed .case-bar-lit,.case-stat.is-armed .cn{opacity:1!important;transform:none!important;transition:none!important}
  .case-stat.is-armed .case-field>i{background:#2B4A8C!important}
  .case-stat.is-armed .case-field>i.hi{background:#6EA6FF!important}
}

/* ---------------- 最終通し検査（2026-10-11）：ページの一番下と、最後の呼びかけの注記 ----------------
   共通の作りはフッターを margin-top:-100vh で最後の呼びかけに重ねる。フッターの高さ（pages-space.css の min-height:76vh）が重なり幅より低いと、
   一番下までスクロールしたときにフッターの下へ呼びかけの地球・注記・ボタンの切れ端がはみ出す（1440×900 で約200px）。
   相談・自己診断のページと同じく、フッターを 100vh 以上にする。動きを減らす設定では共通側が重ねない（margin-top:0）ので変えない。
   注記は、スクロールの途中で地球の縁の明るい光が文字の後ろを通るので、相談ページと同じく文字の周りだけ暗くする */
@media (prefers-reduced-motion:no-preference){
  .space.sub .site-footer{min-height:100vh}
}
.space.sub #cta .notes li{text-shadow:0 0 16px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.95),0 0 2px rgb(3,6,14)}