@charset "UTF-8";
/* CSS Document */

body{
	background: url("../images/top_MV/bg.png");
	background-repeat: repeat;
	background-size: 100%;
}

.slider {
  position: relative;
}
.slider_fade {
  width: 100%;
  position: relative;
	margin:0;
	z-index: 1;
	padding: 0 !important;
	height: 70vw
}

.slider_fade > li {
  position: absolute;
  z-index:10;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: anime_slider_fade 6s 0s;
  animation-fill-mode: forwards;
}
.slider_fade li:nth-of-type(2) {
  animation-delay: 1s;
}
.slider_fade li:nth-of-type(3) {
  animation-delay: 2s;
}
.slider_fade li:nth-of-type(4) {
  animation-delay: 3s;
}
.slider_fade li:nth-of-type(5) {
  animation-delay: 4s;
}
.slider_fade li:nth-of-type(6) {
  animation-delay: 5s;
}

@keyframes anime_slider_fade {
  0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% { opacity: 1 }
}



.slider_fade_2 {
  width: 100%;
  position: absolute;
	margin: 0;
	z-index: 2;
	top:0;
	padding: 0 !important
}

.slider_fade_2 > li {
  position: absolute;
  z-index:10;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: anime_slider_fade_2 7s 0s;
  animation-fill-mode: forwards;
}
.slider_fade_2 li:nth-of-type(2) {
  animation-delay: 1s;
}
.slider_fade_2 li:nth-of-type(3) {
  animation-delay: 2s;
}
.slider_fade_2 li:nth-of-type(4) {
  animation-delay: 3s;
}
.slider_fade_2 li:nth-of-type(5) {
  animation-delay: 4s;
}
.slider_fade_2 li:nth-of-type(6) {
  animation-delay: 5s;
}
.slider_fade_2 li:nth-of-type(7) {
  animation-delay: 6s;
}

@media screen and (min-width:783px) {
.slider_fade_2 li:nth-of-type(7) {
  animation-delay: 5s;
  width: 30%;
	margin: 53% auto 0;
	left: 0;
	right:0;
	list-style: none;
	
}
.slider_fade_2 li:nth-of-type(2) {
  width: 30%;
	margin: 64% auto 0;
	left: 0;
	right:0;
	list-style: none;
	
}
}
@media screen and (max-width:782px) {
 .slider_fade_2 li:nth-of-type(2) {
  width: 90%;
	margin: 100% auto 0;
	left: 0;
	right:0;
	list-style: none;
}
.slider_fade_2 li:nth-of-type(7) {
  animation-delay: 5s;
	width: 90%;
	margin: 122% auto 0;
	left: 0;
	right:0;
	list-style: none
}
.slider_fade {
  width: 100%;
  position: relative;
	margin:0;
	z-index: 1;
	padding: 0 !important;
	height: 130vw;
}
}


@keyframes anime_slider_fade_2 {
  0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% { opacity: 1 }
}



.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
  animation: img-wrap 8s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom:40%;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top:45%;
  z-index: 1;
}
@media screen and (max-width:782px) {
.img-wrap:before {
  animation: img-wrap 8s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom:43%;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top:30%;
}
}


@keyframes img-wrap {
  60% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(100%);
  }
}


.MV{
  width:100%;
  position: relative;
	padding: 35% 0
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  animation: image-switch-animation 6.6s infinite;
}

.src1 {
  background-image: url(../images/top_MV/slide03.jpg);
}
.src2 {
  background-image: url(../images/top_MV/slide02.jpg);
}
.src3 {
  background-image: url(../images/top_MV/slide01.jpg);
}
.src4 {
  background-image: url(../images/top_MV/slide02.jpg);
}
.src5 {
  background-image: url(../images/top_MV/slide03.jpg);
}


@media screen and (max-width:782px) {

.MV{
	padding: 50% 0
}
.src1 {
  background-image: url(../images/top_MV/slide03_sp.jpg);
}
.src2 {
  background-image: url(../images/top_MV/slide02_sp.jpg);
}
.src3 {
  background-image: url(../images/top_MV/slide01_sp.jpg);
}
.src4 {
  background-image: url(../images/top_MV/slide02_sp.jpg);
}
.src5 {
  background-image: url(../images/top_MV/slide03_sp.jpg);
}


}



@keyframes image-switch-animation {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  29.5%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 1.4s;
}
.image:nth-of-type(3) {
  animation-delay: 2.8s;
}
.image:nth-of-type(4) {
  animation-delay: 4.2s;
}
.image:nth-of-type(5) {
  animation-delay: 5.6s;
}