/* ============================================
   ガジェット比較ラボ — Site Stylesheet
   ============================================
   Typography notes (read before editing):
   - No webfont. The stack below resolves to Hiragino Kaku Gothic ProN / Hiragino Sans
     on macOS+iOS and Yu Gothic UI on Windows — the faces native Japanese sites use.
     A 4-weight Noto Sans JP costs ~2.9 MB over 130+ subset requests and blocks paint.
   - Only font-weight 400 and 700 are used. The system Japanese faces ship Regular and
     Bold only; 500/600/800/900 are synthesised by the browser and look smeared.
     Get hierarchy from size, colour and spacing instead — which is also how Japanese
     editorial design does it.
   - Japanese body copy needs line-height 1.8+ and letter-spacing .02em. Latin norms
     of 1.5 read as cramped once kanji are in the mix. Headings sit tighter, ~1.4.
   ============================================ */
:root{
  --ink:#1a2333;
  --muted:#5b6575;
  --faint:#8a93a3;
  --bg:#f6f7fa;
  --surface:#ffffff;
  --line:#e3e8ef;
  --line-soft:#eef1f6;
  --brand:#2456c9;
  --brand-dark:#173a8a;
  --brand-soft:#eef3fd;
  --cta:#e88b00;
  --cta-dark:#c97400;
  --good:#0e8a5f;
  --good-bg:#e9f7f1;
  --bad:#c2452d;
  --bad-bg:#fdefec;
  --gold:#d9a406;
  --silver:#98a2b3;
  --bronze:#b9722d;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.8;font-size:16px;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
/* SVG infographics are laid out at fixed pixel coordinates by build_site.py —
   inherited letter-spacing would push their labels out of position. */
svg{letter-spacing:normal}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);letter-spacing:.02em;white-space:nowrap;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo .logo-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff;font-size:17px}
.logo small{display:block;font-size:10px;font-weight:400;color:var(--faint);letter-spacing:.12em;line-height:1.2}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:18px;cursor:pointer;color:var(--ink)}
.nav-groups{display:flex;gap:2px;list-style:none;align-items:center}
.nav-item{position:relative}
.nav-group-btn{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:inherit;letter-spacing:inherit;padding:10px 13px;border-radius:9px;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap;transition:.15s}
.nav-item:hover .nav-group-btn,.nav-item:focus-within .nav-group-btn{background:var(--brand-soft);color:var(--brand)}
.nav-item.is-current .nav-group-btn{color:var(--brand)}
.nav-item.is-current .nav-group-btn::after{content:"";position:absolute;left:14px;right:14px;bottom:-13px;height:2px;background:var(--brand)}
.nav-group-btn .chev{transition:transform .18s;opacity:.55}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg);opacity:1}
.nav-drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.10);padding:6px;opacity:0;visibility:hidden;transition:.18s;z-index:60}
.nav-drop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:400;color:var(--ink);white-space:nowrap}
.nav-drop a:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
.nav-drop a[aria-current="page"]{background:var(--brand-soft);color:var(--brand);font-weight:700}
.nav-drop .nd-emoji{font-size:16px;width:20px;text-align:center}
.nav-all-link{display:block;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--brand);border:1px solid #c8d6f5;white-space:nowrap;margin-left:6px}
.nav-all-link:hover{background:var(--brand);color:#fff;text-decoration:none;border-color:var(--brand)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:12.5px;color:var(--faint);padding:14px 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:#c3cad6}
.breadcrumb a{color:var(--faint)}

/* ---------- Hero (home) ----------
   Light, hairline-bordered, no gradient. The right-hand stat block carries the
   trust signals a Japanese reader checks first: scale, price range, update date. */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:44px 0 42px}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:28px 44px;align-items:start}
.hero-kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.1em;margin-bottom:13px}
.hero-kicker::before{content:"";width:22px;height:2px;background:var(--brand)}
.hero h1{font-size:clamp(23px,3.3vw,33px);font-weight:700;line-height:1.45;letter-spacing:.01em;font-feature-settings:"palt" 1}
.hero p.lead{margin-top:15px;font-size:14.5px;color:var(--muted);line-height:1.95}
/* full-width 注記 band under both hero columns — keeps the two columns close in
   height and gives the disclosure/operator line the prominence JP readers expect */
.hero-trust{grid-column:1/-1;padding-top:15px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--faint);line-height:1.9}
.hero-trust a{font-weight:700}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hero-stats .hs{background:var(--surface);padding:14px 16px 15px}
.hero-stats dt{font-size:11.5px;color:var(--faint);letter-spacing:.05em;line-height:1.6}
.hero-stats dd{margin-top:1px;font-size:12px;color:var(--muted);line-height:1.4}
.hero-stats em{font-style:normal;font-weight:700;font-size:28px;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums;margin-right:3px}
.hero-stats .hs-sm em{font-size:14.5px;margin-right:0;line-height:1.75}

/* ---------- Section headings ---------- */
.section{padding:44px 0}
.section-title{font-size:clamp(20px,2.6vw,25px);font-weight:700;line-height:1.45;letter-spacing:.02em;display:flex;align-items:center;gap:11px;margin-bottom:7px;font-feature-settings:"palt" 1}
.section-title::before{content:"";width:4px;height:1.15em;border-radius:2px;background:var(--brand);flex:0 0 auto}
.section-sub{color:var(--muted);font-size:13.5px;line-height:1.85;margin-bottom:22px}

/* ---------- Category directory (home) ---------- */
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.cat-chips a{font-size:13px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 15px}
.cat-chips a:hover{border-color:#b9cbf0;background:var(--brand-soft);color:var(--brand);text-decoration:none}
.cat-group{margin-top:34px;scroll-margin-top:84px}
.cat-group:first-of-type{margin-top:0}
.cg-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:11px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.cg-head h3{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:.04em;line-height:1.4}
.cg-head h3::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--brand)}
.cg-meta{margin-left:auto;display:flex;align-items:baseline;gap:13px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;line-height:1.6}
.cg-meta .cg-price{color:var(--muted);font-weight:700}
/* 3 up on desktop, not auto-fill: the nav groups hold 3-5 categories each, so a
   4-column track leaves orphan cards on most of them. 3 fills cleanly. */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
@media (min-width:1024px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 14px;display:flex;flex-direction:column;gap:11px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.cat-card:hover{border-color:#b9cbf0;box-shadow:0 2px 10px rgba(16,24,40,.07);text-decoration:none}
.cc-head{display:flex;align-items:center;gap:10px}
.cc-ico{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--brand-soft);display:grid;place-items:center;font-size:18px;line-height:1}
.cat-card h4{font-size:15.5px;font-weight:700;letter-spacing:.02em;line-height:1.4;font-feature-settings:"palt" 1}
.cc-desc{font-size:12.5px;color:var(--muted);line-height:1.8;flex:1}
.cc-data{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:9px 0;display:flex;flex-direction:column;gap:4px}
.cc-row{display:flex;align-items:baseline;gap:10px;font-size:12px;line-height:1.6}
.cc-k{flex:0 0 56px;color:var(--faint);letter-spacing:.05em}
.cc-row b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cc-row b.cc-price{color:var(--brand)}
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cc-upd{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.cc-go{font-size:12.5px;font-weight:700;color:var(--brand);white-space:nowrap}
.cc-go::after{content:"→";margin-left:5px}
.cat-card:hover .cc-go{text-decoration:underline}

/* ---------- Article header ---------- */
.article-head{padding:26px 0 6px}
.article-head h1{font-size:clamp(22px,3.4vw,30px);font-weight:700;line-height:1.45;letter-spacing:.01em;font-feature-settings:"palt" 1}
.article-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:12.5px;color:var(--faint)}
.article-meta .tag{background:var(--brand-soft);color:var(--brand);font-weight:700;padding:3px 10px;border-radius:999px}
.article-intro{margin-top:18px;color:var(--ink);font-size:15px;line-height:1.9}
.article-intro p+p{margin-top:12px}
.disclosure{margin-top:16px;font-size:12px;color:#8a6a24;background:#fff8ec;border:1px solid #f3e3c2;border-radius:8px;padding:8px 14px;display:inline-block}

/* ---------- TOC ---------- */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:26px 0 6px}
.toc strong{font-size:14px;font-weight:700;display:block;margin-bottom:10px}
.toc ol{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.toc a{font-size:13.5px;color:var(--muted);display:flex;gap:8px}
.toc a::before{content:"▸";color:var(--brand)}
.toc a:hover{color:var(--brand)}

/* ---------- Infographics ----------
   <figure class="infographic"> wrapping an inline SVG + <figcaption>, emitted by
   build_site.py on every category page (PAGE_SPEC.md). Two per page today.
   The UA's `figure{margin:1em 40px}` is already neutralised by the `*` reset at the
   top of this file — the margin below is rhythm, not a fix. Do not remove the reset
   without re-checking this: 40px of UA side margin would cost the chart 80px of
   width on a 375px screen.
   Card treatment matches .table-wrap / .prod-card so the chart reads as page
   furniture of the same rank as the table it introduces, not as a loose image. */
.infographic{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px 18px;margin:0 0 18px}
/* display:block kills the inline-baseline gap under the SVG; width:100% duplicates
   the SVG's own attribute so the layout does not depend on it. */
.infographic svg{display:block;width:100%;height:auto}
.infographic figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted);line-height:1.8}

/* ---------- Comparison table ---------- */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
table.compare{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px}
table.compare th,table.compare td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.75}
table.compare thead th{background:#f4f7fd;font-size:12.5px;color:var(--brand-dark);font-weight:700;white-space:nowrap;position:sticky;top:0}
table.compare tbody tr:last-child td{border-bottom:none}
table.compare tbody tr:hover{background:#fafbff}
table.compare td.prod{font-weight:700;min-width:180px}
table.compare td.prod .rk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;margin-right:8px}
table.compare td.prod a{color:var(--ink)}
table.compare td .price{color:var(--cta-dark);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.table-note{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.85}

/* ---------- Product ranking cards ---------- */
.prod-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-top:26px;overflow:hidden}
.prod-card .prod-head{display:flex;align-items:flex-start;gap:16px;padding:22px 24px 0}
.rank-badge{flex:0 0 auto;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;line-height:1.1;text-align:center}
.rank-1{background:#d9a406}
.rank-2{background:#8b96a8}
.rank-3{background:#b9722d}
.rank-n{background:var(--brand)}
.rank-badge small{display:block;font-size:9px;font-weight:400;opacity:.9}
.prod-title-wrap{flex:1;min-width:0}
.prod-role{display:inline-block;font-size:11.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:3px 12px;margin-bottom:6px}
.prod-card h3{font-size:18.5px;font-weight:700;line-height:1.45;letter-spacing:.01em}
.prod-card .brand{font-size:12.5px;color:var(--faint);font-weight:400}
.prod-price{margin-left:auto;text-align:right;flex:0 0 auto}
.prod-price .yen{font-size:20px;font-weight:700;color:var(--cta-dark);white-space:nowrap;font-variant-numeric:tabular-nums}
.prod-price small{display:block;font-size:10.5px;color:var(--faint)}
.prod-body{padding:14px 24px 24px}
.prod-pitch{font-size:14.5px;background:#f7f9fc;border-left:3px solid var(--brand);border-radius:0 8px 8px 0;padding:11px 16px;margin-bottom:16px;color:var(--ink);line-height:1.85}
.spec-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.spec-chips span{font-size:12px;background:#f4f6fa;border:1px solid var(--line);border-radius:7px;padding:4px 10px;color:var(--muted)}
.spec-chips span b{color:var(--ink);font-weight:700}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.pros,.cons{border-radius:10px;padding:14px 16px;font-size:13.5px}
.pros{background:var(--good-bg)}
.cons{background:var(--bad-bg)}
.pros h4{color:var(--good);font-size:12.5px;font-weight:700;margin-bottom:6px}
.cons h4{color:var(--bad);font-size:12.5px;font-weight:700;margin-bottom:6px}
.pros ul,.cons ul{list-style:none}
.pros li,.cons li{padding-left:20px;position:relative;margin-top:4px;line-height:1.8}
.pros li::before{content:"◎";position:absolute;left:0;color:var(--good);font-weight:700}
.cons li::before{content:"△";position:absolute;left:0;color:var(--bad);font-weight:700}
.best-for{font-size:13.5px;background:var(--brand-soft);border-radius:10px;padding:12px 16px;margin-bottom:18px;line-height:1.85}
.best-for b{color:var(--brand-dark)}
.btn-amazon{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--cta);color:#fff !important;font-weight:700;font-size:15px;border-radius:10px;padding:14px 22px;text-align:center;transition:.15s}
.btn-amazon:hover{filter:brightness(1.06);text-decoration:none}
.btn-amazon small{font-weight:400;font-size:11px;opacity:.9}
/* Non-link price line for the products that carry no purchase link (PAGE_SPEC.md:
   only 2 of 6 get a CTA). It occupies the slot .btn-amazon occupies on the other
   cards, so it needs a deliberate panel — unstyled it reads as a button that failed
   to render. Same 10px radius and full-width footprint as the button, but the quiet
   surface of .prod-pitch and no colour lift, so it never reads as clickable.
   Left-aligned, not centred: it matches .prod-pitch / .best-for above it, reads as a
   statement rather than a label, and centring stranded single kana on the last line
   once the caveat wrapped at 375px. */
.price-note{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:12px 18px;font-size:13.5px;color:var(--muted);line-height:1.8}
.price-note b{margin:0 3px;font-size:16px;font-weight:700;color:var(--cta-dark);font-variant-numeric:tabular-nums}
.price-note small{display:block;margin-top:2px;font-size:11.5px;color:var(--faint);line-height:1.7}

/* ---------- Guide section ---------- */
.guide-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-top:14px}
.guide-item h3{font-size:16px;font-weight:700;display:flex;gap:10px;align-items:baseline;margin-bottom:8px;line-height:1.5}
.guide-item h3 .gnum{color:#fff;background:var(--brand);border-radius:6px;font-size:12px;padding:2px 9px;flex:0 0 auto}
.guide-item p{font-size:14px;color:var(--ink);line-height:1.9}
/* Authority citation (出典：…) — the one dofollow link on the page, rendered under
   the POINT whose claim it backs. Subordinate to the 14px ink body above it but
   still legible: it is an E-E-A-T signal, not fine print.
   `.guide-item .cite` is required, not decorative — a bare `.cite` (0,1,0) loses to
   `.guide-item p` (0,1,1) above and would inherit 14px ink. The bare `.cite` in the
   list covers the same line if it is ever emitted outside .guide-item. */
.guide-item .cite,.cite{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted);line-height:1.8}
.cite a{font-weight:700;overflow-wrap:anywhere}

/* ---------- FAQ ---------- */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-top:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;font-size:14.5px;display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.faq summary::after{content:"＋";margin-left:auto;color:var(--faint);font-weight:400}
.faq details[open] summary::after{content:"－"}
.faq .faq-a{padding:0 20px 18px 58px;font-size:14px;color:var(--muted);line-height:1.9}

/* ---------- Related ---------- */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.related-grid a{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 18px;font-size:13.5px;font-weight:700;color:var(--ink);display:flex;gap:10px;align-items:center;line-height:1.6}
.related-grid a:hover{border-color:#b9cbf0;color:var(--brand);text-decoration:none}

/* ---------- Policy cards (home) ---------- */
.policy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.policy-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 22px}
.policy-card .p-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--brand-soft);font-size:18px;line-height:1}
.policy-card h3{font-size:14.5px;font-weight:700;letter-spacing:.02em;line-height:1.5;margin:13px 0 7px}
.policy-card p{font-size:12.5px;color:var(--muted);line-height:1.9}

/* ---------- Footer ---------- */
.site-footer{background:#0f1830;color:#aab4cc;margin-top:64px;padding:48px 0 26px;font-size:13px;border-top:2px solid var(--brand)}
.footer-top{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.f-brand p{font-size:12.5px;line-height:1.95;color:#8d99b5}
.f-logo{color:#fff;margin-bottom:14px}
.f-logo small{color:#5f6d8f}
.f-logo .logo-mark{background:var(--brand)}
.f-updated{margin-top:12px;font-size:11.5px;color:#7783a1}
.footer-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 20px}
.f-col h4{color:#e6ebf7;font-size:12.5px;font-weight:700;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #263252;letter-spacing:.05em}
.site-footer ul{list-style:none}
.site-footer li{margin-top:7px}
.site-footer a{color:#aab4cc;font-size:12.5px}
.site-footer a:hover{color:#fff}
.footer-bar{display:flex;flex-wrap:wrap;gap:6px 26px;border-top:1px solid #263252;margin-top:36px;padding-top:18px}
.footer-bar a{font-size:12.5px;font-weight:700;color:#c3cde3}
.footer-note{margin-top:18px;font-size:11px;color:#67739a;line-height:1.9}
.footer-note p+p{margin-top:5px}
.f-copy{margin-top:10px;color:#8d99b5;letter-spacing:.06em}

/* ---------- Responsive: large displays (iMac 24/27", ultrawide) ---------- */
@media (min-width:1680px){
  :root{--maxw:1440px}
  body{font-size:17px}
  .nav-group-btn{font-size:15px;padding:11px 16px}
  .toc ol{grid-template-columns:1fr 1fr 1fr}
  .hero{padding:64px 0 60px}
  .hero-inner{grid-template-columns:minmax(0,1fr) 400px}
  .hero p.lead{font-size:16px}
}
@media (min-width:2200px){
  :root{--maxw:1600px}
}

/* ---------- Responsive: navigation ----------
   The six group buttons + the すべてのカテゴリ pill need ~1205px next to the logo,
   so the horizontal nav only fits from ~1261px up. Below that it must collapse to
   the toggle or it pushes the document wider than the viewport (it used to do
   exactly that on every page between 961px and 1260px — iPad landscape included).
   Kept separate from the layout breakpoint below on purpose. */
@media (max-width:1260px){
  .global-nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 22px rgba(16,24,40,.07);max-height:calc(100vh - 64px);overflow-y:auto}
  .global-nav.open{display:block}
  .nav-groups{flex-direction:column;align-items:stretch;padding:10px 16px 18px;gap:0}
  .nav-item{border-bottom:1px solid var(--line)}
  .nav-item:last-child{border-bottom:none}
  .nav-group-btn{width:100%;justify-content:flex-start;padding:13px 4px;font-size:14.5px;color:var(--ink);cursor:default}
  .nav-group-btn .chev{display:none}
  .nav-item.is-current .nav-group-btn::after{display:none}
  .nav-drop{position:static;transform:none;opacity:1;visibility:visible;min-width:0;border:none;box-shadow:none;border-radius:0;padding:0 0 10px 4px}
  .nav-drop a{padding:8px 10px}
  .nav-all{padding-top:12px}
  .nav-all-link{text-align:center;margin-left:0}
  .nav-toggle{display:block}
}

/* ---------- Responsive: tablet / mobile layout ---------- */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:26px}
  .toc ol{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
  .prod-card .prod-head{flex-wrap:wrap}
  .prod-price{margin-left:0;text-align:left;width:100%}
  .footer-top{grid-template-columns:1fr;gap:28px}
  .footer-cats{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .container{padding:0 16px}
  .hero{padding:30px 0 30px}
  .hero p.lead{font-size:14px}
  .section{padding:34px 0}
  .hero-stats .hs{padding:12px 13px}
  .hero-stats em{font-size:24px}
  .hero-stats .hs-sm em{font-size:13px}
  .cat-grid{grid-template-columns:1fr}
  .cat-group{margin-top:28px}
  .cg-meta{margin-left:0;width:100%;gap:11px;font-size:11.5px}
  .cat-chips{gap:7px;margin-bottom:24px}
  .cat-chips a{font-size:12.5px;padding:6px 13px}
  .policy-grid{grid-template-columns:1fr}
  .prod-card .prod-head{padding:18px 16px 0}
  .prod-body{padding:12px 16px 20px}
  /* The SVG scales to its container, so every px of card padding is a px off the
     chart. Tighter than the other cards on purpose — at 375px this buys the
     viewBox ~30px of width, and the chart has no text hard against its own edge. */
  .infographic{padding:14px 13px 12px}
  .infographic figcaption{margin-top:12px;padding-top:10px;font-size:12px}
  .price-note{padding:11px 14px}
  .faq .faq-a{padding-left:20px}
  .footer-cats{grid-template-columns:1fr}
}