@charset "utf-8";
/* CSS Document */



/*Loadバー*/
#bar{margin:0;}
.loading-bar{background:#FFF; height:5px; position:relative; margin-bottom:20px;}
.loading-bar::before{-webkit-animation: width-0to100 1s ease-out; -moz-animation: width-0to100 1s ease-out; -o-animation: width-0to100 1s ease-out; -ms-animation: width-0to100 1s ease-out; animation: width-0to100 1s ease-out; animation-fill-mode:forwards;
	background:#FF4444; content:''; height:5px; left:0; position:absolute; top:0;}
	@keyframes width-0to100 {
		0% {width:0;} 100%{width: 100%;}
	}


/*スマホ版レイアウト*/


/*ローディングアニメーション*/
	#loading {width:100vw; height:100vh; transition:all 1s; background-color:#6EB593; position:fixed; top:0; left:0; z-index:9999; }
	.spinner {width:180%; display:block; position:absolute; top:50%; left:53%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);}
	.spinner div.scene01 img,.spinner div.scene02 img,.spinner div.scene03 img,.spinner div.scene04 img,.spinner div.scene05 img,.spinner div.scene05 h1{position:fixed; inset:0; margin:auto;}

	.spinner div.scene01 img{width:90%; animation-name:scene-01; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10001;}
	@keyframes scene-01{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene02 img{width:90%; animation-name:scene-02; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10002; animation-delay: 0.5s;}
	@keyframes scene-02{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene03 img{width:90%; animation-name:scene-03; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10003; animation-delay: 0.7s;}
	@keyframes scene-03{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene04 img{width:90%; animation-name:scene-04; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10004; animation-delay: 1.4s;}
	@keyframes scene-04{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 img{width:90%; animation-name:scene-05; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; z-index:10005; animation-delay: 2.0s;}
	@keyframes scene-05{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 h1{font-size:220%; display:block; width:100%; animation-name:scene-06; animation-duration:2.8s; animation-fill-mode:forwards; opacity:0; z-index:10005; animation-delay: 1.4s; left:-3%; text-align:center; margin-top:-4%; padding-top:0; line-height:1.3em;}
	@keyframes scene-06{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 h1 span{display:block;}


	.spinner p{font-size:180%; text-align:center; letter-spacing:0.6em; color:#FFF; margin-top:42vh; animation-name:title-02; animation-duration:2.0s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-02{ from {opacity:0; transform:translateY(30px);}to {opacity:1; translateY(0px);} }

		.loaded {animation-name:load; animation-duration:6s; animation-fill-mode:forwards; opacity:0;}
		@keyframes load{ 0% { opacity:1;} 33% { opacity:1;} 66% { opacity:1;} 100% {opacity:0; visibility:hidden;} }

	/*ローディングアニメーション（中ページ）*/
	.spinner-subcontents {width:720px; margin:42vh auto;}
	.spinner-subcontents h1{text-align:center; color:#FFF; font-size:320%; animation-name:title-01; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-01{ from {opacity:0;}to {opacity:1;} }
	.spinner-subcontents p{text-align:center; letter-spacing:0.4em; color:#FFF; margin-top:10px; animation-name:title-02; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-02{ from {opacity:0; transform:translateY(30px);}to {opacity:1; translateY(0px);} }



/*-------------------------------------------------*/


/*TB版たてレイアウト*/

@media screen and (min-width:481px) and ( max-width:780px){

/*ローディングアニメーション*/
	#loading {width:100vw; height:100vh; transition:all 1s; background-color:#6EB593; position:fixed; top:0; left:0; z-index:9999; }
	.spinner {width:160%; display:block; position:absolute; top:50%; left:53%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);}
	.spinner div.scene01 img,.spinner div.scene02 img,.spinner div.scene03 img,.spinner div.scene04 img,.spinner div.scene05 img,.spinner div.scene05 h1{position:fixed; inset:0; margin:auto;}

	.spinner div.scene01 img{width:100%; animation-name:scene-01; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10001;}
	@keyframes scene-01{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene02 img{width:100%; animation-name:scene-02; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10002; animation-delay: 0.5s;}
	@keyframes scene-02{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene03 img{width:100%; animation-name:scene-03; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10003; animation-delay: 0.7s;}
	@keyframes scene-03{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene04 img{width:100%; animation-name:scene-04; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10004; animation-delay: 1.4s;}
	@keyframes scene-04{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 img{width:100%; animation-name:scene-05; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; z-index:10005; animation-delay: 2.0s;}
	@keyframes scene-05{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 h1{font-size:240%; display:block; width:100%; animation-name:scene-06; animation-duration:2.8s; animation-fill-mode:forwards; opacity:0; z-index:10005; animation-delay: 1.4s; left:-2%; text-align:center; margin-top:-3%; padding-top:0; line-height:1.3em;}
	@keyframes scene-06{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 h1 span{display:block;}


	.spinner p{font-size:150%; text-align:center; letter-spacing:0.6em; color:#FFF; margin-top:65vh; animation-name:title-02; animation-duration:2.0s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-02{ from {opacity:0; transform:translateY(30px);}to {opacity:1; translateY(0px);} }

		.loaded {animation-name:load; animation-duration:6s; animation-fill-mode:forwards; opacity:0;}
		@keyframes load{ 0% { opacity:1;} 33% { opacity:1;} 66% { opacity:1;} 100% {opacity:0; visibility:hidden;} }

	/*ローディングアニメーション（中ページ）*/
	.spinner-subcontents {width:720px; margin:42vh auto;}
	.spinner-subcontents h1{text-align:center; color:#FFF; font-size:320%; animation-name:title-01; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-01{ from {opacity:0;}to {opacity:1;} }
	.spinner-subcontents p{text-align:center; letter-spacing:0.4em; color:#FFF; margin-top:10px; animation-name:title-02; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-02{ from {opacity:0; transform:translateY(30px);}to {opacity:1; translateY(0px);} }

}


/*-------------------------------------------------*/


/*TB版よこレイアウト*/


@media screen and (min-width:781px) and ( max-width:1024px){

/*ローディングアニメーション*/
	#loading {width:100vw; height:100vh; transition:all 1s; background-color:#6EB593; position:fixed; top:0; left:0; z-index:9999; }
	.spinner {width:120%; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);}
	.spinner div.scene01 img,.spinner div.scene02 img,.spinner div.scene03 img,.spinner div.scene04 img,.spinner div.scene05 img,.spinner div.scene05 h1{position:fixed; inset:0; margin:auto;}

	.spinner div.scene01 img{width:100%; animation-name:scene-01; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10001;}
	@keyframes scene-01{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene02 img{width:100%; animation-name:scene-02; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10002; animation-delay: 0.5s;}
	@keyframes scene-02{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene03 img{width:100%; animation-name:scene-03; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10003; animation-delay: 0.7s;}
	@keyframes scene-03{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene04 img{width:100%; animation-name:scene-04; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10004; animation-delay: 1.4s;}
	@keyframes scene-04{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 img{width:100%; animation-name:scene-05; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; z-index:10005; animation-delay: 2.0s;}
	@keyframes scene-05{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 h1{font-size:240%; display:block; width:100%; animation-name:scene-06; animation-duration:2.8s; animation-fill-mode:forwards; opacity:0; z-index:10005; animation-delay: 1.4s; left:-2%; text-align:center; margin-top:-2%; padding-top:0; line-height:1.5em;}
	@keyframes scene-06{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 h1 span{display:inline;}


	.spinner p{font-size:150%; text-align:center; letter-spacing:0.6em; color:#FFF; margin-top:65vh; animation-name:title-02; animation-duration:2.0s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-02{ from {opacity:0; transform:translateY(30px);}to {opacity:1; translateY(0px);} }

		.loaded {animation-name:load; animation-duration:6s; animation-fill-mode:forwards; opacity:0;}
		@keyframes load{ 0% { opacity:1;} 33% { opacity:1;} 66% { opacity:1;} 100% {opacity:0; visibility:hidden;} }

	/*ローディングアニメーション（中ページ）*/
	.spinner-subcontents {width:720px; margin:42vh auto;}
	.spinner-subcontents h1{text-align:center; color:#FFF; font-size:320%; animation-name:title-01; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-01{ from {opacity:0;}to {opacity:1;} }
	.spinner-subcontents p{text-align:center; letter-spacing:0.4em; color:#FFF; margin-top:10px; animation-name:title-02; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-02{ from {opacity:0; transform:translateY(30px);}to {opacity:1; translateY(0px);} }

}


/*-------------------------------------------------*/


/*PC版レイアウト*/


@media screen and (min-width:1025px){

/*ローディングアニメーション*/
	#loading {width:100vw; height:100vh; transition:all 1s; background-color:#6EB593; position:fixed; top:0; left:0; z-index:9999; }
	.spinner {width:120%; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);}
	.spinner div.scene01 img,.spinner div.scene02 img,.spinner div.scene03 img,.spinner div.scene04 img,.spinner div.scene05 img{position:fixed; inset:0; margin:auto;}

	.spinner div.scene01 img{width:100%; animation-name:scene-01; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10001;}
	@keyframes scene-01{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene02 img{width:100%; animation-name:scene-02; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10002; animation-delay: 0.5s;}
	@keyframes scene-02{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene03 img{width:100%; animation-name:scene-03; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10003; animation-delay: 0.7s;}
	@keyframes scene-03{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene04 img{width:100%; animation-name:scene-04; animation-duration:2s; animation-fill-mode:forwards; opacity:0; z-index:10004; animation-delay: 1.4s;}
	@keyframes scene-04{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 img{width:100%; animation-name:scene-05; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; z-index:10005; animation-delay: 2.0s;}
	@keyframes scene-05{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 h1{font-size:240%; display:block; width:100%; animation-name:scene-06; animation-duration:2.8s; animation-fill-mode:forwards; opacity:0; z-index:10005; animation-delay: 1.4s; left:-2%; text-align:center; margin-top:-1%; padding-top:0; line-height:1.5em;}
	@keyframes scene-06{ from {opacity:0;}to {opacity:1;} }
	.spinner div.scene05 h1 span{display:inline;}


	.spinner p{font-size:150%; text-align:center; letter-spacing:0.6em; color:#FFF; margin-top:65vh; animation-name:title-02; animation-duration:2.0s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-02{ from {opacity:0; transform:translateY(30px);}to {opacity:1; translateY(0px);} }

		.loaded {animation-name:load; animation-duration:6s; animation-fill-mode:forwards; opacity:0;}
		@keyframes load{ 0% { opacity:1;} 33% { opacity:1;} 66% { opacity:1;} 100% {opacity:0; visibility:hidden;} }

	/*ローディングアニメーション（中ページ）*/
	.spinner-subcontents {width:720px; margin:42vh auto;}
	.spinner-subcontents h1{text-align:center; color:#FFF; font-size:320%; animation-name:title-01; animation-duration:2s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-01{ from {opacity:0;}to {opacity:1;} }
	.spinner-subcontents p{text-align:center; letter-spacing:0.4em; color:#FFF; margin-top:10px; animation-name:title-02; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
	@keyframes title-02{ from {opacity:0; transform:translateY(30px);}to {opacity:1; translateY(0px);} }

}