@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-vision .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; }
	.swiper-slide-img06 { background-image:url("../img/common/slide06_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img07 { background-image:url("../img/common/slide07_sp.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img08 { background-image:url("../img/common/slide08_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; }
	.swiper-slide-img06 { background-image:url("../img/common/slide06_pc.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img07 { background-image:url("../img/common/slide07_pc.jpg"); background-size: cover; background-position: center; }
	.swiper-slide-img08 { background-image:url("../img/common/slide08_pc.jpg"); background-size: cover; background-position: center; }
}


@media screen and (max-width: 899px) {
	#mv .mainCopy { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); width: 90%; }
	#mv .mainCopy h2 { font-size: 2.0rem; margin: 0 auto 20px; text-align: center; color: #fff; font-weight: 700; }
	#mv .mainCopy h3 { font-size: 1.0rem; margin-bottom: 5px; text-align: center; color: #fff; font-weight: 700; }
	#mv .mainCopy h4 { text-align: center; color: #fff; font-size: 1.0rem; margin-bottom: 10px; }
	#mv .mainCopy p { font-size: 0.5em; color: #fff; }
	#mv .mainCopy .logo { width: 180px; margin: 0 auto 20px; }
	#mv .mainCopy p.textCopy { color: #fff; margin-bottom: 0px; font-size: 1.4rem; font-weight: 700; text-align: center;}
	#mv .mainCopy .textCopy .roboto { font-size: 2.8rem; opacity: 0.5;}
	
	#mv .swiper-slide-vision-R .enCopy { position: absolute; bottom: 30vh; left:0%; right: 0%; margin: 0 auto; font-size: 3.0rem; opacity: 0.25; z-index: 2; color: #fff; line-height: 1.0; text-align: center; }
	#mv .swiper-slide-vision-L .enCopy { position: absolute; bottom: 30vh; left: 0%; right: 0%; margin: 0 auto; font-size: 3.0rem; opacity: 0.25; z-index: 2; color: #fff; line-height: 1.0; text-align: center; }
	
	#mv .swiper-slide-vision-L .ovry { position: absolute; top: 0%; left: 0%; width: 100vw; height: 100vh; content: ""; background-image: linear-gradient(0deg, #00000033, transparent); z-index: 1; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#mv .mainCopy { position: absolute; top: 35%; }
	#mv .mainCopy h2 { font-size: 3.0rem; margin: 0 auto; }
	#mv .mainCopy h3 { font-size: 1.2rem; }
	#mv .mainCopy h4 { font-size: 1.1rem; margin-bottom: 5px; }
	#mv .mainCopy .textCopy .roboto { font-size: 3.0rem; opacity: 0.5; }
	#mv .mainCopy .logo { width: 240px; margin: 0 auto 20px; }
	
	#mv .swiper-slide-vision-R .enCopy { font-size: 6.0rem; position: absolute; bottom: 30vh; }
	#mv .swiper-slide-vision-L .enCopy { font-size: 6.0rem; position: absolute; bottom: 30vh; }
}
@media screen and (min-width: 900px) {
	#mv .mainCopy .logo { width: 300px; margin-bottom: 40px; }
	#mv .mainCopy h2 { color: #fff; word-break: keep-all; font-weight: 700; }
	#mv .mainCopy h3 { color: #fff; font-size: 1.5rem; margin-bottom: 0px; font-weight: 700; }
	#mv .mainCopy h4 { color: #fff; font-size: 1.0rem; margin-bottom: 10px; }
	#mv .mainCopy .border-solid { border-bottom: 1px solid #fff; margin-bottom: 10px; }
	#mv .mainCopy p { color: #fff; margin-bottom: 0px; font-size: 0.9rem; }
	#mv .mainCopy p.textCopy { color: #fff; margin-bottom: 0px; font-size: 1.8rem; font-weight: 700; line-height: 1.0; }
	#mv .mainCopy .textCopy .roboto { opacity: 0.5; line-height: 1.0; }
	
	#mv .swiper-slide-vision-L .mainCopy { position: absolute; top: 45%; left: 6%; width: 100%; z-index: 10; transform: translateY(-50%); }
	#mv .swiper-slide-vision-L .mainCopy h2 { text-align: left; }
	#mv .swiper-slide-vision-L .mainCopy h3 { text-align: left; }
	#mv .swiper-slide-vision-L .mainCopy h4 { text-align: left; }
	#mv .swiper-slide-vision-L .mainCopy p { text-align: left; }
	#mv .swiper-slide-vision-L .mainCopy .logo { text-align: left; }
	#mv .swiper-slide-vision-R .mainCopy { position: absolute; top: 45%; right: 6%; width: 100%; z-index: 10; transform: translateY(-50%); }
	#mv .swiper-slide-vision-R .mainCopy h2 { text-align: right; }
	#mv .swiper-slide-vision-R .mainCopy h3 { text-align: right; }
	#mv .swiper-slide-vision-R .mainCopy h4 { text-align: right; }
	#mv .swiper-slide-vision-R .mainCopy p { text-align: right; }	
	#mv .swiper-slide-vision-R .mainCopy .logo { text-align: right; }
	
	#mv .swiper-slide-vision-L .ovry { position: absolute; top: 0%; left: 0%; width: 100vw; height: 100vh; content: ""; background-image: linear-gradient(90deg, #0000004d, transparent); z-index: 1; }
	#mv .swiper-slide-vision-R .ovry { position: absolute; top: 0%; left: 0%; width: 100vw; height: 100vh; content: ""; background-image: linear-gradient(90deg, transparent, #0000004d); z-index: 1; }
	
	#mv .swiper-slide-vision-R .enCopy { position: absolute; bottom: 0px; right: 0%; font-size: 10.0rem; opacity: 0.25; z-index: 2; color: #fff; margin-bottom: 0; line-height: 1.0; }
	#mv .swiper-slide-vision-L .enCopy { position: absolute; bottom: 0px; left: 0%; font-size: 10.0rem; opacity: 0.25; z-index: 2; color: #fff; margin-bottom: 0; line-height: 1.0; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	#mv .mainCopy h2 { font-size: 3.0rem; margin: 0 auto; }
	#mv .mainCopy .textCopy .roboto { font-size: 3.4rem;}
	#mv .mainCopy h3 { font-size: 1.2rem; margin-bottom: 5px; }
	#mv .mainCopy p { font-size: 0.8rem; }
	#mv .swiper-slide-vision-R .enCopy { font-size: 7.0rem; }
	#mv .swiper-slide-vision-L .enCopy { font-size: 7.0rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#mv .mainCopy h2 { font-size: 3.2rem; margin: 0 auto; }
	#mv .mainCopy .textCopy .roboto { font-size: 3.6rem;}
	#mv .mainCopy h3 { font-size: 1.3rem; margin-bottom: 5px; }
	#mv .mainCopy p { font-size: 0.9rem; }
	#mv .swiper-slide-vision-R .enCopy { font-size: 8.0rem; }
	#mv .swiper-slide-vision-L .enCopy { font-size: 8.0rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1489px) {
	#mv .mainCopy h2 { font-size: 3.4rem; margin: 0 auto; }
	#mv .mainCopy .textCopy .roboto { font-size: 3.8rem;}
	#mv .mainCopy h3 { font-size: 1.4rem; margin-bottom: 5px; }
	#mv .mainCopy p { font-size: 0.9rem; }
	#mv .swiper-slide-vision-R .enCopy { font-size: 9.0rem; }
	#mv .swiper-slide-vision-L .enCopy { font-size: 9.0rem; }
}
@media screen and (min-width: 1490px) {
	#mv .mainCopy h2 { font-size: 3.6rem; margin: 0 auto; }
	#mv .mainCopy .textCopy .roboto { font-size: 4.0rem;}
}

#mv .swiper-vision .mainCopy .textCopy,
#mv .swiper-vision .mainCopy h2,
#mv .swiper-vision .mainCopy h3,
#mv .swiper-vision .mainCopy h4,
#mv .swiper-vision .mainCopy .logo{ 
	opacity: 0; 
}
#mv .swiper-vision .swiper-slide-active .mainCopy .textCopy,
#mv .swiper-vision .swiper-slide-active .mainCopy h2,
#mv .swiper-vision .swiper-slide-active .mainCopy h3,
#mv .swiper-vision .swiper-slide-active .mainCopy h4,
#mv .swiper-vision .swiper-slide-active .mainCopy .logo{
	animation-name: fadeupAnimeSw;/*アニメーションの定義名*/
	animation-duration:1.0s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
}
#mv .swiper-vision .swiper-slide-active .mainCopy .textCopy { animation-delay: 0.2s; }
#mv .swiper-vision .swiper-slide-active .mainCopy h2 { animation-delay: 0.2s; }
#mv .swiper-vision .swiper-slide-active .mainCopy h3 { animation-delay: 0.3s; }
#mv .swiper-vision .swiper-slide-active .mainCopy .logo { animation-delay: 0.3s; }
#mv .swiper-vision .swiper-slide-active .mainCopy h4 { animation-delay: 0.4s; }

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeupAnimeSw{
  from {
	  opacity: 0;
	  transform: translateY(100px);
  }
  to {
	  opacity: 1;
	  transform: translateY(0);
  }
}


#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.swiper-pagination-bullets { display: flex; justify-content: center; flex-direction: column; position: absolute; bottom: 40%; transform: translateY(-50%); left: 2%; width: auto; }
#mv .swiper-pagination-bullet { border-radius: 0px; width: 1px; height: 20px; background: #fff; margin: 1px; }
@media screen and (max-width: 767px) {
	#mv .swiper-pagination.swiper-pagination-bullets { position: absolute; left: 4%; }
}
/*-- Scroll Down -------------------------------------------------------------*/
.scrolldown { position:absolute; left:2%; 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:4%; bottom:20vh; 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;
  }
}