.general-page .hero-with-video .town-hero{position:relative;isolation:isolate;overflow:hidden;width:100%;height:auto;aspect-ratio:16/9;container-type:inline-size;background:linear-gradient(#77bce4,#aad8ed);color:#fff}
.town-sky-film{position:absolute;inset:0;z-index:0;pointer-events:none}
.town-sky-film video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0}
.town-sky-film video:first-child{opacity:1}
.town-sun{position:absolute;inset:0;background:linear-gradient(180deg,#eaf6fd22 0%,#e6f4fbcc 28%,#ebf7fbe0 47%,#dceffc55 66%,transparent 82%);pointer-events:none}
.town-atmosphere{position:absolute;inset:0;background:linear-gradient(0deg,#298ac757,transparent 48%);pointer-events:none}
.town-brand{position:absolute;top:15.5%;left:0;width:100%;display:flex;align-items:center;flex-direction:column;gap:clamp(10px,2svh,22px);pointer-events:none}
.town-hero .town-brand h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:500;font-size:clamp(28px,5.3cqw,84px);letter-spacing:.16em;padding-left:.16em;line-height:1.4;margin:0;color:#163f65;text-shadow:none}
.town-brand img{display:block;width:46%;height:auto;min-width:0;filter:none}
.town-service-line{max-width:90%;margin:0;color:#163f65;font:500 clamp(14px,1.25cqw,20px)/1.6 "Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;letter-spacing:.04em;text-align:center;text-wrap:balance}
.town-illustration{position:absolute;width:100%;height:auto;bottom:3%;left:0;overflow:hidden;filter:drop-shadow(0 1px 1px #07568c28)}
.town-illustration path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.town-illustration .outline{stroke-width:1.95;stroke-opacity:1}
.town-illustration .detail{stroke-width:1.15;stroke-opacity:.86}
.town-illustration .fine{stroke-width:.65;stroke-opacity:.36}
.town-illustration .distant{stroke-width:1;stroke-opacity:.16}
.town-illustration .town-washes path{fill:#fff;stroke:none}
.town-illustration .tip{display:none}
.town-bottom-fog{position:absolute;inset:auto 0 -1%;height:10%;background:linear-gradient(0deg,#a4e2ff40,transparent);pointer-events:none}
.town-hero.town-animating .town-brand h1,.town-hero.town-animating .town-brand img,.town-hero.town-animating .town-service-line{opacity:0}

/* The general top opens edge-to-edge, with navigation floating over the sky. */
.general-page .hero-with-video{height:auto;min-height:0;padding:0 0 44px}
.general-page .hero-with-video .town-hero{height:100svh;aspect-ratio:auto;border-radius:0}
.general-page .hero-with-video .hero-destinations{margin:28px auto 0}
.general-page .mission{padding-top:72px}
.general-page .header{background:transparent;color:#fff;box-shadow:none}
.general-page .header .brand img{filter:brightness(0) invert(1) drop-shadow(0 1px 3px #123c5780)}
.general-page .header .desktop-nav a{text-shadow:0 1px 4px #123c5780}
.general-page .header .contact-pill{background:transparent;border:0;color:inherit;padding:9px 0;text-shadow:0 1px 4px #123c5780}
.general-page .header .contact-pill svg{display:none}
.general-page .header.scrolled,.general-page .header:has(#mobile-menu:not([hidden])){background:#fffffff7;color:var(--ink);box-shadow:0 1px 0 #dce7eb}
.general-page .header.scrolled .brand img,.general-page .header:has(#mobile-menu:not([hidden])) .brand img{filter:none}
.general-page .header.scrolled .desktop-nav a,.general-page .header.scrolled .contact-pill{text-shadow:none}
.general-page .header .menu-toggle{color:inherit}
.general-page .header:has(#mobile-menu:not([hidden])) .menu-toggle{color:var(--ink)}
@media(min-width:801px){
 .general-page .hero-with-video .town-hero{min-height:620px}
 .town-brand{top:16%;gap:clamp(26px,3.8svh,40px)}
 .town-hero .town-brand h1{font-size:clamp(36px,3.4cqw,54px);letter-spacing:.12em}
 .town-brand img{width:clamp(490px,49%,760px)}
 .town-illustration{width:min(80%,124svh);left:50%;bottom:1%;transform:translateX(-50%)}
}
@media(min-width:801px) and (max-height:700px) and (min-aspect-ratio:12/5){
 .town-illustration{width:min(80%,100svh);left:50%;transform:translateX(-50%)}
}
@media(max-width:800px){
 .general-page .hero-with-video{height:auto;padding:0 0 32px}
 .general-page .hero-with-video .town-hero{height:100svh;aspect-ratio:auto;border-radius:0}
 .general-page .hero-with-video .hero-destinations{margin:18px auto 0}
 .general-page .mission{padding-top:56px}
 .town-brand{top:24%;gap:18px}
 .town-hero .town-brand h1{font-size:7.7cqw;letter-spacing:.1em}
 .town-brand img{width:84%}
 .town-service-line{max-width:calc(100% - 24px);font-size:clamp(12px,3.5vw,14px);line-height:1.85;letter-spacing:.06em}
 .town-service-line>span:not(.town-service-divider){display:block;white-space:nowrap}
 .town-service-divider{display:none}
 .town-illustration{bottom:18%}
 .town-illustration .fine{stroke-width:.8;stroke-opacity:.3}
 .town-illustration .detail{stroke-width:1.4}
 .town-illustration .outline{stroke-width:2.2}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1100px){
 .general-page .hero-with-video .town-hero{height:max(100svh,580px);min-height:580px}
 .town-brand{top:100px;gap:24px}
 .town-hero .town-brand h1{font-size:clamp(30px,4.5cqw,40px);letter-spacing:.1em}
 .town-brand img{width:min(72%,540px)}
 .town-service-line{max-width:calc(100% - 40px);font-size:14px;line-height:1.8;letter-spacing:.04em;white-space:normal}
 .town-service-line>span:not(.town-service-divider){display:inline;white-space:inherit}
 .town-service-divider{display:inline}
 .town-illustration{width:min(88%,800px);left:50%;bottom:32px;transform:translateX(-50%)}
}

@media(min-width:801px) { .town-illustration { bottom:calc(1% + 80px); } }

/* D layout: retain the existing artwork and place the two entrances in its open space. */
.general-page .hero-with-video { padding-bottom:0; }
.general-page .hero-with-video .hero-destinations-middle {
 position:absolute; z-index:8; top:55%; left:50%; transform:translateX(-50%);
 display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
 width:min(700px,calc(100% - 32px)); height:56px; margin:0; gap:12px;
}
.general-page .hero-destinations-middle .hero-destination {
 justify-content:center; min-height:44px; padding:8px 18px; gap:12px;
 border:1px solid #b4532e; border-radius:6px; background:#b4532e; color:#fff;
 box-shadow:0 3px 14px #173f6426; animation:none;
}
.general-page .hero-destinations-middle .hero-destination:nth-child(2) { background:#145b73; border-color:#145b73; }
.general-page .hero-destinations-middle .hero-destination > .destination-icon {
 flex:0 0 32px; width:32px; height:32px; color:inherit;
}
.general-page .hero-destinations-middle .destination-icon svg { width:100%; height:100%; }
.general-page .hero-destinations-middle .destination-icon .icon-draw { animation:none; stroke-dasharray:none; stroke-dashoffset:0; }
.general-page .hero-destinations-middle .hero-destination > .destination-label {
 font:700 15px/1.4 'Yu Gothic',YuGothic,sans-serif; letter-spacing:0; white-space:nowrap;
}
.general-page .hero-destinations-middle .hero-destination:focus-visible { outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px #173f60; }
@media(hover:hover) {
 .general-page .hero-destinations-middle .hero-destination:hover { background:#963f20; border-color:#963f20; transform:translateY(-2px); }
 .general-page .hero-destinations-middle .hero-destination:nth-child(2):hover { background:#0e465a; border-color:#0e465a; }
}
@media(max-width:800px) {
 .general-page .hero-with-video .hero-destinations-middle { width:calc(100% - 24px); gap:8px; }
 .general-page .hero-destinations-middle .hero-destination { padding:8px 6px; gap:5px; }
 .general-page .hero-destinations-middle .hero-destination > .destination-icon { flex-basis:22px; width:22px; height:22px; }
 .general-page .hero-destinations-middle .hero-destination > .destination-label { font-size:clamp(10.5px,3.15vw,14px); }
}
@media(max-width:359px) {
 .general-page .hero-destinations-middle .hero-destination { flex-direction:column; gap:2px; padding:5px 4px; }
 .general-page .hero-destinations-middle .hero-destination > .destination-icon { flex-basis:20px; width:20px; height:20px; }
}

/* Keep the three foreground blocks in flow, including short screens and zoom. */
.general-page .hero-with-video .town-hero {
 display:flex; flex-direction:column; align-items:center;
 height:auto; min-height:100svh; padding:16svh 0 clamp(32px,9svh,80px);
}
.town-hero .town-brand {
 position:relative; top:auto; left:auto; flex:none; order:1; z-index:1;
}
.general-page .hero-with-video .hero-destinations-middle {
 position:relative; top:auto; left:auto; transform:none; flex:none; order:2;
 height:auto; min-height:56px; margin:24px auto;
}
.town-hero .town-illustration {
 position:relative; left:auto; bottom:auto; transform:none; flex:none; order:3;
 width:min(80%,124svh); margin-top:auto;
}
@media(max-width:800px) {
 .general-page .hero-with-video .town-hero { padding-top:24svh; padding-bottom:18svh; }
 .town-hero .town-illustration { width:100%; }
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1100px) {
 .general-page .hero-with-video .town-hero { padding-top:100px; padding-bottom:32px; }
 .town-hero .town-illustration { width:min(88%,800px); }
}