@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&display=swap");
/* 数字は Archivo（ラテンのみ・約20KB）＋等幅数字。読み込めない環境では
   従来どおり本文フォントの数字にフォールバックする（file:// でも壊れない）。 */
:root{
  --numfont:"Archivo","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  --bg:#f5f7fb; --panel:#ffffff; --panel2:#f1f5fb; --line:#e3e9f2;
  --txt:#0f1e33; --mut:#64748b; --soft:#7c8ba1;
  --accent:#2563eb; --accent-d:#1d4ed8; --accent-soft:#eff4ff;
  --green:#059669; --red:#dc2626; --amber:#d97706; --radius:14px;
  --dubai:#2563eb; --abudhabi:#0d9488; --rak:#e11d6b;
  --shadow:0 1px 2px rgba(15,30,51,.04),0 4px 16px rgba(15,30,51,.06);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Segoe UI",Roboto,system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* キーボード操作時だけ表示する「本文へ移動」リンク */
.skip-link{position:fixed;left:14px;top:10px;z-index:10000;transform:translateY(-160%);
  background:var(--txt);color:var(--panel);border:2px solid var(--accent);border-radius:9px;
  padding:9px 14px;font-size:13px;font-weight:800;box-shadow:var(--shadow);transition:transform .15s ease}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--accent-soft);outline-offset:2px}

/* ---- Header ---- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:16px;min-height:62px;flex-wrap:wrap;row-gap:6px;padding:8px 0}
@media(min-width:1280px){.nav{gap:22px}}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:0;color:var(--txt);white-space:nowrap;flex:0 0 auto}
@media(max-width:900px){.brand{font-size:15px}.brand .logo{width:26px;height:26px;font-size:13px}}
/* スマホでは1行に収まらないため、ロゴ／ナビ／トグルを段組みにする */
@media(max-width:760px){.nav{gap:8px;padding:10px 0}.nav .links{width:100%;margin-left:0;order:3;gap:2px}.nav .links a,.nav .grp>button{padding:7px 10px;font-size:13px}}
.brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#60a5fa);display:grid;place-items:center;font-size:15px;color:#fff}
.brand small{color:var(--accent);font-weight:800;font-size:inherit;margin-left:1px}
.nav .links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav .links a{padding:7px 11px;border-radius:9px;color:var(--mut);font-size:13.5px;font-weight:600;transition:.15s;white-space:nowrap}
.nav .links a:hover{color:var(--txt);background:var(--panel2)}
.nav .links a.active{color:var(--accent);background:var(--accent-soft)}

/* ---- ナビのグループドロップダウン ---- */
.nav .grp{position:relative}
.nav .grp>button{background:transparent;border:0;padding:7px 11px;white-space:nowrap;border-radius:9px;color:var(--mut);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;display:flex;align-items:center;gap:4px}
.nav .grp>button::after{content:"▾";font-size:10px;opacity:.6}
.nav .grp>button:hover,.nav .grp.open>button{color:var(--txt);background:var(--panel2)}
.nav .grp>button.active{color:var(--accent);background:var(--accent-soft)}
.nav .grp .dd{display:none;position:absolute;top:100%;left:0;padding-top:6px;z-index:70;min-width:190px}
.nav .grp .dd .ddin{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(15,30,51,.14);padding:6px}
.nav .grp:hover .dd,.nav .grp.open .dd{display:block}
.nav .grp .dd a{display:block;padding:8px 12px;border-radius:8px;color:var(--mut);font-size:13.5px;font-weight:600;white-space:nowrap}
.nav .grp .dd a:hover{background:var(--panel2);color:var(--txt)}
.nav .grp .dd a.active{color:var(--accent);background:var(--accent-soft)}

/* ---- FAQ ---- */
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px;overflow:hidden}
.faq summary{padding:14px 16px;font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center}
.faq summary::before{content:"Q";flex-shrink:0;width:24px;height:24px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:800}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:13px 16px;font-size:13.5px;color:var(--mut);line-height:1.75}
.faq .a b{color:var(--txt)}

/* ---- Hero ---- */
.hero{padding:52px 0 30px;background:linear-gradient(180deg,#fff,transparent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:end}
@media(max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-d);font-size:12px;font-weight:700;margin-bottom:16px}
.hero h1{font-size:44px;line-height:1.22;margin:0 0 12px;letter-spacing:-.02em}
@media(max-width:760px){.hero h1{font-size:32px}}
.hero h1 .hl{color:var(--accent)}
.hero p{color:var(--mut);font-size:16.5px;max-width:560px;margin:0;text-wrap:pretty}
.hero .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-weight:700;font-size:14px;border:1px solid var(--line);cursor:pointer;transition:.15s;background:#fff;color:var(--txt)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-d)}
.btn.ghost:hover{background:var(--panel2)}

/* ---- Layout ---- */
.section{padding:24px 0}
.section h2{font-size:22px;margin:0 0 4px;letter-spacing:-.3px}
.section .sub{color:var(--mut);font-size:14px;margin:0 0 18px}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(4,1fr)}
.cards3{grid-template-columns:repeat(3,1fr)}
.cards2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.cards3,.cards2{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.kpi .label{color:var(--mut);font-size:12.5px;font-weight:600;letter-spacing:.01em}
.kpi .val{font-size:30px;font-weight:700;margin-top:5px;letter-spacing:-.02em;line-height:1.18;color:var(--txt)}
.cur-both .kpi .val,.unit-both .kpi .val{font-size:22px;line-height:1.3;letter-spacing:-.3px}
.cur-both .hero-stats .hs .n,.unit-both .hero-stats .hs .n{font-size:19px;line-height:1.3}
.kpi .delta{font-size:12.5px;font-weight:700;margin-top:5px;line-height:1.5}
.num,.kpi .val,.kpi .delta,.hero-stats .hs .n,.n-tab{font-family:var(--numfont);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.up{color:var(--green)} .down{color:var(--red)} .delta.dn{color:var(--red)} .delta.flat{color:var(--soft)}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.chip.dubai{background:var(--accent-soft);color:var(--dubai)}
.chip.abudhabi{background:#e6f6f4;color:var(--abudhabi)}
.chip.rak{background:#fdeef0;color:var(--rak)}

/* ---- Currency / unit toggles (header) ---- */
.cur-toggle,.unit-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:9px;padding:2px;box-shadow:var(--shadow)}
.unit-toggle{margin-left:14px}
.cur-toggle{margin-left:8px}
.cur-toggle button,.unit-toggle button{background:transparent;border:0;color:var(--mut);padding:5px 11px;border-radius:7px;font-weight:800;font-size:12.5px;cursor:pointer}
.cur-toggle button.on,.unit-toggle button.on{background:var(--accent);color:#fff}
.cur-toggle button.bth,.unit-toggle button.bth{padding:5px 8px;font-size:11.5px;letter-spacing:-.02em}
.fx-rate{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--mut);padding:0 8px 0 6px;position:relative}
.fx-rate::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--soft)}
.fx-rate.live{color:var(--green)}
.fx-rate.live::before{background:var(--green);box-shadow:0 0 0 0 rgba(5,150,105,.5);animation:fxpulse 2s infinite}
@keyframes fxpulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.45)}70%{box-shadow:0 0 0 6px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}
@media(max-width:640px){.cur-toggle{margin-left:auto}.fx-rate{display:none}
  .cur-toggle button,.unit-toggle button{padding:5px 8px;font-size:12px}
  .cur-toggle button.bth,.unit-toggle button.bth{padding:5px 6px;font-size:11px}
  .unit-toggle{margin-left:8px}}

/* ---- Visa / catalyst badges ---- */
.visa-badge{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px}
.visa-badge.gold{background:#fef6e0;color:#a06a00;border:1px solid #f2d98c}
.visa-badge.silver{background:#eef1f6;color:#5b6472;border:1px solid #d6dbe4}
.visa-badge.none{background:#f4f5f7;color:#9aa3b2;border:1px solid #e3e9f2}
.catalyst{position:relative;background:#fff7ed;border:1px solid #fde2c3;color:#9a5b00;border-radius:10px;padding:10px 12px 10px 34px;font-size:12.5px;font-weight:600;margin-top:12px;line-height:1.7}
.catalyst .ic{position:absolute;left:11px;top:9px;font-size:15px;line-height:1.2}
.jpy{color:var(--mut);font-size:.82em;font-weight:600}
.data-src{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:#f1f5f9;color:#64748b;border:1px solid var(--line);white-space:nowrap}
.data-src.on{background:#e7f7ef;color:#047857;border-color:#a7e3c8}
.data-src.demo{background:#fff7ed;color:#b45309;border-color:#fde2c3}
@media(max-width:760px){.data-src{display:none}}
.badge-est{font-size:10.5px;font-weight:700;color:var(--amber);background:#fff7ed;border:1px solid #fde2c3;padding:1px 6px;border-radius:6px;margin-left:6px}

/* ---- Tables ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--mut);font-weight:700;font-size:12px;letter-spacing:.3px;cursor:pointer;user-select:none}
th:hover{color:var(--accent)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel2)}
.bar{height:7px;border-radius:6px;background:linear-gradient(90deg,var(--accent),#93c5fd)}

/* ---- Controls / filters ---- */
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--mut);font-weight:700}
select,input[type=text],input[type=number]{
  background:#fff;border:1px solid var(--line);color:var(--txt);
  padding:9px 12px;border-radius:10px;font-size:14px;min-width:140px;font-family:inherit;box-shadow:var(--shadow)}
select:focus,input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
input[type=range]{accent-color:var(--accent)}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;box-shadow:var(--shadow)}
.seg button{background:transparent;border:0;color:var(--mut);padding:7px 14px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer}
.seg button.on{background:var(--accent);color:#fff}

/* ---- Property cards ---- */
.plist{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.plist{grid-template-columns:1fr}}
.prop{padding:0;overflow:hidden;transition:.15s;cursor:pointer}
.prop:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.12);border-color:#c9dcff}
.prop .top{padding:16px 18px;background:linear-gradient(135deg,var(--accent-soft),#fff);border-bottom:1px solid var(--line)}
.prop .price{font-size:22px;font-weight:800;letter-spacing:-.5px}
.prop .body{padding:14px 18px}
.prop .row{display:flex;justify-content:space-between;font-size:13.5px;padding:4px 0;color:var(--mut)}
.prop .row b{color:var(--txt);font-weight:700}
.pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--mut)}

/* ---- Map ---- */
#map{height:560px;border-radius:var(--radius);border:1px solid var(--line);z-index:1;box-shadow:var(--shadow)}
.legend{background:#fff;padding:10px 12px;border-radius:10px;border:1px solid var(--line);font-size:12.5px;line-height:1.9;box-shadow:var(--shadow)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:7px;vertical-align:-1px}

.muted{color:var(--mut)}

/* ---- 初心者向け：チャートの見方ヒント ---- */
.hint{position:relative;font-size:12.5px;color:#5b6472;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:9px 12px 9px 34px;margin-top:12px;line-height:1.7}
.hint::before{content:"💡";position:absolute;left:11px;top:9px}
.hint b{color:var(--txt)}

/* ---- 用語ツールチップ（data-tip属性） ---- */
.term{border-bottom:1.5px dashed #94a3b8;cursor:help;position:relative}
.term:hover::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:80;width:min(280px,72vw);background:#0f1e33;color:#fff;font-size:12px;font-weight:500;line-height:1.55;padding:9px 11px;border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.25);white-space:normal}

/* ---- 割安/割高バッジ ---- */
.val-badge{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px}
.val-badge.cheap{background:#e7f7ef;color:#047857;border:1px solid #a7e3c8}
.val-badge.rich{background:#fdeef0;color:#be123c;border:1px solid #f6cdd8}
.val-badge.mid{background:#f1f5f9;color:#5b6472;border:1px solid #dbe2ec}

/* ---- シミュレーター：プリセット ---- */
.preset{display:inline-flex;gap:6px;flex-wrap:wrap}
.preset button{background:#fff;border:1px solid var(--line);color:var(--mut);padding:6px 13px;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer;box-shadow:var(--shadow)}
.preset button.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- 印刷（PDFレポート） ---- */
@media print{
  header.site,footer.site,.no-print,.fab{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
  .canvas-wrap{height:250px!important}
  .exit-band{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href]::after{content:""}
}
.print-head{display:none}
@media print{.print-head{display:block;font-size:12px;color:#64748b;margin-bottom:10px}}

/* ---- 用語集カード ---- */
.gloss{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.gloss{grid-template-columns:1fr}}
.gloss .g{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.gloss .g h4{margin:0 0 2px;font-size:14.5px}
.gloss .g .en{font-size:11px;color:var(--soft);font-weight:600}
.gloss .g p{margin:6px 0 0;font-size:12.5px;color:var(--mut);line-height:1.6}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:24px 0;color:var(--mut);font-size:13px;background:#fff}
footer.site a{color:var(--accent)}
.note{font-size:12.5px;color:var(--mut);background:var(--accent-soft);border:1px solid #d6e4ff;border-radius:10px;padding:12px 14px;margin-top:14px}
.canvas-wrap{position:relative;height:300px}

/* ---- Breadcrumb / detail ---- */
.crumb{font-size:13px;color:var(--mut);padding:20px 0 0}
.crumb a{color:var(--accent);font-weight:600}
.detail-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin:6px 0 18px}
.detail-head .price{font-size:34px;font-weight:800;letter-spacing:-1px}
/* ---- Hero stats (dashboard) ---- */
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:0}
@media(max-width:520px){.hero-stats{grid-template-columns:minmax(0,1fr)}}
.hero-stats .hs{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.hero-stats .hs .l{font-size:12.5px;color:var(--mut);font-weight:600;order:1}
.hero-stats .hs .n{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:4px;order:2}
.hero-stats .hs .s{font-size:12px;color:var(--mut);font-weight:500;margin-top:2px;order:3}
.hero-stats .hs{display:flex;flex-direction:column}

/* ---- Feature strip / icons ---- */
.feat{display:flex;gap:12px;align-items:flex-start}
.feat .fic{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.feat h3{margin:0 0 3px;font-size:15px}
.feat p{margin:0;font-size:13px;color:var(--mut)}

/* ---- Guide page ---- */
.guide-hero{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border-radius:16px;padding:34px 30px;margin:8px 0 6px}
.guide-hero h1{margin:0 0 8px;font-size:30px;letter-spacing:-.5px}
.guide-hero p{margin:0;opacity:.94;max-width:680px}
.tax-row{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);gap:14px}
.tax-row .v{font-weight:800;text-align:right}
.tax-row .v.zero{color:var(--green)}
.step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.step .no{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.step h4{margin:0 0 3px;font-size:15px}
.step p{margin:0;font-size:13.5px;color:var(--mut)}
.cost-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.cost-row .cbar{height:9px;border-radius:6px;background:var(--accent);min-width:6px}
.pillbig{display:inline-flex;flex-direction:column;background:var(--accent-soft);border:1px solid #d6e4ff;border-radius:12px;padding:14px 18px;min-width:150px}
.pillbig .n{font-size:24px;font-weight:800;color:var(--accent-d)}
.pillbig .l{font-size:12.5px;color:var(--mut);font-weight:600}

.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.spec .row{display:flex;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px}
.spec .row span{color:var(--mut)} .spec .row b{font-weight:700}
#minimap{height:260px;border-radius:12px;border:1px solid var(--line)}


/* ============================================================
   操作性レイヤー（2026-07-29 追加）
   テーブル横スクロール / パンくず / 目次 / 検索 / トップへ戻る / ダークモード
   ============================================================ */

/* --- ダークモード --- */
[data-theme="dark"]{
  --bg:#0b1220; --panel:#131c2e; --panel2:#1b2740; --line:#26334d;
  --txt:#e7ecf5; --mut:#93a3bd; --soft:#64748b;
  --accent:#5b8dfb; --accent-d:#7aa5ff; --accent-soft:#1b2a49;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.35);
}
[data-theme="dark"] header.site{background:rgba(19,28,46,.9)}
[data-theme="dark"] .hint{background:#16203450;border-color:#2c3a56;color:#9fb0c9}
[data-theme="dark"] .note{background:var(--accent-soft);border-color:#2c3f66;color:#a9bde0}
[data-theme="dark"] img,[data-theme="dark"] .leaflet-tile{filter:brightness(.88) contrast(1.05)}
[data-theme="dark"] .fail .fix{background:#0e2a20;border-color:#1d5a45;color:#8ce0be}
[data-theme="dark"] .fail .fix b{color:#4ade80}
[data-theme="dark"] .sl.short{background:#2a1520;border-color:#4a2233}
[data-theme="dark"] .cmp3 thead th.ok{background:#0e2a20;color:#4ade80}
[data-theme="dark"] .cmp3 thead th.ng{background:#2a1520;color:#fb7185}
[data-theme="dark"] .cmp3 thead th.ok2{background:#2a2210;color:#fbbf24}
html{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* --- テーブルの横スクロール（モバイルはみ出し防止） ---
   grid/flex の子は既定で min-width:auto のため中身の幅まで広がってしまう。
   min-width:0 を明示しないと overflow-x:auto が効かない。 */
.grid > *, .cards2 > *, .cards3 > *, .plist > *, .bud > *, .plan-grid > *, .sl-grid > *{min-width:0}
.card, .feat, .feat > div, .ag, .fail, .section, .container{min-width:0}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.tw > table{min-width:max-content;max-width:none}
.field, .field select, .field input{min-width:0;max-width:100%}
.controls{flex-wrap:wrap}
.canvas-wrap{max-width:100%;min-width:0}
.hint, .note{overflow-wrap:anywhere}
img, canvas, svg{max-width:100%}

/* --- パンくず --- */
.bcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);padding:14px 0 0}
.bcrumb a{color:var(--mut);font-weight:600}
.bcrumb a:hover{color:var(--accent)}
.bcrumb .sep{opacity:.45}
.bcrumb .cur{color:var(--txt);font-weight:700}

/* --- 浮動ボタン（目次・トップへ戻る） --- */
/* 右下はAIアシスタントのボタンが占めるため、既存のFABはその上に積む */
.fabs{position:fixed;right:22px;bottom:86px;z-index:60;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.fab{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--mut);
  box-shadow:var(--shadow);cursor:pointer;font-size:17px;display:grid;place-items:center;transition:.18s;font-family:inherit}
.fab:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.fab.hide{opacity:0;pointer-events:none;transform:translateY(8px)}
@media(max-width:640px){.fabs{right:15px;bottom:74px}.fab{width:42px;height:42px;font-size:15px}}

/* --- 目次パネル --- */
.toc{position:fixed;right:18px;bottom:76px;z-index:61;width:min(310px,calc(100vw - 36px));max-height:min(66vh,520px);
  overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(15,30,51,.18);
  padding:12px 6px 12px 12px;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s}
.toc.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.toc .ttl{font-size:11.5px;font-weight:800;color:var(--mut);letter-spacing:.6px;padding:0 6px 8px}
.toc a{display:block;font-size:13px;color:var(--mut);padding:7px 9px;border-radius:8px;line-height:1.5;font-weight:600}
.toc a:hover{background:var(--panel2);color:var(--txt)}
.toc a.on{background:var(--accent-soft);color:var(--accent-d);font-weight:800}

/* --- サイト内検索 --- */
.sbtn{border:1px solid var(--line);background:var(--panel2);border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:600;
  color:var(--soft);cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:7px;transition:.15s;white-space:nowrap}
.sbtn:hover{color:var(--txt);border-color:var(--accent)}
.sbtn kbd{font-family:inherit;font-size:10.5px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--mut)}
@media(max-width:900px){.sbtn kbd{display:none}}
.sov{position:fixed;inset:0;z-index:200;background:rgba(15,30,51,.45);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;opacity:0;pointer-events:none;transition:.16s}
.sov.open{opacity:1;pointer-events:auto}
.sbox{width:min(620px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.3);overflow:hidden}
.sbox input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--txt);
  padding:17px 19px;font-size:16px;font-family:inherit;outline:none}
.sbox input::placeholder{color:var(--soft)}
.sres{max-height:min(56vh,440px);overflow-y:auto;padding:8px}
.sres .grp{font-size:10.5px;font-weight:800;color:var(--soft);letter-spacing:.7px;padding:10px 12px 5px}
.sres a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--txt);font-size:14px}
.sres a:hover,.sres a.sel{background:var(--accent-soft)}
.sres a .ic{width:26px;height:26px;border-radius:7px;background:var(--panel2);display:grid;place-items:center;font-size:13px;flex-shrink:0}
.sres a .tx{flex:1;min-width:0}
.sres a .tx b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres a .tx span{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres .empty{padding:26px 14px;text-align:center;color:var(--mut);font-size:13.5px}
.sfoot{border-top:1px solid var(--line);padding:8px 14px;font-size:11px;color:var(--soft);display:flex;gap:14px;flex-wrap:wrap}
.sfoot b{font-weight:700;color:var(--mut)}

/* --- 見出しのアンカー位置調整（sticky ヘッダー分） --- */
.container h2[id]{scroll-margin-top:86px}
@media(max-width:760px){.container h2[id]{scroll-margin-top:132px}}

/* --- ダークモード：ハードコードされた白背景の上書き --- */
[data-theme="dark"] .hero{background:linear-gradient(180deg,#131c2e,transparent)}
[data-theme="dark"] .btn{background:var(--panel);color:var(--txt);border-color:var(--line)}
[data-theme="dark"] .btn.primary{background:var(--accent);color:#08111f;border-color:var(--accent)}
[data-theme="dark"] .btn.ghost{background:var(--panel2);color:var(--txt)}
[data-theme="dark"] .seg{background:var(--panel)}
[data-theme="dark"] .seg button.on{color:#08111f}
[data-theme="dark"] .seg-mini,[data-theme="dark"] .cur-toggle,[data-theme="dark"] .unit-toggle{background:var(--panel)}
[data-theme="dark"] .seg-mini button.on{color:#08111f}
[data-theme="dark"] footer.site{background:var(--panel);border-color:var(--line)}
[data-theme="dark"] .filt button.on{color:#08111f}
[data-theme="dark"] .sbox{box-shadow:0 24px 70px rgba(0,0,0,.6)}
[data-theme="dark"] .sov{background:rgba(0,0,0,.6)}
[data-theme="dark"] .toc{box-shadow:0 12px 40px rgba(0,0,0,.5)}
[data-theme="dark"] .visa-badge.gold{background:#2a2210;color:#fbbf24;border-color:#4a3a12}
[data-theme="dark"] .val-badge.cheap{background:#0e2a20;color:#4ade80}
[data-theme="dark"] .val-badge.rich{background:#2a1520;color:#fb7185}
[data-theme="dark"] .catalyst{background:#2a2210;border-color:#4a3a12;color:#fbbf24}
[data-theme="dark"] .guide-hero{filter:saturate(.85) brightness(.9)}
[data-theme="dark"] .prop .top,[data-theme="dark"] .kpi{background:var(--panel)}

/* --- ヘッダーを1行に収める（検索ボタン追加で幅が増えたため） --- */
header.site > .container{max-width:1440px}
@media(max-width:1500px){.data-src{display:none}}
@media(max-width:1180px){.fx-rate{display:none}}
.nav .links{gap:2px}


/* ============================================================
   初心者向け・継続利用レイヤー（2026-07-29 追加）
   用語ツールチップ / ウォッチリスト / 前回からの変化 / 初回ガイド
   ============================================================ */

/* --- 用語ツールチップ（タップでも開くように改良）--- */
.term{border-bottom:1.5px dotted var(--accent);cursor:help;position:relative;color:inherit}
.term::before{content:"?";display:inline-block;font-size:9px;font-weight:800;line-height:1;
  width:12px;height:12px;border-radius:50%;background:var(--accent-soft);color:var(--accent-d);
  text-align:center;padding-top:2px;margin-right:2px;vertical-align:2px}
.term:hover::after,.term.on::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 7px);z-index:90;
  width:min(300px,76vw);background:#0f1e33;color:#fff;font-size:12px;font-weight:500;line-height:1.65;
  padding:10px 12px;border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.28);white-space:normal;text-align:left;
  border-bottom:0}
[data-theme="dark"] .term:hover::after,[data-theme="dark"] .term.on::after{background:#26334d;border:1px solid #3a4a68}

/* --- ウォッチリスト（★）--- */
.wbtn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:6px 12px;font-size:12.5px;
  font-weight:700;color:var(--mut);cursor:pointer;font-family:inherit;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.wbtn:hover{border-color:var(--amber);color:var(--amber)}
.wbtn.on{background:#fff8ec;border-color:#f3c778;color:#a16207}
[data-theme="dark"] .wbtn.on{background:#2a2210;border-color:#4a3a12;color:#fbbf24}
.wstar{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--soft);cursor:pointer;font-size:14px;display:grid;place-items:center;transition:.15s;z-index:2}
.wstar:hover{color:var(--amber);border-color:var(--amber)}
.wstar.on{color:#f59e0b;border-color:#f3c778;background:#fff8ec}
[data-theme="dark"] .wstar.on{background:#2a2210;border-color:#4a3a12}
.ag{position:relative}
.ag .hd{padding-right:40px}

/* --- 再訪パネル（前回からの変化・ウォッチ・履歴）--- */
.revisit{background:linear-gradient(135deg,var(--accent-soft),var(--panel));border:1px solid #d6e4ff;
  border-radius:var(--radius);padding:16px 18px;margin-bottom:18px}
[data-theme="dark"] .revisit{border-color:#2c3f66}
.revisit .rh{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.revisit .rh b{font-size:15px}
.revisit .ago{font-size:11.5px;font-weight:700;color:var(--accent-d);background:var(--panel);border:1px solid #d6e4ff;
  border-radius:999px;padding:3px 10px}
[data-theme="dark"] .revisit .ago{border-color:#2c3f66}
.wl{display:flex;gap:9px;flex-wrap:wrap}
.wl a{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:9px 13px;transition:.15s;min-width:0}
.wl a:hover{border-color:var(--accent);transform:translateY(-1px)}
.wl a .nm{font-size:13.5px;font-weight:700;white-space:nowrap}
.wl a .vl{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.wl a .dl{font-size:11.5px;font-weight:800;white-space:nowrap}
.wl a .dl.up{color:#059669} .wl a .dl.dn{color:#dc2626} .wl a .dl.fl{color:var(--soft)}
.revisit .none{font-size:13px;color:var(--mut);line-height:1.8}

/* --- 初回ウェルカム --- */
.welc{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:18px 20px;margin-bottom:18px;position:relative;box-shadow:var(--shadow)}
.welc h3{margin:0 0 6px;font-size:17px}
.welc p{margin:0 0 13px;font-size:13.5px;color:var(--mut);line-height:1.85;max-width:760px}
.welc .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:760px){.welc .steps{grid-template-columns:1fr}}
.welc .steps a{display:flex;gap:11px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;transition:.15s}
.welc .steps a:hover{border-color:var(--accent);transform:translateY(-1px)}
.welc .steps .n{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:800;
  display:grid;place-items:center;flex-shrink:0}
[data-theme="dark"] .welc .steps .n{color:#08111f}
.welc .steps b{display:block;font-size:13.5px;margin-bottom:2px}
.welc .steps span{display:block;font-size:12px;color:var(--mut);line-height:1.65}
.welc .x{position:absolute;top:12px;right:12px;border:0;background:transparent;color:var(--soft);font-size:17px;
  cursor:pointer;width:28px;height:28px;border-radius:7px;font-family:inherit}
.welc .x:hover{background:var(--panel2);color:var(--txt)}

/* --- 今日の注目データ --- */
.today{display:flex;align-items:flex-start;gap:13px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 17px;margin-bottom:18px;box-shadow:var(--shadow)}
.today .ic{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center;
  font-size:19px;flex-shrink:0}
.today .bd{min-width:0;flex:1}
.today .lb{font-size:10.5px;font-weight:800;color:var(--accent-d);letter-spacing:.7px;margin-bottom:3px}
.today .tx{font-size:14px;line-height:1.8;color:var(--txt)}
.today .tx b{color:var(--accent-d)}
.today a{color:var(--accent);font-weight:700;font-size:12.5px;white-space:nowrap}

/* ===== AIアシスタント ===================================================== */
.ai-fab{position:fixed;right:18px;bottom:18px;z-index:72;width:56px;height:56px;border-radius:50%;
  border:0;background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;font-size:23px;cursor:pointer;
  box-shadow:0 6px 22px rgba(37,99,235,.42)}
.ai-fab:hover{transform:translateY(-2px)}
.ai-fab::after{content:"AIに聞く";position:absolute;right:64px;top:50%;transform:translateY(-50%);
  background:#0f172a;color:#fff;font-size:11px;font-weight:800;padding:5px 10px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.ai-fab:hover::after{opacity:1}
.ai-fab{position:fixed}
.ai-tip{position:fixed;right:84px;bottom:30px;z-index:71;background:#0f172a;color:#fff;font-size:12px;
  font-weight:700;padding:8px 13px;border-radius:10px;box-shadow:0 6px 20px rgba(15,23,42,.3);
  white-space:nowrap;animation:aiTip .4s ease}
.ai-tip::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:#0f172a}
.ai-tip button{border:0;background:none;color:#93a1bd;margin-left:8px;cursor:pointer;font-weight:900}
@keyframes aiTip{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(max-width:520px){.ai-tip{display:none}}
.ai-box{position:fixed;right:18px;bottom:86px;z-index:73;width:392px;max-width:calc(100vw - 24px);
  height:552px;max-height:calc(100vh - 120px);background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 18px 48px rgba(15,23,42,.24);display:none;flex-direction:column;overflow:hidden}
.ai-box.on{display:flex}
body.ai-open .fabs{opacity:0;pointer-events:none}
.fabs{transition:opacity .18s}
.ai-hd{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.ai-hd b{font-size:14px;flex:none}
.ai-mode{flex:1;font-size:10px;font-weight:800;color:#64748b;background:#f1f5f9;border-radius:999px;padding:2px 8px}
.ai-mode.api{color:#4338ca;background:#eef2ff}
.ai-hd button{border:0;background:none;color:var(--mut);font-size:15px;cursor:pointer;padding:2px 4px}
.ai-hd button:hover{color:var(--accent)}
.ai-log{flex:1 1 auto;min-height:0;overflow-y:auto;padding:13px;display:flex;flex-direction:column;gap:9px}
.ai-msg{font-size:13px;line-height:1.85;padding:9px 12px;border-radius:12px;max-width:90%;word-break:break-word}
.ai-msg.bot{background:var(--bg);border:1px solid var(--line);align-self:flex-start}
.ai-msg.me{background:var(--accent);color:#fff;align-self:flex-end}
.ai-msg a{color:var(--accent);font-weight:700}
.ai-msg.me a{color:#fff;text-decoration:underline}
.ai-wait{color:var(--mut)}
.ai-sug{display:flex;gap:6px;padding:0 12px 9px;flex-wrap:wrap;flex:none;max-height:76px;overflow-y:auto}
.ai-sug button{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:999px;
  padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer}
.ai-sug button:hover{border-color:var(--accent);color:var(--accent)}
.ai-in{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex:none}
.ai-in input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font-size:13px;background:var(--card);color:var(--txt)}
.ai-in button{border:0;background:var(--accent);color:#fff;border-radius:9px;padding:9px 15px;font-weight:800;font-size:13px;cursor:pointer}
.ai-cfg{position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:20px}
.ai-cfg.on{display:flex}
.ai-cfg>*{max-width:100%}
.ai-cfg-inner{position:relative;background:var(--card);color:var(--txt);border-radius:14px;padding:22px;width:430px;max-width:100%;
  box-shadow:0 20px 60px rgba(15,23,42,.35)}
.ai-cfg-inner>b{display:block;font-size:15px;margin-bottom:8px}
.ai-cfg-inner p{font-size:12px;color:var(--mut);line-height:1.85;margin:0 0 14px}
.ai-cfg-inner label{display:block;font-size:12px;font-weight:700;margin-bottom:10px}
.ai-cfg-inner select,.ai-cfg-inner input{width:100%;margin-top:4px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font-size:13px;background:var(--card);color:var(--txt)}
.ai-cfg-b{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ai-cfg-b button{border:1px solid var(--line);background:var(--card);color:var(--txt);border-radius:9px;
  padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer}
.ai-cfg-b button#aiSave{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:520px){.ai-box{right:10px;left:10px;width:auto;height:66vh}.ai-fab{right:12px;bottom:12px}}


/* ============================================================
   見やすさ・使いやすさ刷新 v3（2026-08-08）
   デザイン調整（配色・余白・カード・見出し）
   ＋ モバイルドロワーメニュー ＋ クイックナビ
   既存ルールの後ろに置き、上書きで効かせるレイヤー。
   ============================================================ */

/* --- 全体の質感 --- */
:root{
  --numfont:"Archivo","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  --radius:16px;
  --shadow:0 1px 2px rgba(15,30,51,.05),0 8px 24px rgba(15,30,51,.05);
}
h1,h2,h3,h4{font-feature-settings:"palt"}
::selection{background:#bfd7ff;color:#0f1e33}
[data-theme="dark"] ::selection{background:#2c4a86;color:#e7ecf5}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* --- 見出しの階層をはっきり --- */
.section h2{font-size:23px;font-weight:800}
.section .sub{font-size:13.5px;line-height:1.75}

/* --- カード --- */
.card{border-radius:var(--radius);transition:box-shadow .18s,border-color .18s}
.feat .fic{width:42px;height:42px;border-radius:12px;font-size:20px}
a.card.feat:hover{border-color:#c9dcff;box-shadow:0 8px 26px rgba(37,99,235,.13);transform:translateY(-2px)}
a.card.feat{transition:.16s}

/* --- ボタン --- */
.btn{border-radius:11px}
.btn.primary{background:linear-gradient(135deg,#2563eb,#3b82f6);border-color:transparent;box-shadow:0 3px 12px rgba(37,99,235,.26)}
.btn.primary:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
[data-theme="dark"] .btn.primary{background:linear-gradient(135deg,#5b8dfb,#7aa5ff);box-shadow:0 3px 14px rgba(91,141,251,.3)}

/* --- ヒーロー --- */
.hero{position:relative;padding:52px 0 34px;background:
  radial-gradient(900px 360px at 88% -70%,rgba(37,99,235,.13),transparent 62%),
  radial-gradient(700px 300px at -5% -50%,rgba(13,148,136,.09),transparent 60%),
  linear-gradient(180deg,#fff,transparent)}
.hero h1{font-size:clamp(26px,4.6vw,40px)}
[data-theme="dark"] .hero{background:
  radial-gradient(900px 360px at 88% -70%,rgba(91,141,251,.15),transparent 62%),
  linear-gradient(180deg,#131c2e,transparent)}

/* --- ヘッダー --- */
header.site{background:rgba(255,255,255,.85);backdrop-filter:blur(14px) saturate(1.6)}
[data-theme="dark"] header.site{background:rgba(11,18,32,.86)}

/* --- 数字の桁を揃える --- */
.kpi .val,.hero-stats .hs .n,td.num,.pillbig .n{font-variant-numeric:tabular-nums}

/* --- テーブルの読みやすさ --- */
th,td{padding:12px 13px}
th{font-size:11.5px;letter-spacing:.4px}
tbody tr{transition:background .12s}

/* --- フッター --- */
footer.site{margin-top:56px;padding:30px 0}

/* --- クイックナビ（目的から探す） --- */
.qnav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:1000px){.qnav{grid-template-columns:repeat(2,1fr)}}
.qnav a{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:12px 14px;box-shadow:var(--shadow);transition:.15s;min-width:0}
.qnav a:hover{border-color:var(--accent);transform:translateY(-1px)}
.qnav .qi{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;font-size:17px;flex-shrink:0}
.qnav .qt{min-width:0}
.qnav b{display:block;font-size:13.5px}
.qnav .d{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- スマホの読みやすさ --- */
@media(max-width:760px){
  .container{padding:0 14px}
  .hero{padding:30px 0 22px}
  .hero p{font-size:14.5px}
  .hero .cta{gap:8px}
  .hero .cta .btn{flex:1 1 calc(50% - 4px);justify-content:center;padding:12px 10px;font-size:13.5px}
  .hero-stats{gap:14px 20px;margin-top:20px}
  .section h2{font-size:20px}
  .kpi .val{font-size:23px}
  .seg button{padding:9px 13px}
  select,input[type=text],input[type=number]{font-size:16px;min-width:110px}
  th,td{padding:10px 10px;font-size:13px}
}

/* --- モバイルドロワーメニュー --- */
.mnav-btn{display:none}
@media(max-width:760px){
  .nav .links{display:none}
  .sbtn{order:2;margin-left:0}
  .mnav-btn{display:inline-flex;order:1;margin-left:auto;flex-direction:column;gap:4px;justify-content:center;align-items:center;
    width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;flex:0 0 auto;padding:0}
  .unit-toggle{order:3;margin-left:0}
  .cur-toggle{order:4;margin-left:0}
  .mnav-btn span{display:block;width:17px;height:2px;border-radius:2px;background:var(--txt);transition:.2s}
  body.mnav-open .mnav-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.mnav-open .mnav-btn span:nth-child(2){opacity:0}
  body.mnav-open .mnav-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
.mnav-ov{position:fixed;inset:0;z-index:88;background:rgba(15,23,42,.42);opacity:0;pointer-events:none;transition:.2s;backdrop-filter:blur(2px)}
.mdrawer{position:fixed;top:0;right:0;bottom:0;z-index:89;width:min(320px,86vw);background:var(--panel);
  box-shadow:-12px 0 40px rgba(15,23,42,.2);transform:translateX(105%);transition:transform .24s cubic-bezier(.2,.7,.3,1);
  overflow-y:auto;padding:16px 14px 34px;overscroll-behavior:contain}
.mdrawer[aria-hidden="true"]{visibility:hidden}
body.mnav-open .mnav-ov{opacity:1;pointer-events:auto}
body.mnav-open .mdrawer{transform:none}
body.mnav-open{overflow:hidden}
body.mnav-open .fabs,body.mnav-open .ai-fab{opacity:0;pointer-events:none}
.mdrawer .mg-hd{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;padding:6px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.mdrawer .mg-hd .logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#60a5fa);display:grid;place-items:center;font-size:13px;color:#fff}
.mdrawer .mg-hd small{color:var(--accent);font-weight:800;font-size:inherit}
.mdrawer .mg-t{font-size:11px;font-weight:800;color:var(--soft);letter-spacing:.8px;padding:14px 10px 5px}
.mdrawer .mlink{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:10px;font-size:14.5px;font-weight:700;color:var(--txt)}
.mdrawer .mlink:hover,.mdrawer .mlink:active{background:var(--panel2)}
.mdrawer .mlink.active{background:var(--accent-soft);color:var(--accent-d)}
@media(min-width:761px){.mdrawer,.mnav-ov{display:none}}

/* 画面幅が十分あるときは、ナビと表示設定を意図した2段組みにする。
   項目が途中で不規則に折り返されず、表示設定は右下にまとまる。 */
@media(min-width:1100px){
  header.site .nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;
    grid-template-rows:auto auto;column-gap:14px;row-gap:6px;padding:8px 0}
  header.site .brand{grid-column:1;grid-row:1;align-self:center}
  header.site .nav .links{grid-column:2 / 5;grid-row:1;margin-left:0;justify-content:flex-end;align-self:center}
  header.site .sbtn{grid-column:5;grid-row:1;justify-self:end;align-self:center}
  header.site .unit-toggle{grid-column:3;grid-row:2;margin-left:0;justify-self:end}
  header.site .cur-toggle{grid-column:4;grid-row:2;margin-left:0;justify-self:end}
  header.site .nav > .fab{grid-column:5;grid-row:2;justify-self:end;align-self:center}
}

/* 共通モーダル表示中は背景だけがスクロールしないようにする */
body.ob-modal-open{overflow:hidden}

/* ============================================================
   見やすさ刷新 v4（2026-08-08 追補）
   長い表の見出し固定 / indexのセクション区切り / モバイル入力欄
   ============================================================ */

/* --- 長い表：枠内スクロール＋見出し固定 --- */
.tw.tall{max-height:min(72vh,640px);overflow:auto}
.tw.tall thead th{position:sticky;top:0;background:var(--panel);z-index:3;box-shadow:0 1px 0 var(--line)}
.tw.tall table[data-ux2] thead th:first-child{z-index:4}

/* --- セクション区切り（index） --- */
.sec-div{display:flex;align-items:center;gap:12px;margin:34px 0 2px}
.sec-div .ic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.sec-div .t{font-size:17px;font-weight:800;white-space:nowrap;letter-spacing:.02em}
.sec-div .s{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-div::after{content:"";flex:1;height:1px;background:var(--line);min-width:20px}
@media(max-width:640px){.sec-div{margin:26px 0 0}.sec-div .s{display:none}}

/* --- モバイルの入力まわり --- */
@media(max-width:760px){
  .controls{gap:8px}
  .controls .field{flex:1 1 calc(50% - 4px)}
  .controls .field select,.controls .field input{width:100%;min-width:0}
}

/* ============================================================
   継続利用レイヤー v5（2026-08-08）「使いたくなる」
   日替わり注目エリア / 連続チェックイン / ✓済みチップ
   ============================================================ */
.spot{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow);overflow:hidden}
.spot::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--accent),#60a5fa)}
.spot .sp-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.spot .lb{font-size:11px;font-weight:800;color:var(--accent-d);letter-spacing:.7px}
.spot .sp-sub{font-size:11.5px;color:var(--soft);font-weight:600;margin-left:auto}
@media(max-width:640px){.spot .sp-sub{display:none}}
.streak{background:#fff7ed;color:#b45309;border:1px solid #fde2c3;border-radius:999px;font-size:11.5px;font-weight:800;padding:3px 10px;white-space:nowrap}
[data-theme="dark"] .streak{background:#2a2210;border-color:#4a3a12;color:#fbbf24}
.spot .sp-nm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.spot .sp-nm b{font-size:20px;letter-spacing:-.3px}
.spot .kks{display:flex;gap:22px;flex-wrap:wrap;margin:6px 0 2px}
.spot .k{display:inline-flex;flex-direction:column}
.spot .k .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.spot .k .l{font-size:11.5px;color:var(--mut);font-weight:600}
.spot .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:640px){.spot .acts .btn{flex:1 1 calc(50% - 4px);justify-content:center}}
.done-chip{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;
  background:#e7f7ef;color:#047857;border:1px solid #a7e3c8;vertical-align:2px}
[data-theme="dark"] .done-chip{background:#0e2a20;color:#4ade80;border-color:#1d5a45}

/* ============================================================
   継続利用レイヤー v6（2026-08-08）パーソナライズ
   あなたの診断結果カード / エリア比較クイックリンク
   ============================================================ */
.wiz{position:relative;background:linear-gradient(135deg,var(--accent-soft),var(--panel));border:1px solid #d6e4ff;
  border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow)}
[data-theme="dark"] .wiz{border-color:#2c3f66}
.wiz .wz-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wiz .lb{font-size:11px;font-weight:800;color:var(--accent-d);letter-spacing:.7px}
.wiz .wz-cond{font-size:12.5px;font-weight:700;color:var(--txt)}
.wiz .ago{font-size:11.5px;font-weight:700;color:var(--accent-d);background:var(--panel);border:1px solid #d6e4ff;border-radius:999px;padding:3px 10px;margin-left:auto}
[data-theme="dark"] .wiz .ago{border-color:#2c3f66}
.wiz .wz-rank{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;
  display:inline-grid;place-items:center;flex-shrink:0}
[data-theme="dark"] .wiz .wz-rank{color:#08111f}
.wiz .wz-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:640px){
  .wiz .ago{display:none}
  .wiz .wz-acts .btn{flex:1 1 calc(50% - 4px);justify-content:center}
}
a.wbtn{text-decoration:none;display:inline-flex;align-items:center;gap:6px}

/* ============================================================
   継続利用レイヤー v7（2026-08-08）
   「前回の続き」バー / ウォッチ中エリアの更新お知らせ
   ============================================================ */
.resume{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:12px;padding:9px 12px;margin:14px 0 4px;box-shadow:var(--shadow);
  font-size:13px;flex-wrap:wrap}
.resume .rs-ic{color:var(--accent);font-size:11px}
.resume .rs-tx{min-width:0}
.resume .rs-tx a b{color:var(--accent-d)}
.resume .rs-ago{color:var(--soft);font-size:12px}
.resume .rs-go{margin-left:auto;color:var(--accent);font-weight:800;font-size:12.5px;white-space:nowrap;padding:4px 8px;border-radius:8px}
.resume .rs-go:hover{background:var(--accent-soft)}
.resume .rs-x{border:0;background:transparent;color:var(--soft);font-size:15px;cursor:pointer;width:26px;height:26px;
  border-radius:7px;font-family:inherit;flex-shrink:0}
.resume .rs-x:hover{background:var(--panel2);color:var(--txt)}
.chg{background:linear-gradient(135deg,#fff7ed,var(--panel));border:1px solid #fde2c3;border-radius:var(--radius);
  padding:14px 16px;margin-bottom:18px;box-shadow:var(--shadow)}
[data-theme="dark"] .chg{background:linear-gradient(135deg,#2a2210,var(--panel));border-color:#4a3a12}
.chg .ch-hd{font-size:13.5px;margin-bottom:10px}
.chg .ch-hd b{color:#9a5b00}
[data-theme="dark"] .chg .ch-hd b{color:#fbbf24}

/* ============================================================
   デザイン刷新 v4（2026-08-23）— トップページA案の作法を全ページへ
   ・数字は Archivo＋等幅数字（--numfont）
   ・ヒーローは「見出し＋CTA」と「主要指標カード2×2」の2カラム
   ・KPIは値を主役に（30px/700・letter-spacing -.02em）
   ・市況バーはヘッダー直下の濃紺帯（app.js の #mkBar）
   最後のレイヤーなので、ここが最終値。
   ============================================================ */

/* --- ヒーロー --- */
.hero h1{font-size:clamp(26px,2.9vw,38px);line-height:1.26;letter-spacing:-.02em}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:end}
@media(max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-d);font-size:12px;font-weight:700;margin-bottom:16px}
[data-theme="dark"] .hero-badge{background:rgba(37,99,235,.18);color:#93c5fd}

.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:0}
.hero-stats .hs{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border-left:1px solid var(--line);padding-left:18px}
.hero-stats .hs .l{font-size:12.5px;color:var(--mut);font-weight:600}
.hero-stats .hs .n{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:4px}
.hero-stats .hs .s{font-size:12px;color:var(--mut);font-weight:500;margin-top:3px;line-height:1.5}
@media(max-width:1000px){.hero-stats{margin-top:22px}}
@media(max-width:520px){.hero-stats{grid-template-columns:minmax(0,1fr);gap:10px}
  .hero-stats .hs{padding:13px 15px}.hero-stats .hs .n{font-size:24px}}
.cur-both .hero-stats .hs .n,.unit-both .hero-stats .hs .n{font-size:21px;line-height:1.28}

/* --- KPI（値を主役に） --- */
.kpi .val{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.18;margin-top:5px}
@media(max-width:760px){.kpi .val{font-size:24px}}
.kpi .label{font-size:12.5px;font-weight:600}
.kpi .delta{font-size:12.5px;font-weight:700;margin-top:5px;line-height:1.5}

/* --- 市況バー（A案：ヘッダー直下の濃紺帯）--- */
#mkBar{background:#0f1e33;border-bottom:0;color:#cbd8ea}
[data-theme="dark"] #mkBar{background:#111c31;border-bottom:1px solid #24314c}
#mkBar .mkb-in{gap:18px;padding:9px 20px}
#mkBar .mkb-tag{display:inline-flex;align-items:center;gap:7px;color:#fff}
#mkBar .mkb-tag::before{content:"";width:6px;height:6px;border-radius:999px;background:#f87171}
#mkBar .mkb-item{color:#cbd8ea;white-space:nowrap}
#mkBar .mkb-item b.down,#mkBar .mkb-item .down{color:#fca5a5}
#mkBar .mkb-item b{color:#fff}
#mkBar .mkb-note{color:#8fa3bf}
#mkBar .mkb-link{color:#93c5fd}
#mkBar .mkb-link:hover{color:#bfdbfe}
#mkBar .mkb-x{color:#7f93b4}
#mkBar .mkb-x:hover{color:#cbd8ea}
#mkBar .mkb-mini{color:#8fa3bf;background:#0f1e33}
[data-theme="dark"] #mkBar .mkb-mini{background:#111c31}
@media(max-width:900px){#mkBar .mkb-note{display:none}}
@media(max-width:640px){#mkBar .mkb-in{gap:10px}#mkBar .mkb-item{white-space:normal}}

/* --- グラフ枠の説明行（実線＝公式値／破線＝推計 の凡例）--- */
.srcline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-top:10px}
.srcline i{display:inline-block;width:22px;height:0;border-top:2px solid var(--accent);vertical-align:middle;margin-right:6px}
.srcline i.est{border-top-style:dashed}

/* ============================================================
   見やすさ磨き上げ v9（2026-08-27）
   既存レイヤーは書き換えず末尾に追記。すべて additive・可逆。
   ・クリック可能カード/ボタンの質感統一（ホバー・フォーカス）
   ・セクション余白リズムと見出しの階層感（.section > h2 直下のみ）
   ・KPI の数字の視認性＋上げ下げチップ（.kpi 内に限定）
   ・スクロールバー / モーション低減
   ダークは各項目直下に [data-theme="dark"] で併記。
   ============================================================ */

/* 1. カードの質感統一：クリック可能なカード（a.card）にだけ軽い持ち上げ。
   表やチャートを内包する大きな静的パネル（div.card）は動かさない＝
   sticky 見出しやレイアウト計算を邪魔しない。feat の青い影は既存が優先。 */
a.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(15,30,51,.10)}
[data-theme="dark"] a.card:hover{box-shadow:0 8px 26px rgba(0,0,0,.42)}

/* 2. セクションの余白リズム（極端に変えない微調整。inline style の
   padding 指定があるセクションはそちらが優先されるので影響しない）。 */
.section{padding-top:28px}
.section > h2{margin-bottom:8px}
.section > .sub{margin-bottom:20px}

/* 3. 見出しの階層感：トップレベルの節見出し（.section の直下 h2）にだけ
   細い縦バー。直下セレクタなので .card 内の見出しや .st-ch の番号付き
   見出し（既に装飾済み）には一切かからない。 */
.section > h2{position:relative;padding-left:14px}
.section > h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  border-radius:3px;background:linear-gradient(180deg,var(--accent),#60a5fa)}

/* 4. KPI の視認性：数字の字間をわずかに締める＋上げ下げに極薄チップ。
   チップは .kpi 内の delta に限定し、市況バーやウォッチリストの
   .up/.down/.dn には及ぼさない（inline レイアウトを壊さない）。 */
.kpi .val,.hero-stats .hs .n{letter-spacing:-.024em}
.kpi .delta.up,.kpi .delta.dn,.kpi .delta.flat{display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:999px;line-height:1.35}
.kpi .delta.up{background:rgba(5,150,105,.10);color:var(--green)}
.kpi .delta.dn{background:rgba(220,38,38,.10);color:var(--red)}
.kpi .delta.flat{background:var(--panel2);color:var(--soft)}
[data-theme="dark"] .kpi .delta.up{background:rgba(16,185,129,.16)}
[data-theme="dark"] .kpi .delta.dn{background:rgba(248,113,113,.16)}

/* 5. リンク/ボタンのフォーカスとホバー（滑らかに＋見えるフォーカスリング）。 */
.btn{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease,color .16s ease}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px var(--accent-soft)}
[data-theme="dark"] .btn:focus-visible{box-shadow:0 0 0 4px rgba(37,99,235,.30)}

/* 6. スクロールバー（既存に指定なし。selection は既存を尊重して触らない）。 */
*{scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--soft)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{border-color:var(--bg)}

/* 7. モーション低減：すべてのアニメ/トランジションを実質無効化。 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0!important;scroll-behavior:auto!important}
}