@charset "utf-8";
/*
  DOKURORE / OTHER PAGES
  HISTORY / PRODUCTION / DOWNLOAD / MEDIA / CAST DETAIL
*/

/* =========================================================
   HISTORY PAGE
========================================================= */
.historyPage { background:#080808; color:#fff; }

.historyHero {
    position:relative; padding:170px 0 110px; overflow:hidden;
    background:radial-gradient(circle at 50% 0%, rgba(168,152,88,.18), transparent 34%), linear-gradient(180deg,#050505,#0b0b0b);
}
.historyHero::before {
    content:"LAST STAND"; position:absolute; left:50%; top:38px; transform:translateX(-50%);
    font-family:var(--serif); font-size:clamp(90px,16vw,240px); line-height:1; white-space:nowrap;
    color:rgba(255,255,255,.035); pointer-events:none; opacity:0; transition:opacity 1s ease;
}
body.hero-deco .historyHero::before { opacity:1; }

.historyHero__inner { position:relative; z-index:1; width:min(980px,90vw); margin:auto; text-align:center; }
.historyHero__label { margin:0 0 26px; color:var(--accent); font-family:var(--serif); font-size:.9rem; letter-spacing:.34em; }
.historyHero h1 {
    margin:0; font-family:var(--serif); font-size:clamp(78px,10vw,150px);
    font-weight:600; line-height:.9; letter-spacing:.04em;
}
.historyHero__lead {
    max-width:720px; margin:46px auto 0; color:rgba(255,255,255,.82);
    font-family:var(--jpSerif); font-size:clamp(1.35rem,2.2vw,1.9rem);
}

.historyTimeline { position:relative; width:min(1040px,90vw); margin:0 auto; padding:120px 0 80px; }
.historyTimeline::before {
    content:""; position:absolute; left:210px; top:120px; bottom:80px; width:1px;
    background:linear-gradient(180deg,transparent,rgba(168,152,88,.5),rgba(168,152,88,.2),transparent);
}
.historyItem {
    position:relative; display:grid; grid-template-columns:180px 1fr;
    gap:70px; padding:0 0 96px;
}
.historyItem::before {
    content:""; position:absolute; left:204px; top:.45em; width:13px; height:13px;
    border-radius:50%; background:var(--accent); box-shadow:0 0 24px rgba(168,152,88,.55);
}
.historyItem__year {
    margin:0; color:var(--accent); font-family:var(--serif);
    font-size:clamp(44px,5vw,72px); font-weight:700; line-height:1; letter-spacing:0;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.historyItem__body { padding-top:4px; }
.historyItem__body h2 {
    margin:-6px 0 22px; font-family:var(--jpSerif);
    font-size:clamp(34px,2.3vw,42px); font-weight:700; line-height:1.25; letter-spacing:.04em;
}
.historyItem__body h2 span { display:block; margin-top:0; font-size:.72em; font-weight:500; }
.historyItem__body p { margin:1em 0 1.8em; color:rgba(255,255,255,.82); font-size:1.04rem; text-align:justify; }
.historyItem__body p:last-child { margin-bottom:0; }
.historyItem--last .historyItem__body {
    padding:44px 46px; border-top:1px solid rgba(168,152,88,.5);
    border-bottom:1px solid rgba(168,152,88,.22); background:rgba(255,255,255,.025);
}
.historyItem--last .historyItem__body h2 { color:var(--accent); }

.historyStatement {
    padding:90px 0 130px;
    background:radial-gradient(circle at 50% 50%,rgba(168,152,88,.13),transparent 36%),#050505;
}
.historyStatement__inner { width:min(840px,90vw); margin:auto; text-align:center; }
.historyStatement h2 {
    margin:0 0 36px; color:var(--accent); font-family:var(--serif);
    font-size:clamp(54px,7vw,110px); font-weight:600; line-height:.95; letter-spacing:.05em;
}
.historyStatement p {
    max-width:680px; margin:0 auto 52px; color:rgba(255,255,255,.86);
    font-family:var(--jpSerif); font-size:1.22rem;
}
.historyStatement a {
    display:inline-flex; flex-direction:column; align-items:center; gap:12px;
    color:#fff; font-family:var(--serif); font-size:1rem; letter-spacing:.2em;
}
.historyStatement a::after { content:""; width:54px; height:1px; background:var(--accent); transition:width .35s var(--ease); }
.historyStatement a:hover { color:var(--accent); }
.historyStatement a:hover::after { width:130px; }

@media(max-width:860px) {
    .historyHero { padding:110px 0 76px; }
    .historyHero::before { top:44px; font-size:28vw; }
    .historyHero__label { margin-bottom:20px; font-size:.72rem; letter-spacing:.28em; }
    .historyHero h1 { font-size:clamp(58px,18vw,92px); }
    .historyHero__lead { margin-top:34px; font-size:1.1rem; line-height:1.9; text-align:left; }
    .historyTimeline { width:calc(100% - 36px); padding:76px 0 42px; }
    .historyTimeline::before { left:22px; top:80px; bottom:50px; }
    .historyItem { grid-template-columns:1fr; gap:18px; padding:0 0 72px 56px; }
    .historyItem::before { left:16px; top:.6em; width:13px; height:13px; }
    .historyItem__year { font-family:var(--jpSerif); font-size:48px; }
    .historyItem__body h2 { margin-bottom:16px; font-size:clamp(20px,6vw,24px); line-height:1.35; }
    .historyItem__body p { font-size:1rem; text-align:left; }
    .historyItem--last .historyItem__body { padding:30px 0 30px 24px; margin-left:-20px; }
    .historyStatement { padding:76px 0 100px; }
    .historyStatement h2 { font-size:56px; }
    .historyStatement p { font-size:1.05rem; }
}


/* =========================================================
   PRODUCTION PAGE
========================================================= */
.productionPage { background:#080808; color:#fff; }

.productionHero {
    position:relative; padding:160px 0 100px; overflow:hidden;
    background:radial-gradient(circle at 50% 0%,rgba(168,152,88,.16),transparent 36%),linear-gradient(180deg,#050505,#0b0b0b);
}
.productionHero::before {
    content:"LAST STAND"; position:absolute; left:50%; top:44px; transform:translateX(-50%);
    color:rgba(255,255,255,.035); font-family:var(--serif); font-size:clamp(90px,16vw,250px);
    line-height:1; white-space:nowrap; pointer-events:none;
}
.productionHero__inner { position:relative; z-index:1; width:min(980px,90vw); margin:auto; text-align:center; }
.productionHero__label { margin:0 0 26px; color:var(--accent); font-family:var(--serif); font-size:.9rem; letter-spacing:.34em; }
.productionHero h1 {
    margin:0; font-family:var(--serif); font-size:clamp(68px,10vw,150px);
    font-weight:600; line-height:.9; letter-spacing:.04em;
}
.productionHero__lead {
    margin:42px auto 0; color:rgba(255,255,255,.86);
    font-family:var(--jpSerif); font-size:clamp(1.35rem,2.2vw,1.9rem);
}

.productionBody { padding:110px 0 130px; }
.productionBody__inner { width:min(860px,90vw); margin:auto; }
.productionLead {
    margin:0 0 86px; padding:46px 50px;
    border-top:1px solid rgba(168,152,88,.45); border-bottom:1px solid rgba(168,152,88,.22);
    background:rgba(255,255,255,.025);
}
.productionLead p {
    margin:0 0 1.6em; color:rgba(255,255,255,.94); font-family:var(--jpSerif);
    font-size:clamp(1.45rem,2.2vw,2rem); font-weight:700; line-height:1.85; letter-spacing:.04em;
}
.productionLead p:last-child,
.productionText p:last-child { margin-bottom:0; }

.productionText { max-width:760px; margin:auto; }
.productionText p { margin:0 0 2.3em; color:rgba(255,255,255,.84); font-size:1.04rem; }
.productionText strong { color:#fff; font-weight:700; white-space:nowrap; }

.productionLinks { max-width:760px; margin:90px auto 0; display:flex; justify-content:center; gap:48px; }
.productionLinks a {
    display:inline-flex; flex-direction:column; align-items:center; gap:12px;
    font-family:var(--serif); font-size:1rem; letter-spacing:.2em;
}
.productionLinks a::after { content:""; width:46px; height:1px; background:var(--accent); transition:width .35s var(--ease); }
.productionLinks a:hover::after { width:120px; }

@media(max-width:860px) {
    .productionHero { padding:110px 0 74px; }
    .productionHero::before { top:50px; font-size:28vw; }
    .productionHero__label { margin-bottom:20px; font-size:.72rem; letter-spacing:.26em; }
    .productionHero h1 { font-size:clamp(50px,16vw,84px); }
    .productionHero__lead { margin-top:32px; font-size:1.15rem; line-height:1.9; }
    .productionBody { padding:74px 0 96px; }
    .productionBody__inner { width:calc(100% - 36px); }
    .productionLead { margin-bottom:56px; padding:32px 24px; }
    .productionLead p { font-size:1.25rem; line-height:1.8; }
    .productionText p { font-size:1rem; text-align:left; }
    .productionLinks { margin-top:64px; flex-direction:column; gap:28px; }
}


/* =========================================================
   DOWNLOAD PAGE
========================================================= */
.downloadPage {
    position:relative; min-height:100vh; padding:130px 0 110px; overflow:hidden;
    background:radial-gradient(circle at 50% 0,rgba(168,152,88,.10),transparent 42%),var(--bg);
}
.downloadPage::before {
    content:"LAST STAND"; position:absolute; top:6vh; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.025); font-family:var(--serif); font-size:clamp(110px,18vw,300px);
    line-height:.85; letter-spacing:.03em; white-space:nowrap; pointer-events:none;
}
.downloadWrap { position:relative; z-index:1; width:min(1100px,calc(100% - 48px)); margin:0 auto; }
.downloadHeading { margin-bottom:64px; text-align:center; }
.downloadHeading__title {
    margin:0; color:#fff; font-family:var(--serif); font-size:clamp(56px,8vw,112px);
    font-weight:500; line-height:.95; letter-spacing:.06em;
}
.downloadHeading__title::after {
    content:""; display:block; width:120px; height:1px; margin:28px auto 0;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.downloadHeading__sub { margin:20px 0 0; color:var(--accent); font-family:var(--jpSerif); font-size:.9rem; letter-spacing:.28em; }

.downloadGrid {
    display: grid; 
    /* 1:2:1の比率（中央の2番目が一番大きくなります） */
    grid-template-columns: 1fr 2fr 1fr;
    gap: 64px 42px; 
    width: min(760px, 100%); 
    margin: 0 auto 50px;
    align-items: center; /* カードの縦位置を中央で綺麗に揃える場合 */
}

/* 1番目と3番目のカードの画像サイズを 85% に引き上げ */
.downloadGrid .downloadCard:first-of-type .downloadCard__image,
.downloadGrid .downloadCard:nth-of-type(3) .downloadCard__image { 
    width: 100%; /* 71% からアップさせて、小さすぎない印象に */
    margin-inline: auto; 
    display: block;
}

/* 2番目の大きなカードの画像は100%フルで表示 */
.downloadGrid .downloadCard:nth-of-type(2) .downloadCard__image {
    width: 100%;
    display: block;
}

/* 子要素が1つだけの時は、3列分をぶち抜いて中央配置 */
.downloadGrid > :only-child { 
    grid-column: 1 / -1; 
    width: min(100%, 520px); 
    justify-self: center; 
}

.downloadCard__image {
    position:relative; display:block; padding:0; border:1px solid rgba(168,152,88,.42);
    background:rgba(255,255,255,.025);
    transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.downloadCard__image::after {
    content:"OPEN"; position:absolute; right:10px; bottom:-10px; padding:8px 14px;
    color:#090909; background:var(--accent); font-family:var(--serif);
    font-size:.72rem; line-height:1; letter-spacing:.18em;
}
.downloadCard__image img { width:100%; height:auto; }
.downloadCard__body { padding-top:22px; text-align:center; }
.downloadCard__text {
    margin:0; color:#fff; font-family:var(--jpSerif);
    font-size:1.05rem; font-weight:600; letter-spacing:.16em;
}

@media(hover:hover) {
    .downloadCard__image:hover {
        transform:translateY(-5px); border-color:var(--accent);
        box-shadow:0 24px 70px rgba(0,0,0,.48);
    }
}
@media(max-width:860px) {
    .downloadPage { padding:104px 0 80px; }
    .downloadPage::before { top:12vh; font-size:28vw; }
    .downloadWrap { width:calc(100% - 36px); }
    .downloadHeading { margin-bottom:44px; }
    .downloadHeading__title { font-size:clamp(38px,10vw,66px); }
    .downloadHeading__title::after { width:90px; margin-top:22px; }
    .downloadGrid { grid-template-columns:1fr; gap:48px; width:min(520px,100%); }
    .downloadGrid > :only-child { grid-column:auto; width:100%; }
}


/* =========================================================
   MEDIA PAGE
========================================================= */
.mediaPage {
    position:relative; min-height:100vh; padding:132px 0 120px; overflow:hidden;
    background:radial-gradient(circle at 50% -10%,rgba(168,152,88,.16),transparent 34%),linear-gradient(180deg,#050505 0%,#0b0a09 48%,#050505 100%);
}
.mediaPage::before {
    content:"LAST STAND"; position:absolute; top:7vh; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.023); font-family:var(--serif); font-size:clamp(110px,18vw,300px);
    line-height:.85; letter-spacing:.03em; white-space:nowrap; pointer-events:none;
}
.mediaPage__texture {
    position:absolute; inset:0; background:url("../img/concrete_wall_2.png") repeat;
    background-size:520px auto; mix-blend-mode:soft-light; opacity:.12; pointer-events:none;
}
.mediaWrap { position:relative; z-index:1; width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.mediaHeading { margin-bottom:58px; text-align:center; }
.mediaHeading__eyebrow { margin:0 0 16px; color:rgba(168,152,88,.72); font-family:var(--serif); font-size:.72rem; letter-spacing:.34em; }
.mediaHeading__title {
    margin:0; color:#fff; font-family:var(--serif); font-size:clamp(58px,9vw,122px);
    font-weight:500; line-height:.9; letter-spacing:.06em;
}
.mediaHeading__title::after {
    content:""; display:block; width:140px; height:1px; margin:30px auto 0;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.mediaHeading__sub { margin:20px 0 0; color:var(--accent); font-family:var(--jpSerif); font-size:.92rem; letter-spacing:.3em; }

.mediaIntro {
    width:min(920px,100%); margin:0 auto 30px; padding:18px 22px;
    border-left:2px solid var(--accent); background:rgba(255,255,255,.035);
}
.mediaIntro p { margin:0; color:rgba(255,255,255,.64); font-size:.78rem; line-height:1.8; }

.mediaTable {
    width:min(920px,100%); margin:0 auto;
    border-top:1px solid rgba(168,152,88,.62); border-bottom:1px solid rgba(168,152,88,.62);
    background:rgba(7,7,7,.58); box-shadow:0 28px 80px rgba(0,0,0,.38);
}
.mediaRow {
    display:grid; grid-template-columns:140px 120px minmax(0,1fr);
    gap:24px; align-items:start; padding:19px 24px; border-bottom:1px solid rgba(255,255,255,.10);
}
.mediaRow:last-child { border-bottom:0; }
.mediaHead {
    padding:14px 0; color:var(--accent); background:rgba(168,152,88,.07);
    font-family:var(--serif); font-size:.72rem; line-height:1; letter-spacing:.2em;
}
.mediaDate { color:#fff; font-family:var(--serif); font-size:.98rem; letter-spacing:.08em; }
.mediaType { color:var(--accent); font-family:var(--jpSerif); font-size:.88rem; font-weight:600; letter-spacing:.12em; }
.mediaBody { color:rgba(255,255,255,.82); font-size:.9rem; line-height:1.85; }
.mediaBody a {
    color:#fff; text-decoration:underline; text-decoration-color:rgba(168,152,88,.72);
    text-underline-offset:.22em; transition:color .25s ease;
}
.mediaBody a:hover { color:var(--accent); }
.mediaBody small { color:rgba(255,255,255,.56); }
.mediaNew {
    display:inline-block; margin-left:8px; padding:3px 7px 2px; border:1px solid var(--accent);
    border-radius:999px; color:var(--accent); font-family:var(--serif);
    font-size:.56rem; line-height:1; letter-spacing:.12em; vertical-align:middle;
}

@media(max-width:860px) {
    .mediaPage { padding:104px 0 84px; }
    .mediaPage::before { top:12vh; font-size:28vw; }
    .mediaWrap { width:calc(100% - 30px); }
    .mediaHeading { margin-bottom:42px; }
    .mediaHeading__title { font-size:clamp(42px,14vw,72px); }
    .mediaHeading__title::after { width:96px; margin-top:24px; }
    .mediaIntro { padding:15px 16px; }
    .mediaHead { display:none; }
    .mediaRow { grid-template-columns:86px minmax(0,1fr); gap:5px 14px; padding:18px 16px; }
    .mediaDate { grid-row:1 / span 2; font-size:.9rem; }
    .mediaType { font-size:.72rem; }
    .mediaBody { font-size:.84rem; line-height:1.8; }
}
@media(max-width:480px) {
    .mediaRow { grid-template-columns:1fr; gap:5px; }
    .mediaDate { grid-row:auto; }
}

/* =========================================================
   CAST DETAIL
========================================================= */
.castDetail{background:#080808;color:var(--text);}

.castHero{position:relative;padding:120px 0 100px;overflow:hidden;}
.castHero::before{
    content:"COMMENT";position:absolute;left:-4vw;top:70px;
    font-family:var(--serif);font-size:clamp(120px,17vw,280px);line-height:1;
    color:rgba(255,255,255,.03);pointer-events:none;
}


.castHero__content{display:flex;flex-direction:column;justify-content:center;}
.castHero__en{
    order:1;margin:0 0 18px;color:rgba(255,255,255,.45);
    font-family:var(--serif);font-size:1rem;letter-spacing:.32em;line-height:1;
}
.castHero__name{
    order:2;margin:18px 0;font-family:var(--jpSerif);
    font-size:4.2rem;line-height:1.05;
}


.castHero__role{
    order:3;margin:0;color:var(--accent);font-family:var(--serif);
    font-size:1.45rem;font-weight:700;letter-spacing:.10em;line-height:1.45;
}
.castHero__role small{font-size:1rem;}

/* STAFF 調整 */

    .castDetail--staff .castDetailLayout{
        grid-template-columns:430px minmax(0,720px);
        gap:70px;
    }

    .castDetail--staff .castHero__name{
        white-space:nowrap;font-size:clamp(2.4rem,3.2vw,4rem);
    }



/* COMMENT */
.castComment{padding:60px 0;background:linear-gradient(180deg,#0d0d0d,#111);}
.castComment__body{width:min(760px,90vw);margin:auto;}
.castComment__body p{margin:0 0 2.4em;color:rgba(255,255,255,.9);font-size:1.08rem;}
.castComment__body p:last-child{margin-bottom:0;}


/* PAGER */
.castPager{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:clamp(44px,6vw,90px);
    padding:80px 0 140px;
}

.castPager a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;

    font-family:var(--serif);
    font-size:1rem;
    letter-spacing:.18em;

    transition:.35s;
}

.castPager a::after{
    content:"";
    width:46px;
    height:1px;
    background:var(--accent);
    transition:width .35s;
}

.castPager a:hover{
    color:var(--accent);
}

.castPager a:hover::after{
    width:110px;
}

/* =========================================================
   CAST DETAIL / INTERVIEW
========================================================= */
.castDetail--taichi{
    color:var(--ink);
    background:
        linear-gradient(rgba(239,238,233,.34),rgba(239,238,233,.34)),
        url("../img/news-texture.webp") center top / cover no-repeat fixed;
    background-color:#efeee9;
}

.castDetailLayout{
    display:grid;
    grid-template-columns:minmax(260px,340px) minmax(0,820px);
    justify-content:center;
    gap:clamp(54px,6vw,100px);
    width:min(1320px,90vw);
    margin:auto;
    padding:clamp(90px,7vw,130px) 0 100px;
}


/* LEFT */
.castDetailSide{
    position:sticky;
    top:80px;
    align-self:start;
}

.castDetail--taichi .castHero__photo{
    width:100%;
    margin:0 0 30px;
    aspect-ratio:1/2;
    overflow:hidden;
    background:#ddd;
}

.castDetail--taichi .castHero__photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
}

.castDetail--taichi .castHero__en{
    margin:0 0 10px;
    color:rgba(17,16,15,.68);
    font:.82rem var(--serif);
    letter-spacing:.28em;
}

.castDetail--taichi .castHero__name{
    margin:0 0 10px;
    color:var(--ink);
    font:700 clamp(2.6rem,3.5vw,4rem)/1.1 var(--jpSerif);
}

.castDetail--taichi .castHero__role{
    margin:0;
    color:var(--blood);
    font:700 1.15rem var(--jpSerif);
}


/* RIGHT */
.castComment--interview{
    padding:0;
    background:none;
}

.castComment--interview .section__head{
    width:100%;
    margin:0 0 26px;
}

.castComment--interview .section__head h2{
    color:var(--ink);
}


/* INTERVIEW */
.castInterview{
    width:100%;
    margin:0;
    border-top:0;
}

.castInterview__item{
    padding:10px 0 15px;
    border-bottom:0;
}

.castInterview__question{grid-template-columns:1fr;
    gap:10px;
    margin:0 0 18px;
    color:#6e1f18;
    font:600 .95rem/1.8 var(--jpSerif);
    position:relative;

}

.castInterview__answer{
padding-left:0;
}

.castInterview__answer p{
    margin:0 0 1.2em;
    color:rgba(17,16,15,1);
    font-size:.95rem;
    line-height:1.8;
    letter-spacing:.03em;
    text-align:justify;
}

.castInterview__answer p:last-child{margin-bottom:0;}

.castInterview__item--common{
    position:relative;
    margin-top:44px;
    padding:36px 34px 32px;
    border:1px solid rgba(110,31,24,.24);
    background:rgba(255,255,255,.28);
}

.castInterview__label{
    position:absolute;
    left:24px;
    top:0;
    margin:0;
    padding:0 10px;
    color:var(--blood);
    background:#efeee9;
    font:600 .72rem/1 var(--serif);
    letter-spacing:.24em;
    transform:translateY(-50%);
}


/* PROFILE */
.castProfile{
    margin-top:30px;
    padding-top:22px;
}

.castProfile__label{
    margin:0 0 12px;
    color:var(--blood);
    font:600 .7rem var(--serif);
    letter-spacing:.28em;
}

.castProfile__text{
    margin:0;
    color:rgba(17,16,15,.9);
    font-size:.82rem;
    line-height:1.8;
    letter-spacing:.025em;
}


/* =========================================================
   PC CAST LINEUP NAV
========================================================= */
.castLineupNav{
    position:relative;
    width:100%;
    height:clamp(190px,18vw,300px);
    overflow:hidden;
    background:#050505;
}

.castLineupNav__image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 18%;
}

.castLineupNav__links{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(13,1fr);
}

.castLineupNav__links a{
    position:relative;
    border:0;
}

.castLineupNav__links a:hover{
    background:none;
    border:0;
}

.castLineupNav__links a::after{
    content:"";
    position:absolute;
    left:20%;
    right:20%;
    bottom:0;
    height:3px;
    background:var(--accent);
    opacity:0;
    transform:scaleX(.4);
    transition:.3s;
}

.castLineupNav__links a:hover::after,
.castLineupNav__links a[aria-current="page"]::after{
    opacity:1;
    transform:scaleX(1);
}

.castLineupNav__links a span{
    position:absolute;
    left:50%;
    bottom:16px;
    padding:5px 9px;
    color:#fff;
    background:rgba(0,0,0,.72);
    font-family:var(--jpSerif);
    font-size:.72rem;
    white-space:nowrap;
    opacity:0;
    transform:translate(-50%,6px);
    transition:.3s;
}

.castLineupNav__links a:hover span,
.castLineupNav__links a[aria-current="page"] span{
    opacity:1;
    transform:translate(-50%,0);
}


/* =========================================================
   CAST DETAIL NAV
========================================================= */
.castBackNav{
    position:fixed;
    z-index:900;
    left:28px;
    top:28px;

    display:flex;
    flex-direction:column;
    gap:6px;
}

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

    width:150px;
    min-height:42px;
    padding:8px 12px;

    color:var(--ink);
    background:rgba(245,244,240,.94);
    backdrop-filter:blur(8px);

    border-bottom:1px solid var(--accent);

    font:600 .72rem/1 var(--serif);
    letter-spacing:.14em;
    text-align:center;
    white-space:nowrap;

    transition:
        color .3s,
        background .3s,
        border-color .3s;
}

.castBackNav a:last-child{
    color:var(--blood);
    border-bottom-color:var(--blood);
}

.castBackNav a:hover{
    color:var(--blood);
    background:#fff;
    border-bottom-color:var(--blood);
}


/* =========================================================
   CAST DETAIL / TABLET
========================================================= */
@media(max-width:1200px){
    .castHero{padding:70px 0 60px;}


    /* 旧CAST HEROのみ */
    .castDetail:not(.castDetail--taichi) .castHero__photo{
        width:min(260px,72vw);
    }

    .castHero__content{align-items:center;}
    .castHero__en{margin:0 0 14px;font-size:.85rem;letter-spacing:.26em;}
    .castHero__name{margin:0 0 16px;font-size:2.6rem;line-height:1.15;}
    
    
    .castDetail--staff .castHero__name{margin:0 0 16px;font-size:2.4rem;line-height:1.15;}
        
        
    .castHero__role{font-size:1.2rem;line-height:1.5;}

    .castComment:not(.castComment--interview){padding:80px 0;}
    .castComment__body{width:calc(100% - 36px);}
    .castComment__body p{font-size:1rem;}

    .castComment .section__head h2{
        font-size:clamp(32px,10vw,56px);
        line-height:.9;
        word-break:keep-all;
    }

    .castHero::before{display:none;}
}


/* =========================================================
   CAST DETAIL / SP
========================================================= */
@media(max-width:860px){
    .castDetail--taichi {
        background:url("../img/extra_clean_paper.webp") repeat;
        background-color:#efeee9;
    }
    .castDetailLayout{
        display:block;
        width:calc(100% - 36px);
        padding:70px 0 80px;
    }

    .castDetailSide{
        position:static;
        width:100%;
        margin-bottom:64px;
    }

    .castDetail--taichi .castHero__photo{
        width:min(260px,72vw);
        margin:0 auto 26px;
    }

    .castDetail--taichi .castHero__content{
        text-align:center;
    }

    .castDetail--taichi .castHero__name{
        font-size:2.6rem;
    }

    .castComment--interview .section__head{
        margin: 0 auto;text-align: center;
    }

    .castInterview__item{
        padding:15px 0 20px;
    }

.castInterview__question{grid-template-columns:1fr;
    gap:8px;
    font-size:.91rem;line-height: 1.6;
    margin:0 0 10px;
}
.castInterview__answer{
    padding-left:0;
}

    .castInterview__answer p{
        font-size:.94rem;
        line-height:1.75;
        text-align:left;
    }

    .castInterview__item--common{
        padding:26px 10px 30px 20px;
    }

    .castProfile__text{
        font-size:.78rem;
    }

    

    .castBackNav{
        left:10px;
        top:10px;
        gap:4px;
    }

    .castBackNav a{
        width:126px;
        min-height:38px;
        padding:7px 8px;

        font-size:.60rem;
        letter-spacing:.10em;
    }

    
    
    .castPager{
        gap:28px;
        padding:60px 18px 90px;
    }

    .castPager a{
        font-size:.78rem;
        letter-spacing:.10em;
        white-space:nowrap;
    }
}