/* -----------------------------
       カルーセルのスタイル
    ----------------------------- */
    body {
      margin: 0;
      padding: 50px 0;
      background-color: #f9f9f9;
    }

    .swiper {
      width: 100%;
      /* 上:影用30px / 左右:0 / 下:ドットと影用に60px */
      padding: 30px 0 60px 0; 
      overflow: hidden;
      position: relative;
    }

    /* --- スライドの基本設定 --- */
    .swiper-slide {
      width: 1000px; /* PCでの最大幅 */
      max-width: 80%; /* 画面幅が狭い場合でも必ず両端が見切れるようにする */
      opacity: 0.4; /* 見切れている部分の透過具合 */
      transition: opacity 0.4s ease; /* ふんわり透過を切り替える */
    }

    /* 真ん中（メイン）のスライドは透過しない */
    .swiper-slide-active {
      opacity: 1;
    }

    /* リンク要素をブロック化 */
    .swiper-slide a {
      display: block;
      width: 100%;
      height: 100%;
      text-decoration: none;
    }

    /* 画像の設定 */
    .swiper-slide img {
      width: 100%;
      height: auto;
      display: block;
      aspect-ratio: 1000 / 450; /* PC用のアスペクト比 */
      object-fit: cover;
      border-radius: 15px;
      
      /* 画像の周りに光彩（影）をつける */
      box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3); 
    }

    /* --- ★追加：左右のナビゲーションボタン（矢印） --- */
    .swiper-button-prev,
    .swiper-button-next {
      width: 50px; /* 矢印画像の幅 */
      height: 50px; /* 矢印画像の高さ */
      z-index: 10;
      margin-top: -30px; /* 上下中央の位置を微調整（ドットの余白分上にズラす） */
    }

    /* Swiperのデフォルトの青い矢印アイコンを消す */
    .swiper-button-prev::after,
    .swiper-button-next::after {
      display: none;
    }

    /* 左矢印の設定 */
    .swiper-button-prev {
      background-image: url('https://mywineclub.com/excludes/wine/top/img/pc/arrow_left2.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      /* メイン画像（1000pxの半分=500px）の少し外側に配置。画面が狭いときは画面端から10pxに固定 */
      left: max(10px, calc(49% - 540px));
    }

    /* 右矢印の設定 */
    .swiper-button-next {
      background-image: url('https://mywineclub.com/excludes/wine/top/img/pc/arrow_right2.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      /* メイン画像の少し外側に配置 */
      right: max(10px, calc(49% - 540px));
    }

    /* --- ページネーション（ドット）のデザイン --- */
    .swiper-pagination {
      bottom: 15px !important;
    }
    .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      background: #ccc;
      opacity: 1;
      margin: 0 6px !important;
      transition: all 0.3s ease;
    }
    .swiper-pagination-bullet-active {
      background: #333;
      width: 10px;
      border-radius: 5px;
    }

    /* --- SP用レスポンシブ（画面幅767px以下） --- */
    @media (max-width: 767px) {
      .swiper-slide {
        width: 640px; /* SPでの最大幅 */
        max-width: 90%; /* スマホ画面でも両端を見切れさせる */
      }
      .swiper-slide img {
        aspect-ratio: 640 / 450; /* SP用のアスペクト比に切り替え */
      }
      
      /* ★追加：SP時の矢印ボタンのサイズと位置調整 */
      .swiper-button-prev,
      .swiper-button-next {
        width: 40px; /* スマホでは少し矢印を小さくする */
        height: 40px;
      }
      .swiper-button-prev {
        /* スマホ用メイン画像（640pxの半分=320px）の少し外側に配置 */
        left: max(5px, calc(50% - 350px));
      }
      .swiper-button-next {
        right: max(5px, calc(50% - 350px));
      }
      
    }
    /* PCのみ表示（821px以上） */
.pc_only {
  display: block;
}
.sp_only {
  display: none;
}

/* スマホのみ表示（820px以下） */
@media screen and (max-width: 820px) {
  .pc_only {
    display: none !important; /* 他のスタイルで表示されないよう!important推奨 */
  }
  .sp_only {
    display: block;
  }
}