/* スライダー下バナー3列 */
.c-ct-list {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  /* --- ここでバナー全体の上に余白を追加 --- */
  margin: 30px 0 0 0; /* 上に30pxの余白（スマホ用） */
  padding: 0;
  list-style: none;
}

.c-ct-list__item {
  width: 95%; 
  margin-bottom: 20px; 
  text-align: center; 
}

.c-ct-list__item a {
  display: inline-block;
}

.c-ct-list__item img {
  width: 100%;
  max-width: 400px; 
  height: auto;
  display: block;
}

/* PCの設定：画面幅が768px以上の場合 */
@media screen and (min-width: 768px) {
  .c-ct-list {
    flex-direction: row; 
    justify-content: center; 
    gap: 20px; 
    /* --- PCではもう少し広めに余白を取りたい場合 --- */
    margin-top: 50px; /* 上に50pxの余白 */
  }

  .c-ct-list__item {
    width: auto; 
    margin-bottom: 0; 
  }

  .c-ct-list__item img {
    max-width: 350px; 
  }
}

/* --- スライダー全体のベース設定（スマホ優先） --- */
.mySwiper {
    display: block !important;
    overflow: hidden;
    position: relative;
    
    /* スマホ：画面の両端に余白を作る */
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 30px; 
    
    width: 100%;
    /* PCでの最大幅を制限せず、画面を広く使う */
    max-width: none !important; 
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* 横並びを強制し、高さを商品内容（画像+文字）に合わせる */
.mySwiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important; 
}

/* スライド（各商品）の調整 */
.mySwiper .swiper-slide {
    height: auto !important; 
    display: flex;
    flex-direction: column;
    margin-bottom: 25px; /* スマホ2段表示の時の上下の隙間 */
}

/* 商品画像の設定 */
.mySwiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* 商品名・価格エリア（高さがバラバラでも揃うように調整） */
.p-item-card__info {
    flex-grow: 1;
    padding-top: 10px;
}

/* --- PC用のレスポンシブ微調整（1024px以上） --- */
@media (min-width: 1024px) {
    .mySwiper {
        /* PCでは左右のパディングをなくし、画面幅の95%まで広げる */
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 95%; 
    }
    .mySwiper .swiper-slide {
        margin-bottom: 0; /* PCは1行なので下の隙間は不要 */
    }
}

/* --- 矢印のデザイン（透過白丸＋黒矢印） --- */
.swiper-button-prev,
.swiper-button-next {
    /* 背景：白の70%透過 */
    background-color: rgba(255, 255, 255, 0.7) !important;
    /* サイズ：28px（スマホに合わせた小さめ） */
    width: 28px !important; 
    height: 28px !important;
    border-radius: 50% !important;
    /* 影：控えめに設定 */
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important; 
    z-index: 10;
    
    /* ↓↓↓ ここを修正：矢印の高さを大きく引き上げます ↓↓↓ */
    /* topを `40%` から `25%` に変更しました。これで画像の中央付近になります。 */
    top: 18% !important; 
}

/* 矢印アイコン（黒）のサイズ調整 */
.swiper-button-prev::after,
.swiper-button-next::after {
    color: #000000 !important;
    font-size: 12px !important; /* 丸に合わせて小さく */
    font-weight: bold !important;
}

/* --- 矢印の配置場所（画像に少し被る位置） --- */
/* スマホ時の左右位置 */
@media (max-width: 1023px) {
    .swiper-button-prev { left: 5px !important; }
    .swiper-button-next { right: 5px !important; }
}

/* PC時の修正（画像が大きいので、少し下げる） */
@media (min-width: 1024px) {
    .swiper-button-prev, .swiper-button-next {
        /* PCでは画像が大きいので `top: 40%` に戻して中央に見えるように個別に指定 */
        top: 40% !important;
    }
    .swiper-button-prev { left: 12px !important; }
    .swiper-button-next { right: 12px !important; }
}

/* ホバー（マウスを乗せた時）は少し不透明度を上げる */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
}