@charset "UTF-8";
/* CSS Document */
.spmask {
  display: block;
}

.sponly {
  display: none;
}

@media (max-width: 767px) {
  .spmask {
    display: none;
  }
  .sponly {
    display: block;
  }
}
/*----スライドアニメーション----*/
.main_imgBox {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .main_imgBox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }
}

.main_img {
  z-index: 10;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 36s linear infinite both;
          animation: anime 36s linear infinite both;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-origin: center center;
}

.main_img:nth-of-type(1) {
  background: url("../images/top_mv01.jpg") no-repeat center center;
  background-size: cover;
  -webkit-animation-delay: 0;
          animation-delay: 0;
}

.main_img:nth-of-type(2) {
  background: url("../images/top_mv02.jpg") no-repeat center center;
  background-size: cover;
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}
@media screen and (max-width: 767px) {
  .main_img:nth-of-type(2) {
    background-position: 6%;
  }
}

.main_img:nth-of-type(3) {
  background: url("../images/top_mv03.jpg") no-repeat center center;
  background-size: cover;
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
}

.main_img:nth-of-type(4) {
  background: url("../images/top_mv04.jpg") no-repeat center center;
  background-size: cover;
  -webkit-animation-delay: 18s;
          animation-delay: 18s;
}

.main_img:nth-of-type(5) {
  background: url("../images/top_mv05.jpg") no-repeat center center;
  background-size: cover;
  -webkit-animation-delay: 24s;
          animation-delay: 24s;
}

.main_img:nth-of-type(6) {
  background: url("../images/top_mv06.jpg") no-repeat center center;
  background-size: cover;
  -webkit-animation-delay: 30s;
          animation-delay: 30s;
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
    transform: scale(1.12);
  }
  6% {
    opacity: 1;
    transform: scale(1.08);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  28% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes anime {
  0% {
    opacity: 0;
    transform: scale(1.12);
  }
  6% {
    opacity: 1;
    transform: scale(1.08);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  28% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 0;
    transform: scale(0.96);
  }
}
/*-------Contents------------*/
/*# sourceMappingURL=style.css.map */