:root { --mint:#d6f4ea; --brown:#433600; --green:#124300; --ink:#433600; --rule:#433600; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:85px; }
body { margin:0; color:var(--ink); background:#fff; font-family:"A-OTF A1 Mincho Std","Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,a { color:inherit; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
a { text-underline-offset:4px; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:2px solid #b56921; outline-offset:5px; }
h1,h2,h3,p,figure { margin:0; }
h2,h3 { font-weight:inherit; }
.flowing-copy { white-space:normal; line-break:strict; word-break:normal; overflow-wrap:break-word; text-wrap:pretty; }
.flowing-copy p { white-space:normal; }
.copy-ending { white-space:nowrap; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.background-slideshow { position:fixed; inset:0; z-index:0; height:100vh; height:100lvh; overflow:hidden; background:#d8eff1; pointer-events:none; }
.background-slide { position:absolute; inset:0; opacity:0; transition:opacity 600ms ease-in-out; }
.background-slide.is-visible { opacity:1; }
.background-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.site-shell { position:relative; max-width:1280px; margin:auto; }
.center-column { position:relative; z-index:2; width:430px; margin:auto; min-height:100vh; background:var(--mint); container-type:inline-size; }
#page { --u:calc(100cqw / 430); }
body:not(.home-route) .center-column { background:#fff; }
body:not(.home-route) .site-footer { display:none; }
.side-art { position:fixed; z-index:1; top:0; height:100vh; height:100lvh; width:calc((min(100vw,1280px) - 430px)/2); overflow:hidden; }
.side-left { left:max(0px,calc((100vw - 1280px)/2)); }
.side-left > a { display:block; width:100%; height:100%; }
.side-left h1 { width:425px; height:800px; position:absolute; left:50%; transform:translateX(-50%); }
.side-left img { display:block; width:100%; height:100%; }
.mobile-art { display:none; }
.site-header { height:60px; display:flex; justify-content:center; align-items:flex-start; padding-top:14px; position:sticky; top:0; z-index:5; pointer-events:none; }
.menu-trigger { pointer-events:auto; background:var(--brown); color:#fff; border:0; border-radius:11px; width:111px; height:22px; display:flex; justify-content:space-between; align-items:center; padding:0 11px; font-size:11px; line-height:22px; }
.menu-trigger img { display:block; width:35px; height:9px; margin-right:0; }
.icon { display:inline-block; flex-shrink:0; width:24px; height:24px; vertical-align:middle; }
.loading { text-align:center; padding:80px 25px; font-size:13px; }
.section-heading { text-align:center; font-size:20px; line-height:30px; letter-spacing:0; white-space:pre-line; }
.about { padding:9px 27px 0; }
.lead-image { display:block; width:60px; height:222px; margin:15px auto 27px; }
.about-copy { width:278px; max-width:100%; margin:0 auto; font-size:14px; line-height:31px; text-align:center; }
.about-preview { height:325px; overflow:hidden; }
.about-preview span { display:block; white-space:pre; height:31px; line-height:14px; }
.about-preview-fluid { display:none; }
.about-full { display:none; }
.about-copy.expanded .about-preview { display:none; }
.about-copy.expanded .about-preview-fluid { display:none; }
.about-copy.expanded .about-full { display:block; }
.about-copy.expanded { max-height:none; display:block; }
.motion-resizing { overflow:hidden; }
.outline-button { display:flex; width:100%; min-height:45px; align-items:center; justify-content:center; padding:8px 14px; border:1px solid var(--rule); border-radius:24px; background:transparent; text-decoration:none; font-size:14px; text-align:center; gap:10px; }
.more { margin-top:24px; font-size:20px; line-height:30px; height:50px; min-height:50px; padding:0 14px; position:relative; border-radius:25px; }
.more .plus { position:absolute; right:16px; width:24px; height:24px; }
.howto { padding:70px 0 0; overflow:hidden; }
.howto > h2 { position:relative; z-index:1; line-height:25px; }
.howto-carousel { position:relative; margin-top:-11px; }
.howto-viewport { width:calc(298 * var(--u)); margin:0 auto; overflow:visible; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; }
.howto-track { display:flex; width:100%; transform:translate3d(-200%,0,0); align-items:stretch; }
.howto-panel { flex:0 0 100%; width:100%; display:flex; padding:0 calc(19 * var(--u)); }
.howto-card { background:#fff; width:100%; min-height:calc(415 * var(--u)); border-radius:calc(27 * var(--u)); padding:calc(38 * var(--u)) calc(35 * var(--u)) calc(27 * var(--u)); text-align:center; }
.howto-card img { width:calc(190 * var(--u)); height:calc(190 * var(--u)); max-width:100%; object-fit:contain; display:block; margin:0 auto calc(24 * var(--u)); }
.howto-number { display:inline-grid; place-items:center; width:calc(22 * var(--u)); height:calc(22 * var(--u)); background:var(--brown); color:#fff; border-radius:50%; margin:0 0 calc(12 * var(--u)); font-size:calc(20 * var(--u)); line-height:calc(22 * var(--u)); }
.howto-title { font-size:calc(20 * var(--u)); line-height:calc(30 * var(--u)); margin:0 auto calc(18 * var(--u)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); width:fit-content; padding:0; }
.howto-copy { font-size:calc(12 * var(--u)); line-height:calc(25 * var(--u)); text-align:justify; text-align-last:left; text-justify:inter-character; text-wrap:wrap; }
.carousel-arrow { position:absolute; top:190px; border:none; border-radius:50%; width:36px; height:36px; background:transparent; padding:0; }
.carousel-arrow .icon { display:block; width:36px; height:36px; }
.howto-carousel .carousel-arrow { z-index:2; top:calc(190 * var(--u)); width:calc(36 * var(--u)); height:calc(36 * var(--u)); }
.howto-carousel .carousel-arrow .icon { width:100%; height:100%; }
.carousel-arrow.previous { left:calc(29 * var(--u)); }
.carousel-arrow.next { right:calc(29 * var(--u)); transform:rotate(180deg); }
.news { padding:60px 52px 0; }
.news-list { margin:50px -2px 0; padding:0; list-style:none; font-size:14px; line-height:20px; }
.news-list li { display:grid; grid-template-columns:74px minmax(0,1fr); align-items:baseline; gap:10px; padding:10px 0; border-top:1px solid var(--brown); }
.news-list li:last-child { border-bottom:1px solid var(--brown); }
.news-list time { white-space:nowrap; }
.news-list a { text-decoration:none; overflow-wrap:break-word; line-break:strict; text-wrap:pretty; }
.news-list a:hover { text-decoration:underline; }
.note-banner { display:block; margin-top:50px; text-decoration:none; }
.note-banner img { display:block; width:100%; height:auto; border-radius:23px; }
.exploring { position:relative; margin-top:calc(85.4285 * var(--u)); }
.exploring-heading { position:absolute; z-index:1; top:calc(80.5715 * var(--u)); left:calc(87 * var(--u)); font-size:calc(10 * var(--u)); line-height:calc(12 * var(--u)); }
.area-card { position:relative; height:calc(var(--card-height) * var(--u)); }
.area-card::before,.area-card::after { content:""; position:absolute; width:100%; left:0; border-top:1px solid var(--brown); top:0; }
.area-card::after { top:calc(var(--rule-gap) * var(--u)); }
.area-card-prologue { --card-height:410; --rule-gap:33.9595; --title-y:33.9595; --copy-x:38; --copy-y:109.5715; --copy-width:278; --button-y:335.5715; }
.area-card-kawamata { --card-height:491.0715; --rule-gap:33.9595; --title-y:35.9615; --copy-x:159; --copy-y:51.5715; --copy-width:242; --button-y:275.5715; --thumbnails-y:350.5715; }
.area-card-iitate { --card-height:459.9285; --rule-gap:40; --title-y:42.5; --copy-x:57; --copy-y:57.5; --copy-width:239; --button-y:276.5; --thumbnails-y:351.5; }
.area-card-minamisoma { --card-height:439.5715; --rule-gap:33.9595; --title-y:38.3965; --copy-x:159; --copy-y:67.5715; --copy-width:229; --button-y:275.5715; --thumbnails-y:350.5715; }
.area-card-title { position:absolute; top:calc(var(--title-y) * var(--u)); left:calc(var(--title-x) * var(--u)); width:calc(var(--title-width) * var(--u)); height:calc(var(--title-height) * var(--u)); }
.area-card-title img { display:block; width:100%; height:100%; }
.xd-lines > span { display:block; white-space:pre; }
.area-card-copy { position:absolute; top:calc(var(--copy-y) * var(--u)); left:calc(var(--copy-x) * var(--u)); width:calc(var(--copy-width) * var(--u)); font-size:calc(12 * var(--u)); }
.area-card-copy > span { height:calc(26 * var(--u)); line-height:calc(12 * var(--u)); }
.area-card-copy.flowing-copy { line-height:calc(26 * var(--u)); margin-top:calc(-7 * var(--u)); }
.area-card-minamisoma .flowing-copy { text-wrap:balance; }
.area-card .outline-button { position:absolute; top:calc(var(--button-y) * var(--u)); left:calc(65 * var(--u)); width:calc(300 * var(--u)); border-radius:calc(20 * var(--u)); height:calc(40 * var(--u)); min-height:0; padding:0 12px; font-size:calc(14 * var(--u)); line-height:calc(24 * var(--u)); gap:calc(3 * var(--u)); }
.area-card .icon { width:calc(24 * var(--u)); height:calc(24 * var(--u)); }
.area-preview-images { position:absolute; top:calc(var(--thumbnails-y) * var(--u)); left:0; width:100%; overflow:hidden; }
.area-preview-track { display:flex; width:max-content; gap:calc(30 * var(--u)); margin-left:calc(-9 * var(--u)); will-change:transform; }
.area-preview-images span { flex:0 0 calc(157 * var(--u)); height:calc(89 * var(--u)); background:#fff; border-radius:calc(13 * var(--u)); }
.area-preview-images img,.story-thumbnails img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.artist { position:relative; height:calc(700 * var(--u)); margin-top:calc(237 * var(--u)); background:var(--brown); color:#fff; }
.artist h2 { position:absolute; top:calc(37 * var(--u)); width:100%; font-size:calc(14 * var(--u)); line-height:calc(18 * var(--u)); }
.artist-photo { position:absolute; top:calc(67 * var(--u)); left:calc(65 * var(--u)); width:calc(300 * var(--u)); height:calc(163 * var(--u)); display:block; object-fit:cover; }
.artist h3 { position:absolute; top:calc(267 * var(--u)); left:calc(76 * var(--u)); font-size:calc(16 * var(--u)); line-height:calc(20 * var(--u)); }
.artist-profile { position:absolute; top:calc(308 * var(--u)); left:calc(76 * var(--u)); width:calc(278 * var(--u)); font-size:calc(12 * var(--u)); }
.artist-profile > span { height:calc(26 * var(--u)); line-height:calc(12 * var(--u)); }
.artist-links { position:absolute; top:calc(605 * var(--u)); left:calc(76 * var(--u)); display:grid; gap:calc(13 * var(--u)); font-size:calc(12 * var(--u)); line-height:calc(12 * var(--u)); }
.artist-links a { display:flex; align-items:center; gap:calc(3 * var(--u)); width:fit-content; height:calc(18 * var(--u)); }
.artist-links .icon { display:block; width:calc(18 * var(--u)); height:calc(18 * var(--u)); }
.privacy { padding:94px 65px 0; }
.privacy h2,.message h2 { font-size:14px; line-height:16px; text-align:center; margin-bottom:20px; }
.privacy-copy { height:303px; overflow:auto; padding:24px 18px; border:1px solid var(--rule); border-radius:13px; white-space:pre-line; font:10px/16px sans-serif; text-align:center; line-break:strict; overflow-wrap:break-word; text-wrap:pretty; }
.message { padding:31px 65px 0; text-align:center; }
.message h2 { margin-bottom:11px; }
.message .outline-button { border-radius:20px; font-size:14px; height:40px; min-height:40px; padding:0 10px; }
.message p { margin-top:4px; font-size:12px; line-height:16px; }
.site-footer { text-align:center; padding:46px 10px 95px; font-size:min(10px,2.3256cqw); line-height:16px; white-space:nowrap; }
.detail-page { --story-action-height:calc(61 * var(--u)); --story-action-radius:calc(31 * var(--u)); background:#fff; padding:0 calc(20 * var(--u)) calc(91 * var(--u)); }
.area-heading { position:relative; height:calc(339 * var(--u)); }
.area-heading h2 { position:absolute; left:calc(22 * var(--u)); top:calc(33.315887 * var(--u)); }
.area-heading h2 img { display:block; width:auto; height:calc(242 * var(--u)); }
.area-map { position:absolute; left:calc(116 * var(--u)); top:calc(154.201416 * var(--u)); width:calc(116.859375 * var(--u)); height:calc(132.020996 * var(--u)); object-fit:contain; }
.detail-iitate .area-map { left:calc(140 * var(--u)); }
.area-intro { width:calc(346 * var(--u)); margin:0 auto; font-size:calc(16 * var(--u)); line-height:calc(35 * var(--u)); letter-spacing:-.05em; height:calc(264 * var(--u)); overflow:hidden; }
.detail-kawamata .area-intro,.detail-iitate .area-intro,.detail-minamisoma .area-intro { height:auto; }
.area-intro-full { display:none; }
.area-intro.expanded { height:auto; }
.area-intro.expanded .area-intro-preview { display:none; }
.area-intro.expanded .area-intro-full { display:block; }
.area-intro.expanded { max-height:none; }
.area-intro .paragraph-gaps p + p { margin-top:calc(35 * var(--u)); }
.detail-page .more { width:calc(376 * var(--u)); height:calc(50 * var(--u)); min-height:0; margin:calc(35 * var(--u)) auto calc(77 * var(--u)); }
.story-thumbnails { margin:0 calc(-20 * var(--u)) calc(54 * var(--u)); padding:0; overflow:hidden; }
.story-thumbnails-track { display:flex; width:max-content; gap:calc(30 * var(--u)); margin-left:calc(-21 * var(--u)); will-change:transform; }
.story-thumbnails button { flex:0 0 calc(157 * var(--u)); height:calc(113.5633 * var(--u)); border:0; border-radius:calc(13 * var(--u)); background:#ddd; padding:0; }
.story-thumbnails img { object-fit:contain; background:#fff; }
.story-card { position:relative; border:1px solid var(--brown); border-radius:calc(11 * var(--u)); height:auto; padding:calc(71 * var(--u)) 0 calc(20 * var(--u)); }
.story-carousel { position:relative; overflow-anchor:none; }
.story-viewport { width:100%; height:100%; overflow:hidden; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; }
.story-track { display:flex; width:100%; height:100%; gap:calc(20 * var(--u)); transform:translate3d(-100%,0,0); }
.story-track > .story-card { flex:0 0 100%; width:100%; }
.story-spot { position:absolute; top:calc(20.7578 * var(--u)); left:-1px; width:calc(100% + 2px); height:calc(30.2422 * var(--u)); border-top:1px solid var(--brown); border-bottom:1px solid var(--brown); text-align:center; font-size:calc(20 * var(--u)); line-height:calc(28.2422 * var(--u)); }
.story-card h3 { width:calc(300 * var(--u)); margin:0 auto; font-size:calc(30 * var(--u)); line-height:1.35; overflow-wrap:break-word; line-break:strict; text-wrap:wrap; }
.story-card h3 > span { height:calc(40 * var(--u)); line-height:calc(30 * var(--u)); }
.story-lead { font-size:14px; line-height:1.9; }
.walking { width:calc(148 * var(--u)); height:calc(23 * var(--u)); margin:calc(14 * var(--u)) auto 0; font-size:calc(12 * var(--u)); line-height:calc(21 * var(--u)); text-align:center; border:1px solid var(--rule); border-radius:calc(14 * var(--u)); }
.walking-route { width:calc(300 * var(--u)); height:auto; padding:calc(3 * var(--u)) calc(6 * var(--u)); font-size:clamp(12px,calc(14 * var(--u)),14px); line-height:1.4; }
.walking-route > span { display:block; }
.walking-unit { white-space:nowrap; overflow-wrap:anywhere; }
.image-placeholder { position:relative; width:calc(300 * var(--u)); height:calc(217 * var(--u)); margin:calc(18 * var(--u)) auto 0; border:1px solid var(--brown); border-radius:calc(13 * var(--u)); }
.image-placeholder img { width:100%; height:100%; object-fit:contain; border-radius:inherit; }
.coming-soon-note { height:100%; display:flex; align-items:center; justify-content:center; padding:calc(15 * var(--u)); font-size:calc(15 * var(--u)); text-align:center; }
.story-card[data-story-state="coming-soon"] .primary-button:disabled { background:#eee; color:var(--brown); border:1px solid var(--brown); }
.empty-stories { text-align:center; padding:40px 0; }
.story-spot { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 calc(12 * var(--u)); }
.story-arrow { position:absolute; top:calc(340 * var(--u)); width:calc(36 * var(--u)); height:calc(36 * var(--u)); border:0; background:transparent; padding:0; }
.story-arrow.previous { left:calc(-10 * var(--u)); }
.story-arrow.next { right:calc(-10 * var(--u)); transform:rotate(180deg); }
.story-carousel > .story-arrow { z-index:2; }
.story-carousel .story-arrow .icon { display:block; width:100%; height:100%; }
.story-card .outline-button { width:calc(300 * var(--u)); height:var(--story-action-height); margin:calc(21 * var(--u)) auto 0; border-radius:var(--story-action-radius); min-height:0; font-size:calc(14 * var(--u)); gap:calc(7 * var(--u)); }
.story-card button:disabled { opacity:1; }
.primary-button { border:none; width:100%; background:var(--green); color:#fff; margin-top:14px; height:40px; padding:8px 12px; border-radius:20px; font-size:14px; line-height:24px; }
.reload-button { background:var(--brown); }
.story-card .primary-button { width:calc(300 * var(--u)); height:var(--story-action-height); border-radius:var(--story-action-radius); margin:calc(13 * var(--u)) auto 0; padding:0; display:flex; align-items:center; justify-content:center; gap:calc(6 * var(--u)); font-size:calc(14 * var(--u)); }
.story-card .reload-button { margin-top:calc(12 * var(--u)); }
.story-card .icon { width:calc(24 * var(--u)); height:calc(24 * var(--u)); }
.arrival-note { width:calc(368 * var(--u)); margin:calc(5 * var(--u)) auto 0; font-size:calc(14 * var(--u)); line-height:calc(20 * var(--u)); letter-spacing:-.05em; text-align:center; }
.story-feedback { width:calc(340 * var(--u)); max-width:calc(100% - 24px); margin:calc(8 * var(--u)) auto 0; font:12px/1.7 sans-serif; overflow-wrap:anywhere; }
.story-storage-warning { margin-top:8px; padding:8px; border:1px solid currentColor; }
.story-gps-status:empty { display:none; }
.loading-page { background:#fff; padding:40px 24px; min-height:350px; font:16px/1.8 sans-serif; }
.loading-page button { margin-top:20px; min-height:44px; }
.area-navigation { display:flex; justify-content:space-between; gap:15px; margin-top:calc(22 * var(--u)); font-size:calc(14 * var(--u)); }
.area-navigation a { display:flex; align-items:center; justify-content:center; gap:calc(8 * var(--u)); width:calc(168 * var(--u)); height:var(--story-action-height); border:1px solid var(--brown); border-radius:var(--story-action-radius); text-decoration:none; }
.area-navigation .icon { width:calc(24 * var(--u)); height:calc(24 * var(--u)); }
.area-navigation a:first-child .icon { transform:rotate(180deg); }
.faq-page { background:#fff; min-height:1200px; padding:40px 32px 60px; }
.faq-item { border-bottom:1px solid #d4d1c9; padding:25px 0; }
.faq-item summary { font-size:18px; line-height:1.8; cursor:pointer; }
.faq-item p { margin-top:18px; font-size:14px; line-height:2; white-space:pre-line; line-break:strict; overflow-wrap:break-word; text-wrap:pretty; }
.map-list { display:grid; gap:12px; margin-top:30px; }
dialog { padding:0; border:0; max-width:none; max-height:none; }
dialog::backdrop { background:rgb(255 255 255 / .85); }
body:has(dialog[open]) { overflow:hidden; }
.close { border:0; background:transparent; position:sticky; float:right; top:8px; margin:8px 18px -52px 0; width:44px; height:44px; padding:8px; z-index:2; color:inherit; }
.cross { display:inline-block; position:relative; width:28px; height:28px; }
.cross::before,.cross::after { content:""; position:absolute; width:100%; height:1px; top:50%; left:0; background:currentColor; transform:rotate(45deg); }
.cross::after { transform:rotate(-45deg); }
.menu-dialog { width:100%; height:fit-content; color:var(--brown); background:var(--mint); margin:auto; padding:0; inset:0; max-height:100dvh; overflow:auto; }
.menu-dialog:focus { outline:none; }
.menu-stage { position:relative; }
.menu-canvas { position:relative; width:100%; aspect-ratio:1280/300; }
.menu-artwork,.menu-labels { position:absolute; inset:0; display:block; width:100%; height:100%; }
.menu-artwork { pointer-events:none; }
.menu-artwork img { display:block; width:100%; height:100%; }
.menu-labels-sp { display:none; }
.menu-labels a { text-decoration:none; color:var(--brown); }
.menu-words { fill:currentColor; pointer-events:none; }
.menu-marker { fill:var(--green); opacity:0; pointer-events:none; }
.menu-link-section:focus-visible { color:#fff; }
.menu-link-section:focus-visible .menu-hit { fill:var(--green); }
.menu-link-area:focus-visible .menu-marker { opacity:1; }
@media(hover:hover) {
  .menu-link-section:hover { color:#fff; }
  .menu-link-section:hover .menu-hit { fill:var(--green); }
  .menu-link-area:hover .menu-marker { opacity:1; }
}
.menu-labels a:focus-visible { outline:none; }
.menu-labels a:focus-visible .menu-hit { stroke:var(--brown); stroke-width:2; }
.menu-dialog .close { position:absolute; float:none; top:8px; right:18px; margin:0; }
.menu-dialog .close:focus-visible { outline:2px solid var(--brown); outline-offset:-2px; }
@media(min-width:801px) {
  .menu-dialog { container-type:inline-size; }
  .menu-dialog::backdrop { background:var(--mint); }
  .menu-stage { --menu-u:calc(100cqw / 1280); padding-block:calc(64 * var(--menu-u)); }
  .menu-dialog .close { top:calc(8 * var(--menu-u)); right:calc(18 * var(--menu-u)); width:calc(44 * var(--menu-u)); height:calc(44 * var(--menu-u)); padding:calc(8 * var(--menu-u)); }
  .menu-dialog .cross { width:calc(28 * var(--menu-u)); height:calc(28 * var(--menu-u)); }
  .menu-dialog .cross::before,.menu-dialog .cross::after { height:var(--menu-u); }
}
.shop-link { display:none; position:absolute; background:transparent; border:0; padding:0; }
.story-dialog { width:calc(100vw - 62px); max-width:1218px; height:738px; background:var(--green); color:#fff; top:0; bottom:auto; margin:30px auto; max-height:calc(100dvh - 60px); overflow:auto; border-radius:16px; }
.story-dialog-inner { position:relative; padding:71px 45px 66px; }
.story-dialog h2 { max-width:622px; margin:0 auto; font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; font-weight:400; font-size:24px; line-height:32px; text-align:center; line-break:strict; overflow-wrap:break-word; text-wrap:balance; }
.story-illustration { width:622px; max-width:100%; aspect-ratio:622/362; margin:33px auto 35px; }
.story-illustration img { display:block; width:100%; height:100%; object-fit:contain; }
.illustration-recovery { max-width:510px; margin:0 auto 24px; font:12px/1.7 sans-serif; }
.illustration-recovery button { margin-top:8px; min-height:44px; padding:8px 14px; color:var(--green); background:#fff; border:0; }
.playback-controls { width:510px; min-height:81px; max-width:100%; margin:0 auto; }
.playback-status { font:12px/1.6 sans-serif; margin-top:12px; min-height:20px; }
.timeline input { width:100%; height:6px; margin:0; display:block; appearance:none; background:transparent; accent-color:#fff; }
.timeline input::-webkit-slider-runnable-track { height:1px; background:#fff; }
.timeline input::-webkit-slider-thumb { appearance:none; width:7px; height:7px; border-radius:50%; background:#fff; margin-top:-3px; }
.timeline input::-moz-range-track { height:1px; background:#fff; }
.timeline input::-moz-range-thumb { width:7px; height:7px; border:0; border-radius:50%; background:#fff; }
.playback-row { display:flex; align-items:center; gap:12px; padding-top:12px; }
.round-play { display:grid; place-items:center; flex:0 0 30px; height:30px; border:none; background:transparent; color:#fff; padding:0; }
.round-play::before { content:""; display:block; width:0; height:0; border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; }
.round-play.is-playing::before { width:12px; height:15px; border:0; border-left:4px solid #fff; border-right:4px solid #fff; }
.time { font:12px sans-serif; }
.volume { display:flex; align-items:center; gap:10px; margin-left:auto; font:12px sans-serif; }
.volume input { width:90px; accent-color:#fff; }
.download-actions { display:flex; gap:10px; max-width:510px; margin:24px auto 0; }
.download-actions button { display:flex; align-items:center; justify-content:center; gap:4px; width:250px; max-width:100%; height:40px; min-height:40px; color:#312d1b; background:#fff; border:0; border-radius:20px; font-size:14px; line-height:20px; letter-spacing:-.05em; padding:0 14px; }
.download-actions button:disabled { opacity:.5; cursor:default; }
.download-status { max-width:510px; margin:12px auto 0; font:12px/1.6 sans-serif; }
.download-actions img { width:24px; height:24px; }
.download-actions .close-bottom { display:none; }
.close-ring { width:18px; height:18px; border:1px solid currentColor; border-radius:50%; margin-left:6px; }
.close-ring::before,.close-ring::after { width:10px; left:3px; }
.mini-player { display:flex; gap:10px; align-items:center; position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:6; width:min(400px,calc(100vw - 24px)); background:var(--brown); color:#fff; padding:12px; font:11px/1.5 sans-serif; border-radius:3px; box-shadow:0 1px 5px #999; }
.mini-player button { border:1px solid #fff; color:#fff; background:transparent; padding:5px; font-size:11px; flex-shrink:0; }
.mini-player span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@keyframes soft-dialog-enter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes soft-backdrop-enter { from { opacity:0; } to { opacity:1; } }
.menu-dialog[open],.story-dialog[open] { animation:soft-dialog-enter 320ms cubic-bezier(.2,.7,.2,1); }
.menu-dialog::backdrop,.story-dialog::backdrop { animation:soft-backdrop-enter 260ms ease-out; }
@media(max-width:800px) {
  .side-art { display:none; }
  .mobile-art { display:block; max-width:430px; height:600px; margin:auto; position:relative; z-index:1; overflow:hidden; }
  .mobile-art > a { display:block; width:100%; height:100%; }
  .mobile-art img { display:block; width:430px; max-width:none; height:auto; position:absolute; left:50%; transform:translateX(-50%); }
  body:not(.home-route) .mobile-art { display:none; }
  .center-column { width:100%; max-width:430px; }
  .menu-dialog { width:min(430px,100vw); margin:0 auto; top:0; bottom:auto; border-radius:0; }
  .menu-canvas { aspect-ratio:430/932; }
  .menu-labels-pc { display:none; }
  .menu-labels-sp { display:block; }
  .shop-link { display:block; left:6.2790698%; top:73.1759657%; width:87.4418605%; height:6.4377682%; opacity:1 !important; }
  .story-dialog { width:calc(100vw - 40px); max-width:390px; height:890px; margin:20px auto; max-height:calc(100dvh - 40px); border-radius:0; }
  .story-dialog-inner { padding:126px 25px 125px; }
  .story-dialog h2 { font-size:24px; line-height:36px; min-height:72px; }
  .story-illustration { margin-top:29px; margin-bottom:60px; }
  .playback-controls { width:300px; }
  .volume { gap:5px; }
  .volume input { width:65px; }
  .playback-row { gap:12px; }
  .download-actions { flex-direction:column; align-items:center; gap:12px; margin-top:57px; }
  .download-actions button { width:250px; border-radius:0; }
  .download-actions .close-bottom { display:flex; }
}
@media(prefers-reduced-motion:reduce) {
  .background-slide { transition:none; }
  .menu-dialog[open],.story-dialog[open],.menu-dialog::backdrop,.story-dialog::backdrop { animation:none; }
}
@media(max-width:370px) {
  .about-preview { display:none; }
  .about-preview-fluid { display:block; min-height:325px; }
  .privacy,.message { padding-left:35px; padding-right:35px; }
  .story-dialog-inner { padding-left:15px; padding-right:15px; }
  .volume { font-size:0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }