/* ==========================================
   タブ ＆ ギャラリー完全版 2025-06-16
   ========================================== */

/* ---------- タブメニュー ---------- */
.bike-tab-menu{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0;padding:0;list-style:none;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.bike-tab-menu li{margin:0;padding:0;}
.bike-tab-menu li a{
  display:block;width:100%;
  padding:14px 0;
  text-align:center;
  font-size:16px;
  color:#999;
  text-decoration:none;
  transition:color .2s,font-weight .2s;
}
.bike-tab-menu li a.active{
  color:#111;font-weight:700;
}

/* ---------- 背景下線 ＋ アクティブライン ---------- */
.bike-tab-underline{
  position:relative;
  height:2.1px!important;margin-bottom:20px;
  background:none; 
　overflow:hidden;
}
.bike-tab-underline span{
  content:"";
  position:absolute;top:0;left:0;
  height:2.1px!important;background:#111;
  transition:left .3s,width .3s;
}

/* ---------- タブコンテンツ切替 ---------- */
.bike-tab-content{display:none;}
.bike-tab-content.active{display:block;}
.bike-tabs{
  position:relative;
  left:50%;                 /* 画面中央を基準点に */
  width:fit-content;        /* 見えているぶんだけ幅を縮める */
  transform:translateX(-50%); /* ← JS で `calc(-50% - halfGap)` に上書き */
}


/* ---------- ギャラリー 4 列 ---------- */

.bike-gallery.grid-4col{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px;
　box-sizing:border-box; 
}
@media(max-width:768px){
  .bike-gallery.grid-4col{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
	 .bike-item{
    padding:0 !important;
    transition:none;           
  }
  .bike-item:hover{
    padding:0 !important;     
  }

  /* ② ホバー拡大なし（タッチ端末で無意味なので） */
  .bike-item img.bike-thumb,
  .bike-item:hover img.bike-thumb{
    transform:none !important;
    transition:none !important;
  }
}

/* ---------- サムネイル ---------- */
.bike-item{
  position:relative;
  aspect-ratio:4/3;     
  padding:10px;               
  box-sizing:border-box;
  background:none;
  transition:padding .3s ease;  /* 余白をアニメーション */
  overflow:hidden;
}
.bike-item:hover{padding:0;}
.bike-item img.bike-thumb{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.bike-item:hover img.bike-thumb{transform:scale(1.02);}

/* ---------- スタンプ ---------- */
.new-arrival-stamp{
  position:absolute;top:16px;left:16px;
  width:90px;z-index:2;pointer-events:none;
}
.sold-out-stamp{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:60%;max-width:200px;aspect-ratio:4/3;
  object-fit:contain;z-index:3;pointer-events:none;
}
.bike-sold-out{opacity:.3;}

/* ---------- 装飾リセット ---------- */
.bike-tab-menu a,
.bike-tab-menu a:visited,
.bike-tab-menu a:hover,
.bike-tab-menu a:focus,
.bike-tab-menu a:active{
  text-decoration:none!important;
}