@charset "utf-8";
header.fix { position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; }
#mv { position: relative; }
#mv .swiper-vision { position: relative; }
#mv .swiper-slide-img { width: 100%; height: 100vh; }

@media screen and (max-width: 899px) {
	.swiper-slide-img01 { background-image:url("../img/common/slide01_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img02 { background-image:url("../img/common/slide02_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img03 { background-image:url("../img/common/slide03_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img04 { background-image:url("../img/common/slide04_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img05 { background-image:url("../img/common/slide05_sp.jpg"); background-size: cover; background-position: center; }
}
@media screen and (min-width: 900px) {
	.swiper-slide-img01 { background-image:url("../img/common/slide01_pc.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img02 { background-image:url("../img/common/slide02_pc.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img03 { background-image:url("../img/common/slide03_pc.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img04 { background-image:url("../img/common/slide04_pc.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img05 { background-image:url("../img/common/slide05_pc.jpg"); background-size: cover; background-position: center; }
}

#mv .mainCopy { position: absolute; top: 30%; left: 50%; transform: translate(-50%); -webkit-transform: translate(-50%); -ms-transform: translate(-50%); z-index: 10; background: #1c1227; padding: 2% 4%; }
#mv .mainCopy h2 { text-align: center; color: #fff; }
#mv .mainCopy h3 { text-align: center; color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 1.2rem; opacity: 0.1; margin-bottom: 10px; }
#mv .mainCopy .border-solid { border-bottom: 1px solid #fff; margin-bottom: 10px; }
#mv .mainCopy p { text-align: center; color: #fff; margin-bottom: 0px; font-size: 0.9rem; }

@media screen and (max-width: 599px) {
	#mv .mainCopy { position: absolute; top: 40%; padding: 4% 6%; }
	#mv .mainCopy h2 { width: 80px; margin: 0 auto; }
	#mv .mainCopy h3 { font-size: 0.7rem; margin-bottom: 5px; }
	#mv .mainCopy p { font-size: 0.5em; }
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#mv .mainCopy { position: absolute; top: 40%; padding: 2% 4%; }
	#mv .mainCopy h2 { width: 100px; margin: 0 auto; }
	#mv .mainCopy h3 { font-size: 0.8rem; margin-bottom: 5px; }
	#mv .mainCopy p { font-size: 0.7rem; }
}
@media screen and (min-width: 900px) and (max-width: 1079px) {
	#mv .mainCopy { position: absolute; top: 30%; padding: 2% 2%; }
	#mv .mainCopy h2 { width: 120px; margin: 0 auto; }
	#mv .mainCopy h3 { font-size: 0.9rem; margin-bottom: 5px; }
	#mv .mainCopy p { font-size: 0.8rem; }
}
@media screen and (min-width: 1080px) and (max-width: 1199px) {
	#mv .mainCopy { position: absolute; top: 30%; padding: 2% 2%; }
	#mv .mainCopy h2 { width: 200px; margin: 0 auto; }
	#mv .mainCopy h3 { font-size: 1.0rem; margin-bottom: 5px; }
	#mv .mainCopy p { font-size: 0.9rem; }
}
@media screen and (min-width: 1200px) and (max-width: 1479px) {
	#mv .mainCopy { position: absolute; top: 30%; padding: 2% 2%; }
	#mv .mainCopy h2 { width: 200px; margin: 0 auto; }
	#mv .mainCopy h3 { font-size: 1.0rem; margin-bottom: 5px; }
	#mv .mainCopy p { font-size: 0.9rem; }
}
@media screen and (min-width: 1480px) {
}

#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 10s linear 0s 1 normal both;  
}
#mv .swiper-vision .swiper-slide img{
  display: block;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

/* swiper nav */
#mv .swiper-vision .swiper-button-next { position: absolute; top: 96%; right: 1%; }
#mv .swiper-vision .swiper-button-prev { position: absolute; top: 96%; left: 94%; }
#mv .swiper-vision .swiper-button-next:after,#mv .swiper-vision .swiper-button-prev:after { color: rgba(255,255,255,0.7); font-size: 1.5rem; }

@media screen and (max-width: 767px) {
	#mv .swiper-vision .swiper-button-next { position: absolute; top: 96%; right: 1%; }
	#mv .swiper-vision .swiper-button-prev { position: absolute; top: 96%; left: 86%; }
}


#mv .swiper-pagination-bullet { border-radius: 0px; width: 50px; height: 2px; background: #fff; }


/*-- Scroll Down -------------------------------------------------------------*/
.scrolldown { position:absolute; left:4%; bottom:10px; height:200px; z-index: 100; }
.scrolldown span { position: absolute; left:-12px; top: -35px; color: rgba(255,255,255,0.7); font-size: 0.9rem; letter-spacing: 0.05em; font-family:'Roboto Condensed', sans-serif; font-weight:bold; writing-mode: vertical-rl; }
.scrolldown::after{ content: ""; position: absolute; top: 0; width: 1px; height: 200px; background: rgba(255,255,255,0.7); animation: barlongsize 1.4s ease-in-out infinite; opacity:0.7; }
@media screen and (max-width: 767px) {
	.scrolldown { position:absolute; left:10%; bottom:110px; height:50px; }
	.scrolldown span{ position: absolute; left:0%; top: 0px; font-size: 0.7rem; letter-spacing: 0.05em; }
	.scrolldown ::after{ position: absolute; top: 0; left: 7px; width: 1px; height: 50px; }
}
@keyframes barlongsize {
  0%{
    height:0; top:0; opacity: 0;
  }
  30%{
    height:100px; opacity: 1;
  }
  100%{
    height:0; top:200px; opacity: 0;
  }
}