/* ==========================================================
   白キャンバスと連動するスライダー設定（バンドページ最適化）
   ========================================================== */

/* 1. スライダー全体のサイズ調整（親の白キャンバスの幅に対して100%にする） */
.swiper {
  width: 100%;
  height: auto;
}

/* 2. メインスライダーとサムネイルスライダーの横幅制限を親に委ねる */
.main-slider, 
.thumb-slider {
  width: 100%;
  max-width: 100%; /* 親である白キャンバスの枠いっぱいに広げる */
  margin: 0;       
}

/* 3. メインスライダーの調整（高さを自動にして、中の画像に引っ張らせる） */
.main-slider {
  width: 100%;
  max-width: 100%;
  height: auto;        /* 枠の高さ固定を完全に廃止 */
  aspect-ratio: auto;  /* 比率の強制指定をやめて自動にする */
  margin-bottom: 10px;
}


/* 4. サムネイルスライダーの調整（高さ固定を解除） */
.thumb-slider {
  height: auto;        /* 👈 60pxの固定を解除して、自動にします */
  box-sizing: border-box;
  padding: 5px 0;
}

/* 5. 【メインスライダー専用】の画像・動画設定（空白を作らず、歪ませない） */
.main-slider .swiper-slide img,
.main-slider .swiper-slide video {
  width: 100%;
  height: auto;        /* これで上下の空白問題は解決したまま */
  display: block;
}

/* 6. 【サムネイルスライダー専用】の画像設定 */
.thumb-slider .swiper-slide img {
  width: 100%;         /* 横幅は枠に100%ピッタリ */
  height: auto;        /* 画像の比率を絶対に崩さない */
  display: block;
}

/* 7. サムネの枠（ここがポイント！） */
.thumb-slider .swiper-slide {
  height: auto;        /* 👈 枠自体の高さも画像に合わせる */
  opacity: 0.4;
  cursor: pointer;
  background-color: #fff;
}

/* 8. 現在選ばれているサムネをクッキリ明るく */
.thumb-slider .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #000;
}