/* ========================================
  main visual
======================================== */

.main-visual {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* ========================================
  mask
======================================== */

.mv-mask {
  position: relative;
  overflow: hidden;
}

/*
  白レイヤー
*/
.mv-mask::before {
  content: "";

  position: absolute;
  inset: 0;

  background: #fff;

  z-index: 20;

  transform: translate3d(0, 0, 0);
}

/*
  黒帯
*/
.mv-mask::after {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: #1a1a1a;

  z-index: 30;

  transform: translate3d(-101%, 0, 0);

  will-change: transform;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/*
  白レイヤーを消す
*/
.mv-mask.is-start::before {
  animation: mvWhite 2s cubic-bezier(0.78, 0.07, 0, 1) forwards;
}

/*
  黒帯移動
*/
.mv-mask.is-start::after {
  animation: mvMask 2s cubic-bezier(0.78, 0.07, 0, 1) forwards;
}

/* ========================================
  swiper
======================================== */

.swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  opacity: 0;
  aspect-ratio: inherit;
}

.swiper.is-visible {
  opacity: 1;
}

.swiper-wrapper,
.swiper-slide {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  overflow: hidden;

  transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ========================================
  image
======================================== */

.swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.12) translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
}

/* ========================================
  animation
======================================== */

.swiper-slide-active img {
  animation: mvZoom 8s linear forwards;
}

.swiper-slide:not(.swiper-slide-active) img {
  transform: scale(1) translateZ(0);
  animation: none;
}

/* ========================================
  keyframes
======================================== */

@keyframes mvMask {
  0% {
    transform: translate3d(-101%, 0, 0);
  }

  50% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(101%, 0, 0);
  }
}

@keyframes mvZoom {
  0% {
    transform: scale(1.12) translateZ(0);
  }

  100% {
    transform: scale(1) translateZ(0);
  }
}

@keyframes mvWhite {
  0% {
    transform: translate3d(0%, 0, 0);
  }

  100% {
    transform: translate3d(101%, 0, 0);
  }
}

/* ========================================
  pagination
======================================== */

.mv-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-top: 30px;
  @media screen and (max-width: 960px) {
    gap: 8px;
    padding-top: 20px;
  }
}

.mv-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(223, 223, 223, 1);
  opacity: 1;
  cursor: pointer;
  transition:
    opacity 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
  display: block;
  @media screen and (max-width: 960px) {
    width: 9px;
    height: 9px;
  }
}

.mv-pagination .swiper-pagination-bullet-active {
  background: rgba(26, 26, 26, 1);
  opacity: 1;
}