/* スマホで読む1列の新聞。カテゴリごとに面の色を変える。 */
:root {
  --bg:#f5f6f8; --paper:#fff; --ink:#16191f; --ink-2:#4a5160; --ink-3:#7c8494;
  --line:#e3e6ec; --chip:#eef0f4; --c-top:#16191f; --c-gourmet:#d9480f;
  --c-travel:#0b8a7a; --c-politics:#2f4fb3; --c-art:#a3369f; --c-crime:#c92a2a;
  --alert-bg:#fff4e0; --alert-ink:#7a4300; --note-bg:#f1f4fb; --mark:#fff3a8;
  --info-bg:#edf5ff; --info-ink:#234d77; --info-line:#a9c9eb;
  --warn-bg:#fff8dc; --warn-ink:#705300; --warn-line:#e3ca75;
  --font-head:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --font-body:"BIZ UDPGothic","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --r:10px;
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#0f1115; --paper:#181b21; --ink:#eceef2; --ink-2:#b9bfcc; --ink-3:#8a91a0;
    --line:#2a2f38; --chip:#232832; --c-top:#eceef2; --c-gourmet:#ff8a4c;
    --c-travel:#35c2ae; --c-politics:#7c9bff; --c-art:#e07be0; --c-crime:#ff6b6b;
    --alert-bg:#3a2a10; --alert-ink:#ffd391; --note-bg:#1d2333; --mark:#5a4d00;
    --info-bg:#1c2b3e; --info-ink:#c5e0ff; --info-line:#3c638a;
    --warn-bg:#342e18; --warn-ink:#f4dfa0; --warn-line:#76622a;
    color-scheme:dark;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { margin:0; }
body {
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:15px; line-height:1.7; -webkit-text-size-adjust:100%;
}
a { color:inherit; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
body::before {
  content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px);
  z-index:30; background:var(--paper);
}
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible { outline:2px solid var(--c-politics); outline-offset:3px; }
.top {
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.masthead {
  display:flex; align-items:center; gap:8px; max-width:720px; margin:auto;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));
}
.brand {
  white-space:nowrap; font-family:var(--font-head); font-weight:900; font-size:19px;
  letter-spacing:.02em; line-height:1.1; margin-right:auto; background:none;
  border:0; color:var(--ink); padding:0; text-align:left;
}
.brand small { display:block; font-weight:500; font-size:10px; color:var(--ink-3); letter-spacing:.08em; }
.edition {
  font-size:12px; border:1px solid var(--line); background:var(--chip); color:var(--ink);
  border-radius:999px; padding:6px; max-width:32vw; min-width:0;
}
.iconbtn {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); display:grid; place-items:center; flex:0 0 auto;
}
.iconbtn svg { width:18px; height:18px; }
.tabs {
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  padding:0 10px; max-width:720px; margin:auto;
}
.tabs::-webkit-scrollbar { display:none; }
.tab {
  flex:0 0 auto; border:0; background:none; font-family:var(--font-head);
  font-weight:700; font-size:15px; color:var(--ink-3); padding:9px 10px 10px;
  border-bottom:3px solid transparent;
}
.tab[aria-selected="true"] { color:var(--tc); border-bottom-color:var(--tc); }
main {
  max-width:720px; margin:auto; padding-block:12px 40px;
  padding-left:max(12px,env(safe-area-inset-left,0px));
  padding-right:max(12px,env(safe-area-inset-right,0px));
}
.panel { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.panel > *, .sec, .prose { min-width:0; max-width:100%; }
.band {
  font-family:var(--font-head); font-weight:900; font-size:13px; letter-spacing:.12em;
  color:var(--tc); display:flex; align-items:center; gap:8px; margin:8px 4px 0;
}
.band::after { content:""; flex:1; height:2px; background:var(--tc); opacity:.25; }
.brief { background:var(--paper); border-radius:var(--r); padding:14px 16px; border-top:4px solid var(--ink); }
.brief h2 { font-family:var(--font-head); font-size:13px; letter-spacing:.1em; margin:0 0 6px; color:var(--ink-3); }
.brief ol { margin:0; padding-left:1.3em; display:grid; gap:4px; font-weight:700; }
.alert { background:var(--alert-bg); color:var(--alert-ink); border-radius:var(--r); padding:12px 14px; display:grid; gap:4px; }
.card { background:var(--paper); border-radius:var(--r); overflow:hidden; cursor:pointer; }
.card .img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--chip); }
.card .body { padding:12px 14px 14px; display:grid; gap:8px; min-width:0; }
.meta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.cat { font-family:var(--font-head); font-weight:700; color:var(--tc); }
.hot { font-size:11px; font-weight:700; color:var(--paper); background:var(--tc); border-radius:4px; padding:0 6px; }
.card h3 { font-family:var(--font-head); font-weight:700; font-size:21px; line-height:1.45; margin:0; text-wrap:balance; }
.summary { margin:0; }
.readmore { font-size:13px; color:var(--tc); font-weight:700; }
.row { background:var(--paper); border-radius:var(--r); display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:12px; padding:12px 12px 12px 14px; cursor:pointer; }
.row.noimg { grid-template-columns:minmax(0,1fr); }
.row h3 { font-family:var(--font-head); font-weight:700; font-size:16px; line-height:1.45; margin:0 0 4px; }
.row .sum { font-size:13px; color:var(--ink-2); margin:4px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row .thumb { width:92px; height:92px; object-fit:cover; border-radius:8px; background:var(--chip); }
.row .txt { min-width:0; }
.note { font-size:12px; color:var(--ink-3); margin:2px 4px; }
.empty { background:var(--paper); border-radius:var(--r); padding:18px; color:var(--ink-3); text-align:center; }
.empty button { margin:10px; }
.article { background:var(--paper); border-radius:var(--r); overflow:hidden; min-width:0; }
.back { display:flex; align-items:center; gap:6px; border:0; background:none; color:var(--ink-2); font-size:14px; padding:4px 2px 8px; }
.article .img { display:block; width:100%; max-height:360px; object-fit:cover; background:var(--chip); }
.credit { font-size:11px; color:var(--ink-3); padding:4px 16px 0; }
.article .inner { padding:14px 16px 20px; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; min-width:0; }
.article h1 { font-family:var(--font-head); font-weight:900; font-size:24px; line-height:1.4; margin:0; text-wrap:balance; }
.lede { font-family:var(--font-head); font-weight:700; font-size:16px; border-left:4px solid var(--tc); padding:2px 0 2px 12px; margin:0; }
.sec h2 { font-family:var(--font-head); font-size:13px; letter-spacing:.1em; color:var(--tc); margin:0 0 6px; }
.points { margin:0; padding-left:1.3em; display:grid; gap:4px; font-weight:700; }
.prose p { margin:0 0 1em; font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
.prose p:last-child { margin-bottom:0; }
.basis { font-size:12px; color:var(--ink-3); background:var(--chip); border-radius:6px; padding:6px 10px; }
.gloss { display:grid; gap:8px; margin:0; }
.gloss div { background:var(--chip); border-radius:8px; padding:8px 10px; }
.gloss dt { font-weight:700; }
.gloss dd { margin:0; font-size:14px; color:var(--ink-2); }
.box { background:var(--note-bg); border-radius:8px; padding:10px 12px; margin:0; }
.editor { border:2px solid var(--tc); border-radius:10px; padding:10px 12px; }
.editor p { margin:0; }
.family { background:var(--alert-bg); color:var(--alert-ink); border-radius:8px; padding:10px 12px; margin:0; }
.map iframe { width:100%; aspect-ratio:4/3; border:0; border-radius:8px; background:var(--chip); display:block; }
.map a { font-size:13px; display:inline-block; margin-top:6px; }
.srcs { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.srcs a { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 8px; text-decoration:none; background:var(--chip); border-radius:8px; padding:8px 10px; font-size:14px; }
.srcs .lang { grid-row:span 2; align-self:center; font-size:11px; border:1px solid var(--line); border-radius:4px; padding:0 5px; background:var(--paper); color:var(--ink-2); }
.srcs small { color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rel,.search { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.search input,.login input { width:100%; font-size:16px; padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.hits { font-size:13px; color:var(--ink-3); margin:0 4px; }
#results { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
#mapCanvas { height:min(65vh,560px); min-height:340px; border-radius:10px; }
.map-info { color:#16191f; font-family:var(--font-body); padding:4px; max-width:240px; }
.map-info button { display:block; margin-top:8px; }
.install { position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -8px 24px #0002; padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); }
.install .inner { max-width:560px; margin:auto; display:grid; gap:10px; }
.install h2 { font-family:var(--font-head); font-size:17px; margin:0; }
.install ol { margin:0; padding-left:1.4em; display:grid; gap:6px; }
.install .k { display:inline-block; border:1px solid var(--line); border-radius:6px; padding:0 6px; background:var(--chip); font-weight:700; }
.btns { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.install button,.primary { font-size:14px; border-radius:999px; padding:8px 16px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.primary,.install button.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.foot { text-align:center; font-size:12px; color:var(--ink-3); margin-top:24px; display:grid; gap:6px; overflow-wrap:anywhere; }
.foot button { justify-self:center; background:none; border:0; color:var(--ink-2); text-decoration:underline; }
.foot form { margin:0; }
.login { max-width:440px; margin:10vh auto 0; background:var(--paper); padding:24px; border-radius:var(--r); border-top:4px solid var(--ink); }
.login h1 { font-family:var(--font-head); font-size:26px; margin:0; }
.login form { display:grid; gap:12px; }
.login .error { color:var(--c-crime); min-height:1.7em; }
.login .primary { padding:12px; }

/* 本文の図解。横に長い表やグラフは、それぞれの枠の中だけを動かす。 */
.illustration { margin:0 0 16px; }
.illustration img {
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:contain; border-radius:var(--r); background:var(--chip);
}
.illustration figcaption { margin-top:5px; font-size:11px; color:var(--ink-3); }
.visual-heading {
  font-family:var(--font-head); font-size:18px; line-height:1.5;
  margin:1.3em 0 .6em; padding-left:10px; border-left:4px solid var(--tc);
  overflow-wrap:anywhere;
}
.visual-heading:first-child { margin-top:0; }
.visual-list {
  margin:0 0 1.2em; padding-left:1.5em; display:grid;
  gap:7px; font-size:16px; line-height:1.8; overflow-wrap:anywhere;
}
.visual-list li::marker { color:var(--tc); font-weight:700; }
.visual-facts {
  margin:0 0 1.2em; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; font-size:15px;
}
.visual-facts > div { display:grid; grid-template-columns:minmax(90px,28%) minmax(0,1fr); }
.visual-facts > div + div { border-top:1px solid var(--line); }
.visual-facts dt { margin:0; padding:10px 12px; font-weight:700; background:var(--chip); overflow-wrap:anywhere; }
.visual-facts dd { margin:0; padding:10px 12px; overflow-wrap:anywhere; }
.visual-table { margin:0 0 1.2em; min-width:0; max-width:100%; }
.table-scroll,.chart-scroll {
  max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.table-scroll { border:1px solid var(--line); border-radius:8px; }
.visual-table table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.65; }
.visual-table caption {
  text-align:left; font-weight:700; padding:10px 12px; color:var(--ink);
  background:var(--note-bg); caption-side:top; overflow-wrap:anywhere;
}
.visual-table th,.visual-table td {
  text-align:left; vertical-align:top; border-bottom:1px solid var(--line);
  padding:9px 12px; min-width:7em; max-width:24em; overflow-wrap:anywhere;
}
.visual-table th { font-weight:700; background:var(--chip); }
.visual-table tr:last-child td { border-bottom:0; }
.visual-table tbody tr:nth-child(even) { background:var(--bg); }
.visual-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.visual-note { font-size:12px; color:var(--ink-2); margin-top:7px; line-height:1.6; overflow-wrap:anywhere; }
.visual-chart {
  margin:0 0 1.2em; padding:12px 0; position:relative;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  min-width:0; max-width:100%;
}
.visual-chart > figcaption { font-weight:700; font-size:16px; overflow-wrap:anywhere; }
.chart-unit { font-size:12px; color:var(--ink-2); margin:4px 0; overflow-wrap:anywhere; }
.chart-svg { display:block; max-width:none; font-family:var(--font-body); }
.chart-axis,.chart-label { fill:var(--ink-2); font-size:12px; font-variant-numeric:tabular-nums; }
.chart-grid { stroke:var(--line); stroke-width:1; }
.chart-zero { stroke:var(--ink-3); stroke-width:1; }
.series-0 { --series-color:var(--tc); }
.series-1 { --series-color:color-mix(in srgb,var(--tc) 55%,var(--paper)); }
.series-2 { --series-color:var(--ink-3); }
.chart-line { fill:none; stroke:var(--series-color); stroke-width:2.5; }
.chart-line.series-1 { stroke-dasharray:7 3; }
.chart-line.series-2 { stroke-dasharray:3 3; }
.chart-point,.chart-bar { fill:var(--series-color); stroke:var(--paper); stroke-width:1; }
.chart-hit { fill:transparent; pointer-events:all; }
.chart-mark { cursor:pointer; }
.chart-mark:hover .chart-point,.chart-mark:focus .chart-point,
.chart-mark:hover .chart-bar,.chart-mark:focus .chart-bar { stroke:var(--ink); stroke-width:2; }
.chart-legend {
  display:flex; flex-wrap:wrap; gap:5px 16px; list-style:none;
  padding:0; margin:6px 0 2px; font-size:12px;
}
.chart-legend li { display:flex; align-items:center; gap:6px; min-width:0; overflow-wrap:anywhere; }
.chart-legend i { display:inline-block; width:18px; height:9px; flex:0 0 auto; background:var(--series-color); border-radius:2px; }
.chart-tip {
  position:absolute; top:58px; left:8px; right:8px; z-index:2;
  padding:9px 12px; border:1px solid var(--tc); border-radius:8px;
  background:var(--paper); color:var(--ink); box-shadow:0 3px 12px #0003;
  font-size:14px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
  pointer-events:none;
}
.chart-data { margin-top:9px; min-width:0; }
.chart-data summary { cursor:pointer; font-size:13px; color:var(--tc); padding:5px 0; }
.chart-data .visual-table { margin:7px 0 0; }
.visual-timeline { list-style:none; margin:0 0 1.2em 7px; padding:0 0 0 21px; border-left:2px solid var(--line); }
.visual-timeline li { position:relative; display:grid; gap:3px; padding:0 0 18px; overflow-wrap:anywhere; }
.visual-timeline li:last-child { padding-bottom:2px; }
.visual-timeline li::before {
  content:""; position:absolute; left:-28px; top:7px; width:12px; height:12px;
  border-radius:50%; background:var(--tc); border:2px solid var(--paper);
}
.timeline-when { color:var(--tc); font-weight:700; font-size:14px; }
.timeline-what { font-size:15px; line-height:1.8; }
.visual-callout { border:1px solid; border-left-width:4px; border-radius:8px; padding:11px 13px; margin:0 0 1.2em; font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
.visual-callout.info { background:var(--info-bg); color:var(--info-ink); border-color:var(--info-line); }
.visual-callout.warn { background:var(--warn-bg); color:var(--warn-ink); border-color:var(--warn-line); }
.prose > :last-child { margin-bottom:0; }
@media (max-width:480px) {
  .visual-facts > div { grid-template-columns:minmax(0,1fr); }
  .visual-facts dt { padding:7px 11px; }
  .visual-facts dd { padding:9px 11px 12px; }
}
@media (prefers-reduced-motion:no-preference) {
  .panel { animation:appear .18s ease-out; }
  @keyframes appear { from { opacity:.4; transform:translateX(var(--dx,0)); } to { opacity:1; transform:none; } }
}