/* =================================
   零ゼロページ内の移行補助
   migration.css に置かず、このページ専用CSSで管理
================================= */

body {
    min-width: 320px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.title-reveal::after {
    border-color: currentColor;
}

.title-reveal-light {
    color: #fff;
}

/* 02・04の見出しは零ゼロ側で中央揃えを管理 */
.journey-section > .section-intro,
.characters-section > .section-intro {
    text-align: center;
}

.journey-section > .section-intro .title-reveal,
.characters-section > .section-intro .title-reveal {
    margin-left: auto;
    margin-right: auto;
}

.journey-section > .section-intro > p:last-child,
.characters-section > .section-intro > p:last-child {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.zero-site {
    /* AIアニメ欄の外側に確保するINTRODUCTION遷移領域 */
    --intro-overlap: 210px;
    --intro-fade-soft: 42px;
    --intro-fade-mid: 125px;

    --zero-ink: #183047;
    --zero-blue: #7ac6ec;
    --zero-pale: #eefaff;
    --zero-green: #a9cf7c;
    min-height: 100vh;
    color: var(--zero-ink);
    background: #f8fdff;
    font-family: Yu Mincho, Hiragino Mincho ProN, serif;
    overflow: clip
}

.zero-opening {
    z-index: 200;
    background: #fff;
    place-items: center;
    animation: .9s 4.3s forwards opening-away;
    display: grid;
    position: fixed;
    inset: 0
}

.opening-line,
.opening-title {
    opacity: 0;
    color: #263a4b;
    letter-spacing: .14em;
    margin: 0;
    font-size: clamp(17px, 2vw, 27px);
    font-weight: 400;
    position: absolute
}

.line-one {
    animation: 1.7s .3s both opening-text
}

.line-two {
    animation: 1.7s 1.7s both opening-text
}

.line-three {
    letter-spacing: .2em;
    font-size: clamp(28px, 5vw, 60px);
    animation: 1.6s 3.05s both opening-title
}

.zero-opening button {
    color: #7a8790;
    letter-spacing: .2em;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #9eabb4;
    font: 10px/1 ui-monospace, monospace;
    position: absolute;
    bottom: 24px;
    right: 28px
}

@keyframes opening-text {

    0%,
    to {
        opacity: 0;
        transform: translateY(7px)
    }

    25%,
    72% {
        opacity: 1;
        transform: none
    }
}

@keyframes opening-title {
    0% {
        opacity: 0;
        letter-spacing: .34em
    }

    40%,
    to {
        opacity: 1;
        letter-spacing: .2em
    }
}

@keyframes opening-away {
    to {
        opacity: 0;
        visibility: hidden
    }
}

.zero-header {
    z-index: 80;
    color: #fff;
    mix-blend-mode: difference;
    justify-content: space-between;
    align-items: center;
    padding: 19px 25px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.back-home,
.menu-button {
    letter-spacing: .15em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px
}

.menu-button {
    z-index: 100;
    color: inherit;
    cursor: pointer;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 13px;
    display: flex;
    position: relative
}

.menu-button i,
.menu-button i:before,
.menu-button i:after {
    content: "";
    background: currentColor;
    width: 22px;
    height: 1px;
    display: block
}

.menu-button i {
    position: relative
}

.menu-button i:before {
    position: absolute;
    top: -6px
}

.menu-button i:after {
    position: absolute;
    top: 6px
}

.menu-button.is-open i {
    background: 0 0
}

.menu-button.is-open i:before {
    top: 0;
    transform: rotate(45deg)
}

.menu-button.is-open i:after {
    top: 0;
    transform: rotate(-45deg)
}

.menu-button i:before,
.menu-button i:after {
    transition: transform .25s, top .25s
}

.menu-backdrop {
    z-index: 85;
    cursor: default;
    mix-blend-mode: normal;
    background: #0c23333d;
    border: 0;
    position: fixed;
    inset: 0
}

.map-menu {
    z-index: 90;
    width: min(390px, 90vw);
    height: 100vh;
    color: var(--zero-ink);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: normal;
    background: #f4fcfff5;
    flex-direction: column;
    padding: 90px 46px;
    transition: all .35s;
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    transform: translate(102%);
    box-shadow: -20px 0 70px #11364f29
}

.map-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: none
}

body.menu-open .zero-header {
    mix-blend-mode: difference
}

body.menu-open .menu-button {
    color: #fff
}

body.menu-open .menu-button.is-open i {
    visibility: hidden
}

body.menu-open::after {
    content: "";
    z-index: 9999;
    pointer-events: none;
    width: 28px;
    height: 28px;
    position: fixed;
    top: 13px;
    right: 22px;
    background:
        linear-gradient(45deg,
            transparent calc(50% - 1px),
            #17384d calc(50% - 1px),
            #17384d calc(50% + 1px),
            transparent calc(50% + 1px)) center / 20px 20px no-repeat,
        linear-gradient(-45deg,
            transparent calc(50% - 1px),
            #17384d calc(50% - 1px),
            #17384d calc(50% + 1px),
            transparent calc(50% + 1px)) center / 20px 20px no-repeat
}

.map-menu p {
    letter-spacing: .2em;
    margin: 0 0 24px;
    font: 9px/1.6 ui-monospace, monospace
}

.map-menu a {
    border-bottom: 1px solid #c9dde8;
    gap: 22px;
    padding: 16px 0;
    font-size: 20px;
    display: flex
}

.map-menu a small {
    width: 22px;
    padding-top: 6px;
    font: 9px/1 ui-monospace, monospace
}

.movie-hero {
    z-index: 2;
    background: #1f526e;
    place-items: center;

    /* INTRODUCTIONが重なる分だけ、街背景を下へ延長 */
    min-height: calc(100svh + var(--intro-overlap));
    padding: 11vh 6vw calc(8vh + var(--intro-overlap));

    display: grid;
    position: relative;
    overflow: hidden;
}


.hero-sky,
.blurred-scene {
    background-position: 50%;
    background-size: cover;
    position: absolute;
    inset: -25px
}

.hero-sky {
    filter: blur(8px);
    background-image: linear-gradient(#16466247, #122f448f), url('../images/zero/locations/haderlond/haderlond-city.webp');
    transform: scale(1.04)
}

.zero-logo {
    z-index: 2;
    width: clamp(220px, 34vw, 480px);
    position: absolute;
    top: 6vh;
    left: 5vw
}

.hero-note {
    z-index: 2;
    color: #ffffffc7;
    letter-spacing: .23em;
    margin: 0;
    font: 9px/1.4 ui-monospace, monospace;
    position: absolute;
    top: 8vh;
    right: 6vw
}

.video-frame {
    z-index: 2;
    aspect-ratio: 16/9;
    border: 1px solid #ffffffb3;
    width: min(1040px, 91vw);
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 90px #0525396b
}

.video-frame iframe {
    border: 0;
    width: 100%;
    height: 100%
}

.down-guide {
    z-index: 4;
    color: #fff;
    letter-spacing: .14em;
    font-size: 11px;
    position: absolute;
    bottom: calc(var(--intro-overlap) + 3vh);
    right: 6vw;
}

.down-guide span {
    margin-left: 18px
}

.introduction-section {
    --intro-white-opacity: 1;
    --intro-veil-opacity: 1;
    --intro-veil-shift: 0vh;
    --intro-symbol-opacity: 1;

    /* 紋章消失時の白い波紋 */
    --intro-ripple-one-opacity: 0;
    --intro-ripple-one-scale: .42;
    --intro-ripple-two-opacity: 0;
    --intro-ripple-two-scale: .42;
    --intro-ripple-three-opacity: 0;
    --intro-ripple-three-scale: .42;

    --intro-background-opacity: 0;
    --intro-content-opacity: 0;
    --intro-content-shift: 90px;
    --intro-content-blur: 14px;
    --intro-mote-opacity: 0;

    /*
     * セクション本体は通常位置のまま。
     * 前のAIアニメ欄へは、内部レイヤーだけをはみ出させる。
     */
    z-index: 3;
    background: transparent;
    min-height: 100svh;
    position: relative;
    overflow: visible;
    isolation: isolate
}

.introduction-sticky {
    min-height: 100svh;
    position: relative;
    overflow: visible;
    isolation: isolate
}

/*
 * 白いロゴ画面が消えたあとに残る淡い水色。
 * 上端210pxは透明から徐々に現れ、AIアニメ背景へ溶け込む。
 */
.introduction-sticky::before {
    z-index: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(-1 * var(--intro-overlap));
    left: 0;
    right: 0;
    bottom: 0;
    background: #effaff;

    /*
     * 上端と下端で同じマスク値を反転して使用。
     * 上：AIアニメ → INTRODUCTION
     * 下：INTRODUCTION → 世界設定
     */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / .08) var(--intro-fade-soft),
        rgb(0 0 0 / .48) var(--intro-fade-mid),
        #000 var(--intro-overlap),
        #000 calc(100% - var(--intro-overlap)),
        rgb(0 0 0 / .48) calc(100% - var(--intro-fade-mid)),
        rgb(0 0 0 / .08) calc(100% - var(--intro-fade-soft)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / .08) var(--intro-fade-soft),
        rgb(0 0 0 / .48) var(--intro-fade-mid),
        #000 var(--intro-overlap),
        #000 calc(100% - var(--intro-overlap)),
        rgb(0 0 0 / .48) calc(100% - var(--intro-fade-mid)),
        rgb(0 0 0 / .08) calc(100% - var(--intro-fade-soft)),
        transparent 100%
    )
}

/*
 * 草原画像も同じ210pxだけ上へ伸ばし、
 * 白い幕と同一のぼかし境界で表示する。
 */
.introduction-background {
    z-index: 1;
    object-fit: cover;
    object-position: center;
    image-rendering: auto;
    opacity: var(--intro-background-opacity);
    width: 100%;
    height: calc(100% + var(--intro-overlap));
    display: block;
    position: absolute;
    top: calc(-1 * var(--intro-overlap));
    left: 0;

    /*
     * 上端と下端で同じマスク値を反転して使用。
     * 上：AIアニメ → INTRODUCTION
     * 下：INTRODUCTION → 世界設定
     */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / .08) var(--intro-fade-soft),
        rgb(0 0 0 / .48) var(--intro-fade-mid),
        #000 var(--intro-overlap),
        #000 calc(100% - var(--intro-overlap)),
        rgb(0 0 0 / .48) calc(100% - var(--intro-fade-mid)),
        rgb(0 0 0 / .08) calc(100% - var(--intro-fade-soft)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / .08) var(--intro-fade-soft),
        rgb(0 0 0 / .48) var(--intro-fade-mid),
        #000 var(--intro-overlap),
        #000 calc(100% - var(--intro-overlap)),
        rgb(0 0 0 / .48) calc(100% - var(--intro-fade-mid)),
        rgb(0 0 0 / .08) calc(100% - var(--intro-fade-soft)),
        transparent 100%
    )
}

.introduction-copy {
    background: transparent;
    width: min(490px, 44vw);
    padding: 54px 40px 42px;
    opacity: var(--intro-content-opacity);
    filter: blur(var(--intro-content-blur));
    z-index: 3;
    isolation: isolate;
    position: absolute;
    top: auto;
    bottom: clamp(110px, 13vh, 150px);
    left: max(6vw, 50vw - 600px);
    transform: translateY(var(--intro-content-shift))
}

.introduction-copy::before {
    z-index: -1;
    content: "";
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    background: linear-gradient(
        to bottom,
        #ffffff00 0%,
        #ffffff38 17%,
        #ffffff9e 37%,
        #ffffffc4 58%,
        #ffffffc4 100%
    );
    position: absolute;
    inset: -46px -26px -18px;
    box-shadow: 0 28px 70px #437f9e17
}

.section-label {
    color: #3a7596;
    letter-spacing: .24em;
    margin: 0 0 25px;
    font: 9px/1.3 ui-monospace, monospace
}

.title-reveal {
    width: fit-content;
    max-width: 100%;
    margin: -9px -14px -12px;
    padding: 9px 14px 12px;
    display: block;
    position: relative;
    overflow: visible
}

.title-reveal:after {
    z-index: 2;
    content: "";
    opacity: 0;
    transform-origin: bottom;
    background: 0 0;
    border: 1px solid;
    position: absolute;
    inset: 0
}

.title-reveal>h1,
.title-reveal>h2 {
    opacity: 0;
    clip-path: inset(100% 0 0);
    transform: scale(1.035);
    transform-origin: center center;
    will-change: opacity, clip-path, transform
}

.title-reveal.is-visible:after {
    animation: 1.05s cubic-bezier(.76, 0, .24, 1) both title-frame-collapse
}

.title-reveal.is-visible>h1,
.title-reveal.is-visible>h2 {
    animation: .78s cubic-bezier(.2, .75, .2, 1) .68s both title-text-cut-in
}

@keyframes title-frame-collapse {
    0% {
        opacity: 0;
        transform: scaleX(.72)scaleY(.82)
    }

    16% {
        opacity: 1;
        transform: scaleX(1)scaleY(1)
    }

    58% {
        opacity: 1;
        transform: translateY(0)scaleY(1)
    }

    82% {
        opacity: 1;
        transform: translateY(5px)scaleY(.035)
    }

    to {
        opacity: 0;
        transform: translateY(5px)scaleX(.18)scaleY(.035)
    }
}

@keyframes title-text-cut-in {
    0% {
        opacity: 0;
        clip-path: inset(100% 0 0);
        transform: scale(1.035)
    }

    to {
        opacity: 1;
        clip-path: inset(0);
        transform: scale(1)
    }
}

.introduction-copy h1,
.section-intro h2,
.paper-panel h2,
.story-panel h2,
.archive-grid h2 {
    letter-spacing: .08em;
    margin: 0;
    font-weight: 400;
    line-height: 1.5
}

.introduction-copy h1 {
    font-size: clamp(30px, 4vw, 56px)
}

.introduction-copy h1 span,
.introduction-copy h1 small {
    display: block
}

.introduction-copy h1 small {
    letter-spacing: .18em;
    white-space: nowrap;
    margin-top: 8px;
    font-size: .3em
}

.introduction-copy > .introduction-description,
.section-intro>p:last-child,
.paper-panel>p,
.story-panel>p,
.archive-grid>div>p:last-child {
    color: #385267;
    margin: 28px 0 0;
    font-size: 13px;
    line-height: 2.25
}

.glass-block {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: linear-gradient(135deg, #ffffff73, #74c8eb26);
    border: 1px solid #ffffffa6;
    opacity: var(--intro-content-opacity);
    z-index: 2;
    position: absolute;
    transform: rotate(10deg);
    box-shadow: inset 0 0 25px #ffffff8c, 0 16px 35px #1c729d26
}

.block-a {
    width: 100px;
    height: 100px;
    bottom: 11vh;
    right: 9vw
}

.block-b {
    width: 58px;
    height: 58px;
    bottom: 5vh;
    right: 4vw;
    transform: rotate(-12deg)
}

.journey-section {
    z-index: 1;
    background: #e5f5fa;
    margin-top: calc(-1 * var(--intro-overlap));
    padding:
        calc(130px + var(--intro-overlap))
        max(5vw, 50vw - 680px)
        130px;
    position: relative;
    overflow: clip;
    isolation: isolate
}

.world-backdrop {
    z-index: 0;
    filter: blur(13px);
    background-image:
        linear-gradient(#e5f7fcdc, #e5f7fcf2),
        url('../images/zero/worlds/road.webp')
}

.journey-section > .world-intro-pixel,
.journey-section > .section-intro,
.journey-section > .route-story,
.journey-section > .other-worlds {
    z-index: 2;
    position: relative
}

.section-intro {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto 70px
}

.world-intro-pixel {
    z-index: 2;
    width: 200px;
    image-rendering: pixelated;
    margin: 0 auto 46px;
    display: block;
    position: relative
}

.section-intro h2 {
    white-space: nowrap;
    font-size: clamp(24px, 4vw, 58px)
}

.section-intro h2,
.paper-panel h2,
.story-panel h2,
.archive-grid h2 {
    font-size: clamp(30px, 4.3vw, 58px)
}

/* =================================
   WORLD SETTING — JOURNEY + DETAILS
================================= */

.route-story {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    isolation: isolate
}

.route-map-column {
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100vh;
    margin-bottom: -100vh;
    position: sticky;
    top: 0;
    overflow: hidden
}

.route-map-sticky,
.route-map-viewport {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden
}

.route-map-viewport {
    background: transparent
}

.route-map-viewport::after {
    content: none
}

/* MAP・ルート・丸を同じ正方形で均等拡大し、丸の楕円化を防ぐ */
.route-map-canvas {
    --route-map-pan-x: 0px;
    --route-map-pan-y: 0px;
    --route-map-scale: 1.38;

    z-index: 1;
    aspect-ratio: 1;
    width: clamp(1320px, 108vw, 1940px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
        translate(
            calc(-50% + var(--route-map-pan-x)),
            calc(-50% + var(--route-map-pan-y))
        )
        scale(var(--route-map-scale));
    transform-origin: center;
    will-change: transform
}

.route-map-image,
.route-journey-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.route-map-image {
    opacity: .70;
    object-fit: contain;
    display: block;
    mix-blend-mode: normal;
    filter: none
}

.route-journey-overlay {
    z-index: 2;
    overflow: visible
}

.route-leg {
    opacity: 0
}

.route-leg-line,
.route-leg-glow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

.route-leg-glow {
    stroke: rgb(255 255 255 / .9);
    stroke-width: 9.5;
    filter: blur(3px)
}

.route-leg-line {
    stroke: #7ea8bf;
    stroke-width: 5;
    filter:
        drop-shadow(0 0 2px rgb(72 114 138 / .2))
        drop-shadow(0 0 5px rgb(255 255 255 / .45))
}

.route-stop {
    opacity: .18;
    transition: opacity .35s ease
}

.route-stop circle {
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke
}

.route-stop-ring {
    fill: rgb(249 253 255 / .92);
    stroke: rgb(98 145 169 / .86);
    stroke-width: 1.25
}

.route-stop-core {
    opacity: 0;
    fill: rgb(255 255 255 / .92);
    stroke: rgb(94 142 166 / .82);
    stroke-width: .9;
    transition: opacity .28s ease
}

/* 中心点は、ラインが実際に到達した地点だけ表示します。 */
.route-stop.is-reached .route-stop-core {
    opacity: .52
}

.route-stop-wave {
    fill: none;
    stroke: rgb(105 154 180 / .7);
    stroke-width: 1;
    opacity: 0
}

.route-stop-number {
    fill: rgb(64 117 141 / .82);
    stroke: rgb(235 248 252 / .96);
    stroke-width: 4;
    paint-order: stroke fill;
    letter-spacing: .1em;
    font: 700 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace
}

.route-stop-name {
    fill: rgb(70 116 139 / .68);
    stroke: rgb(235 248 252 / .96);
    stroke-width: 4;
    paint-order: stroke fill;
    letter-spacing: .16em;
    font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace
}

.route-stop.is-reached .route-stop-name {
    fill: rgb(60 110 134 / .82)
}

.route-stop.is-current .route-stop-name {
    fill: #4f84a0
}

.route-stop.is-reached {
    opacity: .7
}

.route-stop.is-current {
    opacity: 1
}

.route-stop.is-current .route-stop-ring {
    fill: rgb(255 255 255 / .96);
    stroke: #6593ac;
    stroke-width: 1.65
}

.route-stop.is-current .route-stop-core {
    opacity: 1;
    fill: #5f8fa9;
    stroke: #5f8fa9
}

.route-stop.is-current .route-stop-wave {
    animation: route-map-pulse 1.05s cubic-bezier(.15, .72, .2, 1) both
}

@keyframes route-map-pulse {
    0% {
        opacity: 0;
        transform: scale(.62)
    }

    28% {
        opacity: .75
    }

    to {
        opacity: 0;
        transform: scale(1.65)
    }
}

.route-map-heading {
    z-index: 6;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    width: min(510px, 43vw);
    position: absolute;
    top: clamp(74px, 9vh, 112px);
    left: max(4.5vw, calc((100vw - 1540px) / 2));
    display: flex
}

.route-map-heading small {
    color: #43809a;
    letter-spacing: .22em;
    font: 8px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace
}

.route-map-heading p {
    color: #345f74;
    margin: 7px 0 0;
    font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace
}

.route-current-number {
    color: #5f8fa9;
    font-size: 25px
}

.route-current-name {
    color: #23465a !important;
    letter-spacing: .12em;
    text-align: right;
    font: 400 clamp(18px, 1.8vw, 28px)/1.3 Yu Mincho, serif !important
}

.route-timeline {
    z-index: 5;
    width: min(580px, 44vw);
    min-width: 0;
    margin-left: auto;
    margin-right: max(5vw, calc(50vw - 680px));
    padding: 20vh 0 18vh;
    position: relative
}

.route-chapter {
    --route-gap: 120px;

    opacity: .32;
    filter: blur(1px);
    width: min(560px, 100%);
    min-height: 0;
    margin: 0 0 var(--route-gap) auto;
    padding: clamp(18px, 1.9vw, 28px);
    background: rgb(255 255 255 / .66);
    border: 1px solid rgb(255 255 255 / .8);
    transition:
        opacity .5s ease,
        filter .5s ease,
        transform .65s cubic-bezier(.18, .76, .2, 1),
        background-color .5s ease,
        box-shadow .5s ease;
    transform: translateY(24px) scale(.988);
    box-shadow: 0 18px 48px rgb(43 96 119 / .08)
}

.route-chapter:last-child {
    margin-bottom: 0
}

.route-chapter.is-active {
    opacity: 1;
    filter: none;
    background: rgb(255 255 255 / .92);
    transform: none;
    box-shadow:
        0 25px 68px rgb(43 96 119 / .17),
        inset 0 0 24px rgb(255 255 255 / .76)
}

.route-chapter.is-passed {
    opacity: .6;
    filter: none;
    transform: translateY(0) scale(.994)
}

.route-chapter-meta {
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    display: flex
}

.route-chapter-meta span {
    color: #187da4;
    font: 400 25px/1 Georgia, "Times New Roman", serif
}

.route-chapter-meta small {
    color: #5a879a;
    letter-spacing: .2em;
    text-align: right;
    font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace
}

.route-chapter-image,
.route-chapter-images {
    background: #183a4c;
    width: 100%;
    margin-bottom: 17px;
    overflow: hidden
}

.route-chapter-image {
    aspect-ratio: 16/8.4
}

.route-chapter-images {
    aspect-ratio: 16/8.4;
    gap: 6px;
    display: grid
}

.route-chapter-images-two {
    grid-template-columns: 1fr 1fr
}

.route-chapter-image img,
.route-chapter-images img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    transition:
        transform .9s cubic-bezier(.18, .7, .2, 1),
        filter .6s ease
}

.route-chapter:not(.is-active) .route-chapter-image img,
.route-chapter:not(.is-active) .route-chapter-images img {
    filter: saturate(.74) brightness(.96)
}

.route-chapter.is-active .route-chapter-image img,
.route-chapter.is-active .route-chapter-images img {
    transform: scale(1.015)
}

.route-chapter-image-pixel img {
    object-fit: contain;
    image-rendering: pixelated;
    background: #dff4f8
}

.route-chapter h3 {
    letter-spacing: .08em;
    margin: 0;
    font-size: clamp(23px, 2.25vw, 33px);
    font-weight: 400
}

.route-chapter > p {
    color: #385267;
    margin: 13px 0 0;
    font-size: 13px;
    line-height: 1.9
}


/* 地域カード内の画像ギャラリー */
.route-location-gallery {
    width: 100%;
    margin-bottom: 22px
}

.route-gallery-main {
    color: inherit;
    cursor: zoom-in;
    background: #dceff5;
    border: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden
}

.route-gallery-backdrop {
    pointer-events: none;
    background-image: var(--route-gallery-background);
    background-position: center;
    background-size: cover;
    opacity: .48;
    filter: blur(16px) saturate(.82) brightness(.9);
    position: absolute;
    inset: -22px;
    transform: scale(1.08)
}

.route-gallery-main-image {
    z-index: 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    transition: opacity .2s ease
}

.route-gallery-main.is-changing .route-gallery-main-image {
    opacity: 0
}

.route-gallery-main.is-contain .route-gallery-main-image,
.route-gallery-main.is-pixel .route-gallery-main-image {
    object-fit: contain;
    box-sizing: border-box;
    padding: 12px
}

.route-gallery-main.is-pixel .route-gallery-main-image {
    image-rendering: pixelated
}

.route-gallery-open-label {
    z-index: 2;
    color: #fff;
    letter-spacing: .18em;
    background: rgb(20 63 82 / .7);
    padding: 7px 9px 6px;
    font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    position: absolute;
    right: 10px;
    bottom: 10px
}

/* 選択中のゲーム版・AIアニメ版を示す、透過なしの仮ラベル */
.route-gallery-type-label {
    z-index: 3;
    color: #fff;
    letter-spacing: .055em;
    text-align: left;
    white-space: nowrap;
    background: #168fbd;
    border-bottom: 3px solid #0d6f98;
    border-radius: 0 0 24px 0;
    box-sizing: border-box;
    min-width: clamp(175px, 42%, 270px);
    padding: 11px 25px 10px;
    font: 600 11px/1.25 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: absolute;
    top: 0;
    left: 0
}

.route-gallery-thumbs {
    scrollbar-width: thin;
    scrollbar-color: #89b4c6 transparent;
    overscroll-behavior-x: contain;
    gap: 7px;
    padding: 8px 1px 3px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden
}

.route-gallery-thumb {
    cursor: pointer;
    background: #d9e9f0;
    border: 1px solid transparent;
    flex: 0 0 78px;
    aspect-ratio: 16 / 10;
    padding: 2px;
    opacity: .56;
    transition: opacity .2s, border-color .2s, transform .2s, background-color .2s;
    overflow: hidden
}

.route-gallery-thumb:hover,
.route-gallery-thumb:focus-visible,
.route-gallery-thumb.is-current {
    opacity: 1;
    background: #fff;
    border-color: #5793ad;
    outline: none
}

.route-gallery-thumb:hover,
.route-gallery-thumb:focus-visible {
    transform: translateY(-2px)
}

.route-gallery-thumb img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.route-gallery-thumb[data-gallery-mode="pixel"] img {
    object-fit: contain;
    image-rendering: pixelated;
    background: #cfe5ed
}

/* 地域の基本情報と作品別記録 */
.route-location-copy {
    color: #385267;
    margin-top: 20px
}

.route-location-copy section + section {
    border-top: 1px solid rgb(96 143 164 / .24);
    margin-top: 21px;
    padding-top: 20px
}

.route-location-copy h4 {
    color: #4e8097;
    letter-spacing: .2em;
    margin: 0 0 10px;
    font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace
}

.route-location-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.95
}

.route-work-record + .route-work-record {
    margin-top: 17px
}

.route-work-title {
    color: #285b73;
    letter-spacing: .035em;
    margin-bottom: 6px !important;
    font-size: 11px !important
}

.route-work-title span {
    color: #5f93aa;
    margin-right: 3px
}

/* 作品別の記録を基本説明から分けて見せる */
.route-location-copy .route-story-record {
    background: rgb(226 243 249 / .72);
    border: 1px solid rgb(96 143 164 / .22);
    border-left: 3px solid rgb(91 151 176 / .55);
    margin-top: 23px;
    padding: 18px 20px 20px;
    box-sizing: border-box
}

.route-story-record h4 {
    margin-bottom: 14px
}

.world-patchwork {
    z-index: 2;
    position: relative
}

.section-intro {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto 58px
}

.world-intro-pixel {
    z-index: 2;
    width: 200px;
    image-rendering: pixelated;
    margin: 0 auto 46px;
    display: block;
    position: relative
}

.section-intro h2 {
    white-space: nowrap;
    font-size: clamp(24px, 4vw, 58px)
}

.section-intro h2,
.paper-panel h2,
.story-panel h2,
.archive-grid h2 {
    font-size: clamp(30px, 4.3vw, 58px)
}

.world-patchwork {
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
    display: grid
}

.world-card {
    color: #fff;
    background: #21465b;
    min-height: 280px;
    position: relative;
    overflow: hidden
}

.world-card:first-child,
.world-card:nth-child(4) {
    grid-column: span 7
}

.world-card:nth-child(2),
.world-card:nth-child(3) {
    grid-column: span 5
}

.world-card:nth-child(5),
.world-card:nth-child(6) {
    grid-column: span 6
}

.world-card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .7s
}

.world-card:hover img {
    transform: scale(1.025)
}

.world-card:after {
    content: "";
    background: linear-gradient(#0000, #061a27bf);
    position: absolute;
    inset: 35% 0 0
}

.world-card div {
    z-index: 2;
    position: absolute;
    bottom: 22px;
    left: 26px;
    right: 26px
}

.world-card small {
    letter-spacing: .2em;
    font: 8px/1 ui-monospace, monospace
}

.world-card h3 {
    letter-spacing: .1em;
    margin: 7px 0 3px;
    font-size: 25px;
    font-weight: 400
}

.world-card p {
    margin: 0;
    font-size: 11px
}

.other-worlds {
    z-index: 2;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 28px;
    display: grid;
    position: relative
}

.other-worlds article {
    color: #fff;
    background: #183a4c;
    min-height: 245px;
    position: relative;
    overflow: hidden
}

.other-worlds img {
    object-fit: cover;
    opacity: .65;
    width: 100%;
    height: 100%
}

.other-worlds article>div {
    position: absolute;
    inset: auto 18px 17px
}

.other-worlds h3 {
    margin: 0 0 7px;
    font-size: 20px;
    font-weight: 400
}

.other-worlds p {
    margin: 0;
    font-size: 10px;
    line-height: 1.7
}

.summon-section,
.story-section {
    place-items: center;
    min-height: 82vh;
    padding: 90px 6vw;
    display: grid;
    position: relative;
    overflow: hidden
}

.summon-backdrop {
    filter: blur(11px);
    background-image: linear-gradient(#051e3452, #041d317a), url('../images/zero/locations/vaiorn/vaiorn-temple.webp');
    transform: scale(1.04)
}

.paper-panel,
.story-panel {
    z-index: 2;
    background: #f8fdffe6;
    width: min(650px, 90vw);
    padding: clamp(38px, 6vw, 72px);
    position: relative;
    box-shadow: 0 25px 90px #0016285c
}

.paper-panel a {
    letter-spacing: .12em;
    border-bottom: 1px solid #8daab8;
    gap: 28px;
    margin-top: 35px;
    padding-bottom: 7px;
    font-size: 11px;
    display: inline-flex
}

.characters-section {
    color: #fff;
    background: #203a4c;
    padding: 120px 0
}

.characters-section .section-intro {
    width: min(1200px, 100% - 12vw);
    margin-left: auto;
    margin-right: auto
}

.section-intro.dark>p:last-child {
    color: #c8d6de
}

.name-ribbon {
    border-top: 1px solid #fff3;
    border-bottom: 1px solid #fff3;
    margin-top: 58px;
    display: flex;
    overflow-x: auto
}

.name-ribbon span {
    letter-spacing: .12em;
    border-right: 1px solid #fff3;
    flex: 1 0 220px;
    padding: 29px 32px;
    font-size: 25px
}

.name-ribbon small {
    color: #8cc5df;
    margin-bottom: 12px;
    font: 8px/1 ui-monospace, monospace;
    display: block
}

.character-browser {
    width: min(1200px, 88vw);
    margin: 55px auto 0
}

.character-tabs {
    scrollbar-color: #80bdd6 #ffffff1a;
    gap: 8px;
    padding-bottom: 10px;
    display: flex;
    overflow-x: auto
}

.character-tabs button {
    color: #fff;
    text-align: left;
    cursor: pointer;
    background: 0 0;
    border: 1px solid #ffffff2e;
    flex: 0 0 155px;
    align-items: center;
    gap: 10px;
    min-height: 86px;
    padding: 8px;
    display: flex
}

.character-tabs button.active {
    background: #7ec7e321;
    border-color: #91d3ed
}

.character-tabs img {
    object-fit: contain;
    width: 48px;
    height: 68px
}

.character-tabs span {
    letter-spacing: .08em;
    font: 12px/1.3 ui-monospace, monospace
}

.character-tabs small {
    color: #a9c5d3;
    letter-spacing: 0;
    margin-top: 7px;
    font: 8px/1.5 Yu Mincho, serif;
    display: block
}

.character-detail {
    color: #183047;
    background: #f5fbfd;
    grid-template-columns: minmax(230px, .7fr) 1.3fr;
    align-items: start;
    gap: 60px;
    min-height: 510px;
    margin-top: 18px;
    padding: 46px clamp(28px, 6vw, 80px);
    display: grid;
}

.character-art {
    place-items: start center;
    min-height: 600px;
    display: grid
}

.character-art img {
    object-fit: contain;
    max-width: 100%;
    max-height: 600px
}

.character-detail>div:last-child>small {
    color: #4f87a1;
    letter-spacing: .22em;
    font: 8px/1 monospace
}

.character-detail h3 {
    margin: 12px 0 23px;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400
}

.character-detail p {
    font-size: 13px;
    line-height: 2.2
}

.character-facts {
    flex-wrap: wrap;
    gap: 7px;
    margin: -9px 0 22px;
    padding: 0;
    list-style: none;
    display: flex
}

.character-facts li {
    color: #356b84;
    letter-spacing: .08em;
    border: 1px solid #b5d2df;
    padding: 6px 10px;
    font-size: 10px
}

.character-detail details {
    border-top: 1px solid #b9d3df;
    border-bottom: 1px solid #b9d3df;
    margin-top: 32px
}

.character-detail summary {
    cursor: pointer;
    padding: 17px 0
}

.character-detail summary span {
    color: #a04b4b;
    margin-top: 6px;
    font-size: 10px;
    display: block
}

.character-detail details p {
    color: #563c42;
    padding: 0 0 16px
}

.character-gallery {
    border-top: 1px solid #b9d3df;
    width: 100%;
    max-width: 100%;
    margin-top: 28px;
    padding: 20px 8px 0;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

.gallery-heading {
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    display: flex
}

.gallery-heading small {
    color: #4f87a1;
    letter-spacing: .2em;
    font: 9px/1 ui-monospace, monospace
}

.gallery-heading span {
    color: #718895;
    letter-spacing: .06em;
    font-size: 9px
}

/* スクロールバーを隠し、左右ボタンで送るカルーセル */
.gallery-carousel {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding-inline: 4px;
    box-sizing: border-box;
    display: grid;
}

.gallery-carousel.is-static {
    grid-template-columns: minmax(0, 1fr)
}

.gallery-track {
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 3px 2px 14px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.gallery-track::-webkit-scrollbar {
    display: none
}

.gallery-thumb {
    color: inherit;
    cursor: zoom-in;
    scroll-snap-align: start;
    background: #e4f0f5;
    border: 1px solid #c5dce6;
    flex: 0 0 112px;
    place-items: center;
    width: 112px;
    height: 112px;
    padding: 7px;
    transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
    display: grid;
    overflow: hidden
}

.gallery-thumb:hover,
.gallery-thumb:focus-visible {
    background: #d5eaf3;
    border-color: #5797b3;
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px #315f7424
}

.gallery-thumb img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
}

.gallery-nav {
    color: #356b84;
    cursor: pointer;
    background: #eef8fbd9;
    border: 1px solid #b9d6e2;
    border-radius: 999px;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0 0 2px;
    box-sizing: border-box;
    flex: 0 0 42px;
    font: 28px/1 Arial, sans-serif;
    transition: opacity .2s, background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
    display: grid;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 18px #315f7424;
}

.gallery-nav:hover,
.gallery-nav:focus-visible {
    color: #183f54;
    background: #dceff6;
    border-color: #72abc2;
    outline: none;
    transform: scale(1.06);
    box-shadow: 0 7px 18px #315f7429
}

.gallery-nav:active {
    transform: scale(.96)
}

.gallery-nav:disabled {
    opacity: .2;
    cursor: default;
    box-shadow: none;
    transform: none
}

.gallery-nav[hidden] {
    display: none
}

body.lightbox-open {
    overflow: hidden
}

.image-lightbox[hidden] {
    display: none
}

.image-lightbox {
    z-index: 500;
    color: #fff;
    background: #071724f2;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 10px;
    padding: 66px 22px 28px;
    display: grid;
    position: fixed;
    inset: 0
}

.lightbox-stage {
    grid-column: 2;
    grid-row: 1;
    place-items: center;
    min-width: 0;
    margin: 0;
    display: grid
}

.lightbox-image {
    object-fit: contain;
    max-width: 100%;
    max-height: calc(100vh - 145px);
    display: block;
    filter: drop-shadow(0 18px 45px #0009)
}

.lightbox-stage figcaption {
    justify-content: center;
    align-items: center;
    gap: 18px;
    min-height: 24px;
    margin-top: 12px;
    display: flex
}

.lightbox-caption {
    letter-spacing: .08em;
    font-size: 11px
}

.lightbox-count {
    color: #9bd0e5;
    letter-spacing: .14em;
    font: 10px/1 ui-monospace, monospace
}

.lightbox-close,
.lightbox-arrow {
    color: #fff;
    cursor: pointer;
    background: #16394d99;
    border: 1px solid #ffffff5c;
    transition: background-color .2s, border-color .2s
}

.lightbox-close:hover,
.lightbox-close:focus-visible,
.lightbox-arrow:hover,
.lightbox-arrow:focus-visible {
    background: #397a98;
    border-color: #fff;
    outline: none
}

.lightbox-close {
    width: 42px;
    height: 42px;
    font: 27px/1 Arial, sans-serif;
    position: absolute;
    top: 16px;
    right: 18px
}

.lightbox-arrow {
    width: 58px;
    height: 76px;
    font: 50px/1 Arial, sans-serif
}

.lightbox-prev {
    grid-column: 1;
    grid-row: 1
}

.lightbox-next {
    grid-column: 3;
    grid-row: 1
}

.lightbox-arrow[hidden] {
    display: none
}

.sub-character-area {
    margin-top: 80px
}

.sub-character-area>h3 {
    letter-spacing: .16em;
    font: 15px/1 ui-monospace, monospace
}

.sub-character-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
    display: grid
}

.sub-character-grid article {
    background: #ffffff12;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 104px;
    padding: 12px;
    display: grid
}

.sub-character-grid img {
    width: 80px;
    height: 80px
}

.sub-character-grid p {
    margin: 0;
    font-size: 13px
}

.sub-character-grid span {
    color: #c7d9e1;
    grid-column: 1/-1;
    font-size: 10px;
    line-height: 1.8
}

.story-backdrop {
    filter: blur(12px);
    background-image: linear-gradient(#f4f8fc66, #e1eef69e), url('../images/zero/worlds/higher-dimension.webp')
}

.chapter-dots {
    gap: 9px;
    margin-top: 40px;
    display: flex
}

.chapter-dots i {
    background: #aac7d5;
    width: 34px;
    height: 5px
}


/* =================================
   06 — THEME SONG
================================= */
.theme-song-section {
    color: #eaf4f8;
    background:
        radial-gradient(circle at 14% 18%, rgb(76 142 168 / .20), transparent 34%),
        linear-gradient(145deg, #17394d 0%, #102b3d 52%, #0c2232 100%);
    padding: 140px max(6vw, 50vw - 600px) 155px;
    position: relative;
    overflow: visible
}

.theme-song-section::before {
    display: none
}

.theme-song-grid {
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(58px, 8vw, 118px);
    display: grid;
    position: relative;
    z-index: 1
}

.theme-song-heading {
    align-self: start;
    position: sticky;
    top: 112px
}

.theme-song-heading .section-label {
    color: #74b7d1
}

.theme-song-heading h2 {
    color: #fff;
    max-width: 8.5em;
    margin: 0;
    font-size: clamp(31px, 4.1vw, 56px);
    line-height: 1.38
}

.theme-song-subtitle {
    color: #9fc3d1;
    letter-spacing: .08em;
    margin: 14px 0 0;
    font-size: 10px;
    line-height: 1.8
}

.theme-song-switch {
    color: #d7e8ef;
    border-color: rgb(159 205 222 / .42);
    margin-top: 34px
}

.theme-song-switch .bgm-switch-label {
    color: #b5d7e3
}

.theme-song-switch button {
    color: #8fb2c1
}

.theme-song-switch button:hover,
.theme-song-switch button:focus-visible,
.theme-song-switch button.is-active {
    color: #fff
}

.theme-song-switch button:focus-visible {
    outline-color: #b8e5f3
}

.theme-song-switch .bgm-switch-divider {
    color: #6f97a8
}

.theme-song-lyrics {
    border-top: 1px solid rgb(157 199 215 / .35);
    border-bottom: 1px solid rgb(157 199 215 / .35);
    min-width: 0;
    padding: 21px 0 34px;
    position: relative
}

.theme-song-lyrics::before {
    color: #9bc8da;
    content: "06";
    opacity: .045;
    pointer-events: none;
    font: 132px/.8 ui-monospace, monospace;
    position: absolute;
    top: 90px;
    right: -20px
}

.theme-song-lyrics-head,
.theme-song-lyrics-end {
    color: #8eb3c2;
    letter-spacing: .18em;
    align-items: center;
    gap: 14px;
    font: 8px/1 ui-monospace, monospace;
    display: flex
}

.theme-song-lyrics-head i,
.theme-song-lyrics-end i {
    background: rgb(151 194 210 / .45);
    height: 1px;
    flex: 1
}

.theme-song-lyrics-body {
    max-width: 650px;
    margin: 52px auto 0;
    position: relative
}

.theme-song-lyrics-body p {
    color: #dce9ee;
    text-wrap: pretty;
    margin: 0;
    font-size: 13px;
    line-height: 2.25
}

.theme-song-lyrics-body p + p {
    margin-top: 34px
}

.theme-song-lyrics-body .theme-song-ancient {
    color: #f1f8fa;
    letter-spacing: .045em;
    font-family: Georgia, "Times New Roman", serif
}

.theme-song-ancient span {
    color: #93b9c8;
    letter-spacing: 0;
    margin-left: .3em;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 11px
}

.theme-song-lyrics-end {
    margin-top: 50px
}

.theme-song-lyrics-end i {
    max-width: 86px
}

.archive-section-zero {
    background:
        linear-gradient(135deg, #f6fbfd 0%, #eef7fb 52%, #f9fcfd 100%);
    padding: 140px max(6vw, 50vw - 600px) 155px
}

.archive-grid {
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(58px, 8vw, 118px);
    display: grid
}

.afterword-heading {
    position: sticky;
    top: 112px
}

.afterword-heading h2 {
    max-width: 9.5em;
    font-size: clamp(30px, 4.2vw, 56px)
}

.afterword-intro {
    color: #536f82;
    max-width: 30em;
    margin: 28px 0 0;
    font-size: 12px;
    line-height: 2.1
}

.afterword-copy {
    border-top: 1px solid #8ca9ba66;
    border-bottom: 1px solid #8ca9ba66;
    min-width: 0;
    padding: 21px 0 34px;
    position: relative
}

.afterword-copy:before {
    color: #7ca3b8;
    content: "07";
    opacity: .045;
    pointer-events: none;
    font: 132px/.8 ui-monospace, monospace;
    position: absolute;
    top: 90px;
    right: -20px
}

.afterword-copy-head,
.afterword-end {
    color: #6c8798;
    letter-spacing: .18em;
    align-items: center;
    gap: 14px;
    font: 8px/1 ui-monospace, monospace;
    display: flex
}

.afterword-copy-head i,
.afterword-end i {
    background: #95afbe80;
    height: 1px;
    flex: 1
}

.afterword-body {
    max-width: 690px;
    margin: 52px auto 0;
    position: relative
}

.afterword-body p {
    color: #385267;
    text-wrap: pretty;
    margin: 0;
    font-size: 13px;
    line-height: 2.35
}

.afterword-body p + p {
    margin-top: 31px
}

.afterword-end {
    margin-top: 50px
}

.afterword-end i {
    max-width: 86px
}

[data-scroll-reveal] {
    opacity: 0;
    filter: blur(5px);
    transition: opacity .85s cubic-bezier(.2, .72, .2, 1), transform 1s cubic-bezier(.16, .78, .18, 1), filter .75s;
    transform: translateY(34px)
}

[data-scroll-reveal].is-visible {
    opacity: 1;
    filter: blur();
    transform: translateY(0)
}

.zero-footer {
    color: #fff;
    background: #132d40;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 280px;
    padding: 70px max(6vw, 50vw - 600px);
    display: flex
}

.zero-footer img {
    width: min(460px, 58vw)
}

.zero-footer a {
    letter-spacing: .12em;
    border-bottom: 1px solid #7e9aaa;
    padding-bottom: 5px;
    font-size: 10px
}

@media (width<=720px) {
    .zero-site {
        --intro-overlap: 110px;
        --intro-fade-soft: 24px;
        --intro-fade-mid: 68px
    }

    .zero-header {
        padding: 16px
    }

    body.menu-open::after {
        top: 10px;
        right: 12px
    }

    .back-home {
        max-width: 130px
    }

    .menu-button span {
        display: none
    }

    .movie-hero {
        min-height: auto;
        padding: 120px 16px calc(80px + var(--intro-overlap))
    }

    .zero-logo {
        width: 235px;
        top: 55px;
        left: 16px
    }

    .hero-note {
        display: none
    }

    .video-frame {
        width: 100%
    }

    .introduction-section {
        min-height: auto;
        padding-bottom: 88px
    }

    .introduction-sticky {
        height: auto;
        position: relative;
        top: auto;
        overflow: visible
    }


    .introduction-background {
        object-position: 66% center;
        height: calc(55vh + var(--intro-overlap))
    }

    .introduction-copy {
        width: calc(100% - 32px);
        margin: -45px 16px 0;
        padding: 30px 26px;
        position: relative;
        top: auto;
        left: auto
    }

    .intro-symbol-screen {
        height: 55vh;
        bottom: auto
    }

    .intro-symbol-mark {
        width: min(66vw, 360px);
        transform: translateY(-5vh)
    }

    .block-a {
        width: 66px;
        height: 66px;
        bottom: 25px;
        right: 12px
    }

    .block-b {
        display: none
    }

    .journey-section {
        padding:
            calc(85px + var(--intro-overlap))
            16px
            85px
    }

    .route-map-column {
        height: 100svh;
        margin-bottom: -100svh
    }

    .route-map-canvas {
        width: 1160px
    }

    .route-map-image {
        opacity: .16
    }

    .route-map-heading {
        width: calc(100% - 34px);
        top: 62px;
        left: 17px
    }

    .route-map-heading small {
        font-size: 7px
    }

    .route-current-name {
        max-width: 52%;
        font-size: 17px !important
    }

    .route-stop-number {
        display: none
    }

    .route-stop-name {
        font-size: 10px;
        letter-spacing: .1em
    }

    .route-timeline {
        width: calc(100% - 40px);
        margin-right: 18px;
        padding: 32vh 0 12vh
    }

    .route-chapter {
        width: min(360px, 92%);
        padding: 17px 15px 20px;
        opacity: .46;
        filter: none
    }

    .route-gallery-main {
        aspect-ratio: 16 / 10
    }

    .route-gallery-main.is-contain .route-gallery-main-image,
    .route-gallery-main.is-pixel .route-gallery-main-image {
        padding: 8px
    }

    .route-gallery-thumb {
        flex-basis: 66px
    }

    .route-location-copy p {
        font-size: 13px;
        line-height: 1.9
    }

    .route-location-copy .route-story-record {
        padding: 16px 15px 17px
    }

    .route-chapter-image,
    .route-chapter-images {
        margin-bottom: 15px
    }

    .route-chapter h3 {
        font-size: clamp(24px, 7vw, 32px)
    }

    .route-chapter > p {
        font-size: 13px;
        line-height: 1.9
    }

    .archive-section-zero {
        padding: 88px 18px 100px
    }

    .world-patchwork {
        display: block
    }

    .world-card {
        min-height: 230px;
        margin-bottom: 14px
    }

    .other-worlds {
        grid-template-columns: 1fr 1fr
    }

    .section-intro h2 {
        white-space: normal;
        font-size: clamp(23px, 8.2vw, 40px)
    }

    .characters-section .section-intro,
    .character-browser {
        width: calc(100% - 32px)
    }

    .character-detail {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 28px 20px
    }

    .character-art {
        min-height: 300px
    }

    .character-art img {
        max-height: 330px
    }

    .sub-character-grid {
        grid-template-columns: 1fr
    }

    .gallery-track figure {
        min-height: 330px
    }

    .summon-section,
    .story-section {
        min-height: 72vh;
        padding: 60px 16px
    }

    .archive-grid {
        display: block
    }

    .afterword-heading {
        position: static
    }

    .afterword-heading h2 {
        max-width: 10em;
        font-size: clamp(28px, 9vw, 42px)
    }

    .afterword-intro {
        margin-top: 22px
    }

    .afterword-copy {
        margin-top: 52px;
        padding-top: 18px
    }

    .afterword-copy:before {
        font-size: 86px;
        top: 76px;
        right: 0
    }

    .afterword-body {
        margin-top: 38px
    }

    .afterword-body p {
        font-size: 12px;
        line-height: 2.2
    }

    .afterword-body p + p {
        margin-top: 27px
    }

    .zero-footer {
        min-height: 230px;
        padding: 60px 20px;
        display: block
    }

    .zero-footer img {
        width: 100%
    }

    .zero-footer a {
        margin-top: 42px;
        display: inline-block
    }
}

@media (prefers-reduced-motion:reduce) {
    .zero-opening {
        animation-delay: .1s
    }

    .opening-line,
    .opening-title {
        animation-duration: .01ms
    }

    .world-card img {
        transition: none
    }

    .title-reveal:after {
        display: none
    }

    .title-reveal>h1,
    .title-reveal>h2 {
        opacity: 1;
        clip-path: none;
        animation: none
    }

    [data-scroll-reveal] {
        opacity: 1;
        filter: none;
        transition: none;
        transform: none
    }

    .route-path {
        stroke-dashoffset: 0
    }

    .route-stop {
        opacity: 1;
        transition: none
    }

    .route-stop-wave {
        display: none
    }

    .route-chapter {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none
    }

    .route-map-canvas {
        transform:
            translate(-50%, -50%)
            scale(1.16);
        will-change: auto
    }

    .route-leg-line,
    .route-leg-glow {
        stroke-dashoffset: 0 !important
    }

    .route-stop {
        opacity: .72;
        transition: none
    }

    .route-stop-wave {
        display: none
    }

    .route-chapter {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none
    }
}

@media (width<=720px) {
    .character-gallery {
        margin-top: 24px
    }

    .gallery-thumb {
        flex-basis: 92px;
        width: 92px;
        height: 92px
    }

    .gallery-carousel {
        grid-template-columns: 32px minmax(0, 1fr) 32px;
        gap: 6px
    }

    .gallery-carousel.is-static {
        grid-template-columns: minmax(0, 1fr)
    }

    .gallery-nav {
        width: 32px;
        height: 32px;
        font-size: 24px
    }

    .image-lightbox {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        gap: 4px;
        padding: 58px 5px 18px
    }

    .lightbox-arrow {
        width: 42px;
        height: 62px;
        font-size: 38px
    }

    .lightbox-image {
        max-height: calc(100vh - 125px)
    }

    .lightbox-stage figcaption {
        gap: 10px
    }

    .lightbox-caption {
        max-width: 65vw;
        font-size: 9px
    }
}

/* サブキャラクターのタグ */

.sub-character-grid article > img {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.sub-character-grid article > p {
    grid-column: 2;
    grid-row: 1;
}

.sub-character-tags {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.sub-character-tags li {
    color: #b9dce9;
    letter-spacing: .06em;
    border: 1px solid #ffffff38;
    background: #7ec7e314;
    padding: 4px 7px;
    font-size: 8px;
    line-height: 1.3;
}

.sub-character-grid article > span {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* キャラクター詳細の右列がギャラリーに押し広げられるのを防ぐ */
.character-detail > div:last-child {
    min-width: 0;
}

/* ギャラリーをキャラクターBOX内に収める */
.character-gallery,
.gallery-track {
    width: 100%;
    max-width: 100%
}

/* =================================
   01 — INTRODUCTION
   総合TOPの零ゼロと同じ光の粒
================================= */

.intro-light-effect {
    z-index: 1;
    opacity: var(--intro-mote-opacity);
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.intro-light-effect i {
    opacity: 0;
    display: block;
    position: absolute;
}

/*
 * 粒の形・発光・位置・動きは、先に読み込まれる
 * site-original.css の .light-mote と @keyframes mote-rise をそのまま使用。
 */
.intro-light-effect .light-mote {
    animation: 5.8s ease-in-out infinite mote-rise;
}

@media (prefers-reduced-motion: reduce) {
    .intro-light-effect {
        display: none;
    }
}

/* =================================
   INTRODUCTION スクロール紋章演出
================================= */

.intro-symbol-screen {
    z-index: 5;
    pointer-events: none;
    place-items: center;
    display: grid;
    position: absolute;
    inset: 0;
    overflow: visible
}

.intro-symbol-screen::before,
.intro-symbol-screen::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: calc(-1 * var(--intro-overlap));
    left: 0;
    right: 0;
    bottom: 0;

    /*
     * 上端と下端で同じマスク値を反転して使用。
     * 上：AIアニメ → INTRODUCTION
     * 下：INTRODUCTION → 世界設定
     */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / .08) var(--intro-fade-soft),
        rgb(0 0 0 / .48) var(--intro-fade-mid),
        #000 var(--intro-overlap),
        #000 calc(100% - var(--intro-overlap)),
        rgb(0 0 0 / .48) calc(100% - var(--intro-fade-mid)),
        rgb(0 0 0 / .08) calc(100% - var(--intro-fade-soft)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgb(0 0 0 / .08) var(--intro-fade-soft),
        rgb(0 0 0 / .48) var(--intro-fade-mid),
        #000 var(--intro-overlap),
        #000 calc(100% - var(--intro-overlap)),
        rgb(0 0 0 / .48) calc(100% - var(--intro-fade-mid)),
        rgb(0 0 0 / .08) calc(100% - var(--intro-fade-soft)),
        transparent 100%
    )
}

.intro-symbol-screen::before {
    z-index: 0;
    background: #fff;
    opacity: var(--intro-white-opacity)
}

.intro-symbol-screen::after {
    z-index: 1;
    background: linear-gradient(
        to bottom,
        #fff 0%,
        #fffffff5 42%,
        #ffffffe0 58%,
        #ffffff8c 76%,
        #ffffff00 100%
    );
    opacity: var(--intro-veil-opacity);
    transform: translateY(var(--intro-veil-shift));
    filter: blur(14px)
}

.intro-symbol-mark {
    z-index: 2;
    width: clamp(250px, 34vw, 500px);
    max-width: 72vw;
    max-height: 72vh;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    position: relative;
    transform: translateY(-25vh)
}

.intro-symbol-mark img {
    z-index: 2;
    opacity: var(--intro-symbol-opacity);
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    filter: drop-shadow(0 15px 30px #2c1c1217)
}

/*
 * 紋章が消える間だけ、白い細線が中心から波紋状に広がる。
 * 青灰色のごく薄い発光を添え、白背景上でも輪郭を失わないようにする。
 */
.intro-symbol-ripple {
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgb(255 255 255 / .96);
    border-radius: 50%;
    width: 42%;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    filter:
        drop-shadow(0 0 3px rgb(87 151 180 / .42))
        drop-shadow(0 0 10px rgb(255 255 255 / .52))
}

.ripple-one {
    opacity: var(--intro-ripple-one-opacity);
    transform:
        translate(-50%, -50%)
        scale(var(--intro-ripple-one-scale))
}

.ripple-two {
    opacity: var(--intro-ripple-two-opacity);
    transform:
        translate(-50%, -50%)
        scale(var(--intro-ripple-two-scale))
}

.ripple-three {
    opacity: var(--intro-ripple-three-opacity);
    transform:
        translate(-50%, -50%)
        scale(var(--intro-ripple-three-scale))
}

@media (prefers-reduced-motion: reduce) {
    .introduction-section {
        min-height: 100svh
    }

    .introduction-sticky {
        min-height: 100svh;
        position: relative
    }

    .intro-symbol-screen,
    .intro-symbol-ripple {
        display: none
    }

    .introduction-background,
    .introduction-copy,
    .introduction-section .glass-block,
    .intro-light-effect {
        opacity: 1
    }

    .introduction-copy {
        filter: none;
        transform: none
    }
}

/* WORLD SETTING冒頭の余白を縮める */
@media (min-width: 769px) {
    /* ドット絵より上の空間 */
    .journey-section {
        padding-top: calc(60px + var(--intro-overlap))
    }

    /* ドット絵と「02 — WORLD SETTING」の間 */
    .journey-section > .world-intro-pixel {
        margin-bottom: 24px
    }

    /* 大見出し部分とMAP部分の間 */
    .journey-section > .section-intro {
        margin-bottom: 30px
    }

    /* 大見出しと、その下の説明文の間 */
    .journey-section > .section-intro > p:last-child {
        margin-top: 16px
    }

    /* 左側の「01 / 09」を早めに表示 */
    .route-map-heading {
        top: clamp(38px, 5vh, 60px)
    }

    /* 右側の最初のカードを早めに表示 */
    .route-timeline {
        padding-top: 8vh
    }
}

/* =================================
   WORLD MAP — GRID + HEADING COMPASS
   MAP下の座標グリッドと見出し右側の方位記号
================================= */

/* MAPと同じ座標系で移動・拡大するグリッド */
.route-map-canvas::before {
    z-index: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            to right,
            rgb(73 130 154 / .14) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgb(73 130 154 / .14) 1px,
            transparent 1px
        ),
        linear-gradient(
            to right,
            rgb(73 130 154 / .24) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgb(73 130 154 / .24) 1px,
            transparent 1px
        );
    background-size:
        52px 52px,
        52px 52px,
        260px 260px,
        260px 260px;
    background-position: center
}

/* グリッド → MAP画像 → ルートの順に重ねる */
.route-map-image {
    z-index: 1
}

.route-journey-overlay {
    z-index: 3
}

/* 方位記号をWORLD SETTING見出し右側の背景装飾として置く */
.journey-section > .section-intro {
    position: relative;
    isolation: isolate;
    overflow: visible
}

.journey-section > .section-intro > .section-label,
.journey-section > .section-intro > .title-reveal {
    z-index: 1;
    position: relative
}

.route-map-compass {
    z-index: 0;
    color: #4f89a2;
    opacity: .27;
    pointer-events: none;
    width: clamp(380px, 29vw, 520px);
    max-width: none;
    height: auto;
    position: absolute;
    top: 46%;
    right: clamp(-190px, -9vw, -105px);
    transform: translateY(-50%) rotate(-7deg);
    overflow: visible;
    filter:
        drop-shadow(0 0 3px rgb(255 255 255 / .92))
        drop-shadow(0 0 14px rgb(255 255 255 / .5))
}

.route-map-compass circle,
.route-map-compass path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke
}

.route-map-compass-cross {
    opacity: .72
}

.route-map-compass-diagonal {
    opacity: .4
}

.route-map-compass-star {
    stroke-width: 2.4 !important
}

.route-map-compass-needle {
    fill: rgb(79 137 162 / .18) !important;
    stroke-width: 2.1 !important
}

.route-map-compass text {
    fill: currentColor;
    stroke: rgb(239 250 253 / .78);
    stroke-width: 2.4px;
    paint-order: stroke fill;
    text-anchor: middle;
    dominant-baseline: middle;
    letter-spacing: .12em;
    font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace
}

.route-map-compass text:first-of-type {
    transform: translateY(2px)
}

@media (width <= 720px) {
    .route-map-canvas::before {
        background-size:
            44px 44px,
            44px 44px,
            220px 220px,
            220px 220px
    }

    .journey-section > .section-intro .route-map-compass {
        display: none
    }
}


@media (max-width: 600px) {
    .route-gallery-type-label {
        border-radius: 0 0 18px 0;
        min-width: 58%;
        padding: 9px 16px 8px;
        font-size: 9px
    }
}

/* =================================
   SUMMONING — SIMPLE WORLD GUIDE
================================= */
.summon-section {
    place-items: center;
    min-height: 82vh;
    padding: 90px 6vw;
    display: grid;
    position: relative;
    overflow: hidden;
}

.summon-guide {
    z-index: 2;
    color: #153246;
    background: #f8fdffe6;
    width: min(650px, 90vw);
    padding: clamp(38px, 6vw, 72px);
    position: relative;
    box-shadow: 0 25px 90px #0016285c;
}

.summon-guide-header {
    margin-bottom: clamp(28px, 4vw, 38px);
}

.summon-guide-header .section-label {
    min-height: 1.3em;
    margin-bottom: 12px;
}

.summon-guide-system {
    color: #4e829a;
    letter-spacing: .2em;
    min-height: 1.4em;
    margin: 0;
    font: 9px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.summon-rulebook,
.summon-rule-viewport {
    min-width: 0;
}

.summon-rule-viewport {
    overflow: hidden;
    cursor: pointer;
    touch-action: pan-y;
}

.summon-rule-track {
    display: grid;
}

.summon-rule-slide {
    grid-area: 1 / 1;
    display: block;
    min-width: 0;
    padding: 9px 14px 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.summon-rule-slide.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    animation: summon-page-in .42s cubic-bezier(.22, .75, .26, 1) both;
}

@keyframes summon-page-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.summon-rule-slide .title-reveal {
    margin-bottom: 22px;
}

.summon-rule-slide h2 {
    color: #183e53;
    letter-spacing: .08em;
    margin: 0;
    font-size: clamp(30px, 4.3vw, 58px);
    font-weight: 400;
    line-height: 1.5;
}

.summon-rule-subtitle {
    color: #183e53;
    letter-spacing: .12em;
    margin: 0 0 24px;
    font-size: clamp(21px, 2.6vw, 30px);
    font-weight: 400;
    line-height: 1.5;
}

.summon-rule-slide > p {
    color: #385267;
    margin: 0;
    font-size: 13px;
    line-height: 2.25;
}

.summon-rule-slide > p + p {
    margin-top: 12px;
}

.summon-rule-facts {
    margin: 8px 0 0;
}

.summon-rule-facts > div {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    border-top: 1px solid #d7e4eb;
    padding: 12px 0;
}

.summon-rule-facts dt {
    color: #183e53;
    letter-spacing: .12em;
    font-size: 11px;
}

.summon-rule-facts dd {
    color: #385267;
    margin: 0;
    font-size: 13px;
    line-height: 2.15;
}

.summon-simple-list {
    margin: 22px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.summon-simple-list div {
    border-top: 1px solid #d7e4eb;
    padding: 10px 0 12px;
}

.summon-simple-list dt {
    color: #183e53;
    letter-spacing: .08em;
    font-size: 12px;
}

.summon-simple-list dd {
    color: #385267;
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 2;
}

.summon-magic-groups {
    margin-top: 24px;
    display: grid;
    gap: 20px;
}

.summon-magic-group {
    border-top: 1px solid #afcbd8;
    padding-top: 12px;
}

.summon-magic-group > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.summon-magic-group h4 {
    color: #183e53;
    letter-spacing: .12em;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
}

.summon-magic-group small {
    color: #78909c;
    letter-spacing: .08em;
    font-size: 8px;
}

.summon-magic-group--holy {
    border-top-color: #8ebfd3;
}

.summon-spell-list {
    margin: 0;
}

.summon-spell-list > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    border-top: 1px solid #dce8ed;
    padding: 8px 0;
}

.summon-spell-list dt {
    color: #1d5874;
    font-size: 10px;
}

.summon-spell-list dd {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
}

.summon-spell-list dd span {
    color: #385267;
    font-size: 12px;
    line-height: 1.75;
}

.summon-rule-footer {
    width: 100%;
    margin-top: 36px;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.summon-rule-nav {
    display: flex;
    justify-content: flex-start;
    gap: 9px;
    margin: 0;
}

.summon-rule-nav button {
    background: transparent;
    border: 0;
    width: 34px;
    height: 18px;
    padding: 0;
    cursor: pointer;
    display: grid;
    align-items: end;
}

.summon-rule-nav i {
    background: #aac7d5;
    width: 34px;
    height: 5px;
    display: block;
    transition: background-color .25s ease, transform .25s ease;
}

.summon-rule-nav button:hover i,
.summon-rule-nav button:focus-visible i,
.summon-rule-nav button.is-active i {
    background: #24779b;
}

.summon-rule-nav button.is-active i {
    transform: scaleY(1.08);
}

.summon-rule-count {
    color: #6e8794;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    margin: 0 0 4px auto;
    font: 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    display: flex;
    flex: 0 0 auto;
}

.summon-rule-count span {
    color: #1f6d91;
    font-size: 11px;
}

.summon-rule-count i {
    background: #9db9c7;
    width: 42px;
    height: 1px;
}

.summon-rule-count b {
    color: #6e8794;
    font-weight: 400;
}

@media (max-width: 680px) {
    .summon-section {
        min-height: auto;
        padding: 62px 16px;
    }

    .summon-guide {
        width: 100%;
        padding: 38px 22px 30px;
    }

    .summon-rule-slide {
        padding: 9px 0 0;
    }

    .summon-rule-slide h2 {
        font-size: clamp(30px, 9vw, 44px);
    }

    .summon-simple-list {
        grid-template-columns: 1fr;
    }

    .summon-spell-list dd {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .summon-rule-footer {
        margin-top: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .summon-rule-slide.is-active {
        animation: none;
    }
}


/* =================================
   STORY — NOVEL RECORD GUIDE
================================= */
.story-guide {
    background: #f8fdffe8;
}

.story-guide-header {
    margin-bottom: clamp(24px, 3.6vw, 34px);
}

.story-rule-slide {
    padding-top: 6px;
}

.story-rule-slide .title-reveal {
    margin-bottom: 20px;
}

.story-rule-slide > p {
    color: #385267;
    margin: 0;
    font-size: 13px;
    line-height: 2.25;
}

.story-rule-slide > p + p {
    margin-top: 13px;
}

.story-intro-note {
    color: #6f8794 !important;
    border-top: 1px solid #d7e4eb;
    margin-top: 24px !important;
    padding-top: 14px;
    font-size: 10px !important;
    letter-spacing: .04em;
}

.story-episode-meta {
    display: flex;
    align-items: baseline;
    gap: 13px;
    margin: 0 0 13px !important;
    color: #688392 !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    line-height: 1.5 !important;
}

.story-episode-meta span {
    color: #1f6d91;
    letter-spacing: .12em;
    font-size: 10px;
}

.story-episode-meta small {
    letter-spacing: .08em;
    font-size: 9px;
}

.story-dialogue {
    border: 0;
    border-top: 1px solid #afcbd8;
    margin: 25px 0 0;
    padding: 14px 0 0;
}

.story-dialogue small {
    color: #4e829a;
    letter-spacing: .2em;
    font: 8px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.story-dialogue p {
    color: #1e4054;
    margin: 9px 0 0;
    font-size: 12px;
    line-height: 1.95;
}

.story-dialogue p + p {
    margin-top: 3px;
}

.story-rule-footer {
    min-width: 0;
}

.story-rule-nav {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 90px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 3px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.story-rule-nav::-webkit-scrollbar {
    display: none;
}

.story-rule-nav button {
    flex: 0 0 24px;
    width: 24px;
}

.story-rule-nav i {
    width: 24px;
}

.story-rule-count {
    margin-left: 0;
}

@media (max-width: 680px) {
    .story-rule-nav {
        max-width: calc(100% - 72px);
        gap: 7px;
    }

    .story-rule-nav button,
    .story-rule-nav i {
        width: 20px;
    }

    .story-rule-nav button {
        flex-basis: 20px;
    }

    .story-episode-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}


/* WORLD SETTING: カード幅は変えず、デスクトップ時のみ合計40px右へ寄せる */
@media (min-width: 721px) {
    .route-timeline {
        margin-right: max(calc(5vw - 40px), calc(50vw - 720px));
    }
}

/* STORY dialogue: speaker-led excerpts */
.story-dialogue p {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.story-speaker {
    color: #6b8795;
    letter-spacing: .08em;
    white-space: nowrap;
    padding-top: 1px;
    font: 9px/1.95 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.story-line {
    min-width: 0;
}

@media (max-width: 520px) {
    .story-dialogue p {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 8px;
    }

    .story-speaker {
        font-size: 8px;
    }
}


/* =================================
   STORY — OVERLAPPING PHOTO LAYERS
   設定画面から各ページ最大3枚まで配置
================================= */
.story-rulebook,
.story-rule-track,
.story-rule-slide {
    overflow: visible;
}

.story-rule-viewport {
    overflow: visible;
}

.story-rule-slide {
    position: relative;
}

.story-photo-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.story-photo {
    --story-photo-width: 340px;
    --story-photo-x: 0px;
    --story-photo-y: 0px;
    --story-photo-rotate: 0deg;
    --story-photo-z: 1;
    --story-photo-anchor-x: 0%;
    --story-photo-anchor-y: 0%;
    position: absolute;
    z-index: var(--story-photo-z);
    width: min(var(--story-photo-width), 56vw);
    max-width: none;
    margin: 0;
    padding: clamp(5px, .7vw, 9px);
    background: #fff;
    box-shadow: 0 10px 18px rgba(6, 28, 42, .28), 0 2px 4px rgba(6, 28, 42, .16);
    transform: translate(
        calc(var(--story-photo-anchor-x) + var(--story-photo-x)),
        calc(var(--story-photo-anchor-y) + var(--story-photo-y))
    ) rotate(var(--story-photo-rotate));
    transform-origin: center;
}

.story-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
}

.story-photo[data-position="right-top"] {
    left: calc(100% - 18px);
    top: -8px;
}

.story-photo[data-position="right-center"] {
    left: calc(100% - 18px);
    top: 50%;
    --story-photo-anchor-y: -50%;
}

.story-photo[data-position="right-bottom"] {
    left: calc(100% - 18px);
    bottom: -8px;
}

.story-photo[data-position="left-top"] {
    right: calc(100% - 18px);
    top: -8px;
}

.story-photo[data-position="left-center"] {
    right: calc(100% - 18px);
    top: 50%;
    --story-photo-anchor-y: -50%;
}

.story-photo[data-position="left-bottom"] {
    right: calc(100% - 18px);
    bottom: -8px;
}

.story-photo[data-position="center-top"] {
    left: 50%;
    top: -8px;
    --story-photo-anchor-x: -50%;
}

.story-photo[data-position="center"] {
    left: 50%;
    top: 50%;
    --story-photo-anchor-x: -50%;
    --story-photo-anchor-y: -50%;
}

.story-photo[data-position="center-bottom"] {
    left: 50%;
    bottom: -8px;
    --story-photo-anchor-x: -50%;
}

@media (max-width: 760px) {
    .story-rule-viewport {
        overflow: hidden;
    }

    .story-photo-layer {
        position: relative;
        inset: auto;
        display: flex;
        align-items: flex-start;
        gap: 0;
        margin-top: 24px;
        padding: 10px 4px 14px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: thin;
        pointer-events: auto;
    }

    .story-photo {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        flex: 0 0 auto;
        width: min(var(--story-photo-width), 72vw);
        max-width: 72vw;
        margin-left: -14px;
        transform: rotate(var(--story-photo-rotate));
    }

    .story-photo:first-child {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-photo {
        transition: none;
    }
}

/* =================================
   TABLET / SMARTPHONE LAYOUT
   PC表示は維持し、800px以下のみ読みやすい通常スクロールへ切り替える
================================= */
@media (max-width: 800px) {
    .zero-site {
        --intro-overlap: 0px;
        --intro-fade-soft: 0px;
        --intro-fade-mid: 0px;
    }

    /* AIアニメ欄：ロゴと動画の間隔を確保し、次のセクションへ素直につなぐ */
    .movie-hero {
        min-height: auto;
        padding: clamp(132px, 17svh, 172px) 20px 94px;
    }

    .zero-logo {
        width: min(300px, 62vw);
        top: 76px;
        left: 20px;
    }

    .video-frame {
        width: min(920px, 100%);
    }

    .down-guide {
        bottom: 30px;
        right: 22px;
    }

    /* INTRODUCTION：スマホではスクロール量に依存するぼかし演出を使わない */
    .introduction-section {
        min-height: 0;
        padding: 0;
        background: #effaff;
        overflow: hidden;
    }

    .introduction-sticky {
        min-height: 0;
        display: grid;
        grid-template-rows: auto;
        position: relative;
        overflow: hidden;
    }

    .introduction-sticky::before {
        display: none;
    }

    .intro-symbol-screen {
        display: none;
    }

    .introduction-background {
        opacity: 1 !important;
        object-position: 67% center;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .introduction-copy {
        grid-row: 1;
        opacity: 1 !important;
        filter: none !important;
        width: min(620px, calc(100% - 40px));
        margin: 0 auto;
        padding: clamp(68px, 9vw, 94px) clamp(26px, 6vw, 52px) clamp(70px, 10vw, 104px);
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none !important;
    }

    .introduction-copy::before {
        inset: 0 -18px;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(
            to bottom,
            rgb(255 255 255 / .18) 0%,
            rgb(255 255 255 / .76) 18%,
            rgb(255 255 255 / .94) 62%,
            #fff 100%
        );
        box-shadow: none;
    }

    .introduction-copy .title-reveal > h1 {
        opacity: 1;
        clip-path: none;
        transform: none;
        animation: none;
    }

    .introduction-copy .title-reveal::after {
        display: none;
    }

    .intro-light-effect {
        opacity: .72 !important;
        top: 0;
    }

    .introduction-section .glass-block {
        display: none;
    }

    /* INTRODUCTION後の大きな空白をなくす */
    .journey-section {
        margin-top: 0;
        padding: 64px 20px 82px;
    }

    .journey-section > .world-intro-pixel {
        width: 170px;
        margin-bottom: 26px;
    }

    .journey-section > .section-intro {
        margin-bottom: 34px;
    }

    .route-map-compass {
        width: clamp(260px, 42vw, 380px);
        right: clamp(-145px, -11vw, -80px);
        opacity: .19;
    }

    /* 大きいコンテナに付いたrevealが、要素全体の高さのせいで発火しない問題を回避 */
    .character-browser[data-scroll-reveal],
    .summon-guide[data-scroll-reveal],
    .story-guide[data-scroll-reveal] {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }

    /* CHARACTERS：見出し直後にタブと詳細を表示 */
    .characters-section {
        padding: 76px 0 88px;
    }

    .characters-section .section-intro {
        width: min(920px, calc(100% - 40px));
        margin-bottom: 30px;
    }

    .characters-section .section-intro .title-reveal > h2 {
        opacity: 1;
        clip-path: none;
        transform: none;
        animation: none;
    }

    .characters-section .section-intro .title-reveal::after {
        display: none;
    }

    .character-browser {
        width: min(920px, calc(100% - 40px));
        margin-top: 0;
    }

    .character-detail {
        gap: clamp(26px, 5vw, 48px);
        min-height: 0;
        padding: clamp(30px, 5vw, 52px);
    }

    .character-art {
        min-height: 0;
    }

    .character-art img {
        max-height: 600px;
    }

    /* 03・05：ページ切替ではなく、全項目を上から順に読むレイアウト */
    .summon-section,
    .story-section {
        min-height: 0;
        place-items: stretch center;
        padding: 76px 20px 88px;
        overflow: hidden;
    }

    .summon-guide {
        width: min(760px, 100%);
        padding: clamp(34px, 5.5vw, 58px);
    }

    .summon-rule-viewport,
    .story-rule-viewport {
        overflow: visible;
        cursor: default;
        touch-action: auto;
    }

    .summon-rule-track,
    .story-rule-track {
        display: block;
    }

    .summon-rule-slide,
    .story-rule-slide {
        grid-area: auto;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        min-height: 0 !important;
        padding: 4px 0 0;
        transform: none !important;
        animation: none !important;
    }

    .summon-rule-slide + .summon-rule-slide,
    .story-rule-slide + .story-rule-slide {
        border-top: 0;
        margin-top: 48px;
        padding-top: 50px;
        position: relative;
    }

    .summon-rule-slide + .summon-rule-slide::before,
    .story-rule-slide + .story-rule-slide::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(90deg, #4d91ad 0 22%, #a9cbd9 22% 100%);
        box-shadow: 0 8px 0 -7px rgb(77 145 173 / .5);
    }

    .summon-guide .title-reveal > h2,
    .story-guide .title-reveal > h2 {
        opacity: 1;
        clip-path: none;
        transform: none;
        animation: none;
    }

    .summon-guide .title-reveal::after,
    .story-guide .title-reveal::after {
        display: none;
    }

    .summon-rule-footer,
    .story-rule-footer {
        display: none;
    }

    .summon-rule-subtitle {
        margin-top: 0;
    }

    .summon-simple-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 呪文は縦一列へ落とさず、属性名＋3段階を横並びのまま保つ */
    .summon-spell-list > div {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
    }

    .summon-spell-list dd {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .summon-spell-list dd span {
        white-space: nowrap;
        font-size: clamp(9px, 1.6vw, 12px);
        letter-spacing: -.035em;
    }

    /* STORY画像は各章の直後に、小さな横スクロール列として置く */
    .story-photo-layer {
        position: relative;
        inset: auto;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 22px;
        padding: 8px 2px 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        pointer-events: auto;
    }

    .story-photo {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        flex: 0 0 auto;
        width: min(var(--story-photo-width), 230px);
        max-width: min(42vw, 230px);
        margin: 0;
        padding: 5px;
        transform: rotate(var(--story-photo-rotate));
    }

    .story-photo img {
        max-height: 180px;
    }
}

@media (max-width: 720px) {
    .movie-hero {
        padding: 126px 14px 82px;
    }

    .zero-logo {
        width: min(250px, 64vw);
        top: 72px;
        left: 16px;
    }

    .introduction-copy {
        width: calc(100% - 28px);
        padding: 58px 24px 72px;
    }

    .introduction-copy::before {
        inset: 0 -8px;
    }

    .journey-section {
        padding: 52px 16px 72px;
    }

    .journey-section > .world-intro-pixel {
        width: 150px;
        margin-bottom: 20px;
    }

    .characters-section {
        padding: 64px 0 74px;
    }

    .characters-section .section-intro,
    .character-browser {
        width: calc(100% - 28px);
    }

    .characters-section .section-intro {
        margin-bottom: 24px;
    }

    .character-tabs {
        margin-bottom: 12px;
    }

    .character-tabs button {
        flex-basis: 138px;
        min-height: 76px;
    }

    /* スマホでも立ち絵を先に見せ、その下にプロフィールを置く */
    .character-detail {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 27px 21px 30px;
    }

    .character-art {
        order: 1;
        min-height: 0;
        margin: 0 0 28px;
    }

    .character-detail > div:last-child {
        order: 2;
    }

    .character-art img {
        max-height: 600px;
    }

    .character-detail h3 {
        margin-top: 10px;
        font-size: clamp(28px, 8vw, 40px);
    }

    .summon-section,
    .story-section {
        padding: 60px 12px 72px;
    }

    .summon-guide {
        width: 100%;
        padding: 34px 20px 38px;
    }

    .summon-rule-slide + .summon-rule-slide,
    .story-rule-slide + .story-rule-slide {
        margin-top: 42px;
        padding-top: 46px;
    }

    .summon-simple-list {
        grid-template-columns: 1fr 1fr;
        gap: 0 12px;
    }

    .summon-spell-list > div {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 5px;
        padding: 7px 0;
    }

    .summon-spell-list dd {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px;
    }

    .summon-spell-list dd span {
        font-size: clamp(8px, 2.35vw, 10.5px);
        letter-spacing: -.07em;
    }

    .story-photo {
        width: min(var(--story-photo-width), 190px);
        max-width: 46vw;
    }

    .story-photo img {
        max-height: 150px;
    }
}

/* 画像を持つSTORYがグリッドの最小幅に引っ張られないようにする */
@media (max-width: 800px) {
    .summon-guide,
    .story-guide {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    .story-rulebook,
    .story-rule-viewport,
    .story-rule-track,
    .story-rule-slide,
    .story-photo-layer {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .character-detail h3 {
        word-break: keep-all;
        overflow-wrap: normal;
        font-size: clamp(26px, 6.5vw, 34px);
        line-height: 1.55;
    }
}

@media (max-width: 800px) {
    .movie-hero {
        padding-top: clamp(176px, 20svh, 210px);
    }
}

@media (max-width: 720px) {
    .movie-hero {
        padding-top: 170px;
    }
}

/* =================================
   BGM SWITCH / CREDITS
================================= */
.bgm-switch {
    color: #456d84;
    border: 1px solid rgb(91 140 163 / .45);
    width: fit-content;
    margin: 24px 0 26px;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    display: flex;
    position: relative;
    z-index: 2
}

.bgm-switch-label {
    color: #315f76;
    letter-spacing: .18em;
    margin-right: 5px;
    font: 9px/1 ui-monospace, monospace
}

.bgm-switch button {
    color: #7a96a5;
    background: transparent;
    border: 0;
    padding: 2px 3px;
    cursor: pointer;
    letter-spacing: .12em;
    font: 10px/1 ui-monospace, monospace;
    transition: color .2s, opacity .2s
}

.bgm-switch button:hover,
.bgm-switch button:focus-visible,
.bgm-switch button.is-active {
    color: #0b759e
}

.bgm-switch button.is-active {
    text-decoration: underline;
    text-underline-offset: 4px
}

.bgm-switch button:focus-visible {
    outline: 1px solid #0b759e;
    outline-offset: 3px
}

.bgm-switch-divider {
    color: #9ab2bf;
    font: 9px/1 ui-monospace, monospace
}

.afterword-credits {
    border-top: 1px solid rgb(120 157 177 / .32);
    max-width: 34em;
    margin-top: 42px;
    padding-top: 18px
}

.afterword-credits-title {
    color: #6d91a5;
    letter-spacing: .22em;
    margin: 0 0 17px;
    font: 8px/1 ui-monospace, monospace
}

.afterword-credits dl,
.afterword-credits dd {
    margin: 0
}

.afterword-credits dl > div {
    grid-template-columns: 5.5em minmax(0, 1fr);
    gap: 10px;
    display: grid
}

.afterword-credits dl > div + div {
    margin-top: 10px
}

.afterword-credits dt {
    color: #7893a3;
    letter-spacing: .08em;
    font-size: 10px;
    line-height: 1.8
}

.afterword-credits dd {
    color: #476579;
    font-size: 10px;
    line-height: 1.8
}

.zero-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    display: grid
}

.zero-footer-meta {
    align-self: end;
    justify-self: end
}

.zero-ai-note {
    color: rgb(255 255 255 / .55);
    grid-column: 1 / -1;
    margin: 42px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgb(255 255 255 / .12);
    letter-spacing: .08em;
    font-size: 8px;
    line-height: 1.8
}

@media (max-width: 800px) {
    .bgm-switch {
        margin-top: 20px
    }
}

@media (max-width: 720px) {
    .afterword-credits {
        margin-top: 34px
    }

    .afterword-credits dl > div {
        grid-template-columns: 5em minmax(0, 1fr)
    }

    .zero-footer {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        display: grid
    }

    .zero-footer-meta {
        justify-self: start;
        margin-top: 42px
    }

    .zero-footer a {
        margin-top: 0
    }

    .zero-ai-note {
        grid-column: 1;
        margin-top: 34px
    }
}



@media (max-width: 800px) {
    .theme-song-section {
        padding: 88px 18px 100px
    }

    .theme-song-grid {
        display: block
    }

    .theme-song-heading {
        position: static
    }

    .theme-song-heading h2 {
        max-width: none;
        font-size: clamp(28px, 8.7vw, 42px)
    }

    .theme-song-subtitle {
        margin-top: 10px;
        font-size: 9px
    }

    .theme-song-switch {
        margin-top: 26px
    }

    .theme-song-lyrics {
        margin-top: 52px;
        padding-top: 18px
    }

    .theme-song-lyrics::before {
        font-size: 86px;
        top: 76px;
        right: 0
    }

    .theme-song-lyrics-body {
        margin-top: 38px
    }

    .theme-song-lyrics-body p {
        font-size: 12px;
        line-height: 2.2
    }

    .theme-song-lyrics-body p + p {
        margin-top: 29px
    }

    .theme-song-ancient span {
        display: block;
        margin: 1px 0 0;
        font-size: 10px;
        line-height: 1.9
    }
}

/* Dark theme-song player overrides the default light-section switch colors. */
.theme-song-switch button {
    color: #8fb2c1
}

.theme-song-switch button:hover,
.theme-song-switch button:focus-visible,
.theme-song-switch button.is-active {
    color: #fff
}

.theme-song-switch button:focus-visible {
    outline-color: #b8e5f3
}

/* AI content disclosure in the afterword credit column */
.afterword-disclosure {
    border-top: 1px solid rgb(120 157 177 / .24);
    margin-top: 22px;
    padding-top: 17px
}

.afterword-disclosure-title {
    color: #6d91a5;
    letter-spacing: .18em;
    margin: 0 0 12px;
    font: 8px/1 ui-monospace, monospace
}

.afterword-disclosure p:not(.afterword-disclosure-title) {
    color: #587286;
    margin: 0;
    font-size: 10px;
    line-height: 1.9
}

.afterword-disclosure p:not(.afterword-disclosure-title) + p {
    margin-top: 8px
}

/* =================================
   GOOGLE DRIVE AUDIO PLAYERS
   The Drive preview iframe replaces the former custom BGM switch.
================================= */
.drive-audio-player {
    width: 100%;
    max-width: 410px;
    margin-top: 28px;
}

.drive-audio-frame {
    display: block;
    width: 100%;
    height: 80px;
    border: 0;
    border-radius: 7px;
    background: #171717;
    overflow: hidden;
}

.theme-song-heading .drive-audio-player {
    max-width: 360px;
    margin-top: 30px;
}

@media (max-width: 800px) {
    .drive-audio-player,
    .theme-song-heading .drive-audio-player {
        max-width: 100%;
        margin-top: 24px;
    }

    .drive-audio-frame {
        height: 80px;
    }
}