@charset "utf-8";

#mv { position: relative; width: 100vw; height: 100vh; transform: scale(1); border-radius: 0; transform-origin: center center; overflow: hidden; will-change: transform, border-radius; transition: transform 0.1s linear, border-radius 0.1s linear; }
#mv:after { content: ""; background-image: linear-gradient(0deg, transparent 25%, #00000080 100%); padding-bottom: 50px; position: absolute; left: 0 ;top: 0; width: 100%; height: 10vh; z-index: 1;}
#mv .mvCover { position: absolute; top: 0; width: 100vw; margin: 0 0; height: 100%; }
#mv .video { position: absolute; top: 0; left: 0; z-index: 1; border: none; background: none; background: #fff; width: 100vw; height: 100%; overflow: hidden; }
/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  #mv .video { width: 100%; height: auto; top: 50%; transform: translateY(-50%); }
}
/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
 #mv .video { height: 100vh; width: auto; left: 50%; transform: translateX(-50%); }
}

/* CSS */
.sp-video {
	display: none; /* デフォルト（PC）はスマホ用を非表示 */
}

@media (max-width: 768px) {
	.pc-video {
		display: none; /* スマホではPC用を非表示 */
	}
	.sp-video {
		display: block; /* スマホではスマホ用を表示 */
	}
}

.mv-intro{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; text-align:center; color:#fff; display: block; width: auto; white-space: nowrap; clip-path: inset(0 100% 0 0); animation: revealText 0.6s ease-out 0.3s forwards; font-size: 1.5em; animation-delay: 1s }

.mv-intro.hide{ opacity:0; transition:1s; pointer-events:none; }
@keyframes revealText {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.mainCopy { opacity:0; transition:1s; }
.mainCopy.show { opacity:1; }
.mv-intro { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; text-align:center; color:#fff; }
.mv-intro.hide { opacity:0; transition:1s; pointer-events:none; }

@media screen and (max-width: 599px) {
	.mv-intro { font-size: 1.2em; line-height: 1.7; }
	
	#mv .mainCopy { position: absolute; top: 45%; left: 6%; transform: translateY(-50%); z-index: 10; margin: 0 auto; }
	#mv .mainCopy .mv-ttl01 { color: #fff; margin-bottom: 20px; font-size: 3.0em; font-weight: 900; line-height: 1.2; }
	#mv .mainCopy .mv-ttl02 { color: #fff; margin-bottom: 10px; font-size: 1.5em; font-weight: 900; line-height: 1.0; }
	#mv .mainCopy p { color: #fff; margin-bottom: 0px; font-size: 1.2em; font-weight: 400; line-height: 1.7; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#mv .mainCopy { position: absolute; top: 50%; left: 6%; transform: translateY(-50%); z-index: 10; margin: 0 auto; }
	#mv .mainCopy .mv-ttl01 { color: #fff; margin-bottom: 30px; font-size: 4.0em; font-weight: 900; line-height: 1.2; }
	#mv .mainCopy .mv-ttl02 { color: #fff; margin-bottom: 10px; font-size: 2.0em; font-weight: 900; line-height: 1.2; }
	#mv .mainCopy p { color: #fff; margin-bottom: 0px; font-size: 1.5em; font-weight: 400; line-height: 1.7; }
}
@media screen and (min-width: 900px) {
	#mv .mainCopy { position: absolute; top: 50%; left: 6%; transform: translateY(-50%); z-index: 10; margin: 0 auto; }
	#mv .mainCopy .mv-ttl01 { color: #fff; margin-bottom: 30px; font-size: 5.0em; font-weight: 900; line-height: 1.2; }
	#mv .mainCopy .mv-ttl02 { color: #fff; margin-bottom: 10px; font-size: 2.0em; font-weight: 900; line-height: 1.2; }
	#mv .mainCopy p { color: #fff; margin-bottom: 0px; font-size: 1.5em; font-weight: 400; line-height: 1.7; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	#mv .mainCopy .mv-ttl01 { font-size: 4.0em; }
	#mv .mainCopy .mv-ttl02 { font-size: 1.5em; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#mv .mainCopy .mv-ttl01 { font-size: 5.0em; }
	#mv .mainCopy .mv-ttl02 { font-size: 1.8em; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
}
@media screen and (min-width: 1489px) {
}

#mv .swiper-parentDiv { position: absolute; left: 2%; bottom: 50%; transform: translateY(-50%); border-radius: 0px; width: 1px; z-index: 10; }
#mv .swiper-pagination-bullet { border-radius: 0px; width: 30px; height: 2px; background: #fff; transform: rotate(90deg); margin: 10px 0; }

/* mainCopy全体 */
.mainCopy { opacity:0;　transition:1s; }
.mainCopy.show { opacity:1;}
/* 初期状態 */
.mainCopy h3,.mainCopy h2,.mainCopy p { opacity:0; transform:translateX(-40px); clip-path: inset(0 100% 0 0);}
/* 表示アニメーション */
.mainCopy.show h3 { animation: mvText 1.8s ease forwards; animation-delay: .9s; }
.mainCopy.show h2 { animation: mvText 1.8s ease forwards; animation-delay: 1.5s; }
.mainCopy.show p { animation: mvText 1.8s ease forwards; animation-delay: 2.4s;}
/* アニメーション */
@keyframes mvText{
	0%{
		opacity:0;
		transform:translateX(-40px);
		clip-path: inset(0 100% 0 0);
	}

	100%{
		opacity:1;
		transform:translateX(0);
		clip-path: inset(0 0 0 0);
	}
}

/*-- Scroll Down -------------------------------------------------------------*/
.scroll-down { position:absolute; left:2%; bottom:10px; 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(180deg,rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%); }
.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; }
.scroll-down a:before { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: #ddd; }
.scroll-down a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 1px; height: 100px; background: #999; }
.scroll-down a:hover { opacity: .5; }
@media screen and (max-width: 600px) {
	.scroll-down a { font-size: 10px; }
}
#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%;
  }
}