/*
 * 店舗トップのバナースライダー（2026-11-04。塚口本店 2026-10-25 と同じ見た目）
 * 中央のバナーを大きく、左右に前後のバナーを薄く・小さく見せる。比率は 16:9。
 * 動きは assets/js/top-banner-slider.js（slick の centerMode）。背景はチャコールグレー #3a3a3a。
 * 各店には slick-theme.css が無いので、丸ボタン・矢印の見た目もここで作る（外部の CDN は読まない）。
 */
.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;
}

/* 注記（管理画面の「注記」。画像の中の注記はスマホで読めないので文字でも出す） */
.top-banner-slider__note {
  margin: 8px 4px 0;
  color: #ddd;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  transition: opacity 0.4s ease;
}

/* 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-slide:not(.slick-center) .top-banner-slider__note {
  opacity: 0;
}

/* ドット（slick-theme の代わり） */
.top-banner-slider .slick-dots {
  position: absolute;
  bottom: -44px;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.top-banner-slider .slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.top-banner-slider .slick-dots li button {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  position: relative;
}
.top-banner-slider .slick-dots li button:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
}
.top-banner-slider .slick-dots li.slick-active button:before {
  opacity: 1;
}
.top-banner-slider .slick-dots li button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* 矢印（PC のみ。左右のちら見えバナーの上に置く。slick-theme の代わり） */
.top-banner-slider .slick-prev,
.top-banner-slider .slick-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%);
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
}
.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:focus-visible,
.top-banner-slider .slick-next:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
/* 矢印の形は線で描く（< と >） */
.top-banner-slider .slick-prev:before,
.top-banner-slider .slick-next:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 3px solid #333;
  border-right: 3px solid #333;
}
.top-banner-slider .slick-prev:before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.top-banner-slider .slick-next:before {
  transform: translate(-70%, -50%) rotate(45deg);
}

@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,
  .top-banner-slider__note {
    transition: none;
  }
}