/* ===== MV ===== */
.mv {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.mvInner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ===== SCROLL 表示 ===== */
.mvScroll {
  position: absolute;
  bottom: 4rem;
  left: 4rem;
  z-index: 10;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px 0;
}

.mvScrollEn {
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--font-poppins), Poppins, sans-serif;
  letter-spacing: 0.2em;
  color: rgb(255, 255, 255);
  line-height: 1;
}

/* ===== Splide カスタム ===== */
.mvSlider {
  width: 100%;
  height: 100%;
}

.mvSlider .splide__track {
  width: 100%;
  height: 100%;
}

.mvSlider .splide__list {
  width: 100%;
  height: 100%;
}

.mvSlider .splide__slide {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* スライド背景 */
.slideBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(28, 44, 67);
}

/* スライド画像 */
.slideImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.slideImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== プログレスバー ===== */
.progressWrap {
  position: absolute;
  bottom: 4rem;
  right: 4rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0 12px;
}

.progressInner {
  display: flex;
  align-items: center;
  gap: 0 12px;
}

.splideToggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgb(255, 255, 255);
}

.splideToggle .splide__toggle__pause {
  display: none;
}

.splideToggle.is-active .splide__toggle__play {
  display: none;
}

.splideToggle.is-active .splide__toggle__pause {
  display: block;
}

.splideProgress {
  width: 120px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.splideProgressBar {
  height: 100%;
  width: 0%;
  background-color: rgb(255, 255, 255);
  transition: width 0.1s linear;
}

/* ===== タブレット（〜1024px）===== */
@media screen and (max-width: 1024px) {
  .mv {
    min-height: 500px;
  }
}

/* ===== モバイル（〜767px）===== */
@media screen and (max-width: 767px) {
  .mv {
    padding-top: 14.9333vw;
    min-height: auto;
    height: 100svh;
  }

  .mvInner {
    margin-left: 0;
    width: 100%;
  }

  .mvScroll {
    bottom: 8vw;
    left: 4vw;
  }

  .mvScrollEn {
    font-size: 2.66667vw;
  }

  .progressWrap {
    bottom: 8vw;
    right: 4vw;
  }
}

/* ===== 大画面（1601px 以上）===== */
@media print, screen and (min-width: 1601px) {
  .mv {
    max-width: 1920px;
    margin: 0 auto;
  }
}