@charset "UTF-8";
/* Layout: 動画と同じ3Dイラストが主役。淡い水色に動画背景のようなドット、白いカードを重ねて奥行きを出す。
   文字はすべてメイリオ。動くのはロゴのコインだけ。 */
:root{
  /* color */
  --bg:#F4FAFE; --surface:#FFFFFF; --surface-2:#EEF6FC; --surface-3:#DCEDF8;
  --ink:#10283F; --ink-2:#435B71; --ink-3:#5A7186;
  --line:#D3E4F0; --line-2:#AFCBE0;
  --brand:#0880CE; --brand-ink:#075CA2; --link:#075CA2; --teal:#12BBB9; --teal-ink:#0A7775;
  --gold:#FCC246; --gold-ring:#E0A21F; --gold-soft:#FFF4D6; --gold-ink:#6E4A00; --gold-hi:#FFCC57;
  --sky:#72BBE7; --sky-soft:#E3F2FC;
  --btn2-face:#FFFFFF; --btn2-face-hi:#EEF7FD; --btn2-ring:#A3CFEE; --btn2-ink:#075CA2;
  --tint-sky:#E4F3FD; --tint-teal:#DDF5F3; --tint-gold:#FFF2D2; --tint-navy:#E4EBF6;
  --dot:rgba(8,128,206,.12); --stage:rgba(255,255,255,.85);
  --btn-blue:#075CA2; --btn-blue-fg:#FFFFFF; --on-gold:#10283F; --on-brand:#FFFFFF;
  --warn-bg:#FFF4DA; --warn-line:#EBC15E; --warn-ink:#5E3D00;
  --info-bg:#E8F5FD; --info-line:#A9D5F0;
  --bad-ink:#B3261E;
  --logo-stem:#0880CE; --logo-ai:#075CA2; --logo-mane:#12BBB9; --logo-sub:#075CA2; --logo-bar:#72BBE7;
  --logo-coin:#FCC246; --logo-ring:#E0A21F; --logo-yen:#FFFFFF;
  --s-blue:#0880CE; --s-gold:#B97F0B; --s-navy:#075CA2; --s-teal:#0E9593;
  --box1:#72BBE7; --box2:#12BBB9; --box3:#075CA2;
  --grid:#E3EEF6; --axis:#8EA7BB; --focus:#0880CE;
  --shadow:0 1px 2px rgba(16,40,63,.05),0 14px 34px -18px rgba(16,40,63,.32);
  --shadow-lg:0 2px 4px rgba(16,40,63,.05),0 24px 48px -22px rgba(16,40,63,.38);
  /* type: メイリオ（Windows）。ない端末では、近い見た目の角ゴシックで表示 */
  --f-display:"Meiryo","メイリオ","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  --f-body:"Meiryo","メイリオ","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  --f-num:"Meiryo","メイリオ","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  /* shape */
  --r-s:10px; --r-m:18px; --r-l:26px; --wrap:1140px; --hdr-h:68px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A1724; --surface:#0F2236; --surface-2:#132B44; --surface-3:#1A3756;
  --ink:#E5F0F8; --ink-2:#AFC4D6; --ink-3:#93AABF;
  --line:#21405E; --line-2:#335C82;
  --brand:#3AA6EE; --brand-ink:#86CBF6; --link:#8ECFF8; --teal:#2FD0CE; --teal-ink:#5BD9D6;
  --gold-soft:#33290F; --gold-ink:#FFD87A; --gold-hi:#FFD36E;
  --sky-soft:#13304A;
  --btn2-face:#14304B; --btn2-face-hi:#1A3B5C; --btn2-ring:#3F74A2; --btn2-ink:#8ECFF8;
  --tint-sky:#12304B; --tint-teal:#0F3436; --tint-gold:#352A12; --tint-navy:#172A47;
  --dot:rgba(142,207,248,.09); --stage:rgba(255,255,255,.07);
  --btn-blue:#8ECFF8; --btn-blue-fg:#062035; --on-brand:#062035;
  --warn-bg:#352A10; --warn-line:#8A6A1E; --warn-ink:#FFD98C;
  --info-bg:#112E47; --info-line:#2D5A80;
  --bad-ink:#FF9C8A;
  --logo-stem:#3AA6EE; --logo-ai:#FFFFFF; --logo-mane:#2FD0CE; --logo-sub:#D6E8F6; --logo-bar:#4C98C9;
  --s-blue:#3A97DE; --s-gold:#BE8A1A; --s-navy:#6A8CF0; --s-teal:#10A8A5;
  --box1:#72BBE7; --box2:#2FD0CE; --box3:#6A8CF0;
  --grid:#1C3854; --axis:#5E7C96; --focus:#8ECFF8;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 32px -20px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.75);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A1724; --surface:#0F2236; --surface-2:#132B44; --surface-3:#1A3756;
  --ink:#E5F0F8; --ink-2:#AFC4D6; --ink-3:#93AABF;
  --line:#21405E; --line-2:#335C82;
  --brand:#3AA6EE; --brand-ink:#86CBF6; --link:#8ECFF8; --teal:#2FD0CE; --teal-ink:#5BD9D6;
  --gold-soft:#33290F; --gold-ink:#FFD87A; --gold-hi:#FFD36E;
  --sky-soft:#13304A;
  --btn2-face:#14304B; --btn2-face-hi:#1A3B5C; --btn2-ring:#3F74A2; --btn2-ink:#8ECFF8;
  --tint-sky:#12304B; --tint-teal:#0F3436; --tint-gold:#352A12; --tint-navy:#172A47;
  --dot:rgba(142,207,248,.09); --stage:rgba(255,255,255,.07);
  --btn-blue:#8ECFF8; --btn-blue-fg:#062035; --on-brand:#062035;
  --warn-bg:#352A10; --warn-line:#8A6A1E; --warn-ink:#FFD98C;
  --info-bg:#112E47; --info-line:#2D5A80;
  --bad-ink:#FF9C8A;
  --logo-stem:#3AA6EE; --logo-ai:#FFFFFF; --logo-mane:#2FD0CE; --logo-sub:#D6E8F6; --logo-bar:#4C98C9;
  --s-blue:#3A97DE; --s-gold:#BE8A1A; --s-navy:#6A8CF0; --s-teal:#10A8A5;
  --box1:#72BBE7; --box2:#2FD0CE; --box3:#6A8CF0;
  --grid:#1C3854; --axis:#5E7C96; --focus:#8ECFF8;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 14px 32px -20px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.75);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* display を指定した部品（.field など）でも、hidden を付けたら確実に隠す */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.45;margin:0;text-wrap:balance;letter-spacing:.03em}
p,ul,ol,dl,figure{margin:0}
a{color:var(--link);text-underline-offset:3px}
img,svg{max-width:100%}
[id]{scroll-margin-top:calc(var(--hdr-h) + 16px)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:16px}
@media (min-width:760px){.wrap{padding-inline:28px}}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface);color:var(--link);padding:8px 14px;border-radius:8px;border:1px solid var(--line-2)}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}   /* 画面には出さず、読み上げだけ */
.note{font-size:13px;line-height:1.7;color:var(--ink-3)}
.hint{font-size:13px;line-height:1.65;color:var(--ink-3)}
.lbl{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--ink)}
.tbd{background:var(--warn-bg);border:1px dashed var(--warn-line);color:var(--warn-ink);border-radius:6px;padding:1px 7px;font-size:.92em;white-space:normal}

/* ---------- 3D illustrations (images are defined once as --im-* below) ---------- */
.ill{display:block;background-image:var(--im);background-position:center;background-size:contain;background-repeat:no-repeat}
.ill-hero{--im:var(--im-hero);aspect-ratio:1040/984}
.ill-boxes{--im:var(--im-boxes);aspect-ratio:640/420}
.ill-house{--im:var(--im-house);aspect-ratio:640/711}
.ill-invest{--im:var(--im-invest);aspect-ratio:640/580}
.ill-pension{--im:var(--im-pension);aspect-ratio:640/466}
.ill-umbrella{--im:var(--im-umbrella);aspect-ratio:640/701}
.ill-phone{--im:var(--im-phone);aspect-ratio:560/512}
.ill-calc{--im:var(--im-calc);aspect-ratio:560/518}
.ill-consult{--im:var(--im-consult);aspect-ratio:700/658}
.ill-duo{--im:var(--im-duo);aspect-ratio:640/727}
.ill-watch{--im:var(--im-watch);aspect-ratio:640/669}
.t-sky{--tint:var(--tint-sky)}.t-teal{--tint:var(--tint-teal)}.t-gold{--tint:var(--tint-gold)}.t-navy{--tint:var(--tint-navy)}
.dots{background-color:var(--tint-sky);background-image:radial-gradient(circle,var(--dot) 2.6px,transparent 3.1px),radial-gradient(circle,var(--dot) 2.6px,transparent 3.1px);background-size:46px 46px;background-position:0 0,23px 23px}

/* ---------- buttons ----------
   ボタンは2種類だけ。どちらもロゴのコインと同じ作り（面＋ふち＋下の厚み）で、押すと沈む。
   ・金のボタン .btn-coin ＝ 相談に進む（予約する・相談する・フォームの「次へ」）。相談のボタンには吹き出しのアイコン
   ・白のボタン .btn-sub  ＝ それ以外の操作（シミュレーション・一覧・戻る・追加・動画の例）
   アイコンで行き先を示す：吹き出し＝相談、電卓＝シミュレーション、矢印＝進む・戻る、リスト＝一覧、本＝解説を読む
   大きさは3段階：.btn-sm 40px ／ 標準 48px ／ .btn-lg 56px。並べるボタンは同じ大きさにそろえる。
   紺の塗りは「いま選んでいるもの」（タブ・チップ・選択肢）だけに使い、ボタンには使わない。 */
/* 文字とアイコンは1行の文章として並べる（inline-block）。ボタンの幅が足りず2行になっても、
   アイコンが文字から離れず、区切りは「〜を／予約する」のように言葉の切れ目（<wbr>）になる。
   高さ＝ふち2px×2＋1行分＋上下の余白。余白は大きさごとに計算して、40／48／56px ちょうどにする。 */
.btn{--face:var(--btn2-face);--face-hi:var(--btn2-face-hi);--ring:var(--btn2-ring);--edge:4px;
  display:inline-block;vertical-align:middle;min-height:48px;padding:calc((48px - 4px - 1.35em) / 2) 1.5em;
  border-radius:999px;border:2px solid var(--ring);background:var(--face);color:var(--btn2-ink);box-shadow:0 var(--edge) 0 var(--ring);
  font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.35;letter-spacing:.04em;text-align:center;text-decoration:none;
  word-break:keep-all;overflow-wrap:break-word;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
.btn .ic{display:inline-block;width:1.25em;height:1.25em;margin-right:.45em;vertical-align:-.25em;stroke-width:2}
.btn .ic-end{margin-right:0;margin-left:.45em}
.btn .ic-back{transform:scaleX(-1)}
.btn-sub{--face:var(--btn2-face);--face-hi:var(--btn2-face-hi);--ring:var(--btn2-ring);color:var(--btn2-ink)}
.btn-coin{--face:var(--gold);--face-hi:var(--gold-hi);--ring:var(--gold-ring);color:var(--on-gold)}
.btn-sm{--edge:3px;min-height:40px;padding:calc((40px - 4px - 1.35em) / 2) 1.15em;font-size:14px;letter-spacing:.02em}
.btn-lg{min-height:56px;padding:calc((56px - 4px - 1.35em) / 2) 1.85em;font-size:17px}
@media (hover:hover){.btn:hover{background:var(--face-hi);transform:translateY(-1px);box-shadow:0 calc(var(--edge) + 1px) 0 var(--ring)}}
.btn:active{transform:translateY(calc(var(--edge) - 1px));box-shadow:0 1px 0 var(--ring)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:999px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;background:var(--face);box-shadow:0 2px 0 var(--ring)}
/* 文字のリンク（別のページや一覧へ進む）：文字＋丸い矢印。ボタンほど目立たせない「次の行き先」 */
.go{display:inline-block;max-width:100%;font-weight:700;font-size:15px;line-height:1.75;color:var(--link);text-decoration:none;word-break:keep-all;overflow-wrap:break-word;overflow-wrap:anywhere}
.go .ic{display:inline-block;width:26px;height:26px;margin-left:8px;padding:5px;vertical-align:calc(.38em - 13px);border-radius:50%;background:var(--sky-soft);color:var(--brand-ink);stroke-width:2.4;transition:transform .15s ease,background-color .15s ease,color .15s ease}
@media (hover:hover){.go:hover{text-decoration:underline;text-underline-offset:4px}.go:hover .ic{background:var(--brand);color:var(--on-brand);transform:translateX(2px)}}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:color .12s ease,border-color .12s ease}
.icon-btn .ic{width:20px;height:20px}
@media (hover:hover){.icon-btn:hover{color:var(--bad-ink);border-color:currentColor}}

/* ---------- header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:18px;min-height:var(--hdr-h)}
.site-logo{display:block;flex:none;line-height:0;border-radius:8px}
.site-logo svg{display:block;height:50px;width:auto}
.site-logo .dot{transform-box:fill-box;transform-origin:50% 50%}
.site-logo:hover .dot,.site-logo:focus-visible .dot{animation:coin-spin 1.1s ease-in-out}
@keyframes coin-spin{0%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.08)}50%{transform:scaleX(1)}}
.gnav{display:flex;align-items:center;gap:2px;margin-left:auto}
.gnav a{font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none;padding:7px 11px;border-radius:999px;white-space:nowrap}
.gnav a:hover{background:var(--surface-2)}
.gnav a[aria-current="page"]{color:var(--link);background:var(--sky-soft)}
.hdr-cta{flex:none}
.menu-btn{display:none;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer}
.mnav{border-top:1px solid var(--line);background:var(--surface)}
.mnav ul{list-style:none;margin:0;padding-block:10px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mnav a:not(.btn){display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700;background:var(--surface-2)}
.mnav a:not(.btn) .ic{color:var(--brand-ink)}
.mnav a:not(.btn)[aria-current="page"]{background:var(--sky-soft);color:var(--link)}
@media (max-width:1100px){.gnav{display:none}.menu-btn{display:inline-flex;margin-left:auto}}
@media (max-width:560px){.hdr-cta{display:none}.site-logo svg{height:44px}.hdr{gap:12px}}

/* ---------- hero ---------- */
.hero{padding-block:36px 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px 40px;align-items:center}
.hero-copy{display:grid;gap:20px;min-width:0}
.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.32;letter-spacing:.04em}
.hero h1 .em{color:var(--brand-ink)}
.lead{font-size:clamp(16px,1.5vw,18px);line-height:1.9;color:var(--ink-2);max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 12px}
@media (max-width:560px){.cta-row .btn{flex:1 1 100%}}
.hero-meta{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-2)}
.hero-meta li{display:flex;align-items:center;gap:6px}
.hero-meta .ic{color:var(--brand-ink);width:20px;height:20px}
.hero-art{position:relative;display:grid;place-items:center;min-width:0}
.hero-art::before{content:"";position:absolute;left:8%;right:8%;bottom:5%;height:26%;border-radius:50%;background:var(--stage)}
.hero-art .ill{position:relative;width:min(100%,540px)}
.eyebrow{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--teal-ink)}
.eyebrow::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2px var(--gold-ring);flex:none}
.hero-calc{position:relative;z-index:2;display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.35fr) minmax(0,auto);gap:12px 24px;align-items:center;margin-block:24px -64px;padding:20px 26px 16px;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow-lg)}
.hc-art{width:96px}
.hc-head{display:grid;gap:2px;min-width:0}
.hm-ep{font-size:12.5px;color:var(--teal-ink);font-weight:700;line-height:1.6}
.hm-title{font-size:20px;line-height:1.45}
.hm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hm-f{display:grid;gap:4px;font-size:13px;color:var(--ink-2);font-weight:700;min-width:0}
.hm-out{display:grid;justify-items:center;gap:0;text-align:center;min-width:0}
.hm-big{font-weight:700;font-size:clamp(30px,3.4vw,40px);line-height:1.2;color:var(--ink);white-space:nowrap}
.hm-sub{font-size:13px;color:var(--ink-2)}
.hm-out .btn{margin-top:8px}
.hc-note{grid-column:1 / -1;border-top:1px dashed var(--line);padding-top:8px}
@media (max-width:1040px){.hero-calc{grid-template-columns:84px minmax(0,1fr);}.hc-art{width:84px}.hm-grid{grid-column:1 / -1}.hm-out{grid-column:1 / -1}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art .ill{width:min(100%,440px)}.hero{padding-block:28px 0}}
@media (max-width:560px){.hero-calc{padding:16px;gap:10px 14px}.hm-grid{gap:8px}.hm-grid select{padding:8px 4px 8px 8px;font-size:15px}}
.after-hero{padding-top:112px}

/* ---------- sections ---------- */
.sec{padding-block:72px}
.sec-white{background:var(--surface)}
.sec-head{display:grid;gap:10px;margin-bottom:30px;max-width:48em}
.sec-head.with-art{max-width:none;grid-template-columns:minmax(0,1fr) 200px;align-items:end;gap:12px 24px}
.sh-text{display:grid;gap:10px;min-width:0}
.sh-art{width:200px;justify-self:end}
.sec-title{font-size:clamp(24px,3vw,34px);line-height:1.4}
.sec-lead{color:var(--ink-2);font-size:16px}
@media (max-width:640px){.sec{padding-block:52px}.after-hero{padding-top:96px}.sec-head.with-art{grid-template-columns:1fr}.sh-art{order:-1;width:150px;justify-self:center}}

/* video entry chips */
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ep-chip{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.55;transition:transform .15s}
.ep-chip:hover{transform:translateY(-2px)}
.ep-chip b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold);box-shadow:inset 0 0 0 2.5px var(--gold-ring);color:var(--on-gold);font-weight:700;font-size:15px}
.ep-chip b.loan{background:var(--sky-soft);box-shadow:inset 0 0 0 2px var(--sky);color:var(--brand-ink);font-size:13px}

/* consultation cards */
.consult-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.consult{display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.sec-white .consult{background:var(--bg)}
.consult-art{position:relative;height:220px;background:var(--tint)}
.consult-art .ill{position:absolute;inset:14px 14px 6px;aspect-ratio:auto}
.consult-body{display:flex;flex-direction:column;gap:14px;padding:22px 24px 24px;flex:1}
.consult h3{font-size:22px}
.consult-catch{font-weight:700;font-size:16.5px;color:var(--brand-ink)}
.ticks{list-style:none;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.65}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:15px;height:15px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2px var(--gold-ring)}
.modes{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.modes span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.consult .btn{align-self:stretch}
@media (max-width:900px){.consult-grid{grid-template-columns:1fr}.consult-art{height:190px}}

/* theme tiles */
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.theme{display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .15s,box-shadow .15s}
.theme:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.theme-art{position:relative;height:190px;background:var(--tint)}
.theme-art .ill{position:absolute;inset:14px;aspect-ratio:auto}
.theme-body{display:grid;gap:4px;padding:18px 22px 22px}
.t-name{font-weight:700;font-size:20px;line-height:1.45}
.t-desc{font-size:15px;color:var(--ink-2);line-height:1.6}
.t-tags{font-size:13px;color:var(--teal-ink);font-weight:700;line-height:1.6;padding-top:4px}
@media (max-width:900px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.theme-grid{grid-template-columns:1fr}.theme-art{height:170px}}

/* simulator cards */
.sim-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.simc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r-m);background:var(--bg);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .15s}
.simc:hover{transform:translateY(-2px)}
.simc-art{width:96px;height:88px}
.simc-text{display:grid;gap:3px;min-width:0}
.simc-ep{justify-self:start;font-size:12px;font-weight:700;padding:1px 9px;border-radius:999px;background:var(--gold-soft);color:var(--gold-ink)}
.simc-name{font-weight:700;font-size:17.5px;line-height:1.45}
.simc-desc{font-size:14px;color:var(--ink-2);line-height:1.6}
@media (max-width:900px){.sim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sim-grid{grid-template-columns:1fr}}

/* steps */
.flow-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px 36px;align-items:center}
.flow-art{width:100%;max-width:300px;justify-self:center}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.steps li{display:grid;gap:6px;align-content:start;padding:20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
.st-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2.5px var(--gold-ring);color:var(--on-gold);font-weight:700}
.steps h3{font-size:18px}
.steps p{font-size:14.5px;color:var(--ink-2);line-height:1.7}
.steps-cta{margin-top:30px;text-align:center}
@media (max-width:860px){.flow-grid{grid-template-columns:1fr}.flow-art{order:-1;max-width:200px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* faq */
.faq{max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:18px 44px 18px 0;font-weight:700;font-size:16.5px;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;border-right:2.5px solid var(--ink-2);border-bottom:2.5px solid var(--ink-2);transform:translateY(-75%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq .a{padding:0 0 20px;color:var(--ink-2);display:grid;gap:8px}

/* ---------- inner pages ---------- */
.page-head{padding-block:20px 30px;border-bottom:1px solid var(--line)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink-3);margin-bottom:10px}
.crumbs a{color:var(--link)}
.ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:16px 36px;align-items:center}
.ph-text{display:grid;gap:12px;min-width:0}
.ph-title{font-size:clamp(26px,3.8vw,40px);line-height:1.4}
.ph-art{width:100%;max-width:320px;max-height:260px;justify-self:center}
@media (max-width:720px){.ph{grid-template-columns:1fr}.ph-art{order:-1;max-width:220px;max-height:180px}}
.page-body{padding-block:36px 76px;display:grid;gap:52px}
.page-body.narrow{max-width:880px}
.topic{display:grid;gap:16px;min-width:0}
.topic h2{font-size:clamp(22px,2.8vw,28px)}
.topic > p{max-width:46em}
.topic-ep{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--teal-ink)}
.topic-ep .ic{width:18px;height:18px}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.point{display:grid;gap:6px;align-content:start;padding:18px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden}
.point h3{font-size:17px}
.point p{font-size:14.5px;color:var(--ink-2);line-height:1.75}
.point.b1,.point.b2,.point.b3{padding-top:24px}
.point.b1::before,.point.b2::before,.point.b3::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:var(--bx)}
.b1{--bx:var(--box1)}.b2{--bx:var(--box2)}.b3{--bx:var(--box3)}
.point .sub{font-size:13px;font-weight:700;color:var(--teal-ink)}
@media (max-width:820px){.points{grid-template-columns:1fr}}
.compare2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cmp{display:grid;gap:12px;align-content:start;padding:20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
.cmp h3{font-size:19px}
@media (max-width:720px){.compare2{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fact{display:grid;gap:4px;align-content:start;padding:18px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
.fact .k{font-size:13.5px;color:var(--ink-2);font-weight:700}
.fact .v{font-weight:700;font-size:30px;line-height:1.25;color:var(--ink)}
.fact .v small{font-size:16px;font-weight:700;margin-left:2px}
.fact .d{font-size:13.5px;color:var(--ink-3);line-height:1.6}
@media (max-width:820px){.facts{grid-template-columns:1fr}}
.switches{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:sw}
.switches li{counter-increment:sw;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;padding:18px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
.switches li::before{content:counter(sw);grid-row:1 / span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2.5px var(--gold-ring);color:var(--on-gold);font-weight:700}
.switches h3{font-size:17px}
.switches p{font-size:14.5px;color:var(--ink-2);line-height:1.75}
@media (max-width:820px){.switches{grid-template-columns:1fr}}
.tbl-scroll{overflow-x:auto;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
table.std{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px}
table.std th,table.std td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.std thead th{font-size:13px;color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
table.std tbody tr:last-child td,table.std tbody tr:last-child th{border-bottom:0}
table.std td.n{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qa{display:grid;gap:10px;align-content:start;padding:20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow);min-width:0}
.qa .tag{justify-self:start;font-size:12.5px;font-weight:700;padding:1px 9px;border-radius:999px;background:var(--sky-soft);color:var(--brand-ink)}
.qa h3{font-size:17px;line-height:1.55}
.qa p{font-size:14.5px;color:var(--ink-2);line-height:1.75}
.mini{display:grid;gap:10px;padding:14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.mini-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.mini-out{font-size:14.5px;line-height:1.7}
.mini-out b{font-size:20px;font-weight:700;color:var(--ink)}
@media (max-width:820px){.qa-grid{grid-template-columns:1fr}}
.cta-band{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px 26px;align-items:center;padding:22px 30px;border-radius:var(--r-l);background:var(--tint-gold);box-shadow:var(--shadow)}
.cta-art{width:150px}
.cta-band h2{font-size:clamp(20px,2.6vw,26px)}
.cta-band p{color:var(--ink-2)}
.cta-band .legal{font-size:12px;color:var(--ink-3);margin-top:6px}
@media (max-width:760px){.cta-band{grid-template-columns:96px minmax(0,1fr);padding:20px}.cta-art{width:96px}.cta-band .btn{grid-column:1 / -1;width:100%}}

/* ---------- tools ---------- */
.tool-store{display:none}
.tool{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--shadow-lg);overflow:hidden;overflow:clip;min-width:0}   /* clip：中の結果バーを画面の上に止められるように（hidden だと止まらない） */
.tool-head{position:relative;display:grid;gap:10px;padding:24px 200px 20px 26px;border-bottom:1px solid var(--line);background:var(--tint-sky)}
.tool-art{position:absolute;right:22px;bottom:12px;width:150px;height:118px}
.tool-ep{display:flex;align-items:flex-start;gap:6px;font-size:13px;font-weight:700;color:var(--teal-ink);line-height:1.6}
.tool-ep .ic{width:18px;height:18px;margin-top:2px}
.tool-title{font-size:clamp(22px,2.8vw,28px)}
.tool-desc{color:var(--ink-2);font-size:15px;max-width:44em}
.presets{display:flex;flex-wrap:wrap;gap:12px 10px}
@media (max-width:680px){.tool-head .presets{margin-right:-94px}}   /* スマホでは右上のイラストの下まで広げる */
@media (max-width:560px){.tool-head .presets{margin-right:-86px}.presets .btn{flex:1 1 100%}}
.preset-msg{font-size:13.5px;color:var(--teal-ink);font-weight:700}
.preset-msg:empty{display:none}
.tool-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"in sum" "in res";grid-template-rows:auto 1fr}
.tool-inputs{grid-area:in;display:grid;gap:20px;align-content:start;padding:24px 26px;background:var(--surface-2);border-right:1px solid var(--line);min-width:0}
.tool-results{grid-area:res;display:grid;gap:20px;align-content:start;padding:18px 26px 24px;min-width:0}
.tool-foot{display:grid;gap:14px;padding:18px 26px 24px;border-top:1px solid var(--line)}
.foot-cta{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:center}
@media (max-width:560px){.foot-cta .btn{flex:1 1 100%}}
@media (max-width:880px){.tool-body{display:block}.tool-inputs{border-right:0;border-bottom:1px solid var(--line)}.tool-results{padding-top:24px}}
@media (max-width:680px){.tool-head{padding-right:120px}.tool-art{width:96px;height:80px;right:14px;top:14px;bottom:auto}}
@media (max-width:560px){.tool-head,.tool-inputs,.tool-results,.tool-foot,.tool-sum{padding-inline:18px}.tool-head{padding-right:104px}}

/* 結果バー：PCでは結果欄の先頭に大きく。スマホ・タブレットでは入力欄の上にあり、下へ進むと画面の上に止まる
   （入力を変えながら、スクロールしないで結果を確かめられる）。止まっている間は補足の行を隠して低くする */
.tool-sum{grid-area:sum;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:24px 26px 0;background:var(--surface);min-width:0}
.sum-l{grid-column:1;grid-row:1;font-size:14.5px;font-weight:700;color:var(--ink-2);line-height:1.5;min-width:0}
.sum-btns{grid-column:2;grid-row:1;display:flex;gap:6px;align-items:center}
.sum-v{grid-column:1 / -1;justify-self:start;max-width:100%;margin-inline:-6px;padding-inline:6px;border-radius:8px;font-weight:700;font-size:clamp(34px,4.2vw,46px);line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sum-v .pr{display:inline-flex;align-items:baseline;gap:6px;margin-right:.6em;white-space:nowrap}
.sum-v .pr:last-child{margin-right:0}
.sum-v .pr small{font-size:15px;font-weight:700;color:var(--ink-2)}
.sum-v .pr i{display:inline-block;width:12px;height:12px;border-radius:3px;align-self:center}
.sum-s{grid-column:1 / -1;font-size:14px;line-height:1.6;color:var(--ink-2)}
.sum-s:empty{display:none}
.sum-c{grid-column:1 / -1;margin-top:6px;padding:6px 10px;border-radius:10px;background:var(--tint-teal);color:var(--ink);font-size:13.5px;line-height:1.55;font-weight:700}
.sum-c b{color:var(--teal-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sum-btn{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 13px;border-radius:999px;border:1.5px solid var(--btn2-ring);background:var(--btn2-face);color:var(--btn2-ink);font-weight:700;font-size:13.5px;line-height:1.2;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sum-btn .ic{width:16px;height:16px;stroke-width:2.2}
.sum-btn.x{width:34px;padding:0;justify-content:center}
@media (hover:hover){.sum-btn:hover{background:var(--btn2-face-hi)}}
@keyframes sum-bump{from{background-color:var(--gold-soft)}to{background-color:transparent}}
.sum-v.bump{animation:sum-bump .8s ease-out}
@media (prefers-reduced-motion:reduce){.sum-v.bump{animation:none}}
@media (max-width:880px){
  .tool-sum{position:sticky;top:var(--sum-top,0px);z-index:20;padding:12px 26px;border-bottom:1px solid var(--line);transition:top .25s ease,box-shadow .2s ease}
  .tool-sum.is-stuck{box-shadow:0 12px 22px -16px rgba(16,40,63,.6)}
  .sum-l{font-size:13px}
  .sum-v{font-size:28px;line-height:1.3}
  .sum-v .pr small{font-size:13px}
  .tool-sum.is-stuck .sum-s{display:none}
  .tool-body [id]{scroll-margin-top:calc(var(--hdr-h) + 110px)}
}
@media (max-width:560px){.tool-sum{padding-block:10px}.sum-v{font-size:26px}}
@media (max-width:360px){.sum-v{font-size:23px}.sum-v .pr{gap:4px}.sum-l{font-size:12px}.sum-btn{padding:0 10px;font-size:12.5px;gap:4px}.sum-btn .ic{width:14px;height:14px}.seg.seg-mode span{font-size:13px;padding:4px}.seg.two span{font-size:13px;padding-inline:8px}}
@media (prefers-reduced-motion:reduce){.tool-sum{transition:none}}

/* 計算のしかたの切り替え（つながったタブ。選んでいるものだけ紺の塗り） */
.seg.seg-mode{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--surface-3)}
.seg.seg-mode label{display:grid}
.seg.seg-mode span{justify-content:center;text-align:center;min-height:44px;padding:5px 6px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font-size:14px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.seg.seg-mode input:checked + span{background:var(--btn-blue);color:var(--btn-blue-fg)}
@media (hover:hover){.seg.seg-mode input:not(:checked) + span:hover{background:var(--surface);color:var(--ink)}}
.seg.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.seg.two span{justify-content:center;text-align:center;width:100%;word-break:keep-all;overflow-wrap:anywhere}
.out-line{font-size:14px;line-height:1.65;color:var(--ink-2);padding:9px 12px;border-radius:10px;background:var(--surface);border:1px dashed var(--line-2)}
.out-line b{color:var(--ink);font-variant-numeric:tabular-nums}
.inline-act{justify-self:start}

/* 2つの条件をくらべる */
.cmp{display:grid;gap:10px;padding:16px 18px;border-radius:14px;border:1.5px solid var(--teal);background:var(--tint-teal);min-width:0}
.cmp[hidden]{display:none}
.cmp h3{font-size:16px}
.cmp-conds{display:grid;gap:4px;font-size:13.5px;line-height:1.6}
.cmp-conds p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:baseline}
.cmp-tag{display:inline-block;padding:0 8px;border-radius:6px;font-size:12px;font-weight:700;line-height:1.7;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.cmp-tag.now{background:var(--btn-blue);border-color:var(--btn-blue);color:var(--btn-blue-fg)}
.cmp .tbl-wrap{margin-top:0;background:var(--surface);border-radius:10px;padding:2px 4px}
.cmp table.data td:last-child{font-weight:700;color:var(--teal-ink)}
.cmp-acts{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:520px){
  .cmp table.data thead{display:none}
  .cmp table.data tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);padding:6px 0}
  .cmp table.data td{border:0;padding:2px 6px;white-space:normal;text-align:left}
  .cmp table.data td:first-child{grid-column:1 / -1;font-weight:700}
  .cmp table.data td[data-h]::before{content:attr(data-h);display:block;font-size:11.5px;font-weight:700;color:var(--ink-3)}
  .cmp-acts .btn{flex:1 1 100%}
}

/* リンクで共有・印刷 */
.tool-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.act-msg{flex:1 1 100%;font-size:13.5px;font-weight:700;color:var(--teal-ink)}
.act-msg:empty{display:none}
.act-url{flex:1 1 100%;font-size:14px;min-height:42px;padding:8px 10px}
@media (max-width:560px){.tool-acts .btn{flex:1 1 calc(50% - 5px);padding-inline:.6em}}
.print-head{display:none}

/* 結果バーの2つ並び（住宅ローン：変動と固定） */
.sum-v.is-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;width:100%;margin-inline:0;padding-inline:0}
.sum-v.is-pair .pr{display:grid;gap:0;margin:0;font-size:clamp(26px,2.9vw,36px);line-height:1.25}
.sum-v .pr small{display:inline-flex;align-items:center;gap:5px}
@media (max-width:560px){
  .sum-v.is-pair{column-gap:12px}
  .sum-v.is-pair .pr{font-size:23px}
  .sum-v.is-pair .pr small{font-size:12.5px;line-height:1.5}
  .sum-btn .lg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* 画面では「くらべる」だけ。読み上げは「保存してくらべる」 */
}
@media (max-width:360px){.sum-v.is-pair .pr{font-size:21px}}

/* 保障：遺族年金の目安の入力と結果 */
.pm-box{display:grid;gap:14px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.flabel{font-weight:700;font-size:15px;line-height:1.5}
.kids{display:grid;gap:6px}
.kid-row{display:flex;flex-wrap:wrap;gap:10px 14px}
.be-list.ptl li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
.be-list.ptl li small{grid-column:1 / -1;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.box .bmon{font-size:13px;font-weight:700;color:var(--teal-ink)}
.group-title{font-weight:700;font-size:15px;color:var(--brand-ink);display:flex;align-items:center;gap:8px}
.group-title::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* fields */
.field{display:grid;gap:6px;min-width:0}
.field-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.field label,.field .flabel{font-weight:700;font-size:15px;line-height:1.5}
.num-in{display:inline-flex;align-items:center;gap:6px}
.num-in input{width:7.2em;padding:7px 10px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);font-family:var(--f-num);font-weight:700;font-size:17px;text-align:right;font-variant-numeric:tabular-nums}
.num-in.w-s input{width:5em}
.num-in input:disabled{opacity:.55}
.unit{font-size:14px;color:var(--ink-2);white-space:nowrap}
input[type=range]{width:100%;margin:0;accent-color:var(--brand);height:30px;cursor:pointer}
input[type=range]:disabled{opacity:.45;cursor:not-allowed}
select,.inp{font:inherit;font-size:16px;width:100%;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);min-height:48px}
textarea.inp{min-height:120px;line-height:1.7;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}
/* シミュレーションの入力は、スマホでも2つ並べて縦の長さを抑える（とても狭い画面だけ1列） */
@media (max-width:420px){.tool-inputs .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:360px){.tool-inputs .grid2 .num-in input{width:4.6em;padding-inline:8px}}
@media (max-width:319px){.tool-inputs .grid2{grid-template-columns:1fr}}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--surface);font-weight:700;font-size:14px}
.seg input:checked + span{background:var(--btn-blue);color:var(--btn-blue-fg);border-color:var(--btn-blue)}
.seg input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}

/* results */
.res-hero{display:grid;gap:2px}
.res-label{font-size:14.5px;font-weight:700;color:var(--ink-2)}
.res-big{font-weight:700;font-size:clamp(34px,4.4vw,48px);line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.res-big.mid{font-size:clamp(28px,3.4vw,38px)}
.res-note{font-size:14px;color:var(--ink-2)}
.kv{display:grid;border-top:1px solid var(--line)}
.kv > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv dt{color:var(--ink-2);font-size:15px}
.kv dd{margin:0;font-weight:700;font-size:17px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.callouts{display:grid;gap:8px}
.callouts:empty{display:none}
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.65}
.callout .ic{width:20px;height:20px;margin-top:1px}
.callout.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink)}
.callout.info{background:var(--info-bg);border:1px solid var(--info-line);color:var(--ink)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.duo > div{display:grid;gap:2px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface)}
.duo .k{font-size:13.5px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.duo .k i{width:12px;height:12px;border-radius:3px;display:inline-block}
.duo .v{font-weight:700;font-size:clamp(24px,3vw,30px);line-height:1.25;font-variant-numeric:tabular-nums}
.duo .s{font-size:13px;color:var(--ink-3)}
.panel{display:grid;gap:10px;padding:16px 18px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.panel h3{font-size:16px}
.be-list{list-style:none;padding:0;display:grid}
.be-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:8px 0;border-bottom:1px dashed var(--line-2);font-size:14.5px}
.be-list li:last-child{border-bottom:0}
.be-list b{margin-left:auto;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;text-align:right}
.verdict{font-size:15px;line-height:1.75}

/* charts */
.chart-card{display:grid;gap:10px;min-width:0}
.chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px}
.legend i.ln{height:4px;border-radius:2px;width:18px}
.legend i.dash{background:repeating-linear-gradient(90deg,var(--s-gold) 0 6px,transparent 6px 10px)!important}
.lg-blue{background:var(--s-blue)}.lg-gold{background:var(--s-gold)}.lg-navy{background:var(--s-navy)}.lg-teal{background:var(--s-teal)}
.chart{position:relative;min-height:240px;touch-action:pan-y}
.chart svg{display:block;width:100%;height:auto}
.g-grid{stroke:var(--grid);stroke-width:1}
.g-axis{stroke:var(--axis);stroke-width:1.2}
.g-lbl{fill:var(--ink-3);font-size:12px;font-family:var(--f-body)}
.g-mlbl{fill:var(--ink-2);font-weight:700}
.g-gap{fill:none;stroke:var(--surface);stroke-width:2}
.a-blue{fill:var(--s-blue)}.a-gold{fill:var(--s-gold)}.a-navy{fill:var(--s-navy)}.a-teal{fill:var(--s-teal)}
.g-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.g-line.c-navy{stroke:var(--s-navy)}.g-line.c-teal{stroke:var(--s-teal)}.g-line.c-gold{stroke:var(--s-gold)}.g-line.c-blue{stroke:var(--s-blue)}
.g-dash{stroke-dasharray:7 5}
.g-marker{stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:3 4}
.g-cross{stroke:var(--ink-3);stroke-width:1}
.g-dot{stroke:var(--surface);stroke-width:2}
.g-dot.c-navy{fill:var(--s-navy)}.g-dot.c-teal{fill:var(--s-teal)}.g-dot.c-gold{fill:var(--s-gold)}.g-dot.c-blue{fill:var(--s-blue)}
.g-hit{fill:transparent;cursor:crosshair}
.tip{position:absolute;z-index:3;pointer-events:none;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:8px 11px;font-size:13px;line-height:1.55;box-shadow:var(--shadow);white-space:nowrap;color:var(--ink)}
.tip .r{display:flex;justify-content:space-between;gap:14px}
.tip .r span:last-child{font-weight:700;font-variant-numeric:tabular-nums}
details.tbl summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--link);padding:4px 0;width:max-content;max-width:100%}
.tbl-wrap{overflow-x:auto;margin-top:8px}
table.data{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
table.data th,table.data td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.data th{font-size:12.5px;color:var(--ink-2);font-weight:700}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data tr.hl td{background:var(--gold-soft);font-weight:700}

/* tax compare sub-card */
.subcalc{display:grid;gap:12px;padding:18px;border-radius:16px;border:1.5px dashed var(--line-2);background:var(--surface)}
.subcalc h3{font-size:17px}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vs > div{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.vs p{font-size:13px;font-weight:700;color:var(--ink-2)}
.vs b{font-weight:700;font-size:24px;line-height:1.3;font-variant-numeric:tabular-nums}
.vs span{font-size:13px;color:var(--ink-3)}
.vs .vs-b{background:var(--sky-soft);border-color:var(--info-line)}

/* three boxes */
.boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.box{position:relative;display:grid;gap:8px;align-content:start;padding:20px 14px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);overflow:hidden;min-width:0}
.box::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:var(--bx)}
.box h3{font-size:16px;line-height:1.4}
.box .sub{font-size:12.5px;font-weight:700;color:var(--teal-ink);line-height:1.5}
.box .sum{font-weight:700;font-size:24px;line-height:1.3;font-variant-numeric:tabular-nums}
.box ul{list-style:none;padding:0;display:grid;gap:8px}
.box li{display:grid;gap:1px;font-size:13px;line-height:1.55;padding-top:8px;border-top:1px dashed var(--line)}
.box li b{font-size:13.5px;overflow-wrap:anywhere}
.box li span{color:var(--ink-2)}
.box .empty{font-size:13px;color:var(--ink-3)}
.box .say{font-size:12.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:700px){.boxes{grid-template-columns:1fr}}
.items{display:grid;gap:10px}
.item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.item .it-name{grid-column:1 / -1;min-height:42px;padding:8px 10px;font-size:15px}
.item .it-del{grid-column:4}
.item .num-in input{width:4.6em;font-size:16px;padding:6px 8px}
@media (max-width:400px){.item{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.item .it-del{grid-column:3}}
.items-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}

/* age ruler */
.ruler-card{display:grid;gap:10px;padding:16px 16px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);min-width:0}
.ruler{position:relative;padding-inline:4px}
.r-track{position:relative;height:14px;border-radius:7px;background:var(--surface-3);overflow:hidden}
.r-seg{position:absolute;top:0;bottom:0}
.r-seg.k1{background:var(--box1)}.r-seg.k2{background:var(--box2)}.r-seg.k3{background:var(--box3)}
.r-seg.wait{background:repeating-linear-gradient(135deg,var(--gold) 0 5px,var(--gold-soft) 5px 10px)}
.r-seg.join{background:var(--box2)}
.r-ticks{position:relative;height:22px;font-size:12px;color:var(--ink-3);font-weight:700}
.r-ticks span{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap}
.r-pins{position:relative}
.pin{position:absolute;display:grid;justify-items:center;gap:2px;transform:translateX(-50%);width:max-content;max-width:150px;text-align:center}
.pin.al{transform:none;justify-items:start;text-align:left}
.pin.ar{transform:translateX(-100%);justify-items:end;text-align:right}
.pin-coin{width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2.5px var(--pc,var(--gold-ring))}
.pin-lbl{font-size:12px;line-height:1.4;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2px 7px}
.pin-lbl small{display:block;color:var(--ink-2);font-size:11.5px}
.r-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-2)}
.r-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.r-legend i.k1{background:var(--box1)}.r-legend i.k2{background:var(--box2)}.r-legend i.k3{background:var(--box3)}
.r-legend i.wait{background:repeating-linear-gradient(135deg,var(--gold) 0 3px,var(--gold-soft) 3px 6px)}

/* hub tabs */
.tool-nav{display:flex;flex-wrap:wrap;gap:8px}   /* タブの見た目は site.css の「チップ」と共通 */

/* videos */
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vcard{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;padding:18px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
.vnum{grid-row:1 / span 3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2.5px var(--gold-ring);color:var(--on-gold);font-weight:700;font-size:17px}
.vnum.loan{background:var(--sky-soft);box-shadow:inset 0 0 0 2px var(--sky);color:var(--brand-ink)}
.vcard h3{font-size:16.5px;line-height:1.55}
.vcard p{font-size:14px;color:var(--ink-2);line-height:1.7}
.vcard .go{justify-self:start;margin-top:2px}
@media (max-width:760px){.vgrid{grid-template-columns:1fr}}

/* reserve */
.demo-note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:var(--info-bg);border:1px solid var(--info-line);font-size:14px;line-height:1.65}
.demo-note .ic{color:var(--brand-ink);margin-top:1px}
.rsv{display:grid;gap:22px}
.rsv-prog{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:rp}
.rsv-prog li{counter-increment:rp;display:grid;justify-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--ink-3);text-align:center;line-height:1.4}
.rsv-prog li::before{content:counter(rp);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);font-weight:700;color:var(--ink-3)}
.rsv-prog li.done::before{background:var(--sky-soft);border-color:var(--brand);color:var(--brand-ink)}
.rsv-prog li[aria-current="step"]{color:var(--ink)}
.rsv-prog li[aria-current="step"]::before{background:var(--gold);border-color:var(--gold-ring);color:var(--on-gold)}
.rsv-step{margin:0;padding:24px;border-radius:var(--r-l);background:var(--surface);border:0;box-shadow:var(--shadow);min-width:0}
section.rsv-step{display:grid;gap:18px}
fieldset.rsv-step{display:block}
fieldset.rsv-step > legend{float:left;width:100%;margin:0 0 16px}
.rsv-in{clear:both;display:grid;gap:18px;min-width:0}
@media (max-width:560px){.rsv-step{padding:18px}}
.rsv-step:focus{outline:none}
.rsv-legend{font-weight:700;font-size:20px;line-height:1.45;padding:0}
.rsv-sub{font-weight:700;font-size:18px;line-height:1.45;margin-top:6px}
.req{display:inline-block;font-size:12px;font-weight:700;line-height:1.5;padding:0 7px;border-radius:6px;background:var(--gold);color:var(--on-gold);vertical-align:2px;margin-left:6px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.choices.two{grid-template-columns:1fr}}
.choice{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--surface);cursor:pointer;min-width:0}
.choice input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--brand)}
.choice b{display:flex;align-items:center;gap:6px;font-size:16px;line-height:1.5}
.choice b .ic{width:20px;height:20px;color:var(--brand-ink)}
.choice small{display:block;font-size:13px;color:var(--ink-2);line-height:1.6;margin-top:2px}
.choice:has(input:checked){border-color:var(--brand);background:var(--sky-soft)}
.dates{display:grid;gap:10px}
.date-row{display:grid;grid-template-columns:5.5em minmax(0,1fr) minmax(0,10em);gap:10px;align-items:center}
.date-row .dn{font-weight:700;font-size:14.5px}
@media (max-width:520px){.date-row{grid-template-columns:1fr 1fr}.date-row .dn{grid-column:1 / -1}}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.agree input{width:20px;height:20px;margin-top:4px;accent-color:var(--brand);flex:none}
.err{color:var(--bad-ink);font-size:14px;font-weight:700}
.rsv-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:4px}
.rsv-nav .btn-coin{margin-left:auto}
.confirm{display:grid;border-top:1px solid var(--line)}
.confirm > div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.confirm dt{font-weight:700;font-size:14px;color:var(--ink-2)}
.confirm dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:520px){.confirm > div{grid-template-columns:1fr;gap:2px}}
.rsv-done{justify-items:center;text-align:center;padding-block:30px}
.done-art{width:180px}
.rsv-done h2{font-size:24px}
.rsv-done p{color:var(--ink-2);max-width:32em}

/* ---------- footer ---------- */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding-block:44px 28px}
.ft{display:grid;gap:28px}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.ft-logo{line-height:0;display:block}
.ft-logo svg{height:60px;width:auto}
.ft-nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px}
.ft-nav a{color:var(--ink);text-decoration:none;font-weight:700}
.ft-nav a:hover{color:var(--link);text-decoration:underline}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px}
@media (max-width:820px){.ft-grid{grid-template-columns:1fr}}
.ft-h{font-size:15px;margin-bottom:8px}
.ft-dl{display:grid;font-size:14px;line-height:1.7}
.ft-dl > div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.ft-dl dt{color:var(--ink-2);font-weight:700}
.ft-dl dd{margin:0}
.ft-links{list-style:none;padding:0;display:grid;gap:6px;font-size:14px}
.ft-notes{display:grid;gap:4px;font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.copy{font-size:12.5px;color:var(--ink-3)}

/* ---------- mobile dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px -18px rgba(16,40,63,.45)}
.dock{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.dock .btn{flex:1;min-height:48px;padding-inline:10px;font-size:15px;letter-spacing:.02em;white-space:nowrap}
@media (max-width:720px){.dock{display:flex}body{padding-block-end:80px}}
@media (max-width:379px){.dock .btn{padding-inline:6px;font-size:14px;letter-spacing:0}.dock .btn .ic{display:none}}
/* シミュレーションの結果バーが画面の上に止まっている間（入力中）は、下の相談ボタンを隠して入力欄を広く見せる */
.dock{transition:transform .25s ease}
.sum-on .dock{transform:translateY(calc(100% + 12px))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* =====================================================================
   v3：複数ページ・記事用の追加スタイル（src/style.css のあとに読み込む）
   ===================================================================== */

body{margin:0}

/* ---------- header：案内の細い帯 ＋ 1行のヘッダー（カテゴリーごとのパネル）＋ スマホのメニュー ---------- */
.util{background:var(--surface);border-bottom:1px solid var(--line);color:var(--ink-3);font-size:12px}
.util-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px}
.util-tag{display:flex;align-items:center;gap:10px;letter-spacing:.05em}
.util-tag span{padding-left:10px;border-left:1px solid var(--line);color:var(--ink-3)}
.util-links{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.util-links li + li::before{content:"";display:inline-block;width:1px;height:11px;margin:0 2px;background:var(--line-2);vertical-align:middle}
.util-links a{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:6px;color:var(--ink-2);text-decoration:none}
.util-links a:hover,.util-links a[aria-current]{color:var(--link);text-decoration:underline;text-underline-offset:3px}

.site-header{transition:box-shadow .2s ease,transform .25s ease}
.site-header.is-hidden{transform:translateY(-102%)}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}
.site-header.is-scrolled{box-shadow:0 10px 22px -16px rgba(16,40,63,.5)}
.hdr{position:relative;gap:14px}
.site-logo svg{height:46px}
.gn{flex:1;min-width:0;align-self:stretch;display:flex;justify-content:center}
.gn-list{list-style:none;margin:0;padding:0;display:flex;align-items:stretch}
.gn-item{display:flex}
.gn-link{position:relative;display:flex;align-items:center;padding:0 5px;color:var(--ink-2);font-weight:700;font-size:14.5px;letter-spacing:0;text-decoration:none;white-space:nowrap}
.gn-link::after{content:"";position:absolute;left:5px;right:5px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--gold);transform:scaleX(0);transition:transform .18s ease}
.gn-item:hover > .gn-link,.gn-link:focus-visible{color:var(--ink)}
.gn-item:hover > .gn-link::after{transform:scaleX(1)}
.gn-link[aria-current]{color:var(--link)}
.gn-link[aria-current]::after{transform:scaleX(1);background:var(--brand)}
.gn-panel{display:none;position:absolute;left:0;right:0;top:100%;z-index:70;grid-template-columns:240px minmax(0,1fr);gap:26px;padding:22px 26px 24px;background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-l) var(--r-l);box-shadow:var(--shadow-lg)}
.gn-item:hover > .gn-panel,.gn-item:focus-within > .gn-panel{display:grid;animation:gp-in .18s ease-out}
@keyframes gp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gn-item:hover > .gn-panel,.gn-item:focus-within > .gn-panel{animation:none}.gn-link::after{transition:none}}
.gp-head{display:grid;gap:6px;align-content:start;padding-right:24px;border-right:1px solid var(--line)}
.gp-title{font-weight:700;font-size:19px;line-height:1.45;color:var(--ink)}
.gp-lead{font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.gp-all{justify-self:start;margin-top:8px}
.gp-subs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:8px 12px;align-content:start}
.gp-subs a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:7px 10px 7px 7px;border-radius:14px;color:var(--ink);text-decoration:none}
.gp-subs a:hover,.gp-subs a:focus-visible{background:var(--surface-2)}
.gp-art{display:grid;place-items:center;width:64px;height:54px;border-radius:12px;background:var(--tint)}
.gp-art .ill{width:52px;height:44px;aspect-ratio:auto}
.gp-txt{display:grid;gap:1px;min-width:0}
.gp-txt b{font-size:15px;line-height:1.45}
.gp-txt small{font-size:12.5px;color:var(--ink-3)}

.hdr-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.hdr-sim,.hdr-cta{white-space:nowrap}
.hdr-sim[aria-current]{--face:var(--sky-soft)}
.menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:54px;min-height:48px;margin:0;padding:6px 0 3px;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}
.menu-btn:hover{background:var(--surface-2)}
.mb-ic{position:relative;display:block;width:22px;height:14px}
.mb-ic i{position:absolute;left:0;right:0;height:2.2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease,top .2s ease}
.mb-ic i:nth-child(1){top:0}.mb-ic i:nth-child(2){top:6px}.mb-ic i:nth-child(3){top:12px}
.menu-btn[aria-expanded="true"] .mb-ic i:nth-child(1){top:6px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .mb-ic i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .mb-ic i:nth-child(3){top:6px;transform:rotate(-45deg)}
.mb-t{font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1;color:var(--ink-2)}

.mnav{max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;overscroll-behavior:contain}
.mnav-in{display:grid;gap:16px;padding-block:16px 26px}
.mnav .mn-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mnav .mn-cta .btn{padding-inline:10px;font-size:14.5px;letter-spacing:.02em;white-space:nowrap}
@media (max-width:379px){.mnav .mn-cta .btn{padding-inline:6px;font-size:14px;letter-spacing:0}.mnav .mn-cta .btn .ic{display:none}}
.mnav .mn-cats{display:block;padding:0;border-top:1px solid var(--line)}
.mnav .mn-cats > li{border-bottom:1px solid var(--line)}
.mnav .mn-cats summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 4px;font-weight:700;font-size:16px;cursor:pointer;list-style:none}
.mnav .mn-cats summary::-webkit-details-marker{display:none}
.mnav .mn-cats summary .ic{color:var(--brand-ink)}
.mnav .mn-cats summary::after{content:"";margin-left:auto;margin-right:6px;width:9px;height:9px;border-right:2.3px solid var(--ink-3);border-bottom:2.3px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.mnav .mn-cats details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.mnav .mn-cats details ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0 0 14px 34px}
.mnav .mn-cats details a{min-height:42px;padding:6px 12px;border-radius:10px;background:var(--surface-2);font-size:14.5px}
.mnav .mn-util{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0}

.catbar{display:none;background:var(--surface);border-bottom:1px solid var(--line)}
.catbar ul{list-style:none;margin:0;padding:9px 36px 9px 16px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent)}
.catbar ul::-webkit-scrollbar{display:none}
.catbar a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-weight:700;font-size:13.5px;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.catbar a:hover{background:var(--surface-3);color:var(--ink)}
.catbar a[aria-current]{background:var(--btn-blue);border-color:var(--btn-blue);color:var(--btn-blue-fg)}

@media (max-width:1139px){.util,.gn{display:none}.catbar{display:block}.menu-btn{display:inline-flex}.hdr{gap:12px}}
@media (max-width:719px){.hdr-sim{display:none}}
@media (max-width:560px){.hdr-cta{display:none}.site-logo svg{height:40px}.mnav .mn-cats details ul{grid-template-columns:1fr}}

/* ---------- page heads with a real <img> ---------- */
.ph-img{display:block;width:100%;max-width:320px;max-height:250px;height:auto;object-fit:contain;justify-self:center}
@media (max-width:720px){.ph-img{order:-1;max-width:220px;max-height:170px}}
.ph-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--ink-2)}
.ph-meta span{display:inline-flex;align-items:center;gap:5px}
.ph-meta .ic{width:17px;height:17px;color:var(--brand-ink)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li{display:inline-flex;gap:6px}
.crumbs li + li::before{content:"›";color:var(--ink-3)}

/* ---------- article layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start;padding-block:34px 76px}
.side{position:sticky;top:calc(var(--hdr-h) + 16px);display:grid;gap:16px;min-width:0}
@media (max-width:1040px){.layout{grid-template-columns:1fr}.side{position:static}}
.article{display:grid;gap:34px;min-width:0;max-width:780px}
.answer{position:relative;display:grid;gap:8px;padding:20px 22px 20px 24px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow);border-left:6px solid var(--gold)}
.answer .k{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--gold-ink);letter-spacing:.08em}
.answer p{font-size:17px;line-height:1.9;font-weight:700;color:var(--ink)}
.kp{display:grid;gap:10px;padding:18px 22px;border-radius:var(--r-m);background:var(--tint-sky)}
.kp-t{font-weight:700;font-size:15px;color:var(--brand-ink);display:flex;align-items:center;gap:8px}
.kp ol{list-style:none;padding:0;margin:0;display:grid;gap:8px;counter-reset:kp}
.kp li{counter-increment:kp;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-weight:700;font-size:15.5px;line-height:1.6}
.kp li::before{content:counter(kp);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 2.5px var(--gold-ring);color:var(--on-gold);font-size:14px}
.toc{border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:6px 18px}
.toc summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:700;padding:10px 0}
.toc summary::-webkit-details-marker{display:none}
.toc summary .ic{color:var(--brand-ink)}
.toc summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2.3px solid var(--ink-2);border-bottom:2.3px solid var(--ink-2);transform:rotate(45deg);transition:transform .15s}
.toc[open] summary::after{transform:rotate(225deg)}
.toc ol{margin:0 0 12px;padding-left:1.6em;display:grid;gap:6px;font-size:15px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.a-sec{display:grid;gap:18px;min-width:0}
.a-sec > h2{position:relative;font-size:clamp(21px,2.6vw,26px);line-height:1.5;padding:4px 0 10px 18px;border-bottom:2px solid var(--line)}
.a-sec > h2::before{content:"";position:absolute;left:0;top:.42em;bottom:.62em;width:6px;border-radius:3px;background:var(--brand)}
.a-sec h3{font-size:18.5px;line-height:1.55;padding-left:12px;border-left:4px solid var(--teal)}
.a-sec p{font-size:16.5px;line-height:2}
.a-sec p.note{font-size:13.5px;line-height:1.75}
.a-sec strong{background:linear-gradient(transparent 62%,var(--gold-soft) 62%);font-weight:700}
.ul{padding-left:1.4em;display:grid;gap:6px;font-size:16px;line-height:1.85}
.ul li::marker{color:var(--brand)}
.pt-box{display:grid;gap:4px;padding:16px 20px;border-radius:14px;background:var(--gold-soft);border:1.5px solid var(--warn-line)}
.pt-box .k{font-size:13px;font-weight:700;color:var(--gold-ink);letter-spacing:.08em}
.pt-box p{font-weight:700;font-size:16.5px;line-height:1.8;color:var(--ink)}

/* calc */
.calc{display:grid;gap:12px;padding:18px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow);margin:0}
.calc figcaption{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--brand-ink)}
.calc dl{margin:0;display:grid;border-top:1px solid var(--line)}
.calc dl > div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:10px 2px;border-bottom:1px dashed var(--line-2)}
.calc dt{color:var(--ink-2);font-size:15px}
.calc dd{margin:0 0 0 auto;font-weight:700;font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
.calc .res{border-bottom:0;background:var(--gold-soft);border-radius:10px;padding:12px 14px;margin-top:8px}
.calc .res dt{color:var(--ink);font-weight:700}
.calc .res dd{font-size:22px;color:var(--ink)}
.calc dd .nw{white-space:nowrap}

/* bars */
.bars{display:grid;gap:12px;padding:18px 20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow);margin:0}
.bars figcaption{font-weight:700;font-size:15.5px}
.bars ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bars li{display:grid;grid-template-columns:minmax(7em,9.5em) minmax(0,1fr) auto;gap:4px 12px;align-items:center;font-size:14.5px}
.bars .bl{color:var(--ink-2);line-height:1.45}
.bars .bt{height:18px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.bars .bf{display:block;height:100%;width:var(--w);border-radius:9px;background:var(--sky)}
.bars li.hl .bf{background:var(--gold);box-shadow:inset 0 0 0 2px var(--gold-ring)}
.bars li.hl .bl{color:var(--ink);font-weight:700}
.bars .bv{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
@media (max-width:520px){.bars li{grid-template-columns:minmax(0,1fr) auto}.bars .bt{grid-column:1 / -1;grid-row:2}}

/* talk */
.talk{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
.talk .av{display:block;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--tint-sky);box-shadow:inset 0 0 0 2px var(--line)}
.talk .av img{display:block;width:100%;height:auto;margin-top:6px}
.talk-fp .av{background:var(--tint-teal)}
.bubble{position:relative;display:grid;gap:4px;padding:12px 18px 14px;border-radius:18px;background:var(--surface);border:1.5px solid var(--line-2)}
.bubble::before{content:"";position:absolute;left:-9px;top:24px;width:16px;height:16px;background:var(--surface);border-left:1.5px solid var(--line-2);border-bottom:1.5px solid var(--line-2);transform:rotate(45deg)}
.bubble .who{font-size:12.5px;font-weight:700;color:var(--teal-ink);letter-spacing:.06em}
.talk-mascot .bubble .who{color:var(--brand-ink)}
.bubble p{font-size:16px;line-height:1.8}
.talk-fp .bubble{background:var(--tint-teal);border-color:transparent}
.talk-fp .bubble::before{background:var(--tint-teal);border-color:transparent}
@media (max-width:520px){.talk{grid-template-columns:60px minmax(0,1fr);gap:12px}.talk .av{width:60px;height:60px}}

/* check / flow / compare */
.checkbox{display:grid;gap:10px;padding:18px 20px;border-radius:var(--r-m);border:1.5px solid var(--info-line);background:var(--info-bg)}
.checkbox .t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px}
.checkbox .t .ic{color:var(--brand-ink)}
.ck{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ck li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.7}
.ck li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:6px;background:var(--surface);border:2px solid var(--brand)}
.ck li::after{content:"";position:absolute;left:7px;top:.42em;width:6px;height:11px;border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(40deg)}
.aflow{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:fl}
.aflow li{counter-increment:fl;position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;padding:14px 16px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
.aflow li::before{content:counter(fl);grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--btn-blue);color:var(--btn-blue-fg);font-weight:700}
.aflow li:not(:last-child)::after{content:"";position:absolute;left:33px;bottom:-12px;width:2px;height:14px;background:var(--line-2)}
.aflow .fh{font-weight:700;font-size:16.5px;line-height:1.55}
.aflow .fp{font-size:15px !important;line-height:1.75 !important;color:var(--ink-2)}
.cmp-h{font-weight:700;font-size:17.5px;line-height:1.5}

/* mini calculators inside articles */
.mini-art{gap:12px;padding:18px 20px;border-radius:var(--r-m);background:var(--surface);border:1.5px dashed var(--line-2)}
.mini-t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px !important;color:var(--brand-ink)}
.mini-res{margin:0;display:grid;gap:6px}
.mini-res > div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:8px 12px;border-radius:10px;background:var(--surface-2)}
.mini-res dt{color:var(--ink-2);font-size:14.5px}
.mini-res dd{margin:0;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.mini-res .hl{background:var(--gold-soft)}
.mini-res .hl dd{font-size:21px;color:var(--ink)}
.mini-msg{font-size:14px !important;line-height:1.7 !important;color:var(--ink-2)}

/* tool card, sources, byline, related */
/* シミュレーションへのカード：カード全体がリンク。中の白いボタンは「押せる場所」の目印（カードに乗せると一緒に浮く） */
.toolcard{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-areas:"art body" "art go";column-gap:18px;row-gap:12px;align-items:center;padding:18px 22px;border-radius:var(--r-m);background:var(--tint-sky);text-decoration:none;color:var(--ink)}
.toolcard .ill{grid-area:art;width:110px;height:96px}
.toolcard .tc-body{grid-area:body;align-self:end;display:grid;gap:2px;min-width:0}
.toolcard .n{font-weight:700;font-size:18px;line-height:1.5}
.toolcard .d{font-size:14px;line-height:1.6;color:var(--ink-2)}
.toolcard .tc-go{grid-area:go;align-self:start;justify-self:start}
@media (hover:hover){.toolcard:hover .tc-go{background:var(--face-hi);transform:translateY(-1px);box-shadow:0 calc(var(--edge) + 1px) 0 var(--ring)}}
.toolcard:active .tc-go{transform:translateY(calc(var(--edge) - 1px));box-shadow:0 1px 0 var(--ring)}
@media (min-width:761px) and (max-width:900px){.alist > .toolcard{grid-template-areas:"art body" "go go"}.alist > .toolcard .tc-go{justify-self:stretch}}
@media (max-width:560px){.toolcard{grid-template-columns:84px minmax(0,1fr);grid-template-areas:"art body" "go go";padding:16px 18px 20px}.toolcard .ill{width:84px;height:74px}.toolcard .tc-body{align-self:center}.toolcard .tc-go{justify-self:stretch}}
.notes{display:grid;gap:6px;padding:16px 18px;border-radius:14px;background:var(--surface-2)}
.notes p{font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.srcs{display:grid;gap:10px}
.srcs h2,.related h2,.a-faq h2{font-size:20px;display:flex;align-items:center;gap:8px}
.srcs h2 .ic,.related h2 .ic,.a-faq h2 .ic{color:var(--brand-ink)}
.srcs ul{margin:0;padding-left:1.3em;display:grid;gap:6px;font-size:14.5px;line-height:1.7}
.srcs a{overflow-wrap:anywhere}
/* 本文の注番号（[1]）と、番号つきの参考資料。番号から飛んだ先が見出しの下に隠れないように */
.srcs ol.fn-list{margin:0;padding-left:1.9em;display:grid;gap:6px;font-size:14.5px;line-height:1.7}
.srcs ol.fn-list li{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.srcs ol.fn-list li:target{background:var(--gold-soft);border-radius:6px}
sup.fn{font-size:.68em;line-height:0;margin-left:2px;white-space:nowrap}
sup.fn a{text-decoration:none;font-weight:700;padding:0 1px}
/* 関連サービス（ｉ保険）のページへ進むボタン：本文の流れの中に置く白のボタン */
.a-cta{margin:4px 0 6px}
.a-cta .btn{max-width:100%;text-align:left;word-break:normal;overflow-wrap:anywhere}   /* 長い文言でも、せまい画面で折り返す（iPhoneのSafariでもはみ出さない） */
.a-cta.main .btn{min-height:56px;padding:calc((56px - 4px - 1.35em) / 2) 1.6em;font-size:17px}
@media (max-width:560px){.a-cta .btn{display:block;width:100%;text-align:center}}
.ins-note.ad-note{background:var(--tint-gold);color:var(--ink)}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:center;padding:16px 20px;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--surface)}
.byline .av{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--tint-teal)}
.byline .av img{display:block;width:100%;height:auto;margin-top:5px}
.byline dl{margin:0;display:grid;gap:4px;font-size:14px}
.byline dl > div{display:flex;flex-wrap:wrap;gap:4px 10px}
.byline dt{font-weight:700;color:var(--ink-2);min-width:4.5em}
.byline dd{margin:0}
.a-faq{display:grid;gap:12px}
.related{display:grid;gap:12px}

/* article cards and lists */
.alist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.alist.one{grid-template-columns:1fr}
@media (max-width:760px){.alist{grid-template-columns:1fr}}
.acard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 16px;align-items:center;height:100%;padding:14px 16px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s}
a.acard:hover{transform:translateY(-2px)}
a.acard:hover .ac-title{text-decoration:underline}
.ac-art{display:grid;place-items:center;width:96px;height:84px;border-radius:12px;background:var(--tint,var(--tint-sky))}
.ac-art img{display:block;max-width:84px;max-height:72px;width:auto;height:auto}
.ac-body{display:grid;gap:3px;min-width:0}
.ac-sub{font-size:12.5px;font-weight:700;color:var(--teal-ink)}
.ac-title{font-weight:700;font-size:16.5px;line-height:1.55}
.ac-desc{font-size:13.5px;line-height:1.65;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.soon-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:760px){.soon-list{grid-template-columns:1fr}}
.soon-list li{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-radius:12px;border:1.5px dashed var(--line-2);font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.soon-tag{flex:none;font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.list-head h2{font-size:clamp(21px,2.6vw,26px)}
.list-head .cnt{font-size:13.5px;color:var(--ink-2)}
/* チップ（テーマの切り替え・ページ内の移動・シミュレーションのタブ）：ボタンより平たく、厚みなし。いま見ているものは紺の塗り */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a,.tool-nav a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:700;font-size:14.5px;line-height:1.45;text-decoration:none;word-break:keep-all;overflow-wrap:break-word;overflow-wrap:anywhere;max-width:100%;transition:border-color .12s ease,background-color .12s ease}
@media (hover:hover){.chips a:hover,.tool-nav a:hover{border-color:var(--brand);background:var(--surface-2)}}
.chips a[aria-current="page"],.tool-nav a[aria-current="page"]{background:var(--btn-blue);border-color:var(--btn-blue);color:var(--btn-blue-fg)}

/* sub cards on category pages */
.subgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.subcard{display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .15s}
.subcard:hover{transform:translateY(-3px)}
.subcard .sc-art{display:grid;place-items:center;height:150px;background:var(--tint,var(--tint-sky))}
.subcard .sc-art img{max-height:126px;max-width:80%;width:auto;height:auto}
.subcard .sc-body{display:grid;gap:4px;padding:14px 18px 18px}
.subcard .sc-name{font-weight:700;font-size:18.5px}
.subcard .sc-desc{font-size:14px;color:var(--ink-2);line-height:1.65}
.subcard .sc-cnt{font-size:12.5px;font-weight:700;color:var(--teal-ink)}

/* side column */
.side-card{display:grid;gap:12px;padding:18px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
.side-card h2{font-size:16px;display:flex;align-items:center;gap:8px}
.side-card h2 .ic{color:var(--brand-ink)}
.side-cta{background:var(--tint-gold);text-align:center;justify-items:center}
.side-cta .ill{width:140px;height:120px}
.side-cta p{font-size:14px;color:var(--ink-2);line-height:1.7}
.side-cta .btn{width:100%}
.side-list{list-style:none;margin:0;padding:0;display:grid}
.side-list li{border-top:1px solid var(--line)}
.side-list a,.side-list span{display:block;padding:9px 2px;font-size:14px;line-height:1.55;text-decoration:none}
.side-list a:hover{text-decoration:underline}
.side-list span{color:var(--ink-3)}
.side-list a[aria-current="page"]{font-weight:700;color:var(--ink)}
.side-card > .go{justify-self:start}

/* top: categories, new articles */
.theme-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.theme-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.theme-grid.g4{grid-template-columns:1fr}}
.theme-grid.g4 .theme-art{height:160px}
.theme-grid.g4 .t-name{font-size:18.5px}
.more-row{margin-top:22px;text-align:center}

/* insurance notice / misc */
.ins-note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:var(--surface-2);font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.ins-note .ic{flex:none;color:var(--brand-ink);width:20px;height:20px;margin-top:1px}
.prose{display:grid;gap:14px;max-width:46em}
.prose h2{font-size:clamp(20px,2.4vw,24px);margin-top:12px}
.prose ul{padding-left:1.4em;display:grid;gap:6px}
.idx-cat{display:grid;gap:14px}
.idx-cat > h2{font-size:clamp(21px,2.6vw,26px);display:flex;align-items:center;gap:10px}
.idx-cat > h2 a{text-decoration:none;color:inherit}
.idx-sub{display:grid;gap:8px;padding:14px 18px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow)}
.idx-sub h3{font-size:17px}
.idx-sub ol{margin:0;padding-left:1.5em;display:grid;gap:4px;font-size:14.5px;line-height:1.6}
.idx-sub li.soon{color:var(--ink-3)}
.idx-sub li .soon-tag{margin-left:6px}

/* tinted page heads and the short header menu */
.dots.t-teal{background-color:var(--tint-teal)}.dots.t-gold{background-color:var(--tint-gold)}.dots.t-navy{background-color:var(--tint-navy)}
.article .cta-band{grid-template-columns:120px minmax(0,1fr);padding:22px 26px}
.article .cta-band .cta-art{width:120px;grid-row:span 2}
.article .cta-band .btn{grid-column:2;justify-self:start}
@media (max-width:560px){.article .cta-band{grid-template-columns:84px minmax(0,1fr);padding:18px}.article .cta-band .cta-art{width:84px;grid-row:auto}.article .cta-band .btn{grid-column:1 / -1;justify-self:stretch}}
.sec-white .theme{background:var(--bg)}

/* compact numbered article rows (theme lists) */
.arows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:760px){.arows{grid-template-columns:1fr}}
.arow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;height:100%;padding:14px 16px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s}
a.arow:hover{transform:translateY(-2px)}
a.arow:hover .ar-title{text-decoration:underline}
.ar-n{display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:10px;background:var(--tint,var(--tint-sky));color:var(--brand-ink);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.ar-body{display:grid;gap:3px;min-width:0}
.ar-title{font-weight:700;font-size:16px;line-height:1.55}
.ar-desc{font-size:13.5px;line-height:1.65;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sub-block{display:grid;gap:12px}
.sub-block + .sub-block{margin-top:18px}
.sb-h{font-size:19px}
.sub-block .more{justify-self:start}
@media (prefers-reduced-motion:reduce){.arow,.acard,.subcard,.theme{transition:none}}

/* ---------- 公的保障：相談・申請先の囲み ---------- */
.apply-box{display:grid;gap:6px;padding:18px 22px 18px 24px;border-radius:var(--r-m);background:var(--tint-navy);border-left:6px solid var(--brand-ink)}
.apply-box .ab-t{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;color:var(--brand-ink);letter-spacing:.04em}
.apply-box .ab-t .ic{width:22px;height:22px}
.apply-box .ab-main{margin:0;font-size:17px;line-height:1.75;font-weight:700;color:var(--ink)}
.apply-box .ab-note{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-2)}

/* ---------- リンク先の分かりやすさ ---------- */
.jump{gap:8px}
.jump .jump-t{margin:0;font-size:13.5px;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.ep-chip span{display:grid;gap:2px}
.ep-chip .ep-to{display:inline-flex;align-items:center;width:max-content;padding:1px 8px;border-radius:999px;background:var(--sky-soft);color:var(--brand-ink);font-size:11.5px;font-weight:700;letter-spacing:.04em}

/* 暮らし：記事の「FP相談で一緒に整理できること」と、トップの9カテゴリー（3列×3段） */
.consult-box{display:grid;gap:6px;padding:18px 22px 18px 24px;border-radius:var(--r-m);background:var(--tint-gold);border-left:6px solid var(--gold)}
.consult-box .cb-t{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.04em}
.consult-box .cb-t .ic{width:22px;height:22px;color:var(--brand-ink)}
.consult-box p{margin:0;font-size:16.5px;line-height:1.8;color:var(--ink)}
.page-body > .ins-note{margin:0}
.theme-grid.g3 .theme-art{height:170px}
@media (max-width:900px) and (min-width:561px){.theme-grid.g3 > .theme:last-child:nth-child(odd){grid-column:1 / -1}}

/* トップの10カテゴリー：PCは5列×2段、タブレットは2列×5段、スマホは1列 */
.theme-grid.g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.theme-grid.g5 .theme-art{height:128px}
.theme-grid.g5 .theme-art .ill{inset:10px}
.theme-grid.g5 .theme-body{padding:14px 16px 18px}
.theme-grid.g5 .t-name{font-size:17px}
.theme-grid.g5 .t-desc{font-size:13.5px;line-height:1.6}
.theme-grid.g5 .t-tags{font-size:12px}
@media (max-width:1040px){.theme-grid.g5{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.theme-grid.g5 .theme-art{height:160px}.theme-grid.g5 .theme-art .ill{inset:14px}.theme-grid.g5 .theme-body{padding:18px 22px 22px}.theme-grid.g5 .t-name{font-size:19px}.theme-grid.g5 .t-desc{font-size:14.5px}.theme-grid.g5 .t-tags{font-size:13px}}
@media (max-width:560px){.theme-grid.g5{grid-template-columns:1fr}}
/* 短い名前（テーマ名・カテゴリー名）は、対応するブラウザでは言葉の切れ目で折り返す（例：ふるさと納税の／しくみと上限） */
.gp-txt b,.sc-name,.t-name{word-break:auto-phrase;text-wrap:balance}

/* テーマページの解説から、くわしい記事へ（NISA・iDeCo） */
.topic-more{margin-top:4px;padding-top:14px;border-top:1px dashed var(--line)}
.topic-more .tm-t{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink-2)}
.topic-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
/* 記事のタイトルは長いので、言葉の切れ目で折り返せないブラウザ（iPhoneのSafariなど）でも、ふつうの文と同じように折り返す */
.topic-more .go{word-break:normal}
.topic-more li:empty{display:none}
.topic-more:not(:has(a)){display:none}

/* ---------- 印刷・PDFで保存 ----------
   紙では明るい配色に固定し、ヘッダー・下のボタン・スライダーなど画面の操作だけのものは出さない。
   シミュレーションの「印刷・PDFで保存」から印刷したときは、そのシミュレーション以外に .print-hide が付く */
@media print{
  :root:root:root{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#EEF6FC; --surface-3:#DCEDF8;
    --ink:#10283F; --ink-2:#435B71; --ink-3:#5A7186; --line:#D3E4F0; --line-2:#AFCBE0;
    --brand:#0880CE; --brand-ink:#075CA2; --link:#075CA2; --teal:#12BBB9; --teal-ink:#0A7775;
    --gold-soft:#FFF4D6; --gold-ink:#6E4A00; --gold-hi:#FFCC57; --sky-soft:#E3F2FC;
    --btn2-face:#FFFFFF; --btn2-face-hi:#EEF7FD; --btn2-ring:#A3CFEE; --btn2-ink:#075CA2;
    --tint-sky:#E4F3FD; --tint-teal:#DDF5F3; --tint-gold:#FFF2D2; --tint-navy:#E4EBF6;
    --dot:rgba(8,128,206,.12); --stage:rgba(255,255,255,.85);
    --btn-blue:#075CA2; --btn-blue-fg:#FFFFFF; --on-brand:#FFFFFF;
    --warn-bg:#FFF4DA; --warn-line:#EBC15E; --warn-ink:#5E3D00; --info-bg:#E8F5FD; --info-line:#A9D5F0; --bad-ink:#B3261E;
    --logo-stem:#0880CE; --logo-ai:#075CA2; --logo-mane:#12BBB9; --logo-sub:#075CA2; --logo-bar:#72BBE7;
    --s-blue:#0880CE; --s-gold:#B97F0B; --s-navy:#075CA2; --s-teal:#0E9593;
    --box1:#72BBE7; --box2:#12BBB9; --box3:#075CA2; --grid:#E3EEF6; --axis:#8EA7BB; --focus:#0880CE;
    --shadow:none; --shadow-lg:none;
    color-scheme:light;
  }
  @page{margin:12mm 10mm}
  body{background:#FFFFFF;padding:0!important}
  .site-header,.catbar,.mnav,.dock,.site-footer,.skip,.crumbs,.tool-nav,.cta-band,.presets,.preset-msg,.tool-acts,.foot-cta,.sum-btns,.cmp-acts,input[type=range],.print-hide{display:none!important}
  .tool{box-shadow:none;border:1px solid #AFCBE0;overflow:visible}
  .tool *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tool-head{padding-right:26px;background:none}
  .tool-art{display:none}
  .tool-body{display:block}
  .tool-sum{position:static!important;box-shadow:none!important;padding-top:16px}
  .tool-sum .sum-s{display:block!important}
  .tool-inputs{border:0;border-bottom:1px solid var(--line);background:none}
  .tool-results{padding-top:16px}
  .tool-ep{display:none}
  .chart,.panel,.cmp,.subcalc,.ruler-card,.box,.kv > div,table.data tr,.field,.callout,.duo{break-inside:avoid}
  .print-head{display:block!important;padding:16px 26px 10px;border-bottom:2px solid #075CA2;font-size:12.5px;line-height:1.7;color:#10283F}
  .print-head b{font-size:15px}
  .print-head .pu{overflow-wrap:anywhere;color:#435B71}
  a{color:inherit}
}

:root{--im-annuity:url("img/annuity.webp");--im-armchair:url("img/armchair.webp");--im-baby:url("img/baby.webp");--im-balance:url("img/balance.webp");--im-basket:url("img/basket.webp");--im-bond:url("img/bond.webp");--im-boxes:url("img/boxes.webp");--im-bubbles:url("img/bubbles.webp");--im-calc:url("img/calc.webp");--im-car:url("img/car.webp");--im-care:url("img/care.webp");--im-clipboard:url("img/clipboard.webp");--im-consult:url("img/consult.webp");--im-crypto:url("img/crypto.webp");--im-duo:url("img/duo.webp");--im-envelope:url("img/envelope.webp");--im-form:url("img/form.webp");--im-fp_tip:url("img/fp_tip.webp");--im-furusato:url("img/furusato.webp");--im-fx:url("img/fx.webp");--im-giftbox:url("img/giftbox.webp");--im-hearts:url("img/hearts.webp");--im-hero:url("img/hero.webp");--im-hourglass:url("img/hourglass.webp");--im-house:url("img/house.webp");--im-house_tax:url("img/house_tax.webp");--im-invest:url("img/invest.webp");--im-iryohi:url("img/iryohi.webp");--im-keys:url("img/keys.webp");--im-kojo:url("img/kojo.webp");--im-kurashi:url("img/kurashi.webp");--im-lifebuoy:url("img/lifebuoy.webp");--im-lunchbox:url("img/lunchbox.webp");--im-magnifier:url("img/magnifier.webp");--im-mascot_q:url("img/mascot_q.webp");--im-medkit:url("img/medkit.webp");--im-mugs:url("img/mugs.webp");--im-nenmatsu:url("img/nenmatsu.webp");--im-passbook:url("img/passbook.webp");--im-pension:url("img/pension.webp");--im-phone:url("img/phone.webp");--im-piggy:url("img/piggy.webp");--im-piggy_cap:url("img/piggy_cap.webp");--im-pillars:url("img/pillars.webp");--im-post:url("img/post.webp");--im-school:url("img/school.webp");--im-shield:url("img/shield.webp");--im-shinkoku:url("img/shinkoku.webp");--im-signpost:url("img/signpost.webp");--im-stock:url("img/stock.webp");--im-umb_cover:url("img/umb_cover.webp");--im-umb_dollar:url("img/umb_dollar.webp");--im-umb_growth:url("img/umb_growth.webp");--im-umb_yen:url("img/umb_yen.webp");--im-umbrella:url("img/umbrella.webp");--im-wallet:url("img/wallet.webp");--im-watch:url("img/watch.webp");--im-work:url("img/work.webp");}
.ill-annuity{--im:var(--im-annuity);aspect-ratio:640/495}.ill-armchair{--im:var(--im-armchair);aspect-ratio:640/469}.ill-baby{--im:var(--im-baby);aspect-ratio:640/531}.ill-balance{--im:var(--im-balance);aspect-ratio:640/528}.ill-basket{--im:var(--im-basket);aspect-ratio:640/545}.ill-bond{--im:var(--im-bond);aspect-ratio:640/530}.ill-bubbles{--im:var(--im-bubbles);aspect-ratio:640/473}.ill-car{--im:var(--im-car);aspect-ratio:640/440}.ill-care{--im:var(--im-care);aspect-ratio:640/538}.ill-clipboard{--im:var(--im-clipboard);aspect-ratio:640/491}.ill-crypto{--im:var(--im-crypto);aspect-ratio:640/527}.ill-envelope{--im:var(--im-envelope);aspect-ratio:640/361}.ill-form{--im:var(--im-form);aspect-ratio:640/413}.ill-fp_tip{--im:var(--im-fp_tip);aspect-ratio:320/379}.ill-furusato{--im:var(--im-furusato);aspect-ratio:640/417}.ill-fx{--im:var(--im-fx);aspect-ratio:640/579}.ill-giftbox{--im:var(--im-giftbox);aspect-ratio:640/426}.ill-hearts{--im:var(--im-hearts);aspect-ratio:640/449}.ill-hourglass{--im:var(--im-hourglass);aspect-ratio:640/517}.ill-house_tax{--im:var(--im-house_tax);aspect-ratio:640/474}.ill-iryohi{--im:var(--im-iryohi);aspect-ratio:640/414}.ill-keys{--im:var(--im-keys);aspect-ratio:640/484}.ill-kojo{--im:var(--im-kojo);aspect-ratio:640/392}.ill-kurashi{--im:var(--im-kurashi);aspect-ratio:640/483}.ill-lifebuoy{--im:var(--im-lifebuoy);aspect-ratio:640/454}.ill-lunchbox{--im:var(--im-lunchbox);aspect-ratio:640/438}.ill-magnifier{--im:var(--im-magnifier);aspect-ratio:640/471}.ill-mascot_q{--im:var(--im-mascot_q);aspect-ratio:320/348}.ill-medkit{--im:var(--im-medkit);aspect-ratio:640/447}.ill-mugs{--im:var(--im-mugs);aspect-ratio:640/414}.ill-nenmatsu{--im:var(--im-nenmatsu);aspect-ratio:640/412}.ill-passbook{--im:var(--im-passbook);aspect-ratio:640/458}.ill-piggy{--im:var(--im-piggy);aspect-ratio:640/606}.ill-piggy_cap{--im:var(--im-piggy_cap);aspect-ratio:640/474}.ill-pillars{--im:var(--im-pillars);aspect-ratio:640/545}.ill-post{--im:var(--im-post);aspect-ratio:640/476}.ill-school{--im:var(--im-school);aspect-ratio:640/561}.ill-shield{--im:var(--im-shield);aspect-ratio:640/583}.ill-shinkoku{--im:var(--im-shinkoku);aspect-ratio:640/446}.ill-signpost{--im:var(--im-signpost);aspect-ratio:640/498}.ill-stock{--im:var(--im-stock);aspect-ratio:640/554}.ill-umb_cover{--im:var(--im-umb_cover);aspect-ratio:640/572}.ill-umb_dollar{--im:var(--im-umb_dollar);aspect-ratio:640/705}.ill-umb_growth{--im:var(--im-umb_growth);aspect-ratio:640/697}.ill-umb_yen{--im:var(--im-umb_yen);aspect-ratio:640/710}.ill-wallet{--im:var(--im-wallet);aspect-ratio:640/417}.ill-work{--im:var(--im-work);aspect-ratio:640/418}