@charset "UTF-8";

/* ==========================================================
    第1回 白浜ロックフェス Coming Soon 共通スタイル
    - カラー: 黒 × ワインレッド（上品なトーン）
    - モバイルファースト / prefers-reduced-motion 対応
========================================================== */

:root {
    /* カラーパレット */
    --colorBlack: #0a0507;
    --colorSea: #060203;
    --colorWine: #8e2a3a;
    --colorWineBright: #b8465a;
    --colorWineDeep: #5c1622;
    --colorSilver: #d8d4d0;
    --colorSilverDim: #9a9490;
    --colorGold: #c9a86a;

    /* シルバーの金属質グラデーション（縦方向なので文字間で途切れない） */
    --gradSilver: linear-gradient(180deg, #f6f4f1 0%, #d8d4d0 38%, #8f8a86 55%, #cfcac6 72%, #f0eeec 100%);

    /* フォント */
    --fontSerifJa: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --fontSerifEn: 'Cormorant Garamond', 'Times New Roman', serif;
}

/* ---------- リセット ---------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul {
    list-style: none;
}

/* ---------- ベース ---------- */

body {
    position: relative;
    min-height: 100svh;
    min-height: 100dvh;
    font-family: var(--fontSerifJa);
    color: var(--colorSilver);
    overflow-x: hidden;
    background-color: var(--colorBlack);
}

/* ---------- 背景レイヤー ----------
   背景写真・花火・暗幕・額縁は viewport に固定し、
   本文だけがその上をスクロールする（ファーストビューの構図を保つため） */

/* フェス会場の背景写真（下寄せ・全面） */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--siteBg) center bottom / cover no-repeat;
}

/* 花火Canvas */
.fireworks {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 本文の視認性を確保する薄い暗幕 */
.shade {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(72% 58% at 50% 44%, rgba(6, 2, 4, 0.3), transparent 72%);
}

/* ---------- SNSリンク ---------- */

/* 画面右上に固定（額縁の内側に収まる位置）
   リンクのpadding分を差し引き、アイコンの見た目の位置を揃える */
.snsList {
    position: fixed;
    top: calc(clamp(22px, 3vw, 36px) - 10px);
    right: calc(clamp(22px, 3vw, 36px) - 10px);
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* padding でタップ領域を44px確保する（アイコンの見た目の大きさは変えない） */
.snsLink {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--colorSilver);
    transition: color 0.4s ease, transform 0.4s ease;
}

.snsIcon {
    display: block;
    width: clamp(27px, 2.6vw, 31px);
    height: auto;
    fill: currentColor;
    filter: drop-shadow(0 1px 6px rgba(5, 2, 3, 0.9));
}

/* PCのみ: ホバーでほのかに発光 */
@media (hover: hover) and (pointer: fine) {
    .snsLink:hover {
        color: #f2a6b4;
        transform: translateY(-2px);
    }
}

/* キーボード操作時のフォーカス表示 */
.snsLink:focus-visible {
    outline: 1px solid #f2a6b4;
    outline-offset: 4px;
}

/* 画面を囲む額縁（二重線） */
.frame {
    position: fixed;
    inset: clamp(8px, 1.6vw, 16px);
    z-index: 60;
    pointer-events: none;
    border: 1px solid rgba(142, 42, 58, 0.55);
}

.frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(142, 42, 58, 0.2);
}

/* ---------- レイアウト ---------- */

.page {
    position: relative;
    /* 額縁(.frame: z-index 60)より手前に置き、スクロール時に本文が枠の上を通るようにする */
    z-index: 70;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 上寄せ配置のため上余白は控えめ、下は背景写真が見えるよう空ける */
    padding: clamp(24px, 3.5vh, 44px) clamp(20px, 5vw, 48px) clamp(32px, 5vh, 56px);
}

/* ---------- ユーティリティ ---------- */

/* スクリーンリーダー専用テキスト（視覚的には非表示） */
.srOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- メイン ---------- */

/* テキストは上寄せにして、画面下側に背景写真のステージ・観客を見せる */
.hero {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: clamp(8px, 1.4vh, 20px) 0 0;
}

/* 「─ 第1回 ─」 */
.heroEdition {
    display: flex;
    align-items: center;
    gap: 1.1em;
    font-size: clamp(0.95rem, 2.4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: var(--colorSilver);
    text-shadow: 0 1px 12px rgba(5, 2, 3, 0.85);
}

.heroEdition::before,
.heroEdition::after {
    content: '';
    width: clamp(36px, 6vw, 60px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--colorWine));
}

.heroEdition::after {
    background: linear-gradient(90deg, var(--colorWine), transparent);
}

/* メイン見出し: 正式ロゴ */
.heroLogo {
    margin-top: clamp(14px, 2.4vh, 24px);
    line-height: 0;
}

/* 黒PNGロゴをマスクにして銀グラデーションで塗る */
.heroLogoMark {
    display: block;
    width: clamp(240px, 46vw, 360px);
    aspect-ratio: 296 / 158;
    background: var(--gradSilver);
    -webkit-mask-image: var(--siteLogoMask);
    mask-image: var(--siteLogoMask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: drop-shadow(0 2px 14px rgba(5, 2, 3, 0.8));
}

/* ---------- 開催日時 ---------- */

.heroSchedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.8vh, 8px);
    margin-top: clamp(24px, 4vh, 44px);
}

/* 「2026年10月10日（土）」 */
.heroDate {
    font-size: clamp(1.35rem, 4.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    line-height: 1.2;
    background: var(--gradSilver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 10px rgba(5, 2, 3, 0.9));
}

.heroDay {
    font-size: 0.72em;
}

/* 「14:00 開場 / 15:00 開演」
   ワインレッドだと背景の夜空に沈むため、明るいオフホワイトで抜く */
.heroTime {
    font-size: clamp(0.95rem, 2.7vw, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    color: #f4f1ee;
    text-shadow:
        0 1px 4px rgba(5, 2, 3, 0.95),
        0 2px 16px rgba(5, 2, 3, 0.9);
}

/* 区切りの「/」は赤系のアクセントを残しつつ、暗く沈まない明度にする */
.heroTimeSep {
    margin: 0 0.35em;
    color: #f2a6b4;
}

/* 「和歌山県・白良浜」 */
.heroPlace {
    display: flex;
    align-items: center;
    gap: 0.8em;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    color: #f4f1ee;
    text-shadow:
        0 1px 4px rgba(5, 2, 3, 0.95),
        0 2px 16px rgba(5, 2, 3, 0.9);
}

/* 左右の細い飾り線 */
.heroPlace::before,
.heroPlace::after {
    content: '';
    width: clamp(20px, 3vw, 32px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 166, 180, 0.8));
}

.heroPlace::after {
    background: linear-gradient(90deg, rgba(242, 166, 180, 0.8), transparent);
}

/* ---------- Coming Soon（3D演出） ---------- */

.comingSoonStage {
    margin-top: clamp(20px, 3.4vh, 38px);
    perspective: 900px;
}

.comingSoonTilt {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ゆっくり漂う揺らぎループ */
.comingSoonFloat {
    transform-style: preserve-3d;
    animation: comingSoonSway 10s ease-in-out infinite;
}

.comingSoon {
    font-family: var(--fontSerifEn);
    font-size: clamp(2.2rem, 8.5vw, 4.2rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.25;
    white-space: nowrap;
    transform-style: preserve-3d;
}

/* JS無効時のフォールバック: 分割前は h2 自体をグラデーション文字にする
   （分割後は親のクリップを外さないと、3D変形中の子と干渉してゴーストが出る） */
.comingSoon:not(.isSplit) {
    background: var(--gradSilver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 分割された1文字（JSが生成） */
.comingSoonChar {
    display: inline-block;
    /* g などのディセンダまでグラデーションを塗るため、レイアウトを変えずに描画ボックスを広げる */
    padding: 0.12em 0.02em 0.24em;
    margin: -0.12em -0.02em -0.24em;
    background: var(--gradSilver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 金属光沢が文字を順に流れるシャイン */
    animation: comingSoonShine 4s ease-in-out infinite;
    animation-delay: calc(2.4s + var(--i) * 0.13s);
}

/* 入場完了後（JSが isFloating を付与）: 文字がゆっくり波打つ＋シャイン継続
   波は変位ゼロの状態から正のディレイで順に始めることで、
   切り替えの瞬間に文字が波の途中へワープ（カタつき）しないようにする */
.isFloating .comingSoonChar {
    animation:
        comingSoonWave 5.2s ease-in-out infinite,
        comingSoonShine 4s ease-in-out infinite;
    animation-delay:
        calc(var(--i) * 0.18s),
        calc(2.4s + var(--i) * 0.13s);
}

/* JS有効時: 分割前のテキストのチラつきを防ぐ */
.js .comingSoon:not(.isSplit) {
    opacity: 0;
}

/* JS有効時: 文字は奥に倒れた状態から起き上がる */
.js .comingSoonChar {
    opacity: 0;
    transform: rotateX(-95deg) translateY(0.25em);
    transform-origin: 50% 100%;
    transition:
        transform 0.9s cubic-bezier(0.19, 1, 0.22, 1),
        opacity 0.7s ease;
    transition-delay: calc(2.05s + var(--i) * 0.06s);
}

.js body.isReady .comingSoonChar,
body.isReady .comingSoonChar {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
}

/* ---------- 区切り線とスパーク ---------- */

.heroDivider {
    position: relative;
    width: min(560px, 78vw);
    height: 1px;
    margin-top: clamp(22px, 4vh, 44px);
    background: linear-gradient(90deg, transparent, rgba(142, 42, 58, 0.85) 22%, rgba(142, 42, 58, 0.85) 78%, transparent);
}

/* 中央の赤い光（ゆっくり明滅） */
.heroSpark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(255, 236, 238, 0.95) 0%, rgba(184, 70, 90, 0.55) 18%, transparent 62%);
    animation: sparkPulse 3.6s ease-in-out infinite;
}

.heroSpark::before,
.heroSpark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 224, 228, 0.9), transparent);
}

/* 十字の光条 */
.heroSpark::before {
    width: 46px;
    height: 1px;
    transform: translate(-50%, -50%);
}

.heroSpark::after {
    width: 1px;
    height: 30px;
    transform: translate(-50%, -50%);
}

/* 告知ブロック: 背後に境界のない黒の暗がりを敷き、写真の上でも文字を浮かせる */
.heroNotice {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(18px, 3vh, 32px);
    padding: clamp(10px, 1.6vh, 18px) clamp(36px, 6vw, 64px) clamp(12px, 2vh, 20px);
}

.heroNotice::before {
    content: '';
    position: absolute;
    inset: -18% -22%;
    z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%, rgba(4, 2, 3, 0.72), transparent 72%);
}

/* 「豪華アーティスト〜」 */
.heroCatch {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    color: #f0edea;
    text-shadow:
        0 1px 4px rgba(5, 2, 3, 0.95),
        0 2px 18px rgba(5, 2, 3, 0.85);
}

/* 出演アーティスト一覧（PCは2列・各列とも縦並び） */
.heroLineup {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(20px, 3.5vw, 44px);
    margin-top: clamp(8px, 1.4vh, 14px);
    font-size: clamp(0.8rem, 2.1vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: #e8e4e1;
    text-shadow:
        0 1px 4px rgba(5, 2, 3, 0.95),
        0 2px 14px rgba(5, 2, 3, 0.8);
}

/* 各列（縦並び） */
.heroLineupCol {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.5vh, 6px);
}

.heroLineup li {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    white-space: nowrap;
}

/* 各アーティスト名の頭に小さな菱形の飾り */
.heroLineup li::before {
    content: '';
    flex: none;
    width: 4px;
    height: 4px;
    margin-right: 0.55em;
    transform: rotate(45deg) translateY(-0.15em);
    background: var(--colorWineBright);
}

.heroLineupNote {
    font-size: 0.82em;
    opacity: 0.78;
}

/* 「入場無料」「花火1800発」: ゴールドグラデーションで強調 */
.heroFree,
.heroFireworks {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    background: linear-gradient(180deg, #f9ecc4 0%, #e8c976 45%, #b3873a 60%, #f0da9c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(0 2px 6px rgba(5, 2, 3, 0.95))
        drop-shadow(0 0 14px rgba(232, 201, 118, 0.35));
    animation: freeGlow 3.2s ease-in-out infinite;
}

.heroFree {
    margin-top: clamp(14px, 2.4vh, 26px);
    font-size: clamp(1.8rem, 6vw, 2.8rem);
}

.heroFireworks {
    margin-top: clamp(12px, 2vh, 20px);
    font-size: clamp(1.4rem, 4.6vw, 2.1rem);
}

/* ---------- 予約開始の告知 ---------- */

/* 独立したお知らせ枠として囲み、他の情報に埋もれないようにする */
.heroReserve {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3px, 0.6vh, 6px);
    margin-top: clamp(12px, 2.2vh, 22px);
    padding: clamp(8px, 1.4vh, 14px) clamp(16px, 2.8vw, 32px);
    border: 1px solid rgba(232, 201, 118, 0.45);
    background: rgba(10, 4, 6, 0.5);
}

/* 1行目: 日時 */
.heroReserveDate {
    font-size: clamp(1.22rem, 4vw, 1.78rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    line-height: 1.35;
    color: #f0d48a;
    text-shadow:
        0 1px 4px rgba(5, 2, 3, 0.95),
        0 2px 16px rgba(5, 2, 3, 0.9),
        0 0 16px rgba(232, 201, 118, 0.45);
}

.heroReserveDay {
    font-size: 0.82em;
}

/* 2行目: 対象エリア */
.heroReserveArea {
    font-size: clamp(0.92rem, 2.9vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    line-height: 1.4;
    color: #ebe7e4;
    text-shadow:
        0 1px 4px rgba(5, 2, 3, 0.95),
        0 2px 12px rgba(5, 2, 3, 0.85);
}

/* 3行目: 「予約開始」をゴールドで最も目立たせる */
.heroReserveStart {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-top: clamp(2px, 0.5vh, 5px);
    font-size: clamp(1.55rem, 5.2vw, 2.35rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    line-height: 1.3;
    background: linear-gradient(180deg, #f9ecc4 0%, #e8c976 45%, #b3873a 60%, #f0da9c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(0 2px 6px rgba(5, 2, 3, 0.95))
        drop-shadow(0 0 14px rgba(232, 201, 118, 0.35));
    animation: freeGlow 3.2s ease-in-out infinite;
}

/* 左右の金の飾り線 */
.heroReserveStart::before,
.heroReserveStart::after {
    content: '';
    width: clamp(24px, 3.4vw, 38px);
    height: 1px;
    background: linear-gradient(90deg, transparent, #d8b969);
}

.heroReserveStart::after {
    background: linear-gradient(90deg, #d8b969, transparent);
}

/* 左右の金の飾り線 */
.heroFree::before,
.heroFree::after,
.heroFireworks::before,
.heroFireworks::after {
    content: '';
    width: clamp(28px, 4vw, 44px);
    height: 1px;
    background: linear-gradient(90deg, transparent, #d8b969);
}

.heroFree::after,
.heroFireworks::after {
    background: linear-gradient(90deg, #d8b969, transparent);
}

/* ---------- 登場アニメーション ---------- */

/* JS有効時のみ初期状態を隠す（JS無効でも内容は見える） */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.19, 1, 0.22, 1),
        filter 1s ease;
    transition-delay: var(--d, 0s);
}

.js body.isReady .reveal,
body.isReady .reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ---------- キーフレーム ---------- */

/* Coming Soon 全体の3D揺らぎ */
@keyframes comingSoonSway {
    0%, 100% {
        transform: rotateX(4.5deg) rotateY(-7deg);
    }
    50% {
        transform: rotateX(-3.5deg) rotateY(7deg);
    }
}

/* 文字を順に流れる金属光沢 */
@keyframes comingSoonShine {
    0%, 16%, 100% {
        filter: brightness(1);
    }
    7% {
        filter: brightness(2.05) drop-shadow(0 0 18px rgba(244, 242, 239, 0.55));
    }
}

/* 文字が水面のようにゆっくり上下する波（変位ゼロから始めて滑らかに乗せる） */
@keyframes comingSoonWave {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(0.05em);
    }
    75% {
        transform: translateY(-0.05em);
    }
}

/* 「入場無料」の金の光のパルス */
@keyframes freeGlow {
    0%, 100% {
        filter:
            drop-shadow(0 2px 6px rgba(5, 2, 3, 0.95))
            drop-shadow(0 0 10px rgba(232, 201, 118, 0.35));
    }
    50% {
        filter:
            drop-shadow(0 2px 6px rgba(5, 2, 3, 0.95))
            drop-shadow(0 0 22px rgba(244, 220, 150, 0.75));
    }
}

/* スパークの明滅 */
@keyframes sparkPulse {
    0%, 100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.82);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* ---------- レスポンシブ ---------- */

/* スマホ: 縦長のcoverでは右のステージが切れるため、背景をステージ寄りに寄せる */
@media (max-width: 768px) {
    body::before {
        background-position: 76% bottom;
    }
}

/* 細い画面では長いアーティスト名が2列に収まらないため、
   2つの列を縦に連結して1列にする */
@media (max-width: 620px) {
    .heroLineup {
        flex-direction: column;
        align-items: center;
        gap: clamp(1px, 0.3vh, 4px);
        font-size: clamp(0.78rem, 3.4vw, 0.95rem);
        line-height: 1.45;
    }

    .heroLineupCol {
        align-items: center;
        gap: clamp(1px, 0.3vh, 4px);
    }

    /* 細い端末でも日時が1行に収まるよう字間を詰める */
    .heroReserveDate {
        letter-spacing: 0.02em;
        text-indent: 0.02em;
    }

    .heroReserve {
        padding-left: clamp(12px, 3vw, 24px);
        padding-right: clamp(12px, 3vw, 24px);
    }
}

@media (max-width: 480px) {
    .page {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* 細い画面では「第1回」と近づきすぎるため、端に寄せて間隔を確保する */
    .snsList {
        top: calc(17px - 10px);
        right: calc(15px - 10px);
        gap: 0;
    }

    .comingSoon {
        letter-spacing: 0.03em;
    }

    /* キャッチコピーが1行に収まるよう字間と余白を詰める */
    .heroNotice {
        padding-left: 16px;
        padding-right: 16px;
    }

    .heroCatch {
        font-size: 1rem;
        letter-spacing: 0.12em;
        text-indent: 0.12em;
        white-space: nowrap;
    }
}

/* 一般的なモニタ（フルHD等）の表示高さでは余白と文字を詰めて情報を1画面に収める */
@media (max-height: 1080px) {
    .page {
        padding-top: 18px;
        padding-bottom: clamp(48px, 7vh, 78px);
    }

    .hero {
        padding: 14px 0;
    }

    .heroLogo {
        margin-top: 10px;
    }

    .heroLogoMark {
        width: clamp(200px, 46vw, 300px);
    }

    .heroSchedule {
        margin-top: 30px;
    }

    .comingSoonStage {
        margin-top: 14px;
    }

    .comingSoon {
        font-size: clamp(2rem, 8vw, 3.4rem);
    }

    .heroDivider {
        margin-top: 12px;
    }

    .heroNotice {
        margin-top: 10px;
        padding-top: 8px;
        padding-bottom: 10px;
    }

    .heroFree {
        margin-top: 12px;
    }

    .heroReserve {
        margin-top: 10px;
        padding-top: 8px;
        gap: 3px;
    }

    .heroFireworks {
        font-size: clamp(1.32rem, 4.3vw, 1.95rem);
    }

    .heroReserveStart {
        font-size: clamp(1.45rem, 4.8vw, 2.15rem);
    }
}

/* さらに高さの低い画面（ノートPC等）でも予約日時までを1画面に収める */
@media (max-height: 880px) {
    .heroLogoMark {
        width: clamp(180px, 40vw, 258px);
    }

    .heroSchedule {
        margin-top: 18px;
    }

    .heroFree {
        margin-top: 10px;
    }

    .heroDivider {
        margin-top: 10px;
    }

    .heroNotice {
        margin-top: 8px;
        padding-top: 6px;
        padding-bottom: 8px;
    }

    .heroFireworks {
        margin-top: 12px;
    }

    .heroReserve {
        margin-top: 8px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .comingSoonStage {
        margin-top: 12px;
    }

    .heroReserve {
        gap: 2px;
    }

    .heroReserveStart {
        font-size: clamp(1.4rem, 4.6vw, 2rem);
    }
}

/* ノートPCの表示高さでも予約日時までを収めるための最終調整 */
@media (max-height: 800px) {
    .heroLogoMark {
        width: clamp(170px, 36vw, 232px);
    }

    .heroSchedule {
        margin-top: 14px;
    }

    .heroLineup {
        margin-top: 6px;
    }

    .heroLineupCol {
        gap: 2px;
    }

    .heroFireworks {
        font-size: clamp(1.28rem, 4.1vw, 1.85rem);
    }

    .heroReserve {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .heroReserveDate {
        font-size: clamp(1.12rem, 3.7vw, 1.52rem);
    }

    .heroReserveArea {
        font-size: clamp(0.88rem, 2.7vw, 1.02rem);
    }

    .heroReserveStart {
        font-size: clamp(1.3rem, 4.2vw, 1.82rem);
    }

    .heroLogoMark {
        width: clamp(170px, 34vw, 208px);
    }

    .heroSchedule {
        margin-top: 10px;
    }

    .heroDivider {
        margin-top: 8px;
    }
}

/* ---------- アクセシビリティ: 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
    .js .reveal,
    .js .comingSoonChar,
    .js .comingSoon:not(.isSplit) {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .comingSoonFloat,
    .comingSoonChar,
    .isFloating .comingSoonChar,
    .heroSpark,
    .heroFree,
    .heroFireworks,
    .heroReserveStart {
        animation: none;
    }
}