:root{
  --ink:#171717;--body:#4d4d4d;--mute:#7d7d7d;--faint:#c7c7c7;--line:#e8e8e8;--soft:#fafafa;
  --up:#1a7f37;--down:#cf222e;
  --u1:#aceebb;--u2:#4ac26b;--u3:#1a7f37;--d1:#ffcecb;--d2:#ff8182;--d3:#cf222e;--z:#ebedf0;
  --sans:"IBM Plex Sans JP",system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:14px/20px var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:720px;margin:0 auto}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--mute)}
.eyebrow{font:500 11px/16px var(--mono);color:var(--mute);letter-spacing:.02em}
.pad{padding:0 16px}
.sec{border-top:1px solid var(--line);padding:24px 16px 28px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.sec-h h2{font:600 15px/20px var(--sans);letter-spacing:-.01em}

/* 上の帯 */
.top{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 16px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--mono);letter-spacing:-.02em}
.brand i{width:12px;height:12px;background:var(--ink)}
.top .home{font:500 12px/1 var(--mono);color:var(--mute);border:1px solid var(--line);padding:6px 8px}
.top .home[aria-current]{color:#fff;background:var(--ink);border-color:var(--ink)}
.feat{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);padding:0 8px}
.feat::-webkit-scrollbar{display:none}
.feat a{flex:none;font:500 12px/32px var(--sans);color:var(--mute);padding:0 8px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.feat a[aria-current]{color:var(--ink);border-color:var(--ink)}

/* 商品ヘッダー */
.ph{display:flex;gap:12px;align-items:center;padding:10px 16px 0}
.thumb{flex:none;width:44px;height:44px;border:1px solid var(--ink);display:grid;place-items:center;font:700 13px/1 var(--mono);letter-spacing:-.04em;position:relative}
.thumb::after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;background:var(--ink)}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
.ph h1{font:500 14px/19px var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph .meta{font:400 11px/16px var(--mono);color:var(--mute);margin-top:2px}

/* 価格 */
.price{padding:10px 16px 0}
.big{font:700 52px/52px var(--mono);letter-spacing:-.06em;margin:2px 0 4px -2px}
.big small{font-size:28px;letter-spacing:-.02em;margin-right:2px;vertical-align:4px}
.shop{font-size:13px;color:var(--body)}
.shop b{font-weight:600;color:var(--ink)}
.shop .vs{font:500 12px/20px var(--mono);margin-left:8px;white-space:nowrap}
.shop .vs em{font:400 11px var(--sans);font-style:normal;color:var(--mute);margin-right:4px}
.amz{display:flex;align-items:center;gap:10px;margin-top:8px}
.amz a{flex:none;display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--ink);font:500 12px/1 var(--mono)}
.amz a b{font-weight:700;font-size:13px;letter-spacing:-.02em}
.amz a:active{background:var(--soft)}
.amz p{font:400 11px/15px var(--sans);color:var(--mute)}
.row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:10px}
.chg b{display:block;font:700 17px/22px var(--mono);letter-spacing:-.03em}
.chg span{font:500 12px/16px var(--mono)}
.chg em{font-style:normal;color:var(--mute)}
.tabs{display:flex;border:1px solid var(--ink);flex:none}
.tabs button{font:500 12px/1 var(--mono);height:30px;padding:0 9px;border-left:1px solid var(--ink)}
.tabs button:first-child{border-left:0}
.tabs button[aria-pressed=true]{background:var(--ink);color:#fff}
.ov{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 16px;margin-top:8px}
.ov .tabs button{font-size:11px;height:24px;padding:0 8px}
.ov .lg{font:400 11px/16px var(--sans);color:var(--mute);white-space:nowrap}
.ov .lg i{display:inline-block;width:12px;height:0;border-top:1px solid #b5b5b5;vertical-align:middle;margin:0 4px 0 8px}
.ov .lg i.k{border-top:2px solid var(--ink)}

/* チャート */
.chart{position:relative;margin-top:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.chart svg,.cal svg{display:block}
.chart text,.cal text,.mini text{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tip{position:absolute;top:8px;pointer-events:none;background:#fff;border:1px solid var(--line);padding:6px 8px;font:400 11px/15px var(--mono);
  box-shadow:0 2px 2px rgba(0,0,0,.04),0 8px 16px -4px rgba(0,0,0,.08);white-space:nowrap;display:none}
.tip b{display:block;font:700 14px/18px var(--mono)}

/* 草カレンダー */
.cal{padding:12px 16px 0}
.cal-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.cal-h .cnt{font:500 11px/16px var(--mono);color:var(--mute)}
.cal-h .cnt b{font-weight:600}
.legend{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font:400 11px/16px var(--sans);color:var(--mute)}
.legend .sw{display:flex;align-items:center;gap:2px}
.legend .sw i{width:10px;height:10px}
.legend .sw span{margin:0 4px}

.src{display:flex;flex-direction:column;margin-top:12px;padding:8px 16px;border-top:1px solid var(--line);font:400 11px/15px var(--mono);color:var(--mute)}
.src b{color:var(--ink);font-weight:600}

/* 期間の数字 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.stats div{padding:10px 10px 12px;border-left:1px solid var(--line);min-width:0}
.stats div:first-child{border-left:0}
.stats b{display:block;font:700 17px/22px var(--mono);letter-spacing:-.04em;margin:4px 0 2px}
.stats span{font:400 11px/14px var(--mono);color:var(--mute)}

/* 店ごとの小さな線 */
.multi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.mini{background:#fff;padding:8px 8px 6px;min-width:0}
.mini .nm{font:500 11px/14px var(--sans);color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .nm i{font:500 11px/14px var(--mono);font-style:normal;color:var(--mute);margin-right:4px}
.mini .pr{font:700 13px/18px var(--mono);letter-spacing:-.03em}
.mini .pr span{font:400 11px var(--mono);color:var(--mute);margin-left:4px;letter-spacing:0}
.mini svg{display:block;margin-top:4px;width:100%}
.note{font:400 11px/16px var(--sans);color:var(--mute);margin-top:8px}

/* 店舗一覧 */
.tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.tbl .sn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
.tbl .pw{width:92px}
.tbl th{font:500 11px/16px var(--mono);color:var(--mute);text-align:left;padding:0 0 6px;border-bottom:1px solid var(--ink)}
.tbl td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl .r{text-align:right}
.tbl .rk{width:28px;font:500 12px/1 var(--mono);color:var(--mute)}
.tbl .p{font:600 14px/1 var(--mono);letter-spacing:-.02em}
.tbl .df{width:84px;font:400 12px/1 var(--mono);color:var(--mute)}
.tbl .ag{width:64px;font:400 11px/1 var(--mono);color:var(--mute)}
.tbl tr.best td{font-weight:600;background:var(--soft)}
.tbl tr.best .rk{color:var(--ink)}
.tag{display:inline-block;font:600 11px/1 var(--mono);background:var(--ink);color:#fff;padding:3px 4px;vertical-align:1px}
.tbl tr.best td:first-child{box-shadow:inset 3px 0 0 var(--ink);padding-left:8px}

/* ランキング */
.rk-list{list-style:none;border-top:1px solid var(--ink)}
.rk-list li{border-bottom:1px solid var(--line)}
.rk-list .it{display:grid;grid-template-columns:22px 1fr 64px 76px;gap:8px;align-items:center;padding:10px 0}
.rk-list .n{font:500 12px/1 var(--mono);color:var(--mute)}
.rk-list .t{min-width:0}
.rk-list .t p{font:500 13px/18px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-list .t span{display:block;font:400 11px/15px var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-list .c{text-align:right;font:600 12px/16px var(--mono)}
.rk-list .c span{display:block;font-weight:400;font-size:11px}
.rk-list a.it:active{background:var(--soft)}

/* ホーム */
.hero{padding:28px 16px 24px}
.hero h1{font:600 26px/32px var(--sans);letter-spacing:-.04em}
.hero p{color:var(--body);margin-top:6px;font-size:13px}
.search{display:flex;margin-top:16px;border:1px solid var(--ink);height:44px}
.search svg{flex:none}
.search label{display:grid;place-items:center;width:40px}
.search input{flex:1;min-width:0;border:0;outline:0;font:400 14px var(--sans);background:none}
.search button{width:44px;display:grid;place-items:center;border-left:1px solid var(--ink)}
.results{list-style:none}
.results li a{display:block;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.results .none{padding:8px 0;color:var(--mute);font-size:12px}
.scale{display:grid;grid-template-columns:1.3fr 1fr .8fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scale div{padding:14px 12px 14px 16px;border-left:1px solid var(--line);min-width:0}
.scale div:first-child{border-left:0}
.scale b{display:block;font:700 24px/28px var(--mono);letter-spacing:-.06em}
.scale span{font:400 11px/16px var(--sans);color:var(--mute)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.picks a{background:#fff;padding:10px;min-width:0}
.picks p{font:500 12px/16px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picks b{display:block;font:700 18px/24px var(--mono);letter-spacing:-.04em;margin-top:6px}
.picks span{font:500 11px/14px var(--mono)}
.picks svg{display:block;width:100%;margin-top:6px}
.foot{padding:20px 16px 32px;border-top:1px solid var(--line);font:400 11px/16px var(--mono);color:var(--mute)}
@media (min-width:721px){.wrap{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

.status{padding:24px 16px}.status button{border:1px solid;padding:8px;margin-top:10px}

.loading{padding:24px 16px;color:var(--mute)}
.skeleton{background:var(--line);margin-top:16px;border-radius:2px}
.skeleton-title{height:20px;width:70%}.skeleton-price{height:48px;width:45%}.skeleton-chart{height:180px}.skeleton-row{height:48px}