@charset "utf-8";

/*
************************************************************************
* スプラッシュ
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
#splash
{
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;

	background-color:#FFFFFF;
}
body.loaded #splash
{
	animation-name:fncSplash;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
#splash-contents
{
	position:absolute;
	top:50%;
	left:50%;

	transform:translate(-50%, -50%);
}
#splash-contents .logo
{
	width:30vw;
	max-width:163px;

	margin-bottom:4.0em;
}
#splash-contents .loader
{
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
}
#splash-contents .ball-scale-multiple>div
{
	background-color:#404040;
	/*background-color: #3885ff;*/
}
#splash-contents .line-scale-party>div
{
	/*background-color:#404040;*/
	background-color: #3885ff;
}
#splash-contents .ball-scale>div
{
	/*background-color:#404040;*/
	background-color: #3885ff;
}


@keyframes fncSplash
{
	0% {
		opacity:1;
		transform:translateY(0%);
	}
	99% {
		opacity:0;
		transform:translateY(0%);
	}
	100% {
		opacity:0;
		transform:translateY(-100%);
	}
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1320px) {

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {

}