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

#mv { width: 100%; height: 100vh; overflow-y: hidden; }
#mv .swiper-vision { position: fixed; z-index: 2; background: none; }
#mv .swiper-slide-img { width: 100%; height: 100vh; }

#mv .swiper-slide-vision { display: none;  }
#mv .swiper-slide-active.swiper-slide-vision { display: block;  }

@media screen and (max-width: 899px) {
	#mv .in-bg-img { position: absolute; bottom: 5vh; left: 0; right: 0; width: 90%; margin: 0 auto; height: 60vh; overflow: hidden; border-radius: 8px; }
	#mv .in-bg-img .swiper-slide-img { background-size: cover; background-position: center; height: 100%; }
	.swiper-slide-img01 { background-image:url("../img/common/slide-mv01_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img02 { background-image:url("../img/common/slide-mv02_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img03 { background-image:url("../img/common/slide-mv03_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img04 { background-image:url("../img/common/slide-mv04_sp.jpg"); background-size: cover; background-position: center; }
}
@media screen and (max-width: 390px) {
	#mv .in-bg-img { height: 60vh; }
}
@media screen and (min-width: 900px) {
	#mv .in-bg-img { position: absolute; top: 15vh; right: 0; width: 70%; height: 70vh; overflow: hidden; border-radius: 8px 0 0 8px; }
	#mv .in-bg-img .swiper-slide-img { background-size: cover; background-position: center; height: 100%; }
	#mv .in-bg-img .swiper-slide-img01 { background-image:url("../img/common/slide-mv01.jpg"); }
	#mv .in-bg-img .swiper-slide-img02 { background-image:url("../img/common/slide-mv02.jpg"); }
	#mv .in-bg-img .swiper-slide-img03 { background-image:url("../img/common/slide-mv03.jpg"); }
	#mv .in-bg-img .swiper-slide-img04 { background-image:url("../img/common/slide-mv04.jpg"); }
}
#mv .swiper-vision .swiper-slide-active .swiper-slide-img,
#mv .swiper-vision .swiper-slide-duplicate-active .swiper-slide-img,
#mv .swiper-vision .swiper-slide-prev .swiper-slide-img{
  animation: zoomUp 7s linear 0s 1 normal both;  
}
#mv .swiper-vision .swiper-slide img{
  display: block;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

#mv .swiper-slide-active,#mv .swiper-slide-duplicate-active,#mv .swiper-slide-prev { overflow: hidden; }

#mv .swiper-slide-active .open-cartain,#mv .swiper-slide-duplicate-active .open-cartain,#mv .swiper-slide-prev .open-cartain,
#mv .swiper-slide-active .open-cartain02,#mv .swiper-slide-duplicate-active .open-cartain02,#mv .swiper-slide-prev .open-cartain02 {
	position: absolute; top: 0; left: 0; margin: 0 auto; width: 100%; height: 100vh;
}
#mv .swiper-slide-active .open-cartain,#mv .swiper-slide-duplicate-active .open-cartain,#mv .swiper-slide-prev .open-cartain { 
	z-index: 999; background: #000; animation-duration: 0.8s; animation-delay:1.0s; animation-fill-mode: forwards; animation-name: open-cartain; border-radius: 6px;
}
#mv .swiper-slide-active .open-cartain02,#mv .swiper-slide-duplicate-active .open-cartain02,#mv .swiper-slide-prev .open-cartain02 { 
	z-index: 9999; background: #333; animation-duration: 0.4s; animation-delay: 0.3s; animation-fill-mode: forwards; animation-name: open-cartain02; border-radius: 6px; 
}

@keyframes open-cartain{
	0% {
	  width: 100%;
	  left:0;
	}
	50% {
	  width: 100%;
	}
	100% {
	  width: 0%;
	  left: 100%;
	}
}
@keyframes open-cartain02{
0% {
  width: 100%;
  left:0;
}
50% {
  width: 100%;
}
100% {
  width: 0%;
  left: 100%;
}
}