/* arguments inittial */
/* site style */
/* [ writing-mode ]
-------------------------------------------------*/
/* [ easy breakpoint ]
-------------------------------------------------*/
@keyframes scrollBackground01 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 123.13323572vw;
  }
}

@keyframes scrollBackground02 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -123.13323572vw;
  }
}

@keyframes scrollBackground03 {
  0% {
    background-position: 0 14.78770132vw;
  }
  100% {
    background-position: 0 calc(123.13323572vw + 14.78770132vw);
  }
}

@keyframes scrollBackground04 {
  0% {
    background-position: 0 -14.78770132vw;
  }
  100% {
    background-position: 0 calc(-123.13323572vw - 14.78770132vw);
  }
}

@keyframes scrollBackground05 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 123.13323572vw;
  }
}

@keyframes scrollBackground06 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -123.13323572vw;
  }
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.mv {
  width: 100%;
  height: 100vh;
  max-height: 60vw;
  overflow: hidden;
  position: relative;
  background: transparent;
  background-color: #1F1F1F;
}

@media (max-width: 767px) {
  .mv {
    max-height: 150vw;
    max-height: 150svw;
    height: 100vh;
    height: 100svh;
  }
}

@media only screen and (max-width: 540px) {
  .mv {
    max-height: 250vw;
    max-height: 250svw;
  }
}

.mv .mv__bg {
  transform: rotate(21deg) translate(-12vw, -12vw);
  transform-origin: center;
  width: 111.34699854vw;
  margin: 0 -5.67349927vw;
  display: flex;
  gap: 1.3909224vw;
  justify-content: center;
}

@media (max-width: 767px) {
  .mv .mv__bg {
    transform: rotate(21deg) translate(0%, 10%) scale(1.75);
  }
}

@media only screen and (max-width: 540px) {
  .mv .mv__bg {
    transform: rotate(21deg) translate(10%, 30%) scale(2.5);
  }
}

.mv .mv__bg__roll {
  width: 17.42313324vw;
  height: 123.13323572vw;
  background-size: 17.42313324vw 123.13323572vw;
  background-position: 0 0;
  opacity: 0.15;
}

.mv .mv__bg__roll.roll01 {
  background-image: url("../images/mv-roll01.png");
  animation: scrollBackground01 40s linear infinite;
}

.mv .mv__bg__roll.roll02 {
  background-image: url("../images/mv-roll02.png");
  animation: scrollBackground02 40s linear infinite;
}

.mv .mv__bg__roll.roll03 {
  background-image: url("../images/mv-roll03.png");
  animation: scrollBackground03 40s linear infinite;
}

.mv .mv__bg__roll.roll04 {
  background-image: url("../images/mv-roll04.png");
  animation: scrollBackground04 40s linear infinite;
}

.mv .mv__bg__roll.roll05 {
  background-image: url("../images/mv-roll05.png");
  animation: scrollBackground05 40s linear infinite;
}

.mv .mv__bg__roll.roll06 {
  background-image: url("../images/mv-roll06.png");
  animation: scrollBackground06 40s linear infinite;
}







/*# sourceMappingURL=maps/top.css.map */