/* CSS Document */


/*------------------------------------------------------------------------
ローディング
------------------------------------------------------------------------ */
	/* ローディング画面の背景 */
	.loadingWrap {
		position: absolute;
		top:0;
		left:0;
		overflow-y: auto;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, #d5f1fa 0%, #fff 100%);
		z-index: 10;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;  
	}
	.loadingBox {
		position: relative;
	}
	.countUnit {
		text-align: center;
		margin-top:10px;
		font-size:2rem;
		font-family: var(--site-font_family-serif);
		letter-spacing: 0.03em;
		color: #19abad;
	}
	.countUnit .per {
		font-size:0.8em;
	}

	.animation,
	.animation:after {
	  border-radius: 50%;
	  width: 5em;
	  height: 5em;
	}
	.animation {
	  margin: 30px auto;
	  font-size: 15px;
	  position: relative;
	  text-indent: -9999em;
	  border-top: 0.5em solid #19abad;
	  border-right: 0.5em solid #19abad;
	  border-bottom: 0.5em solid #19abad;
	  border-left: 0.5em solid rgba(255,255,255,.5);
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation: load8 1.1s infinite linear;
	  animation: load8 1.1s infinite linear;
	}
	@-webkit-keyframes load8 {
	  0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	  }
	}
	@keyframes load8 {
	  0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	  }
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.countUnit {
		font-size:2rem;
	}
	.animation {
	  margin: 0 auto 30px;
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.animation {
	  margin: 0 auto 20px;
	}
}









/* mainVisualWrap
------------------------------------------------------------------------ */
	.mainVisualWrap {
		position: relative;
	}
	.mainVisual {
		position: relative;	
		width:100%;
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
	}
	.mainVisual img {
		width:100%;
	}
	.mainVisual [class*="scene"] {
		position: absolute;
		top:0;
		left:0;
		margin:0 auto;
		width: 100%;
		height:100%;
	}
	.mainVisual .base {
		position: relative;
	}	
	.mainVisual .scene01  { z-index: 1;}
	.mainVisual .scene02  { z-index: 2;}
	.mainVisual .scene03  { z-index: 3;}
	.mainVisual .scene04  { z-index: 4;}
	.mainVisual .scene05  { z-index: 5;}
	
	
	
	/*共通------------------------------*/
	.mainVisual p.skipClick,
	.mainVisual p.replayClick {opacity: 0;transition: all 0s ease 0s;}	
	
	
/* btnReply btnSkip
------------------------------------------------------------------------ */

	.btnReply,
	.btnSkip {
		position: absolute;
		z-index: 100!important;
		padding: 5px 15px 5px 20px;
		font-size:0.8em;
		font-family: 'Cinzel', serif;
		color:#fff;
		line-height: 1;
		border:1px solid rgba(255,255,255,.5);
		background:rgba(0,0,0,.5);
		cursor : pointer;
		pointer-events: none;		
		transition: all 0.2s ease;
		opacity: 0;
		/*visibility: hidden;*/
	}
	
	.btnReply:hover,
	.btnSkip:hover {
		background:rgba(0,0,0,.3);
	}
	
	/*arrow*/
	.btnReply .arrow,
	.btnSkip .arrow {
		position: relative;
		padding-right:10px;
	}
	.btnReply .arrow::before,
	.btnSkip .arrow::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right:0;
		width: 8px;
		height: 8px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: translateY(-50%) rotate(45deg);
	}
@media screen and (min-width: 600.02px)  {
	.btnReply,
	.btnSkip {
		top: calc(var(--site-stickyHeader-height) + 5px);
		right:2px;
	}
}
@media screen and (max-width: 600px) { 
	.btnReply,
	.btnSkip {
		font-size: 1em;
		padding: 3px 10px 3px 10px;
		letter-spacing: 0.05em;
		bottom: 4px;
		left:4px;
	}
}


/*scene01-------------------------------------*/
	.scene01 p:not(.bg01) {position: absolute;}
	.scene01 .txtBox { z-index: 1;}

	/*bg01*/
	.scene01 > .bg01 {opacity: 0;}
	.scene01 > .bg01.active {opacity: 1;}

	.scene01 .bg01{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.scene01 .bg01::before {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle, #ffffff 0%,  #c6c6c6 100%);
		animation: bggradient 1.5s ease  forwards;
		background-position: 50% 50%;  
		background-size: 130% 130%;
	}

	/*active-----*/
	.scene01 p.bg01.active::before   {transition: all 1s ease 0s;}

@keyframes bggradient{
	0% {  background-size: 800% 800%;}
	100% { background-size: 130% 130%;}
}


	/*txtBox*/
	.scene01 > .txtBox .inner {opacity: 0;}
	.scene01 > .txtBox.active .inner {opacity: 1;}

	.scene01 .txtBox {
		position: absolute;
		top: 38%;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: 100%;
	}
	.scene01 .txtBox .ja {
		display: block;
		--M-fluidFontSize-max-fontsize: 21;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 1000;
		min-height: 0.001vw;
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 1.6;
		letter-spacing: 0.15em;
	}

	.scene01 .txtBox .en {
		display: block;
		--M-fluidFontSize-max-fontsize: 85;
		--M-fluidFontSize-min-fontsize: 50;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 1000;
		font-size: clamp( calc(var(--M-fluidFontSize-min-fontsize) * .1rem), calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))), calc(var(--M-fluidFontSize-max-fontsize) * .1rem) );
		font-family: var(--site-font_family-en_1);
		line-height: 1;
		letter-spacing: 0.15em;
	}
	.scene01 .txtBox .en .inner {
		display: inline-block;
		background: linear-gradient(45deg, #383838 20%,  #cbcbcb 50%, #383838 80%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 150% 100%;
		animation: txtGradient 5.5s ease infinite;  
		padding:0 .5em .3em;
		margin-bottom: .3em;
	}
	.scene01 .txtBox .en .inner {
		text-decoration: none;
		position: relative;
		display: inline-block;
		color: #383838;
	}
	.scene01 .txtBox .en .inner::after{
		content: '';
		position: absolute;
		bottom: 0;	
		left: 50%; /* 中央を起点にする */
		width: 0;
		height: 1px; 
		background-color: #000;
	}

	/*active-----*/
	.scene01 p.txtBox.active .en .inner {transition: all 2s ease 0.8s;}
	.scene01 .txtBox.active .en .inner::after{ 
		width:	100%;
		 left: 0;
		transition: all .8s ease 2.5s;
	}
	.scene01 p.txtBox.active .ja .inner {transition: all 1.8s ease 4s;}

	@keyframes txtGradient{
	  0% { background-position: 0% 50%;}
	  50% {	background-position: 100% 50%;  }
	  100% {	background-position: 0% 50%;}
	}

@media screen and (max-width: 1000px) { 
	.scene01 .txtBox {
		top: 37%;
	}
	.scene01 .txtBox .ja {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 16;
		--M-fluidFontSize-max-viewport: 1000;
		--M-fluidFontSize-min-viewport: 600;
	}
	.scene01 .txtBox .en {
		--M-fluidFontSize-max-fontsize: 50;
		--M-fluidFontSize-min-fontsize: 45;
		--M-fluidFontSize-max-viewport: 1000;
		--M-fluidFontSize-min-viewport: 600;
	}
	.scene01 .txtBox .en .inner {
		padding-bottom: .3em;
		margin-bottom: .2em;
	}
}	
@media screen and (max-width: 600px) {
	.scene01 .txtBox .en .inner{
		padding: 0 .5em .2em;
		margin-bottom: .2em;
	}
	.scene01 .txtBox .ja {
		--M-fluidFontSize-max-fontsize: 18;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
	}
	.scene01 .txtBox .en {
		--M-fluidFontSize-max-fontsize: 50;
		--M-fluidFontSize-min-fontsize: 40;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
	}
}		

/*activeEnd*/	
	.scene01 > *.activeEnd,
	.scene01 p.bg01.activeEnd::before{opacity: 0;}
	
	/*transition-----*/
	.scene01 p.bg01.activeEnd,
	.scene01 p.bg01.activeEnd::before,
	.scene01 p.txtBox.activeEnd {transition: all 1.5s ease 0s;}
	
	
		
		

	/*scene02 03 04 共通-------------------------------------*/
	[class*="common-sce"]  > *:not(.bg01){position: absolute;}
	[class*="common-sce"] .bg01 { z-index: 1;}
	[class*="common-sce"] .txtBox { z-index: 2;}
	[class*="common-sce"] .imgcapkeep { z-index:3;}

	[class*="common-sce"] > * {opacity: 0;}
	[class*="common-sce"] > *.active {opacity: 1;}
	
	
	/*bg01*/
	[class*="common-sce"] p.bg01.active img {
		opacity: 0;
		transform: scale(1);
		animation: scene02bg01 4s ease 0s forwards;  
	}
		@keyframes scene02bg01 {
		  0% {
			opacity: 0;
			filter: brightness(300%);
			transform: scale(1.5) ;
			}
		  100% {
			opacity: 1;
			filter: brightness(100%);
			transform: scale(1) ;
			}
		}


	/*txtBox*/
	[class*="common-sce"] p.txtBox {
		display: inline-block;
		width: 8%;
		padding: 2em 1em;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	[class*="common-sce"] p.txtBox span {
		--M-fluidFontSize-max-fontsize: 34;
		--M-fluidFontSize-min-fontsize: 24;
		--M-fluidFontSize-max-viewport: 1600;
		--M-fluidFontSize-min-viewport: 1000;
		font-size: clamp( calc(var(--M-fluidFontSize-min-fontsize) * .1rem), calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))), calc(var(--M-fluidFontSize-max-fontsize) * .1rem) );

		line-height: 1;
		letter-spacing: 0.1em;
		writing-mode: vertical-rl;
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.9), 0 0 3px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255);
		
		  transform: translateY(0%);
		  filter: blur(0);
		  transition: all 1.4s ease-out;
	}
	[class*="common-sce"] p.txtBox::before,
	[class*="common-sce"] p.txtBox::after {
		position: absolute;
		content:"";
		display:block;
		height:100%;
		width:1px;
		top:0;
		background:rgba(0,0,0,.8);
		box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.6);
	}
	[class*="common-sce"] p.txtBox::before {left:0;}
	[class*="common-sce"] p.txtBox::after {right:0;}

@media screen and (max-width: 1000px) {
	[class*="common-sce"] p.txtBox {
		width: clamp(70px, (90 / 1000 * 100vw), 90px);
	}
	[class*="common-sce"] p.txtBox span {
		--M-fluidFontSize-max-fontsize:24;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 1000;
		--M-fluidFontSize-min-viewport: 600;
	}
}

@media screen and (max-width: 600px) { 
	[class*="common-sce"] p.txtBox {
		width: clamp(65px, (65 / 480 * 100vw), 80px);
	}
	[class*="common-sce"] p.txtBox span {
		--M-fluidFontSize-max-fontsize: 24;
		--M-fluidFontSize-min-fontsize: 18;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
	}
}






		
	/*active-----*/
	[class*="common-sce"] p.txtBox span {
		opacity: 0;
		filter: blur(10px);
		transform: translateY(40px);
		transition: all 1s ease 1s;
	}
	[class*="common-sce"] p.txtBox.active span{
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
		transition: 1.2s all ease 1s;
	}

	[class*="common-sce"] p.txtBox.active::before,
	[class*="common-sce"] p.txtBox.active::after {
		transform: scaleY(0);
		animation: scene02TxtLine 2s ease 1.5s forwards;  
	}
		@keyframes scene02TxtLine {
		  0% {
			opacity: 1;
			transform: scaleY(0);
			transform-origin: top;
			}
		  100% {
			opacity: 1;
			transform: scaleY(1);
			transform-origin: top;
			}
		}
		
	/*imgcapkeep	*/
	[class*="common-sce"] .imgcapkeep.active {transition: all 4s ease 0s;}
		
		
		
/*activeEnd*/	
	[class*="common-sce"] p.txtBox.activeEnd {opacity: 0; transition: all 2s ease 0s;}
	[class*="common-sce"] .imgcapkeep.activeEnd {opacity: 0; transition: all 2s ease 0s;}
	

	[class*="common-sce"] p.bg01.activeEnd img {
		opacity: 1;
		transform: scale(1);
		animation: scene02bg01End 4s ease 0.5s forwards;  
	}
		@keyframes scene02bg01End {
		  0% {
			opacity: 1;
			filter: brightness(100%);
			transform: scale(1) ;
			  transform-origin:right bottom;
			}
		  100% {
			opacity: 0;
			filter: brightness(300%);
			transform: scale(1.3) ;
			  transform-origin:right bottom;
			}
		}





	
/*scene02-------------------------------------*/




	
/*scene03-------------------------------------*/


	
/*scene04-------------------------------------*/

	/*txtBox*/
	.scene04 p.txtBox span {
		color: #fff;
		text-shadow: 0 0 5px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.9), 0 0 3px rgb(0, 0, 0), 0 0 2px rgb(0, 0, 0);
	}
	.scene04 p.txtBox::before,
	.scene04 p.txtBox::after {
		background:rgba(255,255,255,.8);
		box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.6);
	}




/*scene05-------------------------------------*/

	/*.scene05 .main01 {position: absolute;}*/
	/*.scene05 .bg01 [class*="light"]{position: absolute;}*/
	.scene05 .txtBox {position: absolute;}
	
	.scene05 .main01 {  z-index: 0;}
	.scene05 .bg01 {    z-index: 1;}
	.scene05 .txtBox {  z-index: 2;}
	.scene05 .imgcapkeep { z-index:3;}

	.scene05 > * {opacity: 0;}
	.scene05 > *.active {opacity: 1;}

	/*main01----*/
	.scene05 .main01 {
		width: 100%;
		overflow: hidden;
	}
	

	/*txtBox*/
	.scene05 > .txtBox .inner {opacity: 0;}
	.scene05 > .txtBox.active .inner {opacity: 1;}

	.scene05 .txtBox {
		position: absolute;
		top: 34%;
		right: 10%;
		/*transform: translateX(-50%);*/
		text-align: center;
		/*width: 100%;*/
	}
	.scene05 .txtBox .ja {
		display: block;
		--M-fluidFontSize-max-fontsize: 19;
		--M-fluidFontSize-min-fontsize: 15;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 1000;
		min-height: 0.001vw;
		font-size: clamp(
			calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
			calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
			calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
		);
		line-height: 1.6;
		letter-spacing: 0.15em;
	}

	.scene05 .txtBox .en {
		display: block;
		--M-fluidFontSize-max-fontsize: 81;
		--M-fluidFontSize-min-fontsize: 48;
		--M-fluidFontSize-max-viewport: 1920;
		--M-fluidFontSize-min-viewport: 1000;
		font-size: clamp( calc(var(--M-fluidFontSize-min-fontsize) * .1rem), calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))), calc(var(--M-fluidFontSize-max-fontsize) * .1rem) );
		font-family: var(--site-font_family-en_1);
		line-height: 1;
		letter-spacing: 0.15em;
	}
	.scene05 .txtBox .en .inner {
		display: inline-block;
		background: linear-gradient(45deg, #383838 20%,  #cbcbcb 50%, #383838 80%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 150% 100%;
		animation: txtGradient 5.5s ease infinite;  
		padding-bottom: .3em;
		margin-bottom: .2em;
	}
	.scene05 .txtBox .en .inner {
		text-decoration: none;
		position: relative;
		display: inline-block;
		color: #383838;
	}
	.scene05 .txtBox .en .inner::after{
		content: '';
		position: absolute;
		bottom: 0;	
		left: 50%; /* 中央を起点にする */
		width: 0;
		height: 1px; 
		background-color: #000;
	}

	/*active-----*/
	.scene05 p.txtBox.active .en .inner {transition: all 2s ease 0.8s;}
	.scene05 .txtBox.active .en .inner::after{ 
		width:	100%;
		 left: 0;
		transition: all .8s ease 2.5s;
	}
	.scene05 p.txtBox.active .ja .inner {transition: all 1.8s ease 4s;}

	@keyframes txtGradient{
	  0% { background-position: 0% 50%;  }
	  50% {	background-position: 100% 50%;  }
	  100% {	background-position: 0% 50%;  }
	}


@media screen and (min-width: 600.02px) {
	.scene05 .imgcapkeep {left: 0; right: auto;}
}
@media screen and (max-width: 1000px) { 
	.scene05 .txtBox .ja {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 10;
		--M-fluidFontSize-max-viewport: 1000;
		--M-fluidFontSize-min-viewport: 600;
	}
	.scene05 .txtBox .en {
		--M-fluidFontSize-max-fontsize: 48;
		--M-fluidFontSize-min-fontsize: 28;
		--M-fluidFontSize-max-viewport: 1000;
		--M-fluidFontSize-min-viewport: 600;
	}
	.scene05 .txtBox .en .inner {
		padding-bottom: .3em;
		margin-bottom: .2em;
	}

}		
		
@media screen and (max-width: 600px) { 

	/*txtBox*/
	.scene05 .txtBox {
		top: 26%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 95%;
	}
		/*txtBox*/
	.scene05 .txtBox .bl {
		display: inline-block;
	}
	.scene05 .txtBox .en .bl {
		margin-left: .3em;
	}
	.scene05 .txtBox .en {
		--M-fluidFontSize-max-fontsize: 40;
		--M-fluidFontSize-min-fontsize: 30;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
		letter-spacing: 0.1em;
	}
	.scene05 .txtBox .en .inner{
		padding: 0 .5em .2em;
		margin-bottom: .2em;
	}
			
	.scene05 .txtBox .ja {
		--M-fluidFontSize-max-fontsize: 15;
		--M-fluidFontSize-min-fontsize: 11;
		--M-fluidFontSize-max-viewport: 600;
		--M-fluidFontSize-min-viewport: 480;
	}
}



	/*active-----*/
	.scene05 .main01.active img {
		opacity: 0;
		transform: scale(1);
		animation: scene03main01 4s ease 0s forwards;  
	}
		@keyframes scene03main01 {
		  0% {
			opacity: 0;
			filter: brightness(300%);
			transform: scale(1.5) /* translate(-5%, -5%)*/;
			}
		  100% {
			opacity: 1;
			filter: brightness(100%);
			transform: scale(1);
			}
		}
		
	/*bg01----*/
	.scene05 .bg01.active {transition: all 4s ease 0s;}
	
	/*txtBox*/
	.scene05 .bg01 .txtBox {opacity: 0;}
	.scene05 .bg01.active .txtBox {opacity: 1;transition: all 4s ease 1.5s;}
	
	/*imgcapkeep----*/
	.scene05 .imgcapkeep.active {transition: all 4s ease 0s;}