/* ============================================================
   MUKIAI v2 商談までの導線（2026-10-09）。pages-space.css のあとに読む。<body class="space sub"> だけに効く。
   使うページ：consult-v2.html（無料相談）／check-v2.html（自己診断）／service-v2.html（MUKIAI伴走支援とは・6ヶ月・比較表）／case-v2.html（次に読むの2本目）
              index-v2.html も読む（v4 2026-10-09：MUKI の部品 .muki をトップと共通にしたため。.space.sub の付いた規則はトップでは効かない）
   規律は pages-space.css と同じ：面と箱は作らず、区切りの線1本（--rule）と番号と余白で組む。
   文字の大きさは type.css の段（--t1〜--t5）だけを使う。例外は MUKI の頭文字（料金の数字と同じ扱い）。
   ============================================================ */

/* ---------------- 共通：番号つきの行（心配・伺うこと・持ち帰るもの） ---------------- */
.space.sub .rows{margin-top:clamp(28px,3.4vw,44px);display:grid;border-bottom:1px solid var(--rule);counter-reset:rw;max-width:56em}
.space.sub .rows>li{display:grid;grid-template-columns:3em minmax(0,1fr);column-gap:clamp(12px,1.6vw,20px);row-gap:4px;align-items:baseline;padding:clamp(16px,1.8vw,24px) 0;border-top:1px solid var(--rule);counter-increment:rw;
  font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff}
.space.sub .rows>li::before{content:counter(rw,decimal-leading-zero);font-family:var(--font-en);font-weight:800;font-size:var(--t5);letter-spacing:.12em;color:var(--soft)}
.space.sub .rows>li>span{min-width:0;word-break:keep-all;overflow-wrap:anywhere}   /* <wbr> の所で改行する */
.space.sub .rows>li small{grid-column:2;display:block;word-break:normal;font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body);letter-spacing:.02em}
.space.sub .sec-note{margin-top:18px;max-width:var(--measure);font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body)}
.space.sub .why-key.why-key--after{margin-top:clamp(24px,3vw,36px);font-size:var(--t3);line-height:var(--lh3)}
.space.sub .two-col{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);column-gap:clamp(24px,4vw,64px);align-items:start}
.space.sub .two-col .rows{margin-top:0}
.space.sub .two-col .h2{max-width:11em}

/* ---------------- 無料相談：予約枠 ---------------- */
.space.sub #book{scroll-margin-top:calc(var(--header-h) + 12px)}
.space.sub .book{margin-top:clamp(28px,3.4vw,44px)}
.space.sub .book-frame{display:block;width:100%;height:min(760px,92vh);min-height:620px;border:0;border-radius:var(--r);background:#fff}
.space.sub .book-wait{padding:clamp(22px,2.6vw,34px) 0 clamp(22px,2.6vw,34px) clamp(16px,1.8vw,24px);border-left:2px solid #8DB8FF;max-width:44em}
.space.sub .book-wait-h{font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff}
.space.sub .book-wait p:not(.book-wait-h){margin-top:10px;font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body)}
.space.sub .book-wait .btn-row{margin-top:22px}
.space.sub .book-alt{display:none;margin-top:16px;font-size:var(--t5);line-height:var(--lh5);color:var(--note)}
.space.sub .book-alt a{color:var(--soft)}
.space.sub .book.is-ready .book-wait{display:none}
.space.sub .book.is-ready .book-alt{display:block}
.space.sub .book-meta{margin-top:0}

/* ---------------- MUKI の頭文字（v5 2026-10-10 代表の修正を反映。トップ 05 #what とサービス 01 #about で共通の部品。.space.sub で囲わず .muki で始める） ----------------
   形：
     上の4行（.muki-list）＝会社に残る4つ。左に大きな頭文字（M U K I）、右へ単語の残り（頭文字の半分。頭文字と同じ線にそろえる）、その右に説明（大きめ・太め・白）。
       PC：説明の書き出しを1列にそろえる（一番長い mplementation の後ろ）。単語の終わりから説明までは細い線（.muki-ln）でつなぐ。
           列をそろえるのに subgrid を使う（使えないブラウザは下の @supports で幅を決め打ち）
       700px 以下：説明は単語の下に、残りの文字と同じ位置から（20px 前後）。線は出さない
     下の2行（.muki-ai）＝ A と I。英単語は付けない。頭文字の右、2行分の高さの真ん中に大きく「＝ 向き合い」（#3B82F6 → #06B6D4）、その下に小さく1行。
       頭文字を縦に読むと MUKIAI ＝ むきあい ＝ 社名、で締める（トップのヒーロー「向き合って、共に進む。」につながる）。上の4行との間は少し空けて細い線
     頭文字は同じ幅の列（--mk-col）の真ん中に置く。頭文字の色は M の #3B82F6 から一番下の I の #06B6D4 まで（＋AI と同じ2色）を6等分し、
       字ごとに上端と下端の色を nth-child の規則に書いてある（OKLab で等分）。2色を変えるときは、この6つ（7色）と「＝ 向き合い」を一緒に書き換える
   動き（story.js）：[data-muki] に .is-armed（出る前の形）→ 画面に入ったら .is-play。
     1 縦：頭文字 M U K I A I が上から順に、少し上から落ちて出る（白だが少し控えめ）
     2 横：上の4行で、残りの文字が左から1文字ずつ少し右から滑り込む → 線が左から右へ伸びて説明に届く → 説明が出る（説明は最後まで白）。A と I の上の線も左から引く
     3 色：頭文字の列に、上から下へ光が1本走って色がつく（光の帯が通るとき字がふっと光る）。光が通った行から残りの文字が暗く（.45）
     4 最後の I に色がつき切ったら（.is-end）、6字がそろって一度光る（MUKIAI と読める）→「＝ 向き合い」が左から書き出される → 小さい1行が出る。
       この段は A I の行が画面に入っているときだけ始める（下が画面の外なら、入ってくるまで待つ。見逃さないように）
     遅れの時間（--dv --dh --dl --ld --dd --dc --cd --dm --ds は .is-play から、--du --de --dn は .is-end から）は story.js が動かす直前に入れる。全体で約3.2秒。一度だけ
   動きを減らす設定・story.js が無いときは .is-armed が付かないので、最初から完成形（色つき）で見える。
   高さ：出る前から全部の文字が場所を取っている（透明にしてずらしているだけ）ので、レイアウトはずれない。
   色や線の変数が無いページでも崩れないよう、既定値を持たせてある */
.muki{
  --mk-L:clamp(56px,7vw,112px);         /* 頭文字の大きさ */
  --mk-R:calc(var(--mk-L) * .5);        /* 単語の残り（頭文字の半分） */
  --mk-lh:.92;                          /* 頭文字の行の高さ（詰める） */
  --mk-col:.9;                          /* 頭文字の列の幅（頭文字の大きさの何倍か。一番広い M が .86） */
  --mk-gap:.1;                          /* 頭文字の列と残りの文字のすき間（同じく倍率） */
  --mk-pre:#DDE3F3;                     /* 色がつく前の頭文字（白だが少し控えめ） */
  --mk-hi:#F2FCFF;                      /* 列を走る光 */
  --mk-line:rgba(201,210,234,.36);      /* 単語と説明をつなぐ線 */
  margin:clamp(40px,5vw,80px) 0 0
}
.muki-list{display:grid;grid-template-columns:calc(var(--mk-col) * var(--mk-L)) max-content minmax(0,1fr);margin:0;padding:0;list-style:none}
.muki-row{position:relative;grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:baseline}
.muki-lw{display:block;font-size:var(--mk-L);line-height:var(--mk-lh);text-align:center}
.muki-row>.muki-lw{grid-column:1}
.muki-lg{display:inline-block}
.muki-l{display:inline-block;font-family:var(--font-en,"Manrope",sans-serif);font-weight:800;font-style:normal;font-size:1em;line-height:inherit;letter-spacing:0;
  color:var(--mk-a,#3B82F6);
  /* 2枚重ね：上＝白い幕（上が透明・真ん中に光の帯・下が白）、下＝この字の色（列全体で M の青から I の青緑へ続くよう、字ごとに区間を分けてある）。
     幕を下へずらすと、光の帯が字の上から下へ抜けて色が見える。完成形は幕が抜け切った位置（0 0） */
  background-image:linear-gradient(180deg,rgba(242,252,255,0) 0,rgba(242,252,255,0) 40%,var(--mk-hi) 50%,var(--mk-pre) 60%,var(--mk-pre) 100%),linear-gradient(180deg,var(--mk-a,#3B82F6),var(--mk-b,#06B6D4));
  background-size:100% 250%,100% 100%;background-repeat:no-repeat;background-position:0 0,0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.muki-rw{grid-column:2;display:flex;align-items:baseline;min-width:0;margin-left:calc(var(--mk-gap) * var(--mk-L));font-family:var(--font-en,"Manrope",sans-serif);font-weight:800;font-size:var(--mk-R);line-height:1;letter-spacing:0;white-space:nowrap}
.muki-r{display:inline-block;color:#fff;opacity:.45}
.muki-r i{display:inline-block;font-style:normal}
/* つなぐ線：残りの文字の小文字の真ん中くらいの高さ（説明の日本語の真ん中ともそろう）。一番長い行でも短く1本出る（min-width） */
.muki-ln{flex:1 0 auto;min-width:.9em;height:1px;margin:0 .45em 0 .3em;position:relative;top:-.27em;background:var(--mk-line);transform-origin:0 50%}
.muki-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muki-d{grid-column:3;min-width:0;font-size:clamp(18px,1.9vw,30px);line-height:1.45;font-weight:700;color:#fff;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
/* 下の2行（A I）：上の4行との間を少し空けて細い線。右に「＝ 向き合い」と1行 */
.muki-ai{position:relative;display:grid;grid-template-columns:calc(var(--mk-col) * var(--mk-L)) minmax(0,1fr);align-items:center;margin:calc(var(--mk-L) * .2) 0 0;padding-top:calc(var(--mk-L) * .14)}
.muki-ai::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule,rgba(201,210,234,.24));transform-origin:0 50%}
.muki-ai-ls{grid-column:1;display:block}
.muki-ai-t{grid-column:2;min-width:0;margin-left:calc(var(--mk-gap) * var(--mk-L))}
.muki-eq{display:block;width:max-content;max-width:100%}   /* 書き出しの窓（mask）。字の長さに合わせる */
.muki-eq-t{display:inline-block;font-family:var(--font-ja,"Noto Sans JP",sans-serif);font-weight:900;font-size:clamp(28px,3.4vw,52px);line-height:1.2;letter-spacing:.04em;white-space:nowrap;
  color:#3B82F6;background:linear-gradient(100deg,#3B82F6 0%,#FFFFFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.muki-note{display:block;margin-top:.5em;font-size:var(--t4,17px);line-height:1.6;font-weight:var(--fw-body,500);color:var(--body,#DDE3F3);word-break:keep-all;overflow-wrap:anywhere}
/* 頭文字の色の区間（#3B82F6 → #06B6D4 を6等分）：M U K I / A I */
.muki-row:nth-child(1) .muki-l{--mk-a:#3B82F6;--mk-b:#5C97F8}
.muki-row:nth-child(2) .muki-l{--mk-a:#5C97F8;--mk-b:#7CACF9}
.muki-row:nth-child(3) .muki-l{--mk-a:#7CACF9;--mk-b:#9DC1FA}
.muki-row:nth-child(4) .muki-l{--mk-a:#9DC1FA;--mk-b:#BED5FC}
.muki-ai-ls .muki-lw:first-child .muki-l{--mk-a:#BED5FC;--mk-b:#DEEAFD}
.muki-ai-ls .muki-lw+.muki-lw .muki-l{--mk-a:#DEEAFD;--mk-b:#FFFFFF}
/* 出る前の形（story.js が .is-armed を付けたときだけ） */
.muki.is-armed .muki-lw{opacity:0;transform:translateY(-.28em)}
.muki.is-armed .muki-l{background-position:0 100%,0 0}
.muki.is-armed .muki-r{opacity:1}
.muki.is-armed .muki-r i{opacity:0;transform:translateX(.45em)}
.muki.is-armed .muki-ln{transform:scaleX(0)}
.muki.is-armed .muki-d{opacity:0;transform:translateX(-10px)}
.muki.is-armed .muki-ai::before{transform:scaleX(0)}
/* 「＝ 向き合い」の書き出し：左が不透明・右が透明の帯（境目は字の幅の 1/4 でぼかす）を右から左へずらすと、字が左から現れる */
.muki.is-armed .muki-eq{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 44.4%,transparent 55.6%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 44.4%,transparent 55.6%,transparent 100%);
  -webkit-mask-size:225% 100%;mask-size:225% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.muki.is-armed .muki-note{opacity:0;transform:translateY(6px)}
/* 出方（.is-play）。頭文字の落ちる動きと光（filter）は外側の .muki-lw / .muki-lg に、色の幕（background-clip:text）は内側の .muki-l に分けてある
   （文字で切り抜いた背景に transform や filter を重ねると崩れるブラウザ（Safari の古い版など）があるため） */
.muki.is-play .muki-lw{opacity:1;transform:none;
  transition:opacity 480ms cubic-bezier(.22,1,.36,1) var(--dv,0ms),transform 600ms cubic-bezier(.22,1,.36,1) var(--dv,0ms);
  animation:muki-glow 520ms cubic-bezier(.3,0,.3,1) var(--dc,0ms)}   /* 光が通るとき、字がふっと光って消える。始めと終わりは光なしなので fill は付けない */
.muki.is-end .muki-lg{animation:muki-glow-all 760ms cubic-bezier(.3,0,.3,1) var(--du,0ms)}   /* 最後の I まで色がついたら（.is-end）、6字がそろって一度光る */
.muki.is-play .muki-l{background-position:0 0,0 0;transition:background-position var(--cd,135ms) linear var(--dc,0ms)}
.muki.is-play .muki-r{opacity:.45;transition:opacity 600ms ease var(--dm,0ms)}
.muki.is-play .muki-r i{opacity:1;transform:none;transition:opacity 280ms ease-out var(--dh,0ms),transform 340ms cubic-bezier(.22,1,.36,1) var(--dh,0ms)}
.muki.is-play .muki-ln{transform:none;transition:transform var(--ld,300ms) cubic-bezier(.3,0,.2,1) var(--dl,0ms)}
.muki.is-play .muki-d{opacity:1;transform:none;transition:opacity 480ms cubic-bezier(.22,1,.36,1) var(--dd,0ms),transform 520ms cubic-bezier(.22,1,.36,1) var(--dd,0ms)}
.muki.is-play .muki-ai::before{transform:none;transition:transform 900ms cubic-bezier(.22,1,.36,1) var(--ds,0ms)}
.muki.is-end .muki-eq{-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position 620ms cubic-bezier(.45,0,.25,1) var(--de,0ms),mask-position 620ms cubic-bezier(.45,0,.25,1) var(--de,0ms)}
.muki.is-end .muki-note{opacity:1;transform:none;transition:opacity 560ms cubic-bezier(.22,1,.36,1) var(--dn,0ms),transform 560ms cubic-bezier(.22,1,.36,1) var(--dn,0ms)}
@keyframes muki-glow{0%{filter:drop-shadow(0 0 0 rgba(56,189,248,0))}35%{filter:drop-shadow(0 0 .16em rgba(56,189,248,.75))}100%{filter:drop-shadow(0 0 0 rgba(56,189,248,0))}}
@keyframes muki-glow-all{0%{filter:drop-shadow(0 0 0 rgba(56,189,248,0))}40%{filter:drop-shadow(0 0 .2em rgba(56,189,248,.65))}100%{filter:drop-shadow(0 0 0 rgba(56,189,248,0))}}
@media (prefers-reduced-motion:reduce){
  .muki.is-armed .muki-lw,.muki.is-armed .muki-lg,.muki.is-armed .muki-r i,.muki.is-armed .muki-ln,.muki.is-armed .muki-d,.muki.is-armed .muki-ai::before,.muki.is-armed .muki-note{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .muki.is-armed .muki-l{background-position:0 0,0 0!important;transition:none!important}
  .muki.is-armed .muki-r{opacity:.45!important;transition:none!important}
  .muki.is-armed .muki-eq{-webkit-mask-image:none!important;mask-image:none!important}
}
/* subgrid が使えないブラウザ：説明の列の位置を決め打ち（mplementation は Manrope 800 で残りの文字の大きさの 7.6 倍。線と余白を足して 9.3 倍） */
@supports not (grid-template-columns:subgrid){
  .muki-row{grid-template-columns:calc(var(--mk-col) * var(--mk-L)) calc(var(--mk-gap) * var(--mk-L) + 9.3 * var(--mk-R)) minmax(0,1fr)}
}
@media (max-width:700px){
  /* スマホ：説明は単語の下に、残りの文字と同じ位置から（頭文字の列にはかからない）。つなぐ線は出さない */
  .muki-list{grid-template-columns:calc(var(--mk-col) * var(--mk-L)) minmax(0,1fr)}
  .muki-row{row-gap:2px}
  .muki-ln{display:none}
  .muki-d{grid-column:2;margin:0 0 clamp(10px,2.6vw,14px) calc(var(--mk-gap) * var(--mk-L));font-size:clamp(18px,5.2vw,21px);line-height:1.5}
}
@supports not (grid-template-columns:subgrid){
  @media (max-width:700px){ .muki-row{grid-template-columns:calc(var(--mk-col) * var(--mk-L)) minmax(0,1fr)} }
}

.space.sub .about-sub{margin-top:clamp(64px,7vw,110px)}
.space.sub .about-sub+p{margin-top:12px}
.space.sub .pillars--svc{margin-top:clamp(28px,3.4vw,44px)}
.space.sub .pillar .blist{margin-top:12px;gap:6px}
.space.sub .pillar .blist li{font-size:var(--t4);line-height:1.7;font-weight:var(--fw-body);color:var(--body)}

/* ---------------- サービス：6ヶ月で形にする ---------------- */
.space.sub .road6{margin-top:clamp(28px,3.4vw,44px);display:grid;border-bottom:1px solid var(--rule)}
.space.sub .road6>li{display:grid;grid-template-columns:clamp(150px,15vw,220px) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);padding:clamp(18px,2.2vw,30px) 0;border-top:1px solid var(--rule)}
.space.sub .road6 .road6-m{font-size:var(--t3);line-height:var(--lh3);font-weight:900;color:#fff}
.space.sub .road6-m .badge{display:inline-block;margin-top:8px;font-size:var(--t5);line-height:1.4;vertical-align:middle}
.space.sub .road6 p:not(.road6-m){max-width:var(--measure);font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body)}
.space.sub .road6 p.road6-key:not(.road6-m){margin-top:4px;color:#fff;font-weight:700}
.space.sub .road6>li.is-key .road6-m{color:var(--soft)}

/* 7つの工程は折りたたむ（中身は以前のまま） */
.space.sub .fold{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.space.sub .fold>summary{list-style:none;cursor:pointer;position:relative;padding:clamp(18px,2vw,26px) 52px clamp(18px,2vw,26px) 0;font-size:var(--t3);line-height:var(--lh3);font-weight:700;color:#fff}
.space.sub .fold>summary::-webkit-details-marker{display:none}
.space.sub .fold>summary::after{content:"";position:absolute;right:10px;top:50%;width:13px;height:13px;margin-top:-10px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg);transition:transform 300ms var(--ease-reveal),margin-top 300ms var(--ease-reveal)}
.space.sub .fold[open]>summary::after{transform:rotate(225deg);margin-top:-3px}
.space.sub .fold>summary small{display:block;margin-top:4px;font-size:var(--t5);line-height:var(--lh5);font-weight:500;color:var(--note);letter-spacing:.02em}
.space.sub .fold>summary:hover{color:var(--soft)}
.space.sub .fold>summary:focus-visible{outline:2px solid var(--soft);outline-offset:4px}
.space.sub .fold-body{padding-bottom:clamp(28px,3.4vw,44px)}
.space.sub .road6+.fold{margin-top:0;border-top:0}   /* 6ヶ月の3行のすぐ下に、4行目のように続ける */
.space.sub .fold-body .prog{margin-top:clamp(12px,1.6vw,20px)}

/* ---------------- サービス：ほかのやり方との比較 ---------------- */
.space.sub .cmp-wrap{margin-top:clamp(28px,3.4vw,44px)}
.space.sub .cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.space.sub .cmp col.cmp-c1{width:22%}
.space.sub .cmp th,.space.sub .cmp td{padding:clamp(14px,1.6vw,22px) clamp(12px,1.6vw,24px) clamp(14px,1.6vw,22px) 0;border-top:1px solid var(--rule);text-align:left;vertical-align:top;
  font-size:var(--t4);line-height:1.7;font-weight:var(--fw-body);color:var(--body);letter-spacing:.02em}
.space.sub .cmp thead th{border-top:0;padding-bottom:12px;font-size:var(--t5);line-height:var(--lh5);font-weight:800;letter-spacing:.12em;color:var(--soft)}
.space.sub .cmp tbody th{font-weight:900;color:#fff}
.space.sub .cmp td b{display:block;font-weight:700;color:#fff}
.space.sub .cmp tbody tr:last-child>*{border-bottom:1px solid var(--rule)}
.space.sub .cmp tr.cmp-us>*{border-top:2px solid #8DB8FF;border-bottom:2px solid #8DB8FF;color:#fff;font-weight:700}
.space.sub .cmp tr.cmp-us th{color:var(--soft)}
.space.sub .cmp-foot{margin-top:14px;font-size:var(--t5);line-height:var(--lh5);color:var(--note)}

/* ---------------- 事例：次に読むの2本目 ---------------- */
.space.sub .scrollnav-sub{margin-top:14px}

/* ---------------- 自己診断 ---------------- */
.space.sub .qz{margin-top:clamp(28px,3.4vw,44px)}
.space.sub .qz-g+.qz-g{margin-top:clamp(40px,5vw,64px)}
.space.sub .qz-gh{display:block;font-size:var(--t5);line-height:var(--lh5);font-weight:800;letter-spacing:.12em;color:var(--soft)}
.space.sub .qz-list{margin-top:10px;border-bottom:1px solid var(--rule)}
.space.sub .qz-q{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,3vw,48px);row-gap:12px;align-items:center;padding:clamp(16px,1.8vw,24px) 0;border-top:1px solid var(--rule);min-width:0}
.space.sub .qz-q .qz-t{min-width:0;font-size:var(--t4);line-height:var(--lh4);font-weight:700;color:#fff}
.space.sub .qz-opts{display:flex;gap:8px}
.space.sub .qz-opt{position:relative;display:inline-flex}
.space.sub .qz-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.space.sub .qz-opt span{display:inline-flex;align-items:center;justify-content:center;min-width:5.6em;min-height:48px;padding:8px 18px;border-radius:999px;font-size:16px;font-weight:700;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);background:rgba(3,6,14,.4);transition:background 200ms,color 200ms,box-shadow 200ms}
.space.sub .qz-opt input:hover+span{box-shadow:inset 0 0 0 1.5px #fff}
.space.sub .qz-opt input:focus-visible+span{outline:2px solid var(--soft);outline-offset:3px}
.space.sub .qz-opt input:checked+span{background:#F5F7FC;color:var(--navy);box-shadow:none}
.space.sub .qz-q.is-miss .qz-opt span{box-shadow:inset 0 0 0 1.5px #FFB4A8}
.space.sub .qz-foot{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.space.sub .qz-count{font-size:var(--t5);line-height:var(--lh5);color:var(--note)}
.space.sub .qz-count b{color:#fff;font-weight:700}
.space.sub .qz-msg{flex-basis:100%;font-size:var(--t5);line-height:var(--lh5);color:#FFD2CA;min-height:1.7em}
.space.sub .qz-res[hidden]{display:none}
.space.sub .qz-res .h2{max-width:20em}
.space.sub .qz-res .h2 em{font-style:normal;color:var(--soft)}
.space.sub .meter{margin-top:clamp(28px,3.4vw,44px);display:grid;border-bottom:1px solid var(--rule)}
.space.sub .meter li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center;padding:clamp(14px,1.6vw,20px) 0;border-top:1px solid var(--rule);font-size:var(--t4);line-height:var(--lh4);font-weight:700;color:var(--body)}
.space.sub .meter li.is-top{color:#fff}
.space.sub .meter-n{display:flex;align-items:center;gap:12px;font-size:var(--t5);font-weight:700;color:var(--note);white-space:nowrap}
.space.sub .meter-dots{display:inline-flex;gap:6px}
.space.sub .meter-dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(201,210,234,.55)}
.space.sub .meter-dots i.on{background:#8DB8FF;box-shadow:none}
.space.sub .meter li.is-top .meter-n{color:#fff}
.space.sub .res-detail{margin-top:clamp(28px,3.4vw,44px);display:grid;gap:clamp(24px,3vw,36px)}
.space.sub .res-item{padding-left:clamp(16px,1.8vw,24px);border-left:2px solid #8DB8FF;max-width:44em}
.space.sub .res-item h3{font-size:var(--t3);line-height:var(--lh3);font-weight:900;color:#fff}
.space.sub .res-item p{margin-top:10px;font-size:var(--t4);line-height:var(--lh4);font-weight:var(--fw-body);color:var(--body)}
.space.sub .res-item p.res-do{color:#fff;font-weight:700}
.space.sub .res-cta{margin-top:clamp(36px,4.4vw,56px)}
.space.sub .res-again{margin-top:22px;background:none;border:0;padding:6px 0;color:var(--soft);font:inherit;font-size:var(--t5);font-weight:700;cursor:pointer;border-bottom:1.5px solid rgba(141,184,255,.6)}

/* ---------------- 幅ごとの組み替え ---------------- */
@media (max-width:860px){
  .space.sub .two-col{grid-template-columns:1fr}
  .space.sub .two-col .rows{margin-top:clamp(28px,3.4vw,44px)}
  .space.sub .road6>li{grid-template-columns:1fr;row-gap:6px}
  .space.sub .road6-m .badge{margin:0 0 0 10px}
  .space.sub .book-frame{min-height:640px;height:80vh}
  .space.sub .qz-q{grid-template-columns:1fr}
  .space.sub .qz-opts{width:100%}
  .space.sub .qz-opt{flex:1}
  .space.sub .qz-opt span{width:100%}
  /* 比較表：スマホでは1つのやり方を1かたまりにする */
  .space.sub .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .space.sub .cmp,.space.sub .cmp tbody,.space.sub .cmp tr,.space.sub .cmp th,.space.sub .cmp td{display:block;width:100%}
  .space.sub .cmp tr{padding:18px 0;border-top:1px solid var(--rule)}
  .space.sub .cmp tbody tr:last-child{border-bottom:1px solid var(--rule)}
  .space.sub .cmp tbody tr:last-child>*,.space.sub .cmp tr.cmp-us>*{border:0}
  .space.sub .cmp th,.space.sub .cmp td{border:0;padding:0}
  .space.sub .cmp tbody th{font-size:var(--t3);line-height:var(--lh3);margin-bottom:6px}
  .space.sub .cmp td{display:grid;grid-template-columns:7em minmax(0,1fr);column-gap:12px;padding:6px 0}
  .space.sub .cmp td::before{content:attr(data-label);font-size:var(--t5);line-height:1.9;font-weight:800;letter-spacing:.04em;color:var(--soft)}
  .space.sub .cmp tr.cmp-us{border-top:2px solid #8DB8FF;border-bottom:2px solid #8DB8FF}
}


/* 会社概要：社名の由来の下のリンク */
.space.sub .lead+.arrow-link{margin-top:14px}

/* 日本語の改行：最後の行に1〜2字だけ残る切れ方を減らす（Chrome／Edge 117 以降。効かないブラウザでは今までどおり） */
.space.sub .book-wait p,.space.sub .res-item p,.space.sub .sec-note{text-wrap:pretty}
/* 2〜3行の短い文は行の長さをそろえる（「ます。」だけが次の行に落ちるのを防ぐ） */
.space.sub .rows>li,.space.sub .road6 p,.space.sub .cmp th,.space.sub .cmp td,.space.sub .qz-t{text-wrap:balance}
/* <wbr> で文節を区切った所だけで改行する（事例の結論、自己診断の結果） */
.space.sub .concl span,.space.sub .qz-res .h2,.space.sub .meter-k,.space.sub .res-item h3{word-break:keep-all;overflow-wrap:anywhere}