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

#mv { width: 100%; height: 100vh; overflow-y: hidden; }
#mv .swiper-vision { position: relative; 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 { background:rgba(245,245,238,0.8) ; display: block;  }
#mv.mv02 .swiper-slide-active.swiper-slide-vision { background:rgba(245,245,238,0.7) ; display: block;  }
#mv.mv03 .swiper-slide-active.swiper-slide-vision { background:rgba(245,245,238,0.0) ; display: block;  }

#mv .video { min-width: 100%; min-height: 100vh; position: absolute; top: 0; left: 0; z-index: 0; border: none; background: none; }
/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  #mv .video { width: 105%; top: 50%; transform: translateY(-50%); }
}
/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
	#mv .video { height: 100vh; height: 100%; top: 50%; transform: translateY(-50%); }
}
@media screen and (max-width: 899px) {
	#mv .video { height: 100vh; height: 100%; top: 50%; transform: translateY(-50%); }
}
@media screen and (min-width: 600px) and (max-width: 960px) {
	#mv .video { top: 50%; left: 50%; transform: translate(-50%,-50%); }
}

#mv .swiper-vision .swiper-slide-active.swiper-slide-vision video,
#mv .swiper-vision .swiper-slide-duplicate-active.swiper-slide-vision video,
#mv .swiper-vision .swiper-slide-prev.swiper-slide-vision video {
  animation: zoomUp 6s linear 0s 1 normal both;  
}
#mv .swiper-vision .swiper-slide video{
  display: block;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}