/* ═══════════════════════════════════════════════════════════════
   AIBUILDERZ 下層ページ v8 ─ フォームと完了のページ（テーマ内では assets/css/v8-form.css）
   元: design/rebrand-20260919/site/lower/theme/assets/css/v8-form.css
   使うページ: page-document.php（資料請求）・page-meeting.php（無料診断の申し込み）・page-inquiry.php（お問い合わせ）
              page-thanks-whitepaper.php・page-thanks-contact.php（完了）
   読み込み: 各テンプレートが get_header('v8') より前に、優先度 101 で enqueue（ハンドル aibz-v8-form、依存 aibz-v8-common）

   ・組み方（フォームの3ページ）: 左にフォームの面、右に案内のカード。人物の切り抜きを案内のカードの後ろに立たせ、
     腰から下をカードで隠す（締めの CTA と同じ考え方）。1023px 以下は1列。768〜1023px は人物をリードの横に立たせ、
     767px 以下は最初の画面に入力欄を入れるため、人物をフォームの下の案内のカードの後ろに立たせる
   ・フォームの仕組みのためのクラス（.wizard__* .type-picker__btn .contact-form__*）は名前を変えずに、ここで見た目だけを付ける
   ・入力欄の見た目は common.css の .fm-in と同じ（縁は面に対して 3:1、入力例の文字は 4.7:1）
   ═══════════════════════════════════════════════════════════════ */

/* ── 頭：1024px 以上では右に人物が立ち上がるので、題とリードは左に寄せて幅を抑える ── */
@media (min-width:1024px){
  .v8 .fx-lh .lh-ja{max-width:640px}
  .v8 .fx-lh .lh-lead, .v8 .fx-lh .lh-meta{max-width:600px}
}
.v8 .fx-lh .lh-lead strong{font-weight:700; color:var(--ink)}
/* 頭を詰めて、最初の画面（1440×900・390×844）に最初の入力欄と「次へ」が入るようにする */
.v8 .fx-lh{padding-bottom:40px}
.v8 .fx-lh .lh-hd{margin-top:28px}
.v8 .fx-lh .lh-lead{margin-top:18px}

/* ═══ 2列の組み ═══ */
.v8 .fx{padding-bottom:var(--blk)}
/* 左上にフォーム、左下に補足（資料の目次など .fx-extra）、右に人物と案内のカード */
.v8 .fx-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 380px; grid-template-areas:"form side" "extra side";
  column-gap:44px; align-items:start;
}
.v8 .fx-form{grid-area:form; position:relative; z-index:1; min-width:0; --c-accent:#B42318}   /* --c-accent: 入力もれのとき、JS が入力欄の下の線をこの色にする（前の版の仕組み） */
.v8 .fx-extra{grid-area:extra; position:relative; z-index:1; min-width:0; margin-top:28px}
.v8 .fx-side{grid-area:side; position:relative; min-width:0}

/* 人物：案内のカードの後ろに立たせ、腰から下をカードで隠す。幅と縦横比はテンプレートの style で渡す（--who-w / --who-r） */
.v8 .fx-who{
  position:absolute; z-index:0; left:50%; bottom:calc(100% - var(--who-tuck, 116px));
  width:var(--who-w, 300px); margin:0 0 0 calc(var(--who-w, 300px) / -2); pointer-events:none;
}
.v8 .fx-who img{display:block; width:100%; height:auto; filter:drop-shadow(-18px 14px 24px rgba(4,10,20,.26))}

/* 面。人物を後ろに隠すので、透けない白にする */
.v8 .fx-sheet{
  max-width:none; margin:0; padding:44px 48px 48px;
  background:linear-gradient(158deg, #FFFFFF 0%, #FAFBFD 44%, #F1F3F7 100%);
}
.v8 .fx-card{
  position:relative; z-index:1; padding:34px 30px 30px; border-radius:24px;
  background:linear-gradient(158deg, #FFFFFF 0%, #FAFBFD 44%, #EFF2F6 100%);
  box-shadow:var(--e3), 0 0 0 1px var(--pale), inset 0 0 0 1px var(--faceline);
}
.v8 .fx-card-ttl{margin:0; font-size:20px; font-weight:900; line-height:1.5; letter-spacing:.03em; color:var(--ink)}

/* 1023px 以下：1列。人物 → フォーム → 案内のカード → 補足 の順（767px 以下は下で並べ替える）。人物はフォームの面の後ろに立たせる */
@media (max-width:1023px){
  .v8 .fx-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:none}
  .v8 .fx-form, .v8 .fx-extra{grid-area:auto}
  .v8 .fx-side{display:contents}
  .v8 .fx-who{order:-1; position:relative; left:auto; bottom:auto; justify-self:end; width:calc(var(--who-w, 300px) * .8); margin:0 28px -72px 0}
  .v8 .fx-form{order:0}
  .v8 .fx-card{order:1; margin-top:28px}
  .v8 .fx-extra{order:2}
  .v8 .fx-sheet{padding:40px 40px 44px}
}
/* 768〜1023px：人物をリードの横まで立ち上げ、リードは人物を避けて幅を抑える（人物の左に大きな空きを作らない） */
@media (min-width:768px) and (max-width:1023px){
  .v8 .fx-lh--who .lh-lead{max-width:calc(100% - 300px)}
  .v8 .fx-who{margin-top:-190px}
}
@media (max-width:767px){
  .v8 .fx-lh{padding-bottom:12px}
  .v8 .fx-lh .lh-hd{margin-top:12px}
  /* 最初の画面に入力欄を入れるため、人物はフォームの上ではなく、案内のカードの後ろに立たせる（フォーム → 人物とカード → 補足） */
  .v8 .fx-who{order:1; width:calc(var(--who-w, 300px) * .66); margin:32px 6px -64px 0}
  .v8 .fx-card{order:2; margin:0; padding:28px 20px 24px; border-radius:20px}
  .v8 .fx-extra{order:3; margin-top:24px}
  .v8 .fx-sheet{padding:30px 20px 34px}
  .v8 .fx-card-ttl{font-size:19px}
}

/* ── 案内のカードの中身 ── */
/* 番号つきの3項目（大きく・薄く・太い番号を左に） */
.v8 .fx-points{margin:16px 0 0; padding:0; list-style:none}
.v8 .fx-points li{position:relative; display:grid; gap:4px; padding:16px 0 16px 54px; border-top:1px solid var(--hair)}
.v8 .fx-points .n{position:absolute; left:0; top:13px; font-size:30px; font-weight:900; line-height:1; letter-spacing:.02em; color:rgba(17,17,17,.2); font-variant-numeric:tabular-nums}
.v8 .fx-points b{font-size:16px; font-weight:800; line-height:1.6; letter-spacing:.02em; color:var(--ink); word-break:auto-phrase}
.v8 .fx-points li > span:last-child{font-size:15px; font-weight:500; line-height:1.8; letter-spacing:.03em; color:var(--ink2); word-break:auto-phrase}

/* お渡しするもの（線だけで描いた報告書の印） */
.v8 .fx-give{display:flex; align-items:flex-start; gap:16px; margin-top:6px; padding:20px 20px 18px; border-radius:16px; background:var(--tint); box-shadow:inset 0 0 0 1px var(--hair)}
.v8 .fx-give-ic{flex:0 0 38px; width:38px; height:44px; fill:none; stroke:#111; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.v8 .fx-give-hd{margin:0; font-size:13px; font-weight:800; letter-spacing:.16em; line-height:1.5; color:var(--ink3)}
.v8 .fx-give-tx{margin:6px 0 0; font-size:15px; font-weight:500; line-height:1.85; letter-spacing:.03em; color:var(--ink); word-break:auto-phrase}

/* お約束 */
.v8 .fx-promise{margin:20px 0 0; padding-top:18px; border-top:1px solid var(--hair); font-size:17px; font-weight:800; line-height:1.7; letter-spacing:.02em; color:var(--ink); word-break:auto-phrase}
.v8 .fx-promise-hd{display:block; margin-bottom:4px; font-size:13px; font-weight:800; letter-spacing:.16em; color:var(--ink3)}

/* 資料の表紙と目次（資料請求） */
.v8 .fx-cover{margin:0; overflow:hidden; border-radius:12px; background:#fff; box-shadow:var(--e2), 0 0 0 1px var(--pale)}
.v8 .fx-cover img{display:block; width:100%; height:auto}
.v8 .fx-cover + .fx-card-ttl{margin-top:26px}
.v8 .fx-toc{margin:12px 0 0; padding:0; list-style:none}
.v8 .fx-toc li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 4px; padding:14px 0; border-top:1px solid var(--hair)}
.v8 .fx-toc .n{font-size:22px; font-weight:900; line-height:1.15; letter-spacing:.02em; color:rgba(17,17,17,.22); font-variant-numeric:tabular-nums}
.v8 .fx-toc .t{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; font-size:16px; font-weight:800; line-height:1.5; letter-spacing:.03em; color:var(--ink)}
.v8 .fx-toc .pg{flex:0 0 auto; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--ink3); font-variant-numeric:tabular-nums}
.v8 .fx-toc .d{margin:4px 0 0; font-size:15px; font-weight:500; line-height:1.75; letter-spacing:.02em; color:var(--ink2); word-break:auto-phrase}
.v8 .fx-contents .fx-toc{margin-top:16px}
.v8 .fx-contents .fx-toc li{grid-template-columns:52px minmax(0,1fr); padding:16px 0}
.v8 .fx-contents .fx-toc .n{font-size:28px}
.v8 .fx-contents .fx-toc .t{font-size:17px}
@media (max-width:767px){
  .v8 .fx-contents .fx-toc li{grid-template-columns:40px minmax(0,1fr)}
  .v8 .fx-contents .fx-toc .n{font-size:22px}
  .v8 .fx-contents .fx-toc .t{font-size:16px}
}
/* お受け取りについて（資料請求。表紙の下に、印つきの3行） */
.v8 .fx-checks{margin:12px 0 0; padding:0; list-style:none}
.v8 .fx-checks li{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid var(--hair); font-size:15px; font-weight:500; line-height:1.8; letter-spacing:.03em; color:var(--ink2)}
.v8 .fx-checks li:last-child{padding-bottom:2px}
.v8 .fx-checks strong{display:block; font-size:16px; font-weight:800; color:var(--ink)}

/* ほかの方法（お問い合わせ） */
.v8 .fx-alt{margin-top:14px; padding-top:18px; border-top:1px solid var(--hair)}
.v8 .fx-alt-hd{margin:0 0 2px; font-size:13px; font-weight:800; letter-spacing:.16em; line-height:1.5; color:var(--ink3)}
.v8 .fx-alt a{
  display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:60px;
  border-bottom:1px solid var(--hair); font-size:16px; font-weight:700; letter-spacing:.03em; line-height:1.5; color:var(--ink); text-decoration:none;
}
.v8 .fx-alt a:last-child{border-bottom:0}

/* ご予約にあたって（無料診断。フォームの下に添える） */
.v8 .fx-notes{margin-top:40px; padding-top:26px; border-top:1px solid var(--hair)}
.v8 .fx-notes-hd{margin:0; font-size:15px; font-weight:800; line-height:1.5; letter-spacing:.06em; color:var(--ink)}
.v8 .fx-notes ul{margin:10px 0 0; padding:0; list-style:none}
.v8 .fx-notes li{position:relative; padding-left:1.3em; font-size:15px; font-weight:500; line-height:1.95; letter-spacing:.03em; color:var(--ink2)}
.v8 .fx-notes li::before{content:""; position:absolute; left:.35em; top:.85em; width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.5}

/* ═══ 段階式のフォーム（.wizard）─ クラス名は前の版のまま、見た目だけ ═══ */
.v8 .wizard{position:relative; margin:0}
.v8 .wizard__head{display:flex; align-items:center; gap:16px; margin:0 0 28px}
.v8 .wizard__head.is-hidden{display:none}
.v8 .wizard__progress{flex:1 1 auto; height:4px; overflow:hidden; border-radius:4px; background:rgba(17,17,17,.1)}
.v8 .wizard__progress-bar{width:0; height:100%; border-radius:inherit; background:#111; transition:width .5s cubic-bezier(.2,.7,.2,1)}
.v8 .wizard__progress-meta{flex:0 0 auto; display:flex; align-items:baseline; gap:8px; line-height:1}
.v8 .wizard__progress-label{font-size:13px; font-weight:800; letter-spacing:.14em; color:var(--ink3)}
.v8 .wizard__progress-text{font-size:15px; font-weight:800; letter-spacing:.06em; color:var(--ink); font-variant-numeric:tabular-nums}

.v8 .wizard__step{display:none}
.v8 .wizard__step.is-active{display:block; animation:v8fxin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes v8fxin{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.v8 .wizard__step-num{margin:0; font-size:13px; font-weight:700; letter-spacing:.1em; line-height:1.6; color:var(--ink3)}
.v8 .wizard__question, .v8 .wizard__intro-title, .v8 .wizard__success-title{
  margin:8px 0 0; font-size:26px; font-weight:900; line-height:1.5; letter-spacing:.02em; color:var(--ink); word-break:auto-phrase;
}
.v8 .wizard__intro-title em{font-style:normal}
.v8 .wizard__question .fm-req, .v8 .wizard__question .fm-opt{display:inline-block; margin-left:12px; vertical-align:.32em}
.v8 .wizard__hint, .v8 .wizard__intro-desc, .v8 .wizard__success-desc{margin:10px 0 0; font-size:15px; font-weight:500; line-height:1.9; letter-spacing:.03em; color:var(--ink2)}
.v8 .wizard__intro-desc strong, .v8 .wizard__success-desc strong{font-weight:700; color:var(--ink)}
.v8 .wizard__hint, .v8 .wizard__intro-desc, .v8 .wizard__success-desc, .v8 .fx-toc .d, .v8 .fx-notes li{text-wrap:pretty}   /* 最後の行に「す。」だけが残らないように */

/* 入力欄（.fm-in と同じ見た目）。下の線は、入力もれのときに JS が色を入れる所 */
.v8 .wizard__input{
  display:block; width:100%; min-height:56px; margin:24px 0 0; padding:14px 18px;
  border:0; border-bottom:2px solid transparent; border-radius:14px; background:rgba(255,255,255,.96);
  box-shadow:inset 0 0 0 1px rgba(20,32,50,.5), inset 0 2px 4px rgba(14,26,44,.05);
  font-family:inherit; font-size:16px; font-weight:500; line-height:1.6; letter-spacing:.03em; color:var(--ink);
  -webkit-appearance:none; appearance:none; transition:box-shadow .2s ease, border-color .2s ease;
}
.v8 textarea.wizard__input{min-height:160px; resize:vertical}
.v8 .wizard__input::placeholder{color:rgba(36,45,58,.66)}
.v8 .wizard__input:focus{outline:none; box-shadow:inset 0 0 0 2px #111, 0 0 0 4px rgba(17,17,17,.06)}
.v8 .wizard__row--split{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:24px}
.v8 .wizard__row--split .wizard__input{margin-top:0}

/* 選ぶ項目（業種・領域・日時・お問い合わせの種別）。丸の印つきの枠。選ぶと枠が黒く太くなり、丸が満ちる */
.v8 .wizard__choices, .v8 .wizard__slots, .v8 .type-picker{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.v8 .wizard__choices, .v8 .wizard__slots{margin-top:24px}
.v8 .wizard__slots{grid-template-columns:repeat(3, minmax(0,1fr))}
.v8 .wizard__choice, .v8 .wizard__slot, .v8 .type-picker__btn{
  position:relative; display:flex; align-items:center; width:100%; min-height:56px; margin:0; padding:12px 14px 12px 46px;
  border:0; border-radius:14px; background:rgba(255,255,255,.96); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(20,32,50,.5), 0 1px 2px rgba(14,26,44,.06);
  font-family:inherit; font-size:15px; font-weight:700; line-height:1.5; letter-spacing:.03em; text-align:left; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s ease;
}
.v8 .wizard__choice::before, .v8 .wizard__slot::before, .v8 .type-picker__btn::before{
  content:""; position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 1.5px rgba(20,32,50,.55);
  transition:box-shadow .2s ease;
}
@media (hover:hover){
  .v8 .wizard__choice:hover, .v8 .wizard__slot:hover, .v8 .type-picker__btn:hover{box-shadow:inset 0 0 0 1.5px #111, 0 6px 14px -8px rgba(14,26,44,.3)}
}
.v8 .wizard__choice.is-active, .v8 .wizard__slot.is-active, .v8 .type-picker__btn.is-active{box-shadow:inset 0 0 0 2px #111, var(--e1)}
.v8 .wizard__choice.is-active::before, .v8 .wizard__slot.is-active::before, .v8 .type-picker__btn.is-active::before{box-shadow:inset 0 0 0 6px #111}
.v8 .wizard__slot{display:block; min-height:64px; padding-top:11px; padding-bottom:11px; font-variant-numeric:tabular-nums}
.v8 .wizard__slot small{display:block; font-size:14px; font-weight:500; letter-spacing:.06em; color:var(--ink2)}

/* 操作の行：左に「戻る」、右に「次へ」 */
.v8 .wizard__actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:32px}
.v8 .wizard__actions > :not(.wizard__prev):first-child, .v8 .wizard__prev + *{margin-left:auto}
.v8 .wizard__step--intro .wizard__actions > :first-child{margin-left:0}
.v8 .wizard__prev{
  position:relative; display:inline-flex; align-items:center; min-height:44px; min-width:44px; margin:0; padding:0 16px 0 32px;
  border:0; border-radius:999px; background:transparent; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--ink2);
  transition:background-color .2s ease, color .2s ease;
}
.v8 .wizard__prev::before{
  content:""; position:absolute; left:14px; top:50%; margin-top:-5px;
  border-style:solid; border-width:5px 7px 5px 0; border-color:transparent currentColor transparent transparent;
}
.v8 .wizard__skip:not(.btnx){
  display:inline-flex; align-items:center; min-height:44px; min-width:44px; margin:0; padding:0 18px;
  border:0; border-radius:999px; background:transparent; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.06em; color:var(--ink2);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
  transition:background-color .2s ease, color .2s ease;
}
@media (hover:hover){
  .v8 .wizard__prev:hover, .v8 .wizard__skip:not(.btnx):hover{color:#111; background:rgba(17,17,17,.05)}
}

/* はじめに（無料診断・資料請求の Step 0） */
.v8 .wizard__intro-list{margin:22px 0 0; padding:0; list-style:none}
.v8 .wizard__intro-list li{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px solid var(--hair); font-size:15px; font-weight:500; line-height:1.8; letter-spacing:.03em; color:var(--ink2)}
.v8 .wizard__intro-list li:last-child{border-bottom:1px solid var(--hair)}
.v8 .wizard__intro-list strong{display:block; font-size:16px; font-weight:800; color:var(--ink)}
.v8 .wizard__intro-check, .v8 .fx-done-ic{
  display:inline-grid; place-items:center; flex:0 0 26px; width:26px; height:26px; margin-top:1px; border-radius:50%;
  box-shadow:inset 0 0 0 1.5px #111;
}
.v8 .wizard__intro-check svg, .v8 .fx-done-ic svg, .v8 .wizard__success-icon svg{width:14px; height:14px; fill:none; stroke:#111; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.v8 .wizard__intro-time{margin:14px 0 0; font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--ink3)}

/* 確認 */
.v8 .wizard__summary{margin-top:22px; padding:4px 22px; border-radius:16px; background:var(--tint); box-shadow:inset 0 0 0 1px var(--hair)}
.v8 .wizard__summary-row{display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--hair); line-height:1.7}
.v8 .wizard__summary-row:last-child{border-bottom:0}
.v8 .wizard__summary-key{font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--ink3); padding-top:2px}
.v8 .wizard__summary-val{font-size:15px; font-weight:500; letter-spacing:.03em; color:var(--ink); overflow-wrap:anywhere; white-space:pre-wrap}
.v8 .wizard__summary-val--empty{color:var(--ink3)}
/* 同意（行全体を押せる。高さ 44px 以上） */
.v8 .wizard__check{display:flex; align-items:center; gap:12px; min-height:44px; margin-top:20px; font-size:15px; font-weight:500; line-height:1.6; letter-spacing:.03em; color:var(--ink); cursor:pointer}
.v8 .wizard__check label{cursor:pointer}
.v8 .wizard__check input{
  display:grid; place-content:center; flex:0 0 22px; width:22px; height:22px; margin:0;
  border:0; border-radius:6px; background:#fff; cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(20,32,50,.5);
  -webkit-appearance:none; appearance:none; transition:background-color .2s ease, box-shadow .2s ease;
}
.v8 .wizard__check input::before{
  content:""; width:12px; height:12px; background:#fff; transform:scale(0); transition:transform .18s ease;
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.v8 .wizard__check input:checked{background:#111; box-shadow:none}
.v8 .wizard__check input:checked::before{transform:scale(1)}
.v8 .wizard__check input:focus-visible{outline:2px solid #111; outline-offset:3px}
.v8 .wizard__check a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:.22em}

/* 完了（送信後はふつう完了ページへ移るので、ここが出るのは移動先が返らなかったときだけ） */
.v8 .wizard__success, .v8 .wizard__step--success{padding:8px 0; text-align:center}
.v8 .wizard__success-icon{display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #111}
.v8 .wizard__success-icon svg{width:24px; height:24px}
.v8 .wizard__success .wizard__actions, .v8 .wizard__step--success .wizard__actions{justify-content:center}
.v8 .wizard__success .wizard__actions > :first-child, .v8 .wizard__step--success .wizard__actions > :first-child{margin-left:0}

@media (max-width:1023px){
  .v8 .wizard__question, .v8 .wizard__intro-title, .v8 .wizard__success-title{font-size:24px}
}
@media (max-width:767px){
  .v8 .wizard__head{margin-bottom:22px}
  .v8 .wizard__question, .v8 .wizard__intro-title, .v8 .wizard__success-title{font-size:21px; line-height:1.55}
  .v8 .wizard__input{margin-top:20px}
  .v8 .wizard__row--split{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:20px}
  .v8 .wizard__choices, .v8 .wizard__slots{margin-top:20px; gap:8px}
  .v8 .wizard__slots{grid-template-columns:repeat(2, minmax(0,1fr))}
  .v8 .wizard__choice, .v8 .wizard__slot, .v8 .type-picker__btn{padding-left:40px; padding-right:10px; letter-spacing:.01em}
  .v8 .type-picker{grid-template-columns:minmax(0,1fr); gap:8px}   /* 「サービスについて」「パートナーシップ」が2行に割れないよう、1列にする */
  .v8 .wizard__choice::before, .v8 .wizard__slot::before, .v8 .type-picker__btn::before{left:13px}
  .v8 .wizard__actions{margin-top:26px}
  .v8 .wizard__summary{padding:2px 16px}
  .v8 .wizard__summary-row{grid-template-columns:minmax(0,1fr); gap:2px}
  .v8 .wizard__actions .wizard__submit, .v8 .wizard__intro-btn{width:100%}
  .v8 .wizard__prev + .wizard__submit{width:auto; flex:1 1 auto; padding-left:20px; padding-right:60px; font-size:15px}
}

/* お問い合わせ：フォームの行の間隔と、送信ボタン */
.v8 .fx-sheet .fm .fm-submit{margin-top:8px}
.v8 .fx-sheet .contact-form__check{margin-top:-4px}

/* ═══ 完了のページ ═══ */
.v8 .fx-done{display:flex; align-items:center; gap:12px}
.v8 .fx-done-ic{flex-basis:30px; width:30px; height:30px; margin-top:0}
.v8 .fx-done-ic svg{width:15px; height:15px}
/* 次の一歩（締めの CTA と同じ部品 .endcta-* を、ページの中で使う） */
.v8 .fx-next{padding-top:132px; padding-bottom:40px}
@media (min-width:1024px){ .v8 .fx-next .endcta-in{--pw:400px} }
@media (min-width:1180px){ .v8 .fx-next .endcta-in{--pw:440px} .v8 .fx-next .endcta-card{padding-top:40px; padding-bottom:40px} }
/* 横に広い人物（完了・お問い合わせの fx-smile-m）は、同じ幅だと頭がカードから立ち上がらないので、少し大きく出す */
@media (min-width:1024px){ .v8 .fx-next--wide .endcta-in{--pw:440px} }
@media (min-width:1180px){ .v8 .fx-next--wide .endcta-in{--pw:480px} }
.v8 .fx-next .endcta-who{aspect-ratio:var(--who-ar, 760/890)}
/* ボタンの文字は <wbr> の所でだけ折り返す（幅 320 で「予約／する」と割れないように） */
.v8 .fx-next .btnx{word-break:keep-all}
.v8 .fx-next-note{margin:14px 0 0; font-size:13px; font-weight:700; line-height:1.6; letter-spacing:.06em; color:var(--ink3); word-break:keep-all}   /* 「／」の後ろの <wbr> でだけ折り返す */
@media (max-width:1023px){ .v8 .fx-next{padding-top:24px} }
/* ほかの行き先。地の上に、細い罫で区切った行を並べる（メニューの行と同じ作り） */
.v8 .fx-more{padding-top:48px}
.v8 .fx-more-hd{margin:0; font-size:15px; font-weight:800; line-height:1.5; letter-spacing:.12em; color:var(--ink3)}
.v8 .fx-links{margin-top:14px; border-top:1px solid var(--hair)}
.v8 .fx-links a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"en go" "ja go"; align-items:center; gap:2px 16px;
  min-height:88px; padding:16px 2px; border-bottom:1px solid var(--hair); color:var(--ink); text-decoration:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.v8 .fx-links .en{grid-area:en; font-size:13px; font-weight:700; line-height:1.4; letter-spacing:.1em; color:var(--ink3)}
.v8 .fx-links .ja{grid-area:ja; font-size:20px; font-weight:800; line-height:1.5; letter-spacing:.03em}
.v8 .fx-links .go{grid-area:go}
@media (hover:hover){ .v8 .fx-links a:hover{transform:translateX(6px)} }
@media (max-width:767px){
  .v8 .fx-links a{min-height:76px}
  .v8 .fx-links .ja{font-size:17px}
}

/* ═══ 動き ═══ */
@media (prefers-reduced-motion: no-preference){
  /* 人物は、締めの CTA と同じく、少し深い所からゆっくり立ち上がる */
  .js .v8 .fx-who.rv{transform:translateY(40px); transition-duration:.86s}
  .js .v8 .fx-who.rv.in{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .v8 .wizard__step.is-active{animation:none}
  .v8 .wizard__progress-bar, .v8 .fx-links a{transition:none}
}

/* ═══ 完了（お問い合わせ）の出し分け ─ 無料診断の申し込みから来たときは <html> に from-meeting が付く（page-thanks-contact.php） ═══ */
html:not(.from-meeting) .v8 [data-from="meeting"], .from-meeting .v8 [data-from="contact"]{display:none !important}