/* モバイル対応時のナビゲーションリスト */
@media (max-width: 1024px) {
    .header_section {
        /* ナビゲーション */
        & .navigation {
            /* 右側のナビゲーション */
            & .nav_right {
                 /* ハンバーガーメニュー */
                & .hamburger {
                    display: block;
                    cursor: pointer;
                     /* ハンバーガーがバツマークに変わるアニメーション */
                    &.active  span:nth-child(1){
                        transform: rotate(45deg);
                        top: 8px;
                    }
                    &.active span:nth-child(2) {
                        opacity: 0;
                    }
                    &.active span:nth-child(3) {
                        transform: rotate(-45deg);
                        top: -8px;
                    }
                    & span{
                        display: block;
                        width: 25px;
                        height: 3px;
                        background-color: var(--white_color);
                        margin: 4px 0;
                        position: relative;
                        transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
                    }
                }
                /* フルスクリーンのオーバーレイメニュー */
                & .nav_list {
                    flex-direction: column;
                    background-color: var(--black_color);
                    position: fixed; /* 固定位置でフルスクリーン */
                    right: 0;
                    top: 0;
                    width: 100%; /* 全画面幅 */
                    height: 100%; /* 全画面の高さ */
                    visibility: hidden;
                    transition: opacity 0.5s ease; /* フェードインのトランジション */
                    z-index: -1;
                    opacity: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    /* フルスクリーンのオーバーレイメニュー */
                    &.active{
                        visibility: visible; /* メニューを可視化 */
                        opacity: 1; /* active時に不透明に */
                        /* .active クラスがついた時のアニメーション */
                        & .nav_item{
                            opacity: 1;
                            transform: translateY(0); /* 初期位置から元の位置へ */
                            z-index: 10000; /* メニューより前面 */
                        }
                    }
                    & .nav_item {
                        width: 100%;
                        margin: 8px 0;
                        opacity: 0;
                        transform: translateY(20px); /* 初期位置を少し下げる */
                        transition: opacity 0.5s ease, transform 0.5s ease;
                        /* 各メニュー項目の遅延設定 */
                        &:nth-child(1){
                            transition-delay: 0.2s;
                        }
                        &:nth-child(2){
                            transition-delay: 0.4s;
                        }
                        &:nth-child(3){
                            transition-delay: 0.6s;
                        }
                        &:nth-child(4){
                            transition-delay: 0.8s;
                        }
                        & .nav_link {
                            font-size: clamp(1.25rem, 4vw, 1.5rem);
                            padding: 28px;
                        }
                    }
                }
            }
        }
    }        
}
@media (max-width: 768px) {
    .header_section {
        & .navigation{
            height: 60px;
        }
        & .hero_section {
            padding: 60px 56px 0;
        }
    }
    .event_info_section {
        padding: 60px 56px 0;
        & .info_items_container{
            & .info_item{
                flex-direction: column;
                padding: 8px;
                & .info_label{
                    margin-right: 0px;
                    font-size: 16px;
                    margin-bottom: 4px;
                }
                & .info_value{
                    font-size: 16px;
                }
            }
        }
    }
    .event_performers_section{
        padding: 60px 56px 0;
        & .performers_wrapper{
            & .scroll_button{
                &.left{
                    left: 8px;
                    z-index: 1;
                }
                &.right{
                    right: 8px;
                    z-index: 1;
                }

            }

        }
    }
    .access_section{
        padding: 60px 56px 0;
        & .access_items_container{
            & .access_item{
                flex-direction: column;
                & .access_label{
                    margin-right: 0;
                    margin-bottom: 4px;
                    font-size: 16px;
                }
                & .access_value{
                    font-size: 16px;
                    & span{
                        display: block;
                    }
                }
            }
        }
        /* 地図コンテナ(モバイルサイズ) */
        & .map_wrapper {
            & iframe{
                height: 300px;
            }
        }
    }
    .ticket_section{
        padding: 60px 56px 0;
        & .ticket_methods{
            & ul{
                & li{
                    flex-direction: column;
                    padding: 8px 20px;
                    & .list_icon{
                        margin-right: 0;
                        margin-bottom: 8px;
                        height: 20px;
                    }

                }
            }

        }
    }
}