html, body { margin: 0; width: 100%; min-height: 100%; background: #e5e9e8; }
body.home { overflow-x: clip; overflow-y: visible; }
.kw-opening { 
    position: relative;
    width: 100%;
height: 100vh;
    height: 100dvh;
    min-height: 320px;
    overflow: hidden;
    isolation: isolate;
    background: #e5e9e8;
}
.kw-opening__scene { position: absolute; inset: 0; opacity: 0; }
.kw-opening__background, .kw-opening__clouds { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kw-opening__background { object-fit: cover; object-position: 50% 56%; }
.kw-opening__clouds { pointer-events: none; }
.kw-opening__controls :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.kw-opening__message { position: absolute; left: 20px; bottom: 20px; margin: 0; max-width: 65%; color: #193c39; font: 12px/1.6 sans-serif; }
.kw-opening__controls { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; max-width: calc(100% - 64px); padding: 12px; background: #153633db; color: white; font: 12px/1.5 sans-serif; }
.kw-opening__controls input { width: 180px; max-width: 40vw; }
.kw-opening__controls button { padding: 6px 10px; cursor: pointer; }
.kw-opening__controls { display: block; width: 380px; max-height: calc(100svh - 64px); overflow: auto; box-sizing: border-box; }
.kw-opening__transport { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kw-opening__controls summary { padding: 10px 0 2px; cursor: pointer; }
.kw-opening__settings { display: grid; gap: 8px; padding: 12px 0; }
.kw-opening__settings label { display: grid; grid-template-columns: 1fr 110px 36px; align-items: center; gap: 4px; }
.kw-opening__settings input { width: 110px; max-width: 100%; }
.kw-opening__settings output { text-align: right; }

.kw-opening--story { width: 100vw; max-width: 100%; height: 620svh; overflow: visible; }
.kw-opening--story .kw-opening__sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; }
body.admin-bar .kw-opening--story .kw-opening__sticky { top: 32px; height: 100dvh;}
.kw-opening--story .kw-opening__scene { position: absolute; inset: 0; }
.kw-opening__veil { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.kw-opening__story { position: absolute; inset: 0; z-index: 2; color: #f4e5c4; font-family: "Shippori Mincho", "Yu Mincho", serif; pointer-events: none; }
.kw-opening__story-heading, .kw-opening__story-copy { position: absolute; margin: 0; opacity: 0; visibility: hidden; }
.kw-opening__story-heading { top: 50%; left: 50%; width: min(90vw, 1300px); text-align: center; transform: translate(-50%, -50%); }
.kw-opening__story-en { margin: 0 0 20px; font-family: var(--font-family02); font-size: var(--font-size32); line-height: 1.1; color: var(--color-font-light); }
.kw-opening__story-ja { margin: 0; font-family: var(--font-family03); font-size: var(--font-size56); letter-spacing: .03em; color: var(--color-font-light); }
.kw-opening__story-copy { font-size: var(--font-size22); line-height: 1.5; letter-spacing: .03em; color: var(--color-font-light); }
.kw-opening__story-copy--left { top: 30%; left: 13%; }
.kw-opening__story-copy--right { top: 46%; right: 12%; }
.kw-opening__story-copy--center-left { top: 58%; left: 24%; }
.kw-opening__story-copy--center { top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); white-space: nowrap; }
.kw-opening--story .kw-opening__message { z-index: 3; }
@media (max-width: 782px) { body.admin-bar .kw-opening--story .kw-opening__sticky { top: 46px; height: calc(100svh - 46px); } }
@media (max-width: 767px) { .kw-opening--story { height: 520svh;} .kw-opening__story-copy { left: 8%; right: 8%; top: 50%; font-size: 16px; } .kw-opening__story-copy--center { left: 50%; right: auto; transform: translate(-50%, -50%); width: 84%; text-align: center; white-space: normal; } }