@charset "utf-8";
/*-- swiper -------------------------------------------------------------*/
#mv {  position: relative; z-index: 2; height: 100vh; background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, var(--sub-color) 50%, var(--sub-color) 100%); }
#mv .swiper-mv .swiper-slide { background: #fff; }
#mv .swiper-mv .swiper-slide img { opacity: 0.25; }
#mv .swiper-mv .swiper-slide-active img { opacity: 1.0; z-index: 10;  }
#mv .swiper-mv .swiper-slide-prev img { opacity: 0.25; }

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 599px) {
	#mv { position: relative; z-index: 2; height: 80vh; background: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, var(--sub-color) 30%, var(--sub-color) 100%); }
	#mv { margin-top: 50px; }
	#mv .swiper-mv {  width:90%; margin: 0 auto; overflow:visible;  }
	#mv .swiper-slide-mv { position: relative; }	
	#mv .swiper-pagination { bottom: -20px; }
}
@media screen and (max-width: 375px) {
	#mv {  height: 90vh; }
}
@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-mv {  width:90%; margin: 0 auto ; }
	#mv .swiper-pagination { bottom: -50px; }
}
@media screen and (min-width: 900px) and (max-width: 1024px) {
	#mv .swiper-mv { width:90%; margin: 0 auto; }
}
@media screen and (min-width: 1025px) and (max-width: 1199px) {
	#mv .swiper-mv { width:960px; margin: 0 auto; }
}
@media screen and (min-width: 1200px) and (max-width: 1479px) {
	#mv .swiper-mv { width:1100px; margin: 0 auto; }
}
@media screen and (min-width: 1480px) {
	#mv .swiper-mv { width:1200px; margin: 0 auto; }
}

#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: linear-gradient(to right, #ed6f47, #f69a56); color: #fff; }
#mv .swiper-pagination-bullet {
		background: #53C2F0;
		background: linear-gradient(to right, #ed6f47, #f69a56);
	}
@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;}
}



/*-- 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: linear-gradient(to bottom, #ed6f47, #f69a56); }
.scroll-down a { display: inline-block; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; width: 13px; padding: 10px 10px 110px; color: #fff; 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;
animation: AnimationTitle 5s ease infinite;
background: linear-gradient(to bottom, #ed6f47, #f69a56);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.scroll-down a:before { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: #dedede; }
.scroll-down a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: linear-gradient(to right, #ed6f47, #f69a56); }
.scroll-down a:hover { opacity: .5; }

@media screen and (max-width: 599px) {
	.scroll-down { position:absolute; right:8%; 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%;
  }
}

.mvCopy { margin: 10vh 6% 0vh; color: #fff;}
.mvCopy h3 { text-align: center; font-size: 1.5rem; font-family: "Noto Serif JP", serif; font-weight: 700; margin-bottom: 20px; }
.mvCopy p { margin-bottom: 0px; }