/* 土台D（デジタル庁デザインシステム）。2026-10-31 本人が選んだ案 B（判定型）を全ページへ広げた。
   値はデジタル庁の公式トークン（MIT）から。書体は Noto Sans JP（base.html で読み込む）。本文は本人規範で 17px。 */
:root {
  --primary: #0017c1; --primary-hover: #00118f; --primary-soft: #e8f1fe; --on-primary: #fff;
  --ink: #1a1a1a; --ink-sub: #4d4d4d; --ink-weak: #767676;
  --line: #cccccc; --line-strong: #949494;
  --surface: #ffffff; --surface-alt: #f2f2f2;
  --link: #00118f; --link-visited: #8b008b; --link-active: #c74700; --focus: #ffd43d;
  --success: #197a4b; --error: #ce0000; --warning: #806300; --warning-shape: #b78f00;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 前の土台の部品が使う名前を、土台Dの値へつなぐ（部品の名前はそのまま使う） */
  --bg: var(--surface); --band-bg: var(--surface-alt); --panel: var(--surface-alt); --card: var(--surface);
  --accent: var(--primary); --accent-shape: var(--primary); --on-accent: var(--on-primary);
  --teal: var(--primary-soft); --coral: var(--error);
  --jp: var(--font); --disp: var(--font); --ease: cubic-bezier(.2, 0, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font); font-weight: 400;
  font-size: 17px; line-height: 1.7; letter-spacing: .02em; }
main { max-width: 1120px; margin: 0 auto; padding: var(--s4) var(--s3) var(--s5); }
.prose { max-width: 42em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); text-wrap: balance; word-break: auto-phrase; }
h1 { font-size: 36px; line-height: 1.4; letter-spacing: .01em; margin-bottom: var(--s3); }
h2 { font-size: 28px; line-height: 1.5; letter-spacing: .01em; margin: var(--s5) 0 var(--s2); }
h3 { font-size: 22px; line-height: 1.5; margin: var(--s4) 0 var(--s1); }
h4 { font-size: 18px; line-height: 1.6; margin: var(--s3) 0 var(--s1); }
p { margin: 0 0 var(--s2); }
.note, small { font-size: 16px; color: var(--ink-sub); line-height: 1.7; }
.fine { font-size: 16px; color: var(--ink-sub); line-height: 1.7; }
.fine summary { cursor: pointer; font-size: 17px; display: flex; align-items: center; gap: 6px; }
.fine summary .icon { width: 16px; height: 16px; }
.fine[open] summary .icon { transform: rotate(180deg); }
.fine p.note { margin-top: 8px; }
#fine .inner { padding-top: 0; }
:where(a:any-link) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(a:visited) { color: var(--link-visited); }
:where(a:hover) { color: var(--primary); text-decoration-thickness: 3px; }
:where(a:active) { color: var(--link-active); }
:focus-visible { outline: 4px solid #000; outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 2px var(--focus); }
/* 区画：影ではなく線と面で区切る */
.band { background: var(--surface-alt); border-radius: var(--r-lg); padding: var(--s4) var(--s3); }
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); }
/* ボタン（主・副の2種類だけ。角丸 8px） */
.btn { display: inline-flex; align-items: center; gap: var(--s1); min-height: 48px; padding: 0 var(--s3);
  border-radius: var(--r-md); border: 1px solid var(--primary); font: 700 16px/1 var(--font); letter-spacing: .02em;
  cursor: pointer; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.btn-primary, .btn-primary:visited { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.btn-secondary, .btn-secondary:visited { background: var(--surface); color: var(--primary); }
.btn-secondary:hover { background: var(--primary-soft); color: var(--primary); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--s3) 0; }
.bignum { font-weight: 700; font-size: 44px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bignum-note { font-size: 16px; color: var(--ink-sub); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); counter-reset: st; }
.steps > li { counter-increment: st; display: grid; grid-template-columns: 44px 1fr; gap: var(--s2); align-items: start; }
.steps > li::before { content: counter(st); font-weight: 700; color: var(--primary); }
/* 表：詰める時は行高を下げる。文字は小さくしない */
table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
th, td { text-align: left; padding: 12px var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; background: var(--surface-alt); }
.icon { width: 20px; height: 20px; flex: none; vertical-align: -0.2em; stroke-width: 1.75; }
.with-icon { display: inline-flex; align-items: center; gap: var(--s1); }
@media (max-width: 767px) {
  main { padding: var(--s3) var(--s2) var(--s4); } .band { padding: var(--s3) var(--s2); }
  h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* 表は本文と同じ幅（.inner の中）に収める。2026-10-31 本人「表だけはみ出てて横幅おかしい」で、
   このサイトでは 2026-10-22 の「表は画面いっぱい」（本文の列からはみ出す全幅）をやめた。
   狭い画面で列が入りきらない表は、表の中だけ横に送る（ページは横に動かない）。 */
.table-wrap { overflow-x: auto; width: 100%; margin-left: 0; }
.table-wrap > table { width: 100%; min-width: 0; }
@media (max-width: 767px) { .table-wrap > table { min-width: 40em; } }

/* =====================================================================
   WordPress 乗り換え窓口：土台Dの上に足した部分
   ===================================================================== */
html { scroll-behavior: smooth; }
body, p, li, dd, td, th { word-break: auto-phrase; overflow-wrap: anywhere; }
[id] { scroll-margin-top: 24px; }
main { max-width: none; padding: 0; }
.inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--s3); }
.sec { padding: var(--s5) 0; }
.band-alt { background: var(--surface-alt); }
.sec > .inner > h2, .sec h2:first-child { margin-top: 0; }
.sec h2 { margin: 0 0 var(--s2); }
.sec h3 { margin: var(--s3) 0 var(--s1); }
.sec p:last-child { margin-bottom: 0; }
.icon { stroke-width: 1.75; }
.btn { font-size: 17px; }
.btn-xl { min-height: 56px; padding: 0 var(--s3); font-size: 17px; }
.btn-sm { min-height: 44px; padding: 0 var(--s2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }
.nw { display: inline-block; }
.lead { font-size: 17px; max-width: 34em; }
br.pc { display: inline; }

/* ヘッダー */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.head-row { display: flex; align-items: center; gap: var(--s3); min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-height: 44px; margin-right: auto; }
.brand img { display: block; height: 22px; width: auto; }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: .02em; padding-left: 14px; border-left: 1px solid var(--line); line-height: 1.3; }
.gnav { display: flex; gap: 4px var(--s3); }
.gnav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; }
.gnav a:hover, .gnav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* パンくず */
.crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--ink-sub); }
.crumb li + li::before { content: "／"; margin: 0 8px; color: var(--ink-sub); }
.crumb a { color: var(--ink-sub); }

/* 下層ページの頭 */
.page-head { padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); background: var(--band-bg); }
.page-head h1 { margin: var(--s3) 0 var(--s2); max-width: 22em; }
.page-head .lead { margin: 0; }
.page-head .meta { margin: var(--s2) 0 0; }
.sec-lead { max-width: 42em; }

/* ファーストビュー */
.hero { padding: var(--s4) 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--s4); align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: var(--s1); font-size: 17px; font-weight: 700; color: var(--accent); margin: 0 0 var(--s2); }
.hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.3; margin-bottom: var(--s3); }
.hero .lead { margin-bottom: var(--s1); }
.hero .actions { margin: var(--s3) 0 var(--s2); }
.hero-photo { margin: 0; display: grid; gap: var(--s2); justify-items: start; }
.hero-photo img { display: block; width: 100%; max-width: 400px; height: auto; aspect-ratio: 960 / 1080; object-fit: cover; border-radius: var(--r-lg); }
.hero-photo figcaption { font-size: 17px; line-height: 1.7; }
.hero-photo .nm { font-weight: 700; font-size: 20px; display: block; }
.trust { list-style: none; margin: var(--s4) 0 0; padding: var(--s2) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: var(--s2) var(--s3); }
.trust li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; font-weight: 700; }
.trust .icon { color: var(--accent); margin-top: .25em; }

/* リスト・表 */
.rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.rules > li { display: flex; align-items: flex-start; gap: var(--s2); padding: 16px 4px; border-bottom: 1px solid var(--line); }
.rules .icon { margin-top: .32em; color: var(--accent); }
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s4); align-items: start; }
.take { margin: var(--s3) 0 0; font-weight: 700; font-size: 19px; line-height: 1.8; max-width: 38em; }
.plain-list { margin: 0 0 var(--s2); padding-left: 1.3em; }
.plain-list li { padding: 3px 0; }

.sheet { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--ink); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.sheet caption { text-align: left; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 14px 20px; border-bottom: 1px solid var(--line); line-height: 1.7; }
.sheet thead th { background: var(--band-bg); border-bottom: 1px solid var(--ink); font-size: 18px; }
.sheet thead th.hl { background: var(--accent); color: var(--on-accent); }
.sheet tbody th { background: var(--band-bg); font-weight: 700; white-space: nowrap; }
.sheet td + td, .sheet th + td, .sheet th + th { border-left: 1px solid var(--line); }
.sheet tbody tr:last-child th, .sheet tbody tr:last-child td { border-bottom: 0; }
.sheet .price-cell { font-family: var(--disp); font-weight: 700; font-size: 26px; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet .price-cell small { font: 500 15px/1.5 var(--jp); color: var(--ink-sub); display: block; letter-spacing: .03em; }
.sheet .hint { display: block; font-weight: 500; font-size: 17px; color: var(--ink-sub); line-height: 1.5; white-space: normal; }
.sheet td ul { margin: 0; padding-left: 1.2em; }
.sheet td ul li { padding: 2px 0; }
.sheet .tight th, .sheet .tight td { padding-top: 10px; padding-bottom: 10px; }
.table-note { margin-top: var(--s2); }

/* 図 */
.fig { margin: var(--s3) 0; }
.fig figcaption { margin-top: var(--s2); max-width: 40em; }
.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.stack li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; border: 1px solid var(--ink); border-radius: var(--r-md); background: var(--band-bg); }
.stack li.s-top { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stack .s-name { display: flex; align-items: center; gap: 10px; font-weight: 700; line-height: 1.5; }
.stack .s-who { font-size: 17px; line-height: 1.5; padding-left: 30px; }
.stack-fig { margin-top: 0; }
.bars { max-width: 760px; padding: var(--s2) var(--s3) var(--s2); border: 1px solid var(--ink); border-radius: var(--r-md); background: #fff; }
.bar-row { display: grid; grid-template-columns: 15em minmax(0, 1fr) 6.5em; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.bar-name { line-height: 1.5; }
.bar-track { display: block; height: 28px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--w); border-radius: 4px; transform-origin: left center; }
.bar-fill.all { background: var(--ink-sub); }
.bar-fill.plug { background: var(--accent); }
.bar-num { font-family: var(--disp); font-weight: 700; text-align: right; font-size: 20px; }
.bars figcaption { margin-top: 4px; max-width: none; }
.vers { max-width: 860px; padding: var(--s2) var(--s3) var(--s2); border: 1px solid var(--ink); border-radius: var(--r-md); background: #fff; }
.vers-head, .ver-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 10.5em; align-items: center; gap: var(--s2); }
.vers-head { margin-bottom: 4px; }
.vers-time { position: relative; display: block; height: 34px; }
.vers-mark { position: absolute; left: 52%; transform: translateX(-50%); white-space: nowrap; font-size: 17px; font-weight: 700; color: var(--ink); }
.ver-row { margin-bottom: 10px; position: relative; }
.ver-name { font-family: var(--disp); font-weight: 700; font-size: 18px; white-space: nowrap; }
.ver-track { display: block; height: 26px; position: relative; background: var(--panel); border-radius: 4px; }
.ver-track::after { content: ""; position: absolute; left: 52%; top: -6px; bottom: -6px; width: 2px; background: var(--ink); }
.ver-bar { display: block; height: 100%; width: var(--w); border-radius: 4px; transform-origin: left center; position: relative; }
.ver-bar.live { background: var(--accent); }
.ver-bar.end { background: var(--ink-sub); }
.ver-bar.end::after { content: ""; position: absolute; right: -2px; top: -3px; bottom: -3px; width: 8px; border-radius: 2px; background: var(--coral); }
.ver-note { font-size: 16px; line-height: 1.4; font-weight: 700; }
.vers figcaption { max-width: none; }
.scale { max-width: 1120px; }
.scale-seg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 6fr 5fr 5fr 14fr; gap: 8px; }
.scale-seg li { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--ink); background: var(--band-bg); }
.scale-seg li.seg-1 { background: #fff; }
.scale-seg li.seg-4 { background: var(--panel); border-style: dashed; }
.seg-pts { font-size: 15px; color: var(--ink-sub); font-weight: 700; }
.seg-name { font-weight: 700; }
.seg-price { font-family: var(--disp); font-weight: 700; font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.deleg { display: grid; gap: 4px; justify-items: start; max-width: 560px; }
.dg-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dg-node { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--ink); border-radius: var(--r-md); background: #fff; font-weight: 700; line-height: 1.5; }
.dg-lead { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dg-human { background: var(--band-bg); }
.dg-arrow { padding-left: 22px; color: var(--ink-sub); height: 28px; display: flex; align-items: center; }
.deleg figcaption { max-width: none; margin-top: var(--s2); }
.callout { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border: 1px solid var(--accent); border-radius: var(--r-md); background: #fff; }
.callout .icon { color: var(--accent); margin-top: .35em; width: 24px; height: 24px; }
.callout p { margin: 0; max-width: 42em; }

/* 1行を長くしすぎない */
.inner > p { max-width: 42em; }
.inner > p.take, .inner > p.sec-lead { max-width: 42em; }
.dg-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); max-width: 900px; }
.dg-col { display: grid; gap: 4px; justify-items: start; align-content: start; }
.dg-col h3 { margin: 0 0 var(--s1); font-size: 20px; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dg-chips li { padding: 6px 14px; border: 1px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 700; line-height: 1.5; }
.dg-col.dash .dg-chips li { border-style: dashed; background: var(--panel); }
.dg-col.dash .dg-node { border-style: dashed; }
.phase { display: grid; grid-template-columns: 9em repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 980px; }
.phase > div { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; line-height: 1.6; }
.phase .ph-h { background: var(--band-bg); font-weight: 700; border-color: var(--ink); }
.phase .ph-r { background: var(--band-bg); font-weight: 700; }
.phase .ph-new { border-color: var(--accent); border-width: 2px; }
@media (max-width: 767px) {
  .dg-cols { grid-template-columns: minmax(0, 1fr); }
  .phase { grid-template-columns: minmax(0, 1fr); }
  .phase .ph-corner { display: none; }
}

/* 3つの事実・理由の並び（同じカードを並べず、行にする） */
.reasons { list-style: none; margin: var(--s3) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.reasons > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s2); padding: 20px 4px; border-bottom: 1px solid var(--line); }
.reasons .icon { color: var(--accent); width: 26px; height: 26px; margin-top: .25em; }
.reasons strong { display: block; font-size: 19px; line-height: 1.6; margin-bottom: 4px; }
.reasons p { margin: 0; max-width: 44em; }
.reasons .src { margin-top: 6px; }

/* 進め方（縦・線が伸びる） */
.flow { list-style: none; margin: var(--s3) 0 var(--s3); padding: 0; max-width: 44em; position: relative; counter-reset: fl; }
.flow > li { counter-increment: fl; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s2); padding-bottom: var(--s3); }
.flow > li:last-child { padding-bottom: 0; }
.flow > li::before { content: counter(fl); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 18px/1 var(--disp); }
.flow strong { display: block; font-size: 20px; line-height: 1.6; }
.flow .when { display: inline-block; margin-left: 8px; font-size: 16px; font-weight: 700; color: var(--accent); }
.flow p { margin: 4px 0 0; }
.flow > li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--accent); transform-origin: top; }

/* 本文ページ */
.article { padding: var(--s4) 0 0; }
.article .inner > h2 { margin: var(--s5) 0 var(--s2); }
.article .inner > h2:first-child, .article .toc + h2 { margin-top: var(--s4); }
.article h3 { margin: var(--s3) 0 var(--s1); }
.article .prose, .article > .inner > p, .article > .inner > ul, .article > .inner > ol { max-width: 42em; }
.toc { max-width: 42em; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.toc p { margin: 0 0 4px; font-weight: 700; }
.toc ol { margin: 0; padding-left: 1.4em; }
.toc li { padding: 2px 0; }
.defs { margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--ink); max-width: 46em; }
.defs > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--s2); padding: 14px 4px; border-bottom: 1px solid var(--line); }
.defs dt { font-weight: 700; line-height: 1.7; }
.defs dd { margin: 0; line-height: 1.8; }
.cite { max-width: 46em; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.cite li { padding: 12px 4px; border-bottom: 1px solid var(--line); line-height: 1.7; }
.cite a { overflow-wrap: anywhere; }
.checklist { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--ink); max-width: 46em; }
.checklist li { display: flex; gap: var(--s2); align-items: flex-start; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.checklist .tick { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); margin-top: 2px; }
.checklist .tick .icon { width: 16px; height: 16px; color: var(--primary); margin: 0; stroke-width: 2.2; }

/* 面（band） */
.bandsec { margin-top: 0; padding: var(--s5) 0; background: var(--band-bg); }
.bandsec h2 { margin-top: 0; }

/* 代表 */
.profile { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--s4); align-items: start; }
.profile img { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 960 / 1080; object-fit: cover; border-radius: var(--r-lg); }
.profile .name { font-size: 26px; font-weight: 700; margin: var(--s2) 0 0; line-height: 1.5; }
.profile .role { margin: 0 0 var(--s2); color: var(--ink-sub); }

/* FAQ */
.faq { max-width: 52em; border-top: 1px solid var(--ink); margin-bottom: var(--s2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 18px 4px; font-weight: 700; font-size: 18px; line-height: 1.6; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform .5s var(--ease); color: var(--accent); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .ans { padding: 0 4px 18px; margin: 0; max-width: 42em; }
.article h2 + .faq, .sec h2 + .faq { margin-top: var(--s2); }

/* 締めの申し込み帯 */
.cta-band { margin-top: 0; padding: var(--s5) 0; background: var(--band-bg); }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.cta-in h2 { margin: 0 0 var(--s1); font-size: clamp(24px, 3vw, 30px); }
.cta-in p { margin: 0; max-width: 36em; }

/* フォーム */
.apply { margin-top: 0; padding: var(--s5) 0; background: var(--band-bg); }
.apply h2 { margin: 0 0 var(--s2); }
.ap-form { max-width: 44em; background: #fff; border: 1px solid var(--ink); border-radius: var(--r-md); padding: var(--s3); margin-top: var(--s3); }
.ap-form fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); min-width: 0; }
.ap-form legend, .ap-form label.lab { font-weight: 700; display: block; margin-bottom: 8px; padding: 0; }
.req, .opt { font-size: 15px; font-weight: 700; margin-left: 8px; letter-spacing: .04em; white-space: nowrap; }
.req { color: var(--accent); }
.opt { color: var(--ink-sub); }
.ap-form .field { margin-bottom: var(--s3); }
.ap-form input[type=text], .ap-form input[type=email], .ap-form input[type=url], .ap-form textarea { display: block; width: 100%; min-height: 52px; padding: 12px 14px; font: 500 17px/1.6 var(--jp); color: var(--ink); background: #fff; border: 1px solid var(--ink-sub); border-radius: var(--r-sm); letter-spacing: .02em; }
.ap-form textarea { min-height: 140px; resize: vertical; }
.opts { display: grid; gap: 10px; }
.opt-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-weight: 500; }
.opt-row:has(input:checked) { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.opt-row input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--s2); }
.consent input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 5px 0 0; }
.purpose { margin: 0 0 var(--s2); }
.assure { margin: 0 0 var(--s2); font-weight: 700; line-height: 1.7; }
.hint { margin: 6px 0 0; }
.ap-form .btn { border: 0; cursor: pointer; }
.ap-form .btn-primary { min-width: 240px; justify-content: center; }

/* フッター */
.site-footer { margin-top: 0; padding: var(--s4) 0; background: var(--surface-alt); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: start; }
.foot-logo img { display: block; height: 24px; width: auto; }
.foot-name { margin: var(--s2) 0 4px; font-weight: 700; }
.foot-co .note { margin: 0 0 4px; }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s3); }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .copy { grid-column: 1 / -1; margin: 0; }

/* 動き（文字は最初から見えている。図形だけに足す。動きを減らす設定では止める） */
@media (prefers-reduced-motion: no-preference) {
  @keyframes grow { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
  @keyframes growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .bar-fill, .ver-bar { animation: grow 1.1s var(--ease) both; }
  .ver-row:nth-child(3) .ver-bar { animation-delay: .08s; } .ver-row:nth-child(4) .ver-bar { animation-delay: .16s; }
  .ver-row:nth-child(5) .ver-bar { animation-delay: .24s; } .ver-row:nth-child(6) .ver-bar { animation-delay: .32s; }
  .ver-row:nth-child(7) .ver-bar { animation-delay: .4s; } .ver-row:nth-child(8) .ver-bar { animation-delay: .48s; }
  .flow > li:not(:last-child)::after { animation: growy 1s var(--ease) both; }
  @supports (animation-timeline: view()) {
    .bar-fill, .ver-bar { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .flow > li:not(:last-child)::after { animation: growy linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}

/* 画面が狭い時 */
@media (max-width: 1000px) {
  .head-row { flex-wrap: wrap; gap: 0 var(--s2); min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .gnav { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 0 var(--s2); }
}
@media (max-width: 900px) {
  .hero-grid, .split, .profile, .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .trust { grid-template-columns: minmax(0, 1fr); }
  .hero-photo img, .profile img { max-width: 320px; }
}
@media (max-width: 767px) {
  .inner { padding: 0 var(--s2); }
  .article .inner > h2 { margin-top: var(--s4); }
  .sec, .bandsec, .cta-band, .apply { padding: var(--s4) 0; }
  .hero { padding-top: var(--s3); }
  .brand-name { font-size: 16px; padding-left: 10px; }
  .brand img { height: 18px; }
  .hero .actions .btn, .cta-in .btn { width: 100%; justify-content: center; }
  .page-head { padding-bottom: var(--s3); }
  .bars, .vers { padding: var(--s2); }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s2); }
  .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .vers-head { display: none; }
  .ver-row { grid-template-columns: 5em minmax(0, 1fr); gap: 4px var(--s2); margin-bottom: var(--s2); }
  .ver-note { grid-column: 2; }
  .ver-track::after { display: none; }
  .scale-seg { grid-template-columns: minmax(0, 1fr); }
  .defs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .reasons > li { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
  .callout { padding: var(--s2); }
  .ap-form { padding: var(--s2); }
  .ap-form .btn-primary { width: 100%; }
  .foot-nav { grid-template-columns: minmax(0, 1fr); }
  /* 表は1行ずつの縦の並びにする（列の見出しは data-label で出す） */
  .table-wrap > table.sheet { min-width: 0; }
  .stk, .stk thead, .stk tbody, .stk tr, .stk th, .stk td { display: block; width: 100%; }
  .stk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stk tbody th { border-bottom: 1px solid var(--ink); white-space: normal; padding: 12px 16px; }
  .stk td { padding: 12px 16px; }
  .stk td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; color: var(--accent); font-size: 15px; }
  .stk td + td, .stk th + td { border-left: 0; }
  .stk tbody tr { border-bottom: 2px solid var(--ink); }
  .stk tbody tr:last-child { border-bottom: 0; }
  .stk tbody tr:last-child td:last-child { border-bottom: 0; }
  .sheet .price-cell { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.split.wide-l { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.reasons.flush { margin-top: 0; }
@media (max-width: 900px) { .split.wide-l { grid-template-columns: minmax(0, 1fr); } }

.article .stack-fig { margin-top: var(--s3); }
.sec .flow:last-child, .sec .fig:last-child { margin-bottom: 0; }

/* 表・図の直後の段落に間を足す */
.table-wrap + p, .table-wrap + h2, .table-wrap + h3 { margin-top: var(--s3); }
.table-wrap + p.note, .table-wrap + .note { margin-top: var(--s2); }
.checklist.on-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--s2); }
.checklist.on-card li:last-child { border-bottom: 0; }
.bandsec + .cta-band { margin-top: 0; }
.rows + p, .checklist + p, .rows + .note { margin-top: var(--s2); }
.sec .faq + h2 { margin-top: var(--s4); }

/* 25万円一本の表示と、判定の出口3つ（2026-10-30 追加） */
.price-one { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: var(--s2) 0; }
.po-num { font-weight: 700; font-size: 56px; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.po-tax { font-weight: 700; font-size: 20px; }
.po-incl { font-size: 17px; color: var(--ink-sub); font-variant-numeric: tabular-nums; }
.hero-price { margin: 0 0 var(--s2); }
.one-price { display: grid; gap: 2px; padding: 18px 22px; border: 1px solid var(--ink); border-radius: var(--r-md); background: #fff; margin-bottom: 12px; }
.op-label { font-size: 15px; font-weight: 700; color: var(--ink-sub); }
.op-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.op-sub { font-size: 17px; color: var(--ink-sub); }
.exit-seg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.exit-seg li { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--ink); background: var(--band-bg); }
.exit-seg li.ex-1 { background: #fff; }
.exit-seg li.ex-3 { background: var(--panel); border-style: dashed; }
.ex-tag { font-size: 15px; font-weight: 700; color: var(--accent); }
.ex-price { font-family: var(--disp); font-weight: 700; font-size: 22px; line-height: 1.35; }
.ex-desc { font-size: 17px; color: var(--ink-sub); line-height: 1.6; }
@media (max-width: 767px) { .exit-seg { grid-template-columns: minmax(0, 1fr); } .one-price { padding: 14px 16px; } }


/* =====================================================================
   案 B（判定型）の見た目：2026-10-31 本人が選んだトップ案を全ページへ
   ===================================================================== */
/* 線は土台Dの灰色で。濃い線は表の外枠にだけ使わない */
.rules, .reasons, .defs, .cite, .checklist, .faq { border-top-color: var(--line-strong); }
.trust { border-top-color: var(--line-strong); }
.page-head { background: var(--surface-alt); border-bottom: 0; padding: var(--s3) 0 var(--s4); }
.page-head h1 { margin: var(--s3) 0 var(--s2); }
.crumb ol { font-size: 16px; }
/* ヘッダー */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.head-row { min-height: 72px; }
.brand-name { font-size: 18px; border-left-color: var(--line); }
.gnav a:hover, .gnav a[aria-current="page"] { color: var(--primary); text-decoration-thickness: 3px; }

/* 最初の画面：左に見出しと「標準／見積／お断り」の3段、右に無料診断フォーム */
.hero { padding: var(--s4) 0; }
.hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.hero h1 { font-size: 36px; line-height: 1.4; margin-bottom: var(--s3); }
.hero .lead { max-width: 34em; margin-bottom: var(--s3); }
.rows { list-style: none; margin: 0 0 var(--s2); padding: 0; border-top: 1px solid var(--line); }
.rows > li { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.rows > li > .icon { margin-top: 5px; color: var(--primary); }
.rows .tag { display: block; font-weight: 700; margin-bottom: var(--s1); }
.rows p { margin: 0; }
.rows .plain-list { margin: 0 0 var(--s1); }
.rows .price-one { margin: 0; gap: 0 var(--s1); }
.rows .po-num { font-size: 48px; }
.rows .po-tax { font-size: 20px; }
.price-sub { font-size: 17px; color: var(--ink-sub); margin: var(--s1) 0 0; font-variant-numeric: tabular-nums; }
.hero .actions { margin: var(--s2) 0 0; }
.hero-form h2 { font-size: 22px; margin: 0 0 var(--s1); }
.lead-line { display: flex; gap: var(--s1); align-items: flex-start; margin: 0; }
.lead-line .icon { margin-top: 5px; color: var(--primary); }

/* フォーム（土台Dの入力欄） */
.ap-form { max-width: 44em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); margin-top: var(--s3); }
.hero-form .ap-form { border: 0; padding: 0; border-radius: 0; }
.ap-form input[type=text], .ap-form input[type=email], .ap-form input[type=url], .ap-form textarea {
  display: block; width: 100%; min-height: 48px; padding: var(--s1) var(--s2); font: 400 17px/1.6 var(--font);
  color: var(--ink); background: var(--surface); border: 1px solid var(--ink-sub); border-radius: var(--r-md); }
.ap-form .lab { font-weight: 700; }
.req, .opt { font-size: 16px; letter-spacing: .02em; }
.req { color: var(--primary); }
.consent input { width: 24px; height: 24px; accent-color: var(--primary); margin: 3px 0 0; }
.ap-form .btn { border: 1px solid var(--primary); }
.ap-form .btn-primary { width: 100%; justify-content: center; min-height: 56px; }

/* 表：土台Dの形（外枠なし・行ごとの線・見出しの面は灰色） */
.sheet { border: 0; border-radius: 0; border-collapse: collapse; overflow: visible; background: var(--surface); }
.sheet th, .sheet td { padding: 12px var(--s2); border-bottom: 1px solid var(--line); line-height: 1.6; }
.sheet thead th { background: var(--surface-alt); border-bottom: 1px solid var(--line-strong); font-size: 17px; }
.sheet thead th.hl { background: var(--primary-soft); color: var(--ink); }
.sheet tbody th { background: var(--surface-alt); }
.sheet td + td, .sheet th + td, .sheet th + th { border-left: 0; }
.sheet tbody tr:last-child th, .sheet tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.sheet .price-cell { font-size: 22px; }
.band-alt .sheet { background: var(--surface); }

/* 図：外枠は灰色の細線 */
.stack li, .bars, .vers, .scale-seg li, .exit-seg li, .one-price, .dg-node, .dg-chips li, .phase .ph-h, .callout, .toc { border-color: var(--line-strong); }
.stack li.s-top, .dg-lead { border-color: var(--primary); }
.callout { border-color: var(--primary); }
.ex-tag { color: var(--primary); }

/* 代表 */
.profile { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s4); }
.profile img { max-width: 240px; border-radius: var(--r-lg); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .profile { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}
@media (max-width: 767px) {
  .hero { padding: var(--s3) 0 var(--s4); }
  .hero h1 { font-size: 28px; }
  .po-num { font-size: 44px; }
  .rows .po-num { font-size: 40px; }
  .hero-form { padding: var(--s2); }
  .ap-form { padding: var(--s2); }
  .hero-form .ap-form { padding: 0; }
  .sheet .price-cell { font-size: 20px; }
  .profile img { max-width: 200px; }
}

/* 濃い青の面は小さく：図の強調は淡い青の面＋青の枠にする（土台Dの濃い青は面積を取ると濃紺に見える） */
.stack li.s-top, .dg-lead { background: var(--primary-soft); color: var(--ink); border-color: var(--primary); }
.stack li.s-top .icon, .dg-lead .icon { color: var(--primary); }
.profile p { max-width: 38em; }
@media (max-width: 767px) {
  .hero .actions .btn, .cta-in .btn { width: auto; }
}
@media (max-width: 767px) {
  .stk tbody th { border-bottom-color: var(--line-strong); }
  .stk tbody tr { border-bottom: 1px solid var(--line-strong); }
}

/* 金額の数字：等幅（tabular-nums）にしない。数字を等幅にすると、書体によってはカンマや桁の間が広く空いて
   「1 , 000」のように見える（2026-10-31 本人「数字の表記がおかしい」）。大きい金額は字間も詰めて付ける。 */
.bignum, .po-num, .po-incl, .price-sub, .seg-price, .ex-price, .bar-num, .sheet .price-cell { font-variant-numeric: normal; font-feature-settings: normal; }
.bignum, .po-num, .seg-price, .ex-price, .sheet .price-cell { letter-spacing: 0; }