/* ================================
	 Loader（ページ読込中の全画面オーバーレイ）
================================ */

/* フルスクリーンの赤背景レイヤー（中央寄せのフレックス） */
#loader {
	position: fixed;        /* 画面全体に固定表示 */
	top: 0;
	left: 0;
	width: 100vw;           /* 画面幅いっぱい */
	height: 100vh;          /* 画面高さいっぱい */
	background-color: #e60000;
	display: flex;          /* 子要素を中央配置 */
	justify-content: center;
	align-items: center;
	z-index: 11000;         /* ほぼ最前面に */
	overflow: hidden;       /* はみ出し隠す */
	transition: opacity 0.5s ease; /* 非表示化のフェード */
}

/* フェードアウト＆クリック無効（JSで .hidden を付与） */
#loader.hidden {
	opacity: 0;
	pointer-events: none;
}

/* ロゴ：左端の外側から中央へスライドしてフェードイン */
.logo-animate {
	width: 150px;
	height: 150px;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-100%, -50%); /* 画面外（左）から開始 */
	opacity: 0;
	animation: slideToCenter 2s ease-out forwards; /* 中央へ移動＋不透明に */
	z-index: 10;
}

/* ロゴの移動・透明度アニメーション */
@keyframes slideToCenter {
	0% {
		transform: translate(-100%, -50%); /* 左外から */
		opacity: 0;
	}
	100% {
		left: 50%;                          /* 画面中央X */
		transform: translate(-50%, -50%);   /* 完全中央に配置 */
		opacity: 1;
	}
}