/* 公開面のスタイル。docs/design/2026-09-07 の案 4(案 2「棚」を地に、一覧だけ案 1「端末」の密度へ切り替え)から起こした。
   viz.css(図の色)→ p2.css(地の色・書体・部品)→ p4.css(切り替えと一覧)の順で読む。原本を直したらここへ写す。 */

/* 図の共通スタイル。色は各案の :root の --viz-* を参照する */
.viz{display:block;max-width:100%;overflow:visible;font-family:inherit}
.viz text{font-family:var(--viz-font,inherit);font-variant-numeric:tabular-nums}
.viz-grid{stroke:var(--viz-grid);stroke-width:1;shape-rendering:crispEdges}
.viz-axis{stroke:var(--viz-axis);stroke-width:1;shape-rendering:crispEdges}
.viz-tick{font-size:11px;fill:var(--viz-muted);letter-spacing:.01em}
.viz-ref{stroke:var(--viz-axis);stroke-width:1;shape-rendering:crispEdges}
.viz-ref-l{font-size:11px;fill:var(--viz-muted)}
.viz-wash{fill:var(--viz-accent);opacity:.08}
.viz-line{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz-line--accent{stroke:var(--viz-accent)}
.viz-line--second{stroke:var(--viz-second)}
.viz-line--muted{stroke:var(--viz-muted);opacity:.7}
.viz-line--spark{stroke:var(--viz-muted);stroke-width:1.5}
.viz-dot{stroke:var(--viz-surface);stroke-width:2}
.viz-dot--accent{fill:var(--viz-accent)}
.viz-dot--muted{fill:var(--viz-muted)}
.viz-dot--ink{fill:var(--viz-ink)}
.viz-leader{stroke:var(--viz-axis);stroke-width:1;fill:none}
.viz-el{font-size:11.5px;fill:var(--viz-ink2)}
.viz-el--accent{fill:var(--viz-ink);font-weight:600}
.viz-cross{stroke:var(--viz-ink);stroke-width:1;opacity:.5;shape-rendering:crispEdges}
.viz-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--viz-ink2)}
.viz-legend__i{display:inline-flex;align-items:center;gap:7px}
.viz-legend__k{display:inline-block;width:16px;height:2px;border-radius:1px;background:var(--viz-muted)}
.viz-legend__k--accent{background:var(--viz-accent)}
.viz-legend__k--second{background:var(--viz-second)}
.viz-rl{font-size:12.5px;fill:var(--viz-ink2)}
.viz-rl--accent{fill:var(--viz-ink);font-weight:600}
.viz-rm{font-size:10.5px;fill:var(--viz-muted)}
.viz-db-line{stroke:var(--viz-axis);stroke-width:2;stroke-linecap:round}
.viz-vl{font-size:12.5px;fill:var(--viz-ink)}
.viz-vl--accent{font-weight:600}
.viz-vl--muted{fill:var(--viz-muted);font-size:11.5px}
.viz-bar{fill:var(--viz-seq)}
.viz-bar--accent{fill:var(--viz-accent)}
.is-hover .viz-bar{opacity:.8}
.viz-cap{font-size:11px;fill:var(--viz-ink2)}
.viz-cap--accent{fill:var(--viz-ink);font-weight:600}
.viz-pos__track{fill:var(--viz-seq-100)}
.viz-pos__fill{fill:var(--viz-accent)}
.viz-tip{position:fixed;z-index:50;pointer-events:none;background:var(--viz-ink);color:var(--viz-surface);padding:8px 10px;border-radius:6px;font-size:12px;line-height:1.4;min-width:120px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.viz-tip__t{opacity:.7;margin-bottom:4px;font-size:11px}
.viz-tip__r{display:flex;align-items:center;gap:7px;white-space:nowrap}
.viz-tip__r b{font-weight:600;font-variant-numeric:tabular-nums}
.viz-tip__r span{opacity:.75}
.viz-tip__k{display:inline-block;width:10px;height:2px;border-radius:1px}
/* 店 × 製品の値段の表 */
.mx,.mx-empty{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-empty{color:var(--viz-muted)}
.mx-1{background:var(--viz-seq-100)}.mx-2{background:var(--viz-seq-200)}.mx-3{background:var(--viz-seq-300)}
.mx-4{background:var(--viz-seq-400);color:#fff}.mx-5{background:var(--viz-seq-500);color:#fff}.mx-6{background:var(--viz-seq-600);color:#fff;font-weight:600}

/* 案 2「棚」— 製品を絵で見せる。カードと棚(横並び)、暖かい紙色に菫 1 色。Inter + Noto Sans JP、本文 14px */
:root{
  --bg:#f7f5f0;--sf:#ffffff;--ink:#1a1917;--ink2:#5b584f;--mut:#8f8b80;--line:#e6e2d8;--line2:#efece5;--ax:#cfcabf;
  /* アクセントは朱 1 色(2026-09-08 決定)。値下げの色。塗りで使い、文字色では使わない */
  --acc:#c2401f;--acc-ink:#a33418;--acc-soft:#fae2da;--warm:#1f4e79;
  --band:#2c1811;--band-hi:#f0b48d;--band-mut:#b09a90;
  --viz-surface:var(--sf);--viz-ink:var(--ink);--viz-ink2:var(--ink2);--viz-muted:var(--mut);--viz-grid:var(--line);--viz-axis:var(--ax);
  --viz-accent:var(--acc);--viz-second:var(--warm);--viz-seq:#dd8f74;
  --viz-seq-100:#f8e6df;--viz-seq-200:#f0c8b8;--viz-seq-300:#e2a288;--viz-seq-400:#d0714b;--viz-seq-500:#c2401f;--viz-seq-600:#8f2d12;
  /* 本文は Noto Sans JP、見出しと価格は Zen 角ゴシック New(2026-09-08 決定) */
  --f:"Noto Sans JP",-apple-system,"Hiragino Sans",system-ui,sans-serif;
  --fh:"Zen Kaku Gothic New","Noto Sans JP",-apple-system,"Hiragino Sans",system-ui,sans-serif;
  --viz-font:var(--f);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 var(--f);font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button,input{font:inherit;color:inherit}
img{max-width:100%}
.wrap{max-width:1560px;margin:0 auto;padding:0 28px}
.num{font-variant-numeric:tabular-nums}
.mut{color:var(--mut)}
/* header */
.top{background:var(--sf);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top__in{display:flex;align-items:center;height:64px;gap:22px}
.top__in .search{flex:1 1 auto;max-width:560px}
.logo{font-weight:700;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.logo i{width:10px;height:10px;border-radius:50%;background:var(--acc);display:inline-block}
.search{position:relative}
.search input{width:100%;height:42px;border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:0 16px 0 42px;outline:none;font-size:14px}
.search input:focus{background:var(--sf);border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.search svg{position:absolute;left:15px;top:13px;width:16px;height:16px;stroke:var(--mut);fill:none;stroke-width:2}
.top nav{display:flex;gap:18px;align-items:center;color:var(--ink2);margin-left:auto;white-space:nowrap}
.top nav a.on{color:var(--ink);font-weight:600}
.btn{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--sf);cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:500;white-space:nowrap}
.btn--p{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn--ink{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
/* sections */
.sec{padding:28px 0 8px}
.sec__h{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.sec__h h2{font-size:20px;font-weight:700;letter-spacing:-.015em}
.sec__h small{color:var(--mut)}
.sec__h a.more{margin-left:auto;color:var(--acc-ink);font-weight:500}
.card{background:var(--sf);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(30,20,60,.08)}
/* hero picks */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pick .img{height:190px;background:#fff;display:grid;place-items:center;padding:20px;border-bottom:1px solid var(--line2)}
.pick .img img{max-height:150px;object-fit:contain;border-radius:8px}
.pick .b{padding:16px 18px 18px}
.pick .v{color:var(--acc-ink);font-weight:600;font-size:13px}
.pick h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:2px 0 10px}
.pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pr b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.pr s{color:var(--mut);font-size:13px}
.pr .pct{background:var(--acc-soft);color:var(--acc-ink);font-weight:700;font-size:13px;padding:2px 8px;border-radius:6px}
.pr .cv{color:var(--ink2);font-size:13px}
.meta{display:flex;justify-content:space-between;color:var(--mut);font-size:12.5px;margin-top:6px}
.meta b{color:var(--ink);font-weight:500}
.sp{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--mut)}
.sp .viz{flex:none}
.sp b{color:var(--ink);font-weight:500}
/* rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.it .img{height:150px;background:#fff;display:grid;place-items:center;padding:16px;border-bottom:1px solid var(--line2)}
.it .img img{max-height:118px;object-fit:contain;border-radius:6px}
.it .b{padding:12px 14px 14px}
.it .v{color:var(--mut);font-size:12px}
.it h4{font-size:14px;font-weight:600;margin:1px 0 8px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .pr b{font-size:18px}
.it .end{margin-top:8px;font-size:12px;color:var(--acc-ink);font-weight:600}
.it .end.mut{color:var(--mut);font-weight:400}
/* gap cards */
.gaps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gap{padding:16px 18px}
.gap .v{color:var(--mut);font-size:12px}
.gap h4{font-size:15px;font-weight:600;margin:1px 0 12px}
.gap .row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0}
.gap .row b{font-weight:600}
.gap .row.lo b{color:var(--acc-ink)}
.gap .diff{margin-top:8px;padding-top:8px;border-top:1px solid var(--line2);font-size:13px;color:var(--ink2)}
.gap .diff b{color:var(--ink)}
/* vendor tiles */
.vendors{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vt{padding:16px 18px;display:flex;align-items:center;gap:14px}
.vt .n{flex:1;min-width:0}
.vt h4{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt small{color:var(--mut);display:block}
.vt .pct{font-size:18px;font-weight:700;color:var(--acc-ink);white-space:nowrap}
.vt .pct small{font-weight:400;color:var(--mut);font-size:11px}
footer{margin-top:40px;border-top:1px solid var(--line);color:var(--mut);font-size:12.5px;padding:22px 0 40px}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap}
/* product page */
.crumbs{padding:16px 0 0;color:var(--mut);font-size:13px}
.head{display:grid;grid-template-columns:400px 1fr;gap:32px;padding:20px 0 24px;align-items:start}
.head .img{aspect-ratio:1;display:grid;place-items:center;padding:36px}
.head .img img{max-height:100%;object-fit:contain;border-radius:10px}
.head .v{color:var(--acc-ink);font-weight:600}
.head h1{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:2px 0 6px}
.head .m{color:var(--mut)}
.hero{margin-top:22px;padding:20px 22px;background:var(--sf);border:1px solid var(--line);border-radius:16px}
.hero .l{font-size:12.5px;color:var(--mut)}
.hero .p{display:flex;align-items:baseline;gap:12px;margin:2px 0 4px}
.hero .p b{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.hero .p .pct{background:var(--acc-soft);color:var(--acc-ink);font-weight:700;font-size:15px;padding:3px 10px;border-radius:8px}
.hero .p s{color:var(--mut)}
.hero .s{color:var(--ink2);margin-bottom:14px}
.hero .a{display:flex;gap:10px;flex-wrap:wrap}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.fact{padding:12px 14px;background:var(--bg);border-radius:12px}
.fact small{display:block;color:var(--mut);font-size:12px}
.fact b{display:block;font-size:18px;font-weight:600;margin-top:2px}
.fact span{font-size:12px;color:var(--ink2)}
.stores{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st{padding:16px 18px;position:relative}
.st.is-best{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.st .tag{position:absolute;top:12px;right:14px;font-size:11px;font-weight:600;color:var(--acc-ink);background:var(--acc-soft);padding:2px 8px;border-radius:6px}
.st h4{font-size:15px;font-weight:600}
.st small{color:var(--mut);display:block;margin-bottom:8px}
.st .pr b{font-size:22px}
.st .pr .cv{font-size:12.5px}
.st .end{font-size:12.5px;color:var(--ink2);margin:6px 0 12px;min-height:1.4em}
.st .btn{width:100%;justify-content:center;height:36px}
.chart{padding:18px 22px 20px}
.chart__h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.chart__h h2{font-size:18px;font-weight:700}
.chart__h small{color:var(--mut)}
.chart__h .r{margin-left:auto;display:flex;gap:8px}
.seg{display:inline-flex;background:var(--bg);border-radius:999px;padding:3px}
.seg button{height:28px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--ink2);cursor:pointer;font-size:13px}
.seg button.on{background:var(--sf);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.note{color:var(--mut);font-size:12.5px;line-height:1.6}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.pad{padding:18px 22px}
.pad h3{font-size:15px;font-weight:700;margin-bottom:10px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.dl dt{color:var(--mut)}.dl dd{margin:0;font-weight:500}
.mini{width:100%;border-collapse:collapse;font-size:13.5px}
.mini td{padding:9px 0;border-top:1px solid var(--line2)}
.mini td.r{text-align:right;white-space:nowrap}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--mut);font-weight:500;font-size:12px;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line2)}
.tbl .r{text-align:right}

/* 案 4 = 案 2「棚」を地にして、一覧だけ案 1「端末」の密度に切り替えられるようにしたもの。
   色・書体・角丸・余白は案 2 のまま。切り替えるのは 1 件あたりの情報量と行の高さだけ。 */

/* 表示の切り替え行 */
.ops{display:flex;align-items:center;gap:12px;padding:14px 0 4px;flex-wrap:wrap}
.ops .n{color:var(--mut);font-size:13px}
.ops .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.ops .lbl{color:var(--mut);font-size:12.5px}
.seg{display:inline-flex;background:var(--sf);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{height:28px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--ink2);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}
.seg button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.sel{height:34px;border:1px solid var(--line);border-radius:999px;background:var(--sf);padding:0 30px 0 14px;appearance:none;-webkit-appearance:none;font-size:13px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b584f' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}

/* カード表示 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid .it .img{height:170px}
.grid .it .img img{max-height:134px}
.grid .it h4{white-space:normal;min-height:2.6em}

/* 一覧表示(案 1 の密度を案 2 の色で) */
.list{background:var(--sf);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.list table{width:100%;border-collapse:collapse;font-size:13px}
.list th{text-align:left;font-weight:500;color:var(--mut);font-size:11.5px;letter-spacing:.02em;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--sf)}
.list th.r{text-align:right}
.list th a{color:var(--ink);font-weight:600;text-decoration:none}
.list th a::after{content:" ↓";color:var(--acc-ink)}
.list td{padding:10px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.list tr:last-child td{border-bottom:0}
.list tbody tr:hover td{background:#faf9f6}
.list td.r{text-align:right;white-space:nowrap}
.list .p{display:flex;align-items:center;gap:12px;min-width:0}
.list .p img{width:38px;height:38px;object-fit:contain;background:#fff;border:1px solid var(--line2);border-radius:8px;flex:none}
.list .p b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.list .p span{display:block;color:var(--mut);font-size:12px}
.list .price b{font-weight:600;font-size:14px;white-space:nowrap}
.list .price span{display:block;color:var(--mut);font-size:11.5px;white-space:nowrap}
.list .pctcell{display:flex;align-items:center;justify-content:flex-end;gap:9px}
.list .pctcell i{display:block;width:54px;height:5px;border-radius:3px;background:var(--viz-seq-100);position:relative;overflow:hidden}
.list .pctcell i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--acc);border-radius:3px}
.list .pctcell b{font-weight:600;color:var(--acc-ink);min-width:42px;text-align:right}
.list .end.soon{color:var(--acc-ink);font-weight:600}
.list .num{font-variant-numeric:tabular-nums}
.up{color:var(--acc-ink);font-weight:500}
.pager{display:flex;align-items:center;gap:10px;padding:14px 4px;color:var(--mut);font-size:13px}
.pager .btn{height:32px;padding:0 12px}

/* 製品ページ: 店の比較をカード / 表で切り替える */
.storebox .seg{margin-left:auto}
.stbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--sf);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.stbl th{text-align:left;color:var(--mut);font-weight:500;font-size:11.5px;padding:11px 16px;border-bottom:1px solid var(--line)}
.stbl th.r{text-align:right}
.stbl td{padding:12px 16px;border-bottom:1px solid var(--line2)}
.stbl tr:last-child td{border-bottom:0}
.stbl td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.stbl tr.best td{background:var(--acc-soft)}
.stbl tr.best td:first-child{box-shadow:inset 3px 0 0 var(--acc)}
.stbl .b{font-weight:600}
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}

/* 価格推移の図。viewBox は 800x240 で preserveAspectRatio="none" なので、高さを決めないと横幅なりに伸びる */
.chart .viz{width:100%;height:260px}
.chart #legend{margin-top:8px;display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px}
/* 一覧の中の見出し行(製品名リンク)は地の色を継ぐ */
.list .p b a{color:var(--ink)}
.list .p b a:hover,.stbl a:hover,.grid .it:hover h4{color:var(--acc-ink)}
/* カードの高さを揃える(価格の行が折り返しても崩れないように) */
.grid .it{display:flex;flex-direction:column}
.grid .it .b{flex:1;display:flex;flex-direction:column}
.grid .it .end{margin-top:auto}
/* 絞り込みの行 */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:6px 0 2px}
.filters label{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);font-size:13px}
.filters .btn{height:34px}

/* 幅の狭い画面。案 2 は 4 列前提なので段階的に落とす。表は横スクロールに逃がす(本文は縦に折らない) */
@media (max-width:900px){
  .wrap{padding:0 16px}
  .picks,.gaps,.vendors,.stores,.facts,.g2{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .head{grid-template-columns:1fr;gap:18px}
  .head h1{font-size:26px}
  .hero .p b{font-size:34px}
  .list,.stbl{overflow-x:auto}
  .list table,.stbl{min-width:760px}
  .top__in{height:auto;padding:10px 0;flex-wrap:wrap;gap:10px}
  .top__in .search{order:3;flex-basis:100%;max-width:none}
  .top nav{gap:12px;font-size:13px}
}
@media (max-width:560px){
  .picks,.gaps,.vendors,.stores,.facts,.g2,.grid{grid-template-columns:1fr}
  .ops .r{margin-left:0;flex-wrap:wrap}
  footer .wrap{flex-direction:column;gap:8px}
}

/* 画像の無い掲載(Rock oN の一覧など)。枠だけ置いて行の高さを揃える */
.list .p .noimg{display:block;width:38px;height:38px;border:1px dashed var(--line);border-radius:8px;flex:none}

/* ── 一覧カード「記」(2026-09-08)。菫は割引と目盛りの印だけに使い、値を主役にする ── */
.grid .it{border-radius:10px;display:flex;flex-direction:column;transition:none}
.grid .it:hover{transform:none;box-shadow:none;border-color:var(--acc)}
.grid .it .img{height:156px}
.grid .it .img img{max-height:124px}
.grid .it .b{flex:1;display:flex;flex-direction:column;padding:13px 15px 15px}
.grid .it .v{color:var(--mut);font-weight:400;font-size:12px}
.grid .it h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  white-space:normal;min-height:2.64em;margin:1px 0 9px}
.grid .it .pr{display:flex;align-items:baseline;gap:10px}
.grid .it .pr b{font-size:27px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.grid .it .pr .pct{margin-left:auto;background:none;padding:0;border-radius:0;
  color:var(--acc-ink);font-weight:700;font-size:14px}
.grid .it .line{color:var(--mut);font-size:12px;margin-top:5px;min-height:1.4em}
.grid .it .end{color:var(--ink2);font-size:12.5px;font-weight:400;margin-top:auto;padding-top:9px}
/* 観測最安 ←→ 定価 の目盛り。いまの値がどこに立つか */
.grid .it .fx{margin:10px -15px -15px;padding:10px 15px 12px;background:#faf9f6;border-top:1px solid var(--line2)}
.grid .it .fx .bar{position:relative;display:block;height:3px;background:var(--line);border-radius:2px}
.grid .it .fx .bar i{position:absolute;top:-3px;width:3px;height:9px;background:var(--acc);border-radius:1px;transform:translateX(-1px)}
.grid .it .fx .ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mut);margin-top:5px}

/* ── 朱を「塗り」で効かせる(2026-09-08)。文字色に散らすと紙色の地に埋もれる ── */
.grid .it .pr .pct{background:var(--acc);color:#fff;font-weight:700;font-size:13px;padding:2px 8px;border-radius:6px}
.seg button.on{background:var(--acc);color:#fff}
.top nav a.on{box-shadow:inset 0 -3px 0 var(--acc);padding-bottom:2px}

/* ── 帯: 今日の数字。価格ウォッチでいちばん効く信頼の材料は「いつの数字か」 ── */
.band{background:var(--band);color:#f2f0ec;padding:15px 0}
.band .wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.band .u{font-size:11.5px;color:var(--band-mut);letter-spacing:.03em}
.band .u.r{margin-left:auto}
.band .n{display:flex;align-items:baseline;gap:7px;color:inherit}
.band .n b{font-size:23px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.band .n span{font-size:12px;color:var(--band-mut)}
.band .n.hi b{color:var(--band-hi)}
.band a.n:hover b{text-decoration:underline}

/* ── 側: 左のサイドバーに絞り込みを置く。選んだ条件が常に見える ── */
.cols{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;gap:0}
/* 左のサイドバー。案 2 の横スクロール棚(.rail)と名前がぶつかっていたので .facets にした(2026-09-08) */
.facets{border-right:1px solid var(--line);background:var(--sf);padding:20px 14px 30px;align-self:stretch}
.rg{margin-bottom:20px}
.rg:last-child{margin-bottom:0}
.rg h5{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);font-weight:600;margin:0 0 7px 6px}
.rg a{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink2);padding:5px 8px;
  line-height:1.4;border-radius:7px}
.rg a b{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--mut)}
.rg a.on{background:var(--acc-soft);color:var(--acc-ink);font-weight:600}
.rg a.on b{color:var(--acc-ink)}
.rg a:hover{background:var(--bg)}
.rg a.on:hover{background:var(--acc-soft)}
.cols main{min-width:0;padding:0 0 8px 24px}
@media (max-width:1000px){
  .cols{grid-template-columns:1fr}
  .facets{border-right:0;border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:0 16px}
  .cols main{padding-left:0}
}

/* ── 書体の役割分け(2026-09-08 決定)。見出し・製品名・値は Zen 角ゴシック、本文は Noto Sans JP ── */
h1,h2,h3,h4,.logo,.sec__h h2,.chart__h h2,.head h1,.pad h3{font-family:var(--fh)}
.pr b,.hero .p b,.band .n b,.fact b,.vt .pct,.list .price b,.stbl .b{font-family:var(--fh)}
.grid .it h4{font-size:14.5px}
.grid .it .pr b{font-size:28px}
/* サイドバーの白地を余白の端まで届かせる(1560px にして左の空きが増えたぶん、境目をはっきりさせる) */
.cols .facets{margin-left:-28px;padding-left:28px}
@media (max-width:1000px){.cols .facets{margin-left:0;padding-left:14px}}
/* ¥ だけ端末の UI 書体で出す。和文書体の ¥ は全角幅で数字と離れてしまう */
.cur{font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;margin-right:.04em}

/* ── 商品ページ: 1560px 幅に合わせ、国内 / 海外の差を主役の隣に置く ── */
.head{grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:36px;max-width:1180px}
.head .img{padding:28px}
.hero{max-width:820px}
.gapline{display:flex;align-items:stretch;gap:0;margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}
.gapline .g,.gapline .d{flex:1;padding:11px 16px;display:flex;flex-direction:column;gap:1px;min-width:0}
.gapline .g + .g,.gapline .d{border-left:1px solid var(--line)}
.gapline small{color:var(--mut);font-size:10.5px;letter-spacing:.1em}
.gapline b{font-family:var(--fh);font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.gapline span span,.gapline .d span{color:var(--ink2);font-size:11.5px}
.gapline .win{background:var(--acc-soft)}
.gapline .win b{color:var(--acc-ink)}
.gapline .d{background:var(--sf)}
@media (max-width:900px){.gapline{flex-direction:column}.gapline .g + .g,.gapline .d{border-left:0;border-top:1px solid var(--line)}}

/* ── 狭い画面(2026-09-08)。サイドバーは畳み、帯は 3 つに絞り、頭は 2 段に ── */
.facetbox{border-right:1px solid var(--line);background:var(--sf);align-self:stretch}
.facetbox > summary{display:none}
.cols .facetbox{margin-left:-28px}
.cols .facetbox .facets{padding:20px 14px 30px 28px;border-right:0;margin-left:0}
@media (max-width:1000px){
  .cols{grid-template-columns:1fr}
  .cols .facetbox{margin-left:0;border-right:0;border-bottom:1px solid var(--line)}
  .cols .facetbox > summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
    padding:12px 16px;font-weight:600;font-family:var(--fh)}
  .cols .facetbox > summary::-webkit-details-marker{display:none}
  .cols .facetbox > summary::after{content:"▾";margin-left:auto;color:var(--mut);font-size:12px}
  .cols .facetbox[open] > summary::after{content:"▴"}
  .cols .facetbox > summary b{font-weight:400;color:var(--mut);font-size:12.5px}
  .cols .facetbox .facets{padding:0 10px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px}
  .cols main{padding-left:0}
  /* 帯は 3 つに絞る。スマホの 1 画面目を数字で埋めない */
  .band{padding:11px 0}
  .band .wrap{gap:8px 18px}
  .band .n b{font-size:19px}
  .band .n:nth-child(n+4),.band .u.r{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .cols .facetbox{margin-left:-16px;margin-right:-16px}
  .top__in{height:auto;padding:9px 0 11px;gap:9px}
  .top__in .logo{font-size:15px}
  .top nav{gap:14px;font-size:12.5px;margin-left:auto}
  .top__in .search{order:3;flex-basis:100%;max-width:none;height:36px}
  .sec__h{gap:4px 10px}
  .sec__h h2{font-size:18px}
  .ops{flex-wrap:wrap;gap:8px}
  .ops .r{margin-left:0;width:100%;justify-content:space-between}
  .grid{gap:12px}
  /* 商品ページ: 1 列に。後から足した .head の 2 列指定をここで戻す */
  .head{grid-template-columns:1fr;gap:16px;max-width:none}
  .head .img{max-width:320px;padding:18px}
  .head h1{font-size:26px}
  .hero{padding:16px 16px 18px}
  .hero .p b{font-size:32px}
  .facts{grid-template-columns:1fr;gap:8px}
  .stores{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .head{grid-template-columns:1fr;gap:20px;max-width:none}
  .head .img{max-width:380px}
}
@media (max-width:640px){
  /* 見出しは説明を下に落とす(横に回り込ませると題が 2 行に折れる) */
  .sec__h{flex-direction:column;align-items:flex-start;gap:2px}
  .sec__h small{font-size:12px}
  .sec__h a.more{margin-left:0}
  /* 操作は 1 行に収める。並び替えの札を伸ばし、切り替えを右端へ */
  .ops{gap:8px}
  .ops .r{width:100%;gap:8px}
  .ops .r .lbl{display:none}
  .ops .r .sel{flex:1;min-width:0}
  .ops .r .seg{flex:none;margin-left:auto}
  .filters input.sel{width:100%}
}

/* ── スマホは 1 列なので、絵はカード幅に追従させる(固定 156px だと余白ばかりになる) ── */
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .grid .it .img{height:auto;aspect-ratio:16/10;padding:14px}
  .grid .it .img img{max-height:100%;max-width:92%}
  .picks .pick .img{height:auto;aspect-ratio:16/10;padding:18px}
  .picks .pick .img img{max-height:100%}
  /* 一覧表示のサムネも指で見える大きさに */
  .list .p{gap:14px}
  .list .p img,.list .p .noimg{width:60px;height:60px;border-radius:10px}
  .list .p b{max-width:none;white-space:normal}
}

/* ── スマホでは枚数を抑える。1 列なので、そのまま出すとトップが 17 画面、一覧が 33 画面になる ── */
.showall{display:none}
@media (max-width:640px){
  .grid.cap6 .it:nth-child(n+7){display:none}
  .vendors.cap4 .vt:nth-child(n+5){display:none}
  .grid.cap20 .it:nth-child(n+21){display:none}
  .showall{display:inline-flex;margin:16px 0 0;width:100%;justify-content:center;height:40px}
  .grid.shown .it{display:flex}
  .grid.shown ~ .showall,.shown + .showall{display:none}
}