@charset "utf-8";

:root {
	--sub-color:#333;
}

/*-- swiper -------------------------------------------------------------*/
#mv {  position: relative; z-index: 2; margin-bottom: 5vh; }
#mv .swiper-mv .swiper-slide { opacity: 0.5; }
#mv .swiper-mv .swiper-slide-active { opacity: 1.0; z-index: 10;  }
#mv .swiper-mv .swiper-slide-prev { opacity: 0.5; }
#mv .swiper-mv .swiper-slide-air img { width: 100%; }

@media screen and (max-width: 599px) {
	#mv { }
	#mv .swiper-mv {  width:90%; margin: 0 auto; overflow:visible;  }
	#mv .swiper-slide-mv { position: relative; }	
	#mv .swiper-pagination { bottom: -20px; }
}
@media screen and (min-width: 600px) {
	#mv { width: 100%; }
	#mv .swiper-mv { overflow:visible;  }
	#mv .swiper-slide-mv { position: relative; }	
	#mv .swiper-pagination { position: absolute; bottom: -50px; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#mv .swiper-pagination { bottom: -50px; }
}
@media screen and (min-width: 900px) and (max-width: 1024px) {
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
}
@media screen and (min-width: 1200px) and (max-width: 1479px) {
}
@media screen and (min-width: 1480px) {
}

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

#mv .swiper-button-prev:after {
    content: 'prev';
    color: rgba(255,255,255,0.9);
    border-radius: 25px;
    font-size: 1rem;
}
#mv .swiper-button-next:after {
    content: 'next';
    color: rgba(255,255,255,0.9);
    border-radius: 25px;
    font-size: 1rem;
}

#mv .swiper-button-prev,#mv .swiper-button-next {
    width: 50px;
	height: 50px;
	border-radius: 25px;
	background: var(--sub-color); color: #fff;
}

	#mv .swiper-pagination-bullet {
		background: var(--sub-color);
	}
@media screen and (max-width: 599px) {
	#mv .swiper-button-prev,#mv .swiper-button-next { width: 30px; height: 30px; border-radius: 15px; opacity: 0.5; }
	#mv .swiper-button-prev:after,#mv .swiper-button-next:after { font-size: 0.7rem; }
	
	#mv .swiper-button-prev { left: 5px;}
	#mv .swiper-button-next { right: 5px;}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#mv .swiper-button-prev,#mv .swiper-button-next { width: 40px; height: 40px; border-radius: 20px; opacity: 0.5; }
	#mv .swiper-button-prev { left: -20px;}
	#mv .swiper-button-next { right: -20px;}
}
@media screen and (min-width: 1025px) and (max-width: 1259px)  {
	#mv .swiper-button-prev,#mv .swiper-button-next { width: 45px; height: 45px; border-radius: 22.5px;}
	#mv .swiper-button-prev { left: -40px;}
	#mv .swiper-button-next { right: -40px;}
}
@media screen and (min-width: 1260px) and (max-width: 1479px)  {
	#mv .swiper-button-prev { left: -25px;}
	#mv .swiper-button-next { right: -25px;}
}
@media screen and (min-width: 1480px) {
	#mv .swiper-button-prev { left: -25px;}
	#mv .swiper-button-next { right: -25px;}
}


@media only screen and (max-width:1024px){	
	#mv .topimage {padding: 0 1em; }
}
@media only screen and (min-width:1025px){	
	#mv .topimage{ width: 58%; margin: 0 21%; padding: 0;}
	.swiper-parentDiv { position: relative; width: 58%; margin: 0 auto; }
}
/*-- Scroll Down -------------------------------------------------------------*/
.scroll-down { position:absolute; z-index: 100; height: 100vh; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }
.scroll-down:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: var(--sub-color); }
.scroll-down a { display: inline-block; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; width: 13px; padding: 10px 10px 110px; color: #dedede; font-size: 11px; font-family:'Roboto Condensed', sans-serif; font-weight:bold; line-height: 1; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-lr; transition: .2s; overflow: hidden; margin: auto; }
.scroll-down a:before { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: var(--base-color); }
.scroll-down a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: #dedede; }
.scroll-down a:hover { opacity: .5; }

@media screen and (max-width: 599px) {
	.scroll-down { position:absolute; right:12%; bottom:-50px; }
	.scroll-down a { font-size: 10px; }
}
@media screen and (min-width: 600px) {
	.scroll-down { position:absolute; left:2%; bottom:-70px; }
}
	
#mvScrl a:after { animation: mvScrl01 2.0s cubic-bezier(1, 0, 0, 1) infinite; }
@keyframes mvScrl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}