@charset "utf-8";

/*
************************************************************************
* スプラッシュ画面
* @copyright Revolme Inc.
* 
* 読み込み待ち、初期表示するスプラッシュ画面
************************************************************************
*/
#splash-index
{
	position:fixed;
	
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	width:100%;
	height:100%;
	
	background-color:#FFFFFF;
}
#splash-index .splash-contents-wrapper
{
	width:100%;
	height:100%;
}
#splash-index .splash-contents-wrapper .splash-contents
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
#splash-index .splash-contents-wrapper .opning
{
	width:100%;
	height:100%;
	
	opacity:0;
	
	transition-duration:0.3s;
	transition-property:all;
}
#splash-index .splash-contents-wrapper .opning .opning-left
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	
	width:50%;
	height:100%;
	
	background-image:url(../../../_img/loading/opning-left-pc.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#splash-index .splash-contents-wrapper .opning .opning-left .cover
{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	
	width:100%;
	height:100%;
	
	background-color:#FFFFFF;
}
#splash-index .splash-contents-wrapper .opning .opning-right
{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	
	width:50%;
	height:100%;
	
	background-image:url(../../../_img/loading/opning-right-pc.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#splash-index .splash-contents-wrapper .opning .opning-right .cover
{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	
	width:100%;
	height:100%;
	
	background-color:#FFFFFF;
}
#splash-index .splash-contents-wrapper .opning .opning-center
{
	position:absolute;
	top:50%;
	left:50%;
	
	transform:translate(-50%, -50%);
	
	opacity:0;
	
	filter:blur(10px);
}

/* 読み込み後アニメーション */
body.loaded #splash-index .splash-contents-wrapper .opning
{
	opacity:1;
}

/* anim01 ロゴをフェードauto */
body.loaded #splash-index .splash-contents-wrapper .splash-contents
{
	animation-name:anim01;
	animation-duration:0.3s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes anim01 {
	0% {
		opacity:1;
	}
	100% {
		opacity:0.0;
		display:none;
	}
}
/* anim02 左の写真を表示 */
body.loaded #splash-index .splash-contents-wrapper .opning .opning-left .cover
{
	animation-name:anim02;
	animation-duration:0.3s;
	animation-delay:0.3s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes anim02 {
	0% {
		width:100%;
		opacity:1;
	}
	90% {
		opacity:1.0;
	}
	100% {
		width:0%;
		opacity:1.0;
		display:none;
	}
}
/* anim03 右の写真を表示 */
body.loaded #splash-index .splash-contents-wrapper .opning .opning-right .cover
{
	animation-name:anim03;
	animation-duration:0.3s;
	animation-delay:0.45s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes anim03 {
	0% {
		width:100%;
		opacity:1;
	}
	90% {
		opacity:1.0;
	}
	100% {
		width:0%;
		opacity:1.0;
		display:none;
	}
}
/* anim04 ロゴをフェードイン */
body.loaded #splash-index .splash-contents-wrapper .opning .opning-center
{
	animation-name:anim04;
	animation-duration:0.3s;
	animation-delay:0.8s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes anim04 {
	0% {
		opacity:0.5;
		filter:blur(5px);
	}
	100% {
		opacity:1.0;
		filter:blur(0px);
	}
}
/* anim05 全体を右へ */
body.loaded #splash-index
{
	animation-name:anim05;
	animation-duration:0.5s;
	animation-delay:2.0s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes anim05 {
	0% {
		transform: translateX(0%);
		opacity:1;
	}
	99% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(100%);
		opacity:0.0;
		display:none;
	}
}

/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1200px) {
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	#splash-index
	{
	}
	#splash-index .splash-contents-wrapper
	{
	}
	#splash-index .splash-contents-wrapper .splash-contents
	{
		width:60vw;
		text-align:center;
	}
	#splash-index .splash-contents-wrapper .opning
	{
		width:100%;
		height:100%;
		
		opacity:0;
		
		transition-duration:0.3s;
		transition-property:all;
	}
	#splash-index .splash-contents-wrapper .opning .opning-left
	{
		top:0;
		bottom:auto;
		left:0;
		right:0;
		
		width:100%;
		height:50%;
		
		background-image:url(../../../_img/loading/opning-left-sp.jpg);
	}
	#splash-index .splash-contents-wrapper .opning .opning-left .cover
	{
		top:0;
		bottom:0;
		right:0;
	}
	#splash-index .splash-contents-wrapper .opning .opning-right
	{
		top:50%;
		bottom:auto;
		right:0;
		left:0;
		
		width:100%;
		height:50%;
		
		background-image:url(../../../_img/loading/opning-right-sp.jpg);
	}
	#splash-index .splash-contents-wrapper .opning .opning-right .cover
	{
		top:0;
		bottom:0;
		right:auto;
		left:0;
	}
	#splash-index .splash-contents-wrapper .opning .opning-center
	{
		width:60vw;
	}

	/* 読み込み後アニメーション */
	/* anim01 ロゴをフェードauto */
	body.loaded #splash-index .splash-contents-wrapper .splash-contents
	{
		animation-name:anim01;
		animation-duration:0.3s;
		animation-timing-function:ease-out;
		animation-iteration-count:1;
		animation-fill-mode:forwards;
	}
	@keyframes anim01 {
		0% {
			opacity:1;
		}
		100% {
			opacity:0.0;
			display:none;
		}
	}
	/* anim02 左の写真を表示 */
	body.loaded #splash-index .splash-contents-wrapper .opning .opning-left .cover
	{
		animation-name:anim02;
		animation-duration:0.3s;
		animation-delay:0.3s;
		animation-timing-function:ease-out;
		animation-iteration-count:1;
		animation-fill-mode:forwards;
	}
	@keyframes anim02 {
		0% {
			width:100%;
			opacity:1;
		}
		90% {
			opacity:1.0;
		}
		100% {
			width:0%;
			opacity:1.0;
			display:none;
		}
	}
	/* anim03 右の写真を表示 */
	body.loaded #splash-index .splash-contents-wrapper .opning .opning-right .cover
	{
		animation-name:anim03;
		animation-duration:0.3s;
		animation-delay:0.45s;
		animation-timing-function:ease-out;
		animation-iteration-count:1;
		animation-fill-mode:forwards;
	}
	@keyframes anim03 {
		0% {
			width:100%;
			opacity:1;
		}
		90% {
			opacity:1.0;
		}
		100% {
			width:0%;
			opacity:1.0;
			display:none;
		}
	}
	/* anim04 ロゴをフェードイン */
	body.loaded #splash-index .splash-contents-wrapper .opning .opning-center
	{
		animation-name:anim04;
		animation-duration:0.3s;
		animation-delay:0.8s;
		animation-timing-function:ease-out;
		animation-iteration-count:1;
		animation-fill-mode:forwards;
	}
	@keyframes anim04 {
		0% {
			opacity:0.5;
			filter:blur(5px);
		}
		100% {
			opacity:1.0;
			filter:blur(0px);
		}
	}
	/* anim05 全体を右へ */
	body.loaded #splash-index
	{
		animation-name:anim05;
		animation-duration:0.5s;
		animation-delay:2.0s;
		animation-timing-function:ease-out;
		animation-iteration-count:1;
		animation-fill-mode:forwards;
	}
	@keyframes anim05 {
		0% {
			transform: translateX(0%);
			opacity:1;
		}
		99% {
			transform: translateX(0%);
		}
		100% {
			transform: translateX(100%);
			opacity:0.0;
			display:none;
		}
	}
}

/*
************************************************************************
* スプラッシュ画面
* @copyright Revolme Inc.
* 
* 読み込み待ち、初期表示するスプラッシュ画面
************************************************************************
*/
#progressBar
{
	position:fixed;
	top:0px;
	left:0px;
	width:0%;
	height:4px;
	transition-duration:0.3s;
	transition-property:width;
}
#splash
{
	position:fixed;
	
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	width:100%;
	height:100%;
	
	background-color:#FFFFFF;
}
#splash .splash-contents-wrapper
{
	width:100%;
	height:100%;
}
#splash .splash-contents-wrapper .splash-contents
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
body.loaded #splash
{
	animation-name:loadedProgres;
	animation-duration:0.7s;
	animation-timing-function:cubic-bezier(1,.01,.11,.73);
	animation-iteration-count:1;
	animation-delay:0.4s;
	animation-fill-mode:forwards;
}
@keyframes loadedProgres {
	0% {
		transform: translateX(0%);
		opacity:1;
	}
	99% {
		transform: translateX(100%);
		opacity:1.0;
	}
	100% {
		transform: translateX(100%);
		opacity:1.0;
		display:none;
	}
}

/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1200px) {
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	#splash .splash-contents-wrapper .splash-contents
	{
		width:40vw;
		text-align:center;
	}