/* ===============================
   Top バナースライダー 共通
   =============================== */

.top-banner-slider {
  position: absolute;
  left: 50%;
  bottom: 20px;          /* PC で動画の下寄せ */
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 5;
}

.top-banner-track {
  display: flex;
  align-items: center;
  gap: 20px;             /* バナー間 20px 固定 */
  transition: transform 0.5s ease;
}

.top-banner-slide {
  flex: 0 0 auto;
  cursor: pointer;
}

.top-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ドットナビゲーション */
.top-banner-pagination {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 6;
}

.top-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.top-banner-dot.is-active {
  background: #ffffff;
}

/* ===============================
   PC (768px 以上)
   常に 5 枚表示、幅 1200px 固定
   =============================== */

@media (min-width: 768px) {
  .top-banner-slider {
    width: 1200px;
    bottom: 40px;
  padding-bottom: 36px;
  }

  .top-banner-track {
    gap: 20px;
  }

  /* 1200px 幅の中に 5 枚＋隙間 20px×4 */
  .top-banner-slide {
    width: calc((100% - (20px * 4)) / 5);
    height: calc((100% - (20px * 4)) / 5 * 675 / 1200);  /* 16:9 目安 */
  }
}

@media (min-width: 768px) {
  .top-banner-slider.is-static .top-banner-track {
    justify-content: center;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .top-banner-slider.is-static {
    padding: 0 16px;   /* ← 左右マージン */
    box-sizing: border-box;
  }

  .top-banner-slider.is-static .top-banner-track {
    justify-content: center;
    transform: none !important;
  }

  .top-banner-slider.is-static .top-banner-slide {
    width: auto;
    max-width: calc(50% - 10px); /* gap 20px の半分考慮 */
  }
}

/* ===============================
   SP (767px 以下)
   「中央 1 枚＋左右チラ見せ」
   =============================== */

/* ===============================
   Top バナースライダー 共通
   =============================== */

.top-banner-slider {
  position: absolute;
  left: 50%;
  bottom: 20px;          /* PC で動画の下寄せ */
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 5;
}

.top-banner-track {
  display: flex;
  align-items: center;
  gap: 20px;             /* バナー間 20px 固定 */
  transition: transform 0.5s ease;
}

.top-banner-slide {
  flex: 0 0 auto;
  cursor: pointer;
}

.top-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ドットナビゲーション */
.top-banner-pagination {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 6;
}

.top-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.top-banner-dot.is-active {
  background: #ffffff;
}

/* ===============================
   PC (768px 以上)
   常に 5 枚表示、幅 1200px 固定
   =============================== */

/* ===============================
   Top バナースライダー 共通
   =============================== */

.top-banner-slider {
  position: absolute;
  left: 50%;
  bottom: 20px;          /* PC で動画の下寄せ */
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 5;
}

.top-banner-track {
  display: flex;
  align-items: center;
  gap: 20px;             /* バナー間 20px 固定 */
  transition: transform 0.5s ease;
}

.top-banner-slide {
  flex: 0 0 auto;
  cursor: pointer;
}

.top-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ドットナビゲーション */
.top-banner-pagination {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 6;
}

.top-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.top-banner-dot.is-active {
  background: #ffffff;
}

/* ===============================
   PC (768px 以上)
   常に 5 枚表示、幅 1200px 固定
   =============================== */

@media (min-width: 768px) {
  .top-banner-slider {
    width: 1200px;
    bottom: 10px;
  }

  .top-banner-track {
    gap: 20px;
  }

  /* 1200px 幅の中に 5 枚＋隙間 20px×4 */
  .top-banner-slide {
    width: calc((100% - (20px * 4)) / 5);
    height: calc((100% - (20px * 4)) / 5 * 675 / 1200);  /* 16:9 目安 */
  }
}

/* ===============================
   SP (767px 以下)
   「中央 1 枚＋左右チラ見せ」
   =============================== */

@media (max-width: 767px) {
  .top-banner-slider {
    width: 100%;
    bottom: 140px !important;
    padding: 0px;              /* 左右 10px だけマージン */
    box-sizing: border-box;

    /* ★ ここが重要：高さを固定（16:9） */
    aspect-ratio: 1200 / 675;
  }

  .top-banner-track {
    gap: 20px;
    height: 100%;
  }

  /*
    - スライダー幅 ≒ 画面幅 - 20px
    - スライド幅を 70% にして左右を少しチラ見せ
      → 「50 / 100 / 50」に近い見え方
  */
  .top-banner-slide {
    width: 50%;
  }

  .top-banner-pagination {
    bottom: 35px;
  }
}

/* ===============================
   スライド無効時（2枚以下 / 5枚以下）
   =============================== */

.top-banner-slider.is-static .top-banner-track {
  transition: none;
}

.top-banner-slider.is-static .top-banner-pagination {
  display: none;
}