@charset "UTF-8";
:root{color-scheme:dark;--ink:#e8e6dd;--muted:#b1bab8;--accent:#a6cdd0;--font-size:18px;--line-height:2.2;--shade:.5;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;background:#10191c;color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:hidden}body{margin:0;overflow-x:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #b9e4e8;outline-offset:6px}[hidden]{display:none!important}
.landscape,.scene,.shade,.vignette{position:fixed;inset:0;pointer-events:none}.landscape{z-index:-1;overflow:hidden;background:#10191c}.scene{opacity:0;transition:opacity 1.6s ease}.scene.active{opacity:1}.scene-image{position:absolute;top:0;left:50%;transform:translateX(-50%);width:max(100vw,150vh);height:100%;background-image:url('assets/scenes.webp');background-size:200% 200%;background-repeat:no-repeat}.panel-0{background-position:0 0}.panel-1{background-position:100% 0}.panel-2{background-position:0 100%}.panel-3{background-position:100% 100%}.shade{background:rgba(7,15,19,var(--shade))}.vignette{background:linear-gradient(180deg,rgba(6,13,16,.65),transparent 32%,rgba(6,13,16,.35)),linear-gradient(90deg,rgba(7,14,18,.45),transparent 50%,rgba(7,14,18,.15))}body.no-background .scene{opacity:0}body.no-motion .scene{transition:none}
.masthead{position:absolute;top:0;left:0;right:0;height:100px;padding:28px 5vw;display:flex;justify-content:space-between;align-items:center;z-index:5;border-bottom:1px solid #d9e8e219}.brand{display:flex;gap:17px;align-items:center;font-size:15px;letter-spacing:.15em}.brand small{display:block;font:8px/2.8 Arial,sans-serif;letter-spacing:.32em;color:#b3c1c1}.mark{display:grid;place-items:center;border:1px solid #b9d0ca60;width:37px;height:43px;font-size:21px;color:#a9d1d7}.header-actions{display:flex;align-items:center;gap:26px;font:12px Arial,sans-serif}.edition{color:var(--muted);letter-spacing:.15em}.header-actions button{border:1px solid #e3ece838;padding:12px 17px;background:#10202788;border-radius:3px;font-size:17px}.header-actions button span{font-size:11px;margin-left:8px}
.hero{min-height:100svh;position:relative;padding:170px 14vw 110px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.hero-rule{width:40px;height:1px;background:var(--accent);margin-bottom:23px}.eyebrow{font-size:10px;letter-spacing:.3em;color:#c1ccca}.episode-number{font:10px Arial,sans-serif;letter-spacing:.35em;color:#acbebb;margin:35px 0 18px}.episode-number span{margin-left:10px;color:#e0ebea}.hero h1{font-weight:400;font-size:clamp(52px,6vw,88px);line-height:1.42;letter-spacing:.17em;margin:0 0 26px;text-shadow:0 4px 30px #07151b}.intro{font-size:15px;line-height:2;letter-spacing:.13em;color:#cdd4cf}.mobile-break{display:none}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:28px}.start{font-size:13px;letter-spacing:.2em;border-bottom:1px solid #a8cac49c;padding:13px 0;width:174px;display:flex;justify-content:space-between}.start span{font-size:20px;line-height:1}.hero-actions button{background:transparent;border:0;border-bottom:1px solid #9fb2b155;padding:13px 0;font-size:12px}.reading-note{font-size:10px;color:#acb8b6;margin-top:24px;letter-spacing:.09em}.reading-note>span{margin:0 6px}.scroll-cue{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);font:8px Arial;letter-spacing:.24em;display:flex;flex-direction:column;align-items:center;gap:10px;color:#b8cac6}.scroll-cue span{height:31px;width:1px;background:linear-gradient(transparent,#b4cfca)}
.reading{max-width:820px;margin:0 auto;padding:90px 74px 0;background:linear-gradient(90deg,transparent,rgba(8,17,22,.72) 9%,rgba(8,17,22,.72) 91%,transparent);outline:none}.chapter-heading{display:flex;gap:23px;align-items:center;border-top:1px solid #bcc9c140;border-bottom:1px solid #bcc9c120;padding:30px 0;margin-bottom:60px}.chapter-heading>span{font:35px Georgia,serif;color:#9aaeb0}.chapter-heading p{font-size:10px;letter-spacing:.2em;color:#aabbba;margin:0 0 9px}.chapter-heading h2{font-size:18px;letter-spacing:.1em;font-weight:400;margin:0}#prose p{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:.045em;margin:0 0 1.3em;white-space:pre-wrap;overflow-wrap:anywhere;line-break:strict;text-shadow:0 1px 5px #091217}#prose p.divider{text-align:center;color:#aec6c7;white-space:normal;letter-spacing:.7em;margin:4em 0}#prose p.scene-start{scroll-margin-top:120px}.scene-caption{position:fixed;bottom:46px;left:4vw;display:flex;flex-direction:column;gap:13px;font-size:11px;letter-spacing:.2em;color:#d0d9d3;pointer-events:none}.caption-line{width:30px;height:1px;background:#a1bbbc}.scene-caption small{font-size:8px;color:#8caaa9;writing-mode:vertical-rl;letter-spacing:.25em}.progress-track{position:fixed;bottom:0;height:3px;left:0;right:0;background:#203135;z-index:10}#progress{width:0;height:100%;background:#99cbd0}.ending{text-align:center;padding:80px 0 110px}.end-mark{color:#a9cbd0}.ending .eyebrow{margin-top:35px;font:9px Arial;letter-spacing:.3em}.ending h2{font-size:22px;line-height:1.9;font-weight:400}.ending>p:not(.eyebrow){font-size:12px;color:#a8b9b6}.ending a{display:inline-block;border-bottom:1px solid #a5c3bf70;padding:16px 6px;font-size:13px;margin-top:26px}
dialog{border:1px solid #607777;border-radius:5px;background:#142226;color:#e1e6df;padding:32px;width:min(420px,calc(100vw - 32px));box-shadow:0 20px 100px #0008}dialog::backdrop{background:#020a10aa;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:25px}.dialog-heading .eyebrow{font:8px Arial;letter-spacing:.22em;margin:0 0 10px}.dialog-heading h2{font-size:23px;font-weight:400;margin:0}.dialog-heading button{border:0;background:none;font-size:25px;width:38px;height:38px}.switch-row{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:13px}.switch-row input{accent-color:#99cbd0;width:20px;height:20px}.range-label{display:flex;justify-content:space-between;font-size:13px;margin:24px 0 12px}.range-label output{font:12px Arial;color:#acc2c1}input[type=range]{width:100%;accent-color:#accfd0;min-height:24px}.setting-note{font-size:10px;color:#a5b8b4;line-height:1.8;margin-top:24px}.reset{background:transparent;border:1px solid #81999560;padding:10px 14px;margin-top:8px;font-size:12px}.skip{position:fixed;top:-100px;left:20px;z-index:99;background:#142226;padding:15px}.skip:focus{top:10px}#error{color:#f3c8b8;font-size:13px;line-height:1.8}
@media(max-width:1000px){.scene-caption{display:none}.reading{max-width:760px;padding-left:55px;padding-right:55px}}
@media(max-width:600px){.masthead{height:82px;padding:20px}.brand{font-size:12px;gap:10px;letter-spacing:.07em}.brand small{font-size:6px;letter-spacing:.24em}.mark{width:28px;height:35px;font-size:17px}.edition,.header-actions button span{display:none}.header-actions button{padding:9px 12px}.hero{padding:135px 9vw 110px;min-height:100svh}.hero h1{font-size:57px;letter-spacing:.13em}.episode-number{margin-top:28px}.intro{font-size:13px}.reading{padding:60px 25px 0;background:rgba(8,17,22,.65)}.chapter-heading{gap:18px;margin-bottom:45px}.chapter-heading h2{font-size:15px}.chapter-heading>span{font-size:28px}#prose p{letter-spacing:.02em;margin-bottom:1.35em}.ending h2{font-size:19px}.hero-actions{gap:16px}.start{width:160px}.hero-actions button{font-size:11px}}
:root{--font-size:16px;--line-height:1.9;--shade:.4}
.scene-image.asset{width:100%;background-size:cover;background-position:var(--focus-x,50%) var(--focus-y,50%)}
.reading{background:linear-gradient(90deg,transparent,rgba(8,17,22,.55) 9%,rgba(8,17,22,.55) 91%,transparent)}
#prose p{margin-bottom:1.1em}
@media(max-width:600px){.reading{background:rgba(8,17,22,.48)}#prose p{margin-bottom:1.1em}}
@media(max-width:600px){.scene-image.asset{background-position:var(--focus-mobile-x,var(--focus-x,50%)) var(--focus-mobile-y,var(--focus-y,50%))}}
.masthead{position:fixed;background:linear-gradient(180deg,rgba(9,18,22,.94),rgba(9,18,22,.65));backdrop-filter:blur(8px);transition:transform .3s ease,opacity .3s ease}.masthead.header-hidden{transform:translateY(-110%);opacity:0;pointer-events:none}
#background-controls{position:fixed;z-index:30;inset:0;pointer-events:none}#background-controls button{pointer-events:auto;position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;border:1px solid #d8e6df70;border-radius:999px;background:#0b171dcc;padding:11px 17px;color:#eef3ed;font:12px Arial,sans-serif;letter-spacing:.08em;backdrop-filter:blur(8px)}#tilt-status{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(90vw,520px);margin:0;text-align:center;color:#e8efe9;background:#091319aa;border:1px solid #d7e8e226;border-radius:999px;padding:9px 14px;font:10px/1.5 Arial,sans-serif;letter-spacing:.04em}
body.background-inspect{overflow:hidden}body.background-inspect main,body.background-inspect .masthead,body.background-inspect .scene-caption,body.background-inspect .progress-track{opacity:0;pointer-events:none}body.background-inspect .shade{background:rgba(7,15,19,.04)}body.background-inspect .vignette{opacity:.15}body.background-inspect .scene{transition:none}body.background-inspect .landscape{z-index:0}body.background-inspect #background-controls{display:block!important}
#tilt-status{transition:opacity .18s ease}body.background-panning #tilt-status{opacity:0}#background-panbar{position:fixed;z-index:22;left:10vw;right:10vw;bottom:14px;height:2px;border-radius:2px;background:#dce9e72b;opacity:0;pointer-events:none;transition:opacity .2s ease}#background-panbar span{position:absolute;top:-1px;left:50%;width:18%;height:4px;border-radius:4px;background:#e5efed8c;transform:translateX(-50%);box-shadow:0 1px 5px #0006}body.background-inspect.background-panning #background-panbar{opacity:.72}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene{transition:none}}

.home-view .cover-panel{background:#071014}.home-view .cover-panel::after{background:linear-gradient(180deg,transparent 72%,#0912167a 100%)}
@media(min-width:1000px){.home-view .cover-panel{height:100svh;min-height:0;align-self:start}}
body.background-inspect{overscroll-behavior:none;touch-action:none}
@media(min-width:1000px){.home-view .home{grid-template-columns:60vw 40vw}.home-view .cover-panel picture{inset:18px 30px}.home-view .toc-panel{padding:78px clamp(42px,5vw,84px) 48px}.home-view .toc-heading h1{margin-top:4px;margin-bottom:10px}.home-view .toc-list>a{min-height:98px;padding-top:12px;padding-bottom:12px}.home-view .continue-reading{margin-top:24px}.home-view .toc-note{margin-top:28px}}

#episode-nav{display:flex;justify-content:center;gap:28px;margin-top:24px}#episode-nav a{margin-top:0}

/* Cover and table of contents */
.home{min-height:100svh;background:#091216;color:#edf2ee}.home[hidden]{display:none!important}.home-view .landscape,.home-view #reader,.home-view .scene-caption,.home-view .progress-track,.home-view .masthead,.home-view .skip{display:none}.home-view{background:#091216}.cover-panel{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:#071014 url('assets/promotion/cover-desktop.webp') center/cover no-repeat}.cover-panel picture{position:absolute;inset:0}.cover-panel img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}.cover-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06101520 62%,#091216d9 100%),linear-gradient(90deg,#07101433,transparent 40%,#07101424)}.cover-to-toc{position:absolute;z-index:2;bottom:32px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:12px 20px;border:1px solid #d4e8e54a;border-radius:999px;background:#071319a8;backdrop-filter:blur(8px);font-size:11px;letter-spacing:.16em}.cover-to-toc span{font-size:18px}.toc-panel{position:relative;min-height:100svh;padding:120px max(7vw,40px) 90px;background:radial-gradient(circle at 85% 10%,#153445 0,transparent 31%),#091216}.toc-panel::before{content:"灯";position:absolute;right:6vw;top:74px;font-size:clamp(180px,31vw,520px);line-height:1;color:#b5dde708;pointer-events:none}.toc-heading,.toc-list,.continue-reading,.toc-note{position:relative;z-index:1;max-width:980px;margin-left:auto;margin-right:auto}.toc-heading{border-bottom:1px solid #c2d7d128;padding-bottom:30px}.toc-heading h1{font-size:clamp(38px,5vw,68px);font-weight:400;letter-spacing:.14em;margin:8px 0 16px}.toc-heading>p:last-child{font-size:13px;letter-spacing:.16em;color:#aabbb8}.toc-list{margin-top:20px}.toc-list>a{min-height:112px;display:grid;grid-template-columns:70px minmax(0,1fr) auto 28px;gap:24px;align-items:center;border-bottom:1px solid #c5d8d31f;padding:18px 8px;transition:background .2s ease,padding .2s ease}.toc-list>a:hover{background:#b9d8d008;padding-left:18px;padding-right:18px}.toc-list>a.is-current{background:linear-gradient(90deg,#7fc5d210,transparent);border-left:2px solid #8fd2dc;padding-left:20px}.toc-number{font:30px Georgia,serif;color:#82999d}.toc-copy{display:flex;flex-direction:column;gap:7px}.toc-copy small{font-size:10px;color:#91aaa9;letter-spacing:.18em}.toc-copy strong{font-size:18px;font-weight:400;letter-spacing:.09em}.toc-status{white-space:nowrap;padding:7px 10px;border:1px solid #8bcbd45c;border-radius:999px;color:#bce4e7;background:#11303a8c;font:10px Arial,sans-serif;letter-spacing:.08em}.toc-arrow{font-size:20px;color:#8bacad}.continue-reading{margin-top:34px;border:1px solid #92bdbe40;background:#10242a;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:18px 22px}.continue-reading span{font-size:10px;letter-spacing:.16em;color:#99b8b7}.continue-reading strong{font-size:14px;font-weight:400}.continue-reading small{font:10px Arial;color:#aad4d5}.toc-note{margin-top:42px;text-align:center;font-size:10px;letter-spacing:.15em;color:#748d8d}
@media(min-width:1000px){.home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(440px,.85fr)}.cover-panel,.toc-panel{min-height:100svh}.cover-panel{position:sticky;top:0}.cover-panel img{object-position:center}.cover-to-toc{display:none}.toc-panel{padding:130px 6vw 70px}.toc-heading,.toc-list,.continue-reading,.toc-note{max-width:720px}.toc-list>a{grid-template-columns:58px minmax(0,1fr) auto 24px;gap:18px}}
@media(max-width:600px){.cover-panel{min-height:auto;display:block;padding:0 0 34px;background:#071014}.cover-panel picture{position:relative;inset:auto;display:block}.cover-panel img{width:100%;height:auto;object-fit:contain;object-position:center top}.cover-panel::after{display:none}.cover-to-toc{position:relative;left:auto;bottom:auto;transform:none;width:max-content;margin:24px auto 0;background:#10242a}.toc-panel{padding:72px 20px 64px}.toc-panel::before{top:54px;right:-5vw}.toc-heading{padding-bottom:22px}.toc-heading h1{font-size:36px}.toc-list>a{min-height:92px;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;padding:15px 4px}.toc-list>a.is-current{padding-left:11px}.toc-number{font-size:23px}.toc-copy strong{font-size:15px;line-height:1.6}.toc-status{grid-column:2;padding:5px 8px;justify-self:start}.toc-arrow{grid-column:3;grid-row:1/3}.continue-reading{grid-template-columns:1fr auto;gap:7px 12px}.continue-reading span{grid-column:1/3}.continue-reading strong{font-size:13px}}

@media(min-width:1000px){.home-view .cover-panel picture{inset:0}.home-view .cover-panel img{object-fit:cover}}
@media(max-width:600px){.home-view .cover-panel{padding-bottom:0}.home-view .cover-to-toc{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);margin:0}.home-view .cover-panel img{display:block}}
#background-fit{display:none}body.background-inspect.background-fit .scene-image.asset{background-size:contain;background-position:center!important;background-color:#071014}body.background-inspect.background-fit #background-panbar{opacity:0!important}@media(max-width:600px){body.background-inspect #background-fit{display:flex;position:absolute;top:max(18px,env(safe-area-inset-top));left:18px;right:auto;align-items:center;gap:7px}#background-fit small{font-size:9px}body.background-inspect.background-fit #background-fit{background:#dce9e7;color:#102027}}
@media(max-width:600px){
  .home-view{background:#091216}
  .home-view .home{overflow:visible}
  .home-view .cover-panel{
    z-index:3;
    overflow:visible;
    background:#091216;
    margin-top:calc(-1 * env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
  .home-view .cover-panel picture{
    z-index:0;
    margin-top:calc(-1 * env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    background:#091216;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 190px),rgba(0,0,0,.96) calc(100% - 150px),rgba(0,0,0,.72) calc(100% - 90px),rgba(0,0,0,.28) calc(100% - 35px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 190px),rgba(0,0,0,.96) calc(100% - 150px),rgba(0,0,0,.72) calc(100% - 90px),rgba(0,0,0,.28) calc(100% - 35px),transparent 100%);
  }
  .home-view .cover-to-toc{
    z-index:3;
    bottom:74px;
    background:rgba(10,27,34,.68);
  }
  .home-view .toc-panel{
    z-index:2;
    margin-top:-150px;
    padding-top:200px;
    background:linear-gradient(180deg,transparent 0,rgba(9,18,22,.42) 62px,#091216 170px),radial-gradient(circle at 85% 12%,#153445 0,transparent 31%),#091216;
  }
}

/* Episode 1 narration prototype */
.audio-player{position:fixed;z-index:24;left:50%;bottom:22px;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));padding:15px 18px 13px;border:1px solid #a9d4d242;border-radius:14px;background:rgba(7,19,24,.94);box-shadow:0 18px 70px #0009;backdrop-filter:blur(18px);font-family:Arial,"Noto Sans JP",sans-serif}.audio-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.audio-heading>span{display:flex;align-items:baseline;gap:12px}.audio-heading small{font-size:8px;letter-spacing:.2em;color:#83aaac}.audio-heading strong{font:500 12px/1.2 "Yu Mincho",serif;letter-spacing:.12em}.audio-heading button{border:0;background:transparent;color:#9db0ae;font-size:20px;padding:0 5px}.audio-main{display:grid;grid-template-columns:30px 42px 30px 1fr;gap:8px;align-items:center}.audio-main>button{height:30px;border:0;background:transparent;color:#dce8e4;font-size:22px}.audio-main .audio-play{height:42px;border:1px solid #a7d3d262;border-radius:50%;background:#153039;font-size:15px}.audio-timeline input{display:block;width:100%;height:14px;min-height:0;accent-color:#9acdd0}.audio-timeline>div{display:flex;justify-content:space-between;margin-top:3px;color:#829795;font-size:8px}.audio-options{display:flex;align-items:center;gap:15px;margin-top:9px;padding-left:118px;color:#91a5a3;font-size:9px}.audio-options label{display:flex;align-items:center;gap:6px}.audio-options select{border:1px solid #9fbdb83b;border-radius:4px;background:#10252b;color:#dce8e4;padding:3px 5px;font-size:10px}.audio-options button{border:1px solid #9fbdb83b;border-radius:999px;background:transparent;color:#b8c8c5;padding:5px 9px;font-size:9px}.audio-options button[aria-pressed="true"]{background:#cae5e2;color:#102027}.audio-options #audio-status{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-speaking{scroll-margin-top:30vh;text-shadow:0 0 12px #bcecf066!important}.audio-speaking::before{content:"";display:inline-block;width:3px;height:.9em;margin-right:9px;background:#9dd5da;vertical-align:-.05em;border-radius:2px}body.audio-open .reading{padding-bottom:190px}
@media(max-width:600px){.audio-player{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100vw - 20px);padding:12px}.audio-heading{margin-bottom:7px}.audio-main{grid-template-columns:28px 38px 28px 1fr;gap:5px}.audio-main .audio-play{height:38px}.audio-options{padding-left:0;gap:8px}.audio-options #audio-status{display:none}body.audio-open .reading{padding-bottom:180px}.hero-actions{flex-wrap:wrap}.hero-actions #audio-open{border:1px solid #9fc8c36b;border-radius:999px;padding:9px 14px}}

/* Keep the narration marker aligned with the full wrapped paragraph. */
.audio-speaking{position:relative;padding-left:12px}
.audio-speaking::before{position:absolute;top:.28em;bottom:.28em;left:0;width:3px;height:auto;margin:0;vertical-align:initial}

/* 朗読プレイヤーの最小表示 */
.audio-heading #audio-min{font-size:16px}
.audio-player.is-min:not([hidden]){display:flex;align-items:center;gap:6px;width:auto;max-width:calc(100vw - 20px);padding:6px 12px;border-radius:999px}
.audio-player.is-min .audio-heading{display:contents}
.audio-player.is-min .audio-heading>span{display:none}
.audio-player.is-min .audio-heading button{order:2;font-size:17px;padding:0 6px}
.audio-player.is-min .audio-main{display:flex;gap:4px}
.audio-player.is-min .audio-main .audio-play{width:36px;height:36px;flex:none}
.audio-player.is-min .audio-timeline,.audio-player.is-min .audio-options{display:none}
body.audio-open.audio-min .reading{padding-bottom:96px}

/* 本文の右側に余白がある時：右下の余白へ置き、本文に重ねない */
body.audio-open .audio-clickable{cursor:pointer}
.audio-player.audio-side{left:auto;right:24px;bottom:24px;transform:none}
.audio-player.audio-side:not(.is-min){width:var(--side-width,260px)}
.audio-player.audio-side.is-min:not([hidden]){width:auto}
.audio-player.audio-side:not(.is-min) .audio-main{grid-template-columns:30px 42px 30px;justify-content:center;row-gap:8px}
.audio-player.audio-side:not(.is-min) .audio-timeline{grid-column:1/-1}
.audio-player.audio-side:not(.is-min) .audio-options{padding-left:0;flex-wrap:wrap;gap:10px}
.audio-player.audio-side:not(.is-min) .audio-options #audio-status{display:block;margin-left:0;flex-basis:100%;white-space:normal}
body.audio-open.audio-side-on .reading,body.audio-open.audio-side-on.audio-min .reading{padding-bottom:0}

/* プレイヤー右上の操作ボタン：右端へ寄せ、同じ大きさの丸いボタンにそろえる */
.audio-heading>span{margin-right:auto}
.audio-heading{gap:2px}
.audio-heading #audio-min,.audio-heading #audio-close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:#9db0ae;font-size:18px;line-height:1}
.audio-heading #audio-min:hover,.audio-heading #audio-close:hover{background:#ffffff14;color:#dce8e4}
.audio-heading #audio-min:focus,.audio-heading #audio-close:focus{outline:none}
.audio-heading #audio-min:focus-visible,.audio-heading #audio-close:focus-visible{outline:2px solid #9acdd0;outline-offset:1px}
.audio-player.is-min .audio-heading #audio-min,.audio-player.is-min .audio-heading #audio-close{width:26px;height:26px;padding:0;font-size:17px}


/* 「音声で聴く」を目立たせる：細い白線の丸い枠 */
.hero-actions #audio-open{border:1px solid rgba(255,255,255,.8);border-radius:999px;padding:11px 24px;font-size:12px;letter-spacing:.12em;transition:background .2s}
.hero-actions #audio-open:hover{background:rgba(255,255,255,.12)}
/* プレイヤーを閉じた後の小さなアイコン */
.audio-icon{position:fixed;z-index:24;right:20px;bottom:20px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #a9d4d24d;border-radius:50%;background:rgba(7,19,24,.9);color:#cfe1de;backdrop-filter:blur(10px);cursor:pointer}
.audio-icon[hidden]{display:none}
.audio-icon:hover{background:rgba(22,48,58,.95)}
/* 本文を読み始めた時の、小さなプレイヤー（「音声で聴く」の案内付き） */
.audio-invite{display:none}
.audio-player.is-invite .audio-invite{display:inline;margin:0 6px 0 2px;font-size:12px;letter-spacing:.1em;color:#cfe1de;white-space:nowrap}
.audio-player.is-invite .audio-main>button:not(.audio-play){display:none}
.audio-player.is-invite .audio-heading #audio-min{display:none}
@media(max-width:600px){.audio-icon{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}}

/* 再生中にプレイヤーを最小化した時のアイコン：再生中の印を付ける */
.audio-icon.is-playing{border-color:#7fd0d8aa;color:#7fd0d8}
.audio-icon.is-playing::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#7fd0d8;animation:audio-pulse 1.6s ease-in-out infinite}
@keyframes audio-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.audio-icon.is-playing::after{animation:none}}

/* トップの導入動画：全画面で流し、終わるとフェードアウトして表紙へ */
.promo-intro{position:fixed;inset:0;z-index:200;display:grid;background:#05090c;opacity:1;transition:opacity 1.2s ease}
.promo-intro[hidden]{display:none}
.promo-intro.is-out{opacity:0;pointer-events:none}
.promo-intro video{width:100%;height:100%;object-fit:cover;object-position:center}
.intro-skip{position:absolute;right:20px;bottom:max(20px,env(safe-area-inset-bottom));padding:6px 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,0,0,.25);color:rgba(255,255,255,.8);font-size:10px;letter-spacing:.2em;cursor:pointer}
body.intro-playing{overflow:hidden}

/* 導入動画（スマホ）：3:4の引きの画角を縦長の画面の中央に置き、上下はなだらかに暗くする */
.promo-intro.is-compact{place-items:center}
.promo-intro.is-compact video{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* 公開前の話：グレーにして開けない */
.toc-list a.is-locked{filter:grayscale(1);opacity:.42;pointer-events:none;cursor:default}
.toc-list a.is-locked .toc-arrow{visibility:hidden}
#episode-nav .is-locked{opacity:.4;filter:grayscale(1);cursor:default}
/* 投稿サイトへのリンク */
.external-links{display:grid;gap:10px;justify-items:center;margin:26px auto 0;font-size:11px}
.external-links[hidden]{display:none}
.external-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px}
.external-row span{color:rgba(230,236,232,.62);letter-spacing:.12em;margin-right:4px}
.external-row a{padding:8px 15px;border:1px solid rgba(255,255,255,.4);border-radius:999px;color:inherit;text-decoration:none;letter-spacing:.06em;transition:background .2s}
.external-row a:hover{background:rgba(255,255,255,.12)}

/* トップの目次：最新の数話だけを出し、全体は目次一覧へ */
.toc-all{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;max-width:720px;margin:14px auto 0;padding:14px 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:inherit;text-decoration:none;font-size:12px;letter-spacing:.14em;transition:background .2s}
.toc-all[hidden]{display:none}
.toc-all:hover{background:rgba(255,255,255,.1)}
.toc-all-count{color:rgba(230,236,232,.7);letter-spacing:.08em}
/* 目次一覧のページ */
.toc-page[hidden]{display:none}
.toc-page{min-height:100svh;padding:72px 20px 90px;background:radial-gradient(circle at 85% 10%,#153445 0,transparent 31%),#091216;color:#edf2ee}
.toc-page-inner{max-width:720px;margin:0 auto}
.toc-page h1{margin:8px 0 6px;font-size:clamp(34px,5vw,56px);font-weight:400;letter-spacing:.14em}
.toc-back{display:inline-block;margin-bottom:34px;color:#aabbb8;font-size:12px;letter-spacing:.14em;text-decoration:none}
.toc-back:hover{color:#edf2ee}
.toc-part{margin-top:34px}
.toc-part h2{margin:0;padding-bottom:12px;border-bottom:1px solid #c2d7d128;font-size:14px;font-weight:400;letter-spacing:.16em;color:#aabbb8}

/* 音量 */
.audio-options .volume{display:flex;align-items:center;gap:6px}
.audio-options .volume input{width:84px;height:14px;accent-color:#9acdd0}

/* 部の題名は長くなるので、目次の見出しより一回り小さくする */
.home-view .toc-heading h1{font-size:clamp(26px,3vw,46px);letter-spacing:.1em}

/* 読み込み画面 */
.loading{position:fixed;inset:0;z-index:300;display:grid;place-content:center;justify-items:center;gap:18px;background:#05090c;color:#cfe1de;opacity:1;transition:opacity .7s ease}
.loading[hidden]{display:none}
.loading.is-done{opacity:0;pointer-events:none}
.loading-flame{width:58px;height:74px;overflow:visible;filter:drop-shadow(0 0 10px #2caaffaa) drop-shadow(0 0 25px #156bd466);animation:flame-glow 2.4s ease-in-out infinite}
.loading-flame path{transform-box:fill-box;transform-origin:50% 100%}
.flame-outer{animation:flame-sway 2.1s ease-in-out infinite}
.flame-side{animation:flame-sway 1.5s ease-in-out -.7s infinite reverse}
.flame-core{animation:flame-core 1.7s ease-in-out -.3s infinite}
.flame-spark{animation:spark-rise 2s ease-out infinite}
.spark-two{animation-delay:-1.1s}
.loading-text{margin:0;font-size:11px;letter-spacing:.32em;color:#9db6b6}
.loading-bar{width:150px;height:1px;background:#ffffff26;overflow:hidden}
.loading-bar i{display:block;width:40%;height:100%;background:#9acdd0;animation:loading-slide 1.4s ease-in-out infinite}
@keyframes flame-sway{0%,100%{transform:rotate(-4deg) scaleX(.96)}35%{transform:rotate(4deg) scaleX(1.04)}70%{transform:rotate(-2deg) scaleY(1.06)}}
@keyframes flame-core{0%,100%{transform:scale(.9,1);opacity:.85}50%{transform:scale(1.12,1.1);opacity:1}}
@keyframes flame-glow{0%,100%{opacity:.88;filter:drop-shadow(0 0 8px #2caaff88) drop-shadow(0 0 20px #156bd455)}50%{opacity:1;filter:drop-shadow(0 0 14px #5bd8ffcc) drop-shadow(0 0 32px #2079e088)}}
@keyframes spark-rise{0%{transform:translateY(12px) scale(.5);opacity:0}30%{opacity:.9}100%{transform:translateY(-15px) scale(.2);opacity:0}}
@keyframes loading-slide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
@media(prefers-reduced-motion:reduce){.loading-flame,.loading-flame path,.flame-spark,.loading-bar i{animation:none}}
/* 音声を読み込み中の再生ボタン */
.audio-play.is-loading{position:relative;color:transparent}
.audio-play.is-loading::after{content:"";position:absolute;inset:9px;border:2px solid #9acdd0;border-top-color:transparent;border-radius:50%;animation:audio-spin .8s linear infinite}
@keyframes audio-spin{to{transform:rotate(360deg)}}

/* ヘッダーのロゴ（青い火）と目次リンク */
.brand .mark{width:auto;height:auto;border:0;background:none;padding:0;font-size:0}
.brand .mark img{display:block;width:44px;height:44px;border-radius:10px}
.header-actions a.toc-link{border:1px solid #e3ece838;padding:12px 17px;background:#10202788;border-radius:3px;font-size:12px;letter-spacing:.14em;color:inherit;text-decoration:none}
.header-actions a.toc-link:hover{background:#1a2f38aa}
@media(max-width:600px){.brand .mark img{width:34px;height:34px;border-radius:8px}.header-actions{gap:10px}.header-actions a.toc-link{padding:9px 10px;font-size:11px;letter-spacing:.06em}}
/* 導入動画のスキップ：中央下 */
.intro-skip{left:50%;right:auto;transform:translateX(-50%)}
/* 目次一覧：なろう・カクヨムで公開している話をすべて並べる */
.toc-page-note{margin:8px 0 0;font-size:12px;line-height:1.9;letter-spacing:.06em;color:#aabbb8}
.toc-rows{list-style:none;margin:0;padding:0}
.toc-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:14px 4px;border-bottom:1px solid #c2d7d120}
.toc-row .toc-number{font-size:15px;color:#7f9a9c}
.toc-row .toc-copy small{display:block;font-size:10px;letter-spacing:.14em;color:#8fb6bb}
.toc-row .toc-copy strong{display:block;margin-top:3px;font-weight:400;font-size:15px;letter-spacing:.06em}
.toc-row-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.toc-row-links a{padding:6px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#cfe1de;font-size:11px;letter-spacing:.06em;text-decoration:none;white-space:nowrap;transition:background .2s}
.toc-row-links a:hover{background:rgba(255,255,255,.1)}
.toc-row-links a.immersive{background:#cfe9e6;border-color:#cfe9e6;color:#0e1e24;font-weight:700}
.toc-row.is-immersive{background:linear-gradient(90deg,#15303a55,transparent 70%)}
@media(max-width:600px){.toc-row{grid-template-columns:34px minmax(0,1fr)}.toc-row-links{grid-column:2;justify-content:flex-start}}

/* 読み込み画面：粒子の炎 */
.loading-canvas{width:170px;height:230px;display:block}
.loading.has-canvas .loading-flame{display:none}
/* 音声で聴く：すりガラスに、青い火が映ったようなボタン */
.hero-actions #audio-open.glass-flame{position:relative;overflow:hidden;isolation:isolate;padding:14px 34px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#f4fbff;letter-spacing:.14em;
  background:linear-gradient(135deg,rgba(200,230,255,.2),rgba(110,160,255,.07));
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -12px 26px rgba(60,120,255,.2),0 10px 34px rgba(20,80,210,.32),0 0 0 1px rgba(120,190,255,.14);
  animation:glass-breathe 4s ease-in-out infinite;transition:transform .25s ease,box-shadow .25s ease}
.hero-actions #audio-open.glass-flame:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(210,236,255,.28),rgba(120,170,255,.1))}
.glass-flame .btn-flame{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.9;filter:blur(2px)}
.glass-flame .btn-label{position:relative;z-index:1;font-size:13px;text-shadow:0 0 14px rgba(130,200,255,.85)}
.glass-flame::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:glass-sheen 5.5s ease-in-out infinite}
@keyframes glass-breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -12px 26px rgba(60,120,255,.2),0 10px 34px rgba(20,80,210,.3),0 0 0 1px rgba(120,190,255,.14)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -14px 30px rgba(70,140,255,.32),0 12px 42px rgba(30,110,240,.5),0 0 0 1px rgba(150,210,255,.28)}}
@keyframes glass-sheen{0%,60%{left:-40%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.hero-actions #audio-open.glass-flame,.glass-flame::after{animation:none}}
@media(max-width:600px){.hero-actions #audio-open.glass-flame{padding:12px 24px}}
/* プライバシーポリシーへのリンク */
.site-foot{position:relative;z-index:1;max-width:720px;margin:18px auto 0;text-align:center;font-size:10px;letter-spacing:.12em}
.site-foot a,.site-foot-link{color:#8fa6a8;text-decoration:none}
.site-foot a:hover,.site-foot-link:hover{color:#dce8e4;text-decoration:underline}
.site-foot-link{display:block;margin-top:14px;font-size:10px;letter-spacing:.12em}

/* ヘッダーのロゴは、背景が透明の青い火。角丸は付けない */
.brand .mark img{border-radius:0}

/* 読んでいる段落の印：文章の位置は変えず、左の余白のバーが、なめらかに下へ動く */
#prose{position:relative}
.read-bar{position:absolute;left:-18px;top:0;width:3px;height:0;border-radius:3px;background:linear-gradient(180deg,#a8e2ff,#4e9bff);box-shadow:0 0 12px rgba(110,190,255,.75);opacity:0;pointer-events:none;transition:top .6s cubic-bezier(.4,0,.2,1),height .6s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.read-bar.on{opacity:1}
.audio-speaking{padding-left:0!important}
.audio-speaking::before{display:none!important}
#prose p{transition:opacity .5s ease}
#prose.is-following p:not(.audio-speaking){opacity:.42}
@media(max-width:600px){.read-bar{left:-12px}}
@media(prefers-reduced-motion:reduce){.read-bar,#prose p{transition:none}}

/* フッターの区切り */
.site-foot span{margin:0 .7em;opacity:.45}
.site-foot-end{margin-top:18px}

/* 読み込み画面の炎の大きさ */
.loading-canvas{width:200px;height:260px}