@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
医療法人美郷会　こころはすサイト共通
	ver.2025.08
	ローディングスプラッシュのスタイルシート
────────────────────────────────────────
FileName:		/resources.kokorohasu/css/kokorohasu-loadingsplash.css
Editor:			TRUSTEC
Description:	こころはすサイト共通のローディングスプラッシュのスタイルシート。
────────────────────────────────────────
2025/10/27:		公開。
2025/08/01:		開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/* :::::  [LOADING SPLASH] ::::: */

/* Setup
--------- --------- --------- ------- */
#loading-splash {
	background-color: #ffffff;

	/*	画面全体を覆う大きさ	*/
	width: 100vw;
	height: 100vh;

	/*	fixedで固定	*/
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	/*	z-index で最前面に配置	*/
	z-index: 2147483647;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}



/* FadeIn
--------- --------- --------- ------- */
#loading-splash span {
	opacity: 0.7;
}

#loading-splash .image, 
#loading-splash .text {
	opacity: 0;
	animation-name: fadeInAnimation;	/*		*/
	animation-direction: normal;		/*		*/ 
	animation-duration: 1s;				/*		*/
	animation-fill-mode: forwards;		/*		*/
}

/*	Animation	*/
@keyframes fadeInAnimation {
	100% {
		opacity: 0.7;
	}
}



/* Now Loading
--------- --------- --------- ------- */
#loading-splash .text {
	font-family: sans-serif;
	font-size: large;
	font-weight: bold;

    display: flex;
	flex-direction: row;
    justify-content: center;
    align-items: center;
	gap: 0 0.2em;
}
#loading-splash .text span {
    animation-name: loadingTextAnimation;
	animation-direction: normal;			/*		*/
	animation-duration: 1s;					/*		*/
	animation-iteration-count: infinite;	/*		*/
}

#loading-splash .text span:nth-of-type(2) {
    animation-delay: .1s;
}
#loading-splash .text span:nth-of-type(3) {
    animation-delay: .2s;
}
#loading-splash .text span:nth-of-type(4) {
    animation-delay: .3s;
}
#loading-splash .text span:nth-of-type(5) {
    animation-delay: .4s;
}
#loading-splash .text span:nth-of-type(6) {
    animation-delay: .5s;
}
#loading-splash .text span:nth-of-type(7) {
    animation-delay: .6s;
}
#loading-splash .text span:nth-of-type(8) {
    animation-delay: .7s;
}
#loading-splash .text span:nth-of-type(9) {
    animation-delay: .8s;
}
#loading-splash .text span:nth-of-type(10) {
    animation-delay: .9s;
}

/*	Animation	*/
@keyframes loadingTextAnimation {
    50% {
        transform: translateY(10px);
    }
}



/* Loading complete
--------- --------- --------- ------- */
#loading-splash.loaded {
	animation-name: loadedAnimation;	/*		*/
	animation-direction: normal;		/*		*/ 
	animation-duration: 1s;				/*		*/
	animation-fill-mode: forwards;		/*		*/
	animation-delay: 2s;				/*		*/
}

/*	Animation	*/
@keyframes loadedAnimation {
	/*	アニメーション開始時	*/
	0% {
		opacity: 1;
		z-index: 2147483647;
	}
	/*	アニメーション終了時	*/
	100% {
		opacity: 0;
		z-index: -2147483647;
	}
}





/* :::::  [SECTION: MAIN] ::::: */

/* Intro
--------- --------- --------- ------- */

/* More
--------- --------- --------- ------- */