/*
 * HAMIDASHI Music Festival 2027
 */


/* ==========================================
   HEADER
========================================== */
.header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 24px;
    padding: 18px clamp(22px, 4vw, 64px);
    pointer-events: none;
    transition:
        padding .35s var(--ease),
        background .35s var(--ease),
        backdrop-filter .35s var(--ease);
}

.header.is-scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(255, 241, 0, .82);
    backdrop-filter: blur(8px);
}

.header > * {
    pointer-events: auto;
}

.header__logo {
        opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s;
}
body.is-past-hero .header__logo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



.header__logo strong {
    display: block;
    font-size: clamp(20px, 2vw, 31px);
    font-weight: 950;
    letter-spacing: -.08em;
}

.header__logo strong span {
    color: var(--pink);
}

.header__logo small {
    display: block;
    margin-top: 5px;
    font-size: 8px;
    font-weight: 800;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    font-size: 12px;
    font-weight: 900;
}

.header__nav a {
    position: relative;
    padding: 8px 0;
}

.header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 3px;
    background: var(--black);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s var(--ease);
}

.header__nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header__cta {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 13px 21px;
    color: #fff;
    background: var(--black);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.header__cta span {
    font-size: 16px;
    transition: transform .25s var(--ease);
}

.header__cta:hover span {
    transform: translateX(4px);
}

/* ==========================================
   HAMBURGER
========================================== */
.header__menu {
    display:none;
    position:relative;
    width:52px;
    height:52px;
    padding:13px 11px;
    border:0;
    background:var(--black);
    border-radius:46% 54% 48% 52% / 52% 44% 56% 48%;
    transform:rotate(-3deg);
}

.header__menu span {
    display:block;
    width:100%;
    height:3px;
    margin:5px 0;
    background:var(--yellow);
    border-radius:999px;
    transition:
        transform .3s var(--ease),
        opacity .3s var(--ease);
}

/* ==========================================
   HERO
========================================== */
.hero {
    position: relative;
    height: 100svh;
    min-height: 820px;
    overflow: hidden;
    background: var(--yellow);
}

.hero__stage {
    position: absolute;
    inset: 0;
}

/*
 * MAIN VISUAL
 * 仮チラシ2稿の元比率を保持。
 * wave_wave_all は旧合成データの配置値
 * x:97.29 / y:78.64 / w:595.28 / h:841.89 を%化して配置。
 */
.hero__visual {
    position: absolute;
    z-index: 0;
    top: 44%;
    left: 50%;
    width: min(90vw, 1720px);
    aspect-ratio: 792.25 / 1005.23;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(90deg) scale(.62);
    transform-origin: center;
    transition:
        opacity .42s .02s var(--ease),
        transform 1.05s .02s cubic-bezier(.16, .78, .12, 1);
}

body.is-loaded .hero__visual {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg) scale(.84);
}

.hero__waves,
.hero__white {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    will-change: transform;
}

.hero__waves {
    z-index: 0;
    top: 7.8231%;
    left: 12.2802%;
    width: 75.1379%;
    transform-origin: 50% 50%;
}

.hero__white {
    z-index: 1;
    inset: 0;
    width: 100%;
    transform-origin: 50% 50%;
}

body.is-loaded .hero__waves {
    animation: heroWaveRotate 14.8s infinite cubic-bezier(.45, .05, .38, .96);
}

body.is-loaded .hero__white {
    animation: heroWhiteDrift 18.6s infinite cubic-bezier(.45, .05, .38, .96);
}


/* LOGO */
.hero__mark {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    width: auto;
    height: 96svh;
    aspect-ratio: 540.58 / 778.2;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.58);
    transition:
        opacity .48s .26s var(--ease),
        transform .9s .26s cubic-bezier(.16, .78, .12, 1);
}

.hero__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.is-loaded .hero__mark {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


/* CATCH pc */
.hero__catch {
    position: absolute;
    z-index: 7;
    top: 1.5%;
    right: 10%;
    width: min(28vw, 450px);
    opacity: 0;
    transform: translate(40px, -26px) rotate(3deg);
    transition:
        opacity .7s .58s var(--ease),
        transform .85s .58s var(--ease);
}

body.is-loaded .hero__catch {
    opacity: 1;
    transform: translate(0, 0) rotate(-2deg);
}



/* EN */
.hero__en {
    position: absolute;
    z-index: 7;
    right: 4.5%;
    bottom: 12%;
    width: min(14vw, 225px);
    opacity: 0;
    transform: translate(26px, 20px);
    transition:
        opacity .7s .72s var(--ease),
        transform .8s .72s var(--ease);
}

body.is-loaded .hero__en {
    opacity: 1;
    transform: translate(0, 0);
}


/* DECOR COMMON */
.hero__decor,
.about__decor,
.program__decor,
.eventInfo__decor {
    position: absolute;
    pointer-events: none;
    will-change: translate, rotate, scale, opacity;
}

.hero__decor {
    z-index: 2;
    opacity: 0;
    filter: saturate(.96);
    transition:
        opacity .65s var(--ease),
        transform 1.05s var(--ease),
        translate .9s var(--ease),
        rotate .9s var(--ease),
        scale .9s var(--ease);
}

.hero__decor--blue {
    width: min(31vw, 500px);
    left: -18vw;
    top: 13%;
    transform: translateX(-90px) rotate(-12deg);
    transition-delay: .22s;
}

.hero__decor--pink {
    width: min(22vw, 360px);
    left: -7vw;
    top: 1%;
    transform: translate(-60px, -70px) rotate(-9deg);
    transition-delay: .30s;
}

.hero__decor--green {
    width: min(26vw, 420px);
    left: -14vw;
    bottom: -15%;
    transform: translate(-60px, 80px) rotate(8deg);
    transition-delay: .38s;
}

.hero__decor--orange {
    width: min(7vw, 110px);
    right: 1%;
    bottom: 4%;
    transform: translate(60px, 60px) rotate(35deg);
    transition-delay: .46s;
}

.hero__decor--pinkSmall {
    width: min(10vw, 160px);
    right: -5vw;
    top: 26%;
    transform: translate(70px, -10px) rotate(16deg);
    transition-delay: .34s;
}

.hero__decor--greenSlice {
    width: min(14vw, 225px);
    right: 7%;
    top: 11%;
    transform: translate(30px, -55px) rotate(-4deg);
    transition-delay: .40s;
}

.hero__decor--blueSmall {
    width: min(7vw, 110px);
    left: 31%;
    bottom: 4%;
    transform: translate(-10px, 70px) rotate(20deg);
    transition-delay: .52s;
}

body.is-loaded .hero__decor {
    opacity: .12;
    transform: translate(0, 0) rotate(0);
}


/* SCROLL */
.hero__scroll,
.section-scroll {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 24px;
    display: grid;
    justify-items: center;
    gap: 6px;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.hero__scroll i,
.section-scroll i {
    position: relative;
    width: 1px;
    height: 34px;
    background: var(--black);
    overflow: hidden;
}

.hero__scroll i::after,
.section-scroll i::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -1px;
    width: 3px;
    height: 45%;
    background: var(--yellow);
    animation: scrollLine 1.6s infinite var(--ease);
}


/* HERO MISCHIEF */
.hero__decor.is-mischief-nudge,
.hero__decor.is-mischief-peek,
.hero__decor.is-mischief-pop {
    opacity: .9 !important;
}

.hero__decor.is-mischief-hide {
    opacity: 0 !important;
    scale: .42;
}


/* ==========================================
   ABOUT
========================================== */
.about {
    position: relative;
    min-height: 760px;
    display: grid;
    place-items: center;
    padding: 0 4vw 60px;
    overflow: hidden;
    background: var(--yellow);
}

.about__panel {
    position:relative;
    z-index:3;
    width:min(92vw,1180px);
    aspect-ratio:2 / 1;

    display:grid;
    place-items:center;

    padding:
        clamp(90px,9vw,125px)
        clamp(60px,10vw,150px)
        clamp(120px,14vw,190px)
        clamp(60px,10vw,150px);

    text-align:center;
    background:url("../svg/about_amoeba.svg") center / contain no-repeat;
}

.about__label {
    margin-bottom: 20px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
}

.about__title {
    font-size: clamp(32px, 4vw, 60px);
    color: var(--pink);
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -.04em;
}

.about__text {
    max-width: 760px;
    margin: 30px auto 0;
    font-size: clamp(14px, 1.35vw, 18px);
    line-height: 2;
    font-weight: 700;
}

.about__text p + p {
    margin-top: .6em;
}

.about__accent {
    color: var(--pink);
}


/* ABOUT DECOR */
.about__decor {
    z-index: 2;
    transition:
        translate .9s var(--ease),
        rotate .9s var(--ease),
        scale .9s var(--ease),
        opacity .7s var(--ease);
}

.about__decor--green {
    width: min(18vw, 260px);
    left: -3vw;
    bottom: 12%;
    transform: rotate(-9deg);
}

.about__decor--pink {
    width: min(16vw, 230px);
    right: -2vw;
    top: 10%;
    transform: rotate(17deg);
}

.about__decor--blue {
    width: min(16vw, 240px);
    right: 4vw;
    bottom: 0;
    transform: rotate(-18deg);
}

.about__decor--orange {
    width: min(8vw, 110px);
    left: 15%;
    top: 12%;
    transform: rotate(70deg);
}

.section-scroll {
    bottom: 52px;
}

.section-scroll i::after {
    background: #fff;
}


/* ==========================================
   PROGRAM
========================================== */
.program {
    position: relative;
    overflow: hidden;
    padding: 0 4vw 60px;
    background: var(--yellow);
}
/* PROGRAM WHITE AMOEBA*/
.program::before {
    content:"";
    position:absolute;
    z-index:1;
    top:50px;
    left:50%;
    bottom:30px;
    width:110vw;
    background:url("../svg/program_amoeba.svg") center / 100% 100% no-repeat;
    transform:translateX(-50%);
    pointer-events:none;
}
.program__inner {
    position: relative;
    z-index: 3;
    max-width: 1280px;
    margin: 0 auto;
}

.program__header {
    text-align: center;
}

.program__kicker {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--pink);
    font-size: 16px;
    font-weight: 950;
    transform: rotate(-6deg);
}
.program__kicker--image img {
    display: block;
    width: min(380px, 72vw);
    height: auto;
    margin: 0 auto;
}
.program__title {
    font-size: clamp(42px, 6vw, 80px);
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.04em;
}

.program__lead {
    margin-top: 16px;
    font-size: clamp(12px, 1.35vw, 17px);
    font-weight: 900;
}


/* PROGRAM LIST */
.program__list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    margin-top: 72px;
    align-items: center;
}

.programItem {
    min-height: 126px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    background: #f4f4f4;
    transform-origin: center;
    transition:
        filter .25s var(--ease),
        translate .28s var(--ease),
        rotate .28s var(--ease),
        scale .28s var(--ease);
}

.programItem:hover {
    z-index: 5;
    filter: saturate(1.12);
    translate: 0 -7px;
    scale: 1.025;
    rotate: 1deg;
}

.programItem__num {
    flex: none;
    font-size: clamp(28px, 3vw, 46px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.05em;
}

.programItem__text {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.programItem__main {
    display:block;
    font-size:clamp(17px,1.55vw,22px);
    line-height:1.3;
    font-weight:900;
    letter-spacing:-.035em;
}

.programItem__sub {
    display:block;
    font-size:clamp(11px,.95vw,14px);
    line-height:1.45;
    font-weight:500;
    letter-spacing:0;
}

/* COLORS */
.programItem--pink {
    background: #f9d0df;
}

.programItem--pink .programItem__num {
    color: var(--pink);
}

.programItem--green {
    background: #d3f0dd;
}

.programItem--green .programItem__num {
    color: var(--green);
}

.programItem--blue {
    background: #d4ebf8;
}

.programItem--blue .programItem__num {
    color: var(--blue);
}

.programItem--orange {
    background: #fae1c1;
}

.programItem--orange .programItem__num {
    color: var(--orange);
}


/* ITEM POSITION */
.programItem:nth-child(1) {
    grid-column: 1 / span 4;
    clip-path: polygon(7% 3%, 100% 14%, 93% 89%, 4% 96%, 0 42%);
    transform: rotate(-2.8deg);
}

.programItem:nth-child(2) {
    grid-column: 5 / span 4;
    margin-top: 14px;
    clip-path: polygon(4% 11%, 93% 0, 100% 80%, 89% 100%, 0 89%);
    transform: rotate(1.8deg);
}

.programItem:nth-child(3) {
    grid-column: 9 / span 4;
    margin-top: -12px;
    clip-path: polygon(0 10%, 93% 2%, 100% 88%, 6% 100%);
    transform: rotate(-2deg);
}

.programItem:nth-child(4) {
    grid-column: 1 / span 4;
    margin-left: 22px;
    clip-path: polygon(7% 0, 100% 13%, 92% 96%, 0 84%);
    transform: rotate(3deg);
}

.programItem:nth-child(5) {
    grid-column: 5 / span 4;
    margin-top: -10px;
    clip-path: polygon(4% 15%, 96% 0, 100% 81%, 7% 100%, 0 52%);
    transform: rotate(-1.8deg);
}

.programItem:nth-child(6) {
    grid-column: 9 / span 4;
    margin-right: 28px;
    clip-path: polygon(0 7%, 97% 0, 100% 89%, 10% 100%);
    transform: rotate(2.5deg);
}

.programItem:nth-child(7) {
    grid-column: 1 / span 4;
    margin-top: 18px;
    clip-path: polygon(3% 12%, 100% 0, 94% 86%, 6% 100%, 0 50%);
    transform: rotate(-3deg);
}

.programItem:nth-child(8) {
    grid-column: 5 / span 4;
    clip-path: polygon(0 5%, 95% 0, 100% 88%, 7% 100%);
    transform: rotate(2.5deg);
}

.programItem:nth-child(9) {
    grid-column: 9 / span 4;
    margin-top: 16px;
    clip-path: polygon(7% 0, 100% 9%, 93% 100%, 0 87%);
    transform: rotate(-1.6deg);
}

.programItem:nth-child(10) {
    grid-column: 1 / span 4;
    margin-left: 35px;
    clip-path: polygon(4% 8%, 98% 0, 100% 82%, 8% 100%, 0 39%);
    transform: rotate(1.6deg);
}

.programItem:nth-child(11) {
    grid-column: 5 / span 4;
    width: 92%;
    justify-self: start;
    margin-top: -10px;
    clip-path: polygon(0 10%, 96% 0, 100% 92%, 8% 100%);
    transform: rotate(-3deg);
}

.programItem:nth-child(12) {
    grid-column: 9 / span 4;
    width: 104%;
    justify-self: end;
    margin-right: 18px;
    clip-path: polygon(4% 0, 100% 11%, 94% 100%, 0 88%);
    transform: rotate(2.8deg);
}
.programItem:nth-child(13) {
    grid-column: 1 / span 4;
    margin-top: 24px;
    clip-path: polygon(0 9%, 92% 0, 100% 84%, 4% 100%);
    transform: rotate(-2.2deg);
}

.programItem:nth-child(14) {
    grid-column: 5 / span 4;
    clip-path: polygon(6% 0, 100% 12%, 95% 92%, 0 100%);
    transform: rotate(2.2deg);
}

.programItem:nth-child(15) {
    grid-column: 9 / span 4;
    margin-top: 18px;
    clip-path: polygon(0 6%, 96% 0, 100% 84%, 7% 100%);
    transform: rotate(-2.4deg);
}

.programItem.is-show {
    animation: itemPop .72s both var(--ease);
}


/* NOTE */
.program__note {
    margin-top: 34px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
}


/* COMING SOON */
.comingSoon {
    width: min(560px, 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 30px auto 0;
    padding: 20px 40px;
    background: var(--yellow);
    border: 4px solid var(--black);
    border-radius: 999px;
    text-align: center;
}

.comingSoon strong {
    font-size: 20px;
    font-weight: 950;
}

.comingSoon span {
    font-size: 13px;
    font-weight: 800;
}


/* PROGRAM DECOR */
.program__decor {
    z-index: 2;
    transition:
        translate .9s var(--ease),
        rotate .9s var(--ease),
        scale .9s var(--ease),
        opacity .7s var(--ease);
}

.program__decor--01 {
    left: 1%;
    top: 24%;
    width: 7vw;
    transform: rotate(-30deg);
}

.program__decor--02 {
    right: 2%;
    top: 13%;
    width: 9vw;
    transform: rotate(13deg);
}

.program__decor--03 {
    left: 9%;
    bottom: 5%;
    width: 6vw;
    transform: rotate(80deg);
}

.program__decor--04 {
    right: -2%;
    bottom: 1%;
    width: 13vw;
    transform: rotate(-18deg);
}

/* ==========================================
   EVENT INFO
========================================== */
.eventInfo {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    display: grid;
    place-items: center;
    padding: 60px 5vw;
    background: var(--yellow);
}

.eventInfo__inner {
    position: relative;
    z-index: 3;
    width: min(1200px, calc(100% - 80px));
    margin: 0 auto;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}


/* DATE */
.eventInfo__date {
    width: min(360px, 42vw);
    max-width: 90%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.eventInfo__dateImage {
    display: block;
    width: 340px;
    max-width: 100%;
    height: auto;
}


/* VENUE LOGOS */
.eventInfo__venue {
    display: flex;
    align-items: center;

    width: 340px;
    max-width: 100%;
    gap: 16px;
}

.eventInfo__venueLogo {
    display: block;
    width: 230px;
    height: auto;
}

.eventInfo__tmtLogo {
    display: block;
    width: 94px;
    height: auto;
}


/* FESTIVAL NAME */
.eventInfo__copy {
    display: grid;
    justify-items: end;
    gap: 30px;
    text-align: right;
}

.eventInfo__copy p {
    margin: 0;
    font-size: clamp(25px, 2.6vw, 42px);
    line-height: 1;
    font-weight: 700;
}

.eventInfo__copy img {
    width: min(240px, 30vw);
}


/* ==========================================
   EVENT DECOR
========================================== */
.eventInfo__decor {
    z-index: 2;
    transition:
        translate .9s var(--ease),
        rotate .9s var(--ease),
        scale .9s var(--ease),
        opacity .7s var(--ease);
}

.eventInfo__decor--blue {
    width: 22vw;
    left: -8vw;
    bottom: -2vw;
    transform: rotate(-16deg);
}

.eventInfo__decor--pink {
    width: 14vw;
    right: -2vw;
    top: 8%;
    transform: rotate(15deg);
}

.eventInfo__decor--green {
    width: 14vw;
    right: 18vw;
    bottom: -8vw;
    transform: rotate(-12deg);
}


/* ==========================================
   EVENT INFO FOOTER
========================================== */
.eventInfo__footer {
    position: relative;
    z-index: 3;

    width: min(1200px, calc(100% - 80px));

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;

    margin: 70px auto 0;
    padding: 30px 0 40px;

    border-top: 1px solid rgba(0, 0, 0, .25);
}


/* ==========================================
   FOOTER CREDIT
========================================== */
.footer-credit {
    flex: 1;
    min-width: 0;

    font-size: 12.5px;
    line-height: 1.8;
    font-weight: 500;
}

.footer-credit p {
    margin: 0;
}

.footer-credit p + p {
    margin-top: 6px;
}

.footer-credit__row {
    display: flex;
    align-items: flex-start;
}

.footer-credit__label {
    flex: none;
}

.footer-credit__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.footer-credit__bunka {
    float: left;
    width: 50px;
    height: auto;
    margin: 0 10px 4px 0;
    padding: 2px;
    background: #fff;
}


/* ==========================================
   FOOTER BOTTOM
========================================== */
.footer-bottom {
    flex: none;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.footer-sns {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 0;
}

.footer-sns a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    transition: opacity .3s ease;
}

.footer-sns a:hover {
    opacity: .6;
}

.footer-sns img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-copy {
    margin: 0;
    font-size: 10px;
}


/* ==========================================
   TABLET / SP
========================================== */
@media (max-width: 900px) {

    .eventInfo__inner {
        width: calc(100% - 40px);
        display: block;
    }

    .eventInfo__date {
        gap: 12px;
    }


    .eventInfo__copy {
        margin-top: 30px;
        justify-items: start;
        text-align: left;
    }

    .eventInfo__copy p {
        font-size: 26px;
    }


    /* FOOTER */
    .eventInfo__footer {
        width: calc(100% - 40px);
        display: block;

        margin-top: 50px;
        padding: 24px 0 30px;
    }

    .footer-credit {
        width: 100%;
        margin-bottom: 25px;

        font-size: 10px;
        line-height: 1.7;
    }

    .footer-credit__text {
        flex: 1;
        min-width: 0;

        overflow: visible;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .footer-credit__bunka {
        width: 40px;
        margin: 0 7px 3px 0;
        padding: 2px;
    }

    .footer-bottom {
        align-items: flex-start;
        gap: 12px;
    }


}


/* ==========================================
   SMALL SP
========================================== */
@media (max-width: 560px) {

    .eventInfo__dateImage {
        width: 250px;
    }

    .eventInfo__venue {
        width: 250px;
    }

    .eventInfo__venueLogo {
        width: 180px;
    }

    .eventInfo__tmtLogo {
        width: 60px;
    }

    .footer-credit__bunka {
        width: 38px;
    }
}
/* ==========================================
   MISCHIEF STATES
========================================== */
.js-mischief.is-mischief-nudge {
    translate: var(--nudge-x, 10px) var(--nudge-y, -8px);
    rotate: var(--nudge-r, 3deg);
}

.js-mischief.is-mischief-hide {
    opacity: 0 !important;
    scale: .72;
}

.js-mischief.is-mischief-peek {
    translate: var(--peek-x, 28px) var(--peek-y, 0);
    rotate: var(--peek-r, -5deg);
}

.js-mischief.is-mischief-pop {
    scale: 1.08;
    rotate: var(--pop-r, 5deg);
}


/* ==========================================
   OPENING
========================================== */
.opening {
    position:fixed;
    z-index:9999;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:var(--yellow);
    opacity:1;
    visibility:visible;
    transition:
        opacity .32s ease,
        visibility 0s .4s;
}

.opening__scene {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    transform-origin:50% 50%;
    transition:
        transform .58s cubic-bezier(.55,.02,.82,.36),
        opacity .46s ease,
        filter .46s ease;
}


/* ==========================================
   ハミ / ハミ / ダシ / ダシ
========================================== */
.opening__pair {
    --end-rotate:0deg;

    position:absolute;
    z-index:3;
    display:flex;
    align-items:center;
    gap:clamp(2px,.45vw,8px);
    opacity:0;

    transform:
        translateY(28px)
        rotate(var(--end-rotate))
        scale(.72);

    transform-origin:50% 50%;
    pointer-events:none;
    will-change:transform,opacity;
}

.opening__pair img {
    display:block;
    flex:0 0 auto;
    width:auto;
   height:clamp(76px,11vw,165px);
}

/* ハミ 01 */
.opening__pair--01 {
    --end-rotate:-6deg;
    left:50%;
    right:auto;
    top:18%;              /* 12% → 下へ */
    translate:-88% 0;     /* -105% → 右へ */
}

/* ハミ 02 */
.opening__pair--02 {
    --end-rotate:5deg;
    left:50%;
    right:auto;
    top:32%;              /* 30% → 少し下へ */
    translate:-5% 0;      /* 5% → 左へ */
}

/* ダシ 01 */
.opening__pair--03 {
    --end-rotate:4deg;
    left:50%;
    right:auto;
    bottom:31%;           /* 上へ */
    translate:-82% 0;     /* -95% → 右へ */
}

/* ダシ 02 */
.opening__pair--04 {
    --end-rotate:-5deg;
    left:50%;
    right:auto;
    bottom:16%;           /* 上へ */
    translate:-8% 0;      /* 左へ */
}


/* ダシだけ少し小さく */
.opening__pair--03 img,
.opening__pair--04 img {
    height: clamp(70px, 10vw, 150px);
}


/* ==========================================
   PAKA!
========================================== */
.opening__pair.is-show {
    animation:
        openingPaka .34s
        cubic-bezier(.18,.89,.32,1.25)
        forwards;
}

@keyframes openingPaka {
    0% {
        opacity:0;
        transform:
            translateY(28px)
            rotate(var(--end-rotate))
            scale(.72);
    }

    55% {
        opacity:1;
        transform:
            translateY(-7px)
            rotate(var(--end-rotate))
            scale(1.07);
    }

    78% {
        opacity:1;
        transform:
            translateY(2px)
            rotate(var(--end-rotate))
            scale(.97);
    }

    100% {
        opacity:1;
        transform:
            translateY(0)
            rotate(var(--end-rotate))
            scale(1);
    }
}


/* ==========================================
   WHITE BURST
========================================== */
.opening__burst {
    position:absolute;
    z-index:2;
    top:50%;
    left:50%;
    width:min(52vw,520px);
    max-width:none;
    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(.62)
        rotate(-4deg);

    transform-origin:50% 50%;
    pointer-events:none;
    will-change:transform,opacity;
    transition:
        opacity .22s ease,
        transform .68s cubic-bezier(.16,.78,.12,1);
}

body.is-opening-burst .opening__burst {
    opacity:1;
    transform:
        translate(-50%,-50%)
        scale(1)
        rotate(0deg);
}


/* ==========================================
   SHRINK -> HERO
========================================== */
body.is-opening-shrink .opening__scene {
    opacity:0;
    filter:blur(1px);
    transform:scale(.08) rotate(3deg);
}

body.is-opening-out .opening {
    opacity:0;
    pointer-events:none;
}

body.is-opening-done .opening {
    display:none;
}

body:not(.is-opening-done) {
    overflow:hidden;
}


/* ==========================================
   OPENING TABLET / SP
========================================== */
@media (max-width:900px) {
    .opening__pair img {
        height:clamp(68px,21vw,96px);
    }

    .opening__pair {
        gap:1px;
    }

    .opening__pair--01 {
        left:50%;
        right:auto;
        top:18%;
        translate:-84% 0;
    }

    .opening__pair--02 {
        left:50%;
        right:auto;
        top:33%;
        translate:-6% 0;
    }

    .opening__pair--03 {
        left:50%;
        right:auto;
        bottom:31%;
        translate:-78% 0;
    }

    .opening__pair--04 {
        left:50%;
        right:auto;
        bottom:16%;
        translate:-8% 0;
    }

    .opening__burst {
        width:min(72vw,520px);
    }
    
    /* ダシだけ少し小さく */
        .opening__pair--03 img,
    .opening__pair--04 img {
        height: clamp(62px, 19vw, 88px);
    }
    
    
}

@media (max-width:560px) {
    .opening__pair img {
        height:clamp(64px,20vw,82px);
    }

    .opening__burst {
        width:78vw;
    }
}


/* ==========================================
   ANIMATION
========================================== */
@keyframes scrollLine {
    0% {
        transform: translateY(-20%);
    }

    100% {
        transform: translateY(310%);
    }
}

@keyframes itemPop {
    0% {
        opacity: 0;
        translate: var(--from-x, 0) var(--from-y, 28px);
        scale: .92;
    }

    72% {
        opacity: 1;
        translate: 0 0;
        scale: 1.025;
    }

    100% {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}









/* 白形はゆっくり呼吸。周期の途中だけ時々わずかに回転する */
@keyframes heroWhiteDrift {
    0%, 18% { transform: scale(1) rotate(0deg); }
    30%     { transform: scale(1.025) rotate(0deg); }
    38%     { transform: scale(1.012) rotate(-2.2deg); }
    46%     { transform: scale(1.028) rotate(.5deg); }
    56%, 72%{ transform: scale(1.01) rotate(0deg); }
    80%     { transform: scale(1.034) rotate(2.4deg); }
    88%     { transform: scale(1.012) rotate(-.4deg); }
    100%    { transform: scale(1.02) rotate(0deg); }
}

/* 波は白形と別周期で、わずかに行き来しながら回転 */
@keyframes heroWaveRotate {
    0%   { transform: rotate(-1.4deg) scale(1.01); }
    21%  { transform: rotate(1.8deg) scale(1.018); }
    47%  { transform: rotate(-.6deg) scale(1.006); }
    73%  { transform: rotate(2.3deg) scale(1.02); }
    88%  { transform: rotate(.2deg) scale(1.008); }
    100% { transform: rotate(-1.1deg) scale(1.014); }
}


/* ==========================================
   PROGRAM LINK
========================================== */
.programItem--link {
    position:relative;
    color:inherit;
    padding-right:28px;
    padding-bottom:68px;
    cursor:pointer;
}
.programItem--link::after { content:""; position:absolute; inset:5px; border:1px solid transparent; pointer-events:none; transition:border-color .3s var(--ease); }
.programItem--link:hover::after { border-color:rgba(34,24,21,.28); }
.programItem__more {
    position:absolute;
    right:10px;
    bottom:24px;

    display:inline-flex;
    align-items:center;
    gap:9px;

    min-height:34px;
    padding:9px 9px 9px 15px;

    background:var(--black);
    color:var(--yellow);
    border-radius:999px;

    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.04em;
    white-space:nowrap;

    box-shadow:0 4px 0 rgba(34,24,21,.14);
}
.programItem__more::after {
    content:""; flex:none; width:20px; height:12px;
    background:url("../svg/arrowY.svg") center / contain no-repeat;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.programItem--link:hover .programItem__more { transform:translateY(-3px) rotate(-1deg) scale(1.04); box-shadow:0 7px 0 rgba(34,24,21,.1); }
.programItem--link:hover .programItem__more::after { transform:translateX(4px) scaleX(1.08); }

/* ==========================================
   JINGLE TEASER
========================================== */
.jingleTeaser { position:relative; overflow:visible; padding:90px 5vw 135px; background:var(--yellow); }
.jingleTeaser__body {
    position:relative; z-index:3;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:min(850px,88vw); min-height:620px; margin:0 auto;
    padding:72px clamp(42px,8vw,105px) 82px;
    background:var(--black); color:var(--yellow); text-align:center;
    border-radius:48% 52% 46% 54% / 51% 47% 53% 49%;
    transform:rotate(-1.2deg);
    transition:transform .7s cubic-bezier(.16,1,.3,1), border-radius .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1);
}
.jingleTeaser__body::after {
    content:"";
    position:absolute;
    z-index:-1;
    right:12%;
    bottom:5%;
    width:100px;
    height:100px;
    background:var(--black);
    clip-path:polygon(0 0,100% 8%,72% 100%);
    transform:rotate(-8deg);
    transform-origin:top center;
    transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.jingleTeaser__body:hover {
    transform:rotate(.5deg) translateY(-6px) scale(1.012);
    border-radius:53% 47% 50% 50% / 47% 53% 46% 54%;
    box-shadow:0 16px 0 rgba(34,24,21,.06);
}
.jingleTeaser__body:hover::after { transform:rotate(-4deg) translate(4px,3px); }
.jingleTeaser__kicker { display:inline-block; margin-bottom:14px; font-size:13px; font-weight:900; letter-spacing:.12em; transform:rotate(-4deg); }
.jingleTeaser h2 { font-size:clamp(27px,5vw,66px); line-height:1.15; font-weight:900; letter-spacing:-.04em; }
.jingleTeaser__lead { margin-top:22px; font-size:clamp(14px,1.6vw,18px); line-height:1.8; font-weight:700; }
.jingleTeaser__meta {  margin-top:28px; }
.jingleTeaser__meta span { padding:8px 13px; border:2px solid var(--yellow); border-radius:999px; font-size:18px; font-weight:900; }
.jingleTeaser__more {
    display:inline-flex; align-items:center; gap:12px;
    margin-top:30px; padding:13px 18px 13px 22px;
    background:var(--yellow); color:var(--black); border-radius:999px;
    font-size:13px; font-weight:900;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.jingleTeaser__more::after { content:""; width:23px; height:14px; background:url("../svg/arrowB.svg") center / contain no-repeat; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.jingleTeaser__body:hover .jingleTeaser__more { transform:translateY(-2px) rotate(-1deg); }
.jingleTeaser__body:hover .jingleTeaser__more::after { transform:translateX(4px); }
.jingleTeaser__decor { position:absolute; z-index:2; pointer-events:none; }
.jingleTeaser__decor--pink { width:min(17vw,230px); left:-3vw; top:5%; transform:rotate(-18deg); }
.jingleTeaser__decor--blue { width:min(11vw,150px); right:2vw; bottom:2%; transform:rotate(16deg); }

/* ==========================================
   TABLET / SP
   900px以下のみPCとの差分
========================================== */
@media (max-width: 900px) {

    /* HEADER */
    .header {
        grid-template-columns:1fr auto;
        padding:14px 16px;
    }

    .header__logo { display:none; }
    .header__cta { display:none; }
    .header,
.header.is-scrolled,
.header.is-menu-open {
    background:transparent;
    backdrop-filter:none;
}
    
   /* ==========================================
       FULL SCREEN MENU BG
    ========================================== */
    .header::before {
        content:"";
        position:fixed;
        z-index:-1;
        inset:0;
        background:var(--black);

        clip-path:circle(0 at calc(100% - 44px) 40px);

        transition:
            clip-path .85s cubic-bezier(.16,1,.3,1);
    }

    .header.is-menu-open::before {
        clip-path:circle(150vmax at calc(100% - 44px) 40px);
    }


    /* ==========================================
       HAMBURGER
    ========================================== */
    .header__menu {
        position:relative;
        z-index:10;
        justify-self:end;

        display:block;
        width:52px;
        height:52px;
        margin-right:0;
        padding:0;
        border:0;

        background:var(--black);
        border-radius:43% 57% 48% 52% / 52% 44% 56% 48%;

        transform:rotate(-4deg);
        transition:
            transform .65s cubic-bezier(.16,1,.3,1),
            border-radius .65s cubic-bezier(.16,1,.3,1),
            background .45s ease,
            box-shadow .45s ease;

        cursor:pointer;
    }

    .header__menu:hover {
        transform:rotate(3deg) scale(1.06);
        border-radius:55% 45% 58% 42% / 44% 56% 46% 54%;
    }


    /* 3本線 */
    .header__menu span {
        position:absolute;
        left:50%;
        top:50%;

        display:block;
        width:25px;
        height:3px;
        margin:0;

        background:var(--yellow);
        border-radius:999px;

        transform-origin:center;

        transition:
            transform .65s cubic-bezier(.16,1,.3,1),
            opacity .35s ease,
            width .45s cubic-bezier(.16,1,.3,1);
    }

    .header__menu span:nth-child(1) {
        transform:translate(-50%,-8px);
    }

    .header__menu span:nth-child(2) {
        transform:translate(-50%,-50%);
    }

    .header__menu span:nth-child(3) {
        transform:translate(-50%,5px);
    }


    /* ==========================================
       OPEN
    ========================================== */
    .header.is-menu-open {
        min-height:100svh;
        color:var(--yellow);
    }

    .header.is-menu-open .header__menu {
        background:var(--black);
        border-radius:57% 43% 46% 54% / 42% 56% 44% 58%;
        transform:rotate(4deg) scale(1.04);
        box-shadow:0 0 0 2px var(--yellow);
    }


    /* ×
       3本線とまったく同じ中央位置から変形
    ========================================== */
    .header.is-menu-open .header__menu span:nth-child(1) {
        transform:translate(-50%,-50%) rotate(45deg);
    }

    .header.is-menu-open .header__menu span:nth-child(2) {
        width:0;
        opacity:0;
        transform:translate(-50%,-50%) rotate(12deg);
    }

    .header.is-menu-open .header__menu span:nth-child(3) {
        transform:translate(-50%,-50%) rotate(-45deg);
    }


    /* ==========================================
       NAV
    ========================================== */
    .header__nav {
        position:fixed;
        z-index:5;
        inset:0;

        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;

        gap:0;
        padding:90px 9vw 60px;

        color:var(--yellow);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transform:translateY(24px);

        transition:
            opacity .45s .1s ease,
            transform .7s .1s cubic-bezier(.16,1,.3,1),
            visibility 0s .8s;
    }

    .header.is-menu-open .header__nav {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);

        transition:
            opacity .45s .2s ease,
            transform .75s .2s cubic-bezier(.16,1,.3,1),
            visibility 0s;
    }


    /* ==========================================
       NAV ITEM
    ========================================== */
    .header__nav a {
        width:100%;
        padding:18px 0;

        color:var(--yellow);
        border-bottom:1px solid rgba(255,241,0,.3);

        font-size:clamp(28px,8vw,48px);
        line-height:1;
        font-weight:900;

        opacity:0;
        transform:translateX(-25px) rotate(-3deg);

        transition:
            opacity .45s ease,
            transform .65s cubic-bezier(.16,1,.3,1);
    }

    .header.is-menu-open .header__nav a {
        opacity:1;
        transform:translateX(0) rotate(0deg);
    }

    .header.is-menu-open .header__nav a:nth-child(1) {
        transition-delay:.24s;
    }

    .header.is-menu-open .header__nav a:nth-child(2) {
        transition-delay:.31s;
    }

    .header.is-menu-open .header__nav a:nth-child(3) {
        transition-delay:.38s;
    }

    .header.is-menu-open .header__nav a:nth-child(4) {
        transition-delay:.45s;
    }

    .header.is-menu-open .header__nav a:nth-child(5) {
        transition-delay:.52s;
    }


    /* 下線はSPでは不要 */
    .header__nav a::after {
        display:none;
    }
    /* HERO 900*/
    .hero {
        height: 100svh;
        min-height: 720px;
        padding-top: 0;
    }

    .hero__stage {
        position: absolute;
        inset: 0;
        min-height: 0;
        
            transform: scale(.9);
    transform-origin: center center;
    }

    .hero__decor {
        display: none;
    }

    .hero__visual {
        top: 50%;
        width: min(142vw, 980px);
        transform: translate(-50%, -50%) scale(.92) rotate(0deg);
        transition:
            opacity .8s .06s var(--ease),
            transform 1.2s .06s var(--ease);
    }

    body.is-loaded .hero__visual {
        transform: translate(-50%, -50%) scale(1.03) rotate(0deg);
    }

    .hero__mark {
        top: 50%;
        width: min(90vw, 700px);
        height: auto;
        aspect-ratio: auto;
        transform: translate(-50%, -50%) scale(.78);
        transition:
            opacity .55s .42s var(--ease),
            transform .95s .42s var(--ease);
    }

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

    .hero__catch {
      top: -4vw;
        right: 14vw;
        width: 46vw;
        max-width: none;
    }

    body.is-loaded .hero__catch {
        opacity: 1;
        transform: translate(0, 0) rotate(-2deg);
    }

    .hero__en {
        right: 10%;
        bottom: 0;
        width: min(30vw, 240px);
    }

    .hero__scroll {
        display: none;
    }


   

    /* ABOUT */
    .about {
        min-height: 500px;
        padding: 0 ;
    }

    .about__panel {
        width:100%;
        aspect-ratio:1 / 1.2;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        padding:90px 0 120px;

        background-size:118% 108%;
    }
    .about__text { margin-top:18px;
        line-height: 1.85;
    }


    /* PROGRAM */
    .program {
        padding: 90px 18px 100px;
    }

    .program::before {

    }

    .program__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 54px;
    }

    .programItem:nth-child(n) {
        grid-column: auto;
        min-height: 136px;
        margin: 0;
        padding: 22px 20px;
    }



    .programItem__num {
        font-size: 34px;
    }

    .comingSoon {
        flex-direction: column;
        gap: 5px;
    }


    /* EVENT INFO */
    .eventInfo__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .eventInfo__copy {
        justify-items: start;
        text-align: left;
    }

    .eventInfo__date {
        width: min(420px, 80vw);
    }

    .eventInfo__copy img {
        width: min(260px, 60vw);
    }

    .eventInfo__footer {
        width: calc(100% - 20px);
        margin-top: 50px;
        padding: 25px 0 30px;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }


    .footer-sns a {
        width: 28px;
        height: 28px;
    }


    /* PROGRAM LINK / JINGLE */
    .programItem--link { padding-right:132px; }
    .programItem__more { right:14px; bottom:14px; font-size:9px; }
    .jingleTeaser { padding:70px 18px 115px; }
   
    .jingleTeaser__body {
        width:calc(100% - 16px);
        min-height:0;
        margin:0 auto;

        padding:72px 26px 82px;

        border-radius:
            18% 8% 16% 10% /
            8% 14% 10% 16%;

        transform:rotate(-.6deg);
    }

    .jingleTeaser__body::after {
        right:14%;
        bottom:-28px;

        width:58px;
        height:54px;

        transform:rotate(-10deg);
    }
    .jingleTeaser__decor--pink { width:30vw; left:-12vw; }
    .jingleTeaser__decor--blue { width:22vw; right:-6vw; }
}

/* ==========================================
   SMALL SP
========================================== */
@media (max-width: 560px) {



    /* HERO */
    .hero {
        height: 100svh;
        min-height: 100svh;
        padding-top: 0;
    }

   .hero__stage {
        min-height: 0;
        transform: scale(.85);
        transform-origin: center center;
    }

    .hero__visual {
        top: 50%;
        width: 155vw;
    }

    .hero__mark {
        top: 49%;
        width: 108vw;
        max-width: 500px;
    }

   .hero__catch {
        top: 10vw;
        right: 7vw;
        width: 52vw;
        max-width: 220px;
    }


    .hero__en {
        right: 4%;
        bottom: 1%;
        width: 34vw;
        max-width: 132px;
    }


    /* ABOUT */
    .about {
        min-height: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .about__panel {
        width:100%;
        aspect-ratio:1 / 1.35;
        padding:80px 10px 140px;
        background-size:228% 112%;
    }

    .about__label {
        font-size: 9px;
    }

    .about__title {
    font-size: clamp(25px, 8vw, 34px);
  
    }

    .about__text {
        margin-top: 24px;padding: 0 8px;
 font-size: clamp(15px, 1.4vw, 18px);
        line-height: 1.9;
        text-align: left;
    }

    .about__decor--green {
        width: 35vw;
        left: -13vw;
        bottom: 4%;
    }

    .about__decor--pink {
        width: 28vw;
        right: -11vw;
        top: 4%;
    }

    .about__decor--blue {
        width: 28vw;
        right: -9vw;
        bottom: -3%;
    }

    .about__decor--orange {
        width: 17vw;
        left: 3%;
        top: 13%;
    }

    .section-scroll {
        display: none;
    }


    /* PROGRAM */
    .program {
        padding: 78px 10px 88px;
    }

    .program::before {
        top: 20px;
        bottom: 20px;
        width: 100%;
        background: url("../svg/program_amoeba_sp.svg")
                    center / 100% 100%
                    no-repeat;
    }
    .program__title {
        font-size: clamp(34px, 10vw, 47px);
    }

    .program__lead {
        max-width: 270px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
    }
    
  .program__list {
        grid-template-columns:1fr;
        gap:8px;
        margin-top:42px;
    }

    .programItem:nth-child(n) {
        grid-column:auto;
        width:96%;
        min-height:92px;
        margin:0 auto;
        padding:16px 20px;
        gap:13px;
        border-radius:0;
        transform:none;
    }

    /* 01 */
    .programItem:nth-child(3n+1) {
        width:95%;
        margin-left:0;
        margin-right:auto;
        clip-path:polygon(
            3% 5%,
            100% 0,
            96% 94%,
            0 100%
        );
        transform:rotate(-.7deg);
    }

    /* 02 */
    .programItem:nth-child(3n+2) {
        width:92%;
        margin-left:auto;
        margin-right:1%;
        clip-path:polygon(
            0 2%,
            96% 7%,
            100% 95%,
            4% 100%
        );
        transform:rotate(.8deg);
    }

    /* 03 */
    .programItem:nth-child(3n) {
        width:97%;
        margin-left:2%;
        margin-right:auto;
        clip-path:polygon(
            4% 0,
            100% 5%,
            97% 100%,
            0 94%
        );
        transform:rotate(-.4deg);
    }

    .programItem:hover {
        translate:0 0;
        scale:1;
        rotate:0deg;
    }


    .programItem__num {
        font-size:27px;
    }

    .program__note {
        margin: 24px 16px 0;
        font-size: 9px;
    }

    .comingSoon {
        width: calc(100% - 28px);
        margin-top: 48px;
        padding: 20px 18px;
        border-width: 3px;
    }

    .comingSoon strong {
        font-size: 18px;
    }

    .comingSoon span {
        font-size: 11px;
    }

    .program__decor--01 {
        width: 16vw;
    }

    .program__decor--02 {
        width: 20vw;
    }

    .program__decor--04 {
        width: 24vw;
    }


    /* EVENT INFO */
    .eventInfo {
        min-height: 410px;
        padding: 76px 24px;
    }

    .eventInfo__inner {
        width: 100%;
        padding-inline: 20px; /* クレジット側と同じ値に */
        box-sizing: border-box;

        gap: 42px; /* ← 生かす */
    }

    .eventInfo__copy p {
        font-size: 30px;
    }

    .eventInfo__decor--blue {
        width: 42vw;
        left: -18vw;
    }

    .eventInfo__decor--pink {
        width: 26vw;
        right: -8vw;
    }

    .eventInfo__decor--green {
        width: 30vw;
        right: 12vw;
        bottom: -12vw;
    }


    /* PROGRAM LINK / JINGLE */
    .programItem--link { padding-right:18px; padding-bottom:54px; }
    .programItem__more { right:16px; bottom:12px; min-height:32px; padding:8px 12px 8px 14px; }
    .programItem__more::after { width:18px; height:11px; }
    .jingleTeaser { padding:56px 14px 100px; }

    .jingleTeaser__body {
        width:calc(100% - 8px);

        padding:64px 20px 72px;

        border-radius:
            14% 6% 15% 7% /
            6% 12% 8% 14%;
    }

    .jingleTeaser__body::after {
        right:12%;
        bottom:-24px;

        width:50px;
        height:48px;
    }
}



/* ↓ 必ず通常スマホ指定より後ろに置く */
@media (max-width: 560px) and (max-height: 700px) {

    .hero__catch {
      top: -4vw;
  right: 17vw;
    width: 48vw;
    }



}

/* ==========================================
   ARTISTIC DIRECTOR MESSAGE
========================================== */
.directorMessage {
    position:relative;
    padding:40px 4vw 100px;
    background:var(--yellow);
    overflow:hidden;
}

.directorMessage__panel {
    position:relative;
    width:min(92vw,1120px);
    margin:0 auto;
    padding:
        clamp(58px,7vw,92px)
        clamp(42px,7vw,90px)
        clamp(64px,8vw,100px);

    background:var(--black);
    color:#fff;

    clip-path:polygon(
        2% 5%,
        97% 0,
        100% 45%,
        97% 96%,
        54% 100%,
        4% 96%,
        0 48%
    );
}


/* MESSAGE */
.directorMessage__kicker {
    display:inline-block;
    margin-bottom:28px;

    color:var(--yellow);
    font-size:clamp(13px,1.2vw,17px);
    line-height:1;
    font-weight:950;
    letter-spacing:.1em;

    transform:rotate(-4deg);
}

.directorMessage__layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 170px;
    gap:clamp(40px,7vw,90px);
   align-items:start;
}

.directorMessage__label {
    margin-bottom:12px;

    color:var(--pink);
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
}

.directorMessage__title {
    margin:0;

    font-size:clamp(32px,4.4vw,58px);
    line-height:1.15;
    font-weight:950;
    letter-spacing:-.055em;
}

.directorMessage__text {
    max-width:720px;
    margin-top:32px;

    font-size:clamp(14px,1.25vw,17px);
    line-height:2.05;
    font-weight:600;
}

.directorMessage__text p + p {
    margin-top:1.4em;
}


/* PROFILE */
.directorMessage__profile {
    align-self:start;
    text-align:center;
}

.directorMessage__photo {
    width:140px;
    margin:0 auto 18px;
    transform:rotate(2deg);
}

.directorMessage__photo img {
    display:block;
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;

 
}
.directorMessage__photo figcaption {
    margin-top:7px;
    color:rgba(255,255,255,.58);
    font-size:8px;
    line-height:1.4;
    text-align:right;
}
.directorMessage__position {
    font-size:10px;
    line-height:1.6;
    font-weight:700;
}

.directorMessage__name {
    margin-top:6px;

    font-size:22px;
    line-height:1.2;
    font-weight:950;
}
@media (max-width:900px) {
.directorMessage {
    position:relative;
    padding:0 0 70px;
    background:var(--yellow);
    overflow:hidden;
}
    
       .directorMessage__panel{
        width:100vw;
        padding:
            48px
            24px
            58px;

        clip-path:polygon(
            1% 4%,
            99% 0,
            100% 46%,
            98% 97%,
            54% 100%,
            2% 97%,
            0 48%
        );
    }
    
    
    .directorMessage__layout {
        grid-template-columns:1fr;
        gap:36px;
    }

    .directorMessage__profile{
        display:grid;
        grid-template-columns:1fr 92px;
        grid-template-rows:auto auto;
        column-gap:16px;
        row-gap:3px;
        align-items:end;
        text-align:right;
        margin-top:4px;
    }

    .directorMessage__photo{
        grid-column:2;
        grid-row:1 / span 2;
        width:92px;
        margin:0;
        transform:rotate(2deg);
    }

    .directorMessage__position{
        grid-column:1;
        grid-row:1;
        align-self:end;
        margin:0;
        font-size:10px;
        line-height:1.5;
    }

    
    .directorMessage__text {
  font-size: clamp(15px, 1.4vw, 18px);
    line-height:1.9;
}
    
    
    .directorMessage__name{
        grid-column:1;
        grid-row:2;
        align-self:start;
        margin:2px 0 0;
        font-size:20px;
    }

/* FOOTER CREDIT */
.footer-credit {font-size:11.5px;}
}

/* ==========================================
   PROGRAM ARTISTS
========================================== */
.programArtists {
    width:min(1040px,92%);
    margin:70px auto 0;
    padding:34px 38px 32px;

    border-top:3px solid var(--black);
}

.programArtists__head {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-bottom:26px;
}

.programArtists__head > span {
    display:inline-block;
    padding:6px 10px;

    background:var(--black);
    color:var(--yellow);

    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.1em;

    transform:rotate(-2deg);
}

.programArtists__head h3 {
    margin:0;

    font-size:clamp(20px,2vw,28px);
    line-height:1.3;
    font-weight:900;
}

.programArtists__head small {
    font-size:11px;
    font-weight:700;
}


/* LIST */
.programArtists__list {
    columns:2;
    column-gap:54px;

    margin:0;
    padding:0;
    list-style:none;
}

.programArtists__list li {
    break-inside:avoid;
    margin:0 0 12px;

    font-size:14px;
    line-height:1.65;
}


/* 人名：全員ここで統一 */
.programArtists__name {
    font-size:14px;
    line-height:1.65;
    font-weight:800;white-space:nowrap;
}


/* 楽器・肩書き */
.programArtists__role {
    font-size:12px;
    font-weight:500;
}

.programArtists__role::before {
    content:"（";
}

.programArtists__role::after {
    content:"）";
}


/* GROUP */
.programArtists__group {
    margin-top:4px;
    margin-bottom:16px;
}

.programArtists__groupName {
    display:block;
    margin-bottom:2px;

    font-size:12px;
    line-height:1.5;
    font-weight:600;
}

.programArtists__members {
    font-size:14px;
    line-height:1.65;
}

.programArtists__members .programArtists__name {
    font-size:14px;
    font-weight:800;
}


/* ETC */
.programArtists__etc {
    margin-top:4px;

    font-size:12px;
    font-weight:700;
}


/* ==========================================
   SP
========================================== */
@media (max-width:900px) {

    .programArtists {
        width:100%;
        margin-top:52px;
        padding:28px 6px 24px;
    }

    .programArtists__head {
        gap:7px 10px;
        margin-bottom:22px;
    }

    .programArtists__list {
        columns:1;
    }

    .programArtists__list li {
        margin-bottom:11px;
        font-size:13px;
        line-height:1.6;
    }

    .programArtists__name {
        font-size:13px;
        line-height:1.6;
    }

    .programArtists__role {
        font-size:11px;
    }

    .programArtists__groupName {
        font-size:11px;
    }

    .programArtists__members {
        font-size:13px;
        line-height:1.6;
    }

    .programArtists__members .programArtists__name {
        font-size:13px;
    }
}