@charset "utf-8";
/* ==========================================================================
01. FOUNDATION / RESET
02. LOADING
03. HEADER / GLOBAL NAVIGATION
04. HERO / OPENING
05. COMMON UI / SECTION HEAD / BUTTONS
06. COMMON SCROLL MOTION
07. STAGE TO SCREEN / PHOTO BURST
08. MOVIE
09. THEATER
10. NEWS
11. ABOUT / CAST CUTOUT
12. PHOTO RAIL
13. STORY / CHARACTER
14. GALLERY
15. TICKET
16. FINAL CTA
17. FOOTER / END CREDIT
18. FIXED QUICK NAV
19. TRAILER MODAL
20. LEGACY FIXED THEATER
21. UTILITIES / PC-SP SWITCH
========================================================================== */

/* ---------- PC / BASE ---------- */
:root {
    --pink: #ff1688;
    --deep: #be005f;
    --yellow: #fdf538;
    --ink: #1c1414;
    --paper: #fff4f8;
    --max: 1180px;
    --header: 82px;
    --ja: YakuHanJP, "Noto Sans JP", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
    --en: "Dela Gothic One", sans-serif;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ja);
    overflow-x: hidden;
}

body.is-locked {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

section {
    scroll-margin-top: 80px;
}


/* ==========================================================================
   02. LOADING
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--yellow);
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: opacity .08s linear, visibility .08s linear;
}

.loading.is-out {
    opacity: 0;
    visibility: hidden;
}

.loading__word {
    position: relative;
    z-index: 2;
    color: var(--pink);
    font-size: clamp(82px, 18vw, 220px);
    font-style: italic;
    font-family: var(--en);
    line-height: .82;
    white-space: nowrap;
    transform-origin: center;
    opacity: 0;
    filter: drop-shadow(10px 10px 0 rgba(255, 255, 255, .14));
    animation: loadBoom .92s cubic-bezier(.12, .78, .18, 1) both;
}

.loading__wash {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 18vmax;
    height: 18vmax;
    border-radius: 50%;
    background: var(--pink);
    transform: translate(-50%, -50%) scale(0);
    animation: loadWash .34s .62s cubic-bezier(.3, .05, .2, 1) forwards;
}

@keyframes loadBoom {
    0% {
        opacity: 0;
        transform: scale(.12) rotate(-10deg);
    }
    16% {
        opacity: 1;
        transform: scale(1.15) rotate(2deg);
    }
    28% {
        opacity: 1;
        transform: scale(.93) rotate(-1deg);
    }
    48% {
        opacity: 1;
        transform: scale(1.04);
    }
    68% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(13);
    }
}

@keyframes loadWash {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        transform: translate(-50%, -50%) scale(14);
    }
}


/* ==========================================================================
   03. HEADER / GLOBAL NAVIGATION
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--header);
    z-index: 1000;
    display: flex;
    align-items: flex-start; /*上寄せ*/
    padding: 8px 8px 0 22px;
    pointer-events: none;
}

.header__brand {
    width: 168px;
  filter: drop-shadow(0 0 1px #000)
        drop-shadow(0 0 1px #000);
    opacity: 0;
    transform: translateY(-14px);
    transition: .5s;
    pointer-events: auto;
}

.header.is-show .header__brand {
    opacity: 1;
    transform: none;
}

.globalNav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 30px);
    padding: 8px 10px;
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.globalNav a {
    font-family: var(--en);
    position: relative;
    color: #fff;
    font-size: 13px;
    letter-spacing: .04em;
    white-space: nowrap;
    /* Text outline */
filter: drop-shadow(0 0 1px #000)
        drop-shadow(0 0 1px #000);
}

.globalNav a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -4px;
    height: 3px;
    background: var(--pink);
    transition: .25s;
}

.globalNav a:hover:after {
    right: 0;
}

.menuBtn {
    display: none;
    pointer-events: auto;
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    :root {
        --header: 66px;
    }

    .header {
        height: 66px;
        padding: 0 12px;
    }

    .header__brand {
        display: none !important;
    }

    .globalNav {
        position: fixed;
        inset: 0;
        z-index: -1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        margin: 0;
        padding: 90px 12vw;
        transform: translateX(100%);
        transition: .4s;
        pointer-events: auto;
    }

    .globalNav.is-open {
        transform: none;
    }

    .globalNav a {
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid #444;
        font-size: clamp(25px, 6vw, 40px);
    }

    .menuBtn {
        display: block;
        position: absolute;
        right: 12px;
        top: 10px;
        width: 52px;
        height: 47px;
        border: 0;
        background: #111;
        color: #fff;
    }

    .menuBtn span {
        position: absolute;
        left: 11px;
        width: 30px;
        height: 2px;
        background: var(--pink);
        transition: .3s;
    }

    .menuBtn span:nth-child(1) {
        top: 11px;
    }

    .menuBtn span:nth-child(2) {
        top: 19px;
    }

    .menuBtn span:nth-child(3) {
        top: 27px;
    }

    .menuBtn b {
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        font-size: 8px;
    }

    .menuBtn.is-open span:nth-child(1) {
        top: 19px;
        transform: rotate(45deg);
    }

    .menuBtn.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menuBtn.is-open span:nth-child(3) {
        top: 19px;
        transform: rotate(-45deg);
    }
}


/* ==========================================================================
   04. HERO / OPENING
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.hero {
    position: relative;
    min-height: 100svh;
    background: var(--pink);
    overflow: hidden;
}

.hero__visual {
    position: absolute;
    inset: 0;
    width: 100%;
}

.hero__visual img {
    width: 100%;
    height: auto;
}
@media (min-width: 1440px) {
    .hero__visual img {
        transform: translateY(-50px);
    }
}


.hero__eyebrow {
    position: absolute;
    top: 70px;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translateX(-50%);
}

.hero__eyebrow img {
    max-width: 600px;
    display: block;
    margin: 0 auto;
}

.hero__content {
    margin: 420px auto 0;
    position: relative;
    z-index: 2;
    min-height: 400px;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero__logo {
    margin-bottom: 0;
    width: 100%;
}

.hero__date {
    font-family: var(--en);
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: -20px 0 25px;
    color: #fff;
}

.hero__date strong,
.hero__date span,
.hero__date b {
    font-size: clamp(30px, 3.8vw, 56px);
}

.hero__date strong {
    line-height: .9;
}

.hero__date span {
    color: var(--yellow);
}

.hero__eyebrow, .hero__logo, .hero__date {
    opacity: 0;
    visibility: hidden;
}

body.is-hero-ready .hero__eyebrow {
    visibility: visible;
    animation: heroEyebrowBang .55s cubic-bezier(.12, 1.35, .3, 1) .05s both;
}

body.is-hero-ready .hero__logo {
    visibility: visible;
    animation: heroLogoBang .62s cubic-bezier(.12, 1.4, .3, 1) .38s both;
}

body.is-hero-ready .hero__date {
    visibility: visible;
    animation: heroDateBang .72s cubic-bezier(.1, 1.45, .25, 1) .72s both;
}

@keyframes heroEyebrowBang {
    0% {
        opacity: 0;
        transform: translateX(-50%)
            scale(2.5)
            rotate(-8deg);
        filter: blur(8px);
    }
    45% {
        opacity: 1;
        transform: translateX(-50%)
            scale(.88)
            rotate(3deg);
        filter: blur(0);
    }
    65% {
        transform: translateX(-50%)
            scale(1.12)
            rotate(-2deg);
    }
    82% {
        transform: translateX(-50%)
            scale(.97)
            rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%)
            scale(1)
            rotate(0);
    }
}

@keyframes heroLogoBang {
    0% {
        opacity: 0;
        transform: scale(2.4)
            rotate(7deg);
        filter: blur(10px);
    }
    45% {
        opacity: 1;
        transform: scale(.87)
            rotate(-3deg);
        filter: blur(0);
    }
    68% {
        transform: scale(1.1)
            rotate(2deg);
    }
    84% {
        transform: scale(.97)
            rotate(-1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1)
            rotate(0);
    }
}

@keyframes heroDateBang {
    0% {
        opacity: 0;
        transform: translateY(45px)
            scale(.3)
            skewX(-15deg);
    }
    42% {
        opacity: 1;
        transform: translateY(-8px)
            scale(1.18)
            skewX(4deg);
    }
    64% {
        transform: translateY(4px)
            scale(.94)
            skewX(-2deg);
    }
    82% {
        transform: translateY(0)
            scale(1.05)
            skewX(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0)
            scale(1);
    }
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .hero {
        min-height: auto;
        padding-top: 66px;
    }

    .hero__visual {
        position: relative;
        height: auto;
        object-fit: contain;
    }

    .hero__eyebrow {
        position: absolute;
        top: 50px;
        left: 50%;
        width: 80%;
        text-align: center;
        transform: translateX(-50%);
        z-index: 3;
    }

    .hero__eyebrow img {
        width: 100%;
        max-width: 500px;
        display: block;
        margin: 0 auto;
    }

    .hero__content {
        margin: -30px auto 0;
        padding: 0 20px 40px;
        position: relative;
        z-index: 2;
        min-height: 0;
        width: 100%;
        max-width: 700px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

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

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

    .hero__date {
        font-family: var(--en);
        display: flex;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin: 15px 0 0;
        color: #fff;
    }

    .hero__date strong, .hero__date span, .hero__date b {
        font-size: clamp(30px, 8vw, 56px);
        line-height: 1;
    }

    .hero__date span {
        color: var(--yellow);
    }

    .hero .burstBtn {
        min-width: 250px;
        padding: 12px 20px;
    }
}


/* ==========================================================================
   05. COMMON UI / SECTION HEAD / BUTTONS
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.burstBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 24px;
    min-width: 290px;
    padding: 16px 26px;
    background: var(--pink);
    color: #fff;
    clip-path: polygon(3% 11%, 97% 0, 100% 86%, 7% 100%, 0 55%);
    transition: .25s;
}

.burstBtn:before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid var(--yellow);
    clip-path: inherit;
}

.burstBtn span, .burstBtn small {
    position: relative;
    z-index: 1;
}

.burstBtn span {
    font-size: 20px;
}

.burstBtn small {
    margin-left: auto;
    letter-spacing: .1em;
}

.burstBtn:hover {
    transform: translate(4px, -3px) rotate(-1deg);
    background: #111;
}

.sectionHead {
    font-family: var(--en);
    width: min(var(--max), calc(100% - 48px));
    margin: 0 auto 55px;
    text-align: center;
}

.sectionHead span {
    display: block;
    color: var(--pink);
    font-size: 12px;
    letter-spacing: .25em;
}

.sectionHead h2 {
    margin: 4px auto 0;
    font-size: clamp(58px, 6vw, 90px);
    line-height: .85;
    letter-spacing: 0;
}

.sectionHead p {
    font-family: var(--ja);
    margin: 10px 0 0;
}

.sectionHead--black {
    color: #fff;
}

.sectionHead--mini {
    width: 100%;
    margin-bottom: 35px;
}

.sectionHead--mini h2 {
    font-size: clamp(38px, 5.5vw, 78px);
}

.impactLink {
    font-family: var(--en);
    display: inline-flex;
    margin: 30px auto 0;
    padding: 18px 55px;
    border: 3px solid var(--pink);
    letter-spacing: .12em;
    box-shadow: 7px 7px 0 var(--pink);
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, background .2s, color .2s;
}

.impactLink:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--pink);
    background: var(--pink);
    color: #fff;
}

.impactLink.is-disabled {
    opacity: .75;
}

.moreLink {
    display: block;
    width: max-content;
    margin: 35px auto 0;
    border-bottom: 5px solid var(--pink);
}


/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .sectionHead {
        margin-bottom: 40px;
    }
}


/* ==========================================================================
   06. COMMON SCROLL MOTION
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.js-reveal {
    --reveal-x: 0px;
    --reveal-y: 34px;
    --reveal-scale: .96;
    --reveal-rotate: 0deg;
    --reveal-blur: 0px;
    --reveal-time: .72s;
    opacity: 0;
    transform: translate3d(var(--reveal-x), var(--reveal-y), 0)
        scale(var(--reveal-scale))
        rotate(var(--reveal-rotate));
    filter: blur(var(--reveal-blur));
    transform-origin: center;
    will-change: opacity, transform, filter;
    transition: opacity .18s linear,
        transform var(--reveal-time) cubic-bezier(.12, 1.28, .3, 1),
        filter .28s ease;
}

.js-reveal.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
    filter: blur(0);
}

.js-reveal--soft {
    --reveal-y: 36px;
    --reveal-scale: .98;
    --reveal-time: .68s;
}

.js-reveal--bang {
    --reveal-y: 24px;
    --reveal-scale: 1.42;
    --reveal-rotate: -3deg;
    --reveal-blur: 7px;
    --reveal-time: .58s;
}

.js-reveal--photo {
    --reveal-y: 48px;
    --reveal-scale: 1.14;
    --reveal-rotate: 2deg;
    --reveal-blur: 5px;
    --reveal-time: .7s;
}

.sectionHead.js-reveal--bang.is-in h2 {
    animation: sectionTitleBang .52s cubic-bezier(.12, 1.38, .3, 1) both;
}

@keyframes sectionTitleBang {
    0% {
        transform: scale(1.55) rotate(-4deg);
        filter: blur(6px);
    }
    48% {
        transform: scale(.92) rotate(2deg);
        filter: blur(0);
    }
    72% {
        transform: scale(1.06) rotate(-1deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}


/* ==========================================================================
   07. STAGE TO SCREEN / PHOTO BURST
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.bridge {
    position: relative;
    padding: 120px 0 0;
    overflow: hidden;
    background: url("../img/BG.png") center / cover no-repeat;
}

.bridge--pink {
    background: var(--pink);
    color: #fff;
}

.bridge--pink::before {
    content: "";
    position: absolute;
    right: -.08em;
    top: -.15em;
    width: min(38vw, 520px);
    aspect-ratio: 1 / 1;
    background: url("../img/Load.gif") center / contain no-repeat;
    opacity: .07;
    transform: rotate(-10deg);
}

.bridge__inner {
    position: relative;
    width: min(900px, calc(100% - 48px));
    margin: auto;
    text-align: center;
}

.bridge__kicker {
    margin: 0;
    color: var(--yellow);
    font-family: var(--en);
    letter-spacing: .28em;
}

.bridge h2 {
    margin: 15px 0 22px;
    font-family: var(--en);
    font-size: clamp(50px, 6.5vw, 92px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: .01em;
}

.bridge__copy {
    width: min(760px, 100%);
    margin: 0 auto;
    font-size: clamp(19px, 2.5vw, 27px);
    font-weight: 700;
    line-height: 1.8;
}

.photoBurst {
    position: relative;
    z-index: 2;
    width: min(1200px, 92vw);
    height: 520px;
    margin: 70px auto -100px;
}

.photoBurst figure {
    position: absolute;
    right: auto;
    width: 36%;
    margin: 0;
    overflow: hidden;
    border: 8px solid #fff;
    box-shadow: 14px 14px 0 #111;
    opacity: 0;
    filter: blur(5px);
    transition:
        opacity .15s linear,
        left .7s cubic-bezier(.18, .85, .25, 1),
        top .7s cubic-bezier(.18, .85, .25, 1),
        transform .7s cubic-bezier(.18, .85, .25, 1),
        filter .28s ease;
}

.photoBurst img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Initial positions: A left / B center / C right */
.photoBurst figure:nth-child(1) {
    left: 3%;
    top: 70px;
    z-index: 1;
}

.photoBurst figure:nth-child(2) {
    left: 32%;
    top: 0;
    z-index: 5;
    transition-delay: .1s;
}

.photoBurst figure:nth-child(3) {
    left: 61%;
    top: 70px;
    z-index: 2;
    transition-delay: .2s;
}

/* Keep the container visible; figures handle the reveal. */
.photoBurst.js-reveal--photo {
    opacity: 1;
    transform: none;
    filter: none;
}

.photoBurst.js-reveal--photo figure:nth-child(1) {
    transform: translate3d(-130px, 60px, 0) scale(1.15) rotate(-14deg);
}

.photoBurst.js-reveal--photo figure:nth-child(2) {
    transform: translate3d(0, 100px, 0) scale(1.18) rotate(-5deg);
}

.photoBurst.js-reveal--photo figure:nth-child(3) {
    transform: translate3d(130px, 60px, 0) scale(1.15) rotate(14deg);
}

.photoBurst.js-reveal--photo.is-in figure {
    opacity: 1;
    filter: blur(0);
}

.photoBurst.js-reveal--photo.is-in figure:nth-child(1) {
    transform: rotate(-7deg) scale(.94);
}

.photoBurst.js-reveal--photo.is-in figure:nth-child(2) {
    transform: rotate(-1deg) scale(1.05);
}

.photoBurst.js-reveal--photo.is-in figure:nth-child(3) {
    transform: rotate(7deg) scale(.94);
}

/* Shuffle 1: A becomes the center image. */
.photoBurst.js-reveal--photo.is-in.is-shuffle-1 figure:nth-child(1) {
    left: 32%;
    top: 0;
    z-index: 5;
    transform: rotate(1deg) scale(1.05);
}

.photoBurst.js-reveal--photo.is-in.is-shuffle-1 figure:nth-child(2) {
    left: 61%;
    top: 70px;
    z-index: 2;
    transform: rotate(7deg) scale(.94);
}

.photoBurst.js-reveal--photo.is-in.is-shuffle-1 figure:nth-child(3) {
    left: 3%;
    top: 70px;
    z-index: 1;
    transform: rotate(-7deg) scale(.94);
}

/* Shuffle 2 / final: C finishes largest in the center. */
.photoBurst.js-reveal--photo.is-in.is-shuffle-2 figure:nth-child(1) {
    left: 61%;
    top: 70px;
    z-index: 1;
    transform: rotate(7deg) scale(.94);
}

.photoBurst.js-reveal--photo.is-in.is-shuffle-2 figure:nth-child(2) {
    left: 3%;
    top: 70px;
    z-index: 2;
    transform: rotate(-7deg) scale(.94);
}

.photoBurst.js-reveal--photo.is-in.is-shuffle-2 figure:nth-child(3) {
    left: 32%;
    top: -10px;
    z-index: 6;
    transform: rotate(-1deg) scale(1.12);
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .bridge {
        padding-bottom: 72px;
    }

    .photoBurst {
        width: 100%;
        height: 700px;
        margin: 45px auto 0;
        overflow: visible;
    }

    .photoBurst figure {
        width: 58%;
        border-width: 5px;
        box-shadow: 9px 9px 0 #111;
    }

    .photoBurst figure:nth-child(1) {
        left: -4%;
        top: 0;
    }

    .photoBurst figure:nth-child(2) {
        left: auto;
        right: -4%;
        top: 125px;
        z-index: 2;
    }

    .photoBurst figure:nth-child(3) {
        left: 50%;
        top: 325px;
        z-index: 5;
    }

    .photoBurst.js-reveal--photo figure:nth-child(1) {
        transform: translate3d(-80px, 40px, 0) scale(1.12) rotate(-12deg);
    }

    .photoBurst.js-reveal--photo figure:nth-child(2) {
        transform: translate3d(80px, 40px, 0) scale(1.12) rotate(10deg);
    }

    .photoBurst.js-reveal--photo figure:nth-child(3) {
        transform: translate3d(-50%, 70px, 0) scale(1.15) rotate(-5deg);
    }

    .photoBurst.js-reveal--photo.is-in figure:nth-child(1) {
        transform: rotate(-6deg);
    }

    .photoBurst.js-reveal--photo.is-in figure:nth-child(2) {
        transform: rotate(5deg);
    }

    .photoBurst.js-reveal--photo.is-in figure:nth-child(3) {
        transform: translateX(-50%) rotate(-2deg);
    }
}

/* ---------- SMALL SP <= 600px ---------- */
@media (max-width: 600px) {
    .bridge {
        padding-bottom: 56px;
    }

    .bridge h2 {
        font-size: clamp(42px, 12vw, 72px);
        font-weight: 400;
        line-height: 1.08;
    }

    .photoBurst {
        height: 520px;
    }

    .photoBurst figure {
        width: 67%;
    }

    .photoBurst figure:nth-child(1) {
        left: -5%;
        top: 0;
    }

    .photoBurst figure:nth-child(2) {
        left: auto;
        right: -5%;
        top: 120px;
        z-index: 3;
    }

    .photoBurst figure:nth-child(3) {
        left: 50%;
        top: 310px;
        z-index: 5;
    }
}

/* ==========================================================================
   08. MOVIE
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.movie {
    position: relative;
    padding: 0 0 120px;
    background: var(--pink);
    color: #fff;
    overflow: hidden;
}

.movie:after {
    z-index: 1;
    content: "";
    position: absolute;
    right: -80px;
    top: 20px;
    width: 440px;
    height: 440px;
    background: url(../img/lightningPR.png) no-repeat;
    transform: rotate(28deg);
    opacity: .2;
}

.movie:before {
    z-index: 1;
    content: "";
    position: absolute;
    left: -80px;
    top: 20px;
    width: 440px;
    height: 440px;
    background: url(../img/lightningPL.png) no-repeat;
    background-size: contain;
    transform: rotate(-28deg);
    opacity: .2;
}

.movieCard {
    z-index: 3;
    position: relative;
    display: block;
    width: min(1000px, calc(100% - 48px));
    margin: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 18px 18px 0 var(--pink);
}

.movieCard img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    filter: saturate(1.15);
    transition: .45s;
}

.movieCard:hover img {
    transform: scale(1.03);
    filter: saturate(1.5);
}

.movieCard__play {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    font-size: 34px;
    padding-left: 7px;
    box-shadow: 0 0 0 12px rgba(255, 22, 136, .25);
}

.movieCard__label {
    position: absolute;
    left: 20px;
    bottom: 20px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    text-align: left;
}

.movieCard__label b, .movieCard__label small {
    display: block;
}

.movieCard__label b {
    letter-spacing: .1em;
}

.movieCard__label small {
    margin-top: 4px;
    color: var(--yellow);
}

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

    right: -80px;
    top: 20px;
    width: 140px;
    height: 140px;

}

.movie:before {
    left: -80px;
    top: 20px;
    width: 140px;
    height: 140px;

}
    
    
    .movieCard__label {
        display: none;
    }
    .movieCard__play {
        width: 72px;
        height: 72px;
        font-size: 26px;
    }
}


/* ==========================================================================
   09. THEATER
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.theater {
    position: relative;
    padding: 110px 0 120px;
    background: url("../img/stage20BG.webp") bottom center / cover no-repeat;
    color: #fff;
}

.theater__inner {
    width: min(800px, calc(100% - 48px));
    margin: auto;
    text-align: center;
}

.theater__lead {
    font-family: var(--en);
    margin: 0 0 14px;
    font-size: clamp(44px, 6.2vw, 86px);
    line-height: 1.05;
}

.theater__note {
    color: #ccc;
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .theater {
        padding-top: 145px;
    }
}



/* ==========================================================================
   11. ABOUT / CAST CUTOUT
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.intro {
    position: relative;
    padding: 110px 0 0;
    overflow: hidden;
    background: url("../img/jokei05.webp") top center / cover no-repeat;
    color: #fff;
}

.introStage .intro__beat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto 60px;
    font-family: var(--en);
}

.introStage .intro__beat b {
    color: #fff;
    font-size: clamp(29px, 3.4vw, 52px);
    font-weight: 400;
    line-height: 1;
}

.introStage .intro__beat strong {
    flex-basis: 100%;
    color: var(--pink);
    font-size: clamp(60px, 6.4vw, 98px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.07em;
    white-space: nowrap;
}



.intro__body {
    width: min(820px, calc(100% - 48px));
    margin: auto;
    font-size: 17px;
    line-height: 2;
}

/* Beat reveal ------------------------------------------------------------ */
.intro__beat.js-reveal--burst {
    opacity: 1;
    transform: none;
    filter: none;
}

.intro__beat.js-reveal--burst > b,
.intro__beat.js-reveal--burst > strong {
    display: inline-block;
    opacity: 0;
    transform: translateY(34px) scale(.55) rotate(-6deg);
}

.intro__beat.js-reveal--burst.is-in > b,
.intro__beat.js-reveal--burst.is-in > strong {
    animation: beatBang .46s cubic-bezier(.12, 1.35, .3, 1) both;
}

.intro__beat.js-reveal--burst.is-in > b:nth-child(1) { animation-delay: .04s; }
.intro__beat.js-reveal--burst.is-in > b:nth-child(2) { animation-delay: .14s; }
.intro__beat.js-reveal--burst.is-in > b:nth-child(3) { animation-delay: .24s; }
.intro__beat.js-reveal--burst.is-in > b:nth-child(4) { animation-delay: .34s; }

.intro__beat.js-reveal--burst.is-in > strong {
    animation-name: beatFinalBang;
    animation-duration: .62s;
    animation-delay: .46s;
}

/* Stage / cast ----------------------------------------------------------- */
.introStage {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 980px;
    margin: -10px auto 70px;
    overflow: hidden;
}

.introStage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: min(760px, 58vw);
    height: 72%;
    transform: translate(-50%, -46%);
    pointer-events: none;
}

.introCast {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.introCast__item {
    position: absolute;
    z-index: 2;
    transform-origin: center bottom;
}

.introCast__item img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

/* 01 Furuta */
.introCast__item--01 {
    width: clamp(180px, 16vw, 275px);
    right: 10%;
    top: -10px;
    z-index: 3;
    transition-delay: 0s;
}

/* 02 Hashimoto Jun */
.introCast__item--02 {
    width: clamp(190px, 17vw, 310px);
    left: 2%;
    top: 0;
    z-index: 3;
    transition-delay: .11s;
}

/* 03 Awane + Takada */
.introCast__item--03 {
    width: clamp(295px, 27vw, 400px);
    right: 6%;
    bottom: 0;
    z-index: 5;
    transition-delay: .21s;
}

/* 04 Hano */
.introCast__item--04 {
    width: clamp(180px, 14vw, 250px);
    left: 2%;
    bottom: 180px;
    z-index: 4;
    transition-delay: .31s;
}

/* 05 Hashimoto Satoshi */
.introCast__item--05 {
    width: clamp(180px, 15.5vw, 260px);
    left: 12%;
    bottom: 0;
    z-index: 5;
    transition-delay: .06s;
}

/* 06 Koike */
.introCast__item--06 {
    width: clamp(165px, 14.5vw, 240px);
    right: -2%;
    top: 230px;
    z-index: 4;
    transition-delay: .16s;
}

/* 07 Saotome */
.introCast__item--07 {
    width: clamp(140px, 12vw, 205px);
    left: 13%;
    top: 200px;
    z-index: 2;
    transition-delay: .26s;
}

/* 08 Mukai */
.introCast__item--08 {
    width: clamp(165px, 15vw, 200px);
    right: 13%;
    top: 300px;
    z-index: 4;
    transition-delay: .36s;
}

/* Center copy ------------------------------------------------------------ */
.introStage__center {
    position: relative;
    z-index: 10;
    width: min(760px, 54vw);
    margin: 0 auto;
    padding-top: 85px;
    text-align: center;
}


.introStage__lead {
    width: min(650px, 100%);
    margin: 0 auto;
    padding: 30px 30px 34px;
    border-top: 5px solid var(--pink);
    border-bottom: 5px solid var(--pink);
    background: rgba(0, 0, 0, .5);
}

.introStage__lead h3 {
    margin: 0;
    color: var(--yellow);
    font-size: clamp(27px, 3vw, 43px);
    line-height: 1.4;
}

.introStage__lead p {
    margin: 18px 0 0;
    font-size: clamp(16px, 1.55vw, 22px);
    font-weight: 900;
    line-height: 1.75;
}

.intro__body--teaser {
    position: relative;
    z-index: 11;
    width: min(780px, calc(100% - 48px));
    margin-top: 30px;
}

.intro__body--teaser p + p {
    margin-top: 24px;
}

.introMore,
.storyMore,
.ticketMore {
    margin-top: 38px;
}
@media (max-width: 991px) {
    .introMore {
        display: flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}
/* Cast reveal ------------------------------------------------------------ */
.introCast__item.js-reveal--cast {
    opacity: 0;
    filter: blur(7px);
    will-change: opacity, transform, filter;
    transition:
        opacity .14s linear,
        transform .72s cubic-bezier(.12, 1.35, .3, 1),
        filter .28s ease;
}

.introCast__item--01.js-reveal--cast,
.introCast__item--03.js-reveal--cast {
    transform: translate3d(-130px, 30px, 0) scale(1.13) rotate(-7deg);
}

.introCast__item--02.js-reveal--cast,
.introCast__item--04.js-reveal--cast {
    transform: translate3d(-80px, 65px, 0) scale(1.14) rotate(5deg);
}

.introCast__item--05.js-reveal--cast,
.introCast__item--07.js-reveal--cast {
    transform: translate3d(95px, 48px, 0) scale(1.14) rotate(7deg);
}

.introCast__item--06.js-reveal--cast,
.introCast__item--08.js-reveal--cast {
    transform: translate3d(130px, 32px, 0) scale(1.12) rotate(-5deg);
}

.introCast__item.js-reveal--cast.is-in {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0);
}

.introCast__item--08.js-reveal--cast.is-in {
    transform: rotate(3deg);
}

@keyframes beatBang {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(.55) rotate(-6deg);
        filter: blur(4px);
    }
    55% {
        opacity: 1;
        transform: translateY(-4px) scale(1.12) rotate(2deg);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
        filter: blur(0);
    }
}

@keyframes beatFinalBang {
    0% {
        opacity: 0;
        transform: translateY(44px) scale(.35) rotate(5deg);
        filter: blur(7px);
    }
    48% {
        opacity: 1;
        transform: translateY(-8px) scale(1.18) rotate(-2deg);
        filter: blur(0);
    }
    72% {
        transform: translateY(2px) scale(.96) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .introStage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin: 0 auto 72px;
        overflow: visible;
    }

    .introStage::before {
        top: 38%;
        width: 92vw;
        height: 58%;
    }

    .introCast {
        position: relative;
        inset: auto;
        order: 0;
        width: min(760px, calc(100% - 20px));
        height: clamp(330px, 40vw, 380px);
        margin: 4px auto 2px;
        overflow: visible;
    }

    .introCast__item {
        right: auto;
        bottom: auto;
        margin: 0;
    }

    .introCast__item img {
        object-fit: contain;
    }

    /* Dense cast cluster; 01-05 read left-to-right. */
    .introCast__item--01 { width: 24%; left: 4%; top: 8%; z-index: 2; }
    .introCast__item--02 { width: 24%; left: 24%; top: 2%; z-index: 5; }
    .introCast__item--03 { width: 30%; left: 40%; top: 0%; z-index: 6; }
    .introCast__item--04 { width: 22%; left: 65%; top: 2%; z-index: 1; }
    .introCast__item--05 { width: 20%; left: 80%; top: 6%; z-index: 2; }
    .introCast__item--06 { width: 20%; left: 45%; top: 29%; z-index: 6; }
    .introCast__item--07 { width: 18%; left: 20%; top: 31%; z-index: 7; }
    .introCast__item--08 { width: 21%; left: 65%; top: 33%; z-index: 5; }

    .introStage__center {
        order: 1;
        width: min(760px, calc(100% - 32px));
        padding-top: 80px;
    }


    .introStage__lead {
        width: min(590px, 94%);
        padding: 24px 18px 27px;
    }
.intro__body--teaser{
text-align: left;
}
 
}

/* ---------- SMALL SP <= 600px ---------- */
/* ABOUT / SMALL SP <= 600px */
@media (max-width: 600px) {

    .introCast {
        width: 100%;
        height: clamp(310px, 82vw, 430px);
        margin: 0 auto;
        overflow: visible;
    }

    .introCast__item {
        right: auto;
        bottom: auto;
        transform-origin: center bottom;
    }

    /*
       上段5人
       01 → 02 → 03 → 04 → 05
       顔が互いに隠れないよう横方向を広く使う
    */

    /* 古田 */
    .introCast__item--01 {
        width: 28%;
        left: -5%;
        top: 12%;
        z-index: 5;
    }

    /* 橋本じゅん */
    .introCast__item--02 {
        width: 28%;
        left: 12%;
        top: 2%;
        z-index: 4;
    }

    /* 粟根＋高田 */
    .introCast__item--03 {
        width: 35%;
        left: 31.5%;
        top: 0;
        z-index: 6;
    }

    /* 羽野 */
    .introCast__item--04 {
        width: 26%;
        left: 60%;
        top: 3%;
        z-index: 7;
    }

    /* 橋本さとし */
    .introCast__item--05 {
        width: 27%;
        left: 76%;
        top: 12%;
        z-index: 5;
    }

    /*
       下段3人
       上段の「顔」の隙間から見える位置へ
    */

    /* 早乙女 */
    .introCast__item--07 {
        width: 23%;
        left: 16%;
        top: 41%;
        z-index: 9;
    }

    /* 小池 */
    .introCast__item--06 {
        width: 27%;
        left: 40%;
        top: 40%;
        z-index: 10;
    }

    /* 向井 */
    .introCast__item--08 {
        width: 25%;
        left: 65%;
        top: 45%;
        z-index: 9;
    }

    .introCast__item img {
        width: 100%;
        height: auto;
        max-width: none;
        object-fit: contain;
    }

    .introStage__center {
        width: calc(100% - 28px);
        padding-top: 8px;
    }

    .introStage .intro__beat {
        width: calc(100% - 28px);
        margin-bottom: 36px;
    }
}

/* ==========================================================================
   12. PHOTO RAIL
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.photoRail {
    background: var(--yellow);
    padding: 44px 0 0;
    overflow: hidden;
}

.photoRail__track {
    display: flex;
    width: max-content;
    gap: 14px;
}

.photoRail__track + .photoRail__track {
    margin-top: 14px;
}

.photoRail__track img {
    width: 330px;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.photoRail__track--left {
    animation: railL 34s linear infinite;
}

.photoRail__track--right {
    animation: railR 39s linear infinite;
    transform: translateX(-20%);
}

@keyframes railL {
    to {
        transform: translateX(-50%);
    }
}

@keyframes railR {
    to {
        transform: translateX(30%);
    }
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .photoRail__track img {
        width: 250px;
    }
}


/* ==========================================================================
   13. STORY / CHARACTER
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.story {
    margin: auto;
    padding: 100px 0 96px;
    background: var(--yellow);
    text-align: center;
}

.story__copy {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 70px;
    width: min(980px, 100%);
    margin: auto;
}

.story__catch {
    margin: 0;
    color: var(--pink);
    font-family: var(--en);
    font-size: clamp(40px, 5.5vw, 66px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0;
}




.story__copy > p:last-child {
    font-size: 16px;
    line-height: 2;
}

.story__copy--teaser {
    align-items: start;
}

.story__summary {
    font-size: 16px;
    font-weight: 600;
    line-height: 2;
}

.story__summary strong {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
}



/* CHARACTER */
.character{width:min(var(--max),calc(100% - 48px));margin:92px auto 0;padding-top:58px;border-top:8px solid #111}
.character__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:70px 16px;overflow:visible}
.character__item{position:relative;min-height:210px;padding:30px 45% 22px 22px;border:3px solid #111;background:#fff;box-shadow:8px 8px 0 #111;overflow:visible;isolation:isolate}
.character__item>span,.character__item>h3,.character__item>p{position:relative;z-index:2}
.character__item>span{display:block;width:calc(100% - 8px);color:var(--deep);font-size:13.5px;font-weight:600;line-height:1.5;letter-spacing:.08em}
.character__item>h3{margin:12px 0 0;font-size:clamp(25px,2.45vw,35px);line-height:1.18}
.character__item>p{margin-top:12px;font-size:13px;line-height:1.75}

.character__photo{--character-accent:var(--pink);position:absolute;top:-38px;right:-14px;z-index:4;width:46%;aspect-ratio:4/5;overflow:hidden;clip-path:polygon(7% 0,100% 4%,94% 31%,100% 72%,91% 100%,9% 96%,0 76%,4% 22%);filter:drop-shadow(7px 7px 0 var(--character-accent)) drop-shadow(0 8px 9px rgba(0,0,0,.13))}
.character__photo img{display:block;width:112%;height:112%;max-width:none;margin:-6% 0 0 -6%;object-fit:cover;object-position:center 16%}
.character__item:nth-child(odd) .character__photo{--character-accent:var(--pink)}
.character__item:nth-child(even) .character__photo{--character-accent:var(--yellow)}

.character__item--noPhoto{grid-column:2;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:178px;padding:26px 24px 22px;background:#111;color:#fff;text-align:center;box-shadow:8px 8px 0 var(--pink)}
.character__item--noPhoto>span{width:100%;color:var(--yellow)}
.character__item--noPhoto>h3,.character__item--noPhoto>p{width:100%;color:#fff}

@media(min-width:992px){
.character__item:nth-child(3){order:1}.character__item:nth-child(2){order:2}.character__item:nth-child(1){order:3}
.character__item:nth-child(8){order:4}.character__item:nth-child(7){order:5}.character__item:nth-child(9){order:6}
.character__item:nth-child(6){order:7}.character__item:nth-child(5){order:8}.character__item:nth-child(4){order:9}
.character__item:nth-child(10){order:10;grid-column:2}
.character__item:nth-child(3n+1) .character__photo{top:-34px;right:-14px}
.character__item:nth-child(3n+2) .character__photo{top:-45px;right:-8px}
.character__item:nth-child(3n) .character__photo{top:-31px;right:-16px}
}

@media(max-width:991px){
.character{margin-top:72px;padding-top:46px}
.character__grid{grid-template-columns:1fr;gap:92px}
.character__item{width:min(100%,560px);min-height:220px;margin:0 auto;padding:26px clamp(210px,31vw,280px) 22px 20px;box-shadow:6px 6px 0 #111}
.character__photo{top:-34px;right:-10px;width:clamp(180px,29vw,245px)}
.character__item>h3{font-size:clamp(22px,4.3vw,30px)}
.character__item--noPhoto{grid-column:auto;width:min(100%,560px);min-height:160px;padding:22px 18px}
}

@media(max-width:600px){
.character{width:calc(100% - 32px)}
.character__grid{gap:76px}
.character__item{width:min(100%,340px);min-height:184px;padding:20px 43% 17px 13px;box-shadow:5px 5px 0 #111}
.character__photo{top:-28px;right:-8px;width:clamp(145px,41vw,180px)}
.character__item>span{width:calc(100% - 32px);font-size:12px}
.character__item>h3{margin-top:8px;font-size:clamp(19px,5.2vw,24px)}
.character__item>p{margin-top:8px;font-size:11px;line-height:1.6}
.character__item--noPhoto{width:min(100%,340px);min-height:145px;padding:20px 14px}
}

.character__item.js-reveal{opacity:0;transform:translateY(50px) scale(.88);filter:blur(5px);transition:opacity .2s linear,transform .65s cubic-bezier(.12,1.3,.3,1),filter .3s ease}
.character__item.js-reveal.is-in{opacity:1;transform:none;filter:blur(0)}
.character__item.js-reveal .character__photo{transform:translateY(20px) scale(.88);transition:transform .7s cubic-bezier(.12,1.35,.3,1) .08s}
.character__item.js-reveal.is-in .character__photo{transform:none}

@media(hover:hover) and (pointer:fine){
.character__item{transition:transform .22s cubic-bezier(.16,1,.3,1),background .2s,color .2s,box-shadow .2s}
.character__item:hover{z-index:5;transform:translate(-5px,-6px);background:var(--pink);color:#fff;box-shadow:12px 12px 0 #111}
.character__item:hover>span{color:#fff}
.character__item--noPhoto:hover{background:#111;color:#fff}
}


/* ---------- PC / BASE ---------- */
.gallery {
    padding: 6px;
    background: var(--pink);
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 105px;
    gap: 6px;
}

.gallery__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #111;
}

.gallery__item--01 {
    grid-column: 1 / span 6;
    grid-row: 1 / span 4;
}

.gallery__item--02 {
    grid-column: 7 / span 3;
    grid-row: 1 / span 2;
}

.gallery__item--03 {
    grid-column: 10 / span 3;
    grid-row: 1 / span 2;
}

.gallery__item--04 {
    grid-column: 7 / span 6;
    grid-row: 3 / span 2;
}
.gallery__item--04 img {
    object-position: center 70%;
}
.gallery__item--05 {
    grid-column: 1 / span 3;
    grid-row: 5 / span 3;
}

.gallery__item--06 {
    grid-column: 4 / span 5;
    grid-row: 5 / span 3;
}

.gallery__item--07 {
    grid-column: 9 / span 4;
    grid-row: 5 / span 3;
}



.gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;
}

.gallery__item:hover img {
    transform: scale(1.055);
}

.gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 58%, rgba(0,0,0,.14) 100%);
    pointer-events: none;
}



/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .gallery {
        padding: 4px;
    }

    .gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(120px, 24vw, 190px);
        gap: 4px;
    }

    .gallery__item--01 {
        grid-column: 1 / span 2;
        grid-row: span 2;
    }

    .gallery__item--02 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery__item--03 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery__item--04 {
        grid-column: 1 / span 2;
        grid-row: span 1;
    }

    .gallery__item--05 {
        grid-column: span 1;
        grid-row: span 2;
    }

    .gallery__item--06 {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery__item--07 {
        grid-column: span 1;
        grid-row: span 1;
    }

    /*劇団集合*/
.gallery__item--04 img{
        object-position:10% 72%;
        /*transform:scale(1.05);*/
        transform-origin:center;
    } 
    /*さとし右近*/
    .gallery__item--05 img{
        object-position:60% center;
    }

    
}

@media (min-width:601px) and (max-width:991px){
/*ベアー対策*/
    .gallery__item--03 img{
        object-position:center 40%;
    }


}
/* ==========================================================================
   15. TICKET
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.ticket {
    padding: 100px 0 104px;
    background: var(--paper);
}

.ticket__body {
    width: min(720px, calc(100% - 48px));
    margin: auto;
    text-align: center;
    padding: 70px 20px;
    border: 5px solid #111;
    box-shadow: 14px 14px 0 var(--pink);
    background: #fff;
}

.coming {
    display: inline-block;
    margin-top: 15px;
    font-size: clamp(34px, 5vw, 64px);
    color: var(--pink);
    transform: rotate(-2deg);
}

.ticket__lead {
    margin: 0;
    font-family: var(--en);
    font-size: clamp(22px, 4vw, 52px);
    line-height: 1.35;
    color: var(--pink);
}

.ticket__note {
    width: min(560px, 100%);
    margin: 22px auto 0;
    font-size: 13px;
    line-height: 1.85;
}

/* ---------- SMALL SP <= 600px ---------- */
@media (max-width: 600px) {
    .ticket {
        padding-top: 82px;
        padding-bottom: 88px;
    }
    
    .ticket__body {width:90%;
    padding: 40px 20px;
}
    
    
}


/* ==========================================================================
   16. FINAL CTA
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.finalCta {
    padding: 100px 24px;
    background: var(--pink);
    text-align: center;
}

.finalCta p {
    font-family: var(--en);
    margin: 0 0 30px;
    color: #fff;
    font-size: clamp(48px, 7vw, 100px);
    line-height: 1.02;
    letter-spacing: -.05em;
}


.finalCta .impactLink {
    font-size: 28px;
    font-weight: 400;
    background: var(--yellow);
    color: #111;
    border-color: #111;
    box-shadow: 7px 7px 0 #111;
}
.finalCta .impactLink:hover {
    background: #111;
    color: var(--yellow);
    border-color: #111;
    box-shadow: 3px 3px 0 #111;
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
  .finalCta .impactLink {
    font-size: 22px;
}  
 }    
/* ==========================================================================
   17. FOOTER / END CREDIT
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.footer {
    position: relative;
    padding: 60px 0 600px;
    color: #fff;
    text-align: center;
    background-image: url("../img/stage20BG.webp");
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #030306;
}

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

.footer__title {
    margin: auto;
    max-width: 600px;
}

.footer__roadshow {
    margin: 5px 0 0;
    color: var(--yellow);
    font-family: var(--en);
    font-size: clamp(24px, 3.2vw, 42px);
}

.footer__bluray {
    display: inline-block;
    margin: 18px 0 0;
    padding: 7px 14px;
    background: var(--pink);
    color: #fff;
    font-weight: 900;
}

.footer__credits {
    margin: 42px auto 0;
    max-width: 640px; 
}


.footer__cast {
    max-width: 100%;
}

.footer__company {
    max-width: 200px;
    margin: 42px auto 20px;
}
.footer small {
    color: #ccc;
}


.mainpage .footer__company,
.mainpage .footer small{
filter: drop-shadow(0 0 2px #000)
        drop-shadow(0 0 2px #000);
}




.footer__sns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin: 38px 0 24px;
}

.footer ul.follow {
    margin: 20px 0 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer .follow .tw a img, .footer .follow .is a img, .footer .follow .yt a img, .footer .follow .fb a img, .footer .follow .tt a img {
    padding: 10px;
    width: auto;
    height: 45px;
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .footer {
        padding: 90px 0 110px;
    }
    .footer__title {
    max-width: 80%;
}
    .footer__cast { max-width:50%; margin: auto;}
    
    /* 写真位置は今の位置を維持し、その下に黒い余白を作る */
        body:not(.subpage) .footer {
        --quick-safe: 72px;

        padding: 110px 0 calc(200px + var(--quick-safe));

        
        background-position:
            center calc(100% - var(--quick-safe));
    }
    
}


/* ==========================================================================
   18. FIXED QUICK NAV
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.fixedQuick {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    display: grid;
    width: 122px;
    border: 3px solid #111;
    background: #111;
    box-shadow: 7px 7px 0 var(--pink);
    opacity: 0;
    visibility: hidden;
}

.fixedQuick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 8px 6px;
    background: var(--yellow);
    color: #111;
    border-bottom: 2px solid #111;
    transition: transform .18s, background .18s, color .18s;
    opacity: 0;
}

.fixedQuick a:last-child {
    border-bottom: 0;
}

.fixedQuick a:hover {
    position: relative;
    z-index: 2;
    transform: translate(-5px, -2px);
    background: var(--pink);
    color: #fff;
}

.fixedQuick b {
    font-family: var(--en);
    font-size: 11px;
}

.fixedQuick span {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
}

body.is-quick-ready .fixedQuick {
    visibility: visible;
    opacity: 1;
}

body.is-quick-ready .fixedQuick a:nth-child(1) {
    animation: quickBang .46s cubic-bezier(.12, 1.35, .3, 1) .05s both;
}

body.is-quick-ready .fixedQuick a:nth-child(2) {
    animation: quickBang .46s cubic-bezier(.12, 1.35, .3, 1) .22s both;
}

body.is-quick-ready .fixedQuick a:nth-child(3) {
    animation: quickBang .46s cubic-bezier(.12, 1.35, .3, 1) .39s both;
}

@keyframes quickBang {
    0% {
        opacity: 0;
        transform: translateX(50px)
            scale(.7)
            rotate(5deg);
    }
    55% {
        opacity: 1;
        transform: translateX(-5px)
            scale(1.06)
            rotate(-2deg);
    }
    78% {
        transform: translateX(2px)
            scale(.98)
            rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0)
            scale(1)
            rotate(0);
    }
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .fixedQuick {
        right: 8px;
        bottom: 8px;
        width: auto;
        grid-template-columns: repeat(3, 1fr);
        box-shadow: 4px 4px 0 var(--pink);
    }

    .fixedQuick a {
        min-width: 74px;
        min-height: 52px;
        padding: 6px 7px;
        border-bottom: 0;
        border-right: 2px solid #111;
    }

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

    .fixedQuick b {
        font-size: 9px;
    }

    .fixedQuick span {
        font-size: 9px;
    }
}


/* ==========================================================================
   19. TRAILER MODAL
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.trailerModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #080808;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 5vw 34px;
    opacity: 0;
    visibility: hidden;
    transition: .35s;
}

.trailerModal.is-open {
    opacity: 1;
    visibility: visible;
}

.trailerModal__screen {
    width: min(1100px, 90vw);
    aspect-ratio: 16 / 9;
    background: #000;
     border: 6px solid var(--pink);
    box-shadow: 0 0 0 2px rgba(255,255,255,.15),
        0 0 70px rgba(255,22,136,.2);
}

.trailerModal__screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.trailerModal__close {
    position: absolute;
    right: 28px;
    top: 23px;
    width: 70px;
    height: 44px;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    
}

.trailerModal__close span {
    position: absolute;
    left: 9px;
    top: 10px;
    width: 60px;
    height: 2px;
    background: var(--pink);
}

.trailerModal__close span:first-child {
    transform: rotate(45deg);
}

.trailerModal__close span:nth-child(2) {
    transform: rotate(-45deg);
}

.trailerModal__close b {
    position: absolute;color: var(--pink);
    right: 12px;
    bottom: 0;
    font-size: 9px;
    letter-spacing: .15em;
}

.trailerModal__caption {
    color: #888;
    font-size: 10px;
    letter-spacing: .35em;
    margin: 18px 0 0;
}


/* ==========================================================================
   20. LEGACY FIXED THEATER
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.fixedTheater {
    font-family: var(--en);
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    background: var(--yellow);
    color: #111;
    border-radius: 50%;
    border: 4px solid #111;
    box-shadow: 6px 6px 0 var(--pink);
    transform: rotate(-7deg);
    transition: .2s;
}

.fixedTheater:hover {
    transform: rotate(0) scale(1.05);
}

.fixedTheater b {
    font-size: 12px;
}

.fixedTheater span {
    font-size: 18px;
}

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


/* ==========================================================================
   21. UTILITIES / PC-SP SWITCH
   ========================================================================== */

/* ---------- PC / BASE ---------- */
.pc {
    display: block;
}

.sp {
    display: none;
}

.nowrap {
    white-space: nowrap;
}

/* ---------- SP / TABLET <= 991px ---------- */
@media (max-width: 991px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}