/* ROAVERN's wordmark and short first-visit introduction. */
.wordmark{display:flex;flex-direction:column;gap:5px;font-size:25px;line-height:1;letter-spacing:-.06em}
.brand-kind{font:600 10px/1 BarlowCondensed,Arial,sans-serif;letter-spacing:.3em;padding-left:1px}
.footer-wordmark{display:inline-flex;flex-direction:column;gap:14px;font-size:clamp(55px,11vw,190px);line-height:1;letter-spacing:-.065em}
.footer-brand-kind{font:600 clamp(13px,1.8vw,28px)/1 BarlowCondensed,Arial,sans-serif;letter-spacing:.3em;padding-left:3px}
.menu-brand{font:400 24px/1 var(--display);letter-spacing:-.055em}.menu-brand small{display:block;font:600 10px/1 BarlowCondensed,Arial,sans-serif;letter-spacing:.3em;margin-top:7px}
.brand-opening{display:none}
.opening-active{overflow:hidden}
.opening-active .brand-opening{display:grid;position:fixed;inset:0;z-index:100;background:#151513;color:#f0eee7;place-items:center;outline:none}
.opening-lockup{display:flex;flex-direction:column;align-items:center;gap:18px;transform:translateY(-5%)}
.opening-name-mask{overflow:hidden;padding:.08em .03em;font:400 clamp(52px,9vw,160px)/1 var(--display);letter-spacing:-.06em}
.opening-name{display:block;animation:opening-name-in .75s cubic-bezier(.16,1,.3,1) .08s both}
.opening-name>span{color:var(--accent)}
.opening-kind{font:600 clamp(13px,1.4vw,23px)/1 BarlowCondensed,Arial,sans-serif;letter-spacing:.4em;padding-left:.4em;animation:opening-kind-in .55s ease-out .32s both}
.opening-skip{position:absolute;right:var(--gutter);bottom:max(28px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:24px;min-height:44px;padding:10px 2px;background:transparent;font-size:12px;border-bottom:1px solid #f0eee74d}
.opening-skip>span{font-size:20px}
.opening-active:not(.opening-revealing) .hero-word,.opening-active:not(.opening-revealing) .japanese-lead,.opening-active:not(.opening-revealing) .hero-bottom{animation-play-state:paused!important}
.opening-revealing .brand-opening{animation:opening-curtain-out .65s cubic-bezier(.76,0,.24,1) both;pointer-events:none}
.opening-revealing .opening-lockup{animation:opening-logo-out .3s ease-in both}
.opening-revealing .opening-skip{opacity:0}
@keyframes opening-name-in{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes opening-kind-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes opening-curtain-out{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes opening-logo-out{to{opacity:0;transform:translateY(-25px)}}
@media(max-width:767px){.wordmark{font-size:22px}.brand-kind{font-size:9px}.opening-lockup{gap:14px}.opening-name-mask{font-size:12vw}.opening-kind{font-size:12px}.footer-wordmark{font-size:11.6vw}.footer-brand-kind{font-size:13px}.site-header{gap:14px}}
@media(min-width:768px) and (max-width:1050px){.wordmark{font-size:22px}}
@media(prefers-reduced-motion:reduce){.brand-opening{display:none!important}.opening-active{overflow:auto}}

#main:focus{outline:none}