@charset "utf-8";

body { margin:0; }


/* loader ===================== */

/* loader BG　*/
#loader { position:fixed; width:100%; height:100%; top:0; left:0; z-index:9999; }

/* Loading画像中央配置　*/
#loader_bar {
	position:absolute; width:100%; z-index:9999;
	top:50%; transform:translate(0, -50%); text-align:center;
	color:#FFF;
}
/* ロゴ */
#loader_bar img { width:200px; }
#loader_bar svg { position:absolute; transform:translateY(-50%); }
#loader_bar div {
	position:absolute; margin-top:1em; width:100%; text-align:center; opacity:0;
	animation-name:fadeInAnime; animation-delay:0.5s; animation-duration:1s; animation-fill-mode:forwards;
} @keyframes fadeInAnime{ from { opacity:0; } to { opacity:1; } }

/*割れる画面のアニメーション*/
.loader_cover_up,
.loader_cover_down {
	width:100%; height:50%; background-color:#004639;
	transition:all .2s cubic-bezier(.04, .435, .315, .9);
	transform:scaleY(1);
}
.loader_cover_up   { transform-origin:center top; } /* 上のカバー */
.loader_cover_down { transform-origin:center bottom; position:absolute; bottom:0; } /* 下のカバー */

/*クラス名がついたらY軸方向に0（アニメーション開始*/
.coveranime { transform:scaleY(0); }

/* 確認用の中央揃え */
.center{ width:100%; height:100vh; display:flex; justify-content:center; align-items:center; }
/**/

/* 20230209 */
#loader::before {
	content:""; position:absolute; top:50%; left:0; transform:translateY(-50%);
	width:100vw; height:1.2rem; background:#004639;
	z-index:10000;
}
#loaderLogo     { position:relative; z-index:10000; }
#loaderLogo img {
	position:absolute; top:50%; left:0; transform:translateY(-50%); width:12rem; height:auto;
	background:#004639; padding:3%; box-sizing:content-box;
}
#loader_bar svg { height:4.2rem; }