/* 街への到着後は、街の中を左右に探索する */
html.is-town-arrived {
    overflow: hidden;
    overscroll-behavior-y: none;
}
.ae-town {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: 0;
    color: #080b20;
    background: linear-gradient(
        180deg,
        #060b24 0%,
        #182856 18%,
        #477eb7 38%,
        #83d3f7 58%,
        #b4e6fa 74%,
        #b4e6fa 100%
    );
}

.ae-town,
.ae-town * {
    box-sizing: border-box;
}

.ae-town__lamp-glow {
    position: absolute;
    left: var(--prop-x);
    bottom: calc(
        var(--ground-height) * var(--prop-depth)
        + var(--prop-lift, 0px)
        + var(--shop-height) * var(--prop-scale) * 0.77
    );
    z-index: 6;
    width: calc(var(--shop-height) * 0.24);
    aspect-ratio: 1;
    transform: translate(-50%, 50%);
    background: radial-gradient(
        circle,
        #fff2c480 0%,
        #ffdb8b30 30%,
        transparent 70%
    );
    filter: blur(2px);
    opacity: var(--town-lamp-glow, 0);
    pointer-events: none;
}

.ae-town[data-time="night"] {
    --town-lamp-glow: 1;
    background: linear-gradient(
        180deg, #040719 0%, #0c1737 55%, #172848 100%
    );
}

.ae-town[data-time="night"] .ae-town__ground {
    filter: brightness(0.45) saturate(0.7);
}

.ae-town[data-time="night"] .ae-town__shop > img:first-child {
    filter: brightness(0.58) saturate(0.8);
}

.ae-town[data-time="night"] .ae-town__shop::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            125deg,
            transparent 0 38%,
            #ffffff55 40% 43%,
            transparent 46%
        ),
        linear-gradient(
            180deg, #fff8df 0%, #ffe9b5 55%, #f5c678 100%
        );
    mask-image: var(
        --window-mask,
        linear-gradient(transparent, transparent)
    );
    mask-mode: luminance;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

/* 中央のお店：正面の窓と左右の曲面窓を点灯 */
.ae-town[data-time="night"] .ae-town__shop--super {
    --window-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1447 1087'%3E%3Cg fill='white'%3E%3Crect x='356' y='358' width='145' height='164' rx='10'/%3E%3Crect x='589' y='358' width='280' height='164' rx='10'/%3E%3Crect x='954' y='358' width='145' height='164' rx='10'/%3E%3Crect x='160' y='755' width='306' height='224'/%3E%3Crect x='990' y='755' width='306' height='224'/%3E%3Crect x='596' y='770' width='124' height='238'/%3E%3Crect x='737' y='770' width='122' height='238'/%3E%3Cpath d='M111 374 Q144 359 180 360 Q189 360 189 370 V512 Q189 520 180 521 L111 533 Z'/%3E%3Cpath d='M96 384 L103 380 V534 L96 536 Z'/%3E%3Cpath d='M1267 370 Q1267 360 1276 360 Q1308 361 1338 374 V533 Q1308 524 1276 522 Q1267 521 1267 512 Z'/%3E%3Cpath d='M1350 379 L1356 384 V536 L1350 534 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.ae-town[data-time="night"] .ae-town__shop--mint {
    --window-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1122 1402'%3E%3Cg fill='white'%3E%3Cpath d='M357 424a71.5 86 0 0 1 143 0v166H357Z'/%3E%3Cpath d='M636 424a72.5 86 0 0 1 145 0v166H636Z'/%3E%3Crect x='305' y='922' width='120' height='257'/%3E%3Crect x='709' y='922' width='134' height='257'/%3E%3Crect x='477' y='936' width='71' height='325'/%3E%3Crect x='587' y='936' width='70' height='325'/%3E%3C/g%3E%3Cg fill='black'%3E%3Crect x='423' y='338' width='10' height='252'/%3E%3Crect x='703' y='338' width='10' height='252'/%3E%3Crect x='357' y='425' width='143' height='10'/%3E%3Crect x='636' y='425' width='145' height='10'/%3E%3C/g%3E%3C/svg%3E");
}

.ae-town[data-time="night"] .ae-town__shop--blue {
    --window-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1190 1322'%3E%3Cg fill='white'%3E%3Ccircle cx='417' cy='414' r='82'/%3E%3Ccircle cx='771' cy='414' r='82'/%3E%3Crect x='276' y='840' width='147' height='277'/%3E%3Crect x='765' y='840' width='147' height='277'/%3E%3Crect x='486' y='857' width='87' height='326'/%3E%3Crect x='619' y='857' width='84' height='326'/%3E%3C/g%3E%3Cg fill='black'%3E%3Crect x='413' y='331' width='8' height='166'/%3E%3Crect x='767' y='331' width='8' height='166'/%3E%3Crect x='334' y='409' width='166' height='8'/%3E%3Crect x='688' y='409' width='166' height='8'/%3E%3C/g%3E%3C/svg%3E");
}

.ae-town[data-time="night"] .ae-town__shop--small {
    --window-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1024'%3E%3Cg fill='white'%3E%3Ccircle cx='768' cy='339' r='59'/%3E%3Crect x='213' y='560' width='255' height='220' rx='5'/%3E%3Crect x='1073' y='560' width='255' height='220' rx='5'/%3E%3Crect x='650' y='596' width='95' height='270'/%3E%3Crect x='793' y='596' width='93' height='270'/%3E%3C/g%3E%3Cg fill='black'%3E%3Crect x='764' y='279' width='8' height='120'/%3E%3Crect x='708' y='334' width='120' height='8'/%3E%3C/g%3E%3C/svg%3E");
}

.ae-town[data-time="night"] .ae-town__shop--marine {
    --window-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1155 1362'%3E%3Cg fill='white'%3E%3Crect x='334' y='360' width='151' height='49'/%3E%3Crect x='334' y='425' width='151' height='222'/%3E%3Crect x='668' y='360' width='152' height='49'/%3E%3Crect x='668' y='425' width='152' height='222'/%3E%3Crect x='241' y='935' width='174' height='239'/%3E%3Crect x='737' y='935' width='174' height='239'/%3E%3Crect x='477' y='948' width='73' height='299'/%3E%3Crect x='599' y='948' width='73' height='299'/%3E%3C/g%3E%3C/svg%3E");
}

.ae-town[data-time="night"] .ae-town__shop--tall {
    --window-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1086 1448'%3E%3Cg fill='white'%3E%3Crect x='360' y='335' width='142' height='168' rx='12'/%3E%3Crect x='585' y='335' width='142' height='168' rx='12'/%3E%3Crect x='360' y='588' width='142' height='178' rx='12'/%3E%3Crect x='585' y='588' width='142' height='178' rx='12'/%3E%3Crect x='187' y='1100' width='169' height='228'/%3E%3Crect x='733' y='1100' width='167' height='228'/%3E%3Crect x='449' y='1106' width='72' height='238'/%3E%3Crect x='564' y='1106' width='71' height='238'/%3E%3C/g%3E%3C/svg%3E");
}

.ae-town[data-time="night"] .ae-town__shop--dome {
    --window-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1159 1358'%3E%3Cg fill='white'%3E%3Cpath d='M388 486a67 70 0 0 1 134 0v64H388Z'/%3E%3Cpath d='M638 486a67 70 0 0 1 134 0v64H638Z'/%3E%3Crect x='175' y='869' width='114' height='274'/%3E%3Crect x='876' y='869' width='112' height='274'/%3E%3Crect x='470' y='923' width='80' height='300'/%3E%3Crect x='607' y='923' width='82' height='300'/%3E%3C/g%3E%3Cg fill='black'%3E%3Crect x='451' y='416' width='8' height='134'/%3E%3Crect x='701' y='416' width='8' height='134'/%3E%3Crect x='388' y='482' width='63' height='8'/%3E%3Crect x='709' y='482' width='63' height='8'/%3E%3C/g%3E%3C/svg%3E");
}

.ae-town[data-time="night"] .ae-town__car::before {
    content: "";
    position: absolute;
    left: 95%;
    top: 63%;
    width: 1.5%;
    height: 8%;
    z-index: 2;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #fff9df;
    box-shadow:
        0 0 4px 2px #ffe5a6,
        8px 2px 16px 5px #ffe7ad65;
    pointer-events: none;
}

.ae-town[data-time="night"] .ae-town__car::after {
    content: "";
    position: absolute;
    left: 5.8%;
    top: 63%;
    width: 1%;
    height: 7%;
    z-index: 2;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #ff6650;
    box-shadow: 0 0 7px 2px #ff382a90;
    pointer-events: none;
}

.ae-town[data-time="night"] .ae-town__shop .ae-town__prop {
    filter: brightness(0.5)
        drop-shadow(2px 4px 3px #00000050);
}

.ae-town[data-time="night"] .ae-town__shop img.ae-town__prop--lamp {
    filter: brightness(0.9)
        drop-shadow(1px -1px 1px #bddcff66)
        drop-shadow(2px 4px 3px #00000050);
}

.ae-town[data-time="night"] .ae-town__gacha,
.ae-town[data-time="night"] .ae-town__car-body,
.ae-town[data-time="night"] .ae-town__car-wheel {
    filter: brightness(0.7);
}

.ae-town[data-time="night"] .ae-town__clouds {
    opacity: 0.14;
}

.ae-town[data-time="night"] .ae-town__balloon {
    filter: brightness(0.65) saturate(0.8)
        drop-shadow(2px -2px 3px #bedaff70);
}

.ae-town__night-sky,
.ae-town__car-glass {
    display: none;
}

.ae-town[data-time="night"] .ae-town__night-sky {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 18%, #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 27% 43%, #c7ddff 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 43% 12%, #fff 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 65% 34%, #e5efff 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 87% 16%, #fff 0 0.7px, transparent 1.3px),
        radial-gradient(circle at 16% 76%, #d3e5ff 0 0.8px, transparent 1.4px),
        radial-gradient(circle at 53% 84%, #fff 0 0.6px, transparent 1.2px),
        radial-gradient(circle at 91% 69%, #fff 0 1px, transparent 1.6px);
    background-size: 900px 560px;
}

.ae-town__moon {
    display: block;
    position: absolute;
    top: 255svh;
    left: 13%;
    width: clamp(48px, 7vw, 88px);
    aspect-ratio: 1;
    margin: 0;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 32% 36%,
            #8b9db333 0 9%, transparent 11%
        ),
        radial-gradient(
            circle at 62% 61%,
            #8b9db329 0 13%, transparent 15%
        ),
        radial-gradient(
            circle at 47% 76%,
            #8b9db324 0 6%, transparent 8%
        ),
        radial-gradient(
            circle at 35% 25%,
            #fff9df, #d7e2f0 58%, #aebdd4
        );
    box-shadow:
        0 0 24px 6px #d8e8ff40,
        0 0 80px 24px #b6d2ff18;
}

.ae-town[data-time="night"] .ae-town__car-glass {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 30% 31%,
            #e4f2ffb3 0 0.6px, transparent 1px
        ),
        radial-gradient(
            circle at 54% 29%,
            #e4f2ff90 0 0.5px, transparent 1px
        ),
        linear-gradient(
            130deg,
            transparent 0 28%,
            #c9e4ff45 30% 32%,
            transparent 35%
        ),
        linear-gradient(180deg, #101c38, #304c6b);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1774 887'%3E%3Cg fill='white'%3E%3Cpath d='M504 224Q512 218 528 216L658 198Q684 196 683 221L677 376Q677 390 659 391L432 399Q416 399 425 380Z'/%3E%3Cpath d='M778 194L1050 190Q1080 192 1094 214L1184 365Q1195 386 1170 390L776 390Q760 390 760 373L758 215Q758 195 778 194Z'/%3E%3Cpath d='M1162 192L1218 199Q1232 202 1240 219L1331 369Q1338 381 1323 384L1299 385Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

.ae-town[data-time="night"] .ae-town__street::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: var(--ground-height);
    z-index: 2;
    background: radial-gradient(
        ellipse at 78% 10%,
        #bedaff26 0%,
        #aecfff12 35%,
        transparent 72%
    );
    mix-blend-mode: screen;
    pointer-events: none;
}

.ae-town[data-time="night"] .ae-town__shop img.ae-town__prop--tree {
    filter: brightness(0.58) saturate(0.85)
        drop-shadow(1px -1px 1px #cde5ff66)
        drop-shadow(2px 4px 3px #00000050);
}

.ae-town__sky {
    position: relative;
    overflow: clip;
    display: block;
    min-height: max(360svh, 1500px);
    padding: 0;
}

.ae-town__atmosphere {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100svh;
    pointer-events: none;
}

.ae-town__space {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 250svh;
    pointer-events: none;
    background: #030512;
    mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 60%,
        transparent 100%
    );
}

.ae-town__galaxy {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: 190svh;
    pointer-events: none;
    mask-image: linear-gradient(
        180deg, #000 0% 65%, transparent 100%
    );
}

.ae-town__galaxy-star {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #dceaff;
    opacity: var(--alpha);
}

.ae-town__galaxy-star--sparkle {
    box-shadow: 0 0 6px 1px #b6d7ff88;
    animation: ae-town-twinkle var(--duration)
        ease-in-out var(--delay) infinite;
    animation-play-state: paused;
}

.ae-town__galaxy-star--sparkle::before,
.ae-town__galaxy-star--sparkle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    background: linear-gradient(
        90deg, transparent, #e2efff, transparent
    );
    transform: translate(-50%, -50%);
}

.ae-town__galaxy-star--sparkle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.ae-town__galaxy.is-active .ae-town__galaxy-star--sparkle {
    animation-play-state: running;
}

.ae-town__meteors {
    display: none;
    position: absolute;
    top: 185svh;
    left: 0;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(
        180deg, transparent, #000 10% 80%, transparent
    );
}

.ae-town[data-time="night"] .ae-town__meteors {
    display: block;
}

.ae-town__meteor {
    position: absolute;
    width: clamp(65px, 12vw, 170px);
    height: 2px;
    border-radius: 50%;
    background: linear-gradient(
        90deg, transparent, #b9d9ff88 70%, #fff
    );
    filter: drop-shadow(0 0 3px #b9d9ff);
    opacity: 0;
    animation: ae-town-meteor var(--duration)
        linear var(--delay) infinite;
    animation-play-state: paused;
}

.ae-town[data-time="night"] .ae-town__meteors.is-active .ae-town__meteor {
    animation-play-state: running;
}
.ae-town__clouds {
    position: absolute;
    top: 160svh;
    left: -15%;
    width: 130%;
    height: 200svh;
    object-fit: cover;
    object-position: center;
    opacity: var(--cloud-opacity, 0.28);
    pointer-events: none;
    mask-image:
        linear-gradient(
            180deg, transparent, #000 20% 78%, transparent
        ),
        linear-gradient(
            90deg, #000, #000 12%,
            #0003 40% 60%, #000 88%, #000
        );
    mask-composite: intersect;
    animation: ae-town-cloud-drift var(--cloud-duration, 110s)
        ease-in-out infinite alternate;
    animation-play-state: paused;
}

.ae-town__clouds--near {
    --cloud-opacity: 0.12;
    --cloud-duration: 75s;
    --cloud-distance: 3vw;
    --cloud-flip: -1;
    top: 195svh;
    left: -22%;
    width: 144%;
    height: 165svh;
    object-position: 70% center;
}

.ae-town[data-time="day"] .ae-town__clouds.is-active {
    animation-play-state: running;
}

.ae-town[data-time="night"] .ae-town__clouds--near {
    opacity: 0.07;
}

@keyframes ae-town-twinkle {
    0%, 100% {
        opacity: 0.25;
        transform: scale(0.75);
    }
    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

@keyframes ae-town-meteor {
    0% {
        opacity: 0;
        transform: rotate(145deg) translateX(-40px);
    }
    2% {
        opacity: 1;
    }
    10%, 100% {
        opacity: 0;
        transform: rotate(145deg)
            translateX(clamp(160px, 30vw, 420px));
    }
}

@keyframes ae-town-cloud-drift {
    from {
        transform: translateX(-1vw)
            scaleX(var(--cloud-flip, 1));
    }
    to {
        transform: translateX(var(--cloud-distance, 1.5vw))
            scaleX(var(--cloud-flip, 1));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ae-town .ae-town__galaxy-star--sparkle,
    .ae-town .ae-town__clouds.is-active {
        animation: none;
    }

    .ae-town[data-time="night"] .ae-town__meteors {
        display: none;
    }
}
.ae-town__balloon {
    position: absolute;
    top: 274svh;
    right: 6%;
    width: clamp(130px, 20vw, 280px);
    height: auto;
    pointer-events: none;
    animation: ae-town-balloon 12s ease-in-out infinite;
}
.ae-town__story {
    position: absolute;
    top: 100svh;
    left: 0;
    z-index: 3;
    width: 100%;
    color: #f5f8ff;
    text-align: center;
    font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
}

.ae-town[data-time="day"]
.ae-town__story-scene ~ .ae-town__story-scene {
    --story-halo: rgb(243 251 255 / 82%);
    color: #102544;
    text-shadow: 0 2px 16px rgb(255 255 255 / 55%);
}

.ae-town__story-scene {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 2.6vw, 40px);
    height: 78svh;
    min-height: 360px;
    padding: 32px clamp(24px, 8vw, 120px);
    text-shadow: 0 2px 18px rgb(3 12 30 / 35%);
}

.ae-town__story-scene:first-child {
    height: 94svh;
}

/* PC：吹き出しと次の紹介文の間を広げる */
@media (min-width: 1101px) {
    .ae-town__story-scene--mission {
        margin-bottom: 12svh;
    }

    .ae-town__sky {
        min-height: max(380svh, 1500px);
    }
}

/* MISSIONを囲む、誰かの想い */
.ae-town__voices {
    position: absolute;
    inset: 12% max(24px, calc((100% - 960px) / 2));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
    align-items: start;
    align-content: space-between;
    gap: 20px;
    pointer-events: none;
}

.ae-town__voices > .ae-town__voice {
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
}

.ae-town__voices > .ae-town__voice:nth-child(2) {
    justify-self: end;
}

@media (min-width: 651px) {
    .ae-town__voices > .ae-town__voice:nth-child(1) {
        width: 300px;
        padding: 30px 24px;
        border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
    }

    .ae-town__voices > .ae-town__voice:nth-child(2) {
        top: clamp(24px, calc(24px + (100vw - 1100px) / 5), 180px);
        left: clamp(0px, calc((100vw - 1100px) / 6), 100px);
        width: 260px;
        padding: 24px 22px;
        border-radius: 54% 46% 52% 48% / 46% 54% 46% 54%;
    }

    .ae-town__voices > .ae-town__voice:nth-child(3) {
        width: 330px;
        padding: 34px 28px;
        border-radius: 46% 54% 49% 51% / 54% 48% 52% 46%;
    }
}

.ae-town__voice {
    position: relative;
    margin: 0;
    padding: 16px 20px;
    border: 1px solid rgb(190 218 255 / 45%);
    border-radius: 22px;
    background: rgb(12 32 62 / 85%);
    color: #f5f8ff;
    box-shadow: 0 8px 28px rgb(3 12 30 / 12%);
    font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.03em;
    text-align: center;
    text-shadow: none;
}

.ae-town__voice::before {
    content: none;
}

.ae-town__voice::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 26%;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: inherit;
    clip-path: polygon(18% 0, 100% 0, 0 100%);
    transform: rotate(6deg);
    pointer-events: none;
}

.ae-town__voice:nth-child(2)::after {
    right: 26%;
    left: auto;
    transform: scaleX(-1) rotate(6deg);
}

.ae-town[data-time="day"] .ae-town__voice {
    border-color: rgb(51 105 164 / 28%);
    background: rgb(248 252 255 / 94%);
    color: #183858;
}

.ae-town[data-time="day"] .ae-town__voice::after {
    border-color: rgb(51 105 164 / 28%);
}

.ae-town__voice:nth-child(1) {
    --voice-delay: 2600ms;
}

.ae-town__voice:nth-child(2) {
    --voice-delay: 3000ms;
}

.ae-town__voice:nth-child(3) {
    --voice-delay: 3400ms;
}

.ae-town__voice:nth-child(4) {
    --voice-delay: 3800ms;
}

@keyframes ae-town-voice-enter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ae-town__voice {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .ae-town__story-scene--mission:has(
        h3 > .ae-town__text-reveal.is-waiting
    ) .ae-town__voice {
        opacity: 0;
    }

    .ae-town__story-scene--mission:has(
        h3 > .ae-town__text-reveal.is-visible
    ) .ae-town__voice {
        animation: ae-town-voice-enter 750ms
            cubic-bezier(0.22, 1.15, 0.36, 1)
            calc(var(--voice-delay, 2600ms) - 600ms) both;
    }
}
.ae-town__invite-break,
.ae-town__mobile-break {
    display: none;
}

/* スマホ・タブレット：紹介文と吹き出しを重ねない */
@media (max-width: 1100px) {
    .ae-town__mobile-break {
        display: inline;
    }

    .ae-town .ae-town__lead {
        text-wrap: wrap;
    }

	.ae-town__copy {
		min-height: 360px;
	}

	.ae-town__message {
		--concept-size: clamp(28px, 4.5vw, 48px);
		box-sizing: border-box;
		padding-inline: 32px;
	}

	.ae-town__lead {
		max-width: 38em;
		font-size: 15px;
		line-height: 2;
	}

	.ae-town__story {
		position: relative;
		top: auto;
		left: auto;
	}

	.ae-town__story-scene {
		height: auto;
		min-height: 78svh;
		gap: 24px;
		padding: 48px 32px;
	}

	.ae-town__story-scene:first-child {
		height: auto;
		min-height: 94svh;
	}

	.ae-town__story-scene h3 {
		font-size: clamp(25px, 3.6vw, 38px);
		line-height: 1.6;
	}

	.ae-town__story-scene > p {
		font-size: 15px;
		line-height: 2;
	}

	.ae-town__story-accent {
		max-width: 100%;
	}

	.ae-town__voices {
		position: relative;
		inset: auto;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
		gap: 16px;
		width: min(100%, 820px);
		margin-top: 8px;
	}

	.ae-town__story-scene--mission
	.ae-town__voices > .ae-town__voice {
		top: auto;
		left: auto;
		justify-self: stretch;
		width: 100%;
		max-width: 100%;
		padding: 18px 12px;
		border-radius: 20px;
		font-size: 13px;
		line-height: 1.8;
	}
}

/* スマホ：吹き出しも縦に並べる */
@media (max-width: 650px) {
    .ae-town .ae-town__phrase {
        display: inline-block;
        max-width: 100%;
        vertical-align: top;
        white-space: normal;
        text-wrap: wrap;
    }

    .ae-town__story-scene:last-child h3 {
        font-size: clamp(20px, 6vw, 26px);
    }

    .ae-town .ae-town__lead {
        margin-top: 20px;
        font-size: 13px;
        line-height: 2;
    }

	.ae-town__story-scene {
		gap: 20px;
		padding: 40px 24px;
	}

	.ae-town__story-scene:last-child {
		margin-top: 24svh;
	}

	.ae-town__story-scene h3 {
		font-size: clamp(23px, 6.2vw, 30px);
		line-height: 1.65;
	}
    .ae-town__story-scene--mission h3 {
        font-size: clamp(20px, 6vw, 26px);
    }

    .ae-town__story-scene--mission .ae-town__mission-line {
        white-space: nowrap;
    }

    .ae-town__story-scene--mission .ae-town__story-accent {
        display: block;
        white-space: nowrap;
    }

    .ae-town .ae-town__story-scene > p:not(.ae-town__story-label) {
        font-size: 13px;
        line-height: 2;
    }

	.ae-town__voices {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		width: min(100%, 300px);
	}

	.ae-town__story-scene--mission
	.ae-town__voices > .ae-town__voice {
		padding: 12px 16px;
		font-size: 13px;
	}

	.ae-town__voice::after {
		bottom: -12px;
		width: 22px;
		height: 22px;
	}
}

.ae-town__story-scene::before {
    content: "";
    position: absolute;
    inset: 8% 0;
    z-index: -1;
    background: radial-gradient(
        ellipse at center,
        var(--story-halo, rgb(7 21 43 / 65%)),
        transparent 68%
    );
    pointer-events: none;
}

.ae-town__story-scene h3 {
    max-width: 100%;
    margin: 0;
    color: inherit;
    font-size: clamp(27px, 3.2vw, 46px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.025em;
    font-feature-settings: "palt" 1;
    font-kerning: normal;
    text-wrap: balance;
}

.ae-town__story-accent {
    display: inline-block;
    color: inherit;
}

.ae-town[data-time="day"]
.ae-town__story-scene ~ .ae-town__story-scene
.ae-town__story-accent {
    color: #0864c5;
}

.ae-town__story-scene > p {
    max-width: 36em;
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 400;
    line-height: 2.25;
    letter-spacing: 0.04em;
    font-feature-settings: "palt" 1;
    font-kerning: normal;
}

.ae-town__story-scene > .ae-town__story-label {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.3em;
    opacity: 0.8;
}

.ae-town__story-label::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin: 14px auto 0;
    background: currentColor;
    opacity: 0.45;
}

.ae-town__text-reveal {
    display: block;
}

@keyframes ae-town-text-enter {
    from {
        opacity: 0;
        transform: translateX(-18px);
        clip-path: inset(-0.5em 100% -0.5em -0.5em);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(-0.5em);
    }
}

@keyframes ae-town-title-enter {
    from {
        opacity: 0;
        transform: translateX(-18px);
        clip-path: inset(-0.5em 100% -0.5em -0.5em);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(-0.5em);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .ae-town__text-reveal.is-waiting:not(.is-visible) {
        opacity: 0;
    }

    .ae-town__text-reveal.is-visible {
        animation: ae-town-text-enter 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            var(--reveal-delay, 0ms) both;
    }

.ae-town__title > .ae-town__text-reveal.is-visible {
    animation-name: ae-town-title-enter;
    animation-delay: 0ms;
    animation-duration: 1800ms;
    animation-timing-function: cubic-bezier(0.25, 0.65, 0.3, 1);
}

.ae-town__story-scene h3 > .ae-town__text-reveal.is-visible {
    animation-duration: 2200ms;
    animation-timing-function: cubic-bezier(0.25, 0.65, 0.3, 1);
}
}
.ae-town__copy {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
    min-height: 500px;
    margin: 0;
    padding: clamp(24px, 4vw, 72px);
    color: #f5f8ff;
    font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
    background:
        radial-gradient(
            ellipse at 87% 52%,
            rgb(34 105 235 / 13%),
            transparent 56%
        ),
        linear-gradient(
            90deg,
            rgb(2 5 16 / 36%),
            transparent 72%
        );
}
.ae-town__intro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ae-town__brand {
    margin: 0;
}

.ae-town__brand img {
    display: block;
    width: clamp(100px, 10vw, 140px);
    height: auto;
}

.ae-town__location {
    margin: 0;
    color: #d5deee;
    font: 400 clamp(8px, 0.8vw, 11px)/1.6
        "Courier New", monospace;
    letter-spacing: 0.18em;
    white-space: nowrap;
}
.ae-town__message {
    --concept-size: clamp(30px, 4vw, 64px);
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 0 clamp(24px, 6vw, 96px);
    font-size: var(--concept-size);
    text-align: center;
    transform: translateY(-50%);
    isolation: isolate;
}

.ae-town__title {
    max-width: 100%;
    margin: 0;
    color: #f4f8ff;
    font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.025em;
    font-feature-settings: "palt" 1;
    font-kerning: normal;
    text-wrap: balance;
    text-shadow:
        0 2px 24px rgb(2 5 16 / 48%);
}

.ae-town__infinity {
    display: inline-block;
    vertical-align: baseline;
    color: inherit;
    font-family: inherit;
    font-size: 1em;
    font-weight: inherit;
    text-shadow: inherit;
}

.ae-town__message::before,
.ae-town__message::after {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    width: clamp(70px, 9vw, 140px);
    height: 2px;
    border-radius: 50%;
    background: linear-gradient(
        90deg, transparent, #a5d5ff66 70%, #fff
    );
    filter: drop-shadow(0 0 3px #9fd2ff);
    pointer-events: none;
    opacity: 0;
    animation: ae-town-concept-shoot 8s linear -3s infinite;
}

.ae-town__message::before {
    top: -140px;
    left: 78%;
}

.ae-town__message::after {
    top: calc(100% + 28px);
    left: 30%;
    animation-duration: 11s;
    animation-delay: -7s;
}

.ae-town[data-time="night"] .ae-town__message::before,
.ae-town[data-time="night"] .ae-town__message::after {
    display: block;
}

@keyframes ae-town-concept-shoot {
    0% {
        opacity: 0;
        transform: rotate(145deg) translateX(-60px);
    }
    5%, 18% {
        opacity: 1;
    }
    28%, 100% {
        opacity: 0;
        transform: rotate(145deg) translateX(300px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ae-town[data-time="night"] .ae-town__message::before,
    .ae-town[data-time="night"] .ae-town__message::after {
        display: none;
    }
}

.ae-town__lead {
    max-width: 44em;
    margin: clamp(24px, 2.6vw, 40px) auto 0;
    color: #f0f5ff;
    font-family: inherit;
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 0.04em;
    font-feature-settings: "palt" 1;
    font-kerning: normal;
    text-wrap: balance;
    text-shadow: 0 2px 16px rgb(2 5 16 / 45%);
}

.ae-town__scroll-guide {
    margin: 0;
    color: #e1e8f4;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.12em;
    text-align: center;
    grid-row: 3;
}

.ae-town__scroll-guide > span {
    position: relative;
    display: block;
    width: 1px;
    height: 34px;
    margin: 14px auto 0;
    background: linear-gradient(180deg, #b7cce088, #edf6ff);
    font-size: 0;
}

.ae-town__scroll-guide > span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid #edf6ff;
    border-bottom: 1px solid #edf6ff;
    transform: translateX(-50%) rotate(45deg);
}
.ae-town__town-invite {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    z-index: 3;
    margin: 0;
    color: #0864c5;
    font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.06em;
    text-align: center;
    font-feature-settings: "palt" 1;
    font-kerning: normal;
}

.ae-town__town-invite > span {
    display: block;
    margin-top: 12px;
    font-size: 22px;
    line-height: 1;
}

html.is-town-arrived .ae-town__town-invite {
    visibility: hidden;
}

.ae-town[data-time="night"] .ae-town__town-invite {
    color: #f5f8ff;
}

.ae-town__street {
    --shop-height: clamp(220px, 52svh, 520px);
    --ground-height: clamp(180px, 30svh, 280px);
    --car-width: clamp(150px, 22vw, 270px);

    position: relative;
    width: 100%;
    height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
    min-height: 440px;
    margin: 0;
    overflow: clip;
    scroll-margin-top: var(--wp-admin--admin-bar--height, 0px);
        background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto var(--ground-height);
}

.ae-town__ground {
    position: absolute;
    inset: auto 0 0;
    z-index: 0;
    height: var(--ground-height);
    overflow: hidden;
    pointer-events: none;
    --ground-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background:
        var(--ground-grain) 0 0 / 160px 160px repeat,
        radial-gradient(
            ellipse at 25% 75%,
            #ffffff12, transparent 65%
        ),
        linear-gradient(180deg, #73777d, #909296);
    background-position-x: var(--ground-render-x, 0px);
}

.ae-town__ground::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 46%;
    background:
        var(--ground-grain) 0 0 / 160px 160px repeat,
        linear-gradient(
            90deg,
            #827d7338 1px,
            #ffffff70 1px 2px,
            transparent 2px
        ) 0 0 / 40px 100%,
        linear-gradient(
            0deg,
            #827d7338 1px,
            #fffdf680 1px 2px,
            transparent 2px
        ) 0 0 / 100% 16px,
        repeating-linear-gradient(
            90deg,
            transparent 0 80px,
            #a9d3dc 80px 120px,
            transparent 120px 480px
        ) 0 16px / 480px 15px repeat-x,
        repeating-linear-gradient(
            90deg,
            transparent 0 280px,
            #3285dc 280px 320px,
            transparent 320px 680px
        ) 0 64px / 680px 15px repeat-x,
        linear-gradient(180deg, #d3cfc5, #f0e9de);
    box-shadow:
        inset 0 8px 12px #45443e16,
        inset 0 -2px 3px #fffaf080;
    background-position-x: var(--ground-render-x, 0px);
}

.ae-town__ground::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 0;
    right: 0;
    height: 6%;
    border-top: 1px solid #f4f2eb;
    border-bottom: 1px solid #51565c;
    border-top: 1px solid #fff9ed;
    border-bottom: 1px solid #65645f;
    background:
        var(--ground-grain) 0 0 / 160px 160px repeat,
        repeating-linear-gradient(
            90deg,
            transparent 0 79px,
            #716e665c 79px 80px
        ) 0 0 / 80px 100%,
        linear-gradient(
            180deg,
            #e9e4d9 0 20%,
            #c5c0b6 24%,
            #a39f97 82%,
            #8c8982 100%
        );
    box-shadow:
        0 2px 2px #242a3040,
        0 7px 10px #28303b35;
    background-position-x: var(--ground-render-x, 0px);
}

.ae-town__viewport {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
}

.ae-town__viewport::-webkit-scrollbar {
    display: none;
}

.ae-town__viewport:focus,
.ae-town__viewport:focus-visible {
    outline: none;
}

.ae-town__row {
    position: relative;
    z-index: auto;
    display: flex;
    align-items: flex-end;
    gap: 0;
    width: max-content;
    min-width: 100%;
    height: 100%;
    padding: 60px 0 calc(var(--ground-height) * 0.90);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto var(--ground-height);
}

.ae-town__group {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    gap: 14px;
    height: 100%;
    padding-right: 14px;
}

.ae-town__shop {
    position: relative;
    flex: 0 0 auto;
    margin-inline: calc(var(--shop-height) * -0.03);
}

.ae-town__shop--mint {
    margin-inline: calc(var(--shop-height) * -0.12);
}

.ae-town__shop--blue,
.ae-town__shop--marine {
    margin-inline: calc(var(--shop-height) * -0.09);
}

.ae-town__shop--tall,
.ae-town__shop--dome {
    margin-inline: calc(var(--shop-height) * -0.05);
}

.ae-town__shop--small {
    --prop-lift: calc(var(--shop-height) * 0.03);
    top: calc(var(--shop-height) * 0.03);
}
.ae-town__shop img {
    display: block;
    width: auto;
    height: calc(var(--shop-height) * var(--shop-scale, 1));
    max-width: none;
    margin: 0;
    user-select: none;
}

.ae-town__shop .ae-town__prop {
    position: absolute;
    left: var(--prop-x);
    bottom: calc(
        var(--ground-height) * var(--prop-depth)
        + var(--prop-lift, 0px)
    );
    z-index: var(--prop-layer, 3);
    width: auto;
    height: calc(var(--shop-height) * var(--prop-scale));
    max-width: none;
    transform: translate(-50%, var(--prop-foot));
    filter: drop-shadow(2px 4px 3px rgba(20, 35, 55, 0.14));
    pointer-events: none;
}

.ae-town__prop--tree {
    --prop-scale: 0.58;
    --prop-foot: 4%;
    --prop-depth: 0.06;
}

.ae-town__prop--lamp {
    --prop-scale: 0.60;
    --prop-foot: 2.6%;
    --prop-depth: -0.32;
    --prop-layer: 9;
}

.ae-town__prop--bike {
    --prop-scale: 0.30;
    --prop-foot: 17%;
    --prop-depth: 0.06;
}

.ae-town__prop--bench {
    --prop-scale: 0.22;
    --prop-foot: 14.5%;
    --prop-depth: 0.02;
}

/* ベンチと影を同じ座標で配置 */
.ae-town__shop .ae-town__bench {
    width: auto;
    aspect-ratio: 1448 / 1086;
    isolation: isolate;
    filter: none;
}

.ae-town__shop .ae-town__bench > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
/* 昼：ベンチの色とコントラストを周囲になじませる */
.ae-town[data-time="day"] .ae-town__bench > img {
    filter: saturate(0.88) contrast(0.96);
}

/* 座面下の広い影と、4本の脚の接地影 */
.ae-town__bench::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(
            ellipse 5% 2% at 7% 86%,
            rgb(20 28 36 / 65%), transparent 100%
        ),
        radial-gradient(
            ellipse 5% 2% at 93% 86%,
            rgb(20 28 36 / 65%), transparent 100%
        ),
        radial-gradient(
            ellipse 4% 1.8% at 13% 77%,
            rgb(20 28 36 / 50%), transparent 100%
        ),
        radial-gradient(
            ellipse 4% 1.8% at 87% 77%,
            rgb(20 28 36 / 50%), transparent 100%
        ),
        radial-gradient(
            ellipse 46% 8% at 50% 82%,
            rgb(20 28 36 / 32%), transparent 100%
        );
    filter: blur(0.35px);
    pointer-events: none;
}

/* 画像の形に沿って、下側へ薄い陰影 */
.ae-town__bench::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        transparent 52%,
        rgb(15 23 33 / 18%) 68%,
        rgb(15 23 33 / 10%) 100%
    );
    mask: url("../images/town/street-bench.png")
        center / 100% 100% no-repeat;
    pointer-events: none;
}

/* 夜：全体の暗さは画像側だけに適用 */
.ae-town[data-time="night"] .ae-town__shop .ae-town__bench {
    filter: none;
}

.ae-town[data-time="night"] .ae-town__bench > img {
    filter: brightness(0.62) saturate(0.85);
}

/* 店舗からの暖かな光を、背もたれと座面へ */
.ae-town[data-time="night"] .ae-town__bench::after {
    background:
        radial-gradient(
            ellipse 80% 50% at 35% 30%,
            rgb(255 218 146 / 42%) 0%,
            rgb(255 205 125 / 20%) 50%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 53%,
            rgb(8 15 26 / 24%) 72%,
            rgb(8 15 26 / 14%) 100%
        );
}

.ae-town__gacha {
    position: absolute;
    right: 2%;
    bottom: 0;
    z-index: 7;
    display: block;
    width: calc(var(--shop-height) * 0.22);
    aspect-ratio: 2 / 3;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 0;
    pointer-events: auto;
    cursor: pointer;
}

.ae-town__gacha:focus-visible {
    outline: 2px solid #123e68;
    outline-offset: 3px;
}

.ae-town__gacha img {
    width: 100%;
    height: auto;
}

.ae-town__gacha .ae-town__gacha-handle {
    position: absolute;
    left: 35%;
    top: 54.5%;
    width: 30%;
    height: auto;
}

/* 街のガチャ付近に添える、小さな案内 */
.ae-town__gacha-open {
    position: absolute;
    z-index: 7;
    right: 0;
    bottom: calc(var(--shop-height) * 0.33 + 6px);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    min-height: 44px;
    width: max-content;
    margin: 0;
    padding: 0 10px;

    border: 1px solid rgb(18 62 104 / 35%);
    border-radius: 999px;
    background: rgb(255 250 240 / 92%);
    color: #123e68;
    box-shadow: 0 2px 5px rgb(25 48 70 / 10%);

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 1;
    pointer-events: auto;
}

.ae-town__gacha-open:enabled {
    cursor: pointer;
}

.ae-town__gacha-open:enabled:hover {
    background: #edf5ff;
    border-color: #123e68;
}

.ae-town__gacha-open:focus-visible {
    outline: 2px solid #123e68;
    outline-offset: 3px;
}

.ae-town__car-lane {
    position: absolute;
    inset: auto 0 calc(var(--ground-height) * 0.06);
    height: calc(var(--car-width) * 0.56);
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.ae-town__car {
    position: absolute;
    left: 0;
    bottom: calc(var(--car-width) * 0.04);
    width: var(--car-width);
    aspect-ratio: 2 / 1;
    animation: none;
}

.ae-town__car-body {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.ae-town__car-wheel {
    position: absolute;
    top: 67%;
    width: 20%;
    height: auto;
    animation: ae-town-wheel 0.9s linear infinite;
}

.ae-town__car-wheel--rear {
    left: 10.7%;
}

.ae-town__car-wheel--front {
    left: 71.8%;
}

/* タイヤの接地点に沿う、小さく柔らかな影 */
.ae-town__car-contact-shadow {
    position: absolute;
    inset: 0 0 -16%;
    pointer-events: none;
}

.ae-town__car-contact-shadow::before,
.ae-town__car-contact-shadow::after {
    content: "";
    position: absolute;
    top: 91.38%;
    width: 22%;
    height: 3.45%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgb(14 22 29 / 65%) 0%,
        rgb(14 22 29 / 32%) 35%,
        transparent 75%
    );
    transform: translate(-50%, -50%);
}

.ae-town__car-contact-shadow::before {
    left: 20.7%;
}

.ae-town__car-contact-shadow::after {
    left: 81.8%;
}

@keyframes ae-town-drive {
    from {
        transform: translateX(calc(0px - var(--car-width)));
    }
    to {
        transform: translateX(calc(100vw + var(--car-width)));
    }
}

@keyframes ae-town-wheel {
    to {
        transform: rotate(360deg);
    }
}

.ae-town__move {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #b4ceff;
    border-radius: 50%;
    background: #ffffffed;
    color: #064bfa;
    box-shadow: 0 4px 16px #064bfa18;
    font: inherit;
    font-size: 24px;
    cursor: pointer;
    transform: translateY(-50%);
}

.ae-town__move--left {
    left: 16px;
}

.ae-town__move--right {
    right: 16px;
}

.ae-town__move:focus-visible {
    outline: 3px solid #064bfa;
    outline-offset: 4px;
}

/* スマホ・タブレット：画面の高さに街を収める */
@media (max-width: 1100px) {
	.ae-town__street {
		--street-room: calc(
			100svh - var(--wp-admin--admin-bar--height, 0px)
		);
		--ground-height: clamp(100px, 26svh, 220px);
		--shop-height: min(
			420px,
			68vw,
			max(
				100px,
				calc(
					(
						var(--street-room)
						- var(--ground-height) * 0.90
						- 84px
					) / 1.10
				)
			)
		);
		--car-width: clamp(120px, 20vw, 210px);

		height: var(--street-room);
		min-height: 0;
	}

	.ae-town__viewport {
		touch-action: pan-x pinch-zoom;
	}

	.ae-town__row {
		padding-top: 64px;
	}

	.ae-town__move {
		top: auto;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		width: 48px;
		height: 48px;
		font-size: 24px;
		transform: none;
	}

	.ae-town__move--left {
		left: calc(50% - 60px);
	}

	.ae-town__move--right {
		right: calc(50% - 60px);
	}
}

/* スマホ：指で押せるサイズを確保する */
@media (max-width: 650px) {
    .ae-town__street {
        --car-width: 140px;
    }

    .ae-town__move {
        display: none;
    }

    .ae-town .ae-town__gacha-open,
    .ae-town .ae-town__clock-label {
        min-height: 32px;
        padding: 0 8px;
        font-size: 11px;
    }
}
/* 街画像の上部にある透明な空の余白を詰める */
@keyframes ae-town-balloon {
    0%, 100% {
        transform: translate(0, 0) rotate(-2deg);
    }

    50% {
        transform: translate(-24px, 16px) rotate(2deg);
    }
}

/* 紹介文の下に、街への案内を置く余白 */
@media (max-width: 1100px) {
	.ae-town__sky {
		padding: 0 0 140px;
	}

	.ae-town__town-invite {
		right: 24px;
		bottom: 32px;
		left: 24px;
		font-size: 14px;
		line-height: 1.9;
	}
}

@media (max-width: 650px) {
	.ae-town__sky {
		min-height: 400svh;
		padding-bottom: max(140px, 30svh);
	}

	.ae-town__balloon {
		top: 274svh;
		right: 12px;
		width: 120px;
	}

	.ae-town__message {
		--concept-size: clamp(25px, 7vw, 36px);
		padding-inline: 24px;
	}

    .ae-town__town-invite {
        font-size: 14px;
        line-height: 1.9;
        letter-spacing: 0.04em;
    }

    .ae-town__invite-break {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ae-town__balloon,
    .ae-town__car,
    .ae-town__car-wheel {
        animation: none;
    }

    .ae-town__car {
        left: 12%;
    }
}
/* 建物側の歩道になじませる街路時計 */
.ae-town__clock {
    position: absolute;
    left: 85%;
    bottom: calc(var(--ground-height) * 0.04);
    z-index: 7;
    display: block;
    width: calc(var(--shop-height) * 0.3466667);
    height: calc(var(--shop-height) * 0.52);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #123e68;
    transform: translate(-50%, 5.5%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 台座の真下に置く接地影 */
.ae-town__clock::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 94.7%;
    z-index: -1;
    width: 31%;
    height: 2.8%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgb(28 37 46 / 36%) 0%,
        rgb(28 37 46 / 18%) 38%,
        transparent 74%
    );
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 青い台座から歩道への、ごく薄い照り返し */
.ae-town__clock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 94%;
    z-index: -1;
    width: 29%;
    height: 2.8%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgb(40 123 190 / 14%),
        transparent 72%
    );
    transform: translateX(-50%);
    pointer-events: none;
}

.ae-town__shop .ae-town__clock > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    filter:
        saturate(0.94)
        drop-shadow(
            6px -3px 3px rgb(20 35 55 / 18%)
        );
    pointer-events: none;
    user-select: none;
}

/* 夜は周囲に合わせて明るさを落とす */
.ae-town[data-time="night"] .ae-town__clock > img {
    filter:
        brightness(0.76)
        saturate(0.88)
        drop-shadow(1px -1px 1px rgb(189 220 255 / 22%))
        drop-shadow(2px 4px 3px rgb(0 0 0 / 28%));
}

.ae-town[data-time="night"] .ae-town__clock::after {
    opacity: 0.4;
}
.ae-town__clock-hand {
    position: absolute;
    left: 50%;
    top: 25.33%;
    z-index: 1;
    display: block;
    width: 1.3%;
    border-radius: 999px;
    background: #123e68;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    transform-origin: 50% 100%;
    pointer-events: none;
}

.ae-town__clock-hand--hour {
    height: 6.2%;
    transform: translate(-50%, -100%)
        rotate(var(--clock-hour, 0deg));
}

.ae-town__clock-hand--minute {
    width: 1%;
    height: 8.5%;
    transform: translate(-50%, -100%)
        rotate(var(--clock-minute, 0deg));
}

.ae-town__clock-pin {
    position: absolute;
    left: 50%;
    top: 25.33%;
    z-index: 2;
    width: 2.8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #123e68;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ae-town__clock:focus-visible {
    outline: 2px solid #168dc5;
    outline-offset: 3px;
    border-radius: 8px;
}

/* 探索案内を街の上部中央へ移す */
.ae-town__guide {
    top: 16px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.ae-town__guide.is-explored {
    opacity: 0;
}
/* ガチャと雰囲気を揃えた、時計の操作案内 */
.ae-town__clock-label {
    position: absolute;
    right: 64%;
    left: auto;
    top: 32%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: max-content;
    padding: 0 10px;
    border: 1px solid rgb(18 62 104 / 35%);
    border-radius: 999px;
    background: rgb(255 250 240 / 96%);
    color: #123e68;
    box-shadow: 0 2px 5px rgb(25 48 70 / 10%);
    font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.ae-town__clock:hover .ae-town__clock-label {
    background: #edf5ff;
    border-color: #123e68;
}

/* 街の時間設定：他の詳細画面と共通のデザイン */
.ae-town__time-dialog {
    box-sizing: border-box;
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 2px solid var(--modal-blue);
    border-radius: var(--modal-radius);
    background: var(--modal-background);
    color: var(--modal-ink);
    box-shadow: var(--modal-shadow);
    font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
	overscroll-behavior: contain;
	scroll-padding-block: 16px;

	@media (max-width: 1100px) {
		max-height: calc(
			100dvh
			- var(--wp-admin--admin-bar--height, 0px)
			- 32px
		);
		margin:
			calc(
				var(--wp-admin--admin-bar--height, 0px) + 16px
			)
			auto
			16px;
	}
}

.ae-town__time-dialog::backdrop {
    background: var(--modal-backdrop);
}

.ae-town__time-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 12px 22px;
    border-bottom: 2px solid var(--modal-blue);
    background: var(--modal-header-background);
    color: var(--modal-white);
}

.ae-town__time-header h2 {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.ae-town__time-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--modal-white);
    border-radius: 6px;
    background: rgb(255 255 255 / 12%);
    color: var(--modal-white);
    font: 400 26px/1 Arial, sans-serif;
    cursor: pointer;
}

.ae-town__time-close:hover {
    background: var(--modal-white);
    color: var(--modal-blue);
}

.ae-town__time-description {
    margin: 22px 22px 16px;
    color: var(--modal-ink);
    font-size: 14px;
    line-height: 1.8;
}

.ae-town__time-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 22px;
}

.ae-town__time-options button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--modal-line);
    border-radius: 10px;
    background: var(--modal-white);
    color: var(--modal-ink);
    font: 700 18px/1.5 Arial, "Yu Gothic", Meiryo, sans-serif;
    cursor: pointer;
}

.ae-town__time-options button:hover {
    border-color: var(--modal-blue);
    background: var(--modal-tint);
}

.ae-town__time-options button[aria-pressed="true"] {
    border-color: var(--modal-blue);
    background: var(--modal-blue);
    color: var(--modal-white);
    box-shadow: 0 3px 8px rgb(6 75 250 / 18%);
}

.ae-town__time-options button span {
    font-size: 26px;
}

.ae-town__time-note {
    margin: 18px 22px 22px;
    padding-top: 14px;
    border-top: 1px solid var(--modal-line);
    color: var(--modal-ink);
    font-size: 12px;
    line-height: 1.8;
}

.ae-town__time-dialog button:focus-visible {
    outline: 2px solid var(--modal-blue);
    outline-offset: 3px;
}

.ae-town__time-close:focus-visible {
    outline-color: var(--modal-white);
}
/* 案内は位置を固定し、透け感を揃える */
.ae-town__gacha-open,
.ae-town__clock-label {
    background: rgb(255 250 240 / 92%);
}

.ae-town__gacha-open:enabled:hover,
.ae-town__clock:hover .ae-town__clock-label {
    background: rgb(237 245 255 / 92%);
}

/* 時計とガチャの本体を浮かせる */
.ae-town__gacha {
    pointer-events: auto;
}

.ae-town__gacha,
.ae-town__clock > img,
.ae-town__clock-hand,
.ae-town__clock-pin {
    transition: translate 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .ae-town__gacha:hover,
    .ae-town__shop:has(.ae-town__gacha-open:enabled:hover)
    .ae-town__gacha {
        translate: 0 -4px;
    }

    .ae-town__clock:hover > img,
    .ae-town__clock:hover .ae-town__clock-hand,
    .ae-town__clock:hover .ae-town__clock-pin {
        translate: 0 -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ae-town__gacha,
    .ae-town__clock > img,
    .ae-town__clock-hand,
    .ae-town__clock-pin {
        transition: none;
    }
}
/* 街の時間設定：コンパクトな淡い青の小窓 */
.ae-town__time-dialog {
    width: min(300px, calc(100vw - 40px));
    border: 1px solid #b8cddd;
    border-radius: 16px;
    background: #f9fcff;
    box-shadow: 0 12px 32px rgb(20 45 70 / 18%);
}

.ae-town__time-dialog::backdrop {
    background: rgb(15 32 50 / 30%);
}

.ae-town__time-header {
    gap: 8px;
    padding: 8px 10px 8px 18px;
    border-bottom: 1px solid #d5e2ec;
    background: linear-gradient(120deg, #eaf3f9, #f3f8fc);
    color: #17385e;
}

.ae-town__time-header h2 {
    font-size: 16px;
}

.ae-town__time-close {
    border-color: transparent;
    border-radius: 50%;
    background: transparent;
    color: #536b7e;
    font-size: 24px;
}

.ae-town__time-close:hover {
    background: #dfeaf3;
    color: #17385e;
}

.ae-town__time-description {
    margin: 16px 18px 12px;
    font-size: 13px;
}

.ae-town__time-options {
    gap: 10px;
    margin-inline: 18px;
}

.ae-town__time-options button {
    min-height: 60px;
    padding: 8px;
    border-color: #c7d9e7;
    border-radius: 12px;
    font-size: 16px;
}

.ae-town__time-options button span {
    font-size: 23px;
}

.ae-town__time-options button[aria-pressed="true"] {
    border-color: #6e9cbd;
    background: #e5f0f8;
    color: #17385e;
    box-shadow: inset 0 0 0 1px #6e9cbd;
}

.ae-town__time-note {
    margin: 14px 18px 16px;
    padding-top: 12px;
    border-color: #d5e2ec;
    color: #607789;
    font-size: 11px;
    line-height: 1.7;
}

.ae-town__time-close:focus-visible {
    outline-color: #436e90;
}
/* 各店舗の入口から、歩道へ落ちる光 */
.ae-town__shop--mint   { --shop-spill-top: 90%; }
.ae-town__shop--blue   { --shop-spill-top: 89.5%; }
.ae-town__shop--small  { --shop-spill-top: 84.6%; }
.ae-town__shop--marine { --shop-spill-top: 91.6%; }
.ae-town__shop--tall   { --shop-spill-top: 92.8%; }
.ae-town__shop--dome   { --shop-spill-top: 90.1%; }

.ae-town[data-time="night"]
.ae-town__shop:not(.ae-town__shop--super)::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: var(--shop-spill-top, 92%);
    width: 34%;
    height: 16%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at 50% 0%,
        rgb(255 229 166 / 36%) 0%,
        rgb(255 219 145 / 16%) 35%,
        transparent 74%
    );
    pointer-events: none;
}

/* 時計：文字盤の周囲へ、柔らかく光をにじませる */
.ae-town__clock-face-light {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
        ellipse 25% 17% at 50% 25.33%,
        rgb(255 177 79 / 44%) 0%,
        rgb(255 145 45 / 22%) 45%,
        transparent 78%
    );
    pointer-events: none;
    transition: translate 180ms ease;
}

.ae-town[data-time="night"] .ae-town__clock-face-light {
    display: block;
}

/* 目盛りを残し、白い文字盤そのものを明るくする */
.ae-town__clock-face-light::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("../images/town/street-clock.png")
        center / 100% 100% no-repeat;
    clip-path: ellipse(15.2% 10.2% at 50% 25.33%);
    filter: brightness(1.02) sepia(0.65) saturate(1.6);
    mask-image: radial-gradient(
        ellipse 15.2% 10.2% at 50% 25.33%,
        #000 0%,
        rgb(0 0 0 / 90%) 55%,
        transparent 100%
    );
}

/* 光も時計本体と一緒に浮かせる */
@media (hover: hover) and (pointer: fine) {
    .ae-town__clock:hover .ae-town__clock-face-light {
        translate: 0 -4px;
    }
}

/* ガチャ：外装は暗く、内部は明るく */
.ae-town[data-time="night"] .ae-town__gacha {
    filter: none;
}

.ae-town[data-time="night"] .ae-town__gacha > img {
    filter: brightness(0.7);
}

/* 内部の陰影を残し、明るさの境界をぼかす */
.ae-town[data-time="night"] .ae-town__gacha::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        url("../images/town/08_ガチャ本体_透明.png")
        center / 100% 100% no-repeat;
    clip-path: polygon(
        25% 21%, 75% 21%,
        79% 30%, 79% 44%,
        74% 53%, 26% 53%,
        21% 44%, 21% 30%
    );
    filter: brightness(0.95);
    mask-image:
        radial-gradient(
            ellipse 29% 25% at 50% 29%,
            #000 0%,
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 20%,
            #000 24%,
            #000 35%,
            transparent 53%
        );
    mask-composite: intersect;
    pointer-events: none;
}

/* 内部の上から下へ弱まる、控えめなオレンジの光 */
.ae-town[data-time="night"] .ae-town__gacha::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
        ellipse 27% 30% at 50% 23%,
        rgb(255 185 85 / 30%) 0%,
        rgb(255 165 65 / 14%) 40%,
        rgb(255 155 50 / 4%) 70%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 20%,
        #000 23%,
        #000 44%,
        transparent 54%
    );
    pointer-events: none;
}
/* コンセプトの空から、街の淡い空へつなぐ */
.ae-town[data-time="day"] .ae-town__street {
    background: linear-gradient(
        180deg,
        transparent 0%,
        #b4e6fa 25%,
        #d9edf5 70%,
        #edf5f7 100%
    );
}

/* 昼の雲：丸みのある形を、遠近の2層で配置 */
.ae-town[data-time="day"] .ae-town__street::before,
.ae-town[data-time="day"] .ae-town__street::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - var(--ground-height));
    z-index: 0;
    background-image:
        radial-gradient(
            ellipse 6% 18% at 14% 46%,
            #fff 97%, transparent 100%
        ),
        radial-gradient(
            ellipse 8% 27% at 22% 36%,
            #fff 97%, transparent 100%
        ),
        radial-gradient(
            ellipse 6% 19% at 30% 46%,
            #fff 97%, transparent 100%
        ),
        radial-gradient(
            ellipse 17% 15% at 22% 55%,
            #fff 97%, transparent 100%
        );
    background-repeat: repeat-x;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 35%) 15%,
        #000 35%,
        #000 100%
    );
    pointer-events: none;
}

/* 遠くの雲：小さく、淡く */
.ae-town[data-time="day"] .ae-town__street::before {
    background-size: 740px 150px;
    background-position: -100px 28%;
    opacity: 0.48;
    filter: drop-shadow(0 2px 2px rgb(105 156 189 / 12%));
}

/* 近くの雲：ふっくらした形と、薄い下側の影 */
.ae-town[data-time="day"] .ae-town__street::after {
    background-size: 1100px 220px;
    background-position: 180px 5%;
    opacity: 0.88;
    filter: drop-shadow(0 4px 3px rgb(105 156 189 / 20%));
}

/* 街の夜空：星の大きさ・明るさ・間隔を変える */
.ae-town[data-time="night"] .ae-town__street {
    background:
        radial-gradient(
            circle at 17% 23%,
            #dceaff99 0 0.6px, transparent 1.2px
        ) 0 0 / 173px 137px,
        radial-gradient(
            circle at 71% 59%,
            #c5daff80 0 0.6px, transparent 1.2px
        ) 0 0 / 229px 181px,
        radial-gradient(
            circle at 43% 37%,
            #edf5ffb3 0 0.8px, transparent 1.5px
        ) 0 0 / 337px 251px,
        radial-gradient(
            circle at 89% 73%,
            #bcd5ff66 0 0.5px, transparent 1.1px
        ) 0 0 / 269px 211px,
        radial-gradient(
            circle at 83% 16%,
            #fff5dfcc 0 1px, transparent 1.8px
        ) 0 0 / 751px 467px,
        radial-gradient(
            circle at 29% 31%,
            #d8e9ff 0 1px,
            #bedaff33 1.6px,
            transparent 4px
        ) 0 0 / 1103px 641px,
        radial-gradient(
            ellipse at 65% 65%,
            #547ba329,
            transparent 65%
        ),
        linear-gradient(
            180deg,
            transparent 0%,
            rgb(20 36 64 / 35%) 30%,
            #2b405b 78%,
            #43576b 100%
        );
}
@media (prefers-reduced-motion: reduce) {
    .ae-town__clock-face-light {
        transition: none;
    }
}
/* 昼：車体の下に柔らかく広がる影 */
.ae-town__car-ground-shadow {
    position: absolute;
    left: 8%;
    top: 102%;
    width: 86%;
    height: 10%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgb(10 16 24 / 38%) 0%,
        rgb(10 16 24 / 22%) 45%,
        transparent 75%
    );
    transform: translateY(-50%);
    filter: blur(2px);
    pointer-events: none;
}

/* 夜：周囲の暗さになじむ控えめな影 */
.ae-town[data-time="night"] .ae-town__car-ground-shadow {
    background: radial-gradient(
        ellipse,
        rgb(3 7 16 / 30%) 0%,
        rgb(3 7 16 / 16%) 45%,
        transparent 75%
    );
}
html.is-hero-complete:not(.is-town-arrived) .ae-site-menu {
    display: none;
}

.ae-story-skip {
	display: none;
	position: fixed;
	z-index: 1200;
	right: max(16px, env(safe-area-inset-right, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	min-height: 44px;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border: 1px solid rgb(255 255 255 / 35%);
	border-radius: 999px;
	background: rgb(12 32 62 / 82%);
	color: #fff;
	box-shadow: 0 3px 12px rgb(3 12 30 / 12%);
	font: inherit;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.06em;
	text-align: center;
	touch-action: manipulation;
	cursor: pointer;
}

html.is-hero-complete:not(.is-town-arrived) .ae-story-skip {
    display: block;
}

.ae-story-skip:hover {
    color: #fff;
}

@media (min-width: 1101px) {
    .ae-story-skip {
        border-color: rgb(72 104 130 / 20%);
        background: rgb(255 255 255 / 30%);
        color: #486882;
        box-shadow: none;
    }

    .ae-story-skip:hover {
        background: rgb(255 255 255 / 80%);
        color: #344f68;
    }
}

.ae-story-skip:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}