@charset "utf-8";
/* =========================================================
   CAST / STAFF OVERRIDE
========================================================= */

.section--castStaff{
    position:relative;
    padding:0;
    overflow:hidden;
    color:#fff;
    background:#050505;
}

.section--castStaff::before{
    display:none;
}


/* =========================================================
   CAST OPENING
   STORYの次はタイトルを挟まずスリットから開始
========================================================= */
.castOpening{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;
    background:#050505;
    line-height:0;
}

/* PC CAST TITLE / SLIT */
.castOpening__title{
    position:absolute;
    z-index:5;
    left:6vw;
top:clamp(10px,1.5vw,26px);
    pointer-events:none;
}

.castOpening__title .section__head{
    width:auto;
    margin:0;
    justify-items:start;
}

.castOpening__title .section__head h2{
    color:#fff;
    font-size:clamp(52px,5vw,84px);
    text-shadow:0 3px 12px rgba(0,0,0,.65);
}

.castOpening__title .section__head::after{
    display:none;
}



.castSlitViewport{
    position:relative;
    z-index:2;
    left:auto;
    width:100%;
    transform:none;
    overflow:hidden;
    background:#050505;
}

.castSlitViewport::before{
    display:none;
}



.castSlitNav--pc{
    display:grid;
    grid-template-columns:repeat(13,minmax(0,1fr));
    gap:0;
    width:min(1920px,100vw);
    max-width:none;
    margin:0 auto;
    overflow:hidden;
    background:#050505;
    border:0;
    box-shadow:none;
}

.castSlitNav__item{
    position:relative;
    display:block;
    min-width:0;
    overflow:hidden;
    background:#050505;
    isolation:isolate;
}

.castSlitNav__item::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 58%,rgba(0,0,0,.44));
    opacity:.5;
    transition:opacity .45s ease;
    pointer-events:none;
}

.castSlitNav__item::before{
    content:"";
    position:absolute;
    z-index:3;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .4s var(--ease);
}

.castSlitNav__item > img{
    display:block;
    width:100%;
    height:auto;
    transform:scale(1.002);
    filter:saturate(.92) brightness(.94);
    transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .55s ease;
}


.castSlitNav__name{
    position:absolute;
    z-index:2;
    left:50%;
    bottom:18px;
    width:38px;
    opacity:0;
    transform:translateX(-50%);
    transition:opacity .35s ease;
    pointer-events:none;
}

.castSlitNav__name img{
    display:block;
    width:100%;
    height:auto;
}
.castSlitNav__item:hover .castSlitNav__name,
.castSlitNav__item:focus-visible .castSlitNav__name{
    opacity:1;
    transform:translate(-50%,0);
    filter:
        drop-shadow(1px 0 0 #000)
        drop-shadow(-1px 0 0 #000)
        drop-shadow(0 1px 0 #000)
        drop-shadow(0 -1px 0 #000);
}

.castSlitNav__item:hover,
.castSlitNav__item:focus-visible{
    z-index:3;
}

.castSlitNav__item:hover::after,
.castSlitNav__item:focus-visible::after{
    opacity:.16;
}

.castSlitNav__item:hover::before,
.castSlitNav__item:focus-visible::before{
    transform:scaleX(1);
}

/* 人物写真だけ拡大・明るくする */
.castSlitNav__item:hover > img,
.castSlitNav__item:focus-visible > img{
    filter:saturate(1) brightness(1.05);
    transform:scale(1.035);
}

/* 名前SVGには人物写真用のfilter / transformを掛けない */
.castSlitNav__name img{
    display:block;
    width:100%;
    height:auto;
}

.castSlitNav__item:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:-2px;
}

/* =========================================================
   CAST BRIDGE
   スリット下の白煙 → CASTタイトル / CREDIT → 横並びへ
========================================================= */
.castBridge{
    position:relative;
    z-index:1;
padding:clamp(60px,5vw,94px) 0 clamp(50px,4.2vw,76px);
    color:var(--ink);
background:
    url("../img/cast-lineup-bg.webp") center top / auto 100%  no-repeat,
    #efefec;
}


.castBridge__inner{
    position:relative;
    z-index:2;
    width:min(1180px,88vw);
    margin:0 auto;
}
.castBridge .section__head{
    width:min(1400px,92vw);
    margin:0 auto 50px;
    text-align:left;
    justify-items:start;
}
.castBridge .section__head::after { display: none;}
.castBridge .section__head h2{
    font-size:clamp(52px,5vw,84px);
}
/* クレジット */
.castCredit{
    position:relative;
    z-index:3;
    display:block;
    width:min(900px,82vw);
    margin:0 auto 0;
}

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

/* =========================================================
   CAST LINEUP / PC
   元画像はトリミングせず保持し、表示範囲だけCSSで調整
========================================================= */
/* 横並び写真：白背景からそのまま接続 */
.castLineup{
    position:relative;
    width:100%;
    margin:0;
    line-height:0;
    background:#efefec;
}

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






/* =========================================================
   STAFF
   横並び写真の黒下部からそのまま接続
========================================================= */
.staffStage{
    position:relative;
    z-index:1;
    margin-top:-1px;
    padding:0;
    color:#fff;

    background:
        linear-gradient(
            180deg,
            #050505 0%,
            rgba(5,5,5,.95) 18%,
            rgba(5,5,5,.45) 48%,
            rgba(5,5,5,0) 72%
        ),
        url("../img/ticket-black-texture.webp") center / 100% auto no-repeat
        #0a0909;
}

.staffArea{
    position:relative;
    overflow:hidden;
    margin:0;
    padding:clamp(62px,5vw,82px) max(6vw,24px)
            clamp(72px,5.5vw,92px);
}

.staffArea::before{
    content:"CREATIVE";
    position:absolute;
    right:-.05em;
    top:.08em;
    color:rgba(255,255,255,.045);
    font-family:var(--serif);
    font-size:clamp(120px,17vw,290px);
    font-weight:600;
    line-height:.8;
    pointer-events:none;
}

.staffArea .section__head{
    position:relative;
    z-index:2;
    margin:0 0 20px;
}
.staffArea .section__head h2{
    font-size:clamp(52px,5vw,84px);
    line-height:.9;
}
.staffArea .section__head::after{
    content:"";
    display:block;
    width:72px;
    height:2px;
    margin-top:15px;
background:linear-gradient(
    90deg,
    var(--accent-bright) 0%,
    var(--accent) 42%,
    rgba(110,31,24,.65) 72%,
    transparent 100%
);
}

.staffList{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    width:min(620px,52vw);
    margin:0;
}


/* STAFF 傘モチーフ */
.staffRain__umb{
    position:absolute;
    top:-12%;
    aspect-ratio:1;
    opacity:0;
    background:url("../svg/staff-umbrella.svg") center/contain no-repeat;
    filter:drop-shadow(0 0 1px rgba(255,255,255,.35));
    animation:staffUmbrellaFall linear infinite;
    transform-origin:50% 42%;
}

/* 傘ごとにサイズ・位置・速度をずらす */
.staffRain__umb:nth-child(1){
    right:5%;
    width:68px;
    animation-duration:10.5s;
    animation-delay:0s;
}

.staffRain__umb:nth-child(2){
    right:14%;
    width:100px;
    animation-duration:11.8s;
    animation-delay:1.2s;
}

.staffRain__umb:nth-child(3){
    right:24%;
    width:56px;
    animation-duration:12.4s;
    animation-delay:2.1s;
}

.staffRain__umb:nth-child(4){
    right:32%;
    width:76px;
    animation-duration:10.9s;
    animation-delay:3s;
}

.staffRain__umb:nth-child(5){
    right:9%;
    width:60px;
    animation-duration:11.6s;
    animation-delay:4.2s;
}

@keyframes staffUmbrellaFall{
    0%{
        top:-12%;
        opacity:0;
        transform:translateX(0) rotate(-18deg);
    }

    10%{
        opacity:.34;
    }

    35%{
        opacity:.4;
        transform:translateX(10px) rotate(12deg);
    }

    65%{
        opacity:.38;
        transform:translateX(-12px) rotate(32deg);
    }

    90%{
        opacity:.22;
    }

    100%{
        top:70%;
        opacity:0;
        transform:translateX(8px) rotate(54deg);
    }
}

.staffCard{
    position:relative;
    padding:20px 0 10px;
    /*border-top:1px solid rgba(181,166,106,.28);*/
}

/*.staffCard::before{
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:54px;
    height:2px;
    background:var(--blood);
}*/

.staffRole{
    margin:0;
    color:var(--accent-bright);
    font-family:var(--jpSerif);
    font-size:.88rem;
    letter-spacing:.18em;
}

.staffCard h4{
    margin:0 0 22px;
    color:#fff;
    font-family:var(--jpSerif);
    font-size:clamp(1.5rem,2vw,2.5rem);
    line-height:1.3;
}

.staffBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:150px;max-width: 300px;
    min-height:42px;
    margin:0;
    padding:0 26px;
    color:var(--accent-bright);
    border:1px solid rgba(181,166,106,.40);
    font-family:var(--serif);
    font-size:.9rem;
    letter-spacing:.1em;
    transition:.3s var(--ease);
}

.staffBtn:hover{
    padding-left:34px;
    color:#fff;
    background:rgba(168,152,88,.12);
}

.staffCredit{
    width:min(860px,86vw);
    margin:50px 0 0;
}

.staffCredit img{
    display:block;
    width:100%;
    height:auto;
}
/* SPのみ CAST TITLE PCは非表示 */
@media(min-width:861px){
    .castBridge .section__head{
        display:none;
    }
}
/* =========================================================
   CAST PC FLIP
========================================================= */
@media(min-width:861px){
    .castSlitPoster--sp,
    .castCardsSp{
        display:none;
    }

    .castSlitNav--pc{
        opacity:1;
        filter:none;
        transform:none;
        transition:none;
        perspective:1200px;
    }

    .castSlitNav--pc .castSlitNav__item{
        --flip-delay:.18s;
        transform:rotateY(62deg);
        transform-origin:center center;
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        filter:brightness(.22);
    }

    .castSlitNav--pc.is-inview .castSlitNav__item{
        animation:castSlitIndividualFlip .42s cubic-bezier(.2,.72,.22,1) var(--flip-delay) both;
    }

    .castSlitNav--pc .castSlitNav__item:nth-child(7){--flip-delay:.18s;}
    .castSlitNav--pc .castSlitNav__item:nth-child(6),
    .castSlitNav--pc .castSlitNav__item:nth-child(8){--flip-delay:.24s;}
    .castSlitNav--pc .castSlitNav__item:nth-child(5),
    .castSlitNav--pc .castSlitNav__item:nth-child(9){--flip-delay:.30s;}
    .castSlitNav--pc .castSlitNav__item:nth-child(4),
    .castSlitNav--pc .castSlitNav__item:nth-child(10){--flip-delay:.36s;}
    .castSlitNav--pc .castSlitNav__item:nth-child(3),
    .castSlitNav--pc .castSlitNav__item:nth-child(11){--flip-delay:.42s;}
    .castSlitNav--pc .castSlitNav__item:nth-child(2),
    .castSlitNav--pc .castSlitNav__item:nth-child(12){--flip-delay:.48s;}
    .castSlitNav--pc .castSlitNav__item:nth-child(1),
    .castSlitNav--pc .castSlitNav__item:nth-child(13){--flip-delay:.54s;}
}

@keyframes castSlitIndividualFlip{
    0%{transform:rotateY(62deg);filter:brightness(.22);}
    72%{transform:rotateY(-5deg);filter:brightness(1.05);}
    100%{transform:rotateY(0);filter:none;}
}


/* =========================================================
   CAST / STAFF SP
========================================================= */
@media(max-width:860px){


    .castSlitViewport{
        display:none;
    }

    .castSlitPoster--sp{
        display:block;
        width:100%;
        max-width:none;
        margin:0;
        opacity:0;
        filter:blur(6px);
        transform:translateY(28px);
        background:#050505;
        transition:opacity .75s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
    }

    .castSlitPoster--sp.is-inview{
        opacity:1;
        filter:none;
        transform:none;
    }

    .castSlitPoster--sp img{
        display:block;
        width:100%;
        height:auto;
    }

/* PCのみ CAST TITLE SPは非表示 */
    .castOpening__title{
        display:none;
    }
/* SP CAST TITLE / SLIT */
    .castBridge .section__head{
        display:grid;
    }
    
    .castBridge .section__head h2{
font-size: 40px;
}
    
    
    .castBridge{
        padding:44px 0 54px;
        background:
            url("../img/cast-lineup-bg.webp") center bottom / auto auto repeat,
            #efefec;
    }
        
    .castBridge__inner{
        width:100%;
    }



    .castCardsSp{
        display:block;
        margin-top:36px;
    }

    .castCardsSp .castGrid--sp{
        display:grid;
        width:100%;
        grid-template-columns:1fr !important;
        justify-items:center;
        gap:42px 0;
    }

    .castCardsSp .castCard{
        display:flex;
        flex-direction:column;
        width:84%;
        height:auto;
        grid-column:auto !important;
    }

    .castCardsSp .castCard figure{
        position:relative;
        width:100%;
        margin:0 0 14px;
        aspect-ratio:2 / 1;
        overflow:hidden;
        background:#111;
    }

    .castCardsSp .castCard figure a{
        display:block;
        width:100%;
        height:100%;
    }

    .castCardsSp .castCard figure::after{
        content:"";
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.04);
        pointer-events:none;
    }

    .castCardsSp .castCard img{
        display:block;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
        filter:none;
        transform:none;
    }

    .castRole,
    .castCardsSp .castCard h3{
        display:none;
    }

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

    .castBtn{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:40px;
        color:#6f5b27;
        border:1px solid rgba(111,91,39,.34);
        background:rgba(255,255,255,.24);
        font-family:var(--serif);
        font-size:.78rem;
        letter-spacing:.08em;
    }

    .castCredit{
        width:82%;
        max-width:620px;
        margin-top:54px;
    }

    .staffStage{
        padding:0 0 30px;
        /*background:
            linear-gradient(180deg,rgba(5,5,5,.08),rgba(5,5,5,.82) 56%,#050505),*/

    }

    

    
    
    .staffArea{
        width:calc(100% - 20px);overflow:visible;
    }

    .staffArea::before{
        top:.20em;
        right:-.3em;letter-spacing: -.03em;
        font-size:19vw;color:rgba(255,255,255,.085);
    }
    

    
    .staffArea .section__head h2{
    font-size:40px;
}
    

    .staffHead{
        margin-bottom:30px;
    }

    .staffHead h3{
        font-size:clamp(44px,13vw,62px);
    }

.staffList{
    width:100%;
    grid-template-columns:1fr;
    gap:12px;
}

    .staffCard{
        padding:18px 0;
    }

    .staffCard h4{margin:0 0 10px;
        font-size:22px;
    }

   .staffCredit{
        width:calc(100% + 30px);
        margin:40px -30px 0 0;
    }
    
    /*SPは3個だけ軽く*/
    .staffRain__umb{
        filter:none;
    }

    .staffRain__umb:nth-child(n+4){
        display:none;
    }

    .staffRain__umb:nth-child(1){
        right:3%;
        width:38px;
    }

    .staffRain__umb:nth-child(2){
        right:24%;
        width:50px;
    }

    .staffRain__umb:nth-child(3){
        right:48%;
        width:34px;
    }
 
}