@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: 5px;
  }
}
@media (max-width: 767px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}
@media (min-width: 751px) {
  /* 親（カルーセル）自体は全幅。必要なら max-width は外側ラッパで管理 */
  .swiper {
    width: 100%;
    height: auto;
    /* ← ここはautoの方が伸縮に素直 */
    /* max-width: 1683px;  // ページ側のコンテナで制御する場合は未指定 */
    margin-inline: auto;
  }
  /* スライドは中央寄せで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;
    /* ← 541px上限を撤廃 */
    height: auto;
    /* ← 100%だと縦が歪むのでauto */
    -o-object-fit: contain;
       object-fit: contain;
    /* coverだとトリミングされるなら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;
  }
  .swiper-button-next,
  .swiper-button-prev {
    padding: 0 50px;
    color: #434343;
    font-weight: bold;
  }
}
@media (min-width: 751px) and (min-width: 751px) {
  /* 親（カルーセル）自体は全幅。必要なら max-width は外側ラッパで管理 */
  .swiper {
    width: 100%;
    height: auto;
    /* ← ここはautoの方が伸縮に素直 */
    /* max-width: 1683px;  // ページ側のコンテナで制御する場合は未指定 */
    margin-inline: auto;
  }
  /* スライドは中央寄せで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);
  }
  /* ★ 画像の“固定上限”と“height:100%”をやめる → 親幅に追従 */
  .swiper-slide img {
    display: block;
    width: 100%;
    max-width: none;
    /* ← 541px上限を撤廃 */
    height: auto;
    /* ← 100%だと縦が歪むのでauto */
    -o-object-fit: contain;
       object-fit: contain;
    /* coverだとトリミングされるなら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;
  }
  .swiper-button-next,
  .swiper-button-prev {
    padding: 0 2%;
    color: #434343;
    font-weight: bold;
  }
}/*# sourceMappingURL=slide.css.map */