@charset "utf-8";
:root{
    --main_calor:#2d549c;
    --accent_color:#992f21;
    --white_color:#fff;
    --black_color:#1a1a1a;
    --default_border: 4px solid #2d549c;
    --header_border:4px solid #fff;
    --button_border:2px solid #fff;
    --spacing_xs: 8px;   /* 非常に小さい間隔 */
    --spacing_sm: 12px;   /* 小さな間隔 */
    --spacing_md: 16px;  /* 中間の間隔（基準値） */
    --spacing_lg: 20px;  /* 大きな間隔 */
    --spacing_xl: 24px;  /* 非常に大きな間隔 */
    --main_font: 'Press Start 2P', cursive;
    --default_font: Arial, sans-serif;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 全体のフォントと背景色 */
body {
    font-family: var(--default_font); /* デフォルトのフォント */
    background-image: url('../images/star_background.jpg'); /* パスを適宜変更 */
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--white_color); /* 白い文字色 */
    width: clamp(320px, 58vw + 150px, 1200px); /* 最小320px、推奨58vw + 150px、最大1200px */
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    /* 擬似要素を使ったオーバーレイ */
    &::before{
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒いオーバーレイ */
        z-index: -1; /* コンテンツの後ろに配置 */
        pointer-events: none; /* オーバーレイがクリックなどの操作を受けないように */
    }
}

.vertical_text {
    position: fixed;
    top: 50%;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    white-space: nowrap;
    font-size: clamp(1rem, 5vw, 2rem);
    color: var(--white_color); /* 好みの色に変更 */
    opacity: 0.75;
    z-index: 1000;
    font-family: var(--main_font); /* 通常フォント */
    z-index: 1;
    &.left{
        left: 12px;
        animation: vertical_scroll_up 10s linear infinite; /* 10秒で無限に上へスクロール */
    }
    &.right{
        right: 12px;
        animation: vertical_scroll_down 10s linear infinite; /* 10秒で無限に下へスクロール */
        transform: rotate(180deg); /* 右側の文字を反転 */
    }
}
/* 左側テキストのアニメーション */
@keyframes vertical_scroll_up {
    0% {
        transform: translateY(100%); /* 初期位置: 下から */
    }
    100% {
        transform: translateY(-200%); /* 最終位置: 上に移動 */
    }
}

/* 右側テキストのアニメーション */
@keyframes vertical_scroll_down {
    0% {
        transform: translateY(-200%); /* 初期位置: 上から */
    }
    100% {
        transform: translateY(100%); /* 最終位置: 下に移動 */
    }
}


/* ヘッダーセクション */
.header_section {
    margin-bottom: var(--spacing_lg);
    /* ナビゲーション */
    & .navigation {
        position: fixed; /* スクロール中も画面上部に固定 */
        width: clamp(320px, 58vw + 150px, 1200px); /* 最小320px、推奨58vw + 150px、最大1200px */
        height: 80px; /* ナビゲーションバーの高さ */
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: var(--main_font); /* 通常フォント */
        padding: var(--spacing_md);
        background-color: var(--black_color); /* ヘッダーの背景色 */
        z-index: 2;
        transition: transform 0.3s ease; /* スムーズに動くためのアニメーション */
        &.hidden{
            transform: translateY(-100%); /* 隠す際に画面外へスライド */
        }
        /* 右側のナビゲーション */
        & .nav_right {
            & .nav_list {
                display: flex;
                list-style: none;
                & .nav_item {
                    text-align: center;
                    /* ナビゲーションリンク */
                    & .nav_link {
                        color: var(--white_color);
                        text-decoration: none;
                        font-size: clamp(14px, 1.5vw, 16px);
                        padding: 12px 24px; /* 左側に余裕をもたせる */
                        position: relative;
                        transition: color 0.3s ease, background-color 0.3s ease;
                        display: block;
                        border-radius: 8px; /* 背景に角丸を追加 */
                        /* 矢印のスペース確保 */
                        &::before {
                            content: '▶︎'; /* デフォルトで矢印を表示 */
                            opacity: 0; /* 初期状態では透明に */
                            transition: opacity 0.3s ease; /* アニメーションの遷移 */
                            margin-right: 4px;
                        }
                        /* リンクホバー時のスタイル */
                        &:hover {
                            color: var(--black_color); /* ホバー時は黒文字 */
                            background-color: var(--white_color); /* 背景色を白に */
                            border-radius: 8px; /* 背景に角丸を追加 */
                            /* ホバー時の矢印の表示 */
                            &::before {
                                opacity: 1; /* ホバー時に矢印が表示される */
                                left: 12px; /* 矢印の位置を調整 */
                                color: var(--black_color); /* 矢印も黒に */
                            }
                        }
                    }
                }
            }
        }
    }
    /* ヒーローセクション */
    & .hero_section {
        text-align: center;
        padding: var(--spacing_md);
        background-color: var(--black_color);
        margin-bottom: var(--spacing_lg);
        padding-top: 80px;
        & .hero_inner {
            padding: var(--spacing_sm);
            border: var(--header_border); /* 白いボーダー */
            border-radius: 8px; /* 角を丸める */
            background: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* シャドウを追加 */
            position: relative; /* テクスチャを適用するために必要 */
            margin-bottom: var(--spacing_sm);
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url('../images/color_bar.jpg'); /* テクスチャの画像 */
                opacity: 0.2; /* テクスチャの不透明度 */
                pointer-events: none; /* テクスチャがクリックや他の操作を妨げないようにする */
            }
            & .hero_title {
                font-family: var(--main_font);
                display: flex;
                justify-content: center; /* 中央揃え */
                font-size: clamp(2rem, 14vw, 4rem);
                color: var(--main_calor);
                margin: 20px 0 8px 0;
                text-shadow: 
                2px 2px 0 #000,   /* X方向のシャドウ */
                4px 4px 0 #000,   /* Y方向のシャドウ */
                6px 6px 0 #000,   /* Z方向のシャドウで深さを強調 */
                0 0 5px rgba(0, 0, 0, 0.5); /* 薄いぼかしシャドウ */
                & .char{
                    display: inline-block;
                    opacity: 0;
                    animation: random_title_appearance 1s ease forwards;
                    /* ランダムな遅延を設定 */
                    &:nth-child(1){
                        animation-delay: 0.5s
                    }
                    &:nth-child(2){
                        animation-delay: 0.8s
                    }
                    &:nth-child(3){
                        animation-delay: 0.7s
                    }
                    &:nth-child(4){
                        animation-delay: 1s
                    }
                }
            }
            /* hero_subtitleアニメーション */
            & .hero_subtitle {
                font-family: var(--main_font);
                font-size: clamp(1rem, 3vw, 1.5rem);
                color: var(--main_calor); /* 青系のサブタイトル色 */
                margin-bottom: var(--spacing_xs); /* 下のマージン */
                overflow: hidden; /* マスク効果のためにオーバーフローを隠す */
                position: relative;
                display: inline-block; /* インラインブロックで中心に配置 */
                opacity: 0; /* 初期状態で透明 */
                transform: translateY(12px); /* 下からスタート */
                animation: subtitle_grow 1s ease-out forwards; /* ニョキっと出現 */
                animation-delay: 0.5s;
                text-shadow: 
                    1px 1px 0 #000, 
                    2px 2px 0 #000, 
                    3px 3px 0 #000; /* 立体感を出すシャドウ */
            }
            & .hero_tagline {
                font-size: clamp(1rem, 2.5vw, 1.25rem);
                color: var(--white_color);
                text-align: center;
                margin-bottom: var(--spacing_md);
                position: relative;
                overflow: hidden;
                opacity: 0; /* 初期状態で透明 */
                transform: scale(1.3); /* 少し大きい状態からスタート */
                animation: fadein_burst 1s ease-out forwards;
                animation-delay: 0.5s;
            }
            & .hero_description {
                font-family: var(--default_font);
                font-size: clamp(1rem, 2.5vw, 1.25rem);
                line-height: 1.6;
                color: var(--white_color);
                display: inline-block;
                position: relative;
                overflow: hidden; /* テキストのはみ出しを隠す */
                margin-bottom: var(--spacing_xs);
                & span{
                    position: relative;
                    color: rgba(255, 255, 255, 0); /* 初期状態は透明な白 */
                    opacity: 0; /* 完全に透明に設定 */
                    animation: white_fadein 1.5s ease forwards;
                    animation-delay: 0.5s;
                }
            }
            & .cta_button_container {
                display: flex;
                justify-content: center; /* 中央に配置 */
                align-items: center; /* 縦方向に中央配置 */
                margin-bottom: var(--spacing_lg);
                animation: button_power_on 1s forwards;
                opacity: 0;
                animation-delay: 0.5s;
                will-change: transform;
                & .cta_button {
                    display: inline-block;
                    padding: 12px 24px;
                    font-size: clamp(1rem, 3vw, 1.5rem);
                    text-align: center;
                    color: var(--white_color);
                    background-color: #4c1c1c; /* 電源OFFの暗い色 */
                    border: var(--button_border);
                    border-radius: 8px; /* ボーダーの角を丸める */
                    cursor: pointer;
                    text-decoration: none; /* 下線を消す */
                    position: relative;
                    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6); /* 電源OFF状態の内側シャドウ */
                    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s, filter 0.3s;
                    will-change: transform, filter;
                    &:is(:hover,:focus){
                        background-color: var(--accent_color); /* 電源ONの明るい赤色 */
                        box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.7); /* 明るく光るエフェクト */
                        filter: brightness(1.5); /* ボタンが光る */
                        transform: scale(1.05); /* 拡大してONの印象 */
                    }
                    &:active {
                        transform: scale(0.95); /* 押されたときに縮小 */
                        box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); /* 押し込んだ感じ */
                    }
                }
            }

        }
        /* YouTube動画のスタイリング */
        /* 動画コンテナ */
        & .video_container {
            margin: 0 auto;
            max-width: clamp(320px, 50vw, 560px);
            position: relative;
            overflow: hidden;
            /* 黒い幕 */
            & .video_cover {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #000; /* 黒の幕 */
                transform: translateY(100%);
                animation: video_curtain_up 1.5s forwards;
            }
            /* 動画のアニメーション */
            & video {
                width: 100%;
                height: 100%;
                opacity: 0;
                transform: scale(1.1);
                filter: brightness(0.5);
                animation: video_reveal 2s 1.5s forwards; /* 幕のアニメーションが完了するまで待つ */
            }
        }
    }

}

/* ランダム文字出現のための共通アニメーション */
@keyframes random_title_appearance {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(10deg);
        filter: brightness(0.5) blur(2px);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1) rotate(-5deg);
        filter: brightness(1.5) blur(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: brightness(1) blur(0);
    }
}


/* ニョキっと出現するアニメーション */
@keyframes subtitle_grow {
    0% {
        opacity: 0;
        transform: translateY(20px); /* 初期状態で少し下に */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 通常位置 */
    }
}

/* フェードインバーストアニメーション */
@keyframes fadein_burst {
    0% {
        opacity: 0;
        transform: scale(1.3); /* 大きめに現れる */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* 通常サイズに落ち着く */
    }
}

/* 白フェードインアニメーション */
@keyframes white_fadein {
    0% {
        color: rgba(0, 0, 0, 1); /* 黒で表示 */
        opacity: 0;
    }
    100% {
        color: var(--white_color); /* 元のテキスト色に戻す */
        opacity: 1; /* 最終的に完全に表示 */
    }
}

@keyframes button_power_on {
    0% {
        transform: scale(0.9);
        opacity: 0;
        filter: brightness(0.3); /* 暗い状態から */
    }
    100% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1); /* 明るい状態へ */
    }
}

/* 幕が上がるアニメーション */
@keyframes video_curtain_up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* 動画出現のアニメーション */
@keyframes video_reveal {
    0% {
        opacity: 0;
        transform: scale(0.9);
        filter: brightness(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

/* 共通セクションタイトル */
.section_title {
    font-family: var(--main_font); /* レトロ風フォント */
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    margin-bottom: var(--spacing_sm);
    text-align: left; /* 左揃え */
    color: var(--white_color); /* タイトルの色 */
    display: flex; /* フレックスボックスを使用して画像とテキストを並べる */
    align-items: center; /* 中央揃え */
    justify-content: center;
    position: relative; /* アニメーション用の位置調整 */
    overflow: hidden;
    & .section_title_image {
        width: clamp(30px, 8vw, 40px); /* 画像の幅 */
        height: auto; /* 高さを自動で調整 */
        margin-right: var(--spacing_sm); /* 画像とテキストの間にスペースを追加 */
        position: relative;
        opacity: 0; /* 初期状態で透明 */
        transform: translateY(100px); /* 初期位置を下に設定 */
        transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* スムーズなトランジション */
        &.show{
            opacity: 1; /* 表示 */
            transform: translateY(0); /* 最終位置 */
        }
    }
    & .title_wrapper {
        position: relative;
        display: inline-block; /* テキストラッパーの設定 */
        overflow: hidden; /* マスク効果のためにオーバーフローを隠す */
        white-space: nowrap; /* テキストが折り返さないようにする */
        /* テキストのアニメーション */
        & .title_text  {
            position: relative;
            overflow: hidden; /* テキストを隠す */
            display: inline-block; /* テキストをインラインで表示 */
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #1a1a1a; /* マスクの背景色 */
                transform: translateX(0%); /* マスクを左に移動して隠す */
                opacity: 1; /* 初期状態で透明 */
                transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* スムーズなトランジション */
            }
            &.show::before{
                opacity: 0; /* 表示 */
                transform: translateX(100%); /* マスクを表示 */
            }
        }
    }
}


/* イベント詳細セクション */
.event_info_section {
    color: var(--white_color); /* テキスト色 */
    margin-bottom: var(--spacing_lg);
    font-family: var(--default_font); /* フォントファミリー */
    padding: var(--spacing_md);
    /* 情報アイテムコンテナ */
    & .info_items_container {
        display: flex;
        flex-direction: column;
        border: var(--default_border); /* ボーダーの色 */
        padding: var(--spacing_sm);
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); /* シャドウで立体感を出す */
        opacity: 0; /* 初期状態で透明 */
        transform: perspective(1000px) rotateX(90deg); /* 初期位置を回転させる */
        position: relative;
        overflow: hidden;
        background-color: var(--black_color); /* 背景色 */
        /* トランジションの追加 */
        transition: opacity 1s ease-out, transform 1s ease-out; /* 不透明度と変形のトランジション */
        &.show{
            opacity: 1; /* 表示時の透明度 */
            transform: perspective(1000px) rotateX(0deg); /* アニメーションで回転解除 */
        }
        /* 情報アイテム */
        & .info_item {
            border-bottom: 1px dashed #fff; /* ドットのボーダー */
            padding: 12px 0 8px 1em;
            display: flex;
            justify-content: left;
            /* 情報ラベル */
            & .info_label {
                font-weight: bold;
                display: inline-block;
                margin-right: 4px;
                color: var(--white_color); /* ラベルの色 */
            }
            /* 情報値 */
            & .info_value {
                display: inline-block;
                color: var(--white_color); /* 値の色 */
            }

        }
    }
}

/* イベントパフォーマーセクション全体のスタイル */
.event_performers_section {
    padding: var(--spacing_md);
    margin-bottom: var(--spacing_lg);
    & .performers_wrapper {
        background-color: var(--black_color); /* 背景を暗くしてレトロな雰囲気を強調 */
        position: relative;
        /* 矢印ボタン */
        & .scroll_button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: var(--white_color);
            padding: 0 8px;
            cursor: pointer;
            font-size: clamp(1.5rem, 5vw, 2rem);
            border: var(--button_border);
            border-radius: 50%;
            z-index: 2;
            user-select: none;
            &.left {
                left: 12px;
            }
            &.right {
                right: 12px;
            }
        }
        /* パフォーマーコンテナ */
        & .performers_container {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory; /* 横方向のスナップスクロール */
            padding-bottom: var(--spacing_sm); /* スクロールバーのスペース確保 */
            scrollbar-width: none; /* Firefox向けにスクロールバーを非表示 */
            gap: var(--spacing_sm);
            &::-webkit-scrollbar {
                display: none; /* ChromeやSafariでスクロールバーを非表示 */
            }
            /* 各パフォーマーのスタイル */
            & .performer {
                flex: 0 0 100%; /* 一度に1つのパフォーマーを表示 */
                scroll-snap-align: center; /* スクロール位置を中央に */
                background-color: var(--black_color);
                border: var(--default_border);
                box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); /* シャドウで立体感を出す */
                border-radius: 8px;
                text-align: center;
                position: relative;
                transition: transform 0.3s ease-out, filter 0.3s ease-out; /* トランジションを設定 */
                filter: contrast(0) brightness(0);
                transform: scale(1.5);    
                /* アクティブ状態のクラスを追加することで、トランジションを発火 */
                &.active {
                    filter: contrast(1) brightness(1);
                    transform: scale(1);
                }
                /* CRT風ノイズ */
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: repeating-linear-gradient(
                        0deg,
                        rgba(255, 255, 255, 0.05),
                        rgba(255, 255, 255, 0.05) 1px,
                        transparent 1px,
                        transparent 2px
                    ); /* CRT風ノイズ */
                    pointer-events: none;
                    opacity: 0.5;
                    animation: performer_flicker 0.1s infinite; /* ちらつきアニメーション */
                }
                /* パフォーマー画像のスタイル */
                & .performer_image {
                    width: 100%;
                    height: auto;
                    border-bottom: var(--default_border);
                    margin-bottom: var(--spacing_sm);
                    filter: contrast(1.2) brightness(1.1); /* 明るさとコントラストでレトロ風に */
                }
                /* パフォーマー名のスタイル */
                & .performer_name {
                    font-size: clamp(1rem, 2.5vw, 1.25rem);
                    color: var(--white_color);
                    margin-bottom: var(--spacing_xs);
                    text-shadow: 1px 1px 0 #000; /* レトロなドット感 */
                }
                /* パフォーマーSNSリンク */
                & .performer_sns_links {
                    display: flex;
                    justify-content: center;
                    margin-bottom: var(--spacing_sm);
                    gap: var(--spacing_xs); /* アイコン間の間隔を調整 */
                    & .performer_sns {
                        display: inline-block;
                        transition: opacity 0.3s ease; /* ホバー時の透明度変化をスムーズにする */
                        & .sns_icon {
                            width: clamp(18px, 5vw, 24px); /* アイコンの幅 */
                            height: clamp(18px, 5vw, 24px); /* アイコンの高さ */
                            vertical-align: middle;
                        }
                        &:hover{
                            opacity: 0.7; /* ホバー時にアイコンの透明度を変更 */
                        }
                    }
                }
            }
        }

    }
    /* スクロールインジケーター */
    & .scroll_indicator {
        text-align: center;
        margin-top: var(--spacing_sm);
        & .dot {
            display: inline-block;
            width: clamp(12px, 3vw, 14px);
            height: clamp(12px, 3vw, 14px);
            background-color: var(--white_color);
            border-radius: 50%;
            margin: 0 8px;
            opacity: 0.5;
            &.active {
                background-color: var(--main_calor);
                opacity: 1;
            }
        }
    }
}


/* CRT風ちらつきアニメーション */
@keyframes performer_flicker {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* アクセスセクション全体 */
.access_section {
    color: var(--white_color);
    padding: var(--spacing_md);
    font-family: var(--main_font);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--spacing_lg);
    /* アクセス情報アイテムコンテナ */
    & .access_items_container {
        display: flex;
        flex-direction: column;
        background-color: var(--black_color);
        background-image: url('../images/map.jpg'); /* 背景画像を設定 */
        background-size: cover; /* 背景画像をコンテナ全体に拡大 */
        background-position: center; /* 背景画像を中央に配置 */
        background-repeat: no-repeat; /* 背景画像を繰り返さない */
        border: var(--default_border);
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        padding: var(--spacing_sm);
        opacity: 0; /* 初期状態では見えない */
        clip-path: inset(0 50% 0 50%); /* 初期マスク */
        transition: opacity 1.5s ease-out, clip-path 1.5s ease-out; /* トランジションを設定 */
        &.show{
            opacity: 1; /* 最後に表示 */
            clip-path: inset(0); /* マスクを解除 */
        }
        /* アクセス情報アイテム */
        & .access_item {
            border-bottom: 1px dashed #1a1a1a;
            padding: 12px 0px 8px 1em;
            display: flex;
            font-family: var(--default_font);
            /* ラベル */
            & .access_label {
                font-weight: bold;
                margin-right: 4px;
                color: var(--black_color);
            }
        /* 値 */
        & .access_value {
            color: var(--black_color);
        }
    }
        /* 地図コンテナ */
        & .map_wrapper {
            margin-top: var(--spacing_md);
            overflow: hidden;
            & iframe{
                width: 100%;
                border: none;
            }
        }
    }
}

/* チケットセクション */
.ticket_section {
    color: var(--white_color);
    padding: var(--spacing_md);
    margin-bottom: var(--spacing_lg);
    font-family: var(--default_font); /* 通常のフォント */
    overflow: hidden; /* 子要素のはみ出しを隠す */
    /* チケット購入方法 */
    & .ticket_methods {
        background-color: var(--black_color);
        background-image: url('../images/ticket_background.jpg'); /* 背景画像を設定 */
        background-size: cover; /* 背景画像をコンテナ全体に拡大 */
        background-position: bottom; /* 背景画像を中央に配置 */
        background-repeat: no-repeat; /* 背景画像を繰り返さない */
        border: var(--default_border);
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        padding: var(--spacing_sm);
        opacity: 0; /* 初期状態では透明 */
        transform: translateY(30px); /* 初期位置を下に */
        transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* トランジションを設定 */
        text-align: center; /* コンテンツを中央揃え */
        &::before{
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒いオーバーレイ */
            z-index: -1; /* コンテンツの後ろに配置 */
            pointer-events: none; /* オーバーレイがクリックなどの操作を受けないように */
        }
        &.show{
            opacity: 1; /* 完全に表示 */
            transform: translateY(0); /* 元の位置に戻る */
        }
        & .ticket_purchase{
            font-size: clamp(1rem, 2.5vw, 1.25rem);
            font-weight: bold;
            margin-bottom: var(--spacing_sm);
            display: inline-block;
        }
        /* 購入方法リスト */
        & ul {
            display: flex; /* 横並びにするためのフレックスボックス */
            justify-content: center; /* 中央揃え */
            gap: var(--spacing_sm); /* 各アイテムの間隔 */
            list-style-type: none; /* デフォルトのリストスタイルを無効化 */
            flex-direction: column;
            /* リンクやボタンの統一スタイル */
            & a {
                color: var(--white_color);
                text-decoration: none;
                display: block; /* リンク全体をクリック可能にする */
                width: 100%; /* リンクがリスト全体を覆う */
                height: 100%; /* リンクの高さもリスト全体に対応 */
            }
            & li{
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 12px 24px;
                background-color: var(--main_calor);
                color: var(--white_color);
                border-radius: 8px;
                text-align: center;
                position: relative;
                transition: background-color 0.3s ease;
                & .list_icon {
                    width: auto;
                    height: 24px;
                    margin-right: var(--spacing_xs); /* アイコンとテキストの間の余白 */
                }
                &.no-link{
                    cursor: default;
                    opacity: 0.6; /* リンクがないものは少し薄く */
                    &:hover{
                        background-color: var(--main_calor); /* リンクなしはホバーしても変化なし */
                        &::after{
                            content: "各アーティストにお問い合わせください"; /* ツールチップを表示 */
                            position: absolute;
                            top: -35px;
                            left: 50%;
                            transform: translateX(-50%);
                            background-color: var(--black_color);
                            color: var(--white_color);
                            padding: var(--spacing_xs);
                            border-radius: 8px;
                            font-size: clamp(12px, 1vw, 14px);
                            white-space: nowrap;
                        }
                    }
                }
                /* ボタンのホバー効果 */
                &:hover{
                    background-color: var(--accent_color); /* ホバー時に色を変更 */
                }
            }
        }
    }
}

.back_to_top_container {
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    & .back_to_top_button{
        display: flex;
        align-items: center;
        background-color: transparent; /* 背景を透明に */
        border: none; /* ボーダーをなしに */
        cursor: pointer;
        &:hover .rabbit_icon{
            transform: translateY(-10px); /* 上に10px移動 */
        }
        & .rabbit_icon {
            width: clamp(30px, 6vw, 40px); /* うさぎ画像の幅 */
            height: auto; /* 自動で高さを調整 */
            margin-right: var(--spacing_sm); /* 画像と円ボタンの間の距離 */
            transition: transform 0.3s ease; /* スムーズなアニメーション */
        }
        & .circle_button {
            width: 50px; /* 円の直径 */
            height: 50px; /* 円の直径 */
            border-radius: 50%; /* 円にするためのボーダー半径 */
            background-color: var(--white_color); /* 円の背景色 */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 影を付ける */
            & .top_text {
                font-size: clamp(12px, 3.5vw, 14px);/* テキストのサイズ */
                font-weight: bold; /* 太字 */
                color: var(--black_color); /* テキストの色 */
            }
            
        }
    }
}
/* フッターセクション */
.footer_section {
    padding: var(--spacing_xs);
    text-align: center;
    color: var(--white_color);
}