@charset "UTF-8";

/*========================
Index
========================*/

.contsArea {
    width: 90%;
    margin: 0 auto;
}
.sortLists {width: 100%;}
.sortLists .sortList .BtnCenter a{
    padding:  1.1em 0em 1.2em;
}

.selectBox .sortList .BtnCenter {
    width: 100%;
}

.pagerLists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.pagerLists .pagerList {
    /* width: 50%; */
}

.pl {
    text-align: left;
    padding: 0 0 0 2em;
}

.pr {
    text-align: right;
    padding: 0 2em 0 0;
}

.pagerLists .numberSet {}

.pagerLists .numberSet .nuberLists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pagerLists .numberSet .nuberLists .nuberList {
    margin: 0 .5em;
}

.pagerLists .numberSet .nuberLists .nuberList a {
    color: #909090;
}

.pagerLists .numberSet .nuberLists .nuberList.active a {
    color: #F676A6;
}

.indexTxtSet .indexInfo .eventCate {
    width: 30%;
}



@media screen and (min-width: 641px) {
    .indexTxtSet .indexInfo .eventCate {
        width: 100%;
        max-width: 120px;
    }
}

@media screen and (min-width: 961px) {
    .selectBox .sortLists {
        width: 60%;
    }

    .theaterTopBtn {
        min-width: 260px;
    }
}

@media screen and (min-width: 1366px) {
    .contsArea {
        /* width: 1228px; */
    }
}

.guideBlk {
    padding: 2rem 2rem 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    background: #fff;
}

.guideBlk .imgBlk {
    overflow: hidden;
}

.guideBlk .txtBlk {
    margin: 2rem auto 0;
}

@media screen and (min-width: 641px) {
    .guideBlk {
        -ms-flex-flow: wrap;
        flex-flow: wrap;
        padding: 2.5rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .guideBlk .imgBlk {
        width: 50%;
    }

    .guideBlk .txtBlk {
        width: 46%;
        margin: 0 auto 0 4%;
    }
}


/*========================
detail
========================*/

.contsArea {
    max-width: 1228px;
    text-align: left;
}

.contsArea .titSet {
    position: relative;
    padding: 0;
    text-align: center;
}

.contsArea .titSet h1 {
    line-height: 1.25;
}

.contsArea .titSet::after {
    /* content: ""; */
    background-image: linear-gradient(to right, #F676A6, #F676A6 2px, transparent 2px, transparent 8px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-position: bottom;
}

.newsInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.shareBlk {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    /* border-top: 1px solid #F676A6; */
    padding: 1.5em 0 0;
    position: relative;
}

.shareBlk::before {
    content: "";
    background-image: linear-gradient(to right, #F676A6, #F676A6 2px, transparent 2px, transparent 8px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-position: top;
    bottom: 0;
}

.shareBlk .sbLists {
    margin: 0 0 0 1.2em;
}

.shareBlk .sbLists a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.shareBlk .sbLists svg {
    fill: #F676A6;
    width: 1.25em;
    height: 1.25em;
}

.backBlk {
    text-align: center;
}

.backBlk .BtnCenter {
    width: 40%;
}

.newsInfo .date {
    margin: 0 2em 0 0;
}

@media screen and (min-width: 641px) {}

@media screen and (min-width: 961px) {}

@media screen and (min-width: 1366px) {}

.theaterBlk {}

.theaterScheduleBlk {
    width: 100%;
}

.theaterInfoBlk {}

.theaterSeatBlk {}

.theaterSeatBlk .seatBlk {
    background: #fff;
    padding: 2rem;
    overflow: hidden;
}

.theaterAccessBlk .mapSet {
    width: 100%;
    padding: 4rem 2rem;
    background: #fff;
}

.theaterAccessBlk .mapSet iframe {
    width: 100%;
}

.theaterAccessBlk .mapBlk {}

.theaterAccessBlk .txtBlk {
    margin: 2rem auto 0;
}

.theaterAccessBlk {}

@media screen and (min-width: 641px) {
    .theaterBlk {}

    .theaterScheduleBlk {
        width: 100%;
    }

    .theaterInfoBlk {}

    .theaterSeatBlk {
        max-width: 640px;
    }

    .theaterSeatBlk .seatBlk {
        padding: 2rem;
    }

    .theaterAccessBlk .mapSet {
        width: 100%;
        padding: 4rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .theaterAccessBlk .mapSet iframe {
        width: 100%;
    }

    .theaterAccessBlk .mapBlk {
        width: 60%;
    }

    .theaterAccessBlk .txtBlk {
        margin: 0 auto 0 5%;
        width: 35%;
    }

    .theaterAccessBlk {}
}

@media screen and (min-width: 961px) {
    .theaterNaviBlk .menuSet {
        padding: 0 2vw;
        width: 100%;
    }

    .theaterNaviBlk .menuSet .menuLists {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .theaterNaviBlk .menuSet .menuLists .menuList {
        width: calc(25% - 1vw);
        border-radius: 2.0rem;
        margin: 0 .5vw;
    }

    .theaterNaviBlk .menuSet .menuLists > .menuList a {
        padding: 1em .5em;
    }

    .theaterNaviBlk .menuSet .menuLists > .menuList .menuBlk {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
    }

    .theaterNaviBlk .menuSet .menuLists > .menuList .menuBlk figcaption {
        margin: 0 auto;
        width: 50%;
    }

    .theaterNaviBlk .menuSet .menuLists > .menuList .menuBlk svg {
        margin: 0 0 0 auto;
        width: 8vw;
        height: 8vw;
    }

    .theaterNaviBlk .menuSet .menuLists > .menuList .menuBlk {
        -ms-flex-flow: wrap;
        flex-flow: wrap;
    }
}


/*======================================
劇場までの流れ
======================================*/

.howtoArea {}

.howtoArea .howtoLists {}

.howtoArea .howtoLists .howtoList {}

.howtoArea .howtoLists .howtoList {}

.howtoArea .howtoLists .howtoList + .howtoList {
    margin: 0;
}

.howtoList .howtoIndexBlk {
    padding: 2rem 2.5em 2rem 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.howtoList .howtoIndexBlk.accordion::after {
    right: 1.5em;
}

.howtoList .howtoIndexBlk .howtoNum {
    /* width: 20%; */
}

.howtoList .howtoIndexBlk .howtoTtl {
    width: 75%;
    margin: 0 0 0 5%;
}

.howtoList .howtoCnt {
    height: 1rem;
    position: relative;
    padding: 0 2rem 0 6rem;
}
.howtoList:last-of-type .howtoCnt{
    height: 0;
}

.howtoList .howtoCnt.openAcc {
    height: 100%;
    opacity: 1;
    padding: 2rem 2rem 2rem 6rem;
    position: relative;
    -webkit-transition: .6s all ease;
    transition: .6s all ease;

}
.howtoList .howtoCnt *{
    opacity: 0;
}
.howtoList .howtoCnt.openAcc *{
    opacity: 1;

}
.howtoList .howtoCnt::before {
    content: "";
    background: #E6E6E6;
    width: 2rem;
    height: 100%;
    position: absolute;
    left: 3rem;
    top: 0;
}

.howtoList .howtoCnt .howtoImg {
    overflow: hidden;
}

.howtoList .howtoCnt .howtoTxt {}

.howtoList .howtoCnt .howtoImg + .howtoTxt {
    margin: 1rem auto 0;
}

.howtoCompBlk .BtnCenter {
    max-width: 400px;
    width: 100%;
    min-width: 230px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tickets .theaterNaviBlk .menuLists{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media screen and (min-width: 641px) {
    .howtoArea {}

    .howtoArea .howtoLists {
        max-width: 900px;
        margin: 0 auto;
    }
    .howtoList .howtoCnt{
        padding: 0 4rem 0 9rem;
    }
    .howtoList .howtoCnt.openAcc {
        padding: 2.5rem 4rem 2.5em 9rem;
    }
}

/* ==============================================
   劇場までの流れ 6枚画像グリッド＆矢印設定
============================================== */
/* 矢印のはみ出し表示を許可 */
.howtoSet .howtoCnt {
    overflow: visible !important;
}

/* 6枚配置用グリッドコンテナ */
.howtoGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 45px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
    overflow: visible !important;
}

/* 各カードアイテム */
.howtoItem {
    position: relative !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    overflow: visible !important;
    text-align: left !important;
}

/* 画像枠（PC用矢印の基準位置） */
.howtoItem .howtoImg {
    position: relative !important;
    margin-bottom: 12px;
    overflow: visible !important;
    width: 100%;
}

/* 画像自体のサイズ最大化 */
.howtoItem .howtoImg img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* 画像下のテキストを完全に左寄せ指定（既存のセンタリングを強制作消） */
.howtoItem .howtoTxt {
    width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ----------------------------------------------
   PC表示（768px以上）：画像枠の右横中央に右向き三角矢印
---------------------------------------------- */
@media screen and (min-width: 768px) {
    .howtoItem:nth-child(odd) .howtoImg::after {
        content: '';
        display: block !important;
        position: absolute;
        top: 50%;
        right: -32px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 14px 0 14px 18px;
        border-color: transparent transparent transparent #F676A6;
        transform: translateY(-50%);
        z-index: 10;
    }
}

/* ----------------------------------------------
   SP表示（767px以下）：縦1列 & コンパクトな下向き三角矢印
---------------------------------------------- */
@media screen and (max-width: 767px) {
    .howtoGrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .howtoItem:not(:last-child)::after {
        content: '';
        display: block !important;
        position: absolute;
        bottom: -22px;
        left: 50%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 13px 10px 0 10px;
        border-color: #F676A6 transparent transparent transparent;
        transform: translateX(-50%);
        z-index: 10;
    }
}

/*Q&A*/
.qaSet .howtoList .howtoIndexBlk .howtoTtl {
    width: 95%;
    margin: 0 auto 0 0;
}

.qaSet .howtoList .howtoCnt {
    padding: 0 2rem 0;
}
.qaSet .howtoList .howtoCnt.openAcc {
    padding: 2rem 2rem 4rem;
}

.qaSet .howtoList .howtoCnt::before {
    content: none;
}

/*======================================
セットリスト 一覧
======================================*/

.setlistBlk {}

.setlistBlk .setLists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-start;
}

.setlistBlk .setLists .setList {
    width: calc(50% - 4vw);
    margin: 0 2vw 4vw;
    background: #fff;
    padding: 2rem 3vw 3rem;
    overflow: hidden;
}

.setlistBlk .setLists .setList .teanName {
    margin: 0 auto;
}
.setlistBlk .setLists .setList .teanName p{
    opacity: 1;
}

.setlistBlk .setLists .setList .liveImg {}

.setlistBlk .setLists .setList .songInfo {}

.setlistBlk .setLists .setList .songInfo .liveDate {}

.setlistBlk .setLists .setList .songInfo .liveTtl {}

@media screen and (min-width: 641px) {
    .setlistBlk {}

    .setlistBlk .setLists {
        width: 95%;
        margin: 0 auto;
        max-width: 1080px;
    }

    .setlistBlk .setLists .setList {
        width: calc(100% / 3 - 2vw);
        margin: 0 1vw 2vw;
    }

    .setlistBlk .setLists .setList .iconImg {
        width: 6vw;
    }

    .setlistBlk .setLists .setList .liveImg {}

    .setlistBlk .setLists .setList .songInfo {}

    .setlistBlk .setLists .setList .songInfo .liveDate {}

    .setlistBlk .setLists .setList .songInfo .liveTtl {}
}

@media screen and (min-width: 961px) {
    .setlistBlk {}

    .setlistBlk .setLists {}

    .setlistBlk .setLists .setList {}

    .setlistBlk .setLists .setList .iconImg {}

    .setlistBlk .setLists .setList .liveImg {}

    .setlistBlk .setLists .setList .songInfo {}

    .setlistBlk .setLists .setList .songInfo .liveDate {}

    .setlistBlk .setLists .setList .songInfo .liveTtl {}
}

@media screen and (min-width: 1281px) {}

/*======================================
セットリスト 詳細
======================================*/

.songlistBlk {
    background: #fff;
    padding: 2rem 1rem;
    width: 95%;
    margin: 0 auto;
    max-width: 1080px;
}

.songlistBlk .songLists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
}

.songlistBlk .songList {
    width: calc(50% - 4vw);
    margin: 0 2vw 4rem;
}

.songlistBlk .songList .imgBlk {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.songlistBlk .songList .movieCnt::before {
    content: "";
    background: url("../img/icon_movie.png") no-repeat;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: 10vw;
    height: 6vw;
    max-width: 38px;
    max-height: 26px;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    margin: 0 auto;
    background-size: contain;
    background-position: center;
}



.songlistBlk .songList .songInfo {
    text-align: left;
    padding: 0 0 0 .5em;
}

.songlistBlk .songList .songInfo .songTtl {}

.songlistBlk .songList .songInfo .swBlk {
    margin: .5rem auto 0;
}

.songlistBlk .songList .songInfo .swBlk p {}

.songlistBlk .songList .songInfo .swBlk p + p {}

/*setlist popup*/
.otherSetLists {
    width: 100%;
}

.otherSetLists .otherSetList {
    padding: .5em 1em;
    text-align: left;
}

.otherSetLists .otherSetList + .otherSetList {
    margin: 2rem auto 0;
}

/*movie popup*/
.moviePop{
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
}
.moviePop .btnClose{
    top: -2rem;
}
.moviePop .popMovBlk{}


.moviePop .popMovBlk {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.moviePop .popMovBlk::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}


.moviePop .popMovBlk iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


@media screen and (min-width: 641px) {
    .songlistBlk {}

    .songlistBlk .songLists {}

    .songlistBlk .songList {}

    .songlistBlk .songList .movieBlk {}

    .songlistBlk .songList .movieBlk .msYoutube {}

    .songlistBlk .songList .songInfo {}

    .songlistBlk .songList .songInfo .songTtl {}

    .songlistBlk .songList .songInfo .swBlk {}

    .songlistBlk .songList .songInfo .swBlk p {}

    .songlistBlk .songList .songInfo .swBlk p + p {}
}

@media screen and (min-width: 961px) {
    .song .otherSetBtn a{
        padding: 1.3em 5em 1.4em;
    }


    .songlistBlk {
        padding: 2rem 2rem;
    }

    .songlistBlk .songLists {}

    .songlistBlk .songList {
        width: calc(100% / 3 - 2vw);
        margin: 0 1vw 2rem;
    }

    .songlistBlk .songList .movieBlk {}

    .songlistBlk .songList .movieBlk .msYoutube {}

    .songlistBlk .songList .songInfo {}

    .songlistBlk .songList .songInfo .songTtl {}

    .songlistBlk .songList .songInfo .swBlk {
        margin: .1rem auto 0;
    }

    .songlistBlk .songList .songInfo .swBlk p {}

    .songlistBlk .songList .songInfo .swBlk p + p {}
}

/*======================================
MVP
======================================*/
.mvp {}

.mvp .guideBlk {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    /* text-align: center; */
}

.mvp .guideBlk .imgBlk {
    width: 60%;
    margin: 0 auto;
    max-width: 270px;
}

.mvp .guideBlk .mvpTtl {
    text-align: center;
}

.mvp .mvpLists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-start;
}

.mvp .mvpLists .mvpList {
    width: calc(100% / 3 - 2vw);
    margin: 0 1vw 2vw;
    background: #fff;
    border: 3px solid #EAE0CA;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .8rem;
}

.mvp .mvpLists .mvpList + .mvpList {}

.mvp .mvpLists .mvpList .mvpName {}

.mvp .mvpLists .mvpList .mvpDate {
    margin: .5rem auto 0;
}

@media screen and (min-width: 641px) {
    .mvp .guideBlk .mvpTtl {
        text-align: left;
    }

    .mvp {}

    .mvp .guideBlk {}

    .mvp .guideBlk .imgBlk {}

    .mvp .mvpLists {}

    .mvp .mvpLists .mvpList {
        width: calc(100% / 4 - 2vw);
    }

    .mvp .mvpLists .mvpList + .mvpList {}

    .mvp .mvpLists .mvpList .mvpName {}

    .mvp .mvpLists .mvpList .mvpDate {}
}

@media screen and (min-width: 961px) {}

/*======================================
配信
======================================*/


.deliveryBlk {
    background: #fff;
    padding: 3rem 3rem;
    width: 95%;
    margin: 0 auto;
    max-width: 1080px;
}

.deliveryBlk .deliveryImg {
    overflow: hidden;
}

.deliveryBlk .deliveryTxt {
    text-align: left;
}

.deliveryBlk .BtnCenter {
    max-width: 360px;
    min-width: 200px;
    width: 100%;
}

@media screen and (min-width: 641px) {
    .deliveryBlk {
        padding: 4rem 8rem;
        width: 90%;
    }

}

@media screen and (min-width: 961px) {
    .deliveryBlk {
    }

}