@charset "utf-8";

@media screen and (max-width: 1520px) {
    /* DRAWER */
    #drawer{
        width: 350px;
    }
    #drawer nav li,
    #drawer nav li a{
        font-size: var(--font-size-p);
    }


    .top-point__intro .wrap{
        max-width: var(--wrap);
    }
    .top-point__intro-grid__item a{
        padding-right: 30px;
    }
    .top-point__intro-grid__item a::before{
        right: 15px;
    }
    .top-point__intro-grid__item a{
        font-size: 14px;
    }
}


@media screen and (max-width: 1199px) {
    :root{
        --wrap: 100%;
        --wrap-sm: 100%;
    }
    .wrap{
        padding: 0 20px;
    }
}

@media screen and (max-width: 991px) {
    :root{
        --header-height: 60px;
        --padding: 90px;
    }

    .body-wrap{
        min-width: 320px;
    }


    /* HEADER */
    .header-menu__lang-text{
        display: none;
    }
    .header-logo img{
        width: 220px;
    }


    /* FOOTER */
    .footer-link__content-flex{
        display: block;
    }
    .footer-link__content-flex__item{
        width: 300px;
        margin: 0 auto 10px;
    }
    .footer-link__content-flex__item:last-child{
        margin-bottom: 0;
    }


    /* TOP */
    .top-schedule__ttl{
        font-size: 26px;
    }
    .top-schedule__date-text{
        font-size: 16px;
    }
    .top-schedule__date-text span{
        font-size: 22px;
    }
    .top-schedule__date-text{
        padding-top: 16px;
        padding-bottom: 14px;
    }
    .top-ticket__card.all a::after {
        background: url(img/top/ticket-bg-all-char01.webp) no-repeat left -25px bottom / 250px, url(img/top/ticket-bg-all-char02.webp) no-repeat right -15px bottom / 250px;
    }
    .top-ticket__content-grid{
        grid-template-columns: repeat(1,1fr);
    }
    .top-point__intro{
        padding: var(--padding) 0;
    }
    .top-point__intro-grid{
        grid-template-columns: repeat(2,1fr);
    }
    .top-point__sec-header__num{
        transform: translateX(-50%);
        left: 50%;
        top: -115px;
    }
    .top-point__sec-flex__img{
        max-width: 100%;
        margin-bottom: 25px;
    }
    .top-point__sec-flex__box{
        max-width: 100%;
        padding: 0;
    }
    .top-point__sec-howto__flex{
        align-items: flex-start;
    }
    .top-point__sec-howto__flex-img{
        max-width: 100%;
        margin-bottom: 25px;
        text-align: center;
    }
    .top-point__sec-howto__flex-box{
        max-width: 100%;
        padding: 0;
    }
    #modal-animate{
        max-width: calc(100% - 40px);
    }
}

@media screen and (max-height: 500px) {
    .drawer-sns{
        position: initial;
        margin-top: 25px;
    }
}

@media screen and (max-width: 480px) {
    :root{
        --font-size-h1: 28px;
        --font-size-h2: 24px;
    }

    br.s-up{
        display: block;
    }


    /* HEADER */
    #header{
        padding: 0 20px;
    }
    #drawer{
        width: 100vw;
    }
    #drawer nav li:not(:last-child){
        margin-bottom: 15px;
    }
    .drawer-sns{
        bottom: 40px;
    }


    /* TOP */
    .mv-logo__item:nth-of-type(1) img{
        width: 116px;
    }
    .mv-logo__item:nth-of-type(2) img{
        width: 135px;
    }
    .mv-logo{
        gap: 15px;
    }
    .mv .wrap{
        padding: 0 10px;
    }
    .top-schedule__date-label{
        width: max-content;
    }
    .top-schedule__date-text{
        padding-right: 0;
        padding-left: 0;
        display: block;
    }
    .news-box__item{
        max-width: 100%;
        margin-top: 24px;
    }
    .news-box{
        display: block;
    }
    .top-ticket__content-lg a .top-ticket__location{
        width: max-content;
    }
    .top-ticket__card.all a::after {
        /* background: url(img/top/ticket-bg-all-char01.webp) no-repeat left -25px bottom / 180px, url(img/top/ticket-bg-all-char02.webp) no-repeat right -15px bottom / 170px; */
        background: url(img/top/ticket-bg-all-char01.webp) no-repeat left 0px bottom / 170px, url(img/top/ticket-bg-all-char02.webp) no-repeat right 0px bottom / 160px;
    }
    .top-ticket__card a::after{
        background-size: 220px;
    }
    .top-ticket__card.osaka a::after{
        /* background-size: 280px;
        background-position: left -40px bottom; */
        background-size: 230px;
        background-position: left 5px bottom;
    }
    .top-point__intro-grid{
        grid-template-columns: repeat(1,1fr);
    }
    .top-point__sec-header__ttl{
        height: auto;
        padding: 48px 24px;
    }
    .top-point__sec-grid{
        grid-template-columns: repeat(1,1fr);
    }
    .top-point__sec-howto__flex-box__purchase a{
        display: flex;
        max-width: 100%;
    }
    .top-point__sec-howto__flex-box__app{
        justify-content: center;
    }
    .top-point__sec-howto__flex-box__app-link:nth-of-type(1) img{
        width: 140px;
    }
    .top-point__sec-howto__flex-box__app-link:nth-of-type(2) img{
        width: 180px;
    }
    .top-point__sec-howto__spot-tab li::before{
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        border-width: 4px;
    }
    .top-event__content-comingsoon{
        font-size: var(--font-size-p);
    }
    .archive-card{
        max-width: 100%;
    }
    .archive-card__thumb{
        text-align: center;
    }
}