@charset "UTF-8";
@media (max-width: 750px) {
  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    background: #fdffd8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: min(13.3333333333vw, 100px);
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    max-width: min(72.1333333333vw, 541px);
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  /* スクロールバー全体を中央に配置 */
  .swiper-scrollbar {
    width: min(44vw, 330px) !important;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: min(4.8vw, 36px) !important;
    background: #e1e1e1;
    border-radius: min(5px, 0.6666666667vw);
    height: min(3.3333333333vw, 25px) !important;
    overflow: hidden !important;
  }

  /* スクロールバーのつまみ（ドラッグ部分） */
  .swiper-scrollbar-drag {
    background: #434343;
    /* つまみの色 */
    border-radius: min(5px, 0.6666666667vw);
  }

  /* 768px以下でも矢印を表示（lp04と同じ） */
  .swiper-button-next,
  .swiper-button-prev {
    display: flex !important;
    width: min(50px, 6.6666666667vw);
    height: min(50px, 6.6666666667vw);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #434343;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    content: "";
    display: none;
  }

  .swiper-button-next {
    background-image: url("../img/pc/arrow_next.png");
  }

  .swiper-button-prev {
    background-image: url("../img/pc/arrow_prev.png");
  }
}

/* 425px以下：矢印が voice 画像に重ならないよう左右に余白（lp04と同じ） */
@media (max-width: 425px) {
  .swiper {
    padding-left: min(40px, 9.4vw);
    padding-right: min(40px, 9.4vw);
    --swiper-navigation-top-offset: 42%;
  }
}

@media (min-width: 751px) {
  .swiper {
    width: 100%;
    height: auto;
    margin-inline: auto;
    /* 矢印が voice 画像に重ならないよう左右に余白（lp04と同じ） */
    padding-left: min(100px, 13.3333333333vw);
    padding-right: min(100px, 13.3333333333vw);
    /* 矢印の縦位置（SwiperのCSS変数で確実に効かせる） */
    --swiper-navigation-top-offset: 42%;
  }

  /* スライドは中央寄せ */
  .swiper-slide {
    text-align: center;
    background: #fdffd8;
    /* 既存を踏襲 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: min(13.3333333333vw, 100px);
    width: 88%;
  }

  /* ★ 画像の"固定上限"と"height:100%"をやめる → 親幅に追従 */
  .swiper-slide img {
    display: block;
    width: 100%;
    max-width: none;
    /* ← 541px上限を撤廃 */
    height: auto;
    /* ← 100%だと縦が歪むのでauto */
    -o-object-fit: contain;
    object-fit: contain;
  }

  /* スクロールバーは親幅に連動しやすいように可変にしておくと◎ */
  .swiper-scrollbar {
    width: clamp(200px, 20vw, 330px) !important;
    /* 固定330pxを可変に */
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: min(4.8vw, 36px) !important;
    background: #e1e1e1;
    border-radius: 5px;
    height: min(3.3333333333vw, 25px) !important;
    overflow: hidden !important;
  }

  .swiper-scrollbar-drag {
    border-radius: 5px;
  }

  /* 矢印：lp04と同じ（白コンテンツ左右端・縦位置42%） */
  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    top: 42% !important;
    padding: 0;
    color: #434343;
    font-weight: bold;
    width: 80px;
    height: 147px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -16px;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    content: "";
    display: none;
  }

  .swiper-button-prev {
    left: 16px;
    background-image: url("../img/pc/arrow_prev.png");
  }

  .swiper-button-next {
    right: 16px;
    background-image: url("../img/pc/arrow_next.png");
 
  }
}