/* =========================================================
   いらないけど、欲しい
   ---------------------------------------------------------
   白い地に、商品が並ぶかたち。
   This Is Why I'm Broke と同じ組み方にしてあります。
   ========================================================= */

:root{
  --ink:#16161a;         /* 文字 */
  --sub:#6b6b74;         /* うすい文字 */
  --line:#e3e3e6;        /* 線 */
  --bg:#ffffff;          /* 地 */
  --soft:#f5f5f7;        /* 写真の下地 */
  --buy:#e8452c;         /* 買うボタン */
  --buy-dark:#c8341e;
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",
           "Meiryo",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* ---------- 上の帯 ---------- */
.masthead{
  border-bottom:1px solid var(--line);
  padding:22px 16px 18px; text-align:center;
}
.brand{
  display:inline-block; font-weight:900; font-size:27px;
  letter-spacing:.02em; line-height:1.25;
}
.brand small{
  display:block; font-weight:500; font-size:10.5px; letter-spacing:.28em;
  color:var(--sub); margin-top:5px;
}

.mainnav{border-bottom:1px solid var(--line); background:var(--bg)}
.navwrap{
  max-width:1140px; margin:0 auto; padding:0 16px;
  display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
}
.mainnav a{
  display:block; padding:13px 2px; font-size:13.5px; font-weight:700;
  letter-spacing:.06em; color:var(--sub); border-bottom:3px solid transparent;
}
.mainnav a:hover{color:var(--ink)}
.mainnav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--buy)}

/* ---------- 中身の幅 ---------- */
main{max-width:1140px; margin:0 auto; padding:0 16px 64px}
main.narrow{max-width:760px}

.hero{text-align:center; padding:44px 0 36px}
.hero h1{
  font-size:30px; font-weight:900; line-height:1.5; margin:0 0 12px;
  text-wrap:balance;
}
.hero p{
  font-size:15px; color:var(--sub); margin:0 auto; max-width:38em;
}

/* ---------- 商品が並ぶところ ---------- */
.grid{
  display:grid; gap:26px 22px;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:880px){ .grid{grid-template-columns:repeat(2,1fr); gap:22px 16px} }
@media(max-width:460px){ .grid{grid-template-columns:1fr} }

.card{display:block}
.card .shot{
  display:block; position:relative; width:100%; aspect-ratio:1/1;
  background:var(--soft); border:1px solid var(--line); border-radius:3px;
  overflow:hidden;
}
.card .shot img{width:100%; height:100%; object-fit:cover}
.card:hover .shot{border-color:#c9c9cf}

.noshot{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  color:#b4b4bc; font-size:11.5px; letter-spacing:.1em;
}
.noshot b{font-size:40px; font-weight:900; color:#d8d8de; line-height:1}

.cbody{display:block; padding:12px 2px 0}
.cname{
  display:block; font-weight:700; font-size:15px; line-height:1.6;
  margin-bottom:4px;
}
.card:hover .cname{color:var(--buy)}
.clead{
  display:block; font-size:12.5px; color:var(--sub); line-height:1.75;
  margin-bottom:7px;
}
.cprice{
  display:inline-block; font-weight:900; font-size:14px;
  font-variant-numeric:tabular-nums;
}

/* ---------- 商品ひとつのページ ---------- */
.item{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:38px; padding:40px 0 8px; align-items:start;
}
@media(max-width:800px){ .item{grid-template-columns:1fr; gap:26px; padding-top:28px} }

.ishot{
  position:relative; width:100%; aspect-ratio:1/1;
  background:var(--soft); border:1px solid var(--line); border-radius:3px;
  overflow:hidden;
}
.ishot img{width:100%; height:100%; object-fit:cover}

.ibody h1{
  font-size:26px; font-weight:900; line-height:1.5; margin:0 0 10px;
  text-wrap:balance;
}
.iprice{
  font-size:24px; font-weight:900; margin:0 0 22px;
  font-variant-numeric:tabular-nums;
}
.iprice small{font-size:13px; font-weight:500; color:var(--sub); margin-left:6px}
.ibody p{margin:0 0 18px; font-size:15.5px}

/* ---------- 買うところ ---------- */
.buy{margin-top:26px}
.buy a{
  display:inline-block; background:var(--buy); color:#fff;
  font-weight:900; font-size:16px; letter-spacing:.06em;
  padding:15px 40px; border-radius:3px;
}
.buy a:hover{background:var(--buy-dark)}
.buy-none span{
  display:inline-block; border:1px dashed var(--line); color:var(--sub);
  font-size:13px; padding:14px 26px; border-radius:3px;
}

/* ---------- ほかにも ---------- */
.more{margin-top:58px; border-top:1px solid var(--line); padding-top:34px}
.more h2{
  font-size:16px; font-weight:700; letter-spacing:.04em;
  margin:0 0 22px; text-align:center;
}

/* ---------- 読みもののページ ---------- */
.entry{padding:38px 0 10px}
.entry h1{font-size:26px; font-weight:900; margin:0 0 20px; line-height:1.5}
.entry h2{
  font-size:17px; font-weight:700; margin:34px 0 10px;
  padding-bottom:7px; border-bottom:1px solid var(--line);
}
.entry p{margin:0 0 16px}
.entry .lead{font-size:17px}
.entry ul{margin:0 0 16px; padding-left:1.3em}
.entry li{margin-bottom:7px}
.entry .note{
  background:var(--soft); border-left:3px solid var(--buy);
  padding:16px 18px; font-size:14.5px; border-radius:0 3px 3px 0;
}

/* ---------- 下の帯 ---------- */
footer{
  border-top:1px solid var(--line); margin-top:20px;
  padding:30px 16px 46px; text-align:center;
}
.fnav{
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  margin-bottom:16px;
}
.fnav a{font-size:13px; font-weight:700; color:var(--sub)}
.fnav a:hover{color:var(--ink)}
.disclosure{
  max-width:640px; margin:0 auto; font-size:11.5px; line-height:1.9;
  color:var(--sub);
}

/* ---------- 暗い画面の人 ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#ececf0; --sub:#9b9ba4; --line:#2c2c33;
    --bg:#131317; --soft:#1c1c22;
  }
}
:root[data-theme="dark"]{
  --ink:#ececf0; --sub:#9b9ba4; --line:#2c2c33;
  --bg:#131317; --soft:#1c1c22;
}

/* ---------- カテゴリの入口（トップ） ---------- */
.cats{display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
  margin:0 0 38px}
.cats a{display:flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:999px;
  padding:8px 16px; font-size:13.5px; font-weight:700}
.cats a:hover{border-color:var(--buy); color:var(--buy)}
.cats a span{font-size:11.5px; font-weight:500; color:var(--sub);
  font-variant-numeric:tabular-nums}
.cats a:hover span{color:var(--buy)}

/* ---------- 商品ページに出すカテゴリの札 ---------- */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px}
.chips a{border:1px solid var(--line); border-radius:999px;
  padding:4px 12px; font-size:12px; color:var(--sub)}
.chips a:hover{border-color:var(--buy); color:var(--buy)}

/* メニューが長くなるので、横に流せるようにします */
.navwrap{overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; gap:20px; justify-content:flex-start}
.navwrap::-webkit-scrollbar{display:none}
.mainnav a{white-space:nowrap}
@media(min-width:1000px){ .navwrap{justify-content:center} }