/****************************************
2025/04/30追記 スマホ_商品ページ関連商品
*****************************************/
 /* ▼タブ機能を制御するラジオボタン(非表示にする) */
 .tabbox {
	margin-top:2em;
	text-align:left;
   
}
   .tabbox input { display: none; }

   /* ▼タブ(共通装飾＋非選択状態の装飾) */
   .tab {
      display: inline-block;
      border-width: 1px;
      border-style: solid;
      border-color: black;
      padding: 0.75em 1em;
      color: black;
      font-weight: bold;
	  text-align: center;
   }

   /* ▼タブにマウスポインタが載った際の装飾 */
   .tab:hover {
      cursor: pointer;
   }

   /* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
   input:checked + .tab {
      color: #fff;
      background-color: #222;
      position: relative;
      z-index: 10;
   }

   /* ▼タブの中身(共通装飾＋非選択状態の装飾) */
   .tabcontent_related {
      display: none;
      margin-top: -1px;
      padding: 1em 0;
      position: relative;
      z-index: 0;
   }
   
   /* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
   #tabcheck__related1:checked ~ #tabcontent_related1 ,
   #tabcheck__related2:checked ~ #tabcontent_related2 ,
   #tabcheck__related3:checked ~ #tabcontent_related3 ,
   #tabcheck__related4:checked ~ #tabcontent_related4 ,
   #tabcheck__related5:checked ~ #tabcontent_related5 ,
   #tabcheck__related6:checked ~ #tabcontent_related6 ,
   #tabcheck__related7:checked ~ #tabcontent_related7 ,
   #tabcheck__related8:checked ~ #tabcontent_related8 ,
   #tabcheck__related9:checked ~ #tabcontent_related9 {
      display :  block; 
   }


   
   /* 横スクロール用のラッパー */
.tablist {  
   display: flex;
   overflow-x: auto;
   white-space: nowrap;
   gap: 0.5em;
   padding-bottom: 0.5em;
   -webkit-overflow-scrolling: touch;/* iOSスムーズスクロール  */ 
}
 
 /* タブ1つずつの見た目調整 */
 .tab {
   flex: 0 0 auto; /* 幅固定、縮まない */
   min-width: max-content; /* コンテンツに合わせて幅を確保 */
 }

 /* 選択されたタブに色をつける */
#tabcheck__related1:checked ~ .tablist label[for="tabcheck__related1"],
#tabcheck__related2:checked ~ .tablist label[for="tabcheck__related2"],
#tabcheck__related3:checked ~ .tablist label[for="tabcheck__related3"],
#tabcheck__related4:checked ~ .tablist label[for="tabcheck__related4"],
#tabcheck__related5:checked ~ .tablist label[for="tabcheck__related5"],
#tabcheck__related6:checked ~ .tablist label[for="tabcheck__related6"],
#tabcheck__related7:checked ~ .tablist label[for="tabcheck__related7"],
#tabcheck__related8:checked ~ .tablist label[for="tabcheck__related8"],
#tabcheck__related9:checked ~ .tablist label[for="tabcheck__related9"] {
  background-color: #333;
  color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(0, 0, 0);
}