/* メインスライダーのスタイル */
    .main-slider {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }

    .main-slider .swiper-slide img {
      width: 100%;
      height: auto;
      display: block;
      vertical-align: bottom;
    }

    /* サムネイルスライダー周辺のスタイル */
    .thumb-slider-container {
      position: relative;
      margin-top: 15px;
      padding: 0 40px; /* ナビボタンのスペース確保 */
    }

    .thumb-slider {
      width: 100%;
    }

    .thumb-slider .swiper-slide {
      width: 20%; /* 画面サイズに合わせて表示数を調整 */
      opacity: 0.5;
      cursor: pointer;
      transition: opacity 0.3s ease;
      border-radius: 4px;
      overflow: hidden;
    }

    .thumb-slider .swiper-slide-thumb-active {
      opacity: 1;
      outline: 2px solid #007aff; /* アクティブ枠線 */
    }

    .thumb-slider .swiper-slide img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* サムネイル用ナビゲーションボタン */
    .thumb-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      background-color: #333;
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .thumb-nav-btn::after {
      font-size: 12px;
      font-weight: bold;
    }

    .thumb-btn-prev {
      left: 0;
    }
    .thumb-btn-prev::after {
      content: '❮';
    }

    .thumb-btn-next {
      right: 0;
    }
    .thumb-btn-next::after {
      content: '❯';
    }
/* スマホ表示時のスライダー高さ・デザイン調整 */
@media screen and (max-width: 767px) {
  /* スマホ用の矢印が大きすぎる場合は小さく調整 */
  .main-slider .swiper-button-prev::after,
  .main-slider .swiper-button-next::after {
    font-size: 24px;
  }
}