/* COCONAのローズと黒を、朝の雲と紙の柔らかさへ。 */
:root{--paper:#fff4eb;--ink:#493543;--muted:#79636e;--line:#dfc5cb;--red:#a24d70;color:#493543;background:#fff4eb}
html.loading{background:#fcf2ea}#town-loader{background:radial-gradient(ellipse at 50% 40%,#fffaf4,#f4e0df)}
.loading-bubble,#speech-bubble{border-color:#715667;background:#fff9f3;box-shadow:5px 6px 0 #cfa8b8,6px 7px 0 1px #715667;border-radius:16px 20px 17px 8px}
.loading-bubble:after{background:#fff9f3;border-color:#715667}.loading-speaker,#speech-speaker{background:#b96688;border-color:#715667;text-shadow:none;box-shadow:3px 4px 0 #d3a9b8;border-radius:9px 7px 11px 5px}
.loading-scene>small{font-size:10px;letter-spacing:.22em;margin-top:24px;color:#8f6d7f}.loading-gnome{height:204px;width:146px}
#speech-next{border-color:#715667;border-radius:9px;background:#fff9f3;box-shadow:3px 4px 0 #cfa8b8}#speech-next:before{background:#715667}#speech-next:after{background:#c77f99}
#speech-bubble{min-height:115px;padding:28px 45px;width:min(760px,calc(100vw - 80px));bottom:7vh}#speech-text{font-size:20px;color:#493543;line-height:1.75}#speech-text>.speech-phrase{white-space:normal;display:inline}
#speech-speaker{font-size:21px;min-width:110px;min-height:48px;top:-45px;left:16px}
.town-logo{color:#fff4e6;width:160px;line-height:.88;filter:drop-shadow(0 2px 0 #97677a);text-shadow:-1px -1px #795563,1px -1px #795563,-1px 1px #795563,1px 1px #795563}
.town-logo b{display:block;font-size:35px;letter-spacing:.03em}.town-logo>span{display:block;font-size:20px;letter-spacing:.14em;margin-top:7px}
.masthead nav{display:flex;gap:11px}:is(#help-open,#guide-open,#bgm-toggle){border:2px solid #795a68;background:#fff4e8;color:#674652;box-shadow:0 4px 0 #be91a155;transform:none;width:51px;height:51px;border-radius:50%}
.world-button svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.entry-kicker{position:absolute;top:35px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;color:#714f60;white-space:nowrap}.entry-edition{position:absolute;bottom:22px;width:100%;text-align:center;font-size:10px;letter-spacing:.16em;color:#765665}
.entry-tagline{font-size:17px;font-weight:700;letter-spacing:.13em;color:#593b4b;text-shadow:0 1px 12px #fff8ee}
.enter-panel{bottom:10.5%;gap:14px}.enter-button{width:260px;min-height:68px;border:2px solid #71495e;border-radius:16px;background:#fff2de;color:#72405a;box-shadow:inset 0 2px 0 #fff,0 6px 0 #ba8499,0 10px 22px #86566922;font-size:27px;letter-spacing:.13em;transform:rotate(-1deg)}.enter-button i{font-size:25px;margin-left:35px}.enter-button:before,.enter-button:after{display:none}.enter-button:hover:not(:disabled){background:#fff9ec}
.playing #hero{visibility:hidden;pointer-events:none}.playing #mobile-jump{visibility:visible}.dialog-open #mobile-jump{visibility:hidden}
#mobile-jump{display:none;position:fixed;z-index:7;right:22px;bottom:max(24px,env(safe-area-inset-bottom));width:59px;height:59px;border:2px solid #795a68;background:#fff4e8dd;border-radius:50%;box-shadow:0 3px 0 #be91a1;color:#795a68;align-content:center;justify-items:center}#mobile-jump span{font-size:23px;line-height:1}#mobile-jump small{font-size:9px;font-weight:700;letter-spacing:.08em}
dialog{border:2px solid #a3798c;border-radius:24px;background:#fff7ef;color:var(--ink);box-shadow:0 20px 80px #54314b55}dialog::backdrop{background:#3c213e66;backdrop-filter:blur(6px)}.dialog-close{border-color:#a3798c;background:#fff7ef;color:#684257;z-index:5;width:46px;height:46px;font-size:28px}
:is(#help-dialog,#guide-dialog){width:min(1040px,calc(100vw - 48px));max-height:calc(100dvh - 48px);padding:34px 38px 30px}.guide-dialog-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding-right:50px;border-bottom:1px solid var(--line);padding-bottom:18px}.guide-dialog-header .dialog-close{position:absolute;right:0;top:0}.guide-dialog-header h2{font-size:30px;margin:10px 0 0!important}.guide-dialog-header .kicker{font-size:10px;color:#9a637a}
#guide{max-width:1220px;margin:auto;padding:70px 6% 0}.guide-intro{gap:25px}.guide-intro h2{font-size:46px;line-height:1.5}.guide-intro p{font-size:15px}.restaurant dl{font-size:12px}.restaurant dd{margin:0}
:is(#help-dialog,#guide-dialog) #guide>.restaurant{grid-template-columns:230px minmax(0,1fr);gap:9px 30px;padding:27px 0}.guide-shop-art,:is(#help-dialog,#guide-dialog) .guide-shop-art{border-radius:14px;border:1px solid #dcc4cb;max-height:210px;object-fit:contain;background:#f0e2df}
:is(#help-dialog,#guide-dialog) .restaurant-content p{font-size:14px;line-height:1.9}.restaurant-heading>p{color:#9b5c77}.restaurant-heading h2{color:#634053}.station-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.visit-button,:is(#help-dialog,#guide-dialog) .visit-button{flex:1;min-width:190px;min-height:49px;padding:10px 15px;margin:0;font-size:13px;border:1px solid #795a68;border-radius:8px;background:#ae6683;box-shadow:0 3px 0 #865069}.visit-button:before{width:18px;height:24px}.visit-button span{display:none}
[data-station="fish"]{--guide-accent:#a35377;--guide-shadow:#7e3e5c}[data-station="fire"]{--guide-accent:#b57c64;--guide-shadow:#895d51}[data-station="cafe"]{--guide-accent:#82749c;--guide-shadow:#5f5277}
.gallery-direct{flex:1;border:1px solid #bf93a4;border-radius:8px;padding:11px 15px;font-size:13px;font-weight:700;min-height:49px;background:#fffaf5;display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap}
.static-works{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.enhanced .static-works{display:none}.static-works .work-tile{border-bottom:1px solid var(--line)}
#shop-dialog{width:min(1180px,calc(100vw - 50px));max-width:none;max-height:calc(100dvh - 48px);padding:0;overflow:auto;display:none}#shop-dialog[open]{display:block}.gallery-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:36px 40px 20px;align-items:center}#shop-art{width:100%;height:auto;max-height:270px;object-fit:contain;background:#efe1df;border-radius:15px}#shop-dialog .shop-card-content{padding:20px 10px 20px 32px}#shop-dialog .shop-card-content h2{font-size:30px;margin:10px 0 16px}#shop-dialog .shop-card-content>p{font-size:14px;line-height:1.9}#shop-dialog .shop-card-content>.kicker{font-size:12px;color:#a45d7c}.dish-caption{display:flex;gap:15px;padding:18px 0 0;margin-top:10px}.dish-caption strong{font-size:15px;letter-spacing:.1em}.dish-caption span{font-size:9px;letter-spacing:.1em;color:#977a87}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 23px;padding:16px 40px 32px}.work-tile{padding:0;text-align:left;display:block;min-width:0;border-radius:10px;overflow:hidden;background:#fffaf6;box-shadow:0 2px 8px #72506409}.work-image{position:relative;display:block;background:#271b2b;aspect-ratio:16/10;overflow:hidden}.work-image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s}.work-tile:hover{filter:none!important}.work-tile:hover img{transform:scale(1.04)}.work-image>i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border:1px solid #fff9;border-radius:50%;background:#24152488;color:#fff;font-size:14px;font-style:normal;backdrop-filter:blur(3px)}.work-image>small{position:absolute;left:10px;bottom:8px;font-size:9px;letter-spacing:.04em;background:#271726b3;color:#fff;padding:3px 7px;border-radius:4px}.work-info{display:block;padding:14px 13px 18px}.work-info>small{display:block;font-size:10px;line-height:1.6;color:#8d6b7c;margin-bottom:8px}.work-info>strong{font-size:14px;line-height:1.8;display:block;overflow-wrap:anywhere}
#taste{margin:0 40px 32px;width:calc(100% - 80px);min-height:50px;border-color:#ba8c9e;background:#fffaf5;color:#694457;box-shadow:0 3px 0 #d4b4c0;border-radius:10px;font-size:14px}
#atelier-visuals{padding:10px 40px 30px}#atelier-visuals h3{font-size:21px;margin-bottom:20px}.visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:20px}.visual-grid figure{margin:0;min-width:0}.visual-grid img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}.visual-grid figcaption{font-size:12px;margin-top:9px;color:#8d6b7c}
.about-cocona{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:40px 0 10px;border-top:1px solid var(--line)}.about-cocona>img{width:100%;height:auto;border-radius:14px}.about-cocona h2,:is(#guide-dialog) .about-cocona h2{font-size:26px;margin:10px 0 18px}.about-cocona p{font-size:14px}.about-cocona ul{padding-left:18px;font-size:13px;line-height:2}.process-line{color:#986b7f;font-size:11px!important;letter-spacing:.02em;margin:20px 0}.contact-link{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:15px 20px;background:#a8587c;color:#fff8ef;font-size:14px;border-radius:9px}.social-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:11px}.social-links a{text-decoration:underline;text-underline-offset:4px}.guide-footer p{font-size:11px;line-height:1.8}
.guide-welcome{display:flex;align-items:center;gap:22px;padding:0 0 25px}.help-host{width:92px;height:135px;object-fit:contain}.guide-welcome h2{margin:7px 0!important}.guide-welcome p{font-size:13px}.help-list>div{grid-template-columns:85px 1fr;font-size:14px;line-height:1.9}.guide-link{border-color:#b17c92;color:#995571;font-size:14px}.primary-button,:is(#help-dialog,#guide-dialog)>.primary-button{border-color:#b4889b;background:#fffaf4;color:#6d435b;box-shadow:0 3px 0 #d4b4c0;border-radius:10px}
#video-dialog{width:min(1360px,calc(100vw - 34px));max-width:none;max-height:calc(100dvh - 28px);background:#241c26;color:#fff4ee;padding:0;border:1px solid #a2768f;border-radius:20px}#video-dialog::backdrop{background:#1c111aab;backdrop-filter:blur(10px)}.video-top{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid #ffffff20}.video-top button{color:#fff4ee;min-height:44px;font-size:13px;padding:5px 10px}#video-close{font-size:30px;width:44px}.video-stage{display:flex;justify-content:center;background:#110e13;min-height:240px;padding:0}#video-player{width:100%;position:relative}#video-player.landscape{aspect-ratio:16/9;max-width:min(100%,calc((100dvh - 300px)*16/9))}#video-player.portrait{aspect-ratio:9/16;width:min(100%,calc((100dvh - 270px)*9/16));min-width:180px}#video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-bottom{display:flex;justify-content:space-between;gap:25px;align-items:center;padding:18px 26px 23px}#video-meta{font-size:10px;color:#d2a6bc}#video-title{font-size:20px;margin:6px 0;line-height:1.6}#video-description{font-size:12px;color:#d9c8d1;max-width:850px}#video-external{font-size:11px;text-decoration:underline;text-underline-offset:3px;display:inline-block;margin-top:9px}.video-pagination{display:flex;gap:10px;align-items:center;white-space:nowrap;font-size:12px}.video-pagination button{width:44px;height:44px;border:1px solid #a88297;color:#fff4ee;border-radius:50%;font-size:22px}.video-pagination button:disabled{opacity:.3;cursor:default}
@media(pointer:coarse),(max-width:820px){#mobile-jump{display:grid}}
@media(max-width:820px){
 .town-logo{width:126px;max-width:calc(100vw - 200px)}.town-logo b{font-size:27px}.town-logo>span{font-size:14px;letter-spacing:.12em;margin-top:5px}
 .masthead{top:17px;right:16px}.masthead nav{gap:8px}:is(#help-open,#guide-open,#bgm-toggle){width:44px;height:44px;font-size:24px}.world-button svg{width:23px;height:23px}.entry-kicker{top:88px;font-size:9px;letter-spacing:.12em}.entry-tagline{font-size:14px;white-space:nowrap}.entry-edition{font-size:8px;bottom:20px}.enter-panel{bottom:16%;gap:13px}.enter-button{width:223px;min-height:65px;font-size:25px}
 #speech-bubble{width:calc(100vw - 46px);padding:22px 22px 27px;bottom:94px;min-height:120px}#speech-text{font-size:16px;line-height:1.8}#speech-speaker{min-width:90px;min-height:39px;font-size:18px;top:-38px;left:10px}#speech-next{width:47px;height:48px;right:-10px;bottom:-26px}
 :is(#help-dialog,#guide-dialog){width:calc(100vw - 22px);max-width:none;max-height:calc(100dvh - 26px);padding:24px 20px}.guide-dialog-header h2{font-size:23px!important}.guide-dialog-header .kicker{font-size:8px}.guide-dialog-header{padding-right:40px}.dialog-close{width:44px;height:44px}
 :is(#help-dialog,#guide-dialog) #guide>.restaurant{grid-template-columns:minmax(0,1fr);gap:14px;padding:25px 0}.guide-shop-art,:is(#help-dialog,#guide-dialog) .guide-shop-art{max-height:200px}.restaurant-heading h2{font-size:23px!important}.restaurant-content p{font-size:13px!important}.station-actions{gap:10px}.visit-button,:is(#help-dialog,#guide-dialog) .visit-button{font-size:12px;min-width:170px}.gallery-direct{font-size:12px}.static-works{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
 #shop-dialog{width:calc(100vw - 22px);max-height:calc(100dvh - 26px);border-radius:18px}.gallery-intro{grid-template-columns:1fr;padding:52px 20px 0}#shop-art{max-height:170px}#shop-dialog .shop-card-content{padding:19px 0 9px}#shop-dialog .shop-card-content h2{font-size:25px;margin:7px 0 10px}#shop-dialog .shop-card-content>p{font-size:13px}.dish-caption{padding:12px 0}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:15px 20px 25px;gap:18px 12px}.work-image{aspect-ratio:4/3}.work-info{padding:10px 8px 13px}.work-info>strong{font-size:12px;line-height:1.7}.work-info>small{font-size:9px}.work-image>small{font-size:7px;left:5px;bottom:5px;padding:3px 4px}.work-image>i{width:33px;height:33px;font-size:11px}#taste{margin:0 20px 24px;width:calc(100% - 40px)}#atelier-visuals{padding:0 20px 25px}.visual-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}#atelier-visuals h3{font-size:18px}
 .about-cocona{grid-template-columns:1fr;gap:24px;padding-top:30px}.about-cocona>img{width:130px;border-radius:50%}.about-cocona h2,:is(#guide-dialog) .about-cocona h2{font-size:22px}.about-cocona p{font-size:13px}.guide-footer p{font-size:10px}.help-list>div{grid-template-columns:66px 1fr;gap:8px;font-size:12px}.help-host{width:70px;height:114px}.guide-welcome{gap:14px}.guide-welcome h2{font-size:24px!important}.guide-welcome p{font-size:11px}
 #video-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 16px);border-radius:14px}.video-top{padding:6px 10px}.video-top button{font-size:12px}.video-stage{min-height:0}#video-player.portrait{width:min(100%,calc((100dvh - 335px)*9/16));min-width:155px}#video-player.landscape{max-width:100%}.video-bottom{display:block;padding:13px 17px 17px}#video-title{font-size:15px;line-height:1.65}#video-meta{font-size:9px}#video-description{font-size:11px}.video-pagination{justify-content:center;margin-top:13px}.video-pagination button{height:40px;width:44px}.video-pagination span{min-width:65px;text-align:center}
}
@media(max-width:360px){.town-logo b{font-size:23px}.town-logo>span{font-size:12px}.masthead{right:12px}.masthead nav{gap:5px}.gallery-direct,.visit-button{flex-basis:100%}.work-grid{grid-template-columns:1fr}.entry-tagline{font-size:13px}.guide-dialog-header h2{font-size:21px!important}}
@media(max-height:520px) and (min-width:600px){.entry-kicker{top:20px}.enter-panel{bottom:7%;gap:4px}.entry-tagline{font-size:12px}.enter-button{min-height:44px;font-size:20px;width:190px}.entry-edition{display:none}#speech-bubble{bottom:35px;min-height:85px;padding:15px 30px;width:min(650px,75vw)}#speech-text{font-size:16px}#video-player.portrait{width:130px;min-width:110px}.video-bottom{padding:10px 18px}#video-description{display:none}}
@media(prefers-reduced-motion:reduce){.work-image img{transition:none}}
.primary-button>span[aria-hidden="true"],.primary-button::after{display:none}
.video-pagination button{min-height:44px}

body:not(.enhanced):not(.preparing) #hero-title{max-width:90vw;width:90vw;white-space:normal;text-align:center;font-size:clamp(30px,5.5vw,64px);line-height:1.2}
body:not(.enhanced) #world{background:radial-gradient(ellipse at 60% 30%,#f6dddd,#fff4eb)}body:not(.enhanced) #world:after{display:none}

/* ポップアップの読みやすさ。町の常設UIとは独立した文字サイズ。 */
:is(#help-dialog,#guide-dialog,#shop-dialog,#video-dialog){--popup-body:20px;--popup-label:16px;--popup-note:14px;--popup-title:34px;--popup-work:18px;font-size:var(--popup-body)}
#shop-dialog #shop-description,#guide-dialog #guide>.restaurant .restaurant-content>p{font-size:var(--popup-body)!important;line-height:1.85}
#shop-dialog .shop-card-content h2,#guide-dialog #guide>.restaurant .restaurant-heading h2,#guide-dialog #guide-title,#help-dialog .guide-welcome h2{font-size:var(--popup-title)!important;line-height:1.5;white-space:normal}
#shop-dialog .shop-card-content{padding-right:18px}
#shop-dialog .shop-card-content>.kicker,#guide-dialog #guide>.restaurant .restaurant-heading>p{font-size:var(--popup-label);line-height:1.8}
#shop-dialog .dish-caption{flex-wrap:wrap;align-items:center;gap:8px 18px}
#shop-dialog .dish-caption strong{font-size:18px}
#shop-dialog .dish-caption span{font-size:var(--popup-note);white-space:normal}
#shop-dialog .work-info{padding:16px 15px 20px}
#shop-dialog .work-info>strong{font-size:var(--popup-work);line-height:1.8}
#shop-dialog .work-info>small{font-size:var(--popup-note);line-height:1.75;color:#795c6a}
#shop-dialog .work-image>small{font-size:12px;left:10px;bottom:10px;padding:4px 8px}
#shop-dialog #atelier-visuals h3{font-size:26px}
#shop-dialog .visual-grid figcaption{font-size:var(--popup-label);line-height:1.8;color:#795c6a}
#shop-dialog #taste,#guide-dialog>.primary-button,#help-dialog>.primary-button{font-size:18px;line-height:1.6;min-height:58px}
#guide-dialog .visit-button,#guide-dialog .gallery-direct{font-size:18px;line-height:1.6;min-height:58px;margin:0;padding:12px 16px}
#guide-dialog .guide-dialog-header .kicker,#help-dialog .kicker{font-size:var(--popup-note)}
#guide-dialog .about-cocona h2{font-size:30px}
#guide-dialog .about-cocona p,#guide-dialog .about-cocona ul{font-size:var(--popup-body);line-height:1.85}
#guide-dialog .about-cocona .process-line{font-size:var(--popup-label)!important}
#guide-dialog .contact-link{font-size:18px;line-height:1.7}
#guide-dialog .social-links,#guide-dialog #guide .guide-footer p{font-size:var(--popup-label);line-height:1.8}
#help-dialog .guide-welcome>div{min-width:0}
#help-dialog .guide-welcome p{font-size:var(--popup-body);line-height:1.8}
#help-dialog .help-list>div{grid-template-columns:108px minmax(0,1fr);font-size:var(--popup-body);line-height:1.85}
#help-dialog .guide-link{font-size:18px;line-height:1.7;min-height:56px}
#video-dialog .video-top{position:sticky;top:0;z-index:5;background:#241c26}
#video-dialog .video-top button:not(#video-close){font-size:var(--popup-label)}
#video-dialog #video-meta{font-size:var(--popup-note);line-height:1.8}
#video-dialog #video-title{font-size:26px;line-height:1.65}
#video-dialog #video-description{display:block;font-size:var(--popup-body);line-height:1.8}
#video-dialog #video-external,#video-dialog .video-pagination{font-size:var(--popup-label);line-height:1.8}
#video-dialog .video-bottom>div:first-child{min-width:0}
@media(max-width:820px){
 :is(#help-dialog,#guide-dialog,#shop-dialog,#video-dialog){--popup-body:17px;--popup-label:15px;--popup-note:13px;--popup-title:28px;--popup-work:17px}
 #shop-dialog .shop-card-content{padding-right:0}
 #shop-dialog #atelier-visuals h3{font-size:23px}
 #shop-dialog #taste,#guide-dialog>.primary-button,#help-dialog>.primary-button,#guide-dialog .visit-button,#guide-dialog .gallery-direct,#guide-dialog .contact-link,#help-dialog .guide-link{font-size:17px}
 #guide-dialog .about-cocona h2{font-size:26px}
 #help-dialog .help-list>div{grid-template-columns:78px minmax(0,1fr);gap:12px}
 #help-dialog .guide-welcome{align-items:flex-start}
 #help-dialog .help-host{width:58px;flex-shrink:0}
 #video-dialog #video-title{font-size:22px}
}
@media(max-width:600px){
 #shop-dialog .work-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 #shop-dialog .work-image{aspect-ratio:16/10}
 #shop-dialog .work-image>i{width:44px;height:44px;font-size:14px}
 #guide-dialog .station-actions{flex-direction:column}
 #guide-dialog .visit-button,#guide-dialog .gallery-direct{width:100%;min-width:0;flex-basis:auto}
}
#shop-dialog .work-tile{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
@media(max-width:820px){#help-dialog .help-list>div{grid-template-columns:90px minmax(0,1fr)}}