@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(--body-icon-color);

}

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:var(--body-background-color);



	opacity:1.0;

}

#loading > #loading-wrapper

{

	

}

#loading > #loading-wrapper > .spinner.ball-spin-fade-loader > div

{

    background-color:var(--body-icon-color);

}

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) {

	

}