@charset "UTF-8";

body {
  overflow-x: hidden;
}

/* ===================================================
   スライダー全体を囲むセクション
   =================================================== */

/* 【基本設定】1200px以下の端末（iPad・タブレット・縮めたウィンドウ） */
.slider-section {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  /* 1200px以下では横はみ出しを確実に防ぐ */
}

/* 【大画面設定】1201px以上のPCモニターのみ親要素を突き破る */
@media screen and (min-width: 1201px) {
  .slider-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: visible;
  }
}

/* ===================================================
   Swiper本体
   =================================================== */
.swiper {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  /* 基本は隠す */
}

/* 1201px以上のPC大画面時のみ左右チラ見せを有効化 */
@media screen and (min-width: 1201px) {
  .swiper {
    overflow: visible;
  }
}

/* ===================================================
   スライド（バナー）の幅
   =================================================== */
.swiper-slide {
  /* 幅が潰れないようにしっかり確保 */
  width: 80% !important;
  max-width: 900px;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.5;
  transform: scale(0.9);
}


.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===================================================
  矢印ボタン（左右共通）
  =================================================== */
.swiper-button-prev,
.swiper-button-next {
  color: rgba(100, 100, 100, 0.5);
  left: auto;
  right: auto;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 18px;
  font-weight: bold;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: rgba(100, 100, 100, 0.7);
}

/* 左矢印ボタン：画面中央から左へ600px（1200px幅の左端付近） */
.swiper-button-prev {
  /* 1200px以下の端末では画面左端（10px余白）に吸着、1200px以上では中央から-580pxの位置に固定 */
  left: max(10px, calc(50% - 600px + 20px)) !important;
}

/* 右矢印ボタン：画面中央から右へ600px（1200px幅の右端付近） */
.swiper-button-next {
  /* 1200px以下の端末では画面右端（10px余白）に吸着、1200px以上では中央から+580pxの位置に固定 */
  right: max(10px, calc(50% - 600px + 20px)) !important;
}

/* ===================================================
   ページネーション（ドットインジケーター）
   =================================================== */
.swiper-pagination-bullet {
  background-color: #666666;
  opacity: 0.3;
  width: 10px;
  height: 10px;
  margin: 0 5px !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.swiper-pagination-bullet-active {
  background-color: #666666;
  opacity: 0.75;
  transform: scale(1.1);
}