@charset "utf-8";

/* ==========================================
   SUB PAGE
========================================== */
.subPage { min-height:100vh; overflow-x:hidden; background:var(--yellow); }

/* ==========================================
   HEADER
========================================== */
.subHeader { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(1200px,calc(100% - 48px)); margin:0 auto; padding:18px 0; }
.subHeader__logo { display:block; width:54px; }
.subHeader__logo img { display:block; width:100%; height:auto; }
.subHeader__back { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; color:var(--yellow); background:var(--black); border-radius:999px; font-size:11px; font-weight:900; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.subHeader__back:hover { transform:translateX(-4px) rotate(-1deg); }

/* ==========================================
   HERO
========================================== */
.subHero { position:relative; overflow:hidden; padding:58px 5vw 110px; }
.subHero__inner { position:relative; z-index:3; width:min(1120px,100%); margin:0 auto; }
.subHero__num { display:inline-block; color:var(--pink); font-size:clamp(58px,9vw,130px); line-height:.8; font-weight:900; letter-spacing:-.06em; transform:rotate(-4deg); }
.subHero__label { margin-top:20px; font-size:11px; font-weight:900; letter-spacing:.16em; }
.subHero h1 { max-width:980px; margin-top:12px; font-size:clamp(34px,5.4vw,78px); line-height:1.16; font-weight:900; letter-spacing:-.065em; }
.subHero__lead { max-width:760px; margin-top:28px; font-size:clamp(14px,1.45vw,18px); line-height:1.9; font-weight:700; }
.subHero__decor { position:absolute; pointer-events:none; }
.subHero__decor--01 { width:min(22vw,300px); right:-5vw; top:5%; transform:rotate(12deg); }
.subHero__decor--02 { width:min(10vw,130px); left:3vw; bottom:0; transform:rotate(-24deg); }

/* ==========================================
   AMOEBA CONTENT - CSS ONLY / M SHAPE
   円ではなく、ゆるやかなM字の稜線で上下をつなぐ
========================================== */
.subMain {
    position:relative;
    width:100%;
    max-width:none;
    margin:0;
    padding:20px 0 100px;
    overflow:visible;
}

.subCard {
    --card-bg:#fff;
    --edge-h:clamp(74px,6.2vw,108px);
    --edge-gap:clamp(145px,10vw,190px);

    position:relative;
    z-index:2;

    width:100vw;
    max-width:none;
    margin:var(--edge-gap) 0;
    margin-left:calc(50% - 50vw);

    padding:54px 0 66px;

    color:var(--black);
    background:var(--card-bg);
    overflow:visible;
}

/*
   2つのゆるい山＋中央の浅い谷。
   円の連続ではなく、M字のような稜線を多点polygonで近似。
*/
.subCard::before,
.subCard::after {
    content:"";
    position:absolute;
    z-index:0;
    left:0;

    width:100%;
    height:var(--edge-h);

    background:var(--card-bg);
    pointer-events:none;
}

/* 上：
   左の山をやや低め、右の山を少し高めにして
   中央の谷をわずかに左へずらす */
.subCard::before {
    top:calc(-1 * var(--edge-h) + 1px);

    clip-path:polygon(
        0% 73%,
        6% 71%,
        12% 65%,
        18% 56%,
        24% 44%,
        29% 34%,
        33% 29%,
        37% 30%,
        41% 37%,
        45% 47%,
        49% 56%,
        53% 60%,
        57% 53%,
        61% 42%,
        65% 32%,
        69% 25%,
        73% 24%,
        78% 29%,
        83% 40%,
        88% 53%,
        94% 65%,
        100% 70%,
        100% 100%,
        0% 100%
    );
}

/* 下：
   subCard直下から色面を連続させ、
   その下端だけを上とは違うゆるいM字にする */
.subCard::after {
    bottom:calc(-1 * var(--edge-h) + 1px);

    clip-path:polygon(
        0% 0%,
        100% 0%,
        100% 31%,
        96% 33%,
        92% 39%,
        87% 49%,
        82% 60%,
        77% 69%,
        72% 73%,
        68% 71%,
        64% 64%,
        60% 54%,
        56% 45%,
        52% 42%,
        48% 49%,
        43% 61%,
        38% 71%,
        33% 76%,
        28% 74%,
        23% 67%,
        18% 56%,
        12% 43%,
        6% 33%,
        0% 28%
    );
}

/* BLACK */
.subCard--black {
    --card-bg:var(--black);
    color:#fff;
}


/* CONTENT */
.subCard__inner { position:relative; z-index:1; width:min(1120px, calc(100% - 80px)); margin:0 auto; }
.subCard__kicker { margin-bottom:14px; color:var(--pink); font-size:12px; font-weight:900; letter-spacing:.12em; }
.subCard--black .subCard__kicker { color:var(--yellow); }
.subCard h2 { font-size:clamp(26px,3.2vw,44px); line-height:1.3; font-weight:900; letter-spacing:-.03em; }
.subCard__body { margin-top:26px; font-size:14px; line-height:2; }
.subCard__body p + p { margin-top:1em; }

/* INFO GRID */
.subGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 34px; margin-top:28px; }
.subGrid__row { display:grid; grid-template-columns:8em 1fr; gap:12px; padding:14px 0; border-bottom:1px solid rgba(34,24,21,.16); font-size:13px; line-height:1.7; }
.subGrid__row dt { font-weight:900; }
.subGrid__row dd { margin:0; }

/* BIO */
.subBio { margin-top:34px; padding-top:28px; border-top:1px solid rgba(34,24,21,.18); }
.subBio h3 { font-size:18px; font-weight:900; }
.subBio p { margin-top:12px; font-size:13px; line-height:1.9; }
.subLink { text-decoration:underline; text-underline-offset:3px; }

/* ==========================================
   TICKET
========================================== */
.ticketBox { display:grid; grid-template-columns:1fr auto; align-items:center; gap:34px; }
.ticketBox__title { font-size:clamp(30px,4vw,56px); line-height:1; font-weight:900; letter-spacing:-.04em; }
.ticketBox__text { margin-top:14px; font-size:13px; line-height:1.8; }
.subBtn { display:inline-flex; align-items:center; justify-content:center; min-width:230px; min-height:58px; padding:14px 24px; color:var(--black); background:var(--yellow); border:3px solid var(--yellow); border-radius:999px; font-size:13px; font-weight:900; }
.subBtn.is-disabled { opacity:.6; cursor:default; }

/* ==========================================
   FOOTER
========================================== */

/* ==========================================
   SUB FOOTER
========================================== */

.subFooter {position:relative; padding:0 20px 42px; color:var(--black); background:var(--yellow); 
    width: 100%;
    margin-top: 0;
}

.subFooter__inner {
    width: min(1200px, calc(100% - 80px));
    margin: 0 auto;
      padding: 4px 0 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* LOGOS */
.subFooter__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
}

.subFooter__logoItem {
    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;
    flex: none;
}

.subFooter__logoImage {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* 東京芸術劇場 横ロゴ */
.subFooter__logoItem:nth-child(1) .subFooter__logoImage {
    height: 42px;
}


/* TMT */
.subFooter__logoItem:nth-child(2) .subFooter__logoImage {
    height: 52px;
}


/* ハミダシ・フェス */
.subFooter__logoItem:nth-child(3) .subFooter__logoImage {
    height: 52px;
}


/* COPYRIGHT */
.subFooter__copy {
    display: block;
    margin-top: 34px;

    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}


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

    .subFooter__inner {
        width: calc(100% - 36px);
        padding: 8px 0 24px;
    }

    .subFooter__logos {
        width: 100%;
        gap: 16px;
    }

    .subFooter__logoItem {
        flex: none;
    }

    /* 東京芸術劇場 横ロゴ */
    .subFooter__logoItem:nth-child(1) .subFooter__logoImage {
        height: 28px;
    }

    /* TMT */
    .subFooter__logoItem:nth-child(2) .subFooter__logoImage {
        height: 36px;
    }

    /* ハミダシ・フェス */
    .subFooter__logoItem:nth-child(3) .subFooter__logoImage {
        height: 36px;
    }

    .subFooter__copy {
        margin-top: 38px;
        font-size: 9px;
    }
}


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

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

    .subFooter__logos {
        gap: 11px;
    }

    .subFooter__logoItem:nth-child(1) .subFooter__logoImage {
        height: 24px;
    }

    .subFooter__logoItem:nth-child(2) .subFooter__logoImage {
        height: 31px;
    }

    .subFooter__logoItem:nth-child(3) .subFooter__logoImage {
        height: 31px;
    }

    .subFooter__copy {
        margin-top: 30px;
    }
}
/* ==========================================
   TABLET / SP
========================================== */
@media (max-width:900px) {
    .subHeader { width:calc(100% - 32px); padding:14px 0; }
    .subHeader__logo { width:46px; }
    .subHeader__back { padding:9px 13px; }

    .subHero { padding:42px 20px 92px; }
    .subHero__decor--01 { width:38vw; right:-15vw; }
    .subHero__decor--02 { width:22vw; left:-7vw; }

    .subMain {
        padding:10px 0 80px;
    }

    .subCard {
        --edge-h:72px;
        --edge-gap:122px;

        width:100vw;
        margin:var(--edge-gap) 0;
        margin-left:calc(50% - 50vw);

        padding:42px 20px 50px;
    }

    .subCard::before {
        clip-path:polygon(
            0% 72%,
            8% 68%,
            16% 58%,
            24% 43%,
            31% 32%,
            37% 30%,
            43% 39%,
            49% 56%,
            54% 60%,
            60% 48%,
            66% 34%,
            72% 27%,
            78% 31%,
            85% 44%,
            92% 60%,
            100% 69%,
            100% 100%,
            0% 100%
        );
    }

    .subCard::after {
        clip-path:polygon(
            0% 0%,
            100% 0%,
            100% 33%,
            94% 40%,
            88% 54%,
            81% 67%,
            74% 72%,
            68% 66%,
            62% 52%,
            56% 42%,
            51% 44%,
            45% 59%,
            38% 72%,
            31% 73%,
            24% 65%,
            16% 50%,
            8% 36%,
            0% 30%
        );
    }

    .subCard__inner {
        width:100%;
    }

    .subGrid { grid-template-columns:1fr; gap:0; }
    .subGrid__row { grid-template-columns:7em 1fr; }

    .ticketBox { grid-template-columns:1fr; }
    .subBtn { width:100%; min-width:0; }

}

/* ==========================================
   SMALL SP
========================================== */
@media (max-width:560px) {
    .subHero { padding-bottom:82px; }

    .subCard {
        --edge-h:62px;
        --edge-gap:104px;

        margin:var(--edge-gap) 0;
        margin-left:calc(50% - 50vw);
        padding:36px 18px 44px;
    }

    .subGrid__row { grid-template-columns:6.2em 1fr; gap:10px; }
}

/* =========================================================
   JINGLE PAGE REBUILD
   ========================================================= */

/* HERO */
.jingleHero {
    padding-top:72px;
    padding-bottom:120px;
}
.jingleHero .subHero__inner {
    position:relative;
}
.jingleHero__eyebrow {
    margin-bottom:18px;
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.16em;
}
.jingleHero__titleRow {
    position:relative;
    display:inline-block;
}
.jingleHero .subHero__num {
    position:relative;
    z-index:2;
    color:var(--blue);
    font-size:clamp(72px,10vw,150px);
    line-height:.78;
    letter-spacing:-.08em;
}
.jingleHero h1 {
    max-width:900px;
    margin-top:28px;
    font-size:clamp(44px,6.2vw,88px);
    line-height:1.08;
}
.jingleHero h1 span {
    color:var(--pink);
}
.jingleIntro {
    max-width:820px;
    margin-top:34px;
    font-size:clamp(15px,1.55vw,20px);
    line-height:1.95;
}
.jingleHero__dot {
    position:absolute;
    z-index:1;
    display:block;
    border-radius:50%;
}
.jingleHero__dot--pink {
    width:58px;
    height:58px;
    right:-72px;
    top:-8px;
    background:var(--pink);
}
.jingleHero__dot--blue {
    width:26px;
    height:26px;
    right:-110px;
    top:56px;
    background:var(--blue);
}
.jingleHero__deadline {
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-top:34px;min-width: 240px;
    padding:15px 18px 16px 20px;
    color:var(--yellow);
    background:var(--black);
    text-decoration:none;
    transform:rotate(-1deg);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.jingleHero__deadline strong {
    font-size:clamp(30px,2.8vw,38px);
    line-height:1;
    font-weight:900;
    letter-spacing:.1em;
}
.jingleHero__deadline::after {
    content:"";
    flex:none;
    width:23px;
    height:14px;
    background:url("../svg/arrowY.svg") center / contain no-repeat;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.jingleHero__deadline:hover {
    transform:translateY(-2px) rotate(-1deg);
}
.jingleHero__deadline:hover::after {
    transform:translateX(4px);
}



/* CONCEPT */
.jingleConcept {
    padding-top:80px;
    padding-bottom:90px;
}
.jingleStatement {
    position:relative;
}
.jingleStatement h2 {
    max-width:900px;
    font-size:clamp(48px,7vw,100px);
    line-height:.98;
    letter-spacing:-.065em;
}
.jingleStatement h2 span {
    color:var(--pink);
}
.jingleStatement__lead {
    max-width:760px;
    margin-top:34px;
    font-size:clamp(15px,1.5vw,19px);
    line-height:2;
    font-weight:700;
}
.jingleKeywords {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-top:58px;
}
.jingleKeyword {
    min-height:170px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:24px 22px;
    color:#fff;
    clip-path:polygon(4% 4%,97% 0,100% 89%,8% 100%,0 35%);
}
.jingleKeyword strong {
    font-size:clamp(25px,3.2vw,44px);
    line-height:.9;
    font-weight:900;
    letter-spacing:-.05em;
}
.jingleKeyword span {
    margin-top:7px;
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
}
.jingleKeyword--pink { background:var(--pink); transform:rotate(-2deg); }
.jingleKeyword--green { background:var(--green); transform:rotate(1.5deg) translateY(14px); }
.jingleKeyword--blue { background:var(--blue); transform:rotate(-1deg) translateY(-8px); }
.jingleKeyword--orange { background:var(--orange); transform:rotate(2deg) translateY(9px); }


/* ARTISTIC DIRECTOR */
.jingleDirector {
    padding-top:72px;
    padding-bottom:78px;
}
.jingleDirector__head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:70px;
}
.jingleDirector h2 {
    max-width:820px;
    font-size:clamp(34px,5vw,62px);
    line-height:1.12;
    letter-spacing:-.045em;
}
.jingleDirector__photo {
    flex:none;
    width:150px;
    margin:0 22px 0 0;
    transform:rotate(2deg);
}
.jingleDirector__photo img {
    width:100%;
    aspect-ratio:2 / 2.55;
    object-fit:cover;
    object-position:center 33%;
}
.jingleDirector__photo figcaption {
    margin-top:7px;
    color:rgba(255,255,255,.58);
    font-size:8px;
    line-height:1.4;
    text-align:right;
}
.jingleDirector__body {
    max-width:760px;
    margin-top:38px;
    font-size:16px;
    line-height:2;
    font-weight:500;
}
.jingleDirector__name {
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-top:28px;
}
.jingleDirector__name span {
    color:rgba(255,255,255,.88);
    font-size:13.5px;
    font-weight:700;
}
.jingleDirector__name strong {
    font-size:24px;
    font-weight:900;
}


/* MAKE */
.jingleMake {
    padding-top:76px;
    padding-bottom:82px;
}
.jingleMake__intro > p:last-child {
    margin-top:16px;
    font-size:15px;
    line-height:1.8;
    font-weight:700;
}
.jingleRoutes {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin-top:44px;
}
.jingleRoute {
    position:relative;
    min-height:440px;
    padding:42px 38px;
    overflow:hidden;
}
.jingleRoute--pink {
    background:#f9d0df;
    transform:rotate(-1deg);
    clip-path:polygon(2% 2%,100% 0,96% 97%,0 92%);
}
.jingleRoute--blue {
    background:#d4ebf8;
    transform:rotate(1deg) translateY(18px);
    clip-path:polygon(0 5%,96% 0,100% 92%,5% 100%);
}
.jingleRoute__label {
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}
.jingleRoute h3 {
    margin-top:13px;
    font-size:clamp(30px,3.5vw,50px);
    line-height:1.18;
    font-weight:900;
    letter-spacing:-.04em;
}
.jingleRoute > p:last-child {
    margin-top:28px;
    font-size:13px;
    line-height:1.8;
    font-weight:700;
}
.jingleNotes {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:36px;
}
.jingleNotes span {
    position:relative;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    color:#fff;
    background:var(--black);
    border-radius:50%;
    font-size:25px;
    line-height:1;
    font-weight:900;
}
.jingleNotes small {
    position:absolute;
    right:-2px;
    bottom:-5px;
    display:grid;
    place-items:center;
    min-width:24px;
    height:24px;
    padding:0 5px;
    color:var(--black);
    background:var(--yellow);
    border-radius:999px;
    font-size:8px;
}
.jingleFreeWord {
    display:flex;
    flex-direction:column;
    margin-top:42px;
}
.jingleFreeWord strong {
    color:var(--blue);
    font-size:clamp(44px,5.5vw,74px);
    line-height:.85;
    letter-spacing:-.08em;
}
.jingleFreeWord span {
    margin-top:9px;
    color:var(--pink);
    font-size:clamp(30px,4vw,54px);
    line-height:1;
    font-weight:900;
}
.jingleSpec {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:58px;
    border-top:3px solid var(--black);
    border-bottom:3px solid var(--black);
}
.jingleSpec > div {
    padding:24px 18px 26px;
}
.jingleSpec > div + div {
    border-left:1px solid rgba(34,24,21,.25);
}
.jingleSpec small {
    display:block;
    margin-bottom:6px;
    color:var(--pink);
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}
.jingleSpec strong {
    font-size:clamp(18px,2.2vw,24px);
    line-height:1.2;
    font-weight:900;
}


/* FLOW */
.jingleFlow {
    padding-top:72px;
    padding-bottom:78px;
}
.jingleFlow__line {
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:center;
    gap:18px;
    margin-top:46px;
}
.jingleFlow__item {
    min-height:170px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:26px 22px;
    background:var(--yellow);
    text-align:center;
}
.jingleFlow__item strong {
    color:var(--pink);
    font-size:clamp(26px,3vw,40px);
    line-height:1;
    font-weight:900;
    letter-spacing:-.04em;
}
.jingleFlow__item span {
    margin-top:14px;
    font-size:12px;
    line-height:1.6;
    font-weight:700;
}
.jingleFlow__line > i {
    font-style:normal;
    font-size:28px;
    font-weight:900;
}


/* APPLICATION GUIDELINES */
.jingleGuidelines {
    padding-top:74px;
    padding-bottom:82px;
    scroll-margin-top:96px;
}
.jingleGuidelines__head {
    margin-bottom:38px;
}
.jingleGuidelines__head h2 {
    font-size:clamp(38px,5vw,64px);
    line-height:1.08;
    letter-spacing:-.045em;
}
.jingleGuidelines__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 58px;
    border-top:3px solid var(--black);
}
.jingleGuideline {
    padding:30px 0 34px;
    border-bottom:1px solid rgba(34,24,21,.22);
}
.jingleGuideline:nth-child(2),.jingleGuideline:nth-child(4) ,.jingleGuideline:nth-child(6) {
    padding-left:28px;
    border-left:1px solid rgba(34,24,21,.18);
}
.jingleGuideline--wide {
    grid-column:1 / -1;
}
.jingleGuideline h3 {
    margin:0;
    font-size:clamp(23px,2.5vw,34px);
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.03em;
}
.jingleGuideline__ordered {
    margin:12px 0 0 1.45em;
    padding:0;
}
.jingleGuideline__ordered li {
    padding:3px 0;
    font-size:14px;
    line-height:1.8;
}
.jingleGuideline__ordered li::before {
    content:none;
}
.jingleGuideline__note {
    display:inline-block;
    margin-top:8px;
    font-size:13px;
    line-height:1.8;
    font-weight:500;
}
.jingleGuideline__subList {
    margin:8px 0 0;
    padding:0;
    list-style:none;
}
.jingleGuideline__subList li {
    position:relative;
    padding:3px 0 3px 1.2em;
    font-size:14px;
    line-height:1.8;
}
.jingleGuideline__subList li::before {
    content:"-";
    position:absolute;
    left:0;
    top:3px;
    color:inherit;
    font-size:12px;
}
.jingleGuideline__detail {
    display:inline-block;
    margin-top:6px;
    font-size:12px;
    line-height:1.8;
}


/* LIST */
.jingleList {
    margin:26px 0 0;
    padding:0;
    list-style:none;
}
.jingleList li {
    position:relative;
    padding:10px 0 10px 20px;
    font-size:15px;
    line-height:1.9;
}
.jingleList li::before {
    content:"●";
    position:absolute;
    left:0;
    top:13px;
    color:var(--pink);
    font-size:11px;
}
.jingleList li a{
text-decoration: underline;
}
.jingleList .jingleGuideline__ordered > li {
    padding:3px 0;
    font-size:15px;
    line-height:1.8;
}
.jingleList .jingleGuideline__ordered > li::before {
    content:none;
}
.jingleList .jingleGuideline__subList > li {
    position:relative;
    padding:3px 0 3px 1.2em;
    font-size:15px;
    line-height:1.8;
}
.jingleList .jingleGuideline__subList > li::before {
    content:"-";
    position:absolute;
    left:0;
    top:3px;
    color:inherit;
    font-size:15px;
}


/* ENTRY */
.jingleEntry {
    padding-top:72px;
    padding-bottom:32px; margin-bottom: 30px !important;
}
.jingleEntry__head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
}
.jingleEntry h2 {
    font-size:clamp(42px,5.5vw,76px);
    line-height:1.05;
    letter-spacing:-.05em;
}
.jingleEntry__period {
    flex:none;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
    color:var(--yellow);
}
.jingleEntry__period small {
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}
.jingleEntry__period strong {
    font-size:clamp(20px,2.5vw,32px);
    line-height:1;
}
.jingleEntry .subCard__body {
    max-width:900px;
    margin-top:42px;
}
.jingleEntry__button {
    margin-top:34px;
}
/* 共通 */
.jingleEntry .subBtn,
.jingleGuideline .subBtn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:0;
    transform:rotate(-1deg);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}

/* 応募要項内：小さめ */
.jingleGuideline .subBtn {
    min-width:220px;
    min-height:52px;
    padding:12px 20px;
    font-size:16px;
}

/* 一番下のENTRY：大きめ */
.jingleEntry .subBtn {
    min-width:280px;
    min-height:64px;
    padding:14px 24px;
    font-size:clamp(30px,2.8vw,38px);
}

/* 矢印 */
.jingleEntry .subBtn::after,
.jingleGuideline .subBtn::after {
    content:"";
    flex:none;
    width:23px;
    height:14px;
    background:url("../svg/arrowB.svg") center / contain no-repeat;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}

.jingleGuideline .subBtn::after {
    width:18px;
    height:11px;
}

.jingleEntry .subBtn:hover,
.jingleGuideline .subBtn:hover {
    transform:translateY(-2px) rotate(-1deg);
}

.jingleEntry .subBtn:hover::after,
.jingleGuideline .subBtn:hover::after {
    transform:translateX(4px);
}

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

    .jingleHero {
        padding:48px 20px 36px;
    }

    .jingleHero .subHero__num {
        font-size:clamp(64px,17vw,110px);
    }

    .jingleHero h1 {
        margin-top:24px;
        font-size:clamp(38px,10vw,58px);
    }

    .jingleIntro {
        font-size:15px;
    }

    .jingleHero__dot--pink {
        width:42px;
        height:42px;
        right:-50px;
    }

    .jingleHero__dot--blue {
        width:18px;
        height:18px;
        right:-76px;
        top:46px;
    }

    .jingleConcept,
    .jingleDirector,
    .jingleMake,
    .jingleFlow,
    .jingleGuidelines,
    .jingleEntry {
        padding-top:32px;
        padding-bottom:38px;
    }

    .jingleStatement h2 {
        font-size:clamp(43px,11vw,68px);
    }

    .jingleKeywords {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        margin-top:42px;
    }

    .jingleKeyword {
        min-height:140px;
    }

    .jingleDirector__head {
        gap:28px;
    }

    .jingleDirector__photo {
        width:112px;
        margin-right:0;
    }

    .jingleDirector__body {
        margin-top:30px;
        font-size:14px;
    }

    .jingleRoutes {
        grid-template-columns:1fr;
        gap:18px;
    }

    .jingleRoute {
        min-height:0;
        padding:34px 28px 38px;
    }

    .jingleRoute--blue {
        transform:rotate(1deg);
    }

    .jingleSpec {
        grid-template-columns:1fr;
        margin-top:42px;
    }

    .jingleSpec > div + div {
        border-left:0;
        border-top:1px solid rgba(34,24,21,.25);
    }

    .jingleFlow__line {
        grid-template-columns:1fr;
        gap:8px;
    }

    .jingleFlow__line > i {
        transform:rotate(90deg);
        text-align:center;
    }

    .jingleFlow__item {
        min-height:120px;
    }

    .jingleGuidelines__grid {
        grid-template-columns:1fr;
        gap:0;
    }

    .jingleGuideline,
    .jingleGuideline:nth-child(2),
    .jingleGuideline:nth-child(4),
    .jingleGuideline:nth-child(6){
        grid-column:auto;
        padding:26px 0 28px;
        border-left:0;
    }

    .jingleEntry__head {
        display:block;
    }

    .jingleEntry__period {
        align-items:flex-start;
        margin-top:26px;
    }
}


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

    .jingleHero {
        padding-top:38px;
        padding-bottom:32px;
    }

    .jingleHero__eyebrow {
        margin-bottom:14px;
        font-size:9px;
    }

    .jingleHero .subHero__num {
        font-size:20vw;
    }

    .jingleHero h1 {
        font-size:10vw;
        line-height:1.12;
    }

    .jingleIntro {
        margin-top:26px;
        font-size:13px;
        line-height:1.9;
    }

    .jingleHero__deadline {
        margin-top:26px;
        padding:13px 15px 14px;
    }

    .jingleStatement h2 {
        font-size:12vw;
        line-height:1.02;
    }

    .jingleStatement__lead {
        margin-top:26px;
        font-size:13px;
        line-height:1.9;
    }

    .jingleKeywords {
        gap:8px;
        margin-top:34px;
    }

    .jingleKeyword {
        min-height:118px;
        padding:18px 16px;
    }

    .jingleKeyword strong {
        font-size:7.4vw;
    }

    .jingleKeyword span {
        font-size:10px;
    }

    .jingleDirector__head {
        position:relative;
        display:block;gap:14px;
    }

    .jingleDirector__photo {
        position:absolute;
        right:0;
        top:185px;
        width:94px;
        margin:0;
    }

    .jingleDirector__body {
        width:calc(100% - 115px);
        margin-top:28px;
    }

    .jingleDirector__name {
        display:block;
        margin-top:0;
        line-height:1.9;
    }

    .jingleDirector__name span {
        display:block;
        margin:4px 0;
    }

    .jingleDirector__name strong {
        display:inline;
        margin-right:3px;
    }
    .jingleRoute {
        padding:30px 22px 34px;
    }

    .jingleRoute h3 {
        font-size:8.5vw;
    }

    .jingleNotes {
        gap:6px;
        margin-top:28px;
    }

    .jingleNotes span {
        width:42px;
        height:42px;
        font-size:21px;
    }

    .jingleNotes small {

    right:-2px;
    bottom:-10px;

}
    
    
    .jingleFreeWord {
        margin-top:30px;
    }

    .jingleFreeWord strong {
        font-size:12vw;
    }

    .jingleFreeWord span {
        font-size:9vw;
    }

    .jingleSpec > div {
        padding:19px 17px 21px;
    }

    .jingleFlow h2,
    .jingleGuidelines h2 {
        font-size:9vw;
    }

    .jingleFlow__item {
        padding:22px 18px;
    }


    .jingleGuideline h3 {
        font-size:7.4vw;
    }

    .jingleGuideline__ordered li,
    .jingleGuideline__detail {
        font-size:11px;
    }

    .jingleEntry h2 {
        font-size:11vw;
    }

    .jingleEntry .subCard__body {
        margin-top:32px;
        font-size:13px;
    }

        .jingleGuideline .subBtn,
    .jingleEntry .subBtn {
        width:100%;
        min-width:0;
    }

    .jingleGuideline .subBtn {
        font-size:15px;
        min-height:50px;
    }
    
}