/* ページ本体へ影響させず、このカテゴリーパーツ内だけに適用 */
.isis{
  --bg:#ffffff; --ink:#111111; --sub:#8a8275; --line:#ece8e0;
  --gold:#c9a24b; --red:#bc2f2f;
  width:402px; max-width:100%; margin:0 auto; background:var(--bg); overflow:hidden;
  color:var(--ink); font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.isis, .isis *{ box-sizing:border-box; }
.isis *{ margin:0; padding:0; }
.isis img{ display:block; max-width:100%; }

.isis .pv{ background:#111; color:#f3ede0; font-size:10.5px; line-height:1.45; text-align:center; padding:8px 14px; }
.isis .pv b{ color:#e7b765; }
.isis .ctx{ background:#f5f2ec; border-bottom:1px solid var(--line); color:#7c766b; font-size:10.5px; text-align:center; padding:8px 14px; }
.isis .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） ===== */
.isis .sec-h{ padding:0 20px; }
.isis .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; }
.isis .sec-h .jp::before{ content:""; flex:0 0 auto; width:4px; height:18px; background:var(--gold); border-radius:2px; }
.isis .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 ===== */
.isis .item{ padding-top:28px; }
/* 注目商品カルーセル：縦長カード 292×383 / gap12 / 左余白20 / 右に次がのぞく */
.isis .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; }
.isis .feat-row::-webkit-scrollbar{ display:none; }
.isis .feat-row::after{ content:""; flex:0 0 12px; }
.isis .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; }
.isis .feat>img{ width:100%; height:100%; object-fit:cover; }
.isis .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%); }
.isis .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; }
.isis .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; }
.isis .feat .meta{ position:absolute; left:15px; right:15px; bottom:16px; z-index:2; color:#fff; }
/* 本文と VIEW DETAIL の重なりを防止 */
.isis .feat .meta{ right:108px; }
.isis .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; }
.isis .feat .meta .ja{ display:block; font-size:11px; font-weight:500; letter-spacing:.1em; opacity:.88; margin-top:3px; white-space:nowrap; }
.isis .feat .view{ position:absolute; left:15px; bottom:16px; right:15px; z-index:2; display:none; }
/* VIEW DETAIL：カード右下のピル（最初の1枚にだけ表示する想定でJSなし＝全カードに小さく） */
.isis .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; }
.isis .feat .go svg{ width:9px; height:9px; stroke:#fff; }
/* 準備中プレースホルダー（画像未用意カテゴリー） */
.isis .feat-soon{ background:#f3f0ea; display:flex; align-items:center; justify-content:center; }
.isis .feat-soon::after{ display:none; }
.isis .feat .soon{ text-align:center; color:#b0a691; font-size:12px; font-weight:700; letter-spacing:.1em; line-height:1.5; }
.isis .feat .soon b{ display:block; margin-top:8px; font-size:17px; color:#9a9080; letter-spacing:.14em; }

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

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

/* ===== 04 RANKING ===== */
.isis .subcats{ align-items:flex-start; }
.isis .subcat{ display:flex; flex-direction:column; align-items:center; align-self:stretch; }
.isis .subcat > .c{ flex:0 0 auto; margin-top:0; }
.isis .subcat > span:not(.c){ display:block; width:100%; min-height:2.6em; }

.isis .rank{ padding-top:50px; }
.isis .rank-intro{ max-width:760px; margin:18px 20px 0; color:#5f594f; font-size:12px; line-height:1.9; }
.isis .rank-intro-lead, .isis .rank-intro-note{ display:block; }
.isis .rk--options{ display:block; }
.isis .rk-options{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 2px 0; }
.isis .rk-option{ display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:7px 12px; border:1px solid #111; border-radius:999px; color:#111; background:#fff; font-size:11px; font-weight:700; line-height:1.3; text-decoration:none; }
.isis .rk-option:hover, .isis .rk-option:focus-visible{ color:#fff; background:#111; }
.isis .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; }
.isis .rank-cards::-webkit-scrollbar{ display:none; }
.isis .rank-cards::after{ content:""; flex:0 0 12px; }
.isis .rk{ flex:0 0 260px; width:260px; scroll-snap-align:start; text-decoration:none; color:var(--ink); }
.isis .rk .imgw{ display:block; width:260px; height:352px; position:relative; border-radius:10px; overflow:hidden; background:#e7e3da; }
.isis .rk .imgw img{ width:100%; height:100%; object-fit:cover; }
.isis .rk .imgw::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.30), transparent 42%); }
.isis .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; }
.isis .rk .no b{ font-size:18px; font-weight:600; color:#ffffff; margin-left:1px; line-height:1; }
.isis .rk .go{ position:absolute; right:13px; bottom:14px; 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; }
.isis .rk .go svg{ width:9px; height:9px; stroke:#fff; }
.isis .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; }
.isis .rk .pr{ margin:7px 2px 0; display:flex; align-items:baseline; gap:7px; }
.isis .rk .pr .now{ color:var(--red); font-weight:900; font-size:15px; display: none;}
.isis .rk .pr .now small{ font-size:10px; font-weight:700; margin-left:1px; }
.isis .rk .pr .was{ color:#a8a298; font-size:11px; text-decoration:line-through; }

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

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

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

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

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

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

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

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

  /* 送り/戻し矢印ボタン */
  .isis .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; }
  .isis .crsl-nav.prev{ left:-16px; }
  .isis .crsl-nav.next{ right:-16px; }
  .isis .crsl-nav:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .isis .crsl-nav.hide{ opacity:0; pointer-events:none; }
}
@media (max-width:859px){
  .isis .item {
    padding-top: 40px;
    padding-bottom: 28px;
  }
}