:root{
  --font:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP","Noto Sans CJK JP",Meiryo,sans-serif;
  --bg:#F7F7F5; --surface:#FFFFFF; --surface2:#F1F2EF; --ink:#1C2321; --sub:#5C6660;
  --line:#E3E6E2; --line2:#D2D7D2; --accent:#0B7A57; --accent-ink:#086045;
  --accent-soft:#E4F1EB; --blue:#3D6ADB; --blue-soft:#E9EEFB; --gold:#9A7B24; --warn:#C24A3F;
  --c-np:#12805C; --c-ng:#9CCFB8; --c-tp:#3D6ADB; --c-tg:#B9C9F3;
  --sh:0 1px 2px rgba(28,35,33,.04),0 4px 16px rgba(28,35,33,.05); --bg:#F3F5F4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101413; --surface:#191F1D; --surface2:#212927; --ink:#E8EDEA; --sub:#96A19B;
    --line:#2A332F; --line2:#39443F; --accent:#2FBE8F; --accent-ink:#5BD3AB;
    --accent-soft:#173229; --blue:#7A97EE; --blue-soft:#1E2740; --gold:#CBA84E; --warn:#E4756A;
    --c-np:#2FBE8F; --c-ng:#20573F; --c-tp:#7A97EE; --c-tg:#2F406B;
    --sh:0 1px 2px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#101413; --surface:#191F1D; --surface2:#212927; --ink:#E8EDEA; --sub:#96A19B;
  --line:#2A332F; --line2:#39443F; --accent:#2FBE8F; --accent-ink:#5BD3AB;
  --accent-soft:#173229; --blue:#7A97EE; --blue-soft:#1E2740; --gold:#CBA84E; --warn:#E4756A;
  --c-np:#2FBE8F; --c-ng:#20573F; --c-tp:#7A97EE; --c-tg:#2F406B;
  --sh:0 1px 2px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.3);
}
html{scroll-padding-top:72px} /* sticky header の下にアンカー先が隠れないように */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.65}
.num{font-family:"Manrope",var(--font);font-feature-settings:"tnum"}
h1,h2,h3{margin:0;line-height:1.35;font-weight:700}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
:is(button,input,label):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;height:60px;gap:8px}
.brand{font-weight:800;font-size:17px;letter-spacing:.01em;margin-right:16px;display:flex;align-items:center;flex:none;white-space:nowrap}
.brand .mark{width:19px;height:19px;background:var(--accent);flex:none;margin-right:8px;
  /* 形の正本は static/images/icon.svg。ここで複製せず mask で参照する(形を変えたら1箇所直せば済む)。
     色は background が担うので light/dark はトークンのまま切り替わる。
     目・コイン・口の抜きは mask の alpha でヘッダーの地色が透ける */
  -webkit-mask:url(/images/icon.svg) center/contain no-repeat; mask:url(/images/icon.svg) center/contain no-repeat}
.brand em{font-style:normal;color:var(--accent);font-weight:700}
/* 項目が9個あり1行の余裕が小さいため、はみ出す分はナビだけを横スクロールさせる。
   min-width:0 がないと flex item のまま縮まず、ブランドと注記が折り返してしまう */
nav{display:flex;gap:2px;height:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
/* まだ項目がある側を薄くする。nav.js が実際のスクロール残量で付け外しする(端では消える) */
nav.fadeR{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
nav.fadeL{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px)}
nav.fadeL.fadeR{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
nav::-webkit-scrollbar{display:none}
nav :is(button,a){border:0;background:none;color:var(--sub);font-size:13px;font-weight:500;padding:0 10px;white-space:nowrap;border-bottom:2px solid transparent;border-top:2px solid transparent;text-decoration:none;display:inline-flex;align-items:center}
nav :is(button,a).on{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.mockchip{margin-left:auto;font-size:11px;color:var(--sub);border:1px solid var(--line2);border-radius:4px;padding:2px 8px;flex:none;white-space:nowrap}

.page{display:none;padding:26px 0 80px}
.page.on{display:block}
.pagehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.pagehead h1{font-size:22px;font-weight:800;letter-spacing:-.015em}
.pagehead p{color:var(--sub);margin:0;font-size:14px;line-height:1.6}

.card{background:var(--surface);border:0;border-radius:18px;box-shadow:0 1px 2px rgba(20,26,23,.05),0 12px 32px rgba(20,26,23,.07)}
.card.form,.card.storecat{box-shadow:none;border:1px solid var(--line);border-radius:16px}

/* courses */
.courses-wrap{margin-bottom:12px}
.c-title{font-size:12.5px;font-weight:700;margin-bottom:6px}
.c-title span{font-weight:400;color:var(--sub);font-size:11.5px;margin-left:8px}
.courses{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.courses::-webkit-scrollbar{display:none}
.courses button{border:1px solid var(--line2);background:var(--surface);color:var(--sub);border-radius:99px;padding:7px 14px;text-align:center;line-height:1.3;white-space:nowrap;flex:none}
.courses button b{font-size:12.5px;font-weight:700}
.courses button span{font-size:11px;opacity:.85;margin-left:4px}
.courses button:hover{border-color:var(--accent);color:var(--accent-ink)}
.courses button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* 用語の?ボタン */
.term{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface2);border:1px solid var(--line2);color:var(--sub);font-size:12px;font-weight:700;cursor:pointer;margin-left:5px;padding:0;vertical-align:-2px}
.term::after{content:"";position:absolute;inset:-12px}
.terminfo{background:var(--surface2);border-radius:8px;padding:8px 12px;margin-top:8px}
.capline .terminfo{flex-basis:100%;margin-top:0}

/* mode tabs */
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:14px;background:var(--surface2);border-radius:14px;padding:4px}
@media(max-width:720px){.modes{grid-template-columns:repeat(2,1fr)}}
.mode{border:0;background:none;border-radius:10px;padding:9px 8px;text-align:center;color:var(--sub);font-size:12px;line-height:1.4}
.mode b{display:block;font-size:13px;color:inherit}
.mode.on{color:var(--accent-ink);background:var(--surface);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.14)}

/* sim layout: form left / result right */
.sim{display:grid;grid-template-columns:308px 1fr;grid-template-rows:auto 1fr;gap:14px;align-items:start}
.sim .form{grid-row:1/3}
.res-head{padding-bottom:18px}
/* grid item の min-width:auto は中身の min-content まで伸びるため、.dt-wrap の
   overflow-x スクロールが効かず結果カードごとページが横に溢れていた */
.sim>*{min-width:0}
@media(max-width:860px){.sim{grid-template-columns:1fr}}
.form{padding:4px 18px 14px}
.formhead{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.08em;padding:14px 0 2px}
.frow{padding:13px 0 11px;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.lbl{display:flex;justify-content:space-between;align-items:baseline}
.lbl span{font-size:12px;font-weight:700;color:var(--sub)}
.lbl output{font-size:18px;font-weight:800;font-family:"Manrope",var(--font);font-feature-settings:"tnum"}
.lbl output small{font-size:11px;font-weight:700;color:var(--sub);margin-left:1px}
.stepline{display:flex;align-items:center;gap:9px;margin-top:8px}
.step{width:30px;height:30px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);font-size:17px;line-height:1;display:grid;place-items:center;color:var(--sub);flex:none;padding:0;transition:.12s}
.step:hover{border-color:var(--accent);color:var(--accent-ink)}
input[type=range]{flex:1;appearance:none;-webkit-appearance:none;height:22px;margin:0;border-radius:0;
  background-color:transparent;background-repeat:no-repeat;background-position:0 50%;background-size:100% 6px;
  background-image:linear-gradient(90deg,var(--line2) 0,var(--line2) 100%)}
input[type=range]::-moz-range-track{height:6px;background:transparent}
input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.35)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.presets{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.preset{border:1px solid var(--line);background:none;color:var(--sub);border-radius:5px;padding:2px 9px;font-size:11.5px}
.preset.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft);font-weight:700}
.hint{font-size:13.5px;color:var(--sub);margin-top:7px;line-height:1.7}
/* details(折りたたみ) */
details.adv{border-top:1px solid var(--line)}
details.adv summary{list-style:none;cursor:pointer;padding:13px 0;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;transition:.12s}
details.adv summary:hover{color:var(--accent-ink)}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);transform:rotate(-45deg);transition:transform .15s;flex:none}
details.adv[open] summary::before{transform:rotate(45deg)}
.advhint{font-size:11px;color:var(--sub);font-weight:400}
.advt{white-space:nowrap}
details.scat{border-bottom:1px solid var(--line)}
details.scat summary{list-style:none;cursor:pointer;padding:11px 18px;font-size:12.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
details.scat summary::-webkit-details-marker{display:none}
details.scat summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);transform:rotate(45deg);transition:transform .15s}
details.scat[open] summary::after{transform:rotate(-135deg)}
details.scat .storebtns{padding:2px 18px 13px}
details.scat summary .cnt{font-size:10.5px;color:var(--sub);font-weight:500}
/* 経済圏: レベル選択チップ */
.lvlseg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
.lvl{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 2px;font-size:11.5px;color:var(--sub);line-height:1.35;text-align:center}
.lvl small{display:block;font-size:10px;font-family:"Manrope",var(--font)}
.lvl.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:700}

.tglrow{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;padding:12px 0}
.tglrow+.tglrow{border-top:1px solid var(--line)}
.tglrow input{position:absolute;opacity:0}
.knob{width:38px;height:22px;border-radius:99px;background:var(--line2);position:relative;transition:.15s;flex:none}
.knob::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:.15s}
.tglrow input:checked+.knob{background:var(--accent)}
.tglrow input:checked+.knob::after{left:18px}
.tglrow .t{font-size:12.5px;font-weight:700}
.tglrow .t small{display:block;font-size:11px;color:var(--sub);font-weight:400}

/* result */
.result{padding:20px 22px 14px}
.res-top{display:flex;gap:14px 36px;flex-wrap:wrap;align-items:flex-end;margin-bottom:4px}
.hero .k{font-size:12px;font-weight:700;color:var(--sub)}
.hero .v{font-size:clamp(32px,4.8vw,44px);font-weight:800;line-height:1.12;letter-spacing:-.02em;font-family:"Manrope",var(--font);font-feature-settings:"tnum";color:var(--ink)}
.hero .v small{font-size:15px;font-weight:700;color:var(--sub)}
.hero .v .u{color:var(--accent-ink)}
.subs{display:flex;gap:20px;flex-wrap:wrap;padding-bottom:5px;margin-left:auto}
.skpi .k{font-size:11.5px;color:var(--sub);font-weight:700}
.skpi .v{font-size:17px;font-weight:800;font-family:"Manrope",var(--font);font-feature-settings:"tnum"}
.skpi .v.g{color:var(--accent-ink)} .skpi .v.b{color:var(--blue)} .skpi .v.w{color:var(--warn)}
.chartbox{position:relative;margin-top:6px}
svg.chart{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:8px;padding:8px 11px;font-size:11.5px;line-height:1.55;opacity:0;transition:opacity .1s;min-width:168px;z-index:5}
.tip b{font-size:13px}
.tip .r{display:flex;justify-content:space-between;gap:12px}
.tip .r i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px}
.tip .div{border-top:1px solid color-mix(in srgb,var(--bg) 30%,transparent);margin:4px 0}
.legend{display:flex;gap:13px;flex-wrap:wrap;font-size:11px;color:var(--sub);padding:8px 2px 0}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.legend .dash{width:14px;height:0;border-top:2px dashed var(--sub);vertical-align:3px}
.legend .band{background:var(--ink);opacity:.22}
details.note{margin-top:10px}
details.note .foot-note{margin-top:0;padding-bottom:6px}
.capline{display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:12px;padding:11px 2px 2px;font-size:12px}
.capline b{font-family:"Manrope",var(--font);font-feature-settings:"tnum"}
.gauge{flex:1;min-width:130px;height:8px;border-radius:4px;background:var(--surface2);overflow:hidden}
.gauge div{height:100%;background:var(--accent);transition:width .2s}
.foot-note{font-size:13px;color:var(--sub);margin-top:12px;line-height:1.75}

/* cards page */
.viewseg{display:inline-flex;background:var(--surface2);border-radius:12px;padding:3px;margin-bottom:16px}
.viewseg button{border:0;background:none;border-radius:9px;padding:6px 18px;font-size:13px;color:var(--sub);font-weight:500;white-space:nowrap}
.viewseg button.on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.storegrid{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
@media(max-width:860px){.storegrid{grid-template-columns:1fr}}
.storecat{padding:6px 0 10px}
.storecat .sc-h{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.08em;padding:10px 18px 6px}
.storebtns{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px}
.store{border:1px solid var(--line2);background:var(--surface);border-radius:99px;padding:6px 13px;font-size:12.5px;color:var(--ink);transition:.12s}
.store:hover{border-color:var(--accent)}
.store.on{border-color:var(--ink);background:var(--ink);color:var(--bg);font-weight:700}
.searchbox{position:sticky;top:0;z-index:6;background:var(--surface);margin:0;padding:13px 18px 10px;border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.searchbox input{width:100%;border:0;border-radius:10px;background:var(--surface2);color:var(--ink);font:inherit;font-size:13px;padding:9px 13px}
.searchbox input::placeholder{color:var(--sub)}
.rank-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 20px 4px}
.rank-h h3{font-size:16px}
.rank-h h3 em{font-style:normal;color:var(--accent-ink)}
.spendmini{display:flex;align-items:center;gap:10px;padding:8px 20px 4px;font-size:12px;color:var(--sub)}
.spendmini output{font-weight:800;color:var(--ink);font-family:"Manrope",var(--font);font-size:14px;min-width:64px;text-align:right}
.spendmini input[type=range]{max-width:220px}
.rankrow{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:15px 20px;border-top:1px solid var(--line);transition:background .12s}
.rankrow:hover{background:color-mix(in srgb,var(--surface2) 55%,transparent)}
.rankrow:first-of-type{border-top:0}
.rankrow.top{background:color-mix(in srgb,var(--accent-soft) 40%,var(--surface))}
.rankno{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;font-family:"Manrope",sans-serif;background:var(--surface2);color:var(--sub)}
.rankrow.top .rankno{background:var(--accent);color:#fff}
.rankrow h4{margin:0;font-size:14px;font-weight:700}
.rankrow .cond{font-size:12px;color:var(--sub);margin-top:1px}
.rankrow .cond .why{color:var(--accent-ink);font-weight:700}
.rankrow .rr{text-align:right}
.rankrow .pct{font-size:23px;font-weight:800;letter-spacing:-.01em;font-family:"Manrope",var(--font);color:var(--accent-ink);line-height:1.1}
.rankrow .pct small{font-size:10.5px;font-weight:500;color:var(--sub)}
.rankrow:not(.top) .pct{color:var(--ink)}
.rankrow .peryear{font-size:12px;color:var(--sub);font-family:"Manrope",var(--font)}
.alloc{display:flex;align-items:center;gap:14px;padding:12px 0 0}
.alloc .al-l{flex:1;min-width:0}
.alloc h4{margin:0;font-size:13.5px;font-weight:700}
.alloc .al-bar{height:10px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:6px}
.alloc .al-bar div{height:100%}
.alloc .pct{font-size:20px;font-weight:800;font-family:"Manrope",var(--font);color:var(--ink);white-space:nowrap}
.alloc .pct small{font-size:11px;font-weight:500;color:var(--sub)}
.rank-h.pad0{padding:0 0 4px}
.bestnote.m0{margin:0 0 6px;border-top:0;padding-top:0}
.bestnote{margin:10px 20px 16px;font-size:12px;color:var(--sub);border-top:1px dashed var(--line);padding-top:10px}
.best{display:inline-block;white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.08em;background:var(--gold);color:#fff;border-radius:4px;padding:1px 6px;margin-left:7px;vertical-align:2px}
.rankno.r1{background:var(--gold);color:#fff}
.rankno.r2{background:#9AA4A0;color:#fff}
.rankno.r3{background:#B78A5C;color:#fff}
.cmpbtn{border:1px solid var(--line2);background:var(--surface);color:var(--sub);border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700;margin-top:6px;margin-right:4px;transition:.12s}
.cmpbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.cmpbtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.tray{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:var(--bg);padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 -4px 16px rgba(0,0,0,.2);border-radius:16px 16px 0 0}
.tray .tchip{background:color-mix(in srgb,var(--bg) 18%,transparent);border-radius:6px;padding:3px 10px;font-size:12px;display:inline-flex;gap:7px;align-items:center}
.tray .tchip button{border:0;background:none;color:inherit;font-size:13px;padding:0;opacity:.7;position:relative}
.tray .go{margin-left:auto;border:0;background:var(--accent);color:#fff;font-weight:700;border-radius:7px;padding:7px 18px;font-size:13px}
.tray .clear{border:0;background:none;color:color-mix(in srgb,var(--bg) 70%,transparent);font-size:12px}
.tray .tlabel{font-size:12px;font-weight:700}
.tray .tchips{display:inline-flex;gap:6px;flex-wrap:wrap}
.tray .tchip button::after{content:"";position:absolute;inset:-12px}
.dt-wrap{--dtbg:var(--surface);overflow-x:auto;
  background-image:linear-gradient(90deg,var(--dtbg),transparent),linear-gradient(90deg,transparent,var(--dtbg)),
    linear-gradient(90deg,color-mix(in srgb,var(--ink) 16%,transparent),transparent),
    linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 16%,transparent));
  background-position:left center,right center,left center,right center;
  background-size:26px 100%,26px 100%,14px 100%,14px 100%;
  background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}
.dt-wrap.plain{--dtbg:var(--bg)}
table.dt{border-collapse:collapse;width:100%;font-size:12.5px}
.dt-wrap.wide table.dt{min-width:720px}
.dt td.num{white-space:nowrap}
.dt tr.on td,.dt .on{background:var(--accent-soft)}
.dt tr.on td.on{font-weight:800;color:var(--accent-ink)}
.dt .rowh a{color:inherit;text-decoration:none;display:block;padding:0}
.dt .rowh a small{display:block;font-size:11px;color:var(--accent-ink);font-weight:500}
.dt th,.dt td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dt thead th{font-size:12px;color:var(--sub);letter-spacing:.03em;background:var(--surface2);white-space:nowrap}
.dt td a{display:inline-block;padding:4px 0}
.dt .rowh{font-size:12.5px;color:var(--ink);font-weight:700;white-space:nowrap;position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:1px 0 0 var(--line)}
.dt-wrap.plain .rowh{background:var(--bg)}
.dt thead .rowh{background:var(--surface2)}
.dt tr.on .rowh{background:var(--accent-soft)}
.dt td.num,.dt th.num{text-align:right;font-family:"Manrope",var(--font);font-feature-settings:"tnum"}
.dt tr:last-child td{border-bottom:0}
.dt .em{color:var(--accent-ink);font-weight:800}
.cmphead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 6px}
.cmphead h3{font-size:15px}
.cmphead button{border:0;background:none;color:var(--sub);font-size:12px}
.res-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 2px}
.rt-r{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.addscn{border:1px solid var(--line2);background:var(--surface);color:var(--sub);border-radius:99px;padding:6px 14px;font-size:12px;font-weight:700;text-decoration:none;display:inline-block;transition:.15s}
.addscn:hover{border-color:var(--accent);color:var(--accent-ink)}
.scntbl{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.scnrow{display:flex;gap:8px 16px;align-items:baseline;font-size:12px;padding:6px 2px;flex-wrap:wrap}
.scnrow .dot{width:9px;height:9px;border-radius:2px;flex:none;align-self:center}
.scnrow .cond{color:var(--sub)}
.scnrow .fin{margin-left:auto;font-weight:800;font-family:"Manrope",var(--font);font-feature-settings:"tnum"}
.scnrow .rm{border:0;background:none;color:var(--sub);font-size:12px;padding:0 2px}
#in_band{border:1px solid var(--line2);background:var(--surface);color:var(--sub);border-radius:99px;padding:5px 10px;font-size:12px;font-weight:700}
.pinbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--sub);margin:8px 0 2px}
.numedit{width:5.5em;font:inherit;font-weight:700;text-align:right;border:1px solid var(--accent);border-radius:6px;padding:1px 4px;background:var(--surface);color:var(--ink)}
.numedit::-webkit-outer-spin-button,.numedit::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#p-sim output[id^=v_]{cursor:text;border-bottom:1px dashed var(--line2);padding:0 2px;border-radius:4px 4px 0 0;transition:.12s}
#p-sim output[id^=v_]:hover{background:var(--accent-soft);border-bottom-color:var(--accent)}
#p-sim output[id^=v_]::after{content:"✎";font-size:10px;color:var(--sub);margin-left:4px;opacity:.65;font-family:var(--font)}
#p-sim output[id^=v_]:has(.numedit){border-bottom-color:transparent;background:none}
#p-sim output[id^=v_]:has(.numedit)::after{content:""}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid var(--line2);background:var(--surface);color:var(--sub);border-radius:99px;padding:5px 14px;font-size:12.5px;transition:.12s}
.chip.on{border-color:var(--ink);background:var(--ink);color:var(--bg);font-weight:700}
.cc-list{display:flex;flex-direction:column;gap:0;border:0;border-radius:18px;background:var(--surface);box-shadow:0 1px 2px rgba(20,26,23,.05),0 12px 32px rgba(20,26,23,.07);overflow:hidden}
.cc{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:15px 18px;border-bottom:1px solid var(--line);align-items:center}
.cc:last-child{border-bottom:0}
.cc h3{font-size:14.5px}
.cc .csub{font-size:11.5px;color:var(--sub);margin-top:1px}
.pill{display:inline-block;font-size:11.5px;font-weight:700;border-radius:4px;padding:1px 7px;background:var(--surface2);color:var(--sub);margin:4px 4px 0 0}
.pill.hot{background:var(--accent-soft);color:var(--accent-ink)}
.cc .rates{text-align:right}
.cc .r-max{font-size:19px;font-weight:800;color:var(--accent-ink);font-family:"Manrope",var(--font)}
.cc .r-max small{display:block;font-size:10.5px;color:var(--sub);font-weight:500}
.cc .r-base{font-size:12px;color:var(--sub)}
.cardsim{display:grid;grid-template-columns:300px 1fr;gap:14px;margin-top:16px;align-items:start}
@media(max-width:760px){.cardsim{grid-template-columns:1fr}}
.pad{padding:16px 18px}
.panel-h{font-size:13px;font-weight:700;margin-bottom:8px}
.barrow{display:grid;grid-template-columns:128px 1fr 84px;gap:9px;align-items:center;font-size:12px;margin:8px 0}
.bar{height:16px;border-radius:3px;background:var(--accent);min-width:2px}
.barrow .bv{text-align:right;font-weight:700;font-family:"Manrope",var(--font)}

/* roadmap */
.rmtable{border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:none;overflow:hidden}
.rmrow{display:grid;grid-template-columns:64px 220px 1fr;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline}
.rmrow:last-child{border-bottom:0}
@media(max-width:680px){.rmrow{grid-template-columns:56px 1fr}.rmrow p{grid-column:2}}
.rmrow .pri{font-size:10.5px;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:1px 7px;text-align:center}
.pri.p1{background:var(--accent-soft);color:var(--accent-ink)} .pri.p2{background:var(--blue-soft);color:var(--blue)} .pri.p3{background:var(--surface2);color:var(--sub)}
.rmrow h3{font-size:13.5px}
.rmrow p{margin:0;color:var(--sub);font-size:12px}
.adslot{border:1.5px dashed var(--line2);border-radius:10px;background:var(--surface2);color:var(--sub);font-size:11px;display:grid;place-items:center;min-height:100px;margin:16px 0;letter-spacing:.08em}
/* Markdown 本文。h2,h3 は基底で margin:0 なので、記事側では見出しの間隔を戻す */
.prose{padding:22px 24px 26px}
.prose>:first-child{margin-top:0}
.prose :is(h2,h3){margin:24px 0 8px}
.prose h2{font-size:17px}
.prose h3{font-size:14.5px}
.prose :is(p,ul,ol){margin:10px 0}
.prose li{margin:4px 0}
.prose pre{overflow-x:auto;background:var(--surface2);border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:1.6}
.prose a{color:var(--accent-ink)}
/* Markdown の表は render-table.html が .dt-wrap で包む。3列以上は 390px に収まらないので横スクロール */
.prose-tbl{margin:14px 0}
.prose-tbl table{border-collapse:collapse;width:100%;font-size:13.5px}
.prose-tbl[data-cols="3"] table{min-width:440px}
.prose-tbl[data-cols="4"] table{min-width:580px}
.prose-tbl[data-cols="5"] table{min-width:720px}
.prose-tbl[data-cols="6"] table{min-width:860px}
.prose-tbl :is(th,td){padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose-tbl thead th{font-size:12px;color:var(--sub);letter-spacing:.05em;background:var(--surface2);white-space:nowrap}
.prose-tbl tbody tr:last-child td{border-bottom:0}
/* 記事末尾の更新日と一次情報 */
.srcbox{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--sub)}
.srcbox h2{font-size:13px;color:var(--sub);letter-spacing:.04em;margin:0 0 6px}
.srcbox ul{margin:0;padding-left:1.2em}
.srcbox li{margin:3px 0;word-break:break-all}
.srcbox a{color:var(--accent-ink)}
.updated{font-size:12.5px;color:var(--sub);margin:0 0 14px}

.faq{margin-top:22px}
.faq h3{font-size:15px;margin-bottom:8px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:8px}
.faq summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--sub);flex:none}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 16px 13px;font-size:13px;color:var(--sub);line-height:1.8}
footer{border-top:1px solid var(--line);color:var(--sub);font-size:11px;padding:20px 0 36px}
footer nav2,footer .flinks{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
footer .flinks a{color:var(--sub);font-size:12px;padding:5px 0}

/* ── mobile ── */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(8px);bottom:24px;z-index:90;
  background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;border-radius:99px;
  padding:9px 18px;box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:860px){.toast{bottom:calc(64px + env(safe-area-inset-bottom))}}
.simbar{display:none}
/* ナビが1行に収まらない幅では、ページ全体を横スクロールさせずナビだけ横スクロールさせる
   (項目が9個になり 721〜900px でヘッダーが viewport を超えるため、折り返しの開始を 900px に上げた) */
@media(min-width:901px){
  nav :is(button,a){padding:0 7px}
}
@media(max-width:900px){
  /* 注記はヘッダーからナビの幅を奪うだけなので隠し、同じ内容は各ツールの結果直下に出す */
  .mockchip{display:none}
  nav :is(button,a),.brand{min-height:44px}
  html{scroll-padding-top:96px}
  .hd{height:auto;flex-wrap:wrap;padding-top:9px;gap:6px}
  nav{order:3;width:calc(100% + 32px);margin:2px -16px 0;padding:0 12px}
}
@media(max-width:720px){
  .brand{font-size:15px}
  nav :is(button,a){padding:9px 11px;font-size:12.5px}
  .pagehead h1{font-size:18px}
  .modes{gap:5px}
  .mode{padding:8px 6px;font-size:11px}
  .mode b{font-size:12.5px}
}
@media(max-width:860px){
  .page{padding-bottom:120px}
  /* align-items は base で start。縦積みでは shrink-to-fit になり、入力フォームが
     幅いっぱいにならず、結果カードは中の表の min-content(560px)まで広がって
     ページごと横に溢れていた。縦積みのときだけ stretch に戻す */
  .sim{display:flex;flex-direction:column;align-items:stretch}
  /* スマホは 結果の数字 → 条件 → グラフ の順。条件を触った直後に上の数字が変わるのが見える */
  .res-head{order:-2}
  .sim .form{order:-1}
  .result{padding:16px 14px 12px}
  .form{padding:2px 14px 10px}
  .res-top{gap:10px 22px}
  .subs{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;width:100%;padding-bottom:0;margin-top:4px}
  .hero{width:100%}
  .hero .v{font-size:38px}
  .capline .gauge{min-width:90px}
  .simbar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:flex;justify-content:space-between;align-items:center;gap:12px;
    background:var(--ink);color:var(--bg);padding:10px 18px calc(10px + env(safe-area-inset-bottom));font-size:11.5px;border:0;width:100%;text-align:left;border-radius:16px 16px 0 0}
  .simbar b{font-size:17px;font-weight:800}
  .tray{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media(max-width:640px){
  /* 本文・注記はモバイルでも読める大きさで出す(以前は display:none で消していた) */
  .pagehead p,.hint,.foot-note{font-size:14px}
  .res-tools{gap:8px}
  .res-tools .addscn{padding:7px 12px;font-size:12px}
  .adslot{min-height:80px}
  .advhint{display:none}
  .courses button span{display:none}
  .c-title span{display:block;margin:2px 0 0}
  .msub{display:none}
  .mode{padding:12px 6px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .viewseg{display:flex;width:100%}
  .viewseg button{flex:1;padding:6px 4px;font-size:12px}
  .res-tools .viewseg{width:auto}
  .rankrow{padding:12px 14px;gap:10px}
  .rank-h{padding:14px 14px 4px}
  .spendmini{padding:6px 14px 4px}
  .bestnote{margin:8px 14px 14px}
  .cc{padding:13px 14px}
  .cmphead{padding:12px 14px 4px}
  .capline{font-size:12.5px}
  /* タップ領域を 44px 以上に。inline-flex は中央寄せのため(高さだけ足すと文字が上に付く) */
  .step{width:44px;height:44px;border-radius:12px;font-size:19px}
  input[type=range]{height:44px}
  :is(.preset,.chip,.store,.cmpbtn,.viewseg button,.addscn,.tray .go,.tray .clear,.cmphead button){min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .courses button,.tglrow,#in_band,.searchbox input,details.scat summary,.faq summary{min-height:44px}
  /* 情報を持つ小さめの行(条件・対象者・表・更新日)も読める大きさに上げる */
  .rankrow .cond,.updated,.cc .csub,table.dt{font-size:13px}
  .preset{padding:2px 14px}
  .cmpbtn{padding:3px 14px}
  /* 全幅カードでは 18px の角丸と2枚重ねの影が重く見えるので1段に落とす */
  .card,.cc-list{border-radius:14px;box-shadow:0 1px 2px rgba(20,26,23,.05),0 4px 14px rgba(20,26,23,.06)}
  .card.form,.card.storecat{box-shadow:none}
}
/* 改悪・改善情報 */
.pill.bad{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);text-decoration:none}
/* カード別フィルタはモバイルで横スクロール(.courses と同じ扱い。折り返すと4行になり本文が押し下がる) */
@media(max-width:720px){
  #chg-cardf{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:0 16px}
  #chg-cardf::-webkit-scrollbar{display:none}
  #chg-cardf .chip{flex:none}
}
.chg-h{font-size:15px;font-weight:800;margin:18px 0 10px;display:flex;align-items:baseline;gap:8px}
.chg-h small{font-size:11.5px;color:var(--sub);font-weight:500}
.chg-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
@media(min-width:861px){.chg-grid{grid-template-columns:1fr 1fr}}
.chg{background:var(--surface);border-radius:16px;box-shadow:var(--sh)}
.chg summary{list-style:none;cursor:pointer;padding:14px 16px}
.chg summary::-webkit-details-marker{display:none}
.chg-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--sub)}
.chg-top time{font-weight:700;color:var(--ink)}
.chg-top .cnt{margin-left:auto;font-weight:700;color:var(--accent-ink)}
.chg-top .cnt:empty{display:none}
.kb{font-size:11.5px;font-weight:700;border-radius:4px;padding:1px 7px}
.kb-bad{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.kb-good{background:var(--accent-soft);color:var(--accent-ink)}
.kb-new{background:var(--blue-soft);color:var(--blue)}
.kb-end{background:var(--surface2);color:var(--sub)}
/* データ鮮度バッジ。確認日から180日超(Hugo ビルド時に判定)の項目にだけ付く */
.stale-badge{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;border-radius:4px;padding:1px 7px;background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.chg h3{font-size:14px;margin-top:5px}
.chg-who{margin:3px 0 0;font-size:12px;color:var(--sub)}
.chg-body{padding:0 16px 14px;border-top:1px solid var(--line);font-size:13px}
.chg-body dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:12px 0 4px;font-size:12.5px}
.chg-body dt{color:var(--sub)}
.chg-body dd{margin:0;font-weight:700}
.chg-body p{margin:8px 0 0}
.chg-src{font-size:12.5px;color:var(--sub)}
.chg-src a{color:var(--accent-ink);display:inline-block;padding:8px 0}
.chg-empty{font-size:12.5px;color:var(--sub);padding:12px 16px;background:var(--surface2);border-radius:12px;margin:0}
.chg-now{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px;align-items:start}
@media(max-width:860px){.chg-now{grid-template-columns:1fr}}
.chg-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;margin:0}
.chg-kv dt{color:var(--sub)}
.chg-kv dd{margin:0;font-weight:700}
@media(pointer:coarse){
  .step{width:44px;height:44px;border-radius:12px;font-size:19px}
  input[type=range]{height:44px}
  input[type=range]::-webkit-slider-thumb{width:22px;height:22px}
  :is(.preset,.chip,.store,.cmpbtn,.viewseg button,.addscn){min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .courses button,.tglrow{min-height:44px}
}
/* テンプレートの style 直書きを置き換えるためのクラス(見た目は元と同値) */
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt14{margin-top:14px}
.mt16{margin-top:16px}.mt18{margin-top:18px}.mt26{margin-top:26px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb14{margin-bottom:14px}.mb22{margin-bottom:22px}.mb26{margin-bottom:26px}
.m0{margin:0}
.pad-row{padding:10px 20px}
.nw{white-space:nowrap}
.frow.tight{padding-top:2px;padding-bottom:2px}
.frow.bt,.rank-h.bt{border-top:1px solid var(--line)}
.rank-h .cnt{font-size:11px;color:var(--sub);font-weight:500;margin-left:8px}
.bestnote.tight{margin-top:0;border-top:0;padding-top:2px}
.hero .v.sm{font-size:26px}
.tglrow.bare{padding:0}
.tglrow.bare .t{font-size:12px}
.viewseg.wrap2{flex-wrap:wrap}
.panel-h.bare{padding:0 2px 6px}
.chg-kv dd small{font-weight:500;color:var(--sub);font-size:12.5px;display:block}
.best.ok{background:var(--accent)}
.ctarow{padding:4px 20px 18px;display:flex;gap:8px;flex-wrap:wrap}
.nextstep{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.prose.tight{padding:18px 22px}
.brand,.cc h3 a{text-decoration:none;color:inherit}
/* 結果直下に出す「いつ時点のデータか」の1行(ヘッダーの注記をモバイルで隠した代わり) */
.asof{font-size:13px;color:var(--sub);margin:10px 2px 0}
@media(max-width:640px){.asof{font-size:14px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* calendar */
.calm{font-size:13px;color:var(--sub);margin:18px 0 8px;font-weight:700}
details.cal{border-bottom:1px solid var(--line)}
details.cal:last-child{border-bottom:0}
details.cal summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:96px 1fr;gap:4px 14px;padding:13px 18px;align-items:start}
details.cal summary::-webkit-details-marker{display:none}
.cald{font-weight:800;font-size:15px;line-height:1.3}
.cald small{display:block;font-size:13px;color:var(--accent-ink);font-weight:700;font-family:var(--font)}
.calb b{display:block;font-size:14px;margin-top:3px}
.calb .pill{margin:0 4px 0 0}
.calb .csub{display:block;font-size:12px;color:var(--sub);margin-top:2px}
.caln{padding:0 18px 14px 128px;font-size:13.5px;color:var(--sub);line-height:1.75}
.caln a{color:var(--accent-ink);display:inline-block;padding:8px 0}
.calv{display:block;font-size:11px;margin-top:4px}
.calsub{padding:20px 22px;margin-top:22px}
.calsub h3{font-size:15px}
.calsub p{color:var(--sub);font-size:12.5px;margin:6px 0 12px}
.calbtns{display:flex;gap:8px;flex-wrap:wrap}
.calbtns .addscn{text-decoration:none;display:inline-block}
.calnext{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px}
.calnext a{color:var(--accent-ink);display:inline-block;padding:8px 0}
.hint a{color:var(--accent-ink)}
@media(max-width:640px){
  details.cal summary{grid-template-columns:78px 1fr;padding:12px 14px}
  .cald{font-size:14px}
  .caln{padding:0 14px 12px 14px}
}

/* ── 上のモバイル指定より後ろで定義しているセレクタの上書き(同一詳細度なので順序で勝たせる) ── */
@media(max-width:640px){
  .caln{font-size:14px}
  .chg-who{font-size:13px}
  .chg{border-radius:14px;box-shadow:0 1px 2px rgba(20,26,23,.05),0 4px 14px rgba(20,26,23,.06)}
}

/* ── 回遊導線: ツール一覧・関連記事・フッターのサイト内リンク ── */
.sec-h{font-size:16px;font-weight:800;margin:26px 0 10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sec-h .more{font-size:12.5px;font-weight:500;color:var(--accent-ink)}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.tool{display:block;background:var(--surface);border-radius:14px;padding:14px 16px;box-shadow:var(--sh);text-decoration:none;color:inherit;min-height:44px}
.tool b{display:block;font-size:14px;margin-bottom:3px}
.tool span{display:block;font-size:12px;color:var(--sub);line-height:1.55}
.tool:hover b{color:var(--accent-ink)}
.prose+.sec-h{margin-top:22px}
footer .fnav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
footer .fnav a{color:var(--ink);font-size:12.5px;padding:5px 0;text-decoration:none}
footer .fnav a:hover{color:var(--accent-ink)}

/* ── スマホ: 表・小さい文字・4択セグメント ── */
@media(max-width:640px){
  .dt .mobhide{display:none}
  .skpi .k,.preset,.rankrow .cond,.legend{font-size:12.5px}
  .viewseg.wrap2{display:grid;grid-template-columns:1fr 1fr}
  html{scroll-padding-top:112px}
}

/* ── ランキングの折りたたみ・開閉の目印・その他 ── */
.rankrow.more{display:none}
.showall .rankrow.more{display:grid}
.showmore{display:block;width:100%;border:0;border-top:1px solid var(--line);background:none;color:var(--accent-ink);font-weight:700;font-size:13px;padding:12px;min-height:44px}
.chg summary,details.cal summary{position:relative;padding-right:36px}
.chg summary::after,details.cal summary::after{content:"";position:absolute;right:16px;top:20px;width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);transition:transform .15s}
.chg[open] summary::after,details.cal[open] summary::after{transform:rotate(-135deg)}
details.cal.nobody summary::after{display:none}
details.cal.nobody summary{cursor:default}
.calsub.top{margin:0 0 18px;padding:16px 20px}
.calsub.top h3{font-size:14px}
.px20{padding-left:20px;padding-right:20px}
.frow.px20{border-bottom:1px solid var(--line)}
.cc .rates{max-width:45%}
@media(max-width:640px){
  .cc{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  #chg-cardf{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
}
/* スマホ: 列の多い表(.wide)は 1行=1カード に組み替える。項目名は td の data-l から出す */
@media(max-width:640px){
  .dt-wrap.wide{overflow:visible;background:none}
  .dt-wrap.wide table.dt{min-width:0}
  .dt-wrap.wide thead{display:none}
  .dt-wrap.wide tbody,.dt-wrap.wide tr{display:block}
  /* 項目名と値は同じ行に並べる(縦に積むと1件12行=約540pxになっていた) */
  .dt-wrap.wide td{display:flex;gap:10px;align-items:baseline}
  .dt-wrap.wide tr{background:var(--surface);border-radius:14px;box-shadow:var(--sh);padding:14px 16px 10px;margin-bottom:10px;position:relative}
  .dt-wrap.wide td{border:0;padding:4px 0;text-align:left;white-space:normal;font-size:13.5px}
  .dt-wrap.wide td::before{content:attr(data-l);flex:none;width:74px;font-size:12px;color:var(--sub);font-weight:700}
  .dt-wrap.wide td.rowh{display:block;position:static;font-size:16px;padding-right:90px;box-shadow:none;background:none}
  .dt-wrap.wide td.rowh a small{display:inline;margin-left:8px}
  .dt-wrap.wide td.em{display:block;position:absolute;top:12px;right:16px;font-size:22px;padding:0}
  .dt-wrap.wide td.em::before{display:none}
}
.dt-wrap.wide th:nth-child(3){min-width:240px}

/* 改悪情報: フィルタは追従(発効済み24件を読み進めても絞り込める) */
.chg-filters{position:sticky;top:60px;z-index:5;background:var(--bg);padding:8px 0 2px;margin:-8px 0 0}
@media(max-width:900px){.chg-filters{top:106px}}
.tray .go:disabled{opacity:.55;cursor:default;background:var(--sub)}
@media(max-width:900px){
  header.compact .brand{display:none}
  header.compact .hd{padding-top:0}
  header.compact nav{margin-top:0}
}

/* ══ スマホの情報密度 ══
   14px×行間1.65・カード padding 20px・説明文3行 で1画面に入る行数が少なかったため、
   文字は本文14px/補助13px(下限12px)を保ったまま、行間・余白・説明文の行数を詰める。
   タップ領域44pxは維持する(上のモバイル指定より後ろに置いて順序で勝たせる) */
@media(max-width:640px){
  body{line-height:1.5}
  .page{padding:12px 0 72px}
  .pagehead{margin-bottom:10px;gap:4px 12px}
  .pagehead h1{font-size:19px}
  .pagehead p,.hint,.foot-note,.asof,.bestnote{font-size:13px;line-height:1.55}
  .hint{margin-top:5px}
  .foot-note{margin-top:8px}
  .asof{margin-top:7px}
  .card,.cc-list{border-radius:12px}
  /* シミュレーター系 */
  .result{padding:12px 13px 10px}
  .form{padding:0 13px 8px}
  .formhead{padding:10px 0 0}
  .frow{padding:9px 0 8px}
  .frow.px20{padding-left:13px;padding-right:13px}
  .stepline{margin-top:5px}
  .presets{margin-top:5px}
  .hero .v{font-size:32px}
  .subs{gap:7px 16px;margin-top:2px}
  .modes{margin-bottom:9px}
  .courses-wrap{margin-bottom:10px}
  .legend{padding:5px 2px 0;gap:6px 10px}
  .capline{margin-top:8px;padding-top:8px}
  .nextstep{margin-top:9px;padding-top:9px}
  .res-tools{margin:10px 0 2px}
  details.adv summary{padding:10px 0}
  /* 記事・説明文 */
  .prose{padding:14px 15px 16px}
  .prose :is(p,ul,ol){margin:7px 0}
  .prose :is(h2,h3){margin:16px 0 5px}
  .prose li{margin:2px 0}
  .prose p{line-height:1.6}
  /* 一覧カード: 説明文は2行で打ち切る(3〜4行で1件130pxになっていた) */
  .cc{padding:11px 14px;gap:2px 12px}
  .cc .csub{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cc .csub+.csub{-webkit-line-clamp:1}
  .sec-h{font-size:15px;margin:16px 0 7px}
  .prose+.sec-h{margin-top:14px}
  .tools{gap:7px}
  .tool{padding:10px 13px}
  .tool span{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* ランキング・表 */
  .rank-h{padding:11px 13px 2px}
  .rankrow{padding:9px 13px;gap:8px}
  .bestnote{margin:6px 13px 10px;padding-top:7px}
  .dt th,.dt td{padding:6px 9px;line-height:1.45}
  .dt-wrap.wide tr{padding:10px 13px 8px;margin-bottom:7px}
  .dt-wrap.wide td{padding:2px 0}
  .dt-wrap.wide td.em{top:10px}
  /* 改悪情報・カレンダー */
  .chips{gap:5px;margin-bottom:9px}
  .chg-grid{gap:7px}
  .chg-h{margin:12px 0 7px}
  .chg summary{padding:10px 13px}
  .chg h3{line-height:1.4;margin-top:3px}
  .chg-body{padding:0 13px 10px}
  .chg-body dl{margin:8px 0 2px}
  details.cal summary{padding:9px 12px;gap:2px 12px}
  .caln{padding:0 12px 10px}
  .calm{margin:12px 0 5px}
  .calsub.top{margin-bottom:12px;padding:12px 14px}
  footer{padding:14px 0 24px}
  footer .fnav{gap:2px 14px;margin-bottom:8px}
  footer .flinks{gap:12px;margin-bottom:6px}
  /* 詰めた分、下限12pxを割っていた補助文字は12pxに戻す */
  .c-title span,.advhint,.lbl output small,.rankrow .peryear,.pill,.kb{font-size:12px}
}