/* PCパーツ売れ筋ランキング — スマホJuggle（青×濃紺） */
:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1b2130; --sub:#5f6b7a; --line:#e3e6eb;
  --pri:#2563eb; --pri-dark:#1d4ed8; --navy:#0f1a2e; --navy2:#1c2b47;
  --gold:#c9a227; --silver:#97a1ad; --bronze:#a4703a;
  --rakuten:#bf0000; --yahoo:#ff0033; --up:#c0392b; --down:#2f6fb5; --new:#b8860b;
  --radius:14px; --shadow:0 1px 3px rgba(0,0,0,.07),0 8px 22px rgba(15,26,46,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}

/* header */
.hd{background:radial-gradient(120% 140% at 100% 0%,#2a3b5f 0%,var(--navy) 55%);color:#fff;padding:22px 0 26px;border-bottom:4px solid var(--pri)}
.hd .brand{margin:0;font-size:.85rem;font-weight:700;opacity:.85;letter-spacing:.03em}
.hd .brand span{opacity:.5;margin:0 .2em}
.hd h1{margin:.3em 0 .35em;font-size:1.7rem;line-height:1.3;letter-spacing:.02em}
.hd .sub{margin:0;font-size:.93rem;opacity:.92;max-width:46em}
.hd .sub strong{color:#9cc3ff}
.hd .meta{margin:.8em 0 0;font-size:.8rem;opacity:.78}

/* tabs */
.tabs{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.tabs .wrap{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;scrollbar-width:none}
.tab{flex:0 0 auto;padding:8px 15px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:.9rem;color:var(--ink);background:#fff;white-space:nowrap}
.tab:hover{border-color:var(--pri);color:var(--pri)}
.tab-ssk{background:var(--pri);color:#fff;border-color:var(--pri)}
.tab-ssk:hover{background:var(--pri-dark);color:#fff}

/* section */
.sec{margin:30px 0 38px;scroll-margin-top:64px}
.sec-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sec h2{font-size:1.25rem;margin:0;padding-left:.55em;border-left:5px solid var(--pri)}
.stale{font-size:.78rem;color:#8a5a00;background:#fff4d6;border-radius:6px;padding:2px 8px}
.sec-more{margin:12px 0 0;text-align:right}
.sec-more a{font-size:.9rem;font-weight:700;color:var(--pri)}

/* list */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.item{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 14px 14px 12px}
.item.top{border-width:2px;padding:16px 16px 16px 14px}
.item.top1{border-color:var(--gold)} .item.top2{border-color:var(--silver)} .item.top3{border-color:var(--bronze)}
.rk{flex:0 0 42px;display:flex;flex-direction:column;align-items:center;gap:4px}
.rk .no{width:36px;height:36px;border-radius:50%;background:var(--navy2);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1rem}
.top1 .rk .no{background:var(--gold)} .top2 .rk .no{background:var(--silver)} .top3 .rk .no{background:var(--bronze)}
.item.top .rk .no{width:42px;height:42px;font-size:1.15rem}
.mv{font-size:.68rem;font-weight:800;line-height:1}
.mv.up{color:var(--up)} .mv.down{color:var(--down)} .mv.new{color:var(--new)} .mv.same{color:var(--sub)}
.thumb{flex:0 0 88px;width:88px;height:88px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid var(--line)}
.item.top .thumb{flex-basis:112px;width:112px;height:112px}
.noimg{display:flex;align-items:center;justify-content:center;font-size:2rem}
.body{min-width:0;flex:1}
.mk{margin:0 0 2px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:.76rem}
.maker{font-weight:800;color:var(--pri);letter-spacing:.02em}
.pn{color:var(--sub);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;word-break:break-all}
.nm{margin:0 0 6px;font-size:1rem;line-height:1.4}
.item.top .nm{font-size:1.1rem}
.speed{margin:0 0 3px;font-weight:700;font-size:.92rem;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.speed .lbl{flex:0 0 auto;font-size:.7rem;font-weight:800;color:#fff;background:var(--navy2);border-radius:4px;padding:1px 6px;letter-spacing:.08em}
.tbd{color:var(--sub);font-weight:400}
.subspec{margin:0 0 6px;font-size:.8rem;color:var(--sub)}
.why{margin:8px 0;padding:10px 12px;background:#f1f6ff;border-radius:10px;border-left:4px solid var(--pri)}
.why p{margin:4px 0 0;font-size:.88rem}
.reason{display:inline-block;font-size:.76rem;font-weight:800;border-radius:999px;padding:2px 10px;color:#fff}
.r-price{background:#1f7a4d} .r-perf{background:#6b3fb5} .r-bal{background:#2f6fb5}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:6px 0}
.pr{margin:0;font-size:1.15rem;font-weight:800;color:var(--ink)}
.pr small{font-size:.7rem;font-weight:400;color:var(--sub);margin-left:2px}
.src{margin:0;display:flex;flex-wrap:wrap;gap:5px}
.b{font-size:.7rem;font-weight:700;border-radius:4px;padding:1px 6px;border:1px solid}
.b-y{color:var(--yahoo);border-color:#ffc2cc;background:#fff5f7}
.b-r{color:var(--rakuten);border-color:#f0c0c0;background:#fff6f6}
.b-rt{color:#8a5a00;border-color:#f0d9a0;background:#fffaf0}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 14px;border-radius:9px;font-weight:800;font-size:.86rem}
.btn-ssk{background:var(--pri);color:#fff;flex:1 1 220px;max-width:340px}
.btn-ssk:hover{background:var(--pri-dark)}
.btn-sub{background:#fff;border:1px solid var(--line);color:var(--ink);min-width:72px}
.btn-r:hover{border-color:var(--rakuten);color:var(--rakuten)} .btn-y:hover{border-color:var(--yahoo);color:var(--yahoo)}

.method{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.method h2{margin-bottom:10px}
.method ul{margin:0;padding-left:1.2em;font-size:.88rem;color:#374151}
.method li{margin:.35em 0}
.empty{margin:40px 0;text-align:center;color:var(--sub)}

.ft{margin-top:40px;background:var(--navy);color:#c9d1dc;font-size:.78rem;padding:22px 0 30px}
.ft p{margin:.55em 0}
.ft strong{color:#fff}
.ft .nav a{color:#9cc3ff}

@media (max-width:600px){
  .hd h1{font-size:1.35rem}
  .item{gap:10px;padding:12px 10px}
  .rk{flex-basis:30px}
  .rk .no{width:30px;height:30px;font-size:.9rem}
  .item.top .rk .no{width:34px;height:34px}
  .thumb,.item.top .thumb{flex-basis:56px;width:56px;height:56px}
  .speed{display:block}
  .speed .lbl{margin-right:6px}
  .btn-ssk{max-width:none}
}

/* スマホ版：メーカー表記なし・アプリ一覧 */
.nm.nb{font-size:.95rem;font-weight:700;color:#374151}
.lead{margin:-4px 0 12px;color:var(--sub);font-size:.86rem}
.apps{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.app{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ano{flex:0 0 30px;display:flex;flex-direction:column;align-items:center;font-weight:800;font-size:1rem;color:var(--navy2);gap:2px;padding-top:4px}
.aicon{flex:0 0 52px;width:52px;height:52px;border-radius:12px;border:1px solid var(--line)}
.abody{min-width:0;flex:1}
.aname{margin:0;font-weight:800;font-size:.92rem;line-height:1.35;overflow-wrap:anywhere}
.aname a:hover{color:var(--pri)}
.ameta{margin:2px 0 4px;font-size:.74rem;color:var(--sub);overflow-wrap:anywhere}
.os{margin:0;display:flex;flex-wrap:wrap;gap:4px}
.osb{font-size:.7rem;font-weight:700;border-radius:4px;padding:1px 7px;border:1px solid}
.os-ios{color:#1d4ed8;border-color:#bfd3fb;background:#f3f7ff}
.os-ipad{color:#4b5563;border-color:#d8dde4;background:#f7f8fa}
.os-and{color:#15803d;border-color:#bfe5cb;background:#f2fbf5}
.os-unk{color:#9aa3ad;border-color:#e3e6eb;background:#fff}