.stage{position:relative;height:500vh}
.sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.lane{display:flex;height:100%;will-change:transform;transform:translate3d(0,0,0);transition:transform .72s cubic-bezier(.22,.75,.25,1)}
.panel{
  flex:0 0 100vw;height:100svh;position:relative;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--head-h) + clamp(28px,5vh,62px)) clamp(28px,8vw,132px) calc(var(--foot-h) + clamp(24px,4vh,48px));
  border-right:1px solid var(--water);overflow:hidden;background:var(--paper);
}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}


.reveal{opacity:0;transform:translateY(18px);transition:opacity .68s ease-out,transform .68s ease-out}
.panel.is-active .reveal{opacity:1;transform:none}

@media (max-height:800px) and (min-width:821px){
  .panel{padding-top:calc(var(--head-h) + 20px);padding-bottom:calc(var(--foot-h) + 22px)}
}


@media (max-width:820px){
  .stage{height:auto!important}.sticky{position:static;height:auto;overflow:visible}.lane{display:block;height:auto;transform:none!important;transition:none}
  .panel{width:100%;height:auto;min-height:auto;padding:106px 22px 74px;border-right:none;border-bottom:1px solid var(--water);overflow:hidden}
  .panel .reveal{opacity:1;transform:none;transition:none}
}




.panel > .num{display:none!important}



@media (max-width:820px){

  .panel{padding-left:24px!important;padding-right:24px!important;border-bottom:0!important}
}



@media (max-width:820px){
  .panel h2{text-align:center!important}

  
  .panel .btn,footer>.btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:11px!important;min-height:48px!important;height:48px!important;padding:0 18px!important;border:1px solid var(--navy)!important;border-radius:999px!important;background:var(--navy)!important;color:var(--paper)!important;box-shadow:0 8px 18px rgba(33,26,60,.11)!important;font-family:"Noto Sans JP",sans-serif!important;font-size:17px!important;font-weight:400!important;line-height:1!important;letter-spacing:.035em!important;text-decoration:none!important;white-space:nowrap!important}
  .panel .btn::after,footer>.btn::after{content:"→"!important;display:inline-block!important;margin:0 0 0 4px!important;font-family:"Noto Serif JP",serif!important;font-size:24px!important;font-weight:500!important;line-height:1!important;transform:translateY(-1px)!important}
  .panel .btn:hover,.panel .btn:focus-visible,footer>.btn:hover,footer>.btn:focus-visible{background:var(--paper)!important;color:var(--navy)!important;transform:translateY(-1px)!important}
}



@media (max-width:820px){

  
  .panel .btn,footer>.btn{gap:9px!important;padding-left:18px!important;padding-right:18px!important;letter-spacing:.018em!important;line-height:1!important}
  .panel .btn::after,footer>.btn::after{margin-left:6px!important;font-size:20px!important;line-height:1!important;transform:none!important}
}

@media (max-width:820px){

  
  .panel .btn,#openLogin.mobile-login-dock,.mobile-nav-login{font-family:"Noto Serif JP",serif!important;font-size:14px!important;font-weight:400!important;letter-spacing:.035em!important}
  .panel .btn::after{font-size:17px!important;line-height:1!important;margin-left:5px!important}
}

@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  body .lane{transition:transform .9s cubic-bezier(.65,0,.35,1) .15s!important}
}