:root{
  --ink:#111a22; --paper:#f6f5f1; --accent:#c85c3c;
  --sub:#6e767e; --line:#d2d0ca; --card:#ffffff; --soft:#efeee9;
  --a:#2f6f4f; --b:#3c6ea8; --c:#8a7a3c; --d:#8c5050;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#eceae5; --paper:#12181d; --sub:#96a0a8; --line:#2b343b;
         --card:#19212a; --soft:#1e2831;
         --a:#7fbf9b; --b:#8fb8e6; --c:#d6c07a; --d:#e39a9a; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"BIZ UDPGothic","BIZ UDGothic","Hiragino Sans","Hiragino Kaku Gothic ProN",
              "Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:16px; line-height:1.85; word-break:normal; overflow-wrap:break-word;
}
/* 長いURLだけは折る。金額を途中で折らせない */
a[href^="http"]{overflow-wrap:anywhere}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
a:hover{text-decoration:none}
.wrap{max-width:1080px; margin:0 auto; padding:0 16px}
.wrap.narrow{max-width:760px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:var(--card); padding:8px; z-index:99}

header.site{border-bottom:1px solid var(--line); background:var(--paper);
  position:sticky; top:0; z-index:20}
header.site .bar{display:flex; align-items:center; gap:12px; min-height:56px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; text-decoration:none;
  letter-spacing:.02em}
.brand img{border-radius:4px}
.mainnav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.mainnav a{padding:6px 10px; border-radius:6px; text-decoration:none; font-size:.92rem;
  color:var(--sub)}
.mainnav a:hover{background:var(--soft); color:var(--ink)}
.mainnav a.on{color:var(--ink); font-weight:700; box-shadow:inset 0 -2px 0 var(--accent)}

.hero{padding:28px 0 8px}
.hero h1{font-size:1.7rem; margin:0 0 6px; letter-spacing:.02em}
.hero .lead{margin:0 0 8px; font-weight:700}
.hero .sub{margin:0; color:var(--sub); font-size:.94rem}

.panel{margin:16px 0}
.filters{border:1px solid var(--line); border-radius:10px; background:var(--card);
  padding:10px 14px}
.filters>summary{cursor:pointer; font-weight:700; padding:4px 0}
.filters .hint{font-weight:400; color:var(--sub); font-size:.86rem}
.fgs{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:10px}
.fg{border:0; margin:0; padding:0}
.fg legend{font-size:.82rem; color:var(--sub); padding:0 0 4px}
.chks{display:flex; flex-wrap:wrap; gap:6px}
.chk{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; font-size:.86rem; cursor:pointer; background:var(--paper)}
.chk input{accent-color:var(--accent); margin:0}
.chk:has(input:checked){border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.fbtns{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0 4px}
.q{display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--sub)}
.q input{font:inherit; font-size:.92rem; padding:6px 8px; border:1px solid var(--line);
  border-radius:6px; background:var(--paper); color:var(--ink); min-width:200px}
.btn{display:inline-block; font:inherit; font-size:.88rem; padding:7px 14px; cursor:pointer;
  border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink);
  text-decoration:none}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}

.toolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0 10px}
.toolbar .count{margin:0; color:var(--sub); font-size:.9rem}
.toolbar .count strong{color:var(--ink); font-size:1.15rem}
.sort{margin-left:auto; font-size:.86rem; color:var(--sub); display:flex; gap:6px;
  align-items:center}
.sort select{font:inherit; font-size:.9rem; padding:6px 8px; border:1px solid var(--line);
  border-radius:6px; background:var(--paper); color:var(--ink)}

.cards{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  padding-bottom:80px}
.card{border:1px solid var(--line); border-radius:10px; background:var(--card);
  padding:14px 16px 12px; display:flex; flex-direction:column; gap:8px}
.card h2{font-size:1.12rem; margin:0; line-height:1.5}
.card h2 a{text-decoration:none}
.card h2 a:hover{text-decoration:underline}
.card .lead{margin:0; font-size:.88rem; color:var(--sub); line-height:1.7}
.badges{display:flex; flex-wrap:wrap; gap:5px; margin:0}
.badge{font-size:.74rem; border:1px solid var(--line); border-radius:999px; padding:1px 8px;
  color:var(--sub); white-space:nowrap}
.badge.ed{border-color:var(--accent); color:var(--accent); font-weight:700}
.figs{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 12px; margin:2px 0 0;
  border-top:1px solid var(--line); padding-top:10px}
.figs div{min-width:0}
.figs span{display:block; font-size:.74rem; color:var(--sub); line-height:1.4}
.figs b{display:block; font-size:1.02rem; color:var(--ink); font-weight:700; line-height:1.4;
  white-space:nowrap; font-variant-numeric:tabular-nums}
.figs .neg b{color:var(--accent)}
.cardfoot{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px;
  border-top:1px solid var(--line)}
.cardfoot .upd{font-size:.76rem; color:var(--sub); margin:0}
.cardfoot .cmpchk{margin-left:auto; font-size:.82rem; display:inline-flex; align-items:center;
  gap:5px; cursor:pointer; color:var(--sub)}
.cardfoot .cmpchk input{accent-color:var(--accent)}
.empty{color:var(--sub); padding:24px 0}
.plainlist{padding-left:1.2em}

.tray{position:fixed; left:0; right:0; bottom:0; background:var(--card);
  border-top:1px solid var(--line); z-index:30; box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.trayin{display:flex; align-items:center; gap:12px; padding-top:10px; padding-bottom:10px;
  flex-wrap:wrap}
.traytxt{margin:0; font-size:.9rem; font-weight:700}
.traybtns{margin:0 0 0 auto; display:flex; gap:8px; flex-wrap:wrap}

/* ---- 記事 ---- */
.rechead{padding:24px 0 4px}
.crumb{margin:0 0 6px; font-size:.82rem; color:var(--sub)}
.rechead h1{font-size:1.6rem; margin:0 0 6px; line-height:1.5}
.rechead .scope{margin:0 0 8px; color:var(--sub); font-size:.9rem}
.rechead .dates{margin:8px 0 0; font-size:.8rem; color:var(--sub)}
.hero-img{margin:16px 0 0}
.hero-img img{border:1px solid var(--line); border-radius:8px}
.edition-note{border-left:3px solid var(--accent); margin:16px 0; padding:6px 0 6px 12px;
  color:var(--sub); font-size:.9rem}
.kpis{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:18px 0}
.kpi{border:1px solid var(--line); border-radius:8px; background:var(--card); padding:10px 12px}
.kpi .k{margin:0; font-size:.76rem; color:var(--sub)}
.kpi .v{margin:2px 0 0; font-size:1.2rem; font-weight:700; line-height:1.4}
.kpi .s{margin:2px 0 0; font-size:.74rem; color:var(--sub)}
.recbtns{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 8px}
.toc{border:1px solid var(--line); border-radius:8px; padding:10px 16px; margin:18px 0 28px;
  background:var(--card)}
.toc .toch{margin:0 0 4px; font-size:.8rem; color:var(--sub)}
.toc ol{margin:0; padding-left:1.4em; font-size:.92rem}
.toc li{margin:2px 0}

.rec section{margin:0 0 34px; scroll-margin-top:70px}
.rec h2{font-size:1.32rem; margin:0 0 14px; padding-bottom:6px;
  border-bottom:2px solid var(--ink)}
.rec h3{font-size:1.06rem; margin:26px 0 8px; color:var(--ink)}
.rec h3::before{content:"— "; color:var(--accent)}
.rec h4{font-size:.98rem; margin:18px 0 6px}
.rec p{margin:0 0 1em}
.rec ul,.rec ol{margin:0 0 1em; padding-left:1.5em}
.rec li{margin:.3em 0}
.rec hr{border:0; border-top:1px solid var(--line); margin:28px 0}
.rec blockquote{border-left:3px solid var(--line); margin:1em 0; padding-left:12px;
  color:var(--sub)}
.formula{background:var(--soft); border:1px solid var(--line); border-radius:6px;
  padding:10px 12px; font-size:.9rem; overflow-x:auto; white-space:pre-wrap; margin:0 0 1em}
.fig{margin:18px 0; text-align:center}
.fig img{border:1px solid var(--line); border-radius:6px; margin:0 auto}
.fig figcaption{font-size:.78rem; color:var(--sub); margin-top:5px}
.lic{border-left:3px solid var(--line); padding-left:12px; margin:0 0 12px}
.lic .lh{margin:0 0 2px; font-weight:700; font-size:.92rem}
.lic p{margin:0}
.disc{font-size:.84rem; color:var(--sub)}

.tw{overflow-x:auto; margin:0 0 1.2em; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.9rem; background:var(--card)}
th,td{border:1px solid var(--line); padding:7px 10px; text-align:left; vertical-align:top}
thead th{background:var(--soft); font-size:.84rem; white-space:nowrap}
/* 語が1文字ずつ折れないよう、見出し列だけ折らせない表 */
table.mini th:first-child,table.mini td:first-child{white-space:nowrap; width:1%}
/* 数字の並ぶ表は狭い画面で潰さず、横に送る */
.tw table.wide{min-width:520px}
.srcmeta{margin:4px 0 0; padding-left:1.1em; font-size:.82rem; color:var(--sub)}
.srcmeta b{color:var(--ink); font-weight:700}
.grade{display:inline-block; min-width:1.6em; text-align:center; border-radius:4px;
  font-weight:700; font-size:.82rem; padding:1px 6px; color:#fff}
.grade.a{background:var(--a)} .grade.b{background:var(--b)}
.grade.c{background:var(--c)} .grade.d{background:var(--d)}

/* ---- 比較 ---- */
.picks{display:grid; gap:6px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  margin-top:10px}
.pick{display:flex; flex-wrap:wrap; align-items:baseline; align-content:start; gap:2px 7px;
  border:1px solid var(--line); border-radius:8px; padding:7px 10px; cursor:pointer;
  background:var(--paper); font-size:.9rem}
.pick input{accent-color:var(--accent); margin:0}
.pick>span{font-weight:700; min-width:0}
.pick em{flex-basis:100%; font-style:normal; font-size:.76rem; color:var(--sub);
  line-height:1.5}
.pick:has(input:checked){border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.pick:has(input:disabled){opacity:.45; cursor:not-allowed}
.cmpwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:24px}
table.cmp{min-width:640px; font-size:.88rem}
table.cmp th.rowhead{position:sticky; left:0; z-index:2; background:var(--soft);
  width:150px; min-width:130px; font-size:.82rem; font-weight:700}
table.cmp thead th{position:sticky; top:0; z-index:3; background:var(--soft);
  white-space:normal; vertical-align:bottom}
table.cmp thead th.rowhead{z-index:4}
table.cmp thead th a{font-size:1rem}
table.cmp td{min-width:150px}
table.cmp tr.grp th{background:var(--ink); color:var(--paper); font-size:.82rem;
  letter-spacing:.06em}
@media (prefers-color-scheme: dark){ table.cmp tr.grp th{background:#0a1015; color:#eceae5} }
.cmpsub{display:block; font-size:.76rem; color:var(--sub); font-weight:400}
.num{font-variant-numeric:tabular-nums; font-weight:700}
.num.neg{color:var(--accent)}
.best-dot{display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); vertical-align:middle; margin-right:5px}
.bestnote{font-size:.82rem; color:var(--sub)}
.bar{--w:0%}
.sbar{display:block; height:6px; background:var(--soft); border-radius:3px; margin-top:4px;
  overflow:hidden}
.sbar i{display:block; height:100%; background:var(--ink); border-radius:3px}
.belist{margin:0; padding-left:1.1em; font-size:.82rem}
.belist li{margin:.2em 0}
.badge.small{font-size:.7rem}

footer.site{border-top:1px solid var(--line); margin-top:40px; padding:22px 0 40px;
  color:var(--sub); font-size:.84rem}
footer.site .tag{margin:0 0 10px; font-weight:700; color:var(--ink)}
footer.site .disc{margin:0 0 8px}
footer.site .meta{margin:12px 0 0; font-size:.76rem}

@media (max-width:600px){
  body{font-size:15px}
  .hero h1{font-size:1.4rem}
  .rechead h1{font-size:1.35rem}
  .rec h2{font-size:1.16rem}
  .cards{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .kpi .v{font-size:1.05rem}
  table{font-size:.84rem}
  th,td{padding:6px 8px}
  .mainnav a{padding:5px 8px}
  .toolbar .sort{margin-left:0; width:100%}
  .toolbar .sort select{flex:1}
  .cards{padding-bottom:96px}
}