:root{

  --gap:14px;

}

/* ===== ベース ===== */
*{ box-sizing:border-box; }

.sec-ranking .sub-title{margin-bottom: 0 !important;}
/* ===== タブUIの共通 ===== */
.tabs-row{
  display:flex; gap:8px; align-items:end;
  /*padding:10px 12px 0;
  border-bottom:1px solid var(--muted);
  background:var(--bg);*/
  overflow:auto hidden;           /* スマホで横スクロール（スワイプ） */
  scrollbar-width:thin;
  justify-content: center; 
}
.tabs-row::-webkit-scrollbar{ height:8px; }
.tabs-row::-webkit-scrollbar-thumb{ background:#ddd; border-radius:10px; }

.tabs-row.cat-tabs {
    margin: 0 auto;
    text-align: center;
    padding: 0 0 20px;
    font-size: 1.8rem;

}

.tab-btn{
  white-space:nowrap;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
  border-bottom:3px solid transparent;
  color:#666;
  border-radius:10px 10px 0 0;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tab-btn:hover{ background:#f6f6f6; }
.tab-btn:focus-visible{ outline:2px solid #999; outline-offset:2px; }

/* ラジオは視覚的に非表示 */
.tab-radio{
  position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none;
}

/* コンポーネント枠 
.tabset{
  border:1px solid #eee; border-radius:var(--radius); overflow:hidden; background:#fff;
}
*/

/* パネル領域 */
.panels{ padding:16px 12px 24px; }
.panel{ display:none; animation:fade .18s ease-out; }
@keyframes fade{ from{opacity:0; transform:translateY(2px);} to{opacity:1; transform:none;} }
.panel h3{padding: 15px 0;
    text-align: center;}

/* ===== 商品グリッド（PCは5列固定ベース） ===== */
.grid{
  --col:5;
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(var(--col), minmax(0,1fr));
}
@media (max-width:1200px){ .grid{ --col:3; } }
@media (max-width:860px) { .grid{ --col:2; } }
@media (max-width:520px) { .grid{ --col:1; } }

.card{position: relative; /* バッジ配置のため */
  background:#fff; border:1px solid #eee; border-radius:10px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.card img{ width:100%; display:block; object-fit:cover; }
.meta{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; font-size:14px; }
.ttl{ font-weight:600; }
.price{ font-weight:700; }

/* 共通の黒三角 */
.rank-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 40px solid black;        /* 三角形の高さ */
  border-right: 40px solid transparent;/* 三角形の幅 */
}

.rank-badge span {
  position: absolute;
  top: -36px;      /* 数字の位置 */
  left: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* ========================
   🥇 1〜3位の色分け
   ======================== */

/* 1位（金） */
.card:nth-child(1) .rank-badge {
  border-top-color: #FFD700; /* Gold */
}

/* 2位（銀） */
.card:nth-child(2) .rank-badge {
  border-top-color: #C0C0C0; /* Silver */
}

/* 3位（銅） */
.card:nth-child(3) .rank-badge {
  border-top-color: #CD7F32; /* Bronze */
}



/* ===== 第一階層（大カテゴリ） ===== */
.catalog{  width: 1220px;  margin: 0 auto;}
#cat-steel:checked  ~ .cat-tabs label[for="cat-steel"],
#cat-interi:checked~ .cat-tabs label[for="cat-interi"]{
  color:var(--text); border-bottom-color:var(--accent);
}
#cat-steel:checked  ~ .cat-panels .panel-steel,
#cat-interi:checked~ .cat-panels .panel-interi{ display:block; }

/* ===== 第二階層（中カテゴリ：スチールラック側） ===== */
#steel-all:checked   ~ .steel-tabs label[for="steel-all"],
#steel-tension:checked  ~ .steel-tabs label[for="steel-tension"],
#steel-hangerrack:checked  ~ .steel-tabs label[for="steel-hangerrack"],
#steel-wagon:checked  ~ .steel-tabs label[for="steel-wagon"],
#steel-kitchen:checked  ~ .steel-tabs label[for="steel-kitchen"],
#steel-laundry:checked ~ .steel-tabs label[for="steel-laundry"]{
  color:var(--text); border-bottom-color:var(--accent);
}
#steel-all:checked     ~ .steel-panels .steel-all,
#steel-tension:checked    ~ .steel-panels .steel-tension,
#steel-hangerrack:checked    ~ .steel-panels .steel-hangerrack,
#steel-wagon:checked    ~ .steel-panels .steel-wagon,
#steel-kitchen:checked    ~ .steel-panels .steel-kitchen,
#steel-laundry:checked ~ .steel-panels .steel-laundry{ display:block; }

/* ===== 第二階層（中カテゴリ：インテリア側） ===== */
#int-interior:checked  ~ .int-tabs label[for="int-interior"],
#int-sofa:checked   ~ .int-tabs label[for="int-sofa"],
#int-hanger:checked   ~ .int-tabs label[for="int-hanger"],
#int-table:checked  ~ .int-tabs label[for="int-table"],
#int-chair:checked  ~ .int-tabs label[for="int-chair"],
#int-woodshelf:checked  ~ .int-tabs label[for="int-woodshelf"],
#int-mirror:checked  ~ .int-tabs label[for="int-mirror"]{
  color:var(--text); border-bottom-color:var(--accent);
}
#int-interior:checked ~ .int-panels .int-interior,
#int-sofa:checked  ~ .int-panels .int-sofa,
#int-hanger:checked  ~ .int-panels .int-hanger,
#int-table:checked ~ .int-panels .int-table,
#int-chair:checked ~ .int-panels .int-chair,
#int-woodshelf:checked ~ .int-panels .int-woodshelf,
#int-mirror:checked ~ .int-panels .int-mirror{ display:block; }

/* ===== スマホ（<=600px）：中カテゴリタブもカードもスワイプ表示 ===== */
@media (max-width:600px){

    .catalog{ width:100%;}

  /* 中カテゴリのタブ列は横スクロール（既定クラス .tabs-row でOK） */

  /* カードは横スワイプ（scroll-snap） */
  .grid{
    display:flex; gap:12px; overflow-x:auto; padding:0 2px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .grid .card{
    flex:0 0 72vw;              /* 1.3枚見える幅（好みで 88vw/60vw に調整） */
    scroll-snap-align:start;
  }
  .grid::-webkit-scrollbar{ height:6px; }
}

/* スマホはタブを横スワイプ＆重なり防止 */
@media (max-width: 600px){
  /* タブ列を横スクロールに最適化 */
  .tabs-row{
    justify-content: flex-start;      /* 左から並べてスワイプ */
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;                 /* 折り返し禁止（重なり防止） */
    -webkit-overflow-scrolling: touch; /* 慣性スクロール */
    scroll-snap-type: x proximity;     /* 止まりやすくする（任意） */
    gap: 6px;                          /* モバイルは少し詰める */
    padding: 8px 10px 12px;            /* お好みで微調整 */
  }

  /* 各タブを縮まない要素に（重なり・潰れ防止） */
  .tabs-row .tab-btn{
    flex: 0 0 auto;        /* 幅を自動確保して縮ませない */
    white-space: nowrap;   /* 文字を1行で */
    scroll-snap-align: start;
    font-size: 14px;       /* 文字を少し小さめに（任意） */
    padding: 8px 12px;     /* 余白をやや小さく（任意） */
  }

  /* 見た目の改善（任意）：端をフェードして “続きがある” 感を演出 */
  .tabs-row{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
}

/* --- 大カテゴリ（スマホ時も中央寄せ） --- */
@media (max-width: 600px){
  .tabs-row.cat-tabs{
    justify-content: center;   /* ← 左寄せではなく中央に */
    overflow-x: visible;       /* 横スクロールを無効化（中央寄せに不要） */
    flex-wrap: wrap;           /* 折り返しOK（中央揃えで整列） */
    padding: 10px 0 16px;
  }

  /* 大カテゴリのタブボタン */
  .tabs-row.cat-tabs .tab-btn{
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 15px;
  }
}