/* 単価ナビ — 精密計器の赤。赤=ブランドと押すボタンだけ、得=青緑▼、注意=琥珀▲ */
:root{
  --paper:#FFFFFF;--surface:#FFFFFF;--ink:#1B1B1F;--sub:#5E5A57;--rule:#E6E6E6;--rule2:#D6D6D6;--soft:#F7F7F7;
  --red:#FF0000;--red-ink:#FF0000;--red-soft:#FFE5E5;--on-red:#FFFFFF;
  --good:#0B6B6F;--good-soft:#E3F2F2;--warn:#8A5A00;--warn-soft:#FBF1DE;--mute:#6B6B70;--mute-soft:#F2F2F2;
  --imgbg:#FFFFFF;--shadow:0 1px 2px rgba(27,27,31,.06),0 4px 14px rgba(27,27,31,.05);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --r:14px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#131315;--soft:#131315;--surface:#1C1C1F;--ink:#F1EEEA;--sub:#AAA6A1;--rule:#2E2E33;--rule2:#3A3A40;
  --red:#C9302A;--red-ink:#FF8A7D;--red-soft:#3A1B19;--on-red:#FFFFFF;
  --good:#4FC3C7;--good-soft:#123033;--warn:#E8B04A;--warn-soft:#33270F;--mute:#9A9AA0;--mute-soft:#26262A;
  --imgbg:#F4F2EF;--shadow:none;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7}
a{color:inherit}
.num,.unit .num,.bigunit .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.muted{color:var(--sub)}.small{font-size:13px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px;z-index:9}
:focus-visible{outline:3px solid var(--red-ink);outline-offset:2px;border-radius:6px}

/* ヘッダー・PR */
.top{background:var(--surface);border-bottom:2px solid var(--red)}
.top .in,footer .in{max-width:1440px;margin:0 auto;padding:0 16px}
.top .in{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:.02em}
.logo .mark{display:grid;place-items:center;width:30px;height:30px;background:var(--red);color:var(--on-red);font-family:var(--mono);font-weight:700;font-size:14px;border-radius:4px}
.top nav a{margin-left:18px;text-decoration:none;font-size:14px;color:var(--sub);padding:12px 0}
.top nav a:hover{color:var(--ink)}
.pr{margin:0;padding:8px 16px;font-size:13px;line-height:1.5;color:var(--sub);background:var(--paper);border-bottom:1px solid var(--rule);text-align:center}
.pr b{color:var(--ink)}
main{max-width:1440px;margin:0 auto;padding:12px 16px 48px}
h1{font-size:26px;line-height:1.35;margin:8px 0}
h2{font-size:18px;margin:32px 0 12px;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:4px;height:18px;background:var(--red);border-radius:2px}
.lead{color:var(--sub);margin:4px 0 0}
.basis{font-size:12px;color:var(--sub);margin:10px 0 0}
.crumb{font-size:13px;color:var(--sub);margin:4px 0 8px}.crumb a{color:var(--sub)}

/* ヒーロー */
.hero{background:var(--surface);border:1px solid var(--rule);border-radius:20px;padding:22px 20px;margin:8px 0 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}

.hero>*{position:relative;z-index:1}
.hero h1{font-size:34px;line-height:1.2;margin:6px 0 10px;letter-spacing:-.01em;position:relative}
.hero p{margin:0;color:var(--sub);position:relative;max-width:36em}.hero b{color:var(--ink)}
.upd{font-family:var(--mono);font-size:13px;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:18px 0 0;border-top:1px solid var(--rule);position:relative}
.stats div{padding:12px 4px 0;border-right:1px solid var(--rule);text-align:center}.stats div:last-child{border-right:0}
.stats dt{font-size:12px;color:var(--sub)}.stats dd{margin:0;font-size:24px;font-weight:700}
.event{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:700}

/* 品目ナビ（横スクロール） */
.catnav ul,.shelf{list-style:none;padding:0;margin:0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.catnav ul::-webkit-scrollbar,.shelf::-webkit-scrollbar{display:none}
.catnav{margin:8px -16px 0;padding:0 16px}
.catnav li{scroll-snap-align:start;flex:none}
.catnav a{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;text-decoration:none;font-size:12px;line-height:1.3;text-align:center;padding:6px 0}
.catnav .ico{width:52px;height:52px;padding:13px;border-radius:50%;background:var(--surface);border:1px solid var(--rule);color:var(--ink);transition:border-color .15s}
.catnav a:hover .ico{border-color:var(--red)}
.ico{width:24px;height:24px;flex:none}.ico.s{width:16px;height:16px}.ico.l{width:56px;height:56px;padding:13px;border-radius:16px;background:var(--surface);border:1px solid var(--rule)}

/* 棚（横スクロールのカード） */
.sh-head{display:flex;align-items:baseline;justify-content:space-between}.sh-head a{font-size:14px;font-weight:700;color:var(--red-ink);text-decoration:none}
.shelf{margin:0 -16px;padding:2px 16px 6px}
.shelf li{scroll-snap-align:start;flex:none;width:148px}
.shelf a{display:flex;flex-direction:column;gap:4px;height:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:10px;text-decoration:none;box-shadow:var(--shadow)}
.shelf img,.shelf .noimg{width:100%;height:112px;object-fit:contain;background:var(--imgbg);border-radius:10px}
.sc-cat{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sub);line-height:1.3}
.sc-u{font-size:13px}.sc-u b{font-family:var(--mono);font-size:22px}.sc-u small{color:var(--sub);font-size:11px;margin-left:2px}

/* 品目カード（トップ） */
.catgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:12px}
.cat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.ch{display:flex;align-items:center;gap:10px;text-decoration:none}.ch b{font-size:16px;flex:1}.ch .go{color:var(--red-ink);font-weight:700}
.cb{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.best{margin:0;line-height:1.1}.best .lbl{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}
.best .num{font-size:32px;font-weight:700}.best .yen,.unit .yen,.bigunit .yen{font-size:14px;margin-left:2px;font-weight:700}
.spark{width:96px;height:32px;flex:none}.spark polyline{fill:none;stroke:var(--red-ink);stroke-width:1.6;stroke-linejoin:round}.spark circle{fill:var(--red-ink)}
.spark.empty line{stroke:var(--rule2);stroke-dasharray:3 3}
.spark.big{width:100%;height:56px}
.minis{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-top:1px solid var(--rule);padding-top:10px}
.minis a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;position:relative}
.minis img,.minis .noimg{width:44px;height:44px;object-fit:contain;background:var(--imgbg);border-radius:8px}
.mr{position:absolute;left:4px;top:-4px;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--ink);color:var(--paper);border-radius:4px;padding:0 4px;line-height:16px}
.minis li:first-child .mr{background:var(--red);color:var(--on-red)}
.mu{font-size:12px}.mu b{font-family:var(--mono);font-size:15px}
.cm{display:block;text-align:center;font-size:14px;padding:10px;border-radius:10px;background:var(--paper);text-decoration:none;min-height:44px}
.cm:hover{background:var(--red-soft)}

/* 品目ページ */
.chead{display:flex;align-items:center;gap:14px;margin:4px 0 4px}.chead h1{margin:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 0}
.tiles div{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.tiles span{display:block;font-size:12px;color:var(--sub)}.tiles b{font-size:22px}.tiles small{font-size:12px;margin-left:2px}
.podium{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.podium a{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:10px;text-decoration:none;position:relative;height:100%;box-shadow:var(--shadow)}
.podium .p1 a{border-top:3px solid var(--red)}
.podium img,.podium .noimg{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--imgbg);border-radius:10px}
.podium .rank{position:absolute;top:8px;left:8px}
.pu{font-size:13px}.pu b{font-family:var(--mono);font-size:20px}
.pn{font-size:12px;color:var(--sub);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ctrend{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;margin:12px 0 0}
.ctrend span{font-size:12px;color:var(--sub)}
.chips{display:flex;gap:8px;margin:20px -16px 0;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.chip{flex:none;display:inline-flex;align-items:center;min-height:40px;border:1px solid var(--rule2);border-radius:999px;padding:0 14px;font-size:14px;text-decoration:none;background:var(--surface)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 6px;font-size:14px}
.tools select{font:inherit;font-size:14px;min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--rule2);background:var(--surface);color:var(--ink)}
.sw{display:flex;align-items:center;gap:8px;min-height:40px}.sw input{width:20px;height:20px;accent-color:var(--good)}
.count{font-size:13px;color:var(--sub);margin:0 0 8px}

/* 商品カード（一覧） */
.cards{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.card a{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:12px;text-decoration:none;position:relative;box-shadow:var(--shadow)}
.card a:hover,.cat:hover,.shelf a:hover,.podium a:hover{border-color:var(--rule2)}
.card img,.card .noimg{width:88px;height:88px;object-fit:contain;background:var(--imgbg);border-radius:10px;flex:none}
.noimg{display:grid;place-items:center;background:var(--paper);color:var(--sub)}
.rank{position:absolute;top:6px;left:6px;z-index:1;font-family:var(--mono);font-weight:700;font-size:13px;min-width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--ink);color:var(--paper);padding:0 4px}
.rank.r1{background:var(--red);color:var(--on-red)}
.info{min-width:0;flex:1}
.unit{margin:0;line-height:1.15}.unit .lbl{display:block;font-size:12px;color:var(--sub);margin-bottom:2px}.unit .num{font-size:26px;font-weight:700}
.name{margin:6px 0 2px;font-size:14px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.meta{margin:0;font-size:12px;color:var(--sub)}
.tags{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:4px}
.tag{display:inline-flex;align-items:center;font-size:12px;line-height:1;border:1px solid var(--rule2);border-radius:999px;padding:4px 8px;color:var(--sub);background:var(--surface)}
.tag.good{color:var(--good);border-color:var(--good);background:var(--good-soft);font-weight:700}
.tag.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.tag.mute{color:var(--mute);background:var(--mute-soft)}
.card .spark{width:64px;height:24px;align-self:center}

/* 商品ページ */
.ihead{display:flex;gap:16px;align-items:flex-start}
.ihead img,.ihead .noimg{width:120px;height:120px;object-fit:contain;background:var(--imgbg);border-radius:14px;border:1px solid var(--rule);flex:none}
.ihead h1{font-size:17px;line-height:1.5;margin:2px 0}
.icat{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);margin:0}
.meter{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:16px;margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:12px;box-shadow:var(--shadow)}
.bigunit{margin:0;line-height:1}.bigunit .lbl{display:block;font-size:13px;color:var(--sub);margin-bottom:8px}.bigunit .num{font-size:60px;font-weight:700}.bigunit .yen{font-size:20px}
.judge{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;border-radius:12px;padding:10px 14px;font-size:20px}
.judge .sym{font-size:18px}.judge small{flex-basis:100%;font-size:13px;color:inherit;opacity:.9}
.judge.low{background:var(--good-soft);color:var(--good)}.judge.mid{background:var(--mute-soft);color:var(--ink)}
.judge.high{background:var(--warn-soft);color:var(--warn)}.judge.na{background:var(--mute-soft);color:var(--mute)}
.judge-s{display:inline-block;min-width:5.5em;font-weight:700}.judge-s.low{color:var(--good)}.judge-s.high{color:var(--warn)}.judge-s.na{color:var(--mute)}
.scale .bar{position:relative;height:10px;border-radius:5px;background:var(--mute-soft);border:1px solid var(--rule)}
.scale .mark{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--surface);border:4px solid var(--ink)}
.scale .ends{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);margin-top:6px;font-family:var(--mono)}
.spec{width:100%;border-collapse:collapse;margin:16px 0 0;background:var(--surface);border-radius:12px;overflow:hidden;border:1px solid var(--rule)}
.spec th,.spec td{border-bottom:1px solid var(--rule);padding:10px 12px;text-align:left;font-size:15px}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{width:6.5em;color:var(--sub);font-weight:400}.spec small{color:var(--sub);font-size:12px;margin-left:4px}
.note{background:var(--good-soft);border-radius:12px;padding:10px 14px;margin:12px 0 0;font-size:14px}
.chart{margin:16px 0 0;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:10px}
.chart svg{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--rule);stroke-dasharray:4 4}.chart .line{fill:none;stroke:var(--red-ink);stroke-width:2.5;stroke-linejoin:round}
.chart .min{fill:var(--good)}.chart .now{fill:var(--surface);stroke:var(--red-ink);stroke-width:3}
.chart .lbl{font-family:var(--mono);font-size:15px;fill:var(--sub)}
.chart figcaption{font-size:12px;color:var(--sub);padding:4px 4px 0}.k-min{color:var(--good)}.k-now{color:var(--red-ink);font-weight:700}
.more{margin:10px 0 0}.more a{color:var(--red-ink);font-weight:700;text-decoration:none;font-size:14px}
.buybar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;margin:24px -16px -48px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--rule)}
.bb-p{display:flex;flex-direction:column;line-height:1.2}.bb-p .num{font-size:20px;font-weight:700}.bb-p small{font-size:11px;color:var(--sub)}
.btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;background:var(--red);color:var(--on-red);border-radius:12px;text-decoration:none;font-weight:800;font-size:16px;line-height:1.25;padding:6px 10px}
.btn small{font-weight:400;font-size:11px;opacity:.95}.btn:hover{filter:brightness(1.07)}
.buybar.off{justify-content:center;color:var(--mute);font-weight:700;min-height:64px}

/* その他 */
.how ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px;color:var(--sub)}
.prose{max-width:44em}.prose li{margin:4px 0}
footer{border-top:1px solid var(--rule);color:var(--sub);font-size:13px;text-align:center;padding:24px 0 40px;background:var(--surface)}
footer a{color:var(--sub)}.copy{font-family:var(--mono)}

@media (min-width:720px){
  .catgrid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero{padding:32px 32px}.hero h1{font-size:46px}.hero h1 br{display:none}
  .meter{grid-template-columns:1.1fr 1fr;align-items:center}.meter .scale{grid-column:1/-1}
  .buybar{position:static;margin:24px 0 0;border:1px solid var(--rule);border-radius:16px}
  .shelf{margin:0;padding:2px 0 6px}
  .ihead img,.ihead .noimg{width:200px;height:200px}.ihead h1{font-size:20px}
}
@media (min-width:1000px){.catnav ul{flex-wrap:wrap;overflow:visible}.catgrid{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(3,1fr)}.catnav{mask-image:none}}
@media (max-width:380px){.stats dd{font-size:20px}.bigunit .num{font-size:50px}.card img,.card .noimg{width:72px;height:72px}.card .spark{display:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ===== v3：値下がり速報・ジャンル・検索（活気のある売り場） ===== */
:root{--sale:#FF0000;--sale-soft:#FFE5E5}
@media (prefers-color-scheme:dark){:root{--sale:#FF6B5E;--sale-soft:#3A1B19}}
.top{border-top:4px solid var(--red);border-bottom:1px solid var(--rule)}
.top .in{gap:12px;height:auto;min-height:60px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.hsearch{flex:1 1 280px;display:flex;order:3;min-width:0}
.hsearch input{flex:1;min-width:0;font:inherit;font-size:15px;height:42px;padding:0 14px;border:2px solid var(--red);border-right:0;border-radius:10px 0 0 10px;background:var(--surface);color:var(--ink)}
.hsearch button{width:52px;height:42px;border:0;border-radius:0 10px 10px 0;background:var(--red);color:var(--on-red);display:grid;place-items:center;cursor:pointer}
.top nav{order:2}
@media (min-width:720px){.hsearch{order:2;max-width:520px}.top nav{order:3}}
.gbar{margin:6px -16px 8px;padding:0 16px}
.gbar ul{list-style:none;padding:0 0 4px;margin:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.gbar ul::-webkit-scrollbar{display:none}
.gbar li{flex:none;scroll-snap-align:start}
.gbar a{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;padding:6px 2px;text-decoration:none;font-size:11.5px;line-height:1.3;text-align:center;border-radius:12px}
.gbar a:hover,.gbar a[aria-current]{background:var(--surface)}
.gbox{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--gc,#EEE);color:#1B1B1F;flex:none}
.gbox .gico{width:26px;height:26px}.gbox.s{width:30px;height:30px;border-radius:9px}.gbox.s .gico{width:18px;height:18px}
.gbox.l{width:60px;height:60px;border-radius:18px}.gbox.l .gico{width:32px;height:32px}
h2 .gbox{margin-right:2px}h2:has(.gbox)::before{display:none}
.hero2{background:var(--surface)}
.hero2 h1{font-size:32px}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:520px;margin:16px auto 0!important;position:relative}
.btn2,.btn3{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 8px;text-align:center;white-space:nowrap;border-radius:12px;font-weight:800;text-decoration:none}
.btn2{background:var(--red);color:var(--on-red)}.btn3{background:var(--surface);border:2px solid var(--ink);color:var(--ink)}
.dgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dcard a{display:flex;flex-direction:column;gap:4px;height:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:8px 8px 10px;text-decoration:none;position:relative;box-shadow:var(--shadow);transition:transform .12s,border-color .12s}
.dcard a:hover{border-color:var(--sale);transform:translateY(-2px)}
.dimg{position:relative;display:block;aspect-ratio:1;background:var(--imgbg);border-radius:10px;overflow:hidden}
.dimg img,.dimg .noimg{width:100%!important;height:100%!important;object-fit:contain}
.dbadge{position:absolute;left:6px;bottom:6px;background:var(--sale);color:#fff;font-family:var(--mono);font-weight:700;font-size:15px;line-height:1;padding:5px 8px;border-radius:8px}
.dbadge.low{background:var(--good);font-family:var(--sans);font-size:12px}
.dbadge.big{position:static;display:inline-block;font-size:18px;margin-right:8px}
.dname{font-size:13px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.9em}
.dprice{font-size:13px;color:var(--sale);font-weight:700}.dprice b{font-size:20px}
.dprice s{color:var(--sub);font-weight:400;font-size:12px;margin-left:6px}
.dmeta{font-size:11.5px;color:var(--sub);display:flex;gap:6px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dship{color:var(--good);border:1px solid var(--good);border-radius:4px;padding:0 4px;flex:none}
.grank{position:absolute;top:4px;left:4px;z-index:2;font-family:var(--mono);font-weight:700;font-size:13px;min-width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--ink);color:var(--paper);padding:0 5px}
.grank.r1{background:var(--red);color:var(--on-red)}
.dshelf li{width:150px}.dshelf .dcard a{box-shadow:var(--shadow)}
.gsec{margin-top:4px}
.rlist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.rlist a{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:8px 10px;text-decoration:none;position:relative}
.rlist .grank{position:static;flex:none}
.rlist img,.rlist .noimg{width:64px;height:64px;object-fit:contain;background:var(--imgbg);border-radius:8px;flex:none}
.rinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.rlist .dbadge{position:static;font-size:12px;padding:3px 6px;margin-left:6px;vertical-align:middle}
.tgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tgrid a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:10px;text-decoration:none}
.tgrid .ico{grid-row:1/3;width:28px;height:28px}.tn{font-size:13px;font-weight:700}.tu{font-size:11px;color:var(--sub)}.tu b{font-size:16px;color:var(--ink);margin-left:4px}
.dsearch{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:12px;margin:12px 0;display:grid;gap:10px;box-shadow:var(--shadow)}
.dsearch input[type=search]{font:inherit;height:46px;padding:0 14px;border:2px solid var(--red);border-radius:12px;background:var(--paper);color:var(--ink)}
.drow{display:flex;flex-wrap:wrap;gap:8px}.drow select{flex:1 1 140px;font:inherit;font-size:14px;min-height:42px;padding:0 8px;border-radius:10px;border:1px solid var(--rule2);background:var(--surface);color:var(--ink)}
.center{text-align:center}.morebtn{font:inherit;font-weight:700;min-height:48px;padding:0 32px;border-radius:12px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);cursor:pointer;margin-top:16px}
.dropline{margin:0;font-size:15px}.dropline s{color:var(--sub)}.dropline b{color:var(--sale);font-family:var(--mono)}
@media (min-width:720px){.dgrid{grid-template-columns:repeat(4,1fr)}.tgrid{grid-template-columns:repeat(3,1fr)}.hero2 h1{font-size:44px}.dshelf li{width:170px}}
@media (min-width:1000px){.dgrid{grid-template-columns:repeat(5,1fr)}.tgrid{grid-template-columns:repeat(4,1fr)}.gbar ul{flex-wrap:wrap}}

/* 2026-10-20: 下地を白に。PR帯・補助背景はごく薄い灰色 */
.pr{background:var(--soft)}.pr span{display:inline-block}
.cm,.noimg{background:var(--soft)}
.gbar a span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

/* 2026-10-20e: 赤を #FF0000 に。白文字は太字14px以上、赤の小さい文字は太字 */
.rank.r1,.grank.r1{font-size:14px;font-weight:800}
.minis li:first-child .mr{font-size:14px;font-weight:800;line-height:18px}
.dbadge.big{font-weight:800}

/* 2026-10-20g: ロゴは値札マーク */
.logo .mark{background:none;border-radius:0;padding:0;display:block;width:30px;height:30px}.logo .mark svg{display:block}

/* 2026-10-20i: 戻るボタン・上に戻るボタン */
.brand{display:flex;align-items:center;gap:2px;min-width:0}
.back{display:grid;place-items:center;width:44px;height:44px;margin-left:-12px;color:var(--ink);text-decoration:none;font-size:34px;line-height:1;font-weight:400;border-radius:12px}
.back:hover{background:var(--soft)}
.totop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:20;width:48px;height:48px;padding:0;display:grid;place-items:center;border-radius:50%;background:#FFFFFF;border:1px solid var(--rule);box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer}
.totop[hidden]{display:none}
body.has-buybar .totop{bottom:calc(88px + env(safe-area-inset-bottom))}
@media (min-width:720px){body.has-buybar .totop{bottom:calc(16px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:420px){.top .in{gap:8px}.top nav a{margin-left:8px;font-size:13px}.logo{font-size:18px;gap:8px}}

/* 2026-10-20j: ジャンル帯をカード化（均等な格子・2行だけ表示）、ボタンは説明文の下で左そろえ */
.gcard{margin:12px 0;padding:12px 10px 10px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.gbar ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:4px;padding:0;overflow:hidden;scroll-snap-type:none}
.gbar.js ul{max-height:212px}
.gbar.js.open ul{max-height:none}
.gbar li{height:104px}
.gbar a{width:100%;height:100%;box-sizing:border-box;justify-content:flex-start;padding:6px 2px;font-size:12px}
.gbar .gn{word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gbox .gico{width:26px;height:26px;stroke-width:1.6}
.gmore{display:block;width:100%;min-height:44px;margin-top:8px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--rule2);border-radius:12px;cursor:pointer}
.gmore[hidden]{display:none}
@media (max-width:600px){.gbar ul{grid-template-columns:repeat(4,minmax(0,1fr))}.gbar a{font-size:11.5px}}
.hero .cta{max-width:520px;margin:16px 0 0!important}

/* 2026-10-20k: ジャンル別の全商品一覧（タブ・ページ送り） */
.gtabs{margin:12px -16px 0;padding:0 16px}
.gtabs ul{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.gtabs a,.gtabs .off{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--rule2);border-radius:12px;font-size:14px;font-weight:700;text-decoration:none;background:var(--surface);color:var(--ink);white-space:nowrap}
.gtabs a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gtabs .off{color:var(--mute);font-weight:400;background:var(--soft)}
.chip small{margin-left:6px;color:var(--sub);font-size:12px}.chip.on small{color:inherit}
.count{margin:12px 0;font-size:14px;color:var(--sub)}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:20px 0}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--rule2);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700}
.pg.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}.pg.gap{border:0;background:none;min-width:24px}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 2026-10-20m: ワードマークのロゴ */
.logo{gap:8px;min-height:44px}
.logo .wm{display:block;height:22px;width:auto}
.logo .jp{display:none;font-size:12px;font-weight:300;letter-spacing:.06em;color:var(--sub)}
@media (min-width:600px){.logo .wm{height:30px}.logo .jp{display:block}}

/* 2026-10-20n: フッター（濃い帯） */
footer.sf{background:#222222;color:#FFFFFF;border-top:0;text-align:center;padding:40px 0 calc(40px + env(safe-area-inset-bottom))}
footer.sf a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.flinks{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px}
.flinks a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
footer.sf .fnote{margin:0 auto 10px;max-width:46em;color:#BDBDBD;font-size:13px;line-height:1.8}
.fhr{border:0;border-top:1px solid #444444;margin:22px auto 18px;max-width:560px}
footer.sf .copy{margin:0;color:#BDBDBD;font-size:12px;font-family:var(--sans)}
@media (min-width:720px){footer.sf{padding:56px 0 calc(56px + env(safe-area-inset-bottom))}.flinks{gap:0 28px}.flinks a{min-height:36px}}
.gall{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.gall a{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;text-decoration:none;font-size:14px;font-weight:700}
.gall small{display:block;font-weight:400;color:var(--sub);font-size:12px}
.totop{bottom:calc(16px + var(--lift,0px) + env(safe-area-inset-bottom))}
body.has-buybar .totop{bottom:calc(88px + var(--lift,0px) + env(safe-area-inset-bottom))}
@media (min-width:720px){body.has-buybar .totop{bottom:calc(16px + var(--lift,0px) + env(safe-area-inset-bottom))}}

/* 2026-10-20o: ロゴ横の小さな文字をやめ、余白を詰める */
.logo{gap:0}
.logo .jp{display:none!important}

/* 2026-10-20p: トップの3つの棚・数字の帯・商品カード */
.sbar{margin:12px 0 0;background:#FFFFFF;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sbar dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.sbar dl>div{padding:8px 4px;text-align:center;border-left:1px solid var(--rule)}.sbar dl>div:first-child{border-left:0}
.sbar dt{font-size:11px;line-height:1.3;color:var(--sub)}
.sbar dd{margin:0;font-size:16px;font-weight:800;line-height:1.5;white-space:nowrap}
.sbar dd small{font-size:11px;font-weight:700;margin-left:1px}
.sbar .d-pc{display:none}.sbar .upd2 .num{font-size:13px}
@media (min-width:720px){.sbar dd{font-size:20px}.sbar dt{font-size:12px}.sbar .d-pc{display:inline}.sbar .d-sp{display:none}.sbar .upd2 .num{font-size:18px}}
.tsec{margin:32px 0 0}
@media (min-width:720px){.tsec{margin:48px 0 0}}
.tsec .sh-head{align-items:center;gap:12px;margin-bottom:12px}
.tsec .sh-head h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0}
.hnote{font-size:12px;font-weight:400;color:var(--sub)}
.more2{font-size:13px;font-weight:700;color:#FF0000!important;text-decoration:none;white-space:nowrap}
.sgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:720px){.sgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.dcard a{box-shadow:none;transition:border-color .12s}
.dcard a:hover{border-color:#BDBDBD;transform:none}
.dshelf .dcard a{box-shadow:none}
.dprice{font-size:13px;color:var(--ink);font-weight:800}.dprice b{font-size:20px}
.ddrop{font-size:12px;font-weight:700;color:var(--good)}
.dtags{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--sub)}.dtags:empty{display:none}
.dpt,.drv{color:var(--sub)}.dpt{color:var(--warn);font-weight:700}
.dshop{font-size:11px;color:var(--sub);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rb{position:absolute;left:6px;top:6px;z-index:2;min-width:24px;height:24px;padding:0 6px;display:grid;place-items:center;border-radius:6px;font-family:var(--mono);font-weight:800;font-size:14px;line-height:1;color:#FFFFFF;background:#444444}
.rb.r1{background:#FF0000}
.rb.rn{background:#FFFFFF;color:var(--sub);border:1px solid #D6D6D6;font-size:12px;font-weight:700;min-width:22px;height:22px}
.rail{position:relative}
.rtrack{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rtrack::-webkit-scrollbar{display:none}
.rtrack>li{flex:0 0 calc((100% - 20px) / 2.5);scroll-snap-align:start}
@media (min-width:600px){.rtrack>li{flex-basis:calc((100% - 30px) / 3.5)}}
@media (min-width:900px){.rtrack>li{flex-basis:calc((100% - 50px) / 5.5)}}
.rbtn{display:none}
@media (min-width:900px){.rbtn{display:grid;place-items:center;position:absolute;top:32%;z-index:3;width:44px;height:44px;padding:0;border-radius:50%;background:#FFFFFF;border:1px solid var(--rule);box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:26px;line-height:1;color:var(--ink);cursor:pointer}.rbtn.prev{left:-8px}.rbtn.next{right:-8px}}

/* 2026-10-20q: 季節のトップ画 */
.sbanner{display:flex;align-items:center;justify-content:space-between;gap:8px;height:140px;margin:12px 0 0;padding:0 14px 0 16px;overflow:hidden;background:var(--sbg,#FDEEF1);border:1px solid var(--rule);border-radius:var(--r);color:#1B1B1F;text-decoration:none}
.s-spring{--sbg:#FDEEF1}.s-summer{--sbg:#E6F3FB}.s-autumn{--sbg:#FFF1DE}.s-winter{--sbg:#E9F1F8}
.sb-text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;flex:1 1 58%}
.sb-kicker{font-size:12px;font-weight:800;letter-spacing:.06em;color:#5E5A57}
.sb-h{font-size:18px;line-height:1.35;font-weight:800}
.sb-p{display:none;font-size:14px;color:#3A3A3F}
.sb-cta{display:inline-block;background:#FF0000;color:#FFFFFF;font-size:14px;font-weight:800;line-height:1;padding:8px 14px;border-radius:999px}
.sb-art{flex:0 1 40%;height:100%;display:flex;align-items:center;justify-content:flex-end}
.sb-svg{display:block;height:92%;width:auto;max-width:100%}
.sbanner:hover{border-color:#BDBDBD}
@media (min-width:720px){.sbanner{height:200px;padding:0 28px 0 32px}.sb-h{font-size:28px}.sb-p{display:block}.sb-kicker{font-size:13px}.sb-text{gap:10px}.sb-art{flex-basis:44%}}

/* 2026-10-20r: フッターの上の季節の飾り（フッターの上端に乗せる） */
.fstrip{height:48px;margin-top:32px;background-color:var(--sbg,#FFF1DE);background-repeat:repeat-x;background-position:left bottom;background-size:auto 100%}
.fstrip.s-spring{background-image:url(/static/footstrip-spring-r1.svg)}
.fstrip.s-summer{background-image:url(/static/footstrip-summer-r1.svg)}
.fstrip.s-autumn{background-image:url(/static/footstrip-autumn-r1.svg)}
.fstrip.s-winter{background-image:url(/static/footstrip-winter-r1.svg)}
@media (min-width:720px){.fstrip{height:64px;margin-top:48px}}

/* 2026-10-20t: ジャンル別の帯は格子（5列→4列→2列）。横スクロールは新着のカルーセルだけ */
.g5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.g5>li:nth-child(n+5){display:none}
@media (min-width:600px){.g5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){.g5{grid-template-columns:repeat(5,minmax(0,1fr))}.g5>li:nth-child(n+5){display:block}}
.gsec .sh-head{align-items:center}
/* 新着のカルーセル：右端は半分以上見せ、‹ › はカードの外（左右の余白）に置く */
.rtrack>li{flex-basis:calc((100% - 20px) / 2.6)}
@media (min-width:600px){.rtrack>li{flex-basis:calc((100% - 30px) / 3.6)}}
@media (min-width:900px){
  .rail{padding:0 56px}
  .rtrack>li{flex-basis:calc((100% - 50px) / 5.6)}
  .rbtn.prev{left:0}.rbtn.next{right:0}
}

/* 2026-10-21a: 季節の画像（トップ画・フッターの帯） */
.sbanner.sb-img{position:relative;display:block;height:auto;aspect-ratio:2/1;padding:0;background:#FFF4E3}
.sb-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.sb-img .sb-text.sb-over{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:auto;max-width:54%;flex:none;padding:10px 12px;background:rgba(255,255,255,.8);border-radius:12px;gap:4px}
.sb-img .sb-h{font-size:16px}
.sb-img .sb-cta{display:none}
@media (min-width:720px){.sbanner.sb-img{aspect-ratio:4/1}.sb-img .sb-text.sb-over{left:28px;max-width:40%;padding:16px 20px;gap:8px}.sb-img .sb-h{font-size:28px}.sb-img .sb-cta{display:inline-block}}
.fstrip.has-img{background-repeat:repeat-x;background-position:center bottom;background-size:auto 100%}
/* 数字の帯：パタパタ板 */
.sbar .flip{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums;vertical-align:middle}
.fs{padding:0 1px}
.fd{position:relative;display:inline-block;width:.72em;height:1.4em;line-height:1.4em;text-align:center;perspective:200px}
.fd .h,.fd .fl{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#FFFFFF;border:1px solid var(--rule);backface-visibility:hidden}
.fd .t,.fd .f1{top:0;border-bottom:0;border-radius:4px 4px 0 0}
.fd .b,.fd .f2{bottom:0;border-top:0;border-radius:0 0 4px 4px}
.fd .f1{transform-origin:50% 100%}.fd .f2{transform-origin:50% 0;transform:rotateX(90deg)}
.fd .fl{display:none}
.fd i{position:absolute;left:0;right:0;height:200%;font-style:normal;line-height:1.4em}
.fd .t i,.fd .f1 i{top:0}.fd .b i,.fd .f2 i{bottom:0}
.fd::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:var(--rule);z-index:5}
.fd .f1{z-index:3}.fd .f2{z-index:4}
.sbar dt{white-space:nowrap}
@media (max-width:719px){.sbar dl{grid-template-columns:1fr 1fr 1fr 1.7fr}.sbar dt{font-size:10.5px}.sbar dd{font-size:14px}.sbar dd small{font-size:10px}.fd{width:.7em}}

/* 2026-10-21a 修正：画像バナーの文字帯の幅・折り返し、数字の帯のPC用/スマホ用の出し分け */
.sb-img .sb-text.sb-over{max-width:48%;padding:8px 10px;left:8px}
.sb-img .sb-h{font-size:14px;text-wrap:balance}
.sb-img .sb-kicker{font-size:11px}
@media (min-width:720px){.sb-img .sb-text.sb-over{max-width:38%;padding:16px 20px;left:28px}.sb-img .sb-h{font-size:24px}.sb-img .sb-kicker{font-size:13px}}
.sbar b.flip.d-pc{display:none}.sbar b.flip.d-sp{display:inline-flex}
@media (min-width:720px){.sbar b.flip.d-pc{display:inline-flex}.sbar b.flip.d-sp{display:none}}

@media (max-width:719px){.sbar dl{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.7fr)}.sbar dd{font-size:13px}.sbar .flip{gap:1px}.fd{width:.66em}.fs{padding:0}}

@media (max-width:719px){.sbar dl{grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr) minmax(0,1.05fr) minmax(0,1.6fr)}.sbar dl>div{padding:8px 2px}.sbar dt{font-size:10px;letter-spacing:-.02em}.sbar dd{font-size:12px}.fd{width:.8em}}

/* 2026-10-21c: 内容の幅を1440pxに／1440px以上は6列／文章は760px／広い画面の左右の飾り */
.prose,.chead .lead,.basis,.how{max-width:760px}
.g5>li:nth-child(n+6){display:none}
.s6>li:nth-child(n+11){display:none}
@media (min-width:1000px){.g5>li:nth-child(n+5){display:block}.g5>li:nth-child(n+6){display:none}}
@media (min-width:1440px){
  .g5{grid-template-columns:repeat(6,minmax(0,1fr))}.g5>li:nth-child(n+6){display:block}
  .sgrid.s6{grid-template-columns:repeat(6,minmax(0,1fr))}.s6>li:nth-child(n+11){display:block}
  .dgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:1100px){
  .sbanner.sb-img{aspect-ratio:auto;height:268px;background:var(--topbg,#FFF4E3)}
  .sb-img .sb-pic{object-fit:contain;object-position:right center}
}
.sd{display:none}
@media (min-width:1680px){
  .sd{display:block;position:fixed;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;
      width:min(calc((100vw - 1440px) / 2 - 24px), 28vh);aspect-ratio:1 / 3;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.9}
  .sd-l{left:12px;-webkit-mask-image:linear-gradient(to right,#000 45%,transparent);mask-image:linear-gradient(to right,#000 45%,transparent)}
  .sd-r{right:12px;-webkit-mask-image:linear-gradient(to left,#000 45%,transparent);mask-image:linear-gradient(to left,#000 45%,transparent)}
}

/* 2026-10-21d: 確認用ページ /preview/ */
.pv-icons{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.pv-icons li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border:1px solid var(--rule);border-radius:12px}
.pv-pair{display:flex;align-items:center;gap:14px}.pv-c{display:grid;place-items:center;border-radius:50%}
.pv-n{font-weight:700;font-size:14px}.pv-icons small{color:var(--sub);font-size:11px}
.pv-pat{margin:20px 0}.pv-pat h3{margin:0 0 8px;font-size:16px}
.pv-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.pv-row figure{margin:0}.pv-row figcaption,.pv-side figcaption{font-size:12px;color:var(--sub);margin-bottom:4px}
.pv-pc{flex:1 1 760px;max-width:1100px}.pv-sp{flex:0 0 375px;width:375px}
.pv-pc .sbanner.sb-img{margin:0;aspect-ratio:auto;height:268px;background:var(--topbg,#FFF4E3)}.pv-pc .sb-pic{object-fit:contain;object-position:right center}
.pv-pc .sb-text.sb-over{left:28px;max-width:38%;padding:16px 20px;gap:8px}.pv-pc .sb-h{font-size:24px}.pv-pc .sb-kicker{font-size:13px}.pv-pc .sb-p{display:block}.pv-pc .sb-cta{display:inline-block}
.pv-sp .sbanner.sb-img{margin:0;aspect-ratio:2/1;height:auto;background:#FFF4E3}.pv-sp .sb-pic{object-fit:cover;object-position:right center}
.pv-sp .sb-text.sb-over{left:10px;max-width:48%;padding:8px 10px;gap:4px}.pv-sp .sb-h{font-size:14px}.pv-sp .sb-kicker{font-size:11px}.pv-sp .sb-p,.pv-sp .sb-cta{display:none}
.pv-side{display:flex;gap:24px;flex-wrap:wrap}.pv-side figure{margin:0;padding:8px;border:1px solid var(--rule);border-radius:12px}.pv-side img{display:block;width:240px;height:720px}

.pv-icons{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* 2026-10-21e: ジャンルのアイコンは画像（淡い色の丸の中）／スマホのトップ画は文字を左40%に収め、絵を右へ／パタパタの横線をなくす */
.gbox{border-radius:50%}
.gbox img.gico{display:block;width:36px;height:36px}.gbox.s img.gico{width:22px;height:22px}.gbox.l img.gico{width:44px;height:44px}
img.ico.s{width:18px;height:18px;vertical-align:-3px}
.noimg img.gico{width:48px;height:48px}
.gall .gbox.s{width:36px;height:36px}.gall .gbox.s img.gico{width:26px;height:26px}
@media (max-width:719px){
  .sbanner.sb-img{background:var(--topbg,#FFF4E3)}
  .sb-img .sb-pic{inset:auto;top:50%;right:0;left:auto;width:88%;height:auto;transform:translateY(-50%);object-fit:contain}
  .sb-img .sb-text.sb-over{left:8px;max-width:40%;padding:6px 8px;gap:3px}
  .sb-img .sb-h{font-size:13px}.sb-img .sb-kicker{font-size:10px}
}
@media (min-width:720px){.sb-img .sb-text.sb-over{max-width:36%}}
.pv-sp .sbanner.sb-img{background:var(--topbg,#FFF4E3)}
.pv-sp .sb-pic{inset:auto;top:50%;right:0;left:auto;width:88%;height:auto;transform:translateY(-50%);object-fit:contain}
.pv-sp .sb-text.sb-over{left:8px;max-width:40%;padding:6px 8px;gap:3px}.pv-sp .sb-h{font-size:13px}.pv-sp .sb-kicker{font-size:10px}
.fd::after{display:none}
.fd .b,.fd .f2{background:#F8F8F8}
.fd .t{height:calc(50% + .5px);z-index:2}

/* 2026-10-21e パタパタの修正：数字を板の中央に／板の幅を数字に合わせる／めくり中の横線をなくす */
.fd{width:.84em}
.fd i{transform:translateY(-.08em)}
.fd .fl{border:0;box-shadow:inset 1px 0 0 var(--rule),inset -1px 0 0 var(--rule)}
@media (max-width:719px){.fd{width:.8em}}