@charset "UTF-8";
@media (max-width: 750px) {
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    background: #fdffd8;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: 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: 5px;
    height: min(3.3333333333vw, 25px) !important;
    overflow: hidden !important;
  }
  /* スクロールバーのつまみ（ドラッグ部分） */
  .swiper-scrollbar-drag {
    background: #434343;
    /* つまみの色 */
    border-radius: min(5px, 0.6666666667vw);
  }
  /* 768px以下でも矢印を表示 */
  .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");
  }
}
@media (max-width: 425px) {
  .swiper {
    /* 矢印が voice 画像に重ならないよう左右に余白 */
    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 画像に重ならないよう左右に余白 */
    padding-left: min(100px, 13.3333333333vw);
    padding-right:min(100px, 13.3333333333vw);
    /* 矢印の縦位置（SwiperのCSS変数で確実に効かせる） */
    --swiper-navigation-top-offset: 42%;
  }
  /* スライドは中央寄せでOK */
  .swiper-slide {
    text-align: center;
    background: #fdffd8;
    /* 既存を踏襲 */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: 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;
    height: 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: min(5px, 0.6666666667vw);
  }
  .swiper-button-next,
  .swiper-button-prev {
    top: 42% !important;
    color: #434343;
    font-weight: bold;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    content: "";
    display: none;
  }
  .swiper-button-next,
  .swiper-button-prev {
    width: min(82px, 10.9333333333vw);
    height: min(82px, 10.9333333333vw);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .swiper-button-next {
    background-image: url("../img/pc/arrow_next.png");
  }
  .swiper-button-prev {
    background-image: url("../img/pc/arrow_prev.png");
  }
}