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

html {
    /* hidden だと fixed が壊れることがあるため clip */
    overflow-x: clip;
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 4.4rem;
}

body,html {
    font-family: Noto Sans JP, sans-serif;
    background: black;
}

img {
    vertical-align: bottom;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* arena lightbox（PC / SP 共通） */

.arena_lightbox {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    visibility: hidden;
    pointer-events: none;
}

.arena_lightbox.is-open {
    visibility: visible;
    pointer-events: auto;
}

.arena_lightbox_bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: zoom-out;
}

.arena_lightbox_panel {
    position: relative;
    z-index: 1;
    max-width: min(90vw, 88.5rem);
    max-height: 90vh;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.arena_lightbox.is-open .arena_lightbox_bg,
.arena_lightbox.is-open .arena_lightbox_panel {
    opacity: 1;
}

.arena_lightbox.is-open .arena_lightbox_panel {
    transform: scale(1);
}

.arena_lightbox_img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    box-shadow: unset;
}

.arena_lightbox_close {
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
    z-index: 2;
    width: 3.6rem;
    height: 3.6rem;
    border: 0;
    border-radius: 50%;
    background: #0085A6;
    cursor: pointer;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.35);
}

.arena_lightbox_close::before,
.arena_lightbox_close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.8rem;
    height: 0.2rem;
    background: #fff;
}

.arena_lightbox_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.arena_lightbox_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .arena_lightbox_bg,
    .arena_lightbox_panel {
        transition: none;
    }
}

/* menu */

.menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
    /* 閉じるフェード完了後に visibility を切る */
    transition: visibility 0s linear 0.3s;
}

.menu.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.menu_bg {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    mix-blend-mode: multiply;
    transition: opacity 0.3s ease;
}

.menu.is-open .menu_bg {
    opacity: 0.9;
}

body.is-menu-open,
body.is-schedule-lightbox-open,
body.is-arena-lightbox-open {
    overflow: hidden;
}

.menu_inner {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 1.2rem 1.6rem;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu.is-open .menu_inner {
    opacity: 1;
}

.menu_close {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: color 0.25s ease;
}

.menu_close:hover,
.menu_close:active,
.menu_close:focus-visible {
    color: #0085A6;
}

.menu_close_icon {
    display: block;
    width: 1.7rem;
    height: 1.7rem;
}

.menu_close_icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.menu_close_icon svg path {
    stroke-width: 1;
}

.menu_close_label {
    display: block;
    width: 1.9rem;
    height: 0.4rem;
}

.menu_close_label svg {
    width: 100%;
    height: 100%;
    display: block;
}

.menu_nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.8rem;
}

.menu_nav_link {
    display: block;
    color: #fff;
    transition: color 0.25s ease;
}

.menu_nav_link:hover,
.menu_nav_link:active,
.menu_nav_link:focus-visible {
    color: #0085A6;
}

.menu_nav_icon {
    display: block;
}

.menu_nav_icon svg {
    width: 100%;
    height: auto;
    display: block;
}

.menu_nav_link--top .menu_nav_icon {
    width: 8.1rem;
}

.menu_nav_link--news .menu_nav_icon {
    width: 8.1rem;
}

.menu_nav_link--ticket .menu_nav_icon {
    width: 9.1rem;
}

.menu_nav_link--schedule .menu_nav_icon {
    width: 13.4rem;
}

.menu_nav_link--arena .menu_nav_icon {
    width: 15.9rem;
}

/* header */

body {
    padding-top: 4.4rem;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.4rem;
    z-index: 100;
    background: #0085A6;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, .3);
}

.header_inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 1.6rem 0 1.5rem;
}

.header_logo {
    display: block;
    width: 13.2rem;
    flex-shrink: 0;
}

.header_logo img {
    width: 100%;
    height: auto;
}

.header_menu {
    display: block;
    width: 1.9rem;
    margin-left: auto;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.header_menu img {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) {
    html,body {
        font-size: 10px;
        background: white !important;
        /* 横幅が狭くなるほど CTA を薄く（ticket 可視高さとも連動） */
        --cta-pad-y: clamp(1rem, 1.5vw, 2rem);
        --cta-btn-width: clamp(28rem, 42vw, 48rem);
        --cta-btn-height: calc(var(--cta-btn-width) * 211 / 1391);
        --fixed-cta-height: calc(var(--cta-pad-y) * 2 + var(--cta-btn-height));
    }

    body {
        padding-top: 4vw;
        padding-bottom: 6vw;
    }

    .wrapper {
        background: black;
        width: 100%;
        margin: 0 auto;
    }

    .header {
        height: 4vw;
    }

    .header_logo {
        width: 15vw;
    }

    .header_menu {
        width: 1.6vw;
    }

    .menu_inner {
        padding: 1.6rem 1.6rem;
    }

    .menu_close_icon {
        width: 1.6vw;
    height: 1.6vw;
    }

    .menu_close_label {
        width: 1.6vw;
        height: 0.5rem;
    }

    .menu_nav_icon {
        height: 3.1vw;
        width: auto !important;
    }
    .menu_nav_icon svg {
        height: 100%;
        width: auto;
    }

    .menu_close_label {
        width: 1.6vw;
        height: auto;
    }

    .menu_nav {
        gap: 2vw;
    }

    /* mv */

    .mv {
        --mv-bg-clip: 100%;
        position: relative;
        width: 100%;
        margin: 0 auto;
        background: #0085A6;
        overflow: hidden;
        z-index: 2;
    }

    .mv:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        padding-top: 57.8472%;
        background: url(../images/mv/mv_bg_pc.png) no-repeat top center #0085A6;
        background-size: 100% auto;
        clip-path: inset(0 0 var(--mv-bg-clip) 0);
        will-change: clip-path;
    }

    .mv.is-mv-animated:before {
        clip-path: inset(0 0 0 0);
    }

    .mv_inner {
        position: relative;
        padding-top: 57.8472%;
    }

    .mv_title {
        position: absolute;
        top: 4.204%;
        left: 0.139%;
        width: 46.319%;
        clip-path: inset(0 0 100% 0);
        will-change: clip-path, transform;
    }

    .mv.is-mv-animated .mv_title {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }

    .mv_title picture {
        display: block;
        width: 97.34%;
        margin-left: 2.699%;
    }

    .mv_title img {
        width: 100%;
        height: auto;
    }

    .mv_visual {
        position: absolute;
        top: 0;
        left: 0.139%;
        width: 99.861%;
        height: 100%;
        transform: translateY(2rem);
        opacity: 0;
        will-change: transform, opacity;
    }

    .mv.is-mv-animated .mv_visual {
        transform: translateY(0);
        opacity: 1;
    }

    .mv_visual picture {
        display: block;
        position: absolute;
        top: 4.17%;
        left: 18.41%;
        width: 57.09%;
        height: 88.04%;
    }

    .mv_visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: none;
    }

    .mv_label {
        position: absolute;
        top: 70.108%;
        left: 0.139%;
        width: 46.597%;
        clip-path: inset(0 100% 0 0);
        will-change: clip-path;
    }

    .mv.is-mv-animated .mv_label {
        clip-path: inset(0 0 0 0);
    }

    .mv_label picture {
        display: block;
        width: 100.08%;
        margin-left: -0.01%;
    }

    .mv_label img {
        width: 100%;
        height: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .mv {
            --mv-bg-clip: 0%;
        }

        .mv:before,
        .mv_title,
        .mv_visual,
        .mv_label {
            clip-path: none;
            transform: none;
            opacity: 1;
            transition: none;
        }
    }

    /* cards */

    .cards {
        position: relative;
        z-index: 2;
        padding-bottom: 2vw;
        background: #0285a6;
    }

    .cards_inner {
        width: 100%;
        margin: 0 auto;
        padding: 6rem 0 18rem;
        overflow: visible;
        background: #0085A6;
    }

    .cards_title {
        width: 100%;
        margin: 0 auto;
    }

    .cards_title_svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .cards_list {
        margin-top: 2vw;
        display: flex;
        flex-direction: column;
        gap: 10vw;
        overflow: visible;
    }

    .cards_item {
        --cards-brush-reveal: 0%;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .cards_item.is-cards-in {
        --cards-brush-reveal: 100%;
    }

    .cards_num {
        width: 100%;
        margin: 0 auto;
    }

    .cards_num,
    .cards_body {
        will-change: transform, opacity;
    }

    .cards_item.is-cards-in .cards_num,
    .cards_item.is-cards-in .cards_body {
        will-change: auto;
    }

    .cards_item:nth-child(1):after,
    .cards_item:nth-child(2):after,
    .cards_item:nth-child(3):after,
    .cards_item:nth-child(4):after,
    .cards_item:nth-child(5):after,
    .cards_item:nth-child(6):after {
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        pointer-events: none;
        z-index: 0;
        will-change: clip-path;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .cards_item:nth-child(odd):after {
        clip-path: inset(0 calc(100% - var(--cards-brush-reveal)) 0 0);
    }

    .cards_item:nth-child(even):after {
        clip-path: inset(0 0 0 calc(100% - var(--cards-brush-reveal)));
    }

    .cards_item.is-cards-in:after {
        will-change: auto;
    }

    .cards_item.disable .cards_hover_visual_content {
        display: none;
    }

    .cards_item:nth-child(1):after {
        padding-top: 39.9%;
        background-image: url(../images/cards/cards_brush01.svg);
        background-position: center;
        bottom: 0;
    }

    .cards_item:nth-child(2):after {
        padding-top: 40.9%;
        background-image: url(../images/cards/cards_brush02.svg);
        background-position: center;
        top: -3.9rem;
    }

    .cards_item:nth-child(3):after {
        padding-top: 54.6%;
        background-image: url(../images/cards/cards_brush03.svg);
        background-position: bottom;
        top: 1rem;
    }

    .cards_item:nth-child(4):after {
        padding-top: 26.4%;
        background-image: url(../images/cards/cards_brush04.svg);
        background-position: center;
        top: 50%;
    }

    .cards_item:nth-child(5):after {
        padding-top: 56.9%;
        background-image: url(../images/cards/cards_brush05.svg);
        background-position: center right;
        bottom: -30rem;
        background-size: 90% auto;
    }

    .cards_item:nth-child(6):after {
        padding-top: 44%;
        background-image: url(../images/cards/cards_brush06.svg);
        background-position: center;
        bottom: -30%;
    }

    .cards_num {
        position: relative;
        z-index: 2;
        margin-bottom: -0.5vw;
        width: 100%;
    }

    .cards_num_svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .cards_body {
        position: relative;
        z-index: 2;
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .cards_btn {
        display: none;
    }

    .cards_visual.splide {
        width: 100%;
        overflow: visible;
        transform: none;
        visibility: visible;
        height: auto;
    }

    .cards_visual .splide__track {
        overflow: visible;
        height: auto;
    }

    .cards_visual .splide__list {
        display: flex !important;
        gap: 2.5rem;
        justify-content: center;
        transform: none !important;
        height: auto !important;
    }

    .cards_visual .splide__slide {
        width: 18%;
        flex: 0 0 18%;
        position: relative;
        transform: none !important;
        cursor: pointer;
        transition: transform 0.25s ease;
    }

    .cards_visual .splide__slide:hover {
        transform: scale(1.1) !important;
    }

    .cards_visual .splide__slide img {
        width: 100%;
        height: auto;
        box-shadow: 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.75);
    }

    .cards_hover_visual_content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, black, transparent);
        color: white;
        height: 70%;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.2rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        pointer-events: none;
    }

    .cards_hover_visual_content p.visual-num {
        line-height: 160%;
        font-size: 1.5rem;
    }

    .cards_hover_visual_content p:nth-child(2) {
        line-height: 160%;
        font-size: 0.9vw;
        height: 6.5em;
    }

    .cards_visual_num {
        height: 4rem;
        width: auto;
        margin-bottom: 1rem;
    }

    .cards_visual_num img {
        height: 100% !important;
        width: auto !important;
        box-shadow: none !important;
    }

    .cards_item:not(.disable) .cards_visual .splide__slide:hover .cards_hover_visual_content {
        opacity: 1;
        visibility: visible;
    }

    @media (prefers-reduced-motion: reduce) {
        .cards_item {
            --cards-brush-reveal: 100%;
        }

        .cards_item:after {
            clip-path: none;
            will-change: auto;
        }

        .cards_num,
        .cards_body {
            opacity: 1 !important;
            transform: none !important;
            will-change: auto;
        }
    }

    /* ticket（PC: 内部 fixed / 親はコンテンツ高の透過スペーサー） */

    .ticket {
        position: relative;
        z-index: 1;
        overflow: visible;
        background: transparent;
        /* 高さは ticket-pc.js がコンテンツ実測でセット */
        height: auto;
        min-height: 0;
    }

    .ticket:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        content: '';
        display: block;
        padding-top: 7%;
        background: url(../images/cards/cards_bg_bototm_pc.svg) no-repeat center bottom;
        background-size: 100% auto;
        pointer-events: none;
        transform: translateY(-12%);
        z-index: 2;
    }

    .ticket.is-fixed:before {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .ticket_bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: url(../images/ticket/ticket_bg_pc.jpg) no-repeat center center;
        background-size: cover;
    }

    .ticket_inner {
        z-index: 1;
        width: 100%;
        z-index: 1;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16vw 0 18vw;
        position: relative;
        z-index: 2;
    }

    .ticket_inner.is-fixed {
        position: fixed;
        top: 50%;
        left: 0;
        right: 0;
        width: 100%;
        transform: translateY(-50%);
    }

    .ticket_content {
        --ticket-space-ratio: 0.75;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 65%;
        height: auto;
        box-sizing: border-box;
    }

    .ticket_logo,
    .ticket_para,
    .ticket_btn {
        flex-shrink: 0;
        max-width: 100%;
    }

    .ticket_logo_sp,
    .ticket_para_sp,
    .ticket_btn_sp {
        display: none;
    }

    .ticket_logo {
        width: 30%;
        max-width: 100%;
        margin: 0 0 3vw;
    }

    .ticket_logo_pc {
        display: block;
        width: 100%;
        height: auto;
    }

    .ticket_para {
        width: 100%;
        margin: 0 0 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ticket_para_sp {
        display: none;
    }

    .ticket_para_pc {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 3vw;
    }

    .ticket_para_line1 {
        display: block;
        width: 70%;
        height: auto;
    }

    .ticket_para_line2 {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .ticket_btn {
        display: block;
        width: 26vw;
        max-width: 100%;
        margin: 0;
    }

    .ticket_btn_pc {
        display: block;
        width: 100%;
        height: auto;
        transition: transform 0.25s ease;
    }

    .ticket_btn:hover .ticket_btn_pc {
        transform: scale(1.1);
    }

    /* schedule */

    .schedule {
        position: relative;
        z-index: 2;
        margin-top: 1vw;
    }

    .schedule:before {
        content: '';
        display: block;
        width: 100%;
        padding-top: 7%;
        background: #A4A4A5;
        position: absolute;
        left: 0;
        transform: translateY(-92%);
        z-index: 0;
        background: url(../images/schedule/schedule_bg_top_pc.svg) no-repeat top center;
        background-size: 100% auto;
    }

    .schedule_inner {
        padding: 5rem 0 9rem;
        gap: 0;
        background: #A4A4A5;
    }

    .schedule_content {
        width: 60%;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .schedule_title {
        width: 47.15%;
        flex-shrink: 0;
    }

    .schedule_visual {
        width: 42.6%;
        flex-shrink: 0;
    }

    .schedule_visual_btn {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        cursor: zoom-in;
    }

    .schedule_title picture,
    .schedule_visual picture {
        display: block;
        width: 100%;
    }

    .schedule_title img,
    .schedule_visual img {
        display: block;
        width: 100%;
        height: auto;
    }

    .schedule_visual img {
        box-shadow: 2rem 2rem 0 #0085A6;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .schedule_visual_btn:hover img,
    .schedule_visual_btn:focus-visible img {
        transform: translate(-0.4rem, -0.4rem);
        box-shadow: 2.4rem 2.4rem 0 #0085A6;
    }

    .schedule_visual_btn:focus-visible {
        outline: 2px solid #0085A6;
        outline-offset: 0.4rem;
    }

    /* schedule lightbox */

    .schedule_lightbox {
        position: fixed;
        inset: 0;
        z-index: 220;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4rem;
        visibility: hidden;
        pointer-events: none;
    }

    .schedule_lightbox.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    .schedule_lightbox_bg {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.72);
        opacity: 0;
        transition: opacity 0.3s ease;
        cursor: zoom-out;
    }

    .schedule_lightbox_panel {
        position: relative;
        z-index: 1;
        max-width: min(90vw, 88.5rem);
        max-height: 90vh;
        opacity: 0;
        transform: scale(0.92);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .schedule_lightbox.is-open .schedule_lightbox_bg,
    .schedule_lightbox.is-open .schedule_lightbox_panel {
        opacity: 1;
    }

    .schedule_lightbox.is-open .schedule_lightbox_panel {
        transform: scale(1);
    }

    .schedule_lightbox_img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 90vh;
        box-shadow: unset;
    }

    .schedule_lightbox_close {
        position: absolute;
        top: -1.2rem;
        right: -1.2rem;
        z-index: 2;
        width: 4.4rem;
        height: 4.4rem;
        border: 0;
        border-radius: 50%;
        background: #0085A6;
        cursor: pointer;
        box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.35);
    }

    .schedule_lightbox_close::before,
    .schedule_lightbox_close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.8rem;
        height: 0.2rem;
        background: #fff;
    }

    .schedule_lightbox_close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .schedule_lightbox_close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .schedule_visual img,
        .schedule_lightbox_bg,
        .schedule_lightbox_panel {
            transition: none;
        }
    }

    /* arena */

    .arena {
        position: relative;
        z-index: 3;
        background: #0085A6;
    }

    .arena_main {
        background-image: url(../images/arena/arena_bg_pc.jpg);
        background-size: cover;
        background-position: center top;
    }

    .arena_inner {
        width: 60%;
        margin: 0 auto;
        padding: 7vw 0 7vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5.9rem;
    }

    .arena_title {
        width: 100%;
    }

    .arena_title picture {
        display: block;
        width: 100%;
    }

    .arena_title img {
        display: block;
        width: 100%;
        height: auto;
    }

    .arena_body {
        width: 90%;
    }

    .arena_body > p + p,
    .arena_gallery + p {
        margin-top: 5.9rem;
    }

    .arena_gallery {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 2rem;
        width: 100%;
    }

    .arena_gallery_btn {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: zoom-in;
    }

    .arena_gallery_btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 4px;
    }

    .arena_gallery_btn img {
        display: block;
        width: 100%;
        height: auto;
    }

    .arena_body picture {
        display: block;
        width: 100%;
    }

    .arena_body img {
        display: block;
        width: 100%;
        height: auto;
    }

    .arena_lightbox {
        padding: 4rem;
    }

    .arena_lightbox_close {
        top: -1.2rem;
        right: -1.2rem;
        width: 4.4rem;
        height: 4.4rem;
    }

    /* footer */

    .footer {
        background: #080404;
        height: 11vw;
        z-index: 3;
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .footer_inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.3vw;
        width: 16vw;
        margin: 0 auto;
    }

    .footer_logo {
        width: 100%;
    }

    .footer_logo a {
        display: block;
    }

    .footer_logo picture {
        display: block;
        width: 100%;
    }

    .footer_logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    .footer_nav {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        gap: 0;
    }

    .footer_nav_item {
        display: block;
    }

    .footer_nav_item:first-child {
        height: 0.8vw;
    }

    .footer_nav_item:last-child {
        height: 0.8vw;
    }

    .footer_nav_item picture {
        display: block;
        height: 100%;
    }

    .footer_nav_item img {
        display: block;
        width: auto;
        height: 100%;
    }

    .arena_btn_wrap {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        justify-content: center;
        background: #0085A6;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease, visibility 0.35s ease;
        box-shadow: 0 0 0.7rem rgba(0, 0, 0, .5);
        height: 6vw;
        align-items: center;
    }

    .arena_btn_wrap.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .arena_btn_wrap {
            transition: none;
        }
    }

    .arena_btn {
        display: block;
        height: 4vw;
        min-height: 71%;
        transition: transform 0.25s ease;
    }

    .arena_btn:hover {
        transform: scale(1.1) !important;
    }

    .arena_btn img {
        height: 100%;
        width: auto;
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size: 2.422222vw;
        --fixed-cta-height: 11.4rem;
    }

    /* mv */

    .mv {
        position: relative;
        background: #0085A6;
        z-index: 2;
    }

    .mv {
        --mv-bg-clip: 100%;
    }

    .mv:before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        padding-top: 193%;
        background: url(../images/mv/mv_bg_sp.png) no-repeat top center #0085A6;
        background-size: 100% auto;
        clip-path: inset(0 0 var(--mv-bg-clip) 0);
        will-change: clip-path;
    }

    .mv.is-mv-animated:before {
        clip-path: inset(0 0 0 0);
    }

    .mv_inner {
        padding-top: 193%;
        position: relative;
    }

    .mv_title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        clip-path: inset(0 0 100% 0);
        will-change: clip-path, transform;
    }

    .mv_title picture,
    .mv_visual picture,
    .mv_label picture {
        display: block;
        width: 100%;
    }

    .mv.is-mv-animated .mv_title {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }

    .mv_title img {
        width: 100%;
        height: auto;
    }

    .mv_visual {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        transform: translateY(2rem);
        will-change: transform;
    }

    .mv.is-mv-animated .mv_visual {
        transform: translateY(0);
    }
    
    .mv_visual img {
        width: 100%;
        height: auto;
    }

    .mv_label {
        position: absolute;
        top: 70.8%;
        left: 0;
        width: 100%;
        height: auto;
        clip-path: inset(0 100% 0 0);
        will-change: clip-path;
    }

    .mv.is-mv-animated .mv_label {
        clip-path: inset(0 0 0 0);
    }

    @media (prefers-reduced-motion: reduce) {
        .mv {
            --mv-bg-clip: 0%;
        }

        .mv:before,
        .mv_title,
        .mv_visual,
        .mv_label {
            clip-path: none;
            transform: none;
            transition: none;
        }
    }

    .mv_label img {
        width: 100%;
        height: auto;
    }

    /* cards */

    .cards {
        position: relative;
        z-index: 2;
    }

    .cards_inner {
        padding-top: 1rem;
        padding-bottom: 2rem;
        overflow: hidden;
        background: #0085A6;
    }

    .cards_title {
        width: 100%;
        margin: 0 auto;
    }

    .cards_title_svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .cards_list {
        margin-top: 10rem;
        display: flex;
        flex-direction: column;
        gap: 6rem;
    }

    .cards_item {
        --cards-brush-reveal: 0%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: relative;
    }

    .cards_item.is-cards-in {
        --cards-brush-reveal: 100%;
    }

    .cards_num,
    .cards_body {
        will-change: transform, opacity;
    }

    .cards_item.is-cards-in .cards_num,
    .cards_item.is-cards-in .cards_body {
        will-change: auto;
    }

    .cards_item:nth-child(1):after,
    .cards_item:nth-child(2):after,
    .cards_item:nth-child(3):after,
    .cards_item:nth-child(4):after,
    .cards_item:nth-child(5):after,
    .cards_item:nth-child(6):after {
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        pointer-events: none;
        z-index: 1;
        will-change: clip-path;
    }

    .cards_item:nth-child(odd):after {
        clip-path: inset(0 calc(100% - var(--cards-brush-reveal)) 0 0);
    }

    .cards_item:nth-child(even):after {
        clip-path: inset(0 0 0 calc(100% - var(--cards-brush-reveal)));
    }

    .cards_item.is-cards-in:after {
        will-change: auto;
    }

    .cards_item.disable .cards_hover_visual_content {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .cards_item {
            --cards-brush-reveal: 100%;
        }

        .cards_item:after {
            clip-path: none;
            will-change: auto;
        }

        .cards_num,
        .cards_body {
            opacity: 1 !important;
            transform: none !important;
            will-change: auto;
        }
    }

    .cards_item:nth-child(1):after {
        padding-top: 63%;
        background: url(../images/cards/cards_brush01.png) no-repeat bottom center;
        background-size: 100% auto;
        bottom: 7%;
    }

    .cards_item:nth-child(2):after {
        padding-top: 63%;
        background: url(../images/cards/cards_brush02.png) no-repeat bottom center;
        background-size: 100% auto;
        bottom: 19%;
    }

    .cards_item:nth-child(3):after {
        padding-top: 91%;
        background: url(../images/cards/cards_brush03.png) no-repeat bottom center;
        background-size: 100% auto;
        bottom: -16%;
    }

    .cards_item:nth-child(4):after {
        padding-top: 91%;
        background: url(../images/cards/cards_brush04.png) no-repeat bottom center;
        background-size: 100% auto;
        bottom: 9%;
    }

    .cards_item:nth-child(5):after {
        padding-top: 91%;
        background: url(../images/cards/cards_brush05.png) no-repeat bottom center;
        background-size: 100% auto;
        bottom: -19%;
    }

    .cards_item:nth-child(6):after {
        padding-top: 91%;
        background: url(../images/cards/cards_brush06.png) no-repeat bottom center;
        background-size: 100% auto;
        bottom: -4%;
    }

    .cards_num {
        width: 100%;
        margin-bottom: -0.4rem;
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
    }

    .cards_num_svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .cards_body {
        position: relative;
        z-index: 2;
        width: 36rem;
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        align-items: flex-start;
    }

    .cards_visual {
        width: 100%;
        overflow: visible;
        transform: translateX(-6rem);
    }

    .cards_visual .splide__track {
        overflow: visible;
    }

    .cards_visual .splide__slide {
        width: 19rem;
        position: relative;
        cursor: pointer;
        transform: scale(1);
        transform-origin: center center;
        transition: transform 0.25s ease;
    }

    .cards_item:not(.disable) .cards_visual .splide__slide.is-hover-active {
        transform: scale(1.1);
        z-index: 3;
    }

    .cards_visual .splide__slide img {
        width: 100%;
        height: auto;
        box-shadow: 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.75);
    }

    .cards_btn {
        width: 7.865rem;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .cards_btn img {
        width: 100%;
        height: auto;
        pointer-events: none;
    }

    .cards_hover_visual_content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, black, transparent);
        color: white;
        height: 70%;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-end;
        padding: 1.2rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        pointer-events: none;
    }

    .cards_hover_visual_content p {
        line-height: 160%;
        font-size: 1.2rem;
        height: 6.2em;
    }
    
    .cards_visual_num {
        height: 9vw !important;
        width: auto;
        margin-bottom: 0.6rem;
    }

    .cards_visual_num img {
        height: 100% !important;
        width: auto !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .cards_item:not(.disable) .cards_visual .splide__slide:hover {
            transform: scale(1.1);
            z-index: 3;
        }

        .cards_visual .splide__slide:hover .cards_hover_visual_content {
            opacity: 1;
            visibility: visible;
        }
    }

    .cards_visual .splide__slide.is-hover-active .cards_hover_visual_content {
        opacity: 1;
        visibility: visible;
    }

    /* ticket（SP: 内部 fixed / 親はコンテンツ高の透過スペーサー） */

    .ticket {
        position: relative;
        z-index: 1;
        overflow: visible;
        background: transparent;
        /* 高さは ticket-sp.js がコンテンツ実測でセット */
        height: auto;
        min-height: 0;
    }

    .ticket:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        content: '';
        display: block;
        padding-top: 19%;
        background: url(../images/cards/cards_bg_bottom_sp.png) no-repeat center top;
        background-size: 100% auto;
        pointer-events: none;
        transform: translateY(-20%);
        z-index: 2;
    }

    .ticket.is-fixed:before {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .ticket_bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        z-index: 0;
        background: #000 url(../images/ticket/tikect_bg_sp.png) no-repeat center center;
        background-size: 100% auto;
        pointer-events: none;
    }

    .ticket_inner {
        position: relative;
        z-index: 1;
        width: 30.6rem;
        margin: 0 auto;
        padding-top: 10rem;
        padding-bottom: 10rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ticket_inner.is-fixed {
        position: fixed;
        top: calc(var(--vh, 1vh) * 50);
        left: 0;
        right: 0;
        width: 100%;
        transform: translateY(-50%);
    }

    .ticket_content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ticket_logo {
        width: 18.3rem;
    }

    .ticket_logo_pc,
    .ticket_para_pc,
    .ticket_btn_pc {
        display: none;
    }

    .ticket_logo_sp {
        width: 100%;
        height: auto;
    }

    .ticket_para {
        width: 29.7rem;
        margin-top: 1.9rem;
    }

    .ticket_para_sp {
        width: 100%;
        height: auto;
    }

    .ticket_btn {
        display: block;
        width: 30.6rem;
        margin-top: 3.1rem;
    }

    .ticket_btn_sp {
        width: 100%;
        height: auto;
    }

    /* schedule */

    .schedule {
        position: relative;
        z-index: 2;
    }

    .schedule:before {
        content: '';
        display: block;
        width: 100%;
        padding-bottom: 7rem;
        background: url(../images/schedule/schedule_bg_top_sp.png) no-repeat top center;
        background-size: 100% auto;
    }

    .schedule_inner {
        background: #A4A4A5;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.1rem;
        padding: 4rem 1.6rem 6rem;
    }

    .schedule_content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.1rem;
    }

    .schedule_title {
        width: 27.5rem;
    }

    .schedule_visual_btn {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        cursor: default;
        pointer-events: none;
    }

    .schedule_title picture,
    .schedule_visual picture {
        display: block;
        width: 100%;
    }

    .schedule_title img,
    .schedule_visual img {
        width: 100%;
        height: auto;
        display: block;
    }

    .schedule_visual {
        width: 100%;
    }

    .schedule_lightbox {
        display: none;
    }

    /* arena */

    .arena {
        background: #0085A6;
        position: relative;
        z-index: 2;
    }

    .arena_main {
        position: relative;
        overflow: hidden;
        background: url(../images/arena/arena_bg_sp.png) no-repeat top center;
        background-size: 100% auto;
    }
    .arena_inner {
        position: relative;
        z-index: 1;
        width: 34.5rem;
        margin: 0 auto;
        padding: 9.2rem 0 4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4.2rem;
    }

    .arena_title {
        width: 100%;
    }

    .arena_title picture {
        display: block;
        width: 100%;
    }

    .arena_title img {
        width: 100%;
        height: auto;
    }

    .arena_body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.9rem;
    }

    .arena_gallery {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 1rem;
        width: 100%;
    }

    .arena_gallery_btn {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: zoom-in;
    }

    .arena_gallery_btn img {
        display: block;
        width: 100%;
        height: auto;
    }

    .arena_body picture {
        display: block;
        width: 100%;
    }

    .arena_body img {
        width: 100%;
        height: auto;
    }

    .arena_btn_wrap {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        padding: 3rem 3rem calc(3rem + env(safe-area-inset-bottom, 0px));
        display: flex;
        justify-content: center;
        background: #0085A6;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.35s ease, visibility 0.35s ease;
        box-shadow: 0 0 0.7rem rgba(0, 0, 0, .5);
    }

    .arena_btn_wrap.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .arena_btn_wrap {
            transition: none;
        }
    }

    .arena_btn {
        display: block;
        width: 35.5rem;
    }

    .arena_btn img {
        width: 100%;
        height: auto;
    }

    /* footer */

    .footer {
        background: #080404;
        padding: 3rem 4rem calc(3rem + var(--fixed-cta-height, 11.4rem) + env(safe-area-inset-bottom, 0px));
        z-index: 2;
        position: relative;
    }

    .footer_inner {
        width: 29.5rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 2.9rem;
    }

    .footer_logo {
        width: 29.5rem;
    }

    .footer_logo picture {
        display: block;
        width: 100%;
    }

    .footer_logo img {
        width: 100%;
        height: auto;
    }

    .footer_nav {
        display: flex;
        align-items: center;
        gap: 6.6rem;
    }

    .footer_nav_item {
        display: block;
    }

    .footer_nav_item picture {
        display: block;
        width: 100%;
    }

    .footer_nav_item:first-child {
        width: 13.6rem;
    }

    .footer_nav_item:last-child {
        width: 9.2rem;
    }

    .footer_nav_item img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 1300px) and (min-width: 768px) {
    .cards_hover_visual_content p {
        line-height: 160%;
        font-size: 1vw;
    }
    .cards_visual_num {
        height: 2.5vw;
    }
}

@media (max-aspect-ratio: 4/3) and (min-width: 768px) {
    .ticket_inner {
        padding: 12vw 0;
    }
}