/* =================================================================== ASL Site Loader — 白×金 / Zen Old Mincho ・本文は隠さない。この要素が前面に重なるだけ。 ・JSが完全に止まっても、CSSの保険アニメで自動的に消える。 =================================================================== */ /* ローディング中はスクロールを止める（JSが に付けるクラス） */ html.asl-loading, html.asl-loading body { overflow: hidden !important; } /* 全画面を覆うローディング画面 */ .asl-loader { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: #ffffff; opacity: 1; will-change: opacity, transform; /* 保険：JSが死んでも4秒で自動的に消える（透明化＋操作不可） */ animation: asl-failsafe 0.6s linear 4s forwards; } .asl-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 24px; } /* ロゴ：少し下からふわっと浮かび上がる */ .asl-loader__logo { opacity: 0; transform: translateY(12px); animation: asl-logo-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards; } .asl-loader__logo-img { display: block; width: auto; height: auto; max-width: min(60vw, 240px); max-height: 96px; } /* ロゴが無いときのサイト名（明朝体） */ .asl-loader__logo-text { font-family: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(20px, 5vw, 30px); font-weight: 600; letter-spacing: 0.08em; color: #262320; } /* ロゴの下の細いライン */ .asl-loader__bar { position: relative; width: clamp(120px, 40vw, 180px); height: 2px; background: rgba(184, 144, 31, 0.18); border-radius: 2px; overflow: hidden; } /* 左から右へ伸びる金色のライン */ .asl-loader__bar-fill { position: absolute; inset: 0; background: #b8901f; transform: scaleX(0); transform-origin: left center; will-change: transform; animation: asl-bar 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; } /* 完了：上へスライドしながらフェードアウト */ .asl-loader.asl-loader--hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1), transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); animation: none; /* 完了時は保険アニメを止める */ } @keyframes asl-logo-in { to { opacity: 1; transform: translateY(0); } } @keyframes asl-bar { to { transform: scaleX(1); } } @keyframes asl-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } /* 動きを減らす設定の人向け：アニメは止めて、消すのも控えめに */ @media (prefers-reduced-motion: reduce) { .asl-loader { animation: asl-failsafe 0.2s linear 3.4s forwards; } .asl-loader__logo { animation: none; opacity: 1; transform: none; } .asl-loader__bar-fill { animation: none; transform: scaleX(1); } .asl-loader.asl-loader--hidden { transform: none; transition: opacity 0.2s linear; } }