/* CSS Document */


/*------------------------------------------------------------------------
ローディング
------------------------------------------------------------------------ */

	/* ローディング画面の背景 */
	.loadingWrap {
		position: absolute;
		top:0;
		left:0;
		overflow-y: auto;
		width: 100%;
		height: 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:1.5rem;
		font-family: var(--site-font_family-en_1);
		letter-spacing: 0.03em;
		color: #666;
	}
	.countUnit .per {
		font-size:0.8em;
	}



.animation {
  width: 30px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#555 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}
@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}


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





/* mainVisualWrap
------------------------------------------------------------------------ */
	.mainVisualWrap {
		position: relative;
		/*background: #000;*/
	}
	.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 p.skipClick,
	.mainVisual p.replayClick {opacity: 0;transition: all 0s ease 0s;}		
	
/* //////////////////////////////////////////////////

btnSkip btnReply

////////////////////////////////////////////////// */
	.btnSkip,
	.btnReply {
		position: absolute;
		display: block;
		top: 70px;
		right: 5px;
		width: 80px;
		text-align: center;
		color: #fff;
		border: 1px solid rgba(255,255,255,.8);
		font-size: 0.9em;
		font-family: 'Crimson Text', serif;	
		background: #000;	
		cursor: pointer;
		transition: 0.5s;
		z-index: 305;
	}
	.btnReply {
		pointer-events: none;
		z-index: 304;
	}
	.btnSkip:hover,
	.btnReply:hover {
		background: #555;
	}
	.btnReply {
		opacity: 0;
	}
@media screen and (max-width: 1050px) { 
	.btnSkip,
	.btnReply {
		top: 0px;
	}
}
@media screen and (max-width: 736px) { /*{SP}*/
	.btnSkip,
	.btnReply {
		width: 60px;
		font-size: 0.8em;
	}
}
	
	
/*---------------------------------------------------------------
	scene01
---------------------------------------------------------------*/
	.scene01  > *:not(.bg01) {position: absolute;}
	.scene01 .bg01 { z-index: 1;}
	.scene01 .copyBox { z-index: 2;}
	.scene01 .imgcapkeep { z-index:3;}




	/*bg01*/
	.scene01 .bg01 { 

	}



	/*txtBox*/
	.scene01 .copyBox {
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.scene01 .copyBox .txt01 {
		position: absolute;
		width: 17.865%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

@media screen and (max-width: 736px) { /*{SP}*/
	.scene01 .copyBox .txt01 {
		width: clamp(200px, (280 / 480 * 100vw), 300px);
		/*top:30%;
		left: 50%;
		right: auto;
		transform: translateX(-50%);*/
	}
}



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



	/*bg01*/
	.scene01 .bg01 {
		animation: bgBright 1.5s cubic-bezier(.4, 0, .2, 1) infinite alternate;
		/*opacity: 0;*/
		transition: opacity 3s ease 0s;
	}
	.scene01 .bg01::before{
	  content: "";
	  display: block;
	  height: 100%;
	  position:absolute;
	  width: 100%;
       /* opacity: 0;*/
	}
	.scene01 .bg01.active,
	.scene01 .bg01.active::before{
        opacity: 1;
	}
	.scene01 .bg01::before{
		background: no-repeat 50% / cover url("../../img/index/op/scene01_p_bg2@pc.jpg");
	  animation: bgFade 2.5s cubic-bezier(.4, 0, .2, 1) infinite alternate;
    }

	@keyframes bgFade {
	  0% {	opacity: 0;	  }
	  to {	opacity: 1;	  }
	}
	@keyframes bgBright {
	  0% {	filter: brightness(100%);  }
	  100% {	filter: brightness(102%);  }
	}




	/*copyBox*/

	.scene01 .copyBox {opacity: 0;}
	.scene01 .copyBox.active  {
		transform: scale(1);
		animation: sc01_txt_01 1.5s ease-out .5s forwards;}

	@keyframes sc01_txt_01{
		  0% {
			opacity: 0;
			 transform: scale(.5) ;
			  filter:  blur(55px) saturate(0%) contrast(0%) brightness(500%); 
			clip-path: inset(0 0 100% 0);
		  }
		  100% {
			opacity: 1;
			 transform: scale(1) ;
			   filter:  blur(0) saturate(100%) contrast(100%) brightness(100%); 
			clip-path: inset(0 0 0 0);
		  }
	}

	

	/*imgcapkeep	*/
	.scene01 .imgcapkeep.active {transition: all 4s ease 0s;}



/*activeEnd---------*/
	.scene01 .copyBox.activeEnd {opacity: 0; transition: all 1s ease 0s;}
	.scene01 .copyBox.activeEnd .txt01 {opacity: 0; transition: all 1s ease 0s;}
	.scene01 .bg01.activeEnd {opacity: 0;  transition: all 1s ease 0s;}
	.scene01 .imgcapkeep.activeEnd {opacity: 0; transition: all 1s ease 0s;}









/*---------------------------------------------------------------
	scene0２
---------------------------------------------------------------*/
	.scene02 .main01, .scene02 .main02 {position: absolute;}
	.scene02 .copy {position: absolute;}
	.scene02 .copyBox {position:relative;}
	
	.scene02 .main01,.scene03 .main02 {  z-index: 0;}
	.scene02 .copyBox {    z-index: 1;}
	.scene02 .copy {  z-index: 2;}
	.scene02 .imgcapkeep { z-index:3;}
	



	/*main01----*/
	.scene02 .main01, .scene02 .main02 {
		width: 61.45833%;
		right:0;
		overflow: hidden;
	}
/*	.scene02 .main02 {
		width: 63.41%;
		right:0;
		overflow: hidden;
	}*/

	/*copy----*/
	.scene02 .copyBox {
		width: calc(100% - 61.45833%);
		height:100%;
		left:0;
		top: 0;
		display: block;
	}

	.scene02 .copyBox .copy {
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	/*copy*/
	.scene02 .copyBox .copy .txt01{
		position: absolute;
		width: 47.975%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

@media screen and (max-width: 736px) { /*{SP}*/
	/*main01----*/
	.scene02 .main01, .scene02 .main02 {
		width: 100%;
	}
	
	/*copyBox*/
	.scene02 .copyBox {
		width: 100%;
		height: auto;
	}
	.scene02 .copyBox .copy .txt01{
		/*top:15%;*/
		width: 71.9%;
	}


}


	/*animation-------------*/	
	.scene02 > * {opacity: 0;}
	.scene02 > *.active {opacity: 1;}



	/*copy*/
	.scene02 .copyBox .bg {
		animation: bgBright 1.5s cubic-bezier(.4, 0, .2, 1) infinite alternate;
		opacity: 0;
		transition: opacity 3.5s ease 0s;
	}
	.scene02 .copyBox .bg::before{
	  content: "";
	  display: block;
	  height: 100%;
	  position:absolute;
	  width: 100%;
       /* opacity: 0;*/
	}
	.scene02 .copyBox.active .bg,
	.scene02 .copyBox.active .bg::before{
        opacity: 1;
	}
	.scene02 .copyBox .bg::before{
		background: no-repeat 50% / cover url("../../img/index/op/scene02_bg02@pc.jpg");
	  animation: bgFade 3s cubic-bezier(.4, 0, .2, 1) infinite alternate;
    }




		/*main01*/
		.scene02 .mainpic.active{
			opacity: 0;
			animation: scene02main01 4s ease 0s forwards;  
		}
		@keyframes scene02main01 {
		  0% {
			opacity: 0;
			}
		  100% {
			opacity: 1;
			}
		}



/* 1枚目の画像の設定 */

	.scene02 .mainpic.active .main01{
		opacity: 0;
		animation:anime2 10s ease 4s infinite ;
	}
	.scene02 .mainpic.active .main02 {
		opacity: 1;
		animation:anime1 10s ease 4s infinite ;
	}

@keyframes anime1 {
  0% { opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 0; }
  100% { opacity: 1; }

}
@keyframes anime2 {
  0% { opacity: 0; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }

}



	.scene02 .copyBox .copy {opacity: 0;}
	.scene02 .copyBox.active .copy {
		transform: scale(1);
		animation: sc02_txt_01 1.5s cubic-bezier(0.11, 0.98, 1, 1) 1s forwards;
}

	@keyframes sc02_txt_01{
		  0% {
			opacity: 0;
			  transform: scale(1.4);
			filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
		  }
		  100% {
			opacity: 1;
			   transform: scale(1);
			 filter: blur(0) saturate(100%) contrast(100%) brightness(100%);
		  }
	}


/*

	.scene02 .leftBox.active .copy .txt01{
		animation: sc02_txt_02 .5s ease-out 1.5s forwards;
}

	@keyframes sc02_txt_02{
		  0% {
			opacity: 0;
			
		  }
		  100% {
			opacity: 1;
			
		  }
	}

*/




	/*bg01----*/
	.scene02 .bg01.active {transition: all 4s ease 0s;}
	
	/*copyBoxx*/
	/*.scene02 .bg01 .copyBox {opacity: 0; }
	.scene02 .bg01.active .copyBox {opacity: 1;transition: all 4s ease 1.5s;}*/
	
	/*imgcapkeep----*/
	.scene02 .imgcapkeep.active {transition: all 4s ease 0s;}