@charset "utf-8";

/*
************************************************************************
* スピナー
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
#spinner
{
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	
	background-color:#00000022;

	opacity:0;
	transform:translateY(-200%);
}
#spinner > #spinner-wrapper
{
	
}
#spinner > #spinner-wrapper > .spinner.ball-spin-fade-loader > div
{
    background-color:var(--main-color-01);
}
body.connected #spinner
{
	animation-name:fncConection;
	animation-duration:0.3s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes fncConection
{
	0% {
		opacity:0;
		transform:translateY(0%);
	}
	100% {
		opacity:1;
		transform:translateY(0%);
	}
}

#loading
{
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	
	background-color:#FFFFFF;

	opacity:1.0;
}
#loading > #loading-wrapper
{
	
}
#loading > #loading-wrapper > .spinner.ball-spin-fade-loader > div
{
    background-color:var(--main-color-01);
}
body.loaded #loading
{
	animation-name:fncOpen;
	animation-duration:0.5s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes fncOpen
{
	0% {
		opacity:1.0;
		transform:translateY(0%);
	}
	100% {
		opacity:0.0;
		transform:translateY(-100%);
	}
}

#inisialize
{
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	display: flex;
	justify-content: center;
	align-items: flex-end;
		
	background-color:transparent;

	opacity:1.0;
}
#inisialize > #inisialize-wrapper
{
	animation-name:fncInisialize;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	animation-fill-mode:forwards;
}
body.inited #inisialize
{
	display:none;
}
@keyframes fncInisialize
{
	0% {
		opacity:1.0;
	}
	100% {
		opacity:0.0;
	}
}


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

	
}

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