:root{
  --bg:#f3f4f7; --card:#fff; --ink:#0f172a; --sub:#64748b; --line:#e5e8ef; --line2:#eef0f5;
  --accent:#2563eb; --accent-soft:#e6eeff; --navy:#0b1220; --onnavy:#e6ebf5; --onnavy2:#94a3b8;
  --b1:#059669; --b2:#65a30d; --b3:#ca8a04; --b4:#ea580c; --b5:#dc2626; --b6:#9d174d;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -12px rgba(15,23,42,.12);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0e16; --card:#111826; --ink:#e7ebf3; --sub:#8b96a8; --line:#1f2938; --line2:#18202e;
  --accent:#6aa2ff; --accent-soft:#16233d; --navy:#070b13;
  --b1:#22c58a; --b2:#a3e635; --b3:#facc15; --b4:#fb923c; --b5:#f87171; --b6:#f472b6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -14px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#0a0e16; --card:#111826; --ink:#e7ebf3; --sub:#8b96a8; --line:#1f2938; --line2:#18202e;
  --accent:#6aa2ff; --accent-soft:#16233d; --navy:#070b13;
  --b1:#22c58a; --b2:#a3e635; --b3:#facc15; --b4:#fb923c; --b5:#f87171; --b6:#f472b6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -14px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
 font-family:-apple-system,BlinkMacSystemFont,"Inter","Hiragino Sans","Noto Sans JP","Segoe UI",sans-serif;
 line-height:1.75;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
/* ---- 上部固定バー（トップと共通の見た目） ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.86);backdrop-filter:saturate(1.4) blur(14px);
 -webkit-backdrop-filter:saturate(1.4) blur(14px);color:var(--onnavy);border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .tbwrap{max-width:860px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:6px;min-height:54px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;text-decoration:none;color:#fff;margin-right:12px;white-space:nowrap}
.brand i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
 background:linear-gradient(135deg,#059669,#ca8a04 55%,#9d174d);font-style:normal;font-size:13px;color:#fff;font-weight:800}
.topbar a.tl{font-size:13px;color:var(--onnavy2);text-decoration:none;padding:6px 12px;border-radius:999px;white-space:nowrap}
.topbar a.tl:hover{color:#fff;background:rgba(255,255,255,.08)}
.tbwrap .cursel{margin-left:auto;font-family:inherit;font-size:12px;color:var(--onnavy2);background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 10px;cursor:pointer;max-width:150px}
.tbwrap .cursel option{color:#000}
.tbwrap .langsel{margin-left:8px;max-width:130px}
.langbar{background:#e8efff;border-bottom:1px solid var(--line,#d6dbe3);font-size:13px}
.langbar .wrap{display:flex;align-items:center;gap:12px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.langbar a{font-weight:600}
.langbar button{margin-left:auto;background:transparent;border:1px solid var(--line,#d6dbe3);border-radius:999px;padding:3px 10px;font-size:12px;font-family:inherit;cursor:pointer;color:inherit}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .langbar{background:#15213a}}
:root[data-theme="dark"] .langbar{background:#15213a}
.wrap{max-width:860px;margin:0 auto;padding:26px 16px 60px}
.back{display:inline-block;font-size:13px;color:var(--accent);text-decoration:none;margin-bottom:18px}
.back:hover{text-decoration:underline}
h1{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;font-weight:600;
 font-size:clamp(24px,3.6vw,34px);line-height:1.3;margin:0 0 8px;letter-spacing:.01em}
.upd{color:var(--sub);font-size:12.5px;margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:16px}
h2{font-size:17px;margin:0 0 10px;letter-spacing:-.01em;font-weight:800}
h2+p,h2+ul,h2+table{margin-top:0}
p{margin:0 0 12px;font-size:14px}
ul{padding-left:1.2em;margin:0 0 12px;font-size:14px}
li{margin-bottom:6px}
a{color:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 12px}
th,td{border-bottom:1px solid var(--line2);padding:9px 8px;text-align:left;vertical-align:top}
th{width:34%;color:var(--sub);font-weight:600;white-space:nowrap}
.todo{background:#fff4d6;color:#7a5200;border-radius:5px;padding:1px 7px;font-size:12.5px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .todo{background:#3a2e10;color:#f0c24a}}
footer{margin-top:28px;background:var(--navy);color:var(--onnavy2);border-radius:16px;padding:18px 22px;
 font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:var(--onnavy2);text-decoration:none}
footer a:hover{color:#fff}

/* ---- 都市別ページ ---- */
.crumb{font-size:12.5px;color:var(--sub);margin-bottom:14px}
.crumb a{color:var(--accent);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.lead{font-size:14.5px;line-height:1.85;margin:0 0 20px}
.lead b{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px}
.stat>span{font-size:11px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.stat b{font-size:24px;letter-spacing:-.03em;line-height:1.2;font-weight:800}
.stat small{font-size:11px;color:var(--sub)}
table.mtbl th{width:auto;white-space:nowrap}
table.mtbl thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-bottom-color:var(--line)}
table.mtbl tbody th{font-weight:600;color:var(--ink);width:78px}
table.mtbl tbody th small{display:block;font-weight:400;color:var(--sub);font-size:10.5px;line-height:1.2}
table.mtbl .num{text-align:right;font-variant-numeric:tabular-nums;width:88px}
table.mtbl .sub{color:var(--sub);font-size:12.5px;width:66px}
table.mtbl .barc{width:auto;min-width:110px;white-space:nowrap}
.bar{display:inline-block;height:9px;border-radius:5px;vertical-align:middle;min-width:2px}
.pill{font-size:10.5px;border-radius:99px;padding:1px 7px;margin-left:8px;vertical-align:middle}
.pill.lo{background:#d1fae5;color:#047857}
.pill.hi{background:#fee2e2;color:#b91c1c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.lo{background:#13291f;color:#34d399}
 :root:not([data-theme="light"]) .pill.hi{background:#2e1717;color:#f87171}}
:root[data-theme="dark"] .pill.lo{background:#13291f;color:#34d399}
:root[data-theme="dark"] .pill.hi{background:#2e1717;color:#f87171}
ul.links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 16px}
ul.links li{margin:0;padding:5px 0;border-bottom:1px solid var(--line2);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
ul.links a{text-decoration:none;font-weight:600}
ul.links a:hover{text-decoration:underline}
ul.links .sub{color:var(--sub);font-size:12px;white-space:nowrap}
p.sub{color:var(--sub);font-size:12.5px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}
.btn{display:inline-block;background:var(--ink);color:var(--card);text-decoration:none;border-radius:10px;padding:9px 16px;font-size:13.5px;font-weight:700}
.btn:hover{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.backlink{margin:22px 0 0;font-size:13.5px}
.backlink a{text-decoration:none}

/* ---- 国別ページ ---- */
table.ctbl th{width:auto;white-space:nowrap;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
table.ctbl td{vertical-align:middle}
table.ctbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.ctbl td a{font-weight:600;text-decoration:none;color:var(--ink)}
table.ctbl td a:hover{color:var(--accent)}
table.ctbl small{color:var(--sub);font-weight:400}
table.ctbl .sub{color:var(--sub);font-size:12.5px}

/* ---- 説明ページの小見出し ---- */
h3{font-size:12.5px;margin:18px 0 8px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase}
.card>h3:first-child{margin-top:0}
h3+table,h3+ul,h3+p{margin-top:0}

/* ---- 英語名の補助表示 ---- */
ul.links a small,table.ctbl td a+small{color:var(--sub);font-size:11px;margin-left:5px;font-weight:400}
