/* Native-scroll transitions. Load after style.css. */
header.site-scroll-header{position:fixed;top:0;left:0;right:0;z-index:40;opacity:1;transform:translateY(0);pointer-events:auto;transition:height .3s cubic-bezier(.33,1,.68,1),padding .3s cubic-bezier(.33,1,.68,1),color .3s cubic-bezier(.33,1,.68,1),background-color .3s cubic-bezier(.33,1,.68,1),border-radius .3s cubic-bezier(.33,1,.68,1),transform .3s cubic-bezier(.33,1,.68,1),opacity .3s cubic-bezier(.33,1,.68,1)}
header.site-scroll-header[data-phase="full-top"]{height:104px;background:#103d9c12;color:#fff;border-radius:0;border-bottom-color:#ffffff24}
header.site-scroll-header[data-phase^="rounded"]{top:8px;left:8px;right:8px;height:64px;padding-top:0;padding-bottom:0;background:#f5f4f0f5;color:var(--ink,#22231f);border:1px solid #dbddd43d;border-radius:8px;box-shadow:0 4px 22px #171f3b0a;backdrop-filter:blur(18px)}
header.site-scroll-header[data-phase^="rounded"] .brand-logo{filter:none;width:108px;height:36px}
header.site-scroll-header[data-phase^="rounded"] .contact-link{background:#3154f0;color:white}
header.site-scroll-header[data-phase^="rounded"] .menu-toggle{color:var(--ink,#22231f)}
header.site-scroll-header[data-phase="rounded-hidden"]{opacity:0;transform:translateY(-24px);pointer-events:none}
.hero-scroll-stage{position:relative;background:var(--paper,#f5f4f0);overflow-anchor:none}
.hero-scroll-stage.is-scroll-active{height:var(--hero-stage-height,180svh)}
.hero-scroll-stage.is-scroll-active>.hero{position:sticky;top:0;height:var(--hero-viewport-height,100svh);min-height:0;max-height:none;background:var(--paper,#f5f4f0);padding-top:clamp(110px,16svh,146px);padding-bottom:clamp(28px,5svh,47px);overflow:hidden}
.hero-scroll-stage.is-scroll-active .hero-artwork{clip-path:var(--hero-portal-clip,inset(0 round 0));will-change:clip-path;transform:none;transition:none}
.hero-scroll-stage.is-scroll-active .hero-content{opacity:var(--hero-copy-opacity,1);transform:translateY(var(--hero-copy-y,0));transition:none;will-change:opacity,transform}
.hero-scroll-stage.is-scroll-active .hero-top,.hero-scroll-stage.is-scroll-active .hero-bottom{opacity:var(--hero-ui-opacity,1);transition:none}
.hero-scroll-caption{display:none}
.hero-scroll-stage.is-scroll-active .hero-scroll-caption{position:absolute;display:block;z-index:2;top:50%;left:6.5%;width:39%;opacity:var(--hero-caption-opacity,0);transform:translateY(calc(-50% + var(--hero-caption-y,24px)));pointer-events:none;color:var(--ink,#22231f)}
.hero-scroll-caption p{font-family:'Noto Sans JP',sans-serif;font-size:clamp(30px,3.7vw,56px);font-weight:800;line-height:1.6;letter-spacing:-.06em;margin:0}
body.motion-paused header.site-scroll-header,body.motion-paused .hero-scroll-stage *,body.motion-paused .hero-scroll-caption{transition:none!important}
@media(max-width:1050px){header.site-scroll-header[data-phase^="rounded"]{padding-left:4%;padding-right:4%}.hero-scroll-caption p{font-size:clamp(27px,3.9vw,40px)}}
@media(max-width:700px){header.site-scroll-header[data-phase="full-top"]{height:82px}header.site-scroll-header[data-phase^="rounded"]{height:56px;left:6px;right:6px;top:6px;padding-left:5%;padding-right:5%}header.site-scroll-header[data-phase^="rounded"] .brand-logo{width:93px;height:31px}header.site-scroll-header[data-phase^="rounded"] nav{top:55px;background:#f5f4f0fa;color:var(--ink,#22231f);border:0;border-top:1px solid #d8dcd1;border-radius:0 0 8px 8px;box-shadow:0 12px 20px #171f3b0a}header.site-scroll-header[data-phase="full-top"] nav{top:82px}.hero-scroll-stage.is-scroll-active>.hero{padding-top:114px;padding-bottom:38px}.hero-scroll-stage.is-scroll-active .hero-scroll-caption{top:27%;left:6%;width:88%;transform:translateY(var(--hero-caption-y,24px));text-align:left}.hero-scroll-caption p{font-size:32px;line-height:1.55}}
@media(max-height:500px){.hero-scroll-stage.is-scroll-active>.hero{padding-top:102px;padding-bottom:24px}.hero-scroll-caption p{font-size:clamp(24px,3.5vw,38px)}.hero-scroll-stage.is-scroll-active .hero-scroll-caption{top:50%}}
@media(prefers-reduced-motion:reduce){header.site-scroll-header{transition:none!important}.hero-scroll-stage.is-scroll-active .hero-artwork{will-change:auto}}
@media(max-width:700px) and (max-height:500px){.hero-scroll-stage.is-scroll-active .hero-scroll-caption{top:17%}.hero-scroll-caption p{font-size:25px;line-height:1.5}}