/*
 * 塚口トップのバナースライダー（2026-10-25）
 * 中央のバナーを大きく、左右に前後のバナーを薄く・小さく見せる（B 案）。比率は 16:9。
 * 動きは assets/js/top-banner-slider.js（slick の centerMode）。
 * 背景はチャコールグレー #3a3a3a（2026-10-25 ユーザー指示。ピラティスの画像はなし、真っ黒は重いので A 案）。
 */
.top-banner-slider {
  position: relative;
  padding: 140px 0 150px;
  background-color: #3a3a3a;
  overflow: hidden;
}
.top-banner-slider__track {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}
.top-banner-slider__slide {
  padding: 0 10px;
  box-sizing: border-box;
}
.top-banner-slider__link {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.top-banner-slider__link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.top-banner-slider__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* slick が動く前・バナーが 1 枚だけのとき：1 枚目だけを中央に */
.top-banner-slider__track:not(.slick-initialized) .top-banner-slider__slide {
  display: none;
}
.top-banner-slider__track:not(.slick-initialized) .top-banner-slider__slide:first-child {
  display: block;
  width: 52%;
  margin: 0 auto;
}

/* 中央以外は薄く・小さく */
.top-banner-slider .slick-slide:not(.slick-center) .top-banner-slider__link {
  opacity: 0.45;
  transform: scale(0.9);
}

/* ドット */
.top-banner-slider .slick-dots {
  bottom: -44px;
}
.top-banner-slider .slick-dots li button:before {
  color: #fff;
  font-size: 10px;
  opacity: 0.5;
}
.top-banner-slider .slick-dots li.slick-active button:before {
  color: #fff;
  opacity: 1;
}

/* 矢印（PC のみ。左右のちら見えバナーの上に置く） */
.top-banner-slider .slick-prev,
.top-banner-slider .slick-next {
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.top-banner-slider .slick-prev { left: 3%; }
.top-banner-slider .slick-next { right: 3%; }
.top-banner-slider .slick-prev:hover,
.top-banner-slider .slick-prev:focus,
.top-banner-slider .slick-next:hover,
.top-banner-slider .slick-next:focus {
  background: #fff;
}
.top-banner-slider .slick-prev:before,
.top-banner-slider .slick-next:before {
  color: #333;
  font-size: 28px;
  opacity: 1;
  line-height: 44px;
}

@media (max-width: 768px) {
  .top-banner-slider {
    padding: 80px 0 100px;
  }
  .top-banner-slider__slide {
    padding: 0 6px;
  }
  .top-banner-slider__track:not(.slick-initialized) .top-banner-slider__slide:first-child {
    width: 80%;
  }
  .top-banner-slider .slick-dots {
    bottom: -38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-banner-slider__link {
    transition: none;
  }
}