:root{
  --bg:#ffffff; --ink:#111111; --sub:#8a8275; --line:#ece8e0;
  --gold:#c9a24b; --red:#bc2f2f;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
/* 実寸再現：iPhone17フレーム = 402px幅。その幅で1:1に合うよう全寸法を実測値(÷2)で固定 */
.isis{ width:100%; max-width:100%; margin:0 auto; background:var(--bg); overflow:hidden; }

.pv{ background:#111; color:#f3ede0; font-size:10.5px; line-height:1.45; text-align:center; padding:8px 14px; }
.pv b{ color:#e7b765; }
.ctx{ background:#f5f2ec; border-bottom:1px solid var(--line); color:#7c766b; font-size:10.5px; text-align:center; padding:8px 14px; }
.ctx span{ display:inline-block; background:#fff; border:1px solid #e3ddd1; border-radius:20px; padding:1px 9px; margin:2px 2px; color:#6f695e; font-weight:700; }

/* ===== section header（実測：見出し黒20px / 英字ゴールド10.5px / ティック4×20 gold） ===== */
.sec-h{ padding:0 20px; }
.sec-h .jp{ display:flex; align-items:center; gap:15px; font-size:20px; font-weight:900; letter-spacing:.01em; color:var(--ink); line-height:1.2; }
.sec-h .jp::before{ content:""; flex:0 0 auto; width:4px; height:18px; background:var(--gold); border-radius:2px; }
.sec-h .en{ margin:9px 0 0 19px; font-family:"Josefin Sans",sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.26em; color:var(--gold); text-transform:uppercase; }

/* ===== 03 ITEM CATEGORY ===== */
.item{ padding-top:40px; }
/* 注目商品カルーセル：縦長カード 292×383 / gap12 / 左余白20 / 右に次がのぞく */
.feat-row{ display:flex; gap:12px; overflow-x:auto; padding:16px 0 0 20px;
  scroll-padding-left:20px; -webkit-overflow-scrolling:touch; scrollbar-width:none; transition:opacity .2s ease; }
.feat-row::-webkit-scrollbar{ display:none; }
.feat-row::after{ content:""; flex:0 0 12px; }
.feat{ flex:0 0 292px; width:292px; height:345px; position:relative; border-radius:10px;
  overflow:hidden; scroll-snap-align:start; background:#e7e3da; text-decoration:none; }
.feat>img{ width:100%; height:100%; object-fit:cover; }
.feat::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.14) 42%, rgba(0,0,0,.04) 100%); }
.feat .pill{ position:absolute; top:12px; left:12px; z-index:2; background:#c9a24b; color:#ffffff;
  font-size:11px; font-weight:700; letter-spacing:.02em; padding:5px 11px; border-radius:5px; }
.feat .tmp{ position:absolute; top:12px; right:12px; z-index:3; background:var(--red); color:#fff;
  font-size:9.5px; font-weight:700; padding:3px 7px; border-radius:5px; }
.feat .meta{ position:absolute; left:15px; right:15px; bottom:16px; z-index:2; color:#fff; }
.feat:has(.go) .meta{ right:108px; }
.feat .meta .en{ display:block; font-family:"Josefin Sans",sans-serif; font-size:14px; font-weight:600; letter-spacing:.04em; line-height:1.18; white-space:nowrap; }
.feat .meta .ja{ display:block; font-size:11px; font-weight:500; letter-spacing:.1em; opacity:.88; margin-top:3px; white-space:nowrap; }
.feat .view{ position:absolute; left:15px; bottom:16px; right:15px; z-index:2; display:none; }
/* VIEW DETAIL：カード右下のピル（最初の1枚にだけ表示する想定でJSなし＝全カードに小さく） */
.feat .go{ position:absolute; right:13px; bottom:16px; z-index:3; display:inline-flex; align-items:center; gap:5px;
  background:rgba(17,17,19,.92); color:#fff; font-family:"Josefin Sans",sans-serif; font-size:8px; font-weight:500;
  letter-spacing:.06em; padding:6px 10px; border-radius:20px; }
.feat .go svg{ width:9px; height:9px; stroke:#fff; }
/* 準備中プレースホルダー（画像未用意カテゴリー） */
.feat-soon{ background:#f3f0ea; display:flex; align-items:center; justify-content:center; }
.feat-soon::after{ display:none; }
.feat .soon{ text-align:center; color:#b0a691; font-size:12px; font-weight:700; letter-spacing:.1em; line-height:1.5; }
.feat .soon b{ display:block; margin-top:8px; font-size:17px; color:#9a9080; letter-spacing:.14em; }

.dots{ display:flex; justify-content:center; align-items:center; gap:6px; margin:11px 0 0; }
.dots i{ width:5px; height:5px; border-radius:50%; background:#c7c7c7; }
.dots i.on{ width:44px; border-radius:3px; background:#808080; }

/* サブカテゴリ：タブ・横1行スクロール（車種でカテゴリー数が増えても高さは1行ぶんで不変＝必ず1画面に収まる） */
.subcats-wrap{ position:relative; }
.subcats{ display:flex; gap:9px; overflow-x:auto; padding:16px 0 6px 20px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.subcats::-webkit-scrollbar{ display:none; }
.subcats::after{ content:""; flex:0 0 14px; }
.subcat{ flex:0 0 70px; width:70px; text-align:center; text-decoration:none; cursor:pointer; }
/* 右端フェード＝「まだ続く」合図（全部見えてる/右端まで来たら自動で消える） */
.subcats-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:20px; width:38px; pointer-events:none;
  background:linear-gradient(to right, rgba(255,255,255,0), #ffffff 78%); transition:opacity .2s ease; }
.subcats-wrap.at-end::after{ opacity:0; }
.subcat .c{ display:block; width:70px; height:70px; border-radius:11px; overflow:hidden;
  background:#f0ece4; border:1px solid #ece7dd; position:relative; }
.subcat.is-on .c{ border:3px solid var(--gold); box-shadow:0 0 0 2px rgba(201,162,75,.35); }
.subcat.is-on span{ color:var(--gold); font-weight:700; }
.subcat .c img{ width:100%; height:100%; object-fit:cover; }
.subcat .c.tmp::after{ content:"仮"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#b6ab95; font-size:12px; font-weight:700; }
.subcat span{ display:block; margin-top:7px; font-size:10px; font-weight:700; color:#111111; white-space:nowrap; line-height:1.3; }

/* ===== 04 RANKING ===== */
.rank{ padding-top:50px; }
.rank-cards{ display:flex; gap:18px; overflow-x:auto; padding:16px 0 0 23px;
  scroll-padding-left:23px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.rank-cards::-webkit-scrollbar{ display:none; }
.rank-cards::after{ content:""; flex:0 0 12px; }
.rk{ flex:0 0 260px; width:260px; scroll-snap-align:start; text-decoration:none; color:var(--ink); }
.rk .imgw{ display:block; width:260px; height:352px; position:relative; border-radius:10px; overflow:hidden; background:#e7e3da; }
.rk .imgw img{ width:100%; height:100%; object-fit:cover; }
.rk .imgw::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.30), transparent 42%); }
.rk .no{ position:absolute; top:12px; left:12px; z-index:2; width:46px; height:46px; border-radius:50%;
  background:#c9a24b; box-shadow:0 5px 14px -5px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  color:#ffffff; font-family:"Josefin Sans",sans-serif; font-weight:600; font-size:10px; letter-spacing:.02em; }
.rk .no b{ font-size:18px; font-weight:600; color:#ffffff; margin-left:1px; line-height:1; }
.rk .nm{ margin:12px 2px 0; font-size:12px; font-weight:700; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rk .pr{ margin:7px 2px 0; display:flex; align-items:baseline; gap:7px; }
.rk .pr .now{ color:var(--red); font-weight:900; font-size:15px; }
.rk .pr .now small{ font-size:10px; font-weight:700; margin-left:1px; }
.rk .pr .was{ color:#a8a298; font-size:11px; text-decoration:line-through; }

/* ===== 05 STYLE で選ぶ ＋ 診断 ===== */
.style{ margin-top:48px; padding-top:42px; border-top:1px solid var(--line); }
.style-grid{ display:grid; grid-template-columns:repeat(3,86px); justify-content:center; column-gap:18px; row-gap:24px; }
.style-tile{ display:block; text-decoration:none; }
.style-tile .t{ display:block; width:86px; height:54px; border-radius:9px; overflow:hidden; background:#efece6; }
.style-tile .t img{ width:100%; height:100%; object-fit:cover; }
.style-tile span{ display:block; text-align:center; margin-top:13px; font-size:11px; font-weight:500; color:#111111; line-height:1.35; }

/* ===== 06 商品一覧 ===== */
.products{ margin-top:44px; }
.pcount{ text-align:right; padding:0 16px; font-size:14px; color:#8a8275; font-weight:500; margin-bottom:14px; }
.filterbar{ padding:0 16px; margin-bottom:18px; }
.frow{ display:flex; align-items:center; gap:10px; }
.frow + .frow{ margin-top:9px; }
.frow .flabel{ flex:0 0 auto; font-size:14px; font-weight:700; color:#222222; }
.fchips{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.fchips::-webkit-scrollbar{ display:none; }
.chip{ flex:0 0 auto; display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:999px;
  background:#fff; color:#222222; border:1px solid #d6d6d6; font-size:12px; font-weight:700; white-space:nowrap; text-decoration:none; }
.chip .c{ color:#a59f93; margin-left:2px; }
.chip.on{ background:#111111; color:#fff; border-color:#111111; }
.chip.on .c{ color:rgba(255,255,255,.65); }
.pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:0 7px; }
.pcard{ display:block; text-decoration:none; color:var(--ink); }
.pcard .pimg{ position:relative; display:block; border-radius:8px; overflow:hidden; aspect-ratio:1/1; background:#efece6; }
.pcard .pimg img{ width:100%; height:100%; object-fit:cover; }
.pcard .off{ position:absolute; top:8px; left:8px; background:var(--red); color:#fff; font-size:10px; font-weight:700; letter-spacing:.02em; padding:2px 7px; border-radius:3px; }
.pcard .pname{ display:-webkit-box; margin:9px 3px 0; font-size:11px; font-weight:500; line-height:1.5; color:#3a372f; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard .pprice{ margin:5px 3px 0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pcard .pprice .now{ color:var(--red); font-weight:900; font-size:15px; }
.pcard .pprice .now small{ font-size:10px; font-weight:700; margin-left:1px; }
.pcard .pprice .was{ color:#a8a298; font-size:11px; text-decoration:line-through; }

.endmark{ text-align:center; color:#c4bdaf; font-size:10px; letter-spacing:.1em; padding:30px 0 40px; }

/* カルーセルの送り/戻し矢印（モバイルは非表示＝スワイプ、PCで表示） */
.crsl{ position:relative; }
.crsl-nav{ display:none; }

/* ===== PC（横幅を活かす）：中央カラムを広げ、カルーセルは横一列のまま大きめに ===== */
@media (min-width:860px){
  .isis{ width:100%; max-width:1060px; padding:0 28px; }
  .sec-h{ padding-left:2px; }

  /* サブカテゴリ（タブ）：中央寄せ・折り返し・スクロール無し。PCはアイコン/文字を大きく */
  .subcats{ overflow:visible; flex-wrap:wrap; justify-content:center; padding:22px 0 8px; gap:16px 12px; }
  .subcats::after{ display:none; }
  .subcats-wrap::after{ display:none; }
  .subcat{ flex:0 0 96px; width:96px; }
  .subcat .c{ width:96px; height:96px; border-radius:15px; }
  .subcat span{ font-size:13px; margin-top:9px; }

  /* ITEM CATEGORY：PCでも横一列（横スクロール）。カードを大きめに＝折り返さないので空き枠が出ない */
  .feat-row{ padding:24px 0 0 2px; gap:22px; }
  .feat{ flex:0 0 332px; width:332px; height:400px; }

  /* RANKING：同じく横一列・大きめ */
  .rank-cards{ padding:24px 0 0 2px; gap:24px; }
  .rk{ flex:0 0 320px; width:320px; }
  .rk .imgw{ width:320px; height:430px; }

  /* 送り/戻し矢印ボタン */
  .crsl-nav{ display:flex; align-items:center; justify-content:center; position:absolute;
    top:46%; transform:translateY(-50%); z-index:6; width:48px; height:48px; border-radius:50%;
    border:1px solid var(--line); background:#fff; color:var(--ink); font-size:26px; line-height:1;
    cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.15); padding-bottom:3px;
    transition:opacity .2s, background .2s, color .2s; }
  .crsl-nav.prev{ left:-16px; }
  .crsl-nav.next{ right:-16px; }
  .crsl-nav:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .crsl-nav.hide{ opacity:0; pointer-events:none; }
}