/* C3 の土台（docs/design/DESIGN.md 1〜3・5・9章）
   色は DESIGN.md 1章の表の中だけ：地 #FFFFFF／淡い面 #F2F6FA／罫 #E2E8F0・入力欄 #CBD5E1／墨 #0F172A・#1E293B・#475569
   紺 #1E4E79（押下 #163B5C、淡い紺 #E3ECF5・#C9DAEA）は押せる・選んでいるものだけ／紺の面 #14304A はフッタだけ
   灰 #F1F5F9＋#475569 は確認済み・出典／琥珀 #B45309 on #FEF3C7 は未確認だけ（三角のアイコン＋文字）。赤・緑・橙は使わない
   角丸は 12（カード）・8（操作）・6（ラベル）と、丸い副ボタン・チップの 999px だけ。影は1種類。線は 1px */
:root{
  --bg:#FFFFFF;--tint:#F2F6FA;--n100:#E3ECF5;--n200:#C9DAEA;--mk:#F1C3CE;--mk-h:#9BC4EE;--line:#E2E8F0;--line-2:#CBD5E1;
  --sumi:#0F172A;--ink:#1E293B;--muted:#475569;--navy:#1E4E79;--navy-d:#163B5C;--ft:#14304A;
  --grey:#F1F5F9;--amber:#B45309;--amber-t:#FEF3C7;
  --r1:12px;--r2:8px;--r3:6px;
  --sh:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.08);
  --f:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo","Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif;
  /* 未確認の三角（ラベルの ::before で mask に使う。色は currentColor ＝琥珀） */
  --tri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.75 15 14.25H1L8 1.75Z'/%3E%3Cpath d='M8 6.25v3.5'/%3E%3Ccircle cx='8' cy='11.9' r='.6' fill='black'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
*{transition:none!important;animation:none!important}/* 動きは使わない（DESIGN.md 6章 7）。ホバーとフォーカスは色の変化だけ */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.7;overflow-wrap:break-word;text-spacing-trim:trim-start}
::selection{background:var(--n100);color:var(--sumi)}
a{color:var(--navy);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:var(--r3)}
input[type=radio],input[type=checkbox]{accent-color:var(--navy)}
svg{max-width:100%}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;padding:12px 16px;background:var(--bg);color:var(--ink);border-radius:var(--r2)}
.skip:focus{left:8px}

.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
main.wrap{padding-top:24px;padding-bottom:40px}
@media (min-width:960px){main.wrap{padding-top:32px;padding-bottom:64px}}

/* 文字（2章）：見出しは palt と字間 .02em、本文は詰めない。11px 以下は使わない */
h1,h2,h3{color:var(--sumi);font-feature-settings:"palt";letter-spacing:.02em;line-height:1.4;font-weight:700;word-break:auto-phrase;line-break:strict;text-wrap:balance}
h1{font-size:24px;margin:8px 0 16px}
h2{font-size:20px;margin:40px 0 12px}
h3{font-size:16px;margin:24px 0 8px}
@media (min-width:960px){h1{font-size:32px}h2{font-size:24px}h3{font-size:17px}}
.note{color:var(--muted);font-size:14px;line-height:1.65}
.num,.yen{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.yen{white-space:nowrap}
.yen .u{font-size:max(12px,.6em);margin-left:.1em}/* 「円」は数字の 0.6 倍。ただし 12px 未満にはしない（DESIGN.md 2章） */
.nw{white-space:nowrap}

/* アイコン（7章）：小 16px と、大（40px の淡い紺の丸に 22px） */
.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px}
.ib{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--n100);color:var(--navy);flex:none}
.ib .ic{width:22px;height:22px}

/* ---- ヘッダ ---- */
.hd{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:2}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--sumi);min-height:44px}
.mark{width:30px;height:30px;flex:none}
.brand-t{display:flex;flex-direction:column;font-weight:700;font-size:18px;line-height:1.15;letter-spacing:.06em;font-feature-settings:"palt"}
.brand-t small{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.hd-nav{display:flex;gap:4px;margin-right:-8px}
.hd-nav a{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:56px;min-height:48px;padding:0 8px;border-radius:var(--r2);font-size:12px;font-weight:700;line-height:1.3;color:var(--ink);text-decoration:none}
.hd-nav a:hover{background:var(--tint)}
.hd-nav a[aria-current=page]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy);border-radius:0}
.hd-nav .ic{width:20px;height:20px;color:var(--navy)}
@media (min-width:768px){.hd-nav a{flex-direction:row;gap:6px;font-size:14px;padding:0 12px}.hd-nav .ic{width:18px;height:18px}}

/* ---- フッタ（紺の面はここだけ） ---- */
.ft{background:var(--ft);color:var(--n200);padding:40px 0 48px;font-size:13px;line-height:1.75}
@media (min-width:960px){.ft{padding:64px 0}}
.ft a{color:var(--bg)}
.ft-top{display:grid;gap:8px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.16)}
.ft-brand,.ft-brand .brand-t{color:var(--bg)}
.ft-brand .brand-t small{color:var(--n200)}
.ft-brand .mark rect:first-child{fill:var(--bg)}
.ft-brand .mark rect:not(:first-child){fill:var(--ft)}
.ft-lead{margin:0;font-size:14px}
.ft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;padding:20px 0}
@media (min-width:768px){.ft-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ft-cols h2{font-size:12px;color:var(--n200);letter-spacing:.08em;margin:8px 0 2px}
.ft-cols a{display:flex;align-items:center;min-height:40px;margin-bottom:4px;text-decoration:none;font-size:14px}
.ft-cols a:hover{text-decoration:underline}
.ft-cols a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px}
.ft-dis,.ft-s{margin:4px 0 0;border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
.ft-s{border:0;padding-top:8px}

/* ---- 共通の部品（5章） ---- */
/* 出典ラベル：灰の地・文書のアイコン・「10/20確認」。見た目は小さく、押せる範囲は 44px */
.src-lbl{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1.3;padding:3px 8px;border-radius:var(--r3);background:var(--grey);color:var(--muted);text-decoration:none;white-space:nowrap;min-height:24px;vertical-align:middle}
.src-lbl .ic{width:12px;height:12px}
.src-lbl::after{content:"";position:absolute;inset:-10px -2px}
.src-lbl:hover{text-decoration:underline}
/* 未確認ラベル：琥珀・三角・文字（色だけに頼らない） */
.unv-lbl{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;line-height:1.3;padding:3px 8px;border-radius:var(--r3);color:var(--amber);background:var(--amber-t);white-space:nowrap;vertical-align:middle}
.unv-lbl .ic{width:14px;height:14px}
.unv-note{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--amber);background:var(--amber-t);border-radius:var(--r3);padding:8px 12px;margin:8px 0}
.unv-note .ic{margin-top:4px}
/* PR 枠：色なし。破線の枠＋「PR」 */
.pr-box{border:1px dashed var(--muted);border-radius:var(--r1);padding:14px 16px}
.pr-h{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pr-l{display:inline-flex;gap:4px;align-items:center;font-weight:700;color:var(--ink);border:1px solid var(--ink);padding:0 6px;border-radius:var(--r3)}
.pr-b{margin-top:8px;font-weight:700}
/* 府県のセグメント：中身はラジオ（fieldset＋legend）。高さ 40px＋溝 4px */
.seg{margin:0;padding:0;border:0;min-width:0}
.seg legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--ink)}
.seg-in{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--tint);border-radius:calc(var(--r2) + 4px);border:1px solid var(--line)}
.seg-in label{position:relative;display:block}
.seg-in input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg-in span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 8px;border-radius:var(--r2);font-size:15px;font-weight:700;color:var(--muted);white-space:nowrap}
.seg-in label:hover span{color:var(--navy)}
.seg-in input:checked+span{background:var(--navy);color:var(--bg)}
.seg-in input:focus-visible+span{outline:3px solid var(--navy);outline-offset:2px}
/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:var(--r2);background:var(--navy);color:var(--bg);font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--navy-d)}
.btn-sub{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--navy);background:var(--bg);color:var(--navy);font-weight:700;cursor:pointer;text-decoration:none}
.btn-sub:hover{background:var(--tint)}
/* 写真（8章）：右下に「写真はイメージ（AI生成）」 */
.photo{position:relative;margin:0;border-radius:var(--r1);overflow:hidden;background:var(--tint)}
.photo img{display:block;width:100%;height:auto}
.ph-cap{position:absolute;right:8px;bottom:8px;font-size:12px;line-height:1;padding:5px 7px;border-radius:var(--r3);background:rgba(255,255,255,.92);color:var(--muted)}

/* ---- いまのページの要素を C3 の色・角・線に合わせる（中身の組み替えは次の Issue から） ---- */
.box{background:var(--tint);border:1px solid var(--line);border-radius:var(--r1);padding:12px 16px;margin:16px 0}
.warn{background:var(--tint);border:1px solid var(--line);border-radius:var(--r1);padding:12px 16px;margin:16px 0;color:var(--ink)}
.box ul,.warn ul{padding-left:1.4em;margin:8px 0 0}
/* 状態：確認済みは札にしない（灰の文字だけ）。未確認は琥珀＋三角＋文字 */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.3;white-space:nowrap;vertical-align:middle}
.badge.ok{color:var(--muted)}
.badge.unv{font-weight:700;padding:2px 8px;border-radius:var(--r3);color:var(--amber);background:var(--amber-t)}
.badge.unv::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--tri) center/contain no-repeat;mask:var(--tri) center/contain no-repeat}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r1);background:var(--bg)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tr:last-child>th,tr:last-child>td{border-bottom:0}
th{background:var(--tint);color:var(--sumi);font-weight:700;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.num{color:var(--sumi)}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]::after{content:" ⇅";color:var(--muted);font-size:.8em}
th[aria-sort=ascending]::after{content:" ▲"}th[aria-sort=descending]::after{content:" ▼"}
.filters{display:flex;flex-wrap:wrap;gap:8px 16px;margin:16px 0;align-items:center}
input,select,button,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:max(16px,1rem);padding:8px 12px;min-height:44px;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--bg)}
input[type=radio],input[type=checkbox]{min-height:0;width:18px;height:18px;padding:0}
button{cursor:pointer;min-height:44px;padding:0 16px;border:0;border-radius:var(--r2);background:var(--navy);color:var(--bg);font-weight:700}
button:hover{background:var(--navy-d)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--r1);padding:16px 18px;text-decoration:none;color:var(--ink)}
a.card:hover{border-color:var(--navy);box-shadow:var(--sh)}
.card strong{display:block;color:var(--navy)}
dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px}dl.kv dt{color:var(--muted)}dl.kv dd{margin:0}
details>summary{cursor:pointer}

@media (max-width:600px){
  th,td{padding:6px 8px}
  table{font-size:14px}
  .filters label{display:inline-flex;align-items:center;gap:6px;min-height:44px}

}

/* ===== トップ（DESIGN.md 4.1・4.2。見本 docs/design/mock-c3/index.html） ===== */
/* 住んでいる府県ごとの中身：選んだ区分だけ見せる（JS が html[data-res] を切り替える。JS なしは大阪府） */
[data-r]{display:none}
html[data-res=osaka] [data-r=osaka],html[data-res=hyogo] [data-r=hyogo],html[data-res=kyoto] [data-r=kyoto],html[data-res=nara] [data-r=nara]{display:contents}
.pc,.pc-i,.pc-f{display:none}
@media (min-width:960px){.pc,.pc-i{display:inline}.pc-f{display:inline-flex}}
@media (max-width:959px){.pc-f{display:none!important}}
.res-now{font-weight:700}
.yen.big{font-size:34px;font-weight:700;color:var(--sumi);letter-spacing:-.01em;line-height:1}
.yen.strong{font-weight:700;color:var(--sumi)}
.st{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1.3;padding:3px 8px;border-radius:var(--r3);font-weight:700;vertical-align:middle}
.st .ic{width:13px;height:13px}
.st-unv{color:var(--amber);background:var(--amber-t)}
.lnk{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none}
.lnk:hover{text-decoration:underline}
.lnk.sm{font-size:14px;min-height:44px}
.sec{padding:40px 0}
@media (min-width:768px){.sec{padding:64px 0}}
.sec.tint{background:var(--tint)}
.sec-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 24px;margin-bottom:20px}
.sec-h h2{display:flex;align-items:center;gap:12px;margin:0}
.lead{font-size:14px;color:var(--muted);margin:6px 0 0}
@media (min-width:768px){.lead{font-size:15px}}
.order{font-size:13px;color:var(--muted);margin:12px 0 0}

/* ---- ヒーロー：写真を際立たせ、推したい言葉にマーカー。1200px 未満は写真の下の部分に見出しを重ね、重なる所だけ下からフェード。1200px 以上は写真の右の空に文字と検索 ---- */
.hero{position:relative;background:var(--tint)}
.hero-ph{border-radius:0}
.hero-ph img{aspect-ratio:750/360;object-fit:cover;object-position:30% 30%}
/* 1200px 未満：見出しを写真の下の部分（下 36%）に重ねる。フェードは重なる所（下 42%）だけで、写真の上半分ははっきり見せる */
.hero-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(242,246,250,0),rgba(242,246,250,.72) 30%,rgba(242,246,250,.92) 62%,var(--tint))}
.hero-ph .ph-cap{top:8px;bottom:auto;z-index:1}
.hero-in{position:relative;margin-top:-17.3vw;padding-bottom:8px}
.hero-h{font-size:min(21px,5.3vw);line-height:1.5;letter-spacing:.03em;margin:0}
/* マーカー：推したい言葉の文字の高さ全体に、蛍光ペンで引いたような帯。見出しは青 --mk-h（紺と同じ系統）、その下の府県名・校数・金額はローズ --mk（紺の色相から黄金角 137.5° 回した色。未確認の琥珀と分ける）。端は少し斜め */
.mk{--mk-c:var(--mk);color:inherit;background:linear-gradient(98deg,transparent .08em,var(--mk-c) .22em,var(--mk-c) calc(100% - .2em),transparent calc(100% - .06em));padding:.08em .22em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-h .mk{--mk-c:var(--mk-h)}
.mk-num{padding:.1em .18em .04em;margin-left:-.18em}
.fact{margin:6px 0 0;font-size:14px;line-height:1.5}
.fact mark.mk{white-space:nowrap}
.fact-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:2px}
.fact-u{display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.ph-note{font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap}
.pc-note{display:none}
@media (min-width:1200px){.sp-note{display:none}.pc-note{display:inline}}
.fact-s{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:6px 0 0;font-size:12px;color:var(--muted)}
.fact-s .st{white-space:normal}
/* 768px 未満は京都の注を出さない（府県名の行に「（所得基準未満）」があるので意味は落ちない） */
@media (max-width:767px){.fact-s{margin:0}.fact-s .st{margin-top:4px}.fact-s .note{display:none}}
.hero-panel{margin-top:8px;background:var(--bg);border-radius:var(--r1);box-shadow:var(--sh);padding:8px 12px;display:grid;gap:6px}
.hero-panel .lnk{justify-self:center}
.hero-panel .seg legend{font-size:12px;margin-bottom:4px}
/* 768〜1199px：写真は 3:1 で上に置き、見出しを下 36% に重ねる。960px 以上は検索の面を右に並べて、最初の画面に入れる */
@media (min-width:768px){.hero-ph img{aspect-ratio:1280/427;object-position:0% 45%}.hero-in{margin-top:-8vw}}
@media (min-width:960px){.hero-in{margin-top:-112px}}
@media (min-width:960px) and (max-width:1199px){
  .hero-in{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0 32px;align-items:start;padding-bottom:24px}
  .hero-panel{margin-top:0}
}
@media (min-width:1200px){
  .hero{background:var(--bg)}
  .hero-ph{position:absolute;inset:0;overflow:hidden}
  .hero-ph picture,.hero-ph img{height:100%}
  .hero-ph img{aspect-ratio:auto;object-position:0% 40%}
  /* 白いぼかしは右側に薄くだけ。読みやすさはマーカーと、小さい文字の白い帯で取る */
  .hero-ph::after{top:0;height:auto;left:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4) 30%,rgba(255,255,255,.5))}
  .hero-ph .ph-cap{top:auto;bottom:12px;right:12px}
  .hero-in{margin-top:0;min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) 560px;align-content:center;padding-top:48px;padding-bottom:48px}
  .hero-t,.hero-panel{grid-column:2}
  /* 写真の上に乗る小さい灰の文字は、白い帯の上に置いて 4.5:1 以上にする */
  .fact-s .pc-i,.fact-s .pc-note,.fact-s .note{background:rgba(255,255,255,.92);padding:2px 8px;border-radius:var(--r3)}
}
@media (min-width:960px){
  .hero-h{font-size:40px;line-height:1.35}
  .fact{font-size:17px;margin-top:16px}
  .yen.big{font-size:52px}
  .hero-panel{margin-top:22px;padding:18px 20px 8px;gap:12px 16px}
  .hero-panel .seg legend{font-size:13px}
}
/* 学校名で探す：入力欄と「探す」ボタンを一体に。候補は影つき・金額つき */
.find{position:relative}
.find-l{display:block;font-size:12px;font-weight:700;margin-bottom:4px}
@media (min-width:960px){.find-l{font-size:13px;margin-bottom:6px}}
.find-in{display:flex;border:1px solid var(--line-2);border-radius:var(--r2);background:var(--bg);overflow:hidden}
.find-in:focus-within{outline:3px solid var(--navy);outline-offset:0;border-color:var(--navy)}
.find input{flex:1;min-width:0;min-height:48px;padding:8px 12px;border:0;border-radius:0;background:none;outline:0}
.find input::placeholder{color:var(--muted)}
.find-b{min-height:48px;min-width:72px;padding:0 16px;border-radius:0}
.sug{position:absolute;left:0;right:0;z-index:5;margin:4px 0 0;padding:0;list-style:none;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r2);box-shadow:var(--sh);overflow:hidden}
.sug a{display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:48px;padding:4px 14px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.sug li:first-child a{border-top:0}
.sug a:hover,.sug a:focus{background:var(--tint)}
.sug-n{color:var(--navy);font-weight:700}
.sug-n small{margin-left:6px;font-size:12px;font-weight:400;color:var(--muted)}
.sug-v{display:inline-flex;gap:4px;align-items:center;font-weight:700;color:var(--sumi)}
.sug-v .ic{color:var(--amber)}
.qhint{margin:0;font-size:12px;color:var(--muted)}
.qhint:empty{display:none}

/* ---- エリアから探す ---- */
.names{padding-top:20px}
@media (min-width:768px){.names{padding-top:28px}}
@media (max-width:767px){.names{padding-top:8px}.names .tabs{margin-bottom:8px}}
@media (max-width:959px){.names .sec-h{margin-bottom:8px}.names .sec-h h2 .ib{display:none}.sec-h h2 .ib{width:32px;height:32px}.sec-h h2 .ib .ic{width:18px;height:18px}}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-bottom:2px solid var(--navy);margin-bottom:16px}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;padding:4px;border:1px solid var(--line);border-bottom:0;border-radius:var(--r2) var(--r2) 0 0;background:var(--tint);color:var(--muted);font-weight:700;font-size:15px;line-height:1.25}
.tabs button span{font-size:12px;font-weight:400}
.tabs button:hover{background:var(--tint);color:var(--navy)}
.tabs button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:var(--bg)}
@media (min-width:768px){.tabs button{flex-direction:row;gap:8px;font-size:16px}}
.areas{display:grid;gap:8px}
@media (min-width:960px){.areas{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}}
.area{background:var(--bg);border:1px solid var(--line);border-radius:var(--r1);overflow:hidden}
.area>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px;background:var(--tint);list-style:none;border-bottom:1px solid var(--line)}
.area>summary::-webkit-details-marker{display:none}
.area:not([open])>summary{border-bottom:0}
.area-h{flex:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.area-h b{font-size:17px;color:var(--sumi)}
.area-h span{font-size:12px;color:var(--muted)}
.area-n{font-size:13px;font-weight:700;color:var(--navy)}
.area>summary .ic{color:var(--navy)}
.area[open]>summary .ic{transform:rotate(180deg)}
@media (min-width:960px){.area>summary{pointer-events:none}.area>summary .ic{display:none}}
.index-body,.other-l{list-style:none;margin:0;padding:0}
.index-body:not(.is-open) .is-more,.index-body:not(.is-open) .is-more-sm{display:none}
@media (min-width:960px){.index-body:not(.is-open) .is-more-sm{display:list-item}.area-more.sp-only{display:none}}
.ar a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;min-height:44px;padding:4px 14px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.index-body li:first-child a,.other-l li:first-child a{border-top:0}
.ar a:hover{background:var(--tint)}
.ar a:hover .nm{text-decoration:underline}
.nm{font-size:14px;font-weight:700;color:var(--navy);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm small.ct{margin-left:6px;font-size:12px;color:var(--muted);font-weight:400}
@media (min-width:960px){.area .nm{white-space:normal;line-height:1.3}.area .nm small.ct{display:block;margin:1px 0 0}}
.am{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:700;color:var(--sumi);white-space:nowrap}
.am-f{display:inline-flex;align-items:center;padding:3px 4px;border-radius:var(--r3);color:var(--amber);background:var(--amber-t)}
.am-f .ic{width:12px;height:12px}
.area-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--navy);font-weight:700;font-size:14px}
.area-more:hover{background:var(--tint)}
.area-more[aria-expanded=true] .ic{transform:rotate(180deg)}
.other-l{background:var(--bg);border:1px solid var(--line);border-radius:var(--r1);max-width:480px;margin-bottom:8px;overflow:hidden}

/* ---- 払う額の出し方（5段の式。番号と紺の濃淡だけ、色分けしない） ---- */
.eqs{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.eq{position:relative;display:grid;grid-template-columns:28px 1fr auto;grid-template-areas:"n h v" "n t v";gap:0 10px;align-items:center;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r1)}
.eq-n{grid-area:n;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--n100);color:var(--navy);font-weight:700;font-size:13px}
.eq-h{grid-area:h;font-size:15px;color:var(--sumi);line-height:1.4}
.eq-t{grid-area:t;font-size:12px;color:var(--muted);line-height:1.4}
.eq-v{grid-area:v;font-size:17px;font-weight:700;white-space:nowrap;color:var(--sumi)}
/* 府県の支援は斜線、学校負担は点（図の凡例と同じ模様） */
.eq-pref{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(30,78,121,.06) 6px 7px)}
.eq-sb{background-image:radial-gradient(rgba(30,78,121,.14) 1px,transparent 1.3px);background-size:7px 7px}
.eq-pay{background:var(--navy);border-color:var(--navy)}
.eq-pay .eq-h,.eq-pay .eq-v,.eq-pay .eq-v .yen{color:var(--bg)}
.eq-pay .eq-t{color:var(--n200)}
.eq-pay .eq-n{background:var(--bg)}
.eq-pay .eq-v .yen.strong{font-size:24px}
.op{justify-self:center;font-size:20px;font-weight:700;color:var(--navy);line-height:1;height:16px;display:grid;place-items:center}
.eq-note{font-size:13px;color:var(--muted);margin:14px 0 20px}
@media (min-width:960px){
  .eqs{grid-template-columns:minmax(0,1.15fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1.15fr);gap:0;align-items:stretch}
  .eq{grid-template-columns:1fr;grid-template-areas:"n" "h" "t" "v";align-content:start;gap:4px;padding:18px 16px}
  .eq-v{margin-top:10px;font-size:20px}
  .op{height:auto;font-size:26px}
}

/* ---- 府県をまたいで通う場合（地図と横棒） ---- */
.cross-in{display:grid;gap:24px}
.cross-t h2{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.cross-t>p{font-size:15px;margin:0}
.cross-map{max-width:240px;margin:16px auto 0}
.kmap{width:100%;height:auto;display:block}
.kmap .nb{fill:var(--grey);stroke:var(--line);stroke-width:1}
.kmap .pf{fill:var(--bg);stroke:var(--muted);stroke-width:1.2;cursor:pointer}
.kmap .pf:hover{fill:var(--n100)}
html[data-res=osaka] .pf-osaka,html[data-res=hyogo] .pf-hyogo,html[data-res=kyoto] .pf-kyoto,html[data-res=nara] .pf-nara{fill:var(--navy);stroke:var(--navy)}
.kmap .pl{font-family:var(--f);font-size:16px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round;cursor:pointer}
html[data-res=osaka] .pl-osaka,html[data-res=hyogo] .pl-hyogo,html[data-res=kyoto] .pl-kyoto,html[data-res=nara] .pl-nara{fill:var(--navy)}
.map-c{font-size:12px;color:var(--muted);margin:4px 0 0}
@media (min-width:960px){
  .cross-in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center}
  .cross-t{display:grid;grid-template-columns:1fr 240px;gap:0 24px}
  .cross-t h2,.cross-t>p{grid-column:1}
  .cross-map{grid-column:2;grid-row:1/3;margin:0}
}
.xb{margin:0;padding:20px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r1)}
.xb figcaption{display:flex;flex-direction:column;font-size:13px;color:var(--muted);margin-bottom:10px}
.xb figcaption b{font-size:16px;color:var(--sumi)}
.xb ul{list-style:none;margin:0;padding:0}
.xb li{display:grid;grid-template-columns:84px minmax(0,1fr) 104px;gap:10px;align-items:center;min-height:48px;padding:6px 0;border-top:1px solid var(--line);cursor:pointer}
.xb-l{font-size:14px;font-weight:700;line-height:1.25}
.xb-l small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.xb-bar{height:12px;border-radius:var(--r3);background:var(--grey)}
.xb-bar>span{display:block;height:100%;width:calc(100% * var(--w));border-radius:var(--r3);background:var(--n200)}
.xb-v{display:inline-flex;justify-content:flex-end;gap:4px;align-items:center;font-size:15px}
html[data-res=osaka] .xb-osaka,html[data-res=hyogo] .xb-hyogo,html[data-res=kyoto] .xb-kyoto,html[data-res=nara] .xb-nara{color:var(--navy)}
html[data-res=osaka] .xb-osaka .xb-bar>span,html[data-res=hyogo] .xb-hyogo .xb-bar>span,html[data-res=kyoto] .xb-kyoto .xb-bar>span,html[data-res=nara] .xb-nara .xb-bar>span{background:var(--navy)}
.xb-n{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);margin:10px 0 0}
.xb-n .st{white-space:nowrap}

/* ---- 信頼できる情報のために（4枚のカード） ---- */
.t4{display:grid;gap:12px;list-style:none;margin:0;padding:0}
@media (min-width:640px){.t4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.t4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.t4 .card{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;align-content:start}
.t4 .card .ib{grid-row:1/4}
.t4 h3{font-size:16px;align-self:center;margin:0}
.t4 p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}
.t4 .lnk{min-height:44px}

/* ===== 府県の一覧（DESIGN.md 4.3。見本 docs/design/mock-c3/osaka.html） ===== */
/* ページの頭（淡い面・PC は右に写真） */
.phead{background:var(--tint);border-bottom:1px solid var(--line)}
.phead-ph{border-radius:0}
.phead-ph img{aspect-ratio:3/1;object-fit:cover}
.phead-in{padding-top:4px;padding-bottom:24px}
.phead h1{margin:0}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;color:var(--muted);min-height:44px}
.crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.crumb .ic{width:12px;height:12px}
.h1s{display:block;font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:4px;line-height:1.6}
@media (min-width:960px){
  .phead.with-ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .phead.with-ph .phead-ph{order:2}
  .phead.with-ph .phead-ph picture,.phead.with-ph .phead-ph img{height:100%}
  .phead.with-ph .phead-ph img{aspect-ratio:auto;min-height:300px}
  .phead.with-ph .phead-in{max-width:none;margin:0 0 0 max(0px,calc((100vw - 1200px)/2));padding:16px 40px 32px 32px;align-self:center}
}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0;list-style:none}
.kpi li{background:var(--bg);border:1px solid var(--line);border-radius:var(--r1);padding:8px 10px;display:flex;flex-direction:column}
@media (min-width:768px){.kpi li{padding:10px 12px}}
.kpi li>span{font-size:12px;color:var(--muted);line-height:1.4}
.kpi b{font-size:20px;color:var(--sumi);font-variant-numeric:tabular-nums;line-height:1.3;margin-top:2px}
.kpi b small{font-size:12px}
@media (max-width:767px){.kpi b{font-size:18px}}
@media (min-width:768px){.kpi b{font-size:26px}}
.phead-s{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted);margin:12px 0 0}
.phead-s .st{white-space:normal}

/* 分布（5万円ごと。点線が中央値） */
.dist{margin:24px 0 0;padding:16px;border:1px solid var(--line);border-radius:var(--r1)}
.dist figcaption{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;font-size:13px;color:var(--muted);margin-bottom:6px}
.dist figcaption b{font-size:15px;color:var(--sumi)}
.h-lg{display:none}
@media (min-width:768px){.h-sm{display:none}.h-lg{display:block}}
.hist{width:100%;height:auto;overflow:visible;display:block}
.hist rect{fill:var(--n200)}
.hist rect.hl{fill:var(--navy)}
.hist .axis{stroke:var(--line-2)}
.hist .med{stroke:var(--sumi);stroke-width:1.5;stroke-dasharray:3 3}
.hist text{font-family:var(--f);font-size:12px;fill:var(--muted)}
.hist .medl{fill:var(--sumi);font-weight:700}
.hist .cnt{text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.hist .medl{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
/* PC は左に説明 240px・右に図 720px まで（DESIGN.md 7章） */
@media (min-width:960px){.os-dist{display:grid;grid-template-columns:240px minmax(0,720px);gap:24px;align-items:center}.os-dist figcaption{flex-direction:column}}

/* 道具の面：住んでいる府県・並べ替え・絞り込み */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:16px}
.toolbar .seg{min-width:0;flex:1 1 100%}
@media (min-width:768px){.toolbar{gap:12px 24px;margin-top:24px;padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r1)}.toolbar .seg{flex:0 1 auto;min-width:min(100%,300px)}}
.seg-lg{display:block;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--ink)}
.sorter .seg-in{grid-auto-columns:auto}
.sorter .seg-in button{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;border:0;border-radius:var(--r2);background:none;color:var(--muted);font-size:15px;font-weight:700;white-space:nowrap}
.sorter .seg-in button:hover{color:var(--navy);background:none}
.sorter .seg-in button[aria-pressed=true]{background:var(--navy);color:var(--bg)}
.filt-d{flex-basis:100%}
.filt-d>summary{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--navy);list-style:none}
.filt-d>summary::-webkit-details-marker{display:none}
@media (min-width:768px){.filt-d>summary{display:none}}
.filt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.filt .seg-lg{margin:0 4px 0 0}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;line-height:1.35;border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:700;color:var(--ink);background:var(--bg)}
.chip input:checked+span{border-color:var(--navy);background:var(--n100);color:var(--navy)}
.chip input:focus-visible+span{outline:3px solid var(--navy);outline-offset:2px}
.chk{display:inline-flex;gap:8px;align-items:center;min-height:44px;font-size:14px}
.chk input{width:20px;height:20px}
.lq input{width:13em}
.count{margin:0;flex-basis:100%}

/* 表（PC）／行ごとのカード（スマホ） */
.tbl-box{margin-top:8px;border:1px solid var(--line);border-radius:var(--r1);overflow:hidden;background:var(--bg)}
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;vertical-align:middle;padding:10px 12px;border-bottom:1px solid var(--line);white-space:normal}
.tbl td,.tbl .r{text-align:right}
.tbl thead th{font-size:12px;color:var(--muted);font-weight:700;background:var(--tint);vertical-align:bottom}
.tbl thead th small{display:block;font-weight:400}
.tbl tbody th{background:none;font-weight:400}
.list .c-n{text-align:left}
.list .c-n a{font-weight:700}
.meta{display:block;font-size:12px;color:var(--muted);font-weight:400}
.list .c-s{text-align:left;white-space:nowrap}
.list .c-s .st{margin-left:4px}
.list .c-bar{width:160px}
.list .c-b{font-size:16px}
.list tr.row{position:relative}
.list tr.row:hover{background:var(--tint)}
.list tr.row:hover .c-n a{text-decoration-thickness:2px}
.list .c-n a::after{content:"";position:absolute;inset:0}
.list .c-s .src-lbl{z-index:1}
.list .c-sup{color:var(--muted)}
@media (max-width:767px){
  .tbl-box{border:0;border-radius:0;background:none;overflow:visible}
  .list thead{display:none}
  .list tbody{display:block}
  .list tr.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:12px 14px;margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r1)}
  .list tr.row[hidden]{display:none}
  .list tr.row>*{border:0;padding:0}
  .list .c-n{grid-column:1}
  .list .c-b{grid-column:2;grid-row:1;font-size:18px}
  .list .c-fee,.list .c-sup{display:none}
  .list .c-bar{grid-column:1/-1;width:auto}
  .list .c-s{grid-column:1/-1;white-space:normal;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
}
.key2{font-size:12px;color:var(--muted);margin:8px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 小さな引き算の棒：国（淡い紺）→ 府県（斜線）→ 学校負担（点）→ 払う額（墨） */
.bd-bar{display:flex;height:32px;border-radius:var(--r2);overflow:hidden;background:var(--grey);gap:2px}
.bd.sm .bd-bar{height:10px;border-radius:var(--r3);gap:1px}
.s-nat,.s-sup{background:var(--n200)}
.s-pref{background:repeating-linear-gradient(135deg,var(--n100) 0 4px,var(--n200) 4px 6px)}
.s-sb{background:radial-gradient(var(--navy) .9px,transparent 1.2px) 0 0/5px 5px,var(--n100)}
.s-pay{background:var(--ink)}
.bd.sm .s-pref,.bd.sm .s-sb{background:var(--n200)}
.sw{display:inline-block;width:16px;height:12px;border-radius:var(--r3);vertical-align:-1px;margin-right:6px}
/* 計算の前提（閉じておく） */
.acc{margin-top:24px;border:1px solid var(--line);border-radius:var(--r1);padding:0 16px}
.acc summary{min-height:52px;padding:4px 0;display:flex;align-items:center;justify-content:space-between;color:var(--navy);font-weight:700;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc[open] summary .ic{transform:rotate(180deg)}
.acc ul{list-style:disc;padding:0 0 16px 1.2em;margin:0;font-size:14px}
.dist-n{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin:8px 0 0;font-size:13px;color:var(--amber)}
.dist-n .st{white-space:nowrap}
@media (min-width:960px){.os-dist .dist-n{grid-column:1/-1}}
ul.oop a{display:inline-flex;align-items:center;min-height:44px}

/* ===== 学校のページ（DESIGN.md 4.4。見本 docs/design/mock-c3/school.html）。写真は置かない ===== */
.sc-head{padding-bottom:20px}
.sc-head h1{margin:0}
.facts{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;font-size:14px;color:var(--muted);margin:8px 0 0}
.facts>span{display:inline-flex;gap:5px;align-items:center}
.facts .ic{width:14px;height:14px}
.facts .st{font-size:12px}
.sc{display:grid;gap:32px;padding-top:24px;padding-bottom:48px}
@media (min-width:960px){.sc{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;padding-top:32px}}
.sc-a{min-width:0}
/* 答えのカード：府県の選択・大きな金額・未確認はすぐ下・引き算の棒 */
.ans-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r1);box-shadow:var(--sh);padding:16px}
@media (min-width:768px){.ans-card{padding:28px}}
.ans-card .seg{max-width:440px}
.ans-l{font-size:15px;font-weight:400;color:var(--ink);margin:14px 0 0;line-height:1.5;letter-spacing:0}
.ans-l .res-now{font-weight:700}
.ans-v{margin:2px 0 0}
.ans-v .yen.big{font-size:44px}
@media (min-width:768px){.ans-v .yen.big{font-size:56px}}
.ans-u{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:6px 0 0}
.ans-u:not(:has(.st)){display:none}
.ans-u .st{white-space:normal;font-size:13px;font-weight:400;line-height:1.5;align-items:flex-start}
.ans-u .st b{margin-right:4px;white-space:nowrap}
.ans-u .st .ic{margin-top:3px;flex:none}
.ans-s{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:13px;color:var(--muted);margin:6px 0 0}
.bd{margin-top:16px}
.bd-top{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);margin:0 0 6px}
.bd-top .yen{color:var(--ink);font-weight:700}
.bd-leg{display:grid;margin:10px 0 0;padding:0;list-style:none;font-size:14px}
.bd-leg li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;min-height:34px;padding:4px 0;border-top:1px solid var(--line)}
.bd-leg .l-pay{border-top:2px solid var(--sumi);font-weight:700}
.bd-leg .sw{margin:0}
.sw.s-nat,.sw.s-pref,.sw.s-sb{border:1px solid var(--n200)}
/* 本文のかたまり */
.blk{margin-top:40px}
.blk>h2{display:flex;align-items:center;gap:8px;font-size:20px;margin:0 0 12px}
.blk>h2 .ic{width:20px;height:20px;color:var(--navy)}
.calc th,.fee th{font-weight:400}
.calc th .ic,.fee th .ic{margin-right:8px;color:var(--muted);vertical-align:-2px}
.calc td,.fee td{text-align:right;white-space:nowrap}
.calc .k-fee th{font-weight:700}
.calc .meta,.fee .meta{margin-top:2px}
.calc .k-total th,.calc .k-total td{border-top:2px solid var(--sumi);border-bottom:0;font-weight:700;font-size:17px}
.calc .k-total .yen.strong{font-size:22px}
.calc-n{margin:10px 0 0;padding:0 0 0 1.2em;font-size:14px;color:var(--muted);line-height:1.65}
.srcs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.dist.plain{border:0;padding:4px 0;margin:8px 0 0}
.dist.plain .note{margin:6px 0 0}
@media (min-width:960px){.dist.plain{max-width:720px}}
/* 住んでいる府県で変わる額（6区分） */
.xchart{display:grid;margin:8px 0 0;padding:0;list-style:none}
.xchart li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "b b" "n n";gap:4px 8px;padding:10px 0;border-bottom:1px solid var(--line)}
@media (min-width:768px){.xchart li{grid-template-columns:250px minmax(0,1fr) 130px;grid-template-areas:"l b v" ". n n";align-items:center}}
.x-l{grid-area:l;font-size:14px}
.x-v{grid-area:v;display:inline-flex;justify-content:flex-end;gap:4px;align-items:center}
.x-bar{grid-area:b;display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;background:var(--grey)}
.x-n{grid-area:n}
.x-n .st{white-space:normal}
.fee .k-sub th{padding-left:36px;font-size:14px}
.fee .k-total th,.fee .k-total td{font-weight:700;border-top:2px solid var(--sumi);border-bottom:0}
/* 右の列（PC）／下（スマホ） */
.sc-b{display:grid;gap:16px;align-content:start;font-size:14px;min-width:0}
.sc-b .h3{display:flex;gap:8px;align-items:center;font-size:16px;margin:0 0 10px}
.srclist{display:grid;gap:12px;margin:0;padding-left:1.2em;list-style:decimal}
.srclist a{display:block;padding:12px 0;margin:-12px 0;overflow-wrap:anywhere}
.srclist .meta{margin-top:2px}
.card-link{display:grid;grid-template-columns:40px 1fr 16px;gap:12px;align-items:center;min-height:44px}
.card-link:hover{border-color:var(--navy)}
.card-link b{display:block;color:var(--navy)}
.card-link>.ic{color:var(--navy)}
.video button{display:flex;gap:8px;align-items:center;min-height:44px;padding:8px 0;border:0;background:none;color:var(--navy);text-decoration:underline;cursor:pointer;text-align:left}
.ans-rs{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.ans-rs:not(:has(.ans-r)){display:none}
.srclist .meta .st{margin-right:4px;white-space:nowrap}

/* ===== 試算（DESIGN.md 4.5。見本 docs/design/mock-c3/calc.html） ===== */
.calc-in{display:grid;gap:20px;margin-top:24px;padding-bottom:16px}
@media (min-width:960px){.calc-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start;margin-top:32px}}
.calc-form{display:grid;gap:20px;min-width:0}
.q{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.q-n{display:grid;place-items:center;width:28px;height:28px;margin:2px 0 0;border-radius:50%;background:var(--navy);color:var(--bg);font-weight:700;font-size:14px}
.q-sub{margin:0 0 0 40px;padding:0;border:0;min-width:0}
.q-sub[hidden]{display:none}
.q-sub .note{font-size:13px;margin:8px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.sel{position:relative}
.sel select{width:100%;min-height:48px;padding:8px 40px 8px 12px;appearance:none;font-weight:700}
.sel .ic{position:absolute;right:14px;top:16px;pointer-events:none;color:var(--navy)}
.q .note{font-size:13px;margin:6px 0 0}
.calc-nt{margin:0;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.res-card{box-shadow:var(--sh);padding:16px;min-width:0;scroll-margin-top:8px}
@media (min-width:768px){.res-card{padding:28px}.res-card .yen.big{font-size:56px}}
.res-card .ans-l{margin-top:0;font-weight:700}
.res-card .ans-v .yen.big{font-size:44px}
@media (min-width:768px){.res-card .ans-v .yen.big{font-size:56px}}
#r-who{scroll-margin-top:12px}
.res-card .bd[hidden]{display:none}
.res-card .calc{margin-top:12px}
.res-card .calc .sw{margin-right:8px}
.res-card .calc-n:empty{display:none}
.res-ft{margin:8px 0 0}
.calc-acc{margin-bottom:40px}
.res-h{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin:0 0 6px}
/* スマホ：375×812 で、結果の大きな金額まで最初の画面に入れる（余白だけを詰める） */
@media (max-width:767px){
  .calc-page .phead-in{padding-bottom:14px}
  .calc-in{margin-top:12px;gap:12px}
  .calc-form{gap:14px;padding:14px 16px}
  .calc-form .seg legend,.calc-form .seg-lg{margin-bottom:4px}
  .res-card{padding:14px 16px}
}
.bd-sub{margin:-2px 0 6px;font-size:12px;color:var(--muted)}
.bd-sub:empty{display:none}