:root{color-scheme:light;--paper:#f3ead8;--brass:#b8923a;--blue:#9fc3d9;--ink:#2a2622;font-family:"游明朝","Hiragino Mincho ProN","Noto Serif JP",serif;color:var(--ink);background:color-mix(in srgb,var(--paper) 43%,var(--ink))}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{border:0;background:none}button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;flex:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app{position:relative;isolation:isolate;width:min(100vw,480px,56.25svh);aspect-ratio:9/16;display:grid;grid-template-rows:minmax(0,1fr) 64px;overflow:hidden;background:var(--paper);box-shadow:0 12px 70px #2a26223b;container-type:inline-size}#screens{position:relative;min-height:0;isolation:isolate}.screen{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 250ms ease,visibility 0s linear 250ms}.screen.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 250ms ease;z-index:1}.frame-screen{background:var(--paper)}.frame-screen iframe{width:100%;height:100%;display:block;border:0}.paper-screen{background:radial-gradient(ellipse at 85% 30%,#9fc3d926,transparent 55%),linear-gradient(120deg,#f3ead8,#f3ead8d9);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b8923a55 transparent}
.home-background,.home-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;pointer-events:none}.home-shade{background:linear-gradient(180deg,#2a262277 0%,#2a262249 32%,#2a262200 52%,#f3ead85c 65%,#f3ead8f5 81%,var(--paper) 95%)}.home-border{position:absolute;inset:13px 13px 0;border:1px solid #f3ead850;border-bottom:0;pointer-events:none}.home-heading{position:absolute;top:6.1%;left:5%;right:5%;text-align:center;color:var(--paper);text-shadow:0 2px 18px #2a262270}.eyebrow{font-size:9px;letter-spacing:.23em;font-weight:400;margin:0;line-height:1.6}.home-heading .eyebrow{font-size:2.05cqw;letter-spacing:.27em}.title-crest{width:41px;height:41px;margin:17px 0 10px;color:var(--paper);stroke-width:.9}h1,h2,p{overflow-wrap:anywhere}h1,h2{font-weight:400}h1{margin:0;line-height:1.65;letter-spacing:.14em}h1 span{display:block;font-size:5.25cqw}h1 strong{display:block;font-size:7.1cqw;font-weight:500;letter-spacing:.065em}.home-tagline{font-size:2.55cqw;letter-spacing:.1em;margin-top:12px}.home-place{position:absolute;top:57%;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--paper);font-size:2.25cqw;letter-spacing:.12em;text-shadow:0 1px 5px var(--ink)}.home-place span{width:19px;height:1px;background:#f3ead899}.home-bottom{position:absolute;bottom:3.9%;left:8%;right:8%;text-align:center}#journey-line{font-size:3cqw;letter-spacing:.09em;line-height:1.7;margin:0 0 17px;max-height:3.4em;overflow:hidden}.journey-button{display:flex;align-items:center;width:100%;height:54px;padding:0 18px;background:var(--ink);color:var(--paper);border:1px solid var(--brass);outline:1px solid #b8923a77;outline-offset:3px;box-shadow:0 4px 15px #2a262218;font-size:3.65cqw;letter-spacing:.16em}.journey-button>.icon{color:var(--brass);width:21px;height:21px}.journey-button span{flex:1}.journey-button .arrow{width:20px;stroke-width:1}.journey-button:hover{background:color-mix(in srgb,var(--ink) 85%,var(--brass))}.text-button{min-height:34px;text-decoration:underline;text-underline-offset:4px;font-size:10px;letter-spacing:.04em;opacity:.65;margin-top:5px}.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.home-cards:has(> :only-child),.home-cards:has(> [hidden]){grid-template-columns:1fr}.home-cards:has(> [hidden]):has(> [hidden]:last-child:first-child){display:none}.home-cards:has(> [hidden]):not(:has(> :not([hidden]))){display:none}.home-card{display:flex;gap:10px;align-items:center;text-align:left;min-height:61px;padding:9px 11px;border:1px solid #b8923a60;background:#f3ead878}.home-card>.icon{width:21px;height:21px;color:var(--brass)}.home-card>span:not(.card-arrow){font-size:3cqw;white-space:nowrap}.home-card small{display:block;font-size:2.05cqw;margin-bottom:4px;opacity:.6;letter-spacing:.07em}.card-arrow{margin-left:auto;color:var(--brass)}#home-footnote{font-size:2.3cqw;letter-spacing:.025em;opacity:.6;margin:16px 0 0}.home-bottom:has(#restart-story:not([hidden])) #home-footnote{display:none}.home-bottom:has(.home-card:not([hidden])){bottom:3.5%}#screen-home:has(.home-card:not([hidden])) .home-place{top:51%}
#navigation{position:relative;z-index:10;display:flex;align-items:stretch;height:64px;border-top:1px solid #b8923a99;background:linear-gradient(110deg,var(--paper),#f3ead8f5);box-shadow:0 -4px 20px #2a262206;padding:0 12px}.nav-home{width:47px;flex:none;display:grid;place-items:center;margin-right:10px;position:relative;color:#2a262280}.nav-home:after{content:"";height:26px;width:1px;background:#b8923a40;position:absolute;right:-5px}.nav-home .icon{width:31px;height:31px}.nav-tab{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;letter-spacing:.14em;color:#2a262291}.nav-tab .icon{width:23px;height:23px}.nav-icon{display:block;position:relative;height:24px}.nav-tab[aria-current="page"],.nav-home[aria-current="page"]{color:var(--brass)}.nav-tab[aria-current="page"]:before{content:"";position:absolute;top:0;width:24px;height:2px;background:var(--brass)}.nav-tab.locked{color:#2a262249}.nav-tab .nav-lock{width:11px;height:11px;position:absolute;right:-8px;bottom:-1px;background:var(--paper);stroke-width:1.3}.nav-tab:not(.locked) .nav-lock{display:none}.nav-tab.unlock-glow .nav-icon{animation:unlock-glow 1.8s ease-out}.nav-tab.is-playing .music-icon{animation:record-turn 12s linear infinite}@keyframes unlock-glow{0%,100%{filter:drop-shadow(0 0 0 #b8923a00)}35%{color:var(--brass);filter:drop-shadow(0 0 7px #b8923a) drop-shadow(0 0 12px #9fc3d9);transform:scale(1.15)}}@keyframes record-turn{to{transform:rotate(360deg)}}
.page-heading{padding:40px 27px 0}.page-heading .eyebrow{color:var(--brass);font-size:8px}.page-heading h2{font-size:25px;letter-spacing:.08em;margin:12px 0 10px}.page-heading>p:last-child{font-size:11px;letter-spacing:.05em;opacity:.65}.library-ornament{display:flex;gap:15px;align-items:center;justify-content:center;margin:32px 28px;color:var(--brass)}.library-ornament span{flex:1;height:1px;background:#b8923a50}.library-ornament .icon{height:38px;width:38px;stroke-width:.8}.collection-heading{margin:0 27px 12px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em}.collection-heading>span:last-child{font-size:9px;color:var(--brass);font-variant-numeric:tabular-nums}#song-list{padding:0 22px}.song-row{width:100%;display:flex;align-items:center;gap:16px;padding:19px 4px;text-align:left;border-block-start:1px solid #b8923a40}.song-row:last-child{border-bottom:1px solid #b8923a40}.song-copy{flex:1;min-width:0}.song-copy strong{display:block;font-size:15px;font-weight:400;line-height:1.65}.song-copy small{display:block;font-size:10px;margin-top:6px;opacity:.6}.song-row>.icon{width:20px;height:20px;color:var(--brass)}.song-row[aria-current="true"] .song-copy strong{color:var(--brass)}.disc{border-radius:50%;position:relative;overflow:hidden;border:1px solid #b8923ab3;background:repeating-radial-gradient(circle,#b8923a 0 2px,#b8923a99 3px 4px);box-shadow:inset 0 0 0 4px #f3ead8a0,0 5px 15px #2a262218;animation:record-turn 32s linear infinite;animation-play-state:paused}.disc img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}.small-disc{width:70px;height:70px;flex:none}.small-disc:after{content:"";position:absolute;inset:46%;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px #f3ead880}.disc.spinning{animation-play-state:running}.library-note{font-size:10px;letter-spacing:.13em;text-align:center;opacity:.48;margin-top:35px}.empty-library{text-align:center;padding:25px 20px}.empty-library>.icon{width:80px;height:80px;color:#b8923a66;stroke-width:.7}.empty-library p{font-size:12px;line-height:2}.empty-library p+p{opacity:.6}.outline-button{border:1px solid #b8923a99;background:#f3ead866;min-height:44px;padding:10px 24px;font-size:12px;letter-spacing:.1em}.outline-button>span{padding-left:20px;color:var(--brass)}.empty-library .outline-button{margin-top:12px}
.now-playing{padding:0 26px 8px}.player-header{height:76px;display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid #b8923a40}.player-header>span{font-size:11px;letter-spacing:.07em}.icon-button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px;color:var(--brass)}#back-library{margin-left:-12px;color:var(--ink)}.player-header .record-number{font-size:8px;color:var(--brass);letter-spacing:.12em}.record-number b{font-weight:400;margin-left:4px}.record-stage{position:relative;width:100%;height:70cqw;max-height:310px;display:grid;place-items:center}.record-art{position:relative;width:64cqw;height:64cqw;max-width:285px;max-height:285px;border:1px solid #b8923a40;border-radius:50%;padding:10px}.record-art:before{content:"";position:absolute;inset:4px;border:1px solid #b8923a25;border-radius:50%;pointer-events:none}.large-disc{width:100%;height:100%;box-shadow:0 6px 20px #2a26221a}.record-pin{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--brass);background:var(--ink);box-shadow:0 0 0 3px #f3ead877}.track-heading{text-align:center}.track-heading>p:first-child{font-size:10px;letter-spacing:.12em;color:var(--brass);margin:4px 0 10px}.track-heading h2{font-size:22px;letter-spacing:.05em;line-height:1.6;margin:0}.track-heading .eyebrow{font-size:7px;opacity:.5;letter-spacing:.23em;margin:9px 0 20px}.transport{padding:0 9px}.times{display:flex;justify-content:space-between;font-size:10px;opacity:.65;font-variant-numeric:tabular-nums;margin-top:1px}.play-controls{display:flex;align-items:center;justify-content:space-between;margin:13px 8px 0}.play-button{height:62px;width:62px;border:1px solid #b8923a99;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;box-shadow:0 3px 12px #2a262215;outline:1px solid #b8923a40;outline-offset:4px}.play-button .icon{width:25px;height:25px;stroke-width:1.6}.loop-button,.mv-button{display:flex;flex-direction:column;gap:6px;min-width:63px}.loop-button span,.mv-button span{font-size:9px;letter-spacing:.02em}.loop-button{color:#2a262275}.loop-button[aria-pressed="true"]{color:var(--brass);position:relative}.loop-button[aria-pressed="true"]:after{content:"";position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:var(--brass)}.mv-button[hidden]{display:flex!important;visibility:hidden}#play-status{font-size:10px;line-height:1.6;text-align:center;min-height:16px;margin:12px 0 0;opacity:.7}#seek{--progress:0%;display:block;width:100%;height:28px;appearance:none;background:transparent;cursor:pointer;margin:0}#seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--brass) var(--progress),#b8923a40 var(--progress))}#seek::-moz-range-track{height:2px;background:#b8923a40}#seek::-moz-range-progress{height:2px;background:var(--brass)}#seek::-webkit-slider-thumb{appearance:none;height:18px;width:18px;margin-top:-8px;background:var(--brass);border:4px solid var(--paper);outline:1px solid var(--brass);clip-path:polygon(35% 0,65% 0,70% 14%,86% 14%,86% 30%,100% 35%,100% 65%,86% 70%,86% 86%,70% 86%,65% 100%,35% 100%,30% 86%,14% 86%,14% 70%,0 65%,0 35%,14% 30%,14% 14%,30% 14%)}#seek::-moz-range-thumb{height:12px;width:12px;border:3px solid var(--paper);border-radius:25%;outline:1px solid var(--brass);background:var(--brass)}#video-wrap{position:relative;width:calc(100% + 28px);aspect-ratio:16/9;background:var(--ink);border:1px solid #b8923a99;box-shadow:0 5px 20px #2a26221a}#music-video{display:block;width:100%;height:100%;object-fit:contain}.close-mv{position:absolute;right:0;bottom:-37px;display:flex;align-items:center;gap:4px;font-size:10px;min-height:36px;color:var(--ink)}.close-mv .icon{width:15px;height:15px}
#toast{position:absolute;z-index:30;left:6%;right:6%;bottom:16px;pointer-events:none;background:var(--ink);border:1px solid #b8923a80;color:var(--paper);padding:14px 16px;text-align:center;font-size:12px;line-height:1.7;opacity:0;transform:translateY(8px);transition:opacity 250ms,transform 250ms;box-shadow:0 4px 20px #2a262220}#toast.visible{opacity:1;transform:translateY(0)}#lock-overlay{position:absolute;inset:0;z-index:20;background:#2a26224a;display:flex;align-items:flex-end;animation:veil-in 200ms ease}#lock-card{position:relative;width:100%;background:var(--paper);padding:0 26px 30px;text-align:center;border-top:1px solid var(--brass);box-shadow:0 -10px 50px #2a262222;animation:card-in 250ms ease-out;overflow:hidden}/* まだ灯っていないランプ。鍵の絵だけだと寂しい（2026-09-22） */#lock-card::before{content:'';display:block;height:132px;margin:0 -26px 18px;background:url('assets/lock_lamp.jpg') center 34%/cover;box-shadow:inset 0 -46px 36px -20px var(--paper)}#lock-close{position:absolute;top:8px;right:8px;color:#2a262299}.lock-emblem{color:var(--brass);width:25px;height:25px;margin-bottom:12px;margin-top:-4px}#lock-card .eyebrow{color:var(--brass);font-size:9px}#lock-title{font-size:15px;line-height:1.9;font-weight:400;margin:14px auto 20px;max-width:250px}#lock-card .outline-button{min-width:190px}@keyframes card-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes veil-in{from{opacity:0}to{opacity:1}}
@media(max-height:650px){.title-crest{margin:8px 0 3px;width:30px;height:30px}.home-heading{top:5%}.home-tagline{margin-top:6px}.home-bottom{bottom:3%}#journey-line{margin-bottom:10px}.journey-button{height:45px}.home-cards{margin-top:12px}.home-card{min-height:48px}.page-heading{padding-top:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:1ms!important}}

/* テーマ曲のトグル（ホーム右上） */
#bgm-toggle { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 4;
  width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid #b8923a88;
  background: #2a262255; color: #f3ead8; font-size: 14px; line-height: 1; cursor: pointer; backdrop-filter: blur(2px); }
#bgm-toggle[aria-pressed="false"] { color: #f3ead866; border-color: #b8923a44; }

/* 日本語の改行を文節で切る（2026-09-21 あやめさん「中途半端なところで改行しない」） */
h1, h2, p, small, #journey-line, .song-copy strong, .song-copy small { line-break: strict; word-break: auto-phrase; overflow-wrap: normal; }