@charset "UTF-8";


		/* 変数が定義されていないページでも動くよう、最低限のフォールバックを含める */
		:root {
			--accent-color: #0066cc;
		}

		.loading-screen {
			position: fixed;
			inset: 0; /* top: 0; left: 0; right: 0; bottom: 0; と同義 */
			background-color: rgba(251, 251, 253, 0.85); /* ほんのり白く透ける背景 */
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			z-index: 9999;
			display: grid;
			place-items: center;
			transition: opacity 0.8s ease, visibility 0.8s ease;
		}

		/* JavaScriptでこのクラスが付与されるとフェードアウト */
		.loading-screen.is-loaded {
			opacity: 0;
			visibility: hidden;
		}

		/* スピナー（極細リング）のスタイル */
		.spinner {
			width: 44px;
			height: 44px;
			border: 2px solid rgba(0, 0, 0, 0.05); /* うすいグレーのリング */
			border-top-color: var(--accent-color); /* 上部だけアクセントカラー */
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}

		/* 回転アニメーション */
		@keyframes spin {
			to { transform: rotate(360deg); }
		}

		/* （※デモ表示用：実際のプロジェクトには不要です） */
		body { height: 100vh; display: grid; place-items: center; font-family: sans-serif; background: #fbfbfd; }
		button { padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 8px; border: none; background: #1d1d1f; color: #fff; }