@charset "UTF-8"; /* * loading.css * 初回ローディング画面のスタイル * - 黒背景に白ロゴを中央表示 * - ロゴは @keyframes + ease-out で「ふわっと＋軽い拡大」表示（transitionだとSafariで途中経過を飛ばすため） * - フェードアウトは .is-hidden 付与で opacity を transition（表示済み状態からの変化なので確実） * - 2回目以降（sessionStorage済）は html.loading-done で display:none → チラ見え防止 * * @package ds-basketballclub-2026 */ /* ============================================= ローディング全画面カバー ============================================= */ .loading-screen { position: fixed; inset: 0; /* iOSアドレスバー対応（dvhは使わず--vhフォールバック・common.jsで設定済み） */ height: 100vh; height: calc(var(--vh, 1vh) * 100); display: flex; align-items: center; justify-content: center; /* ローディング専用のマットブラック（サイト本体の--color-bg #0A0E18より柔らかい黒） */ background-color: #1A1A1A; z-index: var(--z-loading); /* フェードアウト用（.is-hidden付与で0へ） */ opacity: 1; transition: opacity 0.6s ease-out; } /* 2回目以降（sessionStorage済）はDOM描画前に非表示確定＝チラ見え防止 インラインJSが に loading-done を付与する */ .loading-done .loading-screen { display: none; } /* フェードアウト完了後はクリックを透過させない（transition中の操作ブロック） */ .loading-screen.is-hidden { opacity: 0; pointer-events: none; } /* ============================================= 中央のロゴ ============================================= */ .loading-screen__inner { display: flex; align-items: center; justify-content: center; } /* ロゴ本体：初期は非表示。@keyframesで「ふわっと＋軽い拡大」表示 both: 再生前はopacity:0（0%状態）、再生後は表示（100%状態）を保持 */ .loading-screen__logo { display: block; width: clamp(120px, 28vw, 180px); height: auto; opacity: 0; animation: loading-logo-in 1.2s ease-out 0.1s both; } @keyframes loading-logo-in { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } } /* ============================================= モーション低減への配慮 拡大（scale）は無効化し、控えめなopacityフェードのみ残す ============================================= */ @media (prefers-reduced-motion: reduce) { .loading-screen__logo { animation: loading-logo-fade 0.8s ease-out both; } @keyframes loading-logo-fade { 0% { opacity: 0; } 100% { opacity: 1; } } }