/* ============================================================
   想像力三部作 IPページ共通スタイル（2026-10-18）
   共通の土台（site.css）の上に、作品ごとの世界観を重ねる。
   架空＝白地に赤い糸／色彩休暇＝モノクロ＋蛍光の黄緑／終末＝氷の青＋ステッカー
   ============================================================ */
body[data-ip="td"]{--ip:#E3262B;--ip-soft:rgba(227,38,43,.08);--ip-bg:var(--paper);--ip-dark:#140c0c}
body[data-ip="cr"]{--ip:#C6F200;--ip-soft:rgba(198,242,0,.14);--ip-bg:#EEEDEA;--ip-dark:#151515}
body[data-ip="fa"]{--ip:#2F56D6;--ip-soft:rgba(47,86,214,.08);--ip-bg:#EEF3F4;--ip-dark:#0d1530;--ice:#CFE6F0}
body[data-ip]{background:var(--ip-bg)}
body[data-ip] .header{background:color-mix(in srgb,var(--ip-bg) 92%,transparent)}

/* ---------- REEL 切り替え帯（IPが3つあることを常に見せる） ---------- */
.reel-switch{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);background:var(--ip-bg)}
.reel-switch a{position:relative;display:grid;gap:2px;padding:14px clamp(12px,2vw,28px);border-right:1px solid var(--line);color:var(--ink);transition:background .2s}
.reel-switch a:last-child{border-right:0}
.reel-switch a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.reel-switch a:hover{background:rgba(17,17,17,.04);color:var(--ink)}
.reel-switch a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.reel-switch .rs-n{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.reel-switch .rs-t{font:700 17px/1.3 var(--serif)}
.reel-switch .rs-e{font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--c)}
.reel-switch a[aria-current="page"] .rs-e{color:var(--c)}
.rs-td{--c:#E3262B}.rs-cr{--c:#9DC000}.rs-fa{--c:#2F56D6}
.reel-switch a[aria-current="page"].rs-cr{--c:#C6F200}
.reel-switch a[aria-current="page"].rs-fa{--c:#8FB0FF}
@media (max-width:600px){.reel-switch a{padding:10px 10px 10px 14px}.reel-switch .rs-e{display:none}.reel-switch .rs-t{font-size:14px}}

/* ---------- ヒーロー：ループ映像の上にタイトルカード ---------- */
.ip-hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:#000;color:var(--paper)}
.ip-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ip-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.75) 100%)}
.ip-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:.18;mix-blend-mode:overlay}
.ip-hud{position:absolute;z-index:2;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.85);font-variant-numeric:tabular-nums}
.ip-hud.tl{top:20px;left:22px}.ip-hud.tr{top:20px;right:22px}
.ip-hud .rec{margin-right:6px}
.ip-hero-in{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:clamp(40px,6vw,72px)}
.ip-hero .titlecard{color:var(--paper)}
.ip-title{margin:0;font:700 clamp(56px,10vw,136px)/1 var(--serif);letter-spacing:.02em}
.ip-title .ip-en{display:block;margin-top:14px;font:500 clamp(13px,1.4vw,17px)/1 var(--mono);letter-spacing:.3em;color:var(--ip)}
.ip-copy{margin:22px 0 18px;max-width:34em;font:500 clamp(17px,1.9vw,23px)/1.6 var(--serif)}
.ip-hero .meta{margin:0 0 26px}
.ip-hero .chip{border-color:rgba(244,241,234,.6);color:var(--paper)}
.ip-hero .chip.year{background:var(--paper);color:var(--ink)}
.ip-hero .btn{border-color:var(--paper);color:var(--paper)}
.ip-hero .btn.primary{background:var(--ip);border-color:var(--ip);color:var(--ip-on,#fff)}
body[data-ip="cr"] .ip-hero .btn.primary{color:#111}
.ip-hero .btn:hover{border-color:var(--paper);color:var(--paper);background:rgba(244,241,234,.12)}
.ip-hero .btn.primary:hover{filter:brightness(1.08);background:var(--ip);color:inherit}
/* 架空：見えない糸 */
.td-threads{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.55}
.td-threads path{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1}
.td-threads path.r{stroke:#E3262B;stroke-width:1.5}

/* ---------- ストーリーと設定 ---------- */
.ip-story{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,72px);align-items:start}
.ip-story .lead p{margin:0 0 1.1em}
.ip-story blockquote{margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font:500 clamp(18px,2vw,24px)/1.6 var(--serif)}
.ip-story blockquote small{display:block;margin-top:8px;font:400 11px/1.5 var(--mono);letter-spacing:.12em;color:var(--gray)}
.bible{margin:0;padding:18px 20px;border:1px solid var(--ink);background:color-mix(in srgb,var(--ip-bg) 60%,#fff)}
.bible-h{margin:0 0 12px;font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.bible dt{font:700 14px/1.4 var(--serif);margin-top:12px}
.bible dt:first-of-type{margin-top:0}
.bible dt::before{content:"■";margin-right:6px;color:var(--ip);font-size:10px;vertical-align:2px}
body[data-ip="cr"] .bible dt::before{color:#111;text-shadow:0 0 0 #111}
.bible dd{margin:4px 0 0;font-size:13.5px;color:#333;line-height:1.7}
.timeline-ip{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.timeline-ip li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.timeline-ip .y{font:500 12px/1.6 var(--mono);color:var(--gray)}
@media (max-width:820px){.ip-story{grid-template-columns:1fr}}

/* ---------- 映像 ---------- */
.vid-wrap{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:start}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;border:0;padding:0;cursor:pointer;color:var(--paper)}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.yt:hover img{transform:scale(1.03)}
.yt iframe,.yt video{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;display:grid;place-items:center;background:rgba(23,21,19,.55);border:1.5px solid var(--paper);font-size:22px;backdrop-filter:blur(3px);transition:transform .25s var(--ease),background .25s}
.yt:hover .yt-play{transform:scale(1.08);background:var(--ip);border-color:var(--ip)}
body[data-ip="cr"] .yt:hover .yt-play{color:#111}
.vid-now{display:flex;justify-content:space-between;gap:12px;margin:12px 0 0;font:500 12px/1.5 var(--mono);letter-spacing:.06em}
.vid-now span:last-child{color:var(--gray)}
.vid-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-height:min(70vh,560px);overflow:auto;padding-right:4px}
.vid-item{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center;width:100%;padding:6px;border:1px solid var(--line);background:color-mix(in srgb,var(--ip-bg) 70%,#fff);text-align:left;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,background .2s}
.vid-item:hover{border-color:var(--ink)}
.vid-item[aria-current="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.vid-item img{width:132px;aspect-ratio:16/9;object-fit:cover;background:#000}
.vid-item b{display:block;font:700 13.5px/1.45 var(--serif)}
.vid-item small{display:block;margin-top:4px;font:400 11px/1.4 var(--mono);color:var(--gray)}
.vid-item[aria-current="true"] small{color:var(--night-gray)}
.vid-note{margin:14px 0 0;font-size:13px;color:var(--gray)}
@media (max-width:900px){.vid-wrap{grid-template-columns:1fr}.vid-list{max-height:none}}

/* ---------- キャラクター ---------- */
.chara-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.chara{display:block;width:100%;padding:0;border:1px solid var(--line);background:color-mix(in srgb,var(--ip-bg) 60%,#fff);text-align:left;cursor:zoom-in;font:inherit;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .2s}
.chara:hover{transform:translateY(-4px);box-shadow:0 22px 34px -24px rgba(23,21,19,.55);border-color:var(--ink)}
.chara-img{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2)}
.chara-img img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease),filter .6s var(--ease)}
.chara:hover .chara-img img{transform:scale(1.04)}
.chara-tag{position:absolute;left:10px;top:10px;padding:4px 12px 3px 10px;font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.chara-body{display:grid;gap:3px;padding:12px 14px 15px}
.chara-name{font:700 19px/1.3 var(--serif)}
.chara-roma{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.chara-cv{margin-top:6px;font:400 12px/1.5 var(--mono)}
.chara-cv b{font-weight:500;color:var(--gray);margin-right:6px}
.chara-one{margin-top:4px;font-size:13px;line-height:1.6;color:#333}
/* 色彩休暇：普段はモノクロ、触れると色が戻る */
body[data-ip="cr"] .chara-img{background:#6b6b6b;aspect-ratio:1/1}
body[data-ip="cr"] .chara-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
body[data-ip="cr"] .chara-img img{object-fit:cover;filter:grayscale(1) contrast(1.05)}
body[data-ip="cr"] .chara:hover .chara-img img,body[data-ip="cr"] .chara:focus-visible .chara-img img{filter:none}
body[data-ip="cr"] .chara-tag{background:var(--ip);color:#111}
/* 終末：氷のカードに立ち絵 */
body[data-ip="fa"] .chara-img{background:radial-gradient(120% 90% at 50% 100%,#fff 0%,var(--ice) 55%,#9cc4e0 100%)}
body[data-ip="fa"] .chara-img img{padding:6% 8% 0;object-position:center bottom}
body[data-ip="fa"] .chara-tag{background:var(--ip)}
/* 架空 */
body[data-ip="td"] .chara-img{background:#7a7a7a}
.chara-grid.small{grid-template-columns:repeat(auto-fill,minmax(240px,320px))}

/* キャラクターの拡大表示 */
html.lb-open{overflow:hidden}
.chara-lb{width:min(1100px,94vw);max-height:92vh;padding:0;border:0;background:var(--paper);color:var(--ink);overflow:auto}
.chara-lb::backdrop{background:rgba(23,21,19,.88);backdrop-filter:blur(4px)}
.lb-grid{display:grid;grid-template-columns:1.25fr 1fr;min-height:min(80vh,680px)}
.lb-view{position:relative;display:flex;flex-direction:column;background:#6b6b6b}
body[data-ip="fa"] .lb-view{background:radial-gradient(120% 90% at 50% 100%,#fff 0%,var(--ice) 55%,#9cc4e0 100%)}
body[data-ip="td"] .lb-view{background:#7a7a7a}
.lb-stage{flex:1;display:grid;place-items:center;padding:20px;min-height:360px}
.lb-stage img{max-width:100%;max-height:min(70vh,620px);object-fit:contain}
.lb-stage img.pixel{image-rendering:pixelated;max-height:min(50vh,420px)}
.lb-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:12px;background:rgba(23,21,19,.82)}
.lb-tabs button{padding:8px 14px;border:1px solid rgba(244,241,234,.45);border-radius:999px;background:none;color:var(--paper);cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.lb-tabs button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.lb-info{position:relative;padding:28px clamp(20px,3vw,36px) 32px}
.lb-info .reel-k{display:block;margin-bottom:10px}
.lb-name{margin:0;font:700 clamp(26px,3vw,36px)/1.25 var(--serif)}
.lb-roma{margin:6px 0 16px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.lb-quote{margin:0 0 16px;padding-left:12px;border-left:3px solid var(--ip);font:500 16px/1.6 var(--serif)}
.lb-info dl{margin:0;display:grid;grid-template-columns:5.5em 1fr;gap:10px 14px;font-size:14px;line-height:1.7}
.lb-info dt{font:500 11px/1.9 var(--mono);letter-spacing:.12em;color:var(--gray)}
.lb-info dd{margin:0}
.lb-cast{margin-top:20px}
.lb-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:16px;z-index:3}
.lb-nav{display:flex;gap:8px;margin-top:26px}
.lb-nav button{padding:10px 16px;border:1px solid var(--ink);border-radius:999px;background:none;cursor:pointer;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.lb-nav button:hover{background:var(--ink);color:var(--paper)}
.chara-lb[open]{animation:kw-lb .4s var(--ease)}
@keyframes kw-lb{from{opacity:0;transform:translateY(10px)}}
@media (max-width:820px){.lb-grid{grid-template-columns:1fr}.lb-stage{min-height:300px}}

/* ---------- ゲーム（色彩休暇） ---------- */
.game-box{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--ink)}
.game-box img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.game-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.game-start{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;border:0;background:rgba(0,0,0,.35);color:var(--paper);cursor:pointer;font:inherit}
.game-start b{display:inline-block;padding:16px 30px;border-radius:999px;background:var(--ip);color:#111;font:700 14px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;transition:transform .2s var(--ease)}
.game-start:hover b{transform:scale(1.05)}
.game-start small{font:500 11px/1.6 var(--mono);letter-spacing:.1em}
.game-note{margin:12px 0 0;font-size:13px;color:var(--gray)}

/* ---------- 小説 ---------- */
.ip-novel{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.ip-novel img{width:100%;border:1px solid var(--line);box-shadow:0 20px 34px -24px rgba(23,21,19,.55)}
.ip-novel h3{margin:0 0 4px;font-size:clamp(24px,2.6vw,32px)}
.ip-novel .en-title{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--ip);margin-bottom:16px}
body[data-ip="cr"] .ip-novel .en-title{color:#6f8a00}
.ip-novel p{color:#333}
.ip-novel .btns{margin-top:18px}
@media (max-width:640px){.ip-novel{grid-template-columns:1fr}.ip-novel img{max-width:200px}}

/* ---------- クレジット ---------- */
.ip-credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:4px 40px;margin:0}
.ip-credits div{display:grid;grid-template-columns:9em 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.ip-credits dt{font:400 11.5px/1.8 var(--mono);color:var(--gray)}
.ip-credits dd{margin:0;font-family:var(--serif)}

/* ---------- 前後のIP ---------- */
.ip-next{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.ip-next a{position:relative;display:grid;gap:6px;padding:clamp(28px,4vw,48px) var(--gutter);background:var(--ip-dark);color:var(--paper);overflow:hidden}
.ip-next a + a{border-left:1px solid rgba(244,241,234,.15);text-align:right}
.ip-next a:hover{color:var(--paper)}
.ip-next .bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;opacity:.3;transition:opacity .4s,transform .8s var(--ease)}
.ip-next a:hover .bg{opacity:.5;transform:scale(1.04)}
.ip-next span:not(.bg){position:relative;z-index:1}
.ip-next .k{font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--night-gray)}
.ip-next .t{font:700 clamp(24px,3vw,36px)/1.2 var(--serif)}
.ip-next .e{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--c)}
@media (max-width:640px){.ip-next{grid-template-columns:1fr}.ip-next a + a{border-left:0;border-top:1px solid rgba(244,241,234,.15);text-align:left}}

/* ---------- 終末：STOOPのステッカー ---------- */
.has-stickers{position:relative}
.sticker.st{width:clamp(84px,9vw,136px);z-index:5}
.sticker.st img{width:100%;height:auto;display:block}
@media (max-width:760px){.sticker.st{width:66px}}

/* ---------- 色彩休暇：モノクロの土台に蛍光 ---------- */
body[data-ip="cr"] .section > .wrap > .eyebrow::before{color:#111;background:var(--ip);padding:2px 5px;margin-right:4px}
body[data-ip="cr"] .ip-hero .ip-title .ip-en{color:var(--ip);text-shadow:0 0 18px rgba(198,242,0,.45)}
body[data-ip="cr"] .chip.year{background:#111}

@media (prefers-reduced-motion:reduce){.chara,.chara-img img,.yt img{transition:none}.chara-lb[open]{animation:none}}

/* ---------- 調整（2026-10-18） ---------- */
.ip-title{font-size:clamp(40px,10.5vw,136px)}
body[data-ip="fa"] .ip-hero .ip-title .ip-en{color:#9DB8FF}
body[data-ip="td"] .ip-hero .ip-title .ip-en{color:#ff5a5f}
@media (max-width:560px){
  .chara-grid,body[data-ip="cr"] .chara-grid{grid-template-columns:1fr 1fr;gap:12px}
  .chara-name{font-size:16px}
  .chara-one{display:none}
  .ip-hero{min-height:auto}
}

.vid-wrap.solo{grid-template-columns:1fr;max-width:960px}

/* ---------- 終末：Web連載（TALES） ---------- */
.ip-novel.serial{grid-template-columns:minmax(260px,1.1fr) 1fr}
.serial-thumb{position:relative;display:block;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 34px -24px rgba(23,21,19,.55)}
.serial-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;border:0;box-shadow:none;transition:transform .8s var(--ease)}
.serial-thumb:hover img{transform:scale(1.04)}
.serial-badge{position:absolute;left:10px;bottom:10px;padding:5px 14px 4px 10px;background:var(--ip);color:#fff;font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.serial-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.serial-chl{margin:0 0 6px;font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.serial-ch ol{margin:0;padding-left:1.6em;font-family:var(--serif);font-size:14.5px;line-height:1.9}
.serial-ch a{border-bottom:1px solid transparent}
.serial-ch a:hover{color:var(--ip);border-color:var(--ip)}
@media (max-width:760px){.ip-novel.serial{grid-template-columns:1fr}}

/* ---------- 終末：小説のエピソード表示（アニメ公式サイト風・2026-10-19） ---------- */
.serial-meta{margin:-10px 0 24px;font:500 12px/1.8 var(--mono);letter-spacing:.04em;color:var(--gray)}
.ep-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;color:var(--paper);box-shadow:0 44px 70px -44px rgba(13,21,48,.75);outline:none}
.ep-stage::before,.ep-stage::after{content:"";position:absolute;left:0;right:0;height:5%;background:#000;z-index:3;pointer-events:none}
.ep-stage::before{top:0}.ep-stage::after{bottom:0}
.ep-slides{position:absolute;inset:0}
.ep-slides::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--noise);opacity:.12;mix-blend-mode:overlay}
.ep-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 0s 1.1s}
.ep-slide.is-on{opacity:1;visibility:visible;transition:opacity 1.1s var(--ease),visibility 0s}
.ep-media{position:absolute;inset:0;overflow:hidden}
.ep-media img{width:100%;height:100%;object-fit:cover}
.ep-slide.is-on .ep-media img{animation:kw-kb 10s ease-out forwards}
@keyframes kw-kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.ep-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,18,.35) 0%,transparent 22%,transparent 48%,rgba(5,8,18,.88) 100%)}
.ep-media.noimg{display:grid;place-items:center;background:radial-gradient(90% 90% at 50% 40%,#1d3270 0%,#0d1530 70%)}
.ep-media.noimg::after{background:linear-gradient(180deg,transparent 50%,rgba(5,8,18,.7))}
.ep-card-title{position:relative;z-index:1;display:block;text-align:center;font:700 clamp(44px,8vw,110px)/1 var(--serif);color:var(--paper);letter-spacing:.04em}
.ep-card-title small{display:block;margin-bottom:16px;font:500 12px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:#9DB8FF}
.ep-cap{position:absolute;left:0;right:0;bottom:5%;z-index:4;display:flex;align-items:flex-end;gap:clamp(12px,2vw,24px);padding:0 clamp(16px,3vw,36px) clamp(16px,2.6vw,30px)}
.ep-no{font:300 clamp(46px,7vw,100px)/.78 "Inter",sans-serif;letter-spacing:-.05em;color:var(--paper);font-variant-numeric:tabular-nums}
.ep-txt{display:grid;gap:5px;flex:1;min-width:0}
.ep-ch{font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#9DB8FF}
.ep-title{font:700 clamp(24px,3.6vw,46px)/1.1 var(--serif);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.ep-date{font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:rgba(244,241,234,.75)}
.ep-read{flex-shrink:0;padding:12px 18px;border-radius:999px;background:var(--ip);color:#fff;font:500 12px/1 var(--mono);letter-spacing:.1em;white-space:nowrap;transition:background .2s,color .2s}
.ep-read:hover{background:var(--paper);color:var(--ip-dark)}
.ep-hud{position:absolute;top:calc(5% + 14px);z-index:4;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.85);font-variant-numeric:tabular-nums}
.ep-hud.tl{left:18px}.ep-hud.tr{right:18px}
.ep-hud .rec{margin-right:6px}
.ep-arrow{position:absolute;top:50%;z-index:5;width:50px;height:50px;margin-top:-25px;border-radius:50%;border:1px solid rgba(244,241,234,.5);background:rgba(13,21,48,.45);color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:0;transition:opacity .3s,background .2s;backdrop-filter:blur(3px)}
.ep-arrow.prev{left:16px}.ep-arrow.next{right:16px}
.ep-stage:hover .ep-arrow,.ep-stage:focus-within .ep-arrow{opacity:1}
.ep-arrow:hover{background:var(--ip)}
.ep-bar{position:absolute;left:0;right:0;bottom:calc(5% - 3px);height:3px;z-index:5;background:rgba(244,241,234,.15)}
.ep-bar i{display:block;width:0;height:100%;background:var(--ip)}
.ep-bar.run i{animation:kw-epbar var(--dur,6500ms) linear forwards}
.ep-stage.paused .ep-bar i{animation-play-state:paused}
@keyframes kw-epbar{to{width:100%}}
.ep-strip{list-style:none;display:flex;gap:12px;margin:16px 0 0;padding:4px 4px 12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.ep-strip li{flex:0 0 auto;scroll-snap-align:start}
.ep-sep{display:flex;align-items:center;padding:0 4px 0 8px;border-left:1px solid var(--line);writing-mode:vertical-rl;font:500 10.5px/1 var(--mono);letter-spacing:.22em;color:var(--gray)}
.ep-strip .ep-sep:first-child{border-left:0;padding-left:0}
.ep-card{display:block;width:188px;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ep-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ip-dark);outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s}
.ep-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.8);transition:filter .3s,transform .5s var(--ease)}
.ep-card:hover .ep-thumb img,.ep-card[aria-selected="true"] .ep-thumb img{filter:none}
.ep-card:hover .ep-thumb img{transform:scale(1.05)}
.ep-card[aria-selected="true"] .ep-thumb{outline-color:var(--ip)}
.ep-card.noimg .ep-thumb{display:grid;place-items:center;background:radial-gradient(90% 90% at 50% 40%,#1d3270 0%,#0d1530 75%)}
.ep-card .ep-card-title{font-size:24px}
.ep-meta{display:block;margin-top:8px;font:700 14px/1.4 var(--serif)}
.ep-meta b{margin-right:5px;font:500 11px/1 var(--mono);color:var(--ip)}
.ep-meta small{display:block;margin-top:2px;font:400 10.5px/1.4 var(--mono);color:var(--gray)}
.serial-btns{margin-top:20px}
@media (max-width:640px){
  .ep-cap{gap:10px;padding:0 12px 12px}
  .ep-no{font-size:34px}
  .ep-title{font-size:20px}
  .ep-ch,.ep-date{display:none}
  .ep-read{padding:9px 12px;font-size:11px}
  .ep-hud.tr{display:none}
  .ep-arrow{opacity:1;width:36px;height:36px;margin-top:-18px;font-size:18px}
  .ep-card{width:148px}
}
@media (prefers-reduced-motion:reduce){.ep-slide.is-on .ep-media img{animation:none}.ep-slide{transition:none}}

/* ---------- クレジットのSNSリンク・扉絵の担当（2026-10-19） ---------- */
.ep-art{margin-left:14px;padding-left:14px;border-left:1px solid rgba(244,241,234,.35)}
.ep-art .sns-btn{color:var(--paper);opacity:.75}