/* A single moving landscape, with the typography kept in its quiet edge. */
:root{--paper:#eeeae0;--serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#091418;color:var(--paper);font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:1px solid var(--paper);outline-offset:6px}
.header{position:absolute;inset:0 0 auto;z-index:2;padding:clamp(28px,4.8vh,54px) 6vw;pointer-events:none}
.brand{display:inline-flex;align-items:center;gap:17px;pointer-events:auto}
.brand-jp{font-family:var(--serif);font-size:38px;font-weight:400;line-height:1.2}
.brand-en{font-family:Georgia,serif;letter-spacing:.27em;font-size:10px;color:#e0e3de}
main,.hero{width:100%;height:100%;height:100svh;height:100dvh}
.hero{position:relative;overflow:hidden;background:#091418;color:var(--paper);isolation:isolate}
.sea{position:absolute;inset:0;overflow:hidden}
.sea video,.sea img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;object-position:center}
.sea video{pointer-events:none;opacity:0;transition:opacity .35s}.sea video.is-ready{opacity:1}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,16,20,.49),rgba(4,16,20,.19) 37%,transparent 65%),linear-gradient(0deg,rgba(4,14,18,.3),transparent 28%);pointer-events:none}
.hero-copy{position:absolute;left:8.2%;top:48%;transform:translateY(-20%);z-index:1}
.eyebrow{font-family:var(--serif);font-size:11px;letter-spacing:.22em;line-height:1.8;margin:0 0 26px;color:#c0c9c7}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.2vw,54px);letter-spacing:.16em;line-height:1.95;margin:0;text-shadow:0 2px 18px #06121726}
.hero-foot{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));right:5.5%;z-index:2}
#motion{min-width:44px;min-height:44px;padding:10px 0 10px 12px;color:#cad3d0;border:0;background:transparent;display:flex;gap:10px;align-items:center;justify-content:center;font-size:9px;letter-spacing:.12em;opacity:.8;transition:opacity .2s}
#motion:hover,#motion:focus-visible{opacity:1}
.motion-icon{font-size:12px}
@media(max-width:650px){
.header{padding:30px 8%}.brand{gap:13px}.brand-jp{font-size:32px}.brand-en{font-size:9px}
.hero-copy{left:10%;top:34%;transform:none}
.eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:23px}
h1{font-size:clamp(27px,7.4vw,38px);letter-spacing:.11em;line-height:2.05}
.hero-shade{background:linear-gradient(90deg,rgba(4,16,20,.25),transparent 85%),linear-gradient(0deg,rgba(4,14,18,.24),transparent 23%)}
.hero-foot{right:7%;bottom:max(22px,env(safe-area-inset-bottom))}
.motion-label{font-size:8px}
}
@media(max-height:500px) and (min-width:651px){
.header{padding:20px 6vw}.brand-jp{font-size:30px}
.hero-copy{top:37%;transform:none}h1{font-size:30px;line-height:1.7}.eyebrow{font-size:9px;margin-bottom:12px}
.hero-foot{bottom:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}