@charset "utf-8";

/* ==========================================================================
   BAKURETSU SUB PAGES
   ticket.html / about.html / story.html

   01. FOUNDATION / SUBPAGE SHELL
   02. PAGE PROGRESS
   03. HEADER / SUBPAGE NAVIGATION
   04. SHARED SUB HERO
   05. SHARED CONTENT / CTA
   06. TICKET
   07. ABOUT
   08. ABOUT / PHOTO RAIL
   09. STORY
   10. STORY / PHOTO MOTION
   11. SUBPAGE FOOTER / FIXED QUICK NAV
   ========================================================================== */


/* ==========================================================================
   01. FOUNDATION / SUBPAGE SHELL
   ========================================================================== */

/* ---------- PC / BASE ---------- */
body.subpage {
    --sub-gutter: clamp(20px, 5vw, 72px);
    --sub-max: 1120px;
    padding-top: 0;
    background: #fff4f8;
}

body.subpage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -10;
    background: #f5f5f5;
}

/* ---------- SMALL SP <= 600px ---------- */
@media (max-width: 600px) {
    body.subpage {
        --sub-gutter: 20px;
    }
}


/* ==========================================================================
   02. PAGE PROGRESS
   ========================================================================== */

/* Loading is intentionally shared with index.html via style_revised_full.css:
   .loading / .loading__word / .loading__wash / loadBoom / loadWash */

/* ---------- PC / BASE ---------- */
.pageProgress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1100;
    width: 0;
    height: 4px;
    background: var(--pink);
    box-shadow: 0 0 16px rgba(255, 22, 136, .65);
    pointer-events: none;
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .pageProgress {
        height: 3px;
    }
}


/* ==========================================================================
   03. HEADER / SUBPAGE NAVIGATION
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.subHeader .globalNav a[aria-current="page"] {
    color: var(--yellow);
}

.subHeader .globalNav a[aria-current="page"]::after {
    right: 0;
    background: var(--yellow);
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .subHeader .globalNav {
        background: rgba(11, 11, 11, .985);
    }
}


/* ==========================================================================
   04. SHARED SUB HERO
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.subHero {
    position: relative;
    min-height: clamp(500px, 68vh, 760px);
    padding: calc(var(--header) + 80px) var(--sub-gutter) 90px;
    display: grid;
    align-items: end;
    overflow: hidden;
    isolation: isolate;
    background: #111;
    color: #fff;
}

.subHero__photo,
.subHero__photo::before,
.subHero__photo::after {
    position: absolute;
    inset: 0;
}

.subHero__photo {
    z-index: -3;
    background-position: center;
    background-size: cover;
    transform: scale(1.035);
    animation: subHeroPhoto 6s ease-out both;
}

.subHero__photo::before {
    content: "";
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .48) 48%, rgba(0, 0, 0, .18) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 55%);
}

.subHero__photo::after {
    content: "";
    opacity: .15;
    mix-blend-mode: screen;
    background: url("../img/kaitenY.webp") center / cover no-repeat;
}

.subHero__inner {
    position: relative;
    z-index: 3;
    width: min(var(--sub-max), 100%);
    margin: 0 auto;
}

.subHero__kicker {
    margin: 0 0 14px;
    color: var(--yellow);
    font-family: var(--en);
    font-size: clamp(12px, 1.2vw, 16px);
    letter-spacing: .22em;
}

.subHero__title {
    margin: 0;
    font-family: var(--en);
    font-size: clamp(45px, 9.2vw, 127px);
    line-height: .82;
    letter-spacing: -.045em;
    text-transform: uppercase;
    filter: drop-shadow(6px 7px 0 rgba(255, 22, 136, .78));
}

.subHero__jp {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 0;
    padding: 8px 14px 9px;
    background: var(--yellow);
    color: #111;
    font-weight: 900;
    font-size: clamp(15px, 1.7vw, 21px);
    transform: rotate(-1deg);
    box-shadow: 6px 6px 0 var(--pink);
}

.subHero__stamp {
    position: absolute;
    right: 0;
    bottom: -14px;
    width: clamp(94px, 13vw, 160px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 4px solid var(--yellow);
    border-radius: 50%;
    color: var(--yellow);
    font-family: var(--en);
    font-size: clamp(16px, 2vw, 25px);
    line-height: .8;
    text-align: center;
    transform: rotate(10deg);
}

.subHero__stamp b {
    display: block;
    font-size: clamp(26px, 4vw, 48px);
}

.subHero__ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    overflow: hidden;
    padding: 9px 0 11px;
    background: var(--pink);
    color: #fff;
    border-top: 3px solid #111;
    border-bottom: 3px solid #111;
    font-family: var(--en);
    white-space: nowrap;
}

.subHero__ticker span {
    display: inline-block;
    min-width: max-content;
    padding-left: 100%;
    font-size: 16px;
    letter-spacing: 1em;
    animation: subTicker 18s linear infinite;
}


/*ABOUT　爆烈*/
.page-intro .subHero__photo {
    background-image: url("../img/jokei03.webp");
    background-position: center 90%;
}
/*STORY　空舞台*/
.page-story .subHero__photo {
    background-image: url("../img/story_hero_empty.webp");
    background-position:-20% 50%;
    background-repeat: no-repeat;
}
/*TICKET　おやぶ*/
.page-ticket .subHero__photo {
    background-image: url("../img/oyabuB.webp");
    background-position: center 90%;
    background-repeat: no-repeat;
}

@keyframes subHeroPhoto {
    from {
        transform: scale(1.12);
        filter: saturate(.72);
    }
    to {
        transform: scale(1.035);
        filter: saturate(1);
    }
}

@keyframes subTicker {
    to {
        transform: translateX(-100%);
    }
}



@keyframes storyHeroStage {
    from {
        transform: scale(1.08);
        filter: saturate(.72) brightness(.72);
    }
    to {
        transform: scale(1.02);
        filter: saturate(.92) brightness(.9);
    }
}


/* ticketページのみ画像保存を簡易抑止 */
.page-ticket img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}


/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .subHero {
        min-height: 580px;
        padding-top: 108px;
        padding-bottom: 78px;
    }

    .subHero__stamp {
        right: 2px;
        bottom: 5px;
    }

    .subHero__ticker span {
        font-size: 13px;
    }


}



/* ---------- SMALL SP <= 600px ---------- */
@media (max-width: 600px) {
    .subHero {
        min-height: 360px;
        padding: 80px auto;
    }

    .subHero__stamp { display: none;
    }

    .subHero__jp {
        margin-top: 17px;
        box-shadow: 4px 4px 0 var(--pink);
    }


.subHero__photo::after {
        top: 11%;
        right: -34vw;
        bottom: auto;
        width: 82vw;
        opacity: .09;
    }

.subHero__kicker {
        margin-bottom: 12px;
        font-size: 9px;
        letter-spacing: .20em;
    }

/*おやぶ*/
.page-ticket .subHero__photo{
background-position:center -30px;
}


    .page-intro .subHero__ticker span,
    .page-story .subHero__ticker span {
        font-size: 10px;
        letter-spacing:0;
    }
    
}


/* ==========================================================================
   05. SHARED CONTENT / CTA
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.subSection {
    position: relative;
    padding: 110px var(--sub-gutter);
}

.subSection--black {background: #101010;color: #fff;}
.subSection--yellow {background: var(--yellow);}
.subSection__inner { width: min(var(--sub-max), 100%);margin: 0 auto;}

.subHead {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 56px;
}

.subHead__no {
    color: var(--pink);
    font-family: var(--en);
    font-size: clamp(48px, 6vw, 80px);
    line-height: .8;
}

.subHead__kicker {
    display: block;
    margin: 0 0 0 12px;
    color: var(--pink);
    font-family: var(--en);
    font-size: 12px;
    letter-spacing: .2em;
}

.subHead h2 {
    margin: 0;
    font-family: var(--en);
    font-size: clamp(42px, 6vw, 82px);
    line-height: .9;
    letter-spacing: -.03em;
}

.subHead h3 {
    margin: 10px 0 0;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.35;
}

.subSection--black .subHead h2,
.subSection--black .subHead h3 {
    color: #fff;
}

.burstLabel {
    display: inline-block;
    padding: 10px 18px;
    background: var(--yellow);
    color: #111;
    font-family: var(--en);
    font-weight: 900;
    transform: rotate(-2deg);
    box-shadow: 6px 6px 0 var(--pink);margin-bottom:25px;
}

.localIndex {
    position: relative;
    z-index: 5;
    width: min(var(--sub-max), calc(100% - var(--sub-gutter) - var(--sub-gutter)));
    margin: -36px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #111;
    border: 4px solid #111;
    box-shadow: 10px 10px 0 var(--pink);
}

.localIndex a {
    position: relative;
    min-height: 98px;
    display: grid;
    place-content: center;
    gap: 5px;
    padding: 12px;
    text-align: center;
    background: var(--yellow);
    border-right: 3px solid #111;
    transition: transform .18s, background .18s, color .18s;
}

.localIndex a:last-child {
    border-right: 0;
}

.localIndex a:hover {
    transform: translateY(-7px);
    background: var(--pink);
    color: #fff;
}

.localIndex b {
    font-family: var(--en);
    font-size: 20px;
}

.localIndex span {
    font-size: 18px;
    font-weight: 900;
}

.subpage .ticketMore {
    font-family: var(--ja);
font-size:clamp(20px,3vw,24px);
    font-weight: 700;
    letter-spacing: 0;
}

.nextPageCta {
    padding: 10px 0;
    background: var(--pink);
    color: #fff;
    text-align: center;
}


.nextPageCta a {
    display: inline-block;
    margin-top: 28px;
    padding: 16px 34px;
    background: var(--yellow);
    color: #111;
    border: 3px solid #111;
    box-shadow: 8px 8px 0 #111;
    font-family: var(--en);
    transition: .2s;
}

.nextPageCta a:hover {
    transform: translate(4px, 4px);
    box-shadow: 3px 3px 0 #111;
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .localIndex {
        grid-template-columns: repeat(2, 1fr);
    }

    .localIndex a {
        min-height: 78px;
        border-bottom: 3px solid #111;
    }

    .localIndex a:nth-child(2) {
        border-right: 0;
    }

    .localIndex a:nth-child(3),
    .localIndex a:nth-child(4) {
        border-bottom: 0;
    }

    .subSection {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .subHead {
        grid-template-columns: 64px 1fr;
        gap: 14px;
        margin-bottom: 40px;
    }
}

/* ---------- SMALL SP <= 600px ---------- */
@media (max-width: 600px) {
    .localIndex {
        width: calc(100% - 28px);
        margin-top: 28px;
        box-shadow: 6px 6px 0 var(--pink);
    }

    .localIndex a {
        min-height: 70px;
        padding: 9px;
    }

    .localIndex b,
    .localIndex span {
        font-size: 10px;
    }

    .subHead {
        grid-template-columns: 46px 1fr;
    }

    .subHead__no {
        font-size: 42px;
    }

    .subHead h2 {
        font-size: clamp(33px, 11vw, 48px);
    }

    .subHead h3 {
        font-size: 18px;
    }

    .nextPageCta {
        padding-top: 70px;
        padding-bottom: 76px;
    }
}


/* ==========================================================================
   06. TICKET
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.ticketBlock {
   position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ticketBlock::after {
    content: attr(data-word);
    position: absolute;
    right: -20px;
    top: 50px;
    z-index: 0;
    color: rgba(255, 22, 136, .07);
    font-family: var(--en);
    font-size: clamp(90px, 18vw, 270px);
    line-height: .8;
    pointer-events: none;
}
/* メインコンテンツを背景文字より前へ */
.ticketBlock > * {
    position: relative;
    z-index: 1;
}




.ticketCard {
    position: relative;
    z-index: 2;
    padding: clamp(14px, 3vw, 54px);
    background: #fff;
    border: 5px solid #111;
    box-shadow: 14px 14px 0 var(--pink);
}

.subSection--black .ticketCard {
    background: #171717;
    border-color: #fff;
    box-shadow: 14px 14px 0 var(--yellow);
}

.ticketCard__headline {
    margin: 0;
    font-size: clamp(22px, 3vw, 38px);
    line-height: 1.45;
    font-weight: 900;
}

.ticketCard__headline em {
    color: var(--pink);
    font-style: normal;
}

.subSection--black .ticketCard__headline em {
    color: var(--yellow);
}

.ticketCard__desc {
    margin: 22px 0 0;
    font-size: 16px;
    line-height: 1.95;
}

.ticketData {
    margin: 36px 0 0;
    border-top: 3px solid #111;
}

.subSection--black .ticketData {
    border-color: #fff;
}

.ticketData__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    border-bottom: 2px solid #111;
}

.subSection--black .ticketData__row {
    border-color: rgba(255, 255, 255, .55);
}

.ticketData dt,
.ticketData dd {
    margin: 0;
    padding: 18px 20px;
}

.ticketData dt {
    display: flex;
    align-items: center;
    background: var(--yellow);
    color: #111;
    font-weight: 900;
}

.ticketData dd {
    background: rgba(255, 255, 255, .68);
    font-size: 15px;
    line-height: 1.85;
}

.subSection--black .ticketData dd {
    background: rgba(255, 255, 255, .04);
}

.saleChips{
    display:flex;
    flex-wrap:wrap;
    column-gap:8px;
    row-gap:10px;
}

.saleChip,.saleChip:visited{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;min-width:300px;border:2px solid currentColor;font-weight:900;line-height:1.2}

.saleChip[href]:hover{background:var(--pink);color:#fff;border-color:var(--pink)}

.saleChip small{font-size:9px;font-weight:700;opacity:.7}


.ticketSpecial {
    position: relative;
    margin: 42px 0 0;
    padding: 34px 32px 30px;
    background: var(--yellow);
    color: #111;
    border: 4px solid #111;
    box-shadow: 9px 9px 0 #111;
    transform: rotate(.4deg);
}

.ticketSpecial::before {
    content: "SPECIAL!!";
    position: absolute;
    left: 22px;
    top: -24px;
    padding: 7px 12px;
    background: var(--pink);
    color: #fff;
    font-family: var(--en);
    font-size: 15px;
    transform: rotate(-4deg);
}

.ticketSpecial h3 {
    margin: 0;
    font-size: clamp(18px, 2.4vw, 24px);
    line-height: 1.45;
}

.ticketSpecial p {
    margin: 16px 0 0;
    line-height: 1.8;
}

.ticketSpecial dl {
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 8px 14px;
}

.ticketSpecial dt {
    font-weight: 900;
}

.ticketSpecial dd {
    margin: 0;
    line-height: 1.75;
}

.ticketSpecial dd a {
    color: var(--pink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.ticketSpecial dd a:hover {
    opacity: .7;
}


.mvtkAbout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 32px;
    align-items: center;
    margin: 46px 0 0;
    padding: 32px;
    background: none;
    border: 3px solid #111;
}

.mvtkAbout__mark {
    width: 180px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: auto;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    box-shadow: 8px 8px 0 var(--yellow);
    font-family: var(--en);
    font-size: 26px;
    line-height: 1.05;
    text-align: center;
    transform: rotate(-8deg);
}

.mvtkAbout h3 {
    margin: 0;
    font-size: 25px;
}

.mvtkAbout p {
    margin: 12px 0 0;
    line-height: 1.9;
}

.mvtkAbout a {
    color: var(--pink);
    font-weight: 900;
    border-bottom: 2px solid;
}

.ticketNotes {
    margin: 30px 0 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.8;
}

.ticketNotes li::before {
    content: "※";
    margin-right: 4px;
}


/* CARD lead + compact product visual ------------------------------------ */
.ticketCard__lead--withProduct {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 25vw,285px);
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
}

.ticketCard__leadCopy {
    min-width: 0;
}

.ticketCard__lead--withProduct .ticketCard__desc {
    max-width: 680px;
}

.ticketProductInline {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 18px 16px 14px;
    background: #f7f7f7;
    border: 3px solid #111;
    box-shadow: 8px 8px 0 var(--pink);
}

.ticketProductInline__label {
    position: absolute;
    left: -10px;
    top: -15px;
    z-index: 2;
    padding: 6px 9px 7px;
    background: #111;
    color: var(--yellow);
    font-family: var(--en);
    font-size: 9px;
    line-height: 1;
    letter-spacing: .06em;
    transform: rotate(-2deg);
}

.ticketProductInline img {
    display: block;
    width: min(160px, 74%);
    height: auto;
    margin: 4px auto 0;
    filter: drop-shadow(7px 8px 0 rgba(17,17,17,.92));
}

.ticketProductInline figcaption {
    margin-top: 11px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    opacity: .62;
}

.ticketCard__lead--withProduct + .ticketData {
    margin-top: 34px;
}




/* Ticket product visuals ------------------------------------------------- */
.ticketProductVisual {
    position: relative;
    margin: 34px 0 0;
}

.ticketProductVisual__label {
    position: absolute;
    left: -12px;
    top: 22px;
    z-index: 3;
    padding: 9px 14px 10px;
    background: #111;
    color: var(--yellow);
    border: 2px solid #111;
    font-family: var(--en);
    font-size: 12px;
    letter-spacing: .08em;
    transform: rotate(-2deg);
}

.ticketProductVisual__stage {
    min-height: 380px;
    display: grid;
    place-items: center;
    padding: 40px clamp(28px, 7vw, 92px);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,22,136,.08) 0 2px, transparent 2px 22px),
        #fff;
    border: 4px solid #111;
}

.ticketProductVisual__stage img {
    width: min(250px, 38%);
    min-width: 0;
    filter: drop-shadow(14px 16px 0 rgba(17,17,17,.95));
    transform: rotate(-4deg);
}

.ticketProductVisual figcaption {
    margin-top: 9px;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
    opacity: .62;
}

.ticketSpecial--withVisual {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(290px, .7fr);
    gap: clamp(24px, 4vw, 44px);
    align-items: center;
}

.ticketSpecial--withVisual .ticketSpecial__body {
    min-width: 0;
}


.ticketSpecial__visual {
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 3px solid #111;
    box-shadow: 8px 8px 0 var(--pink);
    transform: rotate(1.5deg);
}

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

.ticketSpecial__visual figcaption {
    margin-top: 7px;
    font-size: 9px;
    font-weight: 900;
    text-align: right;
}

/* ONLINE: all 9 downloadable visual designs */
.ticketOnlineVisual {
    margin: 38px 0 8px;
    padding: clamp(22px, 3vw, 34px);
    background: #0b0b0b;
    border: 3px solid rgba(255,255,255,.9);
    box-shadow: 10px 10px 0 var(--pink);
}

.ticketOnlineVisual__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.ticketOnlineVisual__head b {
    color: var(--yellow);
    font-family: var(--en);
    font-size: clamp(24px, 3.5vw, 42px);
    line-height: 1;
}

.ticketOnlineVisual__head span {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

.ticketOnlineVisual__grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
    width: 100%;
    margin: 0 auto;
}

.ticketOnlineVisual__grid figure {
    position: relative;
    margin: 0;
    padding: 4px;
    /*background: #fff;*/
    box-shadow: 6px 6px 0 var(--pink);
    transform: rotate(-1.3deg);
    transition:
        transform .25s cubic-bezier(.16,1,.3,1),
        box-shadow .25s;
}

.ticketOnlineVisual__grid figure:nth-child(even) {
    transform: rotate(1.3deg);
}

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

@media (hover: hover) and (pointer: fine) {
    .ticketOnlineVisual__grid figure:hover {
        z-index: 3;
        transform: translateY(-8px) rotate(0) scale(1.045);
        box-shadow: 10px 12px 0 var(--yellow);
    }

}


.ticketOnlineVisual__note {
    margin: 20px 0 0;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    text-align: right;
}

/* ---------- TABLET <= 991px ---------- */
@media(max-width:991px){

.ticketCard__lead--withProduct{grid-template-columns:minmax(0,1fr) 180px;gap:24px}
.ticketProductInline{padding:16px 12px 12px;box-shadow:6px 6px 0 var(--pink)}
.ticketProductInline img{width:min(124px,76%);filter:drop-shadow(6px 7px 0 rgba(17,17,17,.92))}

.ticketOnlineVisual__grid{grid-template-columns:repeat(3,minmax(108px,132px));justify-content:center;max-width:460px;gap:14px 12px}
.ticketOnlineVisual__grid figure:nth-child(3){order:1}
.ticketOnlineVisual__grid figure:nth-child(2){order:2}
.ticketOnlineVisual__grid figure:nth-child(1){order:3}
.ticketOnlineVisual__grid figure:nth-child(8){order:4}
.ticketOnlineVisual__grid figure:nth-child(7){order:5}
.ticketOnlineVisual__grid figure:nth-child(9){order:6}
.ticketOnlineVisual__grid figure:nth-child(6){order:7}
.ticketOnlineVisual__grid figure:nth-child(5){order:8}
.ticketOnlineVisual__grid figure:nth-child(4){order:9}
.ticketOnlineVisual__grid figure:nth-child(odd){transform:rotate(-1deg)}
.ticketOnlineVisual__grid figure:nth-child(even){transform:rotate(1deg)}

}


/* ---------- SP <= 600px ---------- */
@media(max-width:600px){
.ticketCard{width:calc(100% + 24px);margin-left:-10px;margin-right:-10px;padding:25px 18px}
.ticketCard__lead--withProduct{grid-template-columns:1fr;gap:24px}
    
.ticketProductInline{width:min(190px,62vw);margin:2px auto 0}
.ticketProductInline img{width:min(118px,72%)}
.ticketCard__lead--withProduct+.ticketData{margin-top:30px}

.ticketCard{padding:25px 10px;border-width:4px;box-shadow:4px 4px 0 var(--pink)}
    .saleChips{
        display:flex;
        flex-direction:column;
        gap:0;
    }

    .saleChip{
        width:100%;
        min-width:0;
        min-height:50px;
        padding:12px 14px;
        margin-top:12px;
        justify-content:center;
        text-align:center;
        line-height:1.4;
    }


    
.ticketProductVisual__label{left:-6px;top:13px;padding:7px 9px 8px;font-size:9px}
.ticketProductVisual__stage{min-height:280px;padding:42px 22px 30px}
.ticketProductVisual__stage img{width:min(210px,62%);min-width:0;filter:drop-shadow(9px 10px 0 rgba(17,17,17,.95));transform:rotate(-3deg)}

.ticketSpecial--withVisual{display:block}
.ticketSpecial__visual{margin-top:25px;padding:6px;box-shadow:5px 5px 0 var(--pink)}

.ticketOnlineVisual{margin-top:30px;padding:18px 14px 20px;box-shadow:6px 6px 0 var(--pink)}
.ticketOnlineVisual__head{display:block;margin-bottom:17px}
.ticketOnlineVisual__head b,.ticketOnlineVisual__head span{display:block;text-align:left}
.ticketOnlineVisual__head span{margin-top:8px;font-size:10px}
.ticketOnlineVisual__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:center;
    max-width:250px;
    margin:0 auto;
    gap:12px 9px;
}
.ticketData__row{grid-template-columns:1fr}
        .ticketData__row:last-child{
        border-bottom:0;
    }
.ticketData dt,.ticketData dd{padding:8px 10px}

.ticketSpecial{padding:31px 18px 24px;box-shadow:6px 6px 0 #111}
.ticketSpecial dl{grid-template-columns:1fr;gap:3px}
.ticketSpecial dd+dt{margin-top:10px}

    #mvtkAbout{
        padding-top:30px;
    }

    #mvtkAbout .mvtkAbout{
        margin-top:0;
    }
.mvtkAbout{grid-template-columns:1fr;padding:24px 18px}
.mvtkAbout__mark{width:100px;font-size:16px}

    
    .ticketSpecial__body h3{line-height:1.2}
.ticketSpecial__body p,
.ticketSpecial__body dd{line-height:1.45}
    
    
}

/* ==========================================================================
   07. ABOUT
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.introOpening {
    position: relative;
    padding: 120px var(--sub-gutter);
    overflow: hidden;
}

.introOpening__45 {
    position: absolute;
    right: -2vw;
    top: 30px;
    z-index: -1;
    color: rgba(255, 22, 136, .055);
    font-family: var(--en);
    font-size: clamp(160px, 29vw, 410px);
    line-height: .75;
}

.introOpening__lead {
    width: min(940px, 100%);
    margin: 0 auto;
}

.introOpening__lead h2 {
    margin: 0;
    color: var(--pink);
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.35;
}

.introOpening__lead h3 {
    margin: 18px 0 0;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.55;
}

.introEditorial {
    width: min(940px, 100%);
    margin: 52px auto 0;
    font-size: 17px;
    line-height: 2.15;
}

.introEditorial p + p {
    margin-top: 30px;
}

.introCombo {    width: min(860px, 100%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 22px;
    align-items: center;
    margin: 50px auto;
    text-align: center;
}

.introCombo__word {
    padding: 28px 18px;
    border: 4px solid #fff;
    box-shadow: 8px 8px 0 var(--pink);
    font-family: var(--en);
    font-size: clamp(25px, 3.4vw, 40px);
    line-height: 1.08;
}

.introCombo__x {
    color: var(--yellow);
    font-family: var(--en);
    font-size: clamp(42px, 5vw, 74px);
}

.introLove {
    width: min(860px, 100%);
    margin: 0 auto;
}

.introLove blockquote {
    margin: 0 0 38px;
    color: var(--pink);
    font-size: clamp(27px, 4vw, 48px);
    line-height: 1.48;
    font-weight: 900;
    text-align: center;
}

.introLove p {
    font-size: 17px;
    line-height: 2.1;
}

.introLove p + p {
    margin-top: 30px;
}

.screenShift {
    position: relative;
    overflow: hidden;
}

.screenShift__grid {
    position: relative;
    z-index: 2;
    display: block;
    width: min(920px, 100%);
}

.screenShift__copy {
    position: relative;
    padding-left: clamp(20px, 4vw, 58px);
    border-left: clamp(7px, .8vw, 12px) solid var(--pink);
}

.screenShift__copy h2 {
    margin: 0;
    color: var(--yellow);
    font-family: var(--en);
    font-size: clamp(58px, 9vw, 118px);
    line-height: .92;
    text-shadow: 4px 4px 0 rgba(255, 22, 136, .66);
}

.screenShift__copy h3 {
    margin: 24px 0 0;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.5;
}

.screenShift__copy p {
    margin: 24px 0 0;
    font-size: 17px;
    line-height: 2.05;
}

.introFinal {
    position: relative;
    text-align: center;
}

.introFinal__line {
    width: min(900px, 100%);
    margin: auto;
    font-size: clamp(18px, 3.5vw, 40px);
    font-weight: 700;
    line-height: 1.75;
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .introCombo {
        grid-template-columns: 1fr;
    }

    .introCombo__x {
        line-height: .7;
    }
}

/* ---------- SMALL SP <= 600px ---------- */
@media (max-width: 600px) {
    
    
    .introOpening {
    padding: 120px auto 0;
}
    
    
    .introOpening__45 {
        top: 0;
    }

    .introOpening__lead {
    margin-top: -30px;
}
    
    .introEditorial,
    .introLove p,
    .screenShift__copy p {
        font-size: 15px;
        line-height: 2;
    }

    .introCombo__word {
        border-width: 3px;
        box-shadow: 6px 6px 0 var(--pink);
    }

    .screenShift__copy {
        padding-left: 18px;
    }

    .screenShift__copy h2 {
        font-size: clamp(48px, 15vw, 68px);
    }
}


/* ==========================================================================
   08. ABOUT / PHOTO RAIL
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.introRail {
    position: relative;
    width: 100vw;
    margin: 90px 0 12px calc(50% - 50vw);
    padding: 52px 0 56px;
    overflow: hidden;
    isolation: isolate;
}

.introRail::before,
.introRail::after {
    content: "";
    position: absolute;
    left: -3%;
    z-index: 3;
    width: 106%;
    height: 8px;
    background: var(--yellow);
    border-top: 2px solid #111;
    border-bottom: 2px solid #111;
    pointer-events: none;
}

.introRail::before {
    top: 31px;
    transform: rotate(-1.35deg);
}

.introRail::after {
    bottom: 31px;
    background: var(--pink);
    transform: rotate(-1.35deg);
}

.introRail__pc {
    display: grid;
    gap: clamp(16px, 1.7vw, 26px);
    padding: 16px 0;
    overflow: hidden;
}

.introRail__lane {
    width: 106%;
    margin-left: -3%;
    overflow: hidden;
    transform-origin: center;
}

.introRail__lane--left {
    transform: rotate(-1.35deg);
}

.introRail__lane--right {
    transform: rotate(-1.35deg);
}

.introRail__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.introRail__track--left {
    animation: introRailMoveLeft 38s linear infinite;
}

.introRail__track--right {
    animation: introRailMoveRight 42s linear infinite;
}

.introRail__item {
    flex: none;
    width: clamp(980px, 88vw, 1500px);
    padding-right: clamp(14px, 1.4vw, 24px);
}

.introRail__item img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    border: 3px solid #111;
    background: #111;
}

.introRail__sp {
    display: none;
}

.introRail__meta {
    position: relative;
    z-index: 5;
    width: min(1120px, calc(100% - 44px));
    margin: 22px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #111;
    font-family: var(--en);
    font-size: 10px;
    letter-spacing: .12em;
}

.introRail__meta span {
    display: inline-block;
    padding: 5px 8px 6px;
    background: var(--yellow);
    border: 2px solid #111;
}

.introRail__meta span:last-child {
    background: var(--pink);
    color: #fff;
}

@keyframes introRailMoveLeft {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes introRailMoveRight {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

/* ---------- SMALL SP <= 600px ---------- */
@media (max-width: 600px) {
.introRail {
    margin: 30px 0 0 calc(50% - 50vw);
    padding: 20px 0;
}

    
    
.introRail__pc{display:grid;gap:12px;padding:10px 0}
.introRail__item{width:650px;padding-right:12px}
.introRail::before{top:12px}
.introRail::after{bottom:12px}
    
    
    .introRail__meta {
        width: calc(100% - 36px);
        margin-top: 18px;
        font-size: 8px;
    }

    .introRail__meta span {
        padding: 4px 6px 5px;
    }
}


/* ==========================================================================
   09. STORY
   ========================================================================== */

/* ---------- PC / BASE ---------- */

/* ---------- TOZAI, TOZAI — !! ---------- */

.storyOpening {
    position: relative;
    padding: 84px var(--sub-gutter) 92px;
    overflow: hidden;
    background: var(--yellow);
    border-top: 5px solid #111;
    border-bottom: 5px solid #111;
    text-align: center;
}

.storyOpening .subSection__inner {
    position: relative;
    z-index: 2;
}

.storyOpening__call {
    display: inline-block;
    margin: 0;
    color: var(--pink);
    font-family: var(--en);
    font-size: clamp(24px, 4vw, 48px);
    transform: rotate(-2deg);
}

.storyOpening__catch {
    max-width: 960px;
    margin: 24px auto 0;
    font-size: clamp(24px, 5vw, 66px);
    line-height: 1.3;
    font-weight: 900;
}

.storyChapter {
    position: relative;
    padding: clamp(92px, 9vw, 136px) var(--sub-gutter) clamp(98px, 10vw, 150px);
    overflow: hidden;
}

.storyChapter:nth-of-type(odd) {
    background: rgba(255, 255, 255, .5);
}

.storyChapter--dark {
    background: #111 !important;
    color: #fff;
}

.storyChapter__inner {
    position: relative;
    z-index: 2;
    width: min(980px, 100%);
    margin: auto;
}

.storyChapter__label {
    display: inline-block;
    margin-bottom: 30px;
    padding: 7px 12px;
    background: var(--pink);
    color: #fff;
    box-shadow: 3px 3px 0 #111;
    font-family: var(--en);
    font-size: 12px;
    letter-spacing: .12em;
    transform: rotate(-1deg);
}

.storyChapter--dark .storyChapter__label {
    background: var(--yellow);
    color: #111;
    box-shadow: 3px 3px 0 var(--pink);
}

.storyChapter h2 {
    margin: 0 0 38px;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.45;
}

.storyText {
    width: min(880px, 100%);
    font-size: 17px;
    line-height: 2;margin: auto;
}

.storyText p + p {
    margin-top: 20px;
}

.storyPhoto {
    position: relative;
    z-index: 2;
    width: min(1080px, calc(100% - 40px));
    margin: clamp(58px, 6.5vw, 82px) auto 0;
    padding: 7px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-items: stretch;
    background: #111;
    box-shadow: 8px 8px 0 var(--pink);
    transform: rotate(-.28deg);
}

.storyChapter--dark .storyPhoto {
    background: #f3f3f3;
    box-shadow: 8px 8px 0 var(--yellow);
    transform: rotate(.28deg);
}

.storyPhoto figure {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: #111;
}

.storyPhoto img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.storyBang {
    width: min(920px, 100%);
    margin: 48px auto 0;
    padding: 28px 34px;
    background: var(--pink);
    color: #fff;
    border: 0;
    box-shadow: none;
    font-weight: 900;
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.55;
    text-align: center;
    transform: rotate(-1deg);
}

.storyFinalCall {
    position: relative;
    padding: 100px var(--sub-gutter);
    overflow: hidden;
    background: var(--yellow);
    text-align: center;
}


.storyFinalCall .subSection__inner {
    position: relative;
    z-index: 1;
}

.storyFinalCall p:first-child {
    margin: 0;
    color: var(--pink);
    font-family: var(--en);
    font-size: clamp(30px, 5vw, 60px);
}

.storyFinalCall p:last-child {
    margin: 18px 0 0;
    font-size: clamp(26px, 4vw, 50px);
    font-weight: 900;
    line-height: 1.5;
}

/* ---------- SMALL SP <= 600px ---------- */
@media (max-width: 600px) {
    .storyOpening {
        padding-top: 66px;
        padding-bottom: 70px;
    }

    .storyText {
        font-size: 15px;
        line-height: 2;
    }

    .storyPhoto {
        width: calc(100% - 28px);
        margin-top: 44px;
        padding: 5px;
        grid-template-columns: 1fr;
        gap: 5px;
        box-shadow: 6px 6px 0 var(--pink);
        transform: rotate(-.2deg);
    }

    .storyChapter--dark .storyPhoto {
        box-shadow: 6px 6px 0 var(--yellow);
        transform: rotate(.2deg);
    }

    .storyBang {
        padding: 22px 16px;
    }
}


/* ==========================================================================
   10. STORY / PHOTO MOTION
   ========================================================================== */

/* ---------- PC / TABLET >= 601px ---------- */
@media (min-width: 601px) {
    .storyPhoto.storyPhoto--split.js-reveal {
        opacity: 1;
        filter: none;
        transition: none;
        will-change: auto;
        transform: rotate(-.28deg);
    }

    .storyChapter--dark .storyPhoto.storyPhoto--split.js-reveal {
        transform: rotate(.28deg);
    }

    .storyPhoto.storyPhoto--split.js-reveal figure {
        opacity: 0;
        will-change: transform, opacity;
        transition:
            transform .92s cubic-bezier(.16, 1, .3, 1),
            opacity .42s ease;
    }

    .storyPhoto.storyPhoto--split.js-reveal figure:first-child {
        transform: translate3d(-15vw, 18px, 0) rotate(-1.1deg);
    }

    .storyPhoto.storyPhoto--split.js-reveal figure:last-child {
        transform: translate3d(15vw, -12px, 0) rotate(1.1deg);
        transition-delay: .09s;
    }

    .storyPhoto.storyPhoto--split.js-reveal.is-in figure:first-child,
    .storyPhoto.storyPhoto--split.js-reveal.is-in figure:last-child {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0);
    }
}


/* ==========================================================================
   11. SUBPAGE FOOTER / FIXED QUICK NAV
   ========================================================================== */

/* ---------- PC / BASE ---------- */
body.subpage .fixedQuick {
    visibility: visible;
    opacity: 1;
}

body.subpage .fixedQuick a {
    opacity: 1;
}

body.subpage .fixedQuick a[aria-current="page"] {
    background: var(--pink);
    color: #fff;
}

body.subpage .footer {
    padding: 60px 0 30px;
    background: var(--pink);
}

body.subpage .footer .footer__title {
    max-width: 300px;
}



/* =========================================================
   DAY TICKET / BUY TYPE
   ========================================================= */

#door .ticketData__row {
    grid-template-columns: 340px 1fr;
    min-height: 82px;
}

#door .ticketData dt {
    position: relative;
    padding: 20px 28px 20px 64px;
    border-right: 3px solid #111;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.4;
}

#door .ticketData dt::before {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--en);
    font-size: 20px;
    font-weight: 900;
}

#door .ticketData__row:nth-child(1) dt::before { content: "01"; }
#door .ticketData__row:nth-child(2) dt::before { content: "02"; }
#door .ticketData__row:nth-child(3) dt::before { content: "03"; }

#door .ticketData dt::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--yellow);
    border-top: 3px solid #111;
    border-right: 3px solid #111;
    transform: translateY(-50%) rotate(45deg);
}

#door .ticketData dd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 20px 30px;
}

#door .ticketData dd strong {
    font-size: clamp(15px, 1.4vw, 18px);
}


/* ---------- SP <= 600px ---------- */

@media (max-width: 600px) {

    #door .ticketData__row {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    #door .ticketData dt {
        padding: 12px 14px 12px 52px;
        border-right: 0;
        border-bottom: 2px solid #111;
        font-size: 15px;
    }

    #door .ticketData dt::before {
        left: 14px;
        font-size: 17px;
    }

    #door .ticketData dt::after {
        right: auto;
        left: 24px;
        top: auto;
        bottom: -7px;
        width: 12px;
        height: 12px;
        border-top: 0;
        border-right: 3px solid #111;
        border-bottom: 3px solid #111;
        transform: rotate(45deg);
    }

    #door .ticketData dd {
        padding: 14px 12px 18px;
    }

}