*{box-sizing:border-box}html{background:#160d20;color:#fff2d9;scroll-behavior:smooth}body{margin:0;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;background:radial-gradient(ellipse at top,#3e203b,#100b17 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff2ad;outline-offset:5px}a{color:inherit}.skip{position:fixed;top:-100px;left:10px;z-index:20;background:#211329;padding:12px}.skip:focus{top:10px}.world{position:relative;width:100%;max-width:850px;margin:auto;isolation:isolate;overflow:hidden;box-shadow:0 0 120px #0009}.street{display:block;width:100%;height:auto;aspect-ratio:1/3;object-fit:fill}.brand{position:absolute;top:2.4%;left:6.3%;width:32%;aspect-ratio:1;background:#14100e;transform:rotate(-3deg);box-shadow:0 0 14px #fdad4730}.brand img{width:100%;height:100%;object-fit:contain}.intro{position:absolute;top:18.8%;left:8%;right:8%;text-align:center;text-shadow:0 2px 10px #000}.intro>span{font-size:12px;letter-spacing:.19em;color:#ffdbac}.intro p{font-size:clamp(14px,3.5vw,20px);margin:8px 0 12px}.intro button{border:1px solid #efc48999;color:#ffe8ca;background:#271522d9;padding:10px 22px;border-radius:30px;font-size:14px;backdrop-filter:blur(8px)}.intro button span{padding-left:14px}.spot{position:absolute;display:block;background:transparent;border:0;border-radius:16px;color:#fff2d9;transition:box-shadow .25s;z-index:4}.pickup{top:31.5%;left:30%;width:47%;height:19%}.album{top:56.5%;left:5%;width:65%;height:17%}.mv{top:81%;left:22%;width:59%;height:12%}.spot:hover,.spot:focus-visible{box-shadow:0 0 28px #ffb65466,inset 0 0 30px #ffb65422}.spot-tag{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#281822eb;border:1px solid #e9b673a1;box-shadow:0 3px 18px #0008;padding:9px 12px;border-radius:30px;font-size:14px;line-height:1.3;backdrop-filter:blur(8px)}.spot-tag b{margin-left:8px;color:#ffc879}.guide{position:absolute;left:40%;top:10%;width:52.7%;z-index:5;pointer-events:none;will-change:transform;transform-origin:center bottom}.guide img{display:block;width:100%;height:auto;position:relative;z-index:1;filter:drop-shadow(2px 8px 5px #0006)}.shadow{position:absolute;bottom:0;left:18%;width:67%;height:7%;background:#08040999;filter:blur(5px);border-radius:50%}.bubble{position:absolute;bottom:96%;left:50%;transform:translateX(-50%);padding:9px 12px;border-radius:16px 16px 16px 3px;background:#fff0dceF;color:#382037;font-size:clamp(12px,2.9vw,15px);white-space:nowrap;box-shadow:0 5px 20px #0005}.end{position:absolute;bottom:.5%;left:0;right:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 18px;padding:8px;background:#140d19dd}.end img{width:42px;height:42px;object-fit:contain}.end a,.end button{font-size:12px}.end button{background:none;color:#ecd5bd;border:none;padding:8px}.motion{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));right:12px;z-index:7;border:1px solid #ddbd9266;background:#1c1324e6;color:#f2ddc7;border-radius:24px;padding:9px 12px;font-size:12px;box-shadow:0 3px 16px #0005}dialog{width:min(92vw,460px);max-height:85dvh;padding:0;color:#fff0da;background:linear-gradient(145deg,#322036,#17101f);border:1px solid #c58f5480;border-radius:22px;box-shadow:0 24px 100px #000b}dialog::backdrop{background:#0c0718bb;backdrop-filter:blur(8px)}.detail-inner{padding:40px 28px 26px}.close{position:absolute;right:9px;top:8px;border:0;background:transparent;color:#fff0da;font-size:30px;width:44px;height:44px}.detail-kind{color:#ffc778;letter-spacing:.2em;font:16px Georgia,serif;margin-top:0}h1{font-size:25px;line-height:1.5}#detail-description{font-size:16px;line-height:1.8;color:#e5cfe0}#detail-links{display:grid;gap:10px;margin:25px 0}.listen{display:block;text-align:center;text-decoration:none;padding:14px;background:#ffc078;color:#271629;font-size:16px;border-radius:10px}.coming{font-size:14px;color:#e6c4a3;border-top:1px solid #ffffff20;padding-top:20px}.return{width:100%;padding:13px;background:transparent;color:#fff0da;border:1px solid #87667d;border-radius:10px;font-size:15px}body.modal-open{overflow:hidden}@media(min-width:850px){.world{border-inline:1px solid #ac724a40}.intro{top:19%}.guide{width:45.9%}}@media(max-width:360px){.spot-tag{font-size:12px;padding:8px}.intro p{font-size:13px}.end{gap:4px 9px}.end img{width:30px;height:30px}.end a,.end button{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.spot{transition:none}}

.scenery{position:relative;transform-origin:50% 12%;will-change:transform}.scenery .brand{z-index:2}@media(prefers-reduced-motion:reduce){.scenery{will-change:auto}}


.guide .character{display:block;position:relative;width:100%;aspect-ratio:5/6;padding:0;border:0;background:transparent;pointer-events:auto;transform-origin:50% 94%;touch-action:manipulation;z-index:1}.guide .character img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.guide .bubble{pointer-events:none}.character:focus-visible{outline:2px solid #ffd193;outline-offset:4px;border-radius:40%}.character:hover{filter:brightness(1.08)}


.sound{position:fixed;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 46px);right:12px;z-index:7;border:1px solid #ddbd9266;background:#1c1324e6;color:#f2ddc7;border-radius:24px;padding:10px 14px;min-height:40px;font-size:12px;box-shadow:0 3px 16px #0005}.sound[aria-pressed="true"]{border-color:#ffc879;color:#ffc879}


/* Hanging Halloween flag: original transparent artist mark on moving cloth. */
.scenery .brand{background:none;box-shadow:none;aspect-ratio:4/5;perspective:700px;filter:drop-shadow(3px 8px 6px #0008)}
.brand::before{content:"";position:absolute;z-index:3;left:-8%;top:-2%;width:116%;height:3%;border-radius:12px;background:linear-gradient(#efcd87,#916032 40%,#2b1814 75%,#b98146);box-shadow:0 2px 3px #0008}
.flag-cloth{display:block;position:relative;width:100%;height:100%;overflow:hidden;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,99% 100%,50% 87%,1% 100%);background:linear-gradient(90deg,#e28739 0 2%,#372039 2% 5%,#ad6038 5% 5.8%,#24142e 5.8% 94.2%,#ad6038 94.2% 95%,#372039 95% 98%,#e28739 98%);animation:flag-flutter 4.6s ease-in-out infinite}
.flag-cloth::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 3px);opacity:.18;pointer-events:none}
.flag-cloth::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#0005,transparent 22%,#ffdca529 36%,#0005 53%,transparent 68%,#ffc47b24 82%,#0004);background-size:200% 100%;mix-blend-mode:soft-light;animation:flag-light 4.6s ease-in-out infinite;pointer-events:none}
.brand .flag-cloth img{position:absolute;top:9%;left:6%;width:88%;height:70%;object-fit:contain;filter:drop-shadow(0 2px 1px #0008)}
.flag-caption{position:absolute;top:5%;width:100%;text-align:center;color:#f4bf77;font-family:Georgia,serif;font-size:clamp(7px,1.65vw,13px);letter-spacing:.12em}
.flag-bat{position:absolute;bottom:15%;left:37%;width:26%;height:8%;fill:#ec9b49}
@keyframes flag-flutter{0%,100%{transform:rotateX(3deg) rotateY(-7deg) skewX(-1deg)}35%{transform:rotateX(-5deg) rotateY(8deg) skewX(2deg)}70%{transform:rotateX(4deg) rotateY(-3deg) skewX(-2deg)}}
@keyframes flag-light{0%,100%{background-position:0% 50%}40%{background-position:85% 50%}75%{background-position:25% 50%}}
.world[data-motion="paused"] .flag-cloth,.world[data-motion="paused"] .flag-cloth::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.flag-cloth,.flag-cloth::after{animation:none}}