/* =========================================================
   Lindt TOP Hero / Swiper
   ========================================================= */

/*
 * JavaScript初期化前に全スライドが縦に並ぶことを防止。
 * Swiperクラスが付与されたら解除される。
 */
.js-hero-slider:not(.swiper)
  .js-hero-slider__list
  > .lnt23-top-mv__list__item:not(:first-child) {
  display: none;
}

/* Swiperコンテナ */
.lnt23-top-mv.swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/*
 * 既存CSSの以下はそのまま利用される。
 *
 * .lnt23-top-mv__list__item
 * .lnt23-top-mv__list__bg
 * .lnt23-top-mv__list__item__block
 * .lnt23-top-mv__list__title
 * .lnt23-top-mv__list__text
 */
.lnt23-top-mv .swiper-wrapper {
  margin-bottom: 0;
}

/*
 * PCでは現行と同じ580px。
 * 既存CSSにも同じ指定があるが、Swiper用として明示。
 */
@media screen and (min-width: 768px) {
  .lnt23-top-mv .swiper-slide {
    height: 580px;
  }
}

/* =========================================================
   ページャー
   ========================================================= */

.lnt23-top-mv .swiper-pagination {
  position: absolute;
  z-index: 200;
  top: auto;
  right: auto;
  bottom: 40px;
  left: calc(50% - 640px);
  width: auto;
  margin: 0;
  line-height: 1;
  text-align: left;
  transform: none;
}

/* 768～1279px */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .lnt23-top-mv .swiper-pagination {
    left: 15px;
  }
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  .lnt23-top-mv .swiper-pagination {
    right: 0;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
  }
}

/* BxSliderの白枠8pxドットを再現 */
.lnt23-top-mv .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  margin: 0 8px !important;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  opacity: 1;
  cursor: pointer;
}

/* 選択中 */
.lnt23-top-mv .swiper-pagination-bullet-active {
  background-color: #fff;
}

/* SP時はドット間隔を狭くする */
@media screen and (max-width: 767px) {
  .lnt23-top-mv .swiper-pagination-bullet {
    margin: 0 6px !important;
  }
}

/*
 * --onlineクラスが付く別バリエーションにも対応。
 * 現行CSSのBxSlider指定をSwiperへ置換。
 */
.lnt23-top-mv--online .swiper-pagination {
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .lnt23-top-mv--online .swiper-pagination {
    bottom: 10px;
  }
}

/* キーボードフォーカス */
.lnt23-top-mv .swiper-pagination-bullet:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/*
 * OSで視差・アニメーション軽減が指定されている場合。
 * 自動再生自体は維持し、切替アニメーションのみ短縮。
 */
@media (prefers-reduced-motion: reduce) {
  .lnt23-top-mv .swiper-wrapper {
    transition-duration: 1ms !important;
  }
}