:root{
  --bg:#fdf8f3; --panel:#fff; --ink:#241f1b; --muted:#7d746a; --line:#ece3d8;
  --accent:#e2570f; --accent2:#f59e0b; --accent-soft:#fff2e6; --pink:#ec4899;
  --radius:16px; --shadow:0 1px 2px rgba(60,40,20,.05), 0 8px 24px rgba(60,40,20,.06);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#15120f; --panel:#201b17; --ink:#f3ede5; --muted:#9d9389;
         --line:#352d26; --accent:#fb923c; --accent2:#fbbf24; --accent-soft:#2c1c10;
         --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.6;-webkit-text-size-adjust:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 14px}
a{color:inherit}
img{display:block}

/* ---- ヘッダー ---- */
header.site{background:var(--panel);border-bottom:1px solid var(--line);padding-top:14px}
.head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand{font-size:1.3rem;font-weight:800;text-decoration:none;letter-spacing:.01em}
.brand .mark{background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;padding:2px 9px;border-radius:9px;margin-right:4px;display:inline-block}
.tagline{margin:0;color:var(--muted);font-size:.8rem}
.pr{margin:10px 0;font-size:.74rem;color:var(--muted);
  background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;padding:7px 11px}
.pr-badge{display:inline-block;background:var(--accent);color:#fff;font-weight:700;
  font-size:.66rem;padding:1px 6px;border-radius:4px;margin-right:7px;letter-spacing:.04em}
.pr-mini{display:inline-block;background:rgba(255,255,255,.25);font-size:.6rem;
  padding:0 4px;border-radius:3px;margin-left:6px;vertical-align:1px}
.nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:.8rem;text-decoration:none;padding:6px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);white-space:nowrap;font-weight:600}
.nav a:hover{border-color:var(--accent);color:var(--accent)}
.nav .n-home{background:var(--accent);color:#fff;border-color:var(--accent)}

main{padding:20px 0 48px}
h1{font-size:1.4rem;margin:.1em 0 .2em;letter-spacing:.01em}
.sec{margin:0 0 34px}
.sec-h{font-size:1.05rem;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.sec-h span:first-child{position:relative;padding-left:13px;font-weight:800}
.sec-h span:first-child::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;
  width:5px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.muted{color:var(--muted);font-size:.8rem;font-weight:400}
.empty{color:var(--muted);background:var(--panel);border:1px dashed var(--line);
  border-radius:var(--radius);padding:26px;text-align:center;font-size:.88rem}
.empty.small{padding:14px;font-size:.8rem}

/* ---- タイル（キャラ・カテゴリ） ---- */
.group{margin-bottom:20px}
.group-h{font-size:.84rem;font-weight:700;margin:0 0 8px;color:var(--muted);
  display:flex;align-items:center;gap:7px}
.group-h::after{content:"";flex:1;height:1px;background:var(--line)}
.group-h .muted{font-size:.7rem;background:var(--line);padding:1px 7px;border-radius:999px;order:-1}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .14s ease, border-color .14s ease}
.tile:hover{transform:translateY(-3px);border-color:var(--accent)}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--bg)}
.tile .noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  font-size:2.4rem;background:var(--accent-soft)}
.tile-body{display:block;padding:6px 7px 8px}
.tile-body b{display:block;font-size:.72rem;line-height:1.3;font-weight:700;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile-body em{display:block;font-style:normal;font-size:.66rem;color:var(--muted);margin-top:1px}
.cat-tile img{aspect-ratio:1/1}
.cat-tile .noimg{aspect-ratio:1/1}

/* ---- 商品カード（画像主役） ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .14s ease, border-color .14s ease}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card-img{position:relative;display:block;background:var(--bg)}
.card-img img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:6px}
.card-img .noimg{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;font-size:2.6rem}
.badge{position:absolute;top:7px;left:7px;font-size:.66rem;font-weight:700;color:#fff;
  padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.badge.rel{top:auto;bottom:7px;left:7px;background:rgba(0,0,0,.62);font-weight:600}
.ev-new{background:#2563eb} .ev-restock{background:#059669} .ev-preorder{background:#7c3aed}
.ev-price_drop{background:#dc2626} .ev-date_change{background:#a16207}
.card-body{padding:9px 11px 11px;display:flex;flex-direction:column;flex:1}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.tag{font-size:.64rem;padding:2px 7px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag:hover{border-color:var(--accent);color:var(--accent)}
.tag.cat{background:var(--accent-soft);border-color:transparent}
.name{font-size:.82rem;margin:0 0 6px;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{margin:0 0 8px;font-size:.78rem;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.price{font-weight:800;color:var(--accent)}
.buy{margin-top:auto;display:block;text-align:center;font-size:.78rem;text-decoration:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  padding:7px 10px;border-radius:9px;font-weight:700}
.buy:hover{filter:brightness(1.06)}
.more{display:inline-block;margin-top:10px;font-size:.84rem;color:var(--accent);font-weight:700}

.month{margin-bottom:26px}
.month h3{font-size:.95rem;margin:0 0 10px}
.month h3 a{text-decoration:none}
.month h3 a:hover{color:var(--accent)}

.timeline{list-style:none;padding:0;margin:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.timeline li{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--line);font-size:.82rem}
.timeline li:last-child{border-bottom:0}
.timeline .badge{position:static}
.timeline .date{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:.76rem}
.timeline .tname{flex:1;min-width:150px}

footer.site{background:var(--panel);border-top:1px solid var(--line);
  padding:20px 0;font-size:.76rem;color:var(--muted)}
footer.site p{margin:.4em 0}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.foot-nav a{font-size:.76rem;text-decoration:none;padding:4px 10px;
  border:1px solid var(--line);border-radius:999px}
.foot-nav a:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:480px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px}
  h1{font-size:1.2rem}
}