/* V41: resolution-independent constant rolling speed + cross-page phase resume.
   Negative animation-delay lets an internal page navigation continue at the
   same point in an in-progress roll instead of snapping back to home. */
.header-brand-art{
  position:relative;
  display:block;
  width:min(520px,100%);
  aspect-ratio:680/72;
  overflow:visible;
}
.header-brand-art .header-logo-base{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain;
  object-position:left center;
}
.header-mascot-roll{
  position:absolute;
  z-index:3;
  display:block;
  height:auto;
  pointer-events:none;
  transform-origin:50% 58%;
  will-change:transform,opacity;
}
.header-mascot-roll.m1{left:59.55%;top:5.5%;width:6.03%!important}
.header-mascot-roll.m2{left:67.10%;top:15.5%;width:6.62%!important}
.header-mascot-roll.m3{left:75.50%;top:2.0%;width:7.94%!important}
.header-mascot-roll.m4{left:84.40%;top:5.0%;width:6.32%!important}
.header-mascot-roll.m5{left:92.00%;top:15.0%;width:7.35%!important}

.header-mascot-roll.is-rolling-out{
  animation:headerMascotRollOutLeft var(--roll-out-duration,4s) linear forwards;
  animation-delay:var(--phase-delay,0ms);
}
.header-mascot-roll.is-away{
  opacity:0;
  visibility:hidden;
  transform:translateX(var(--exit-x,-900px)) rotate(var(--exit-rot,-1800deg));
}
.header-mascot-roll.is-rolling-in{
  visibility:visible;
  animation:headerMascotRollInRight var(--roll-in-duration,4.2s) linear forwards;
  animation-delay:var(--phase-delay,0ms);
}

@keyframes headerMascotRollOutLeft{
  0%{
    opacity:1;
    transform:translateX(0) translateY(0) rotate(0deg);
  }
  20%{transform:translateX(calc(var(--exit-x,-900px) * .20)) translateY(2px) rotate(calc(var(--exit-rot,-1800deg) * .20));}
  40%{transform:translateX(calc(var(--exit-x,-900px) * .40)) translateY(-1px) rotate(calc(var(--exit-rot,-1800deg) * .40));}
  60%{transform:translateX(calc(var(--exit-x,-900px) * .60)) translateY(2px) rotate(calc(var(--exit-rot,-1800deg) * .60));}
  80%{transform:translateX(calc(var(--exit-x,-900px) * .80)) translateY(-1px) rotate(calc(var(--exit-rot,-1800deg) * .80));}
  96%{opacity:1;}
  100%{
    opacity:0;
    transform:translateX(var(--exit-x,-900px)) translateY(0) rotate(var(--exit-rot,-1800deg));
  }
}

@keyframes headerMascotRollInRight{
  0%{
    opacity:0;
    transform:translateX(var(--return-x,900px)) translateY(0) rotate(var(--return-rot,1800deg));
  }
  4%{opacity:1;}
  20%{transform:translateX(calc(var(--return-x,900px) * .80)) translateY(2px) rotate(var(--return-rot-80,1440deg));}
  40%{transform:translateX(calc(var(--return-x,900px) * .60)) translateY(-1px) rotate(var(--return-rot-60,1080deg));}
  60%{transform:translateX(calc(var(--return-x,900px) * .40)) translateY(2px) rotate(var(--return-rot-40,720deg));}
  80%{transform:translateX(calc(var(--return-x,900px) * .20)) translateY(-1px) rotate(var(--return-rot-20,360deg));}
  100%{
    opacity:1;
    transform:translateX(0) translateY(0) rotate(-45deg);
  }
}

.header-mascot-roll.is-tilted-wait{
  opacity:1;
  visibility:visible;
  transform:translateX(0) translateY(0) rotate(-45deg);
}
.header-mascot-roll.is-settling{
  visibility:visible;
  animation:headerMascotSettleHome var(--settle-duration,.55s) ease-out forwards;
  animation-delay:var(--phase-delay,0ms);
}

@keyframes headerMascotSettleHome{
  0%{
    opacity:1;
    transform:translateX(0) translateY(0) rotate(-45deg);
  }
  62%{
    opacity:1;
    transform:translateX(2px) translateY(1px) rotate(6deg);
  }
  100%{
    opacity:1;
    transform:translateX(0) translateY(0) rotate(0deg);
  }
}

/* Keep exactly the same responsive brand width as the existing header. */
@media(max-width:1120px){
  .site-header .header-brand-art{width:min(470px,100%)}
}
@media(max-width:760px){
  .site-header .header-brand-art{width:min(100%,430px)}
}
@media(prefers-reduced-motion:reduce){
  .header-mascot-roll{
    animation:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
}

/* V48: persistent header visuals must not be affected by routed page image fades. */
.site-header .header-logo-base,
.site-header .header-mascot-roll{
  opacity:1!important;
  filter:none!important;
}


/* ===== V52: persistent header visual lock =====
   Desktop header must remain identical while page styles are switched.
*/
.site-header .utility-link svg{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  max-width:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  display:block!important;
  flex:0 0 22px!important;
  fill:#79a600!important
}

@media(min-width:761px){
  .site-header .global-nav{
    position:static!important;
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    margin:0!important;
    padding:16px 0 0!important;
    border:0!important;
    border-top:2px solid rgba(126,171,0,.55)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:visible!important
  }
}


/* ===== V56: restore approved mobile top-right menu ONLY =====
   Copied from the last-known-good index mobile navigation behavior.
   This lives in the persistent header stylesheet so SPA page-style
   switching cannot replace it with legacy inner-page navigation rules.
*/
@media(max-width:760px){
  .site-header .menu-toggle{
    display:block!important;
    margin-left:auto!important;
  }

  .site-header .global-nav{
    display:block!important;
    position:fixed!important;
    z-index:1180!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    padding:18px 12px calc(18px + var(--mobile-dock-h,72px))!important;
    max-height:min(78vh,650px)!important;
    overflow:auto!important;
    border:1px solid rgba(153,204,0,.20)!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 26px 80px rgba(24,47,0,.28)!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(28px) scale(.985)!important;
    transform-origin:50% 100%!important;
    transition:opacity .22s ease,visibility .22s ease,transform .25s ease!important;
  }

  .site-header .global-nav::before{
    content:"メニュー"!important;
    display:block!important;
    margin:0 4px 12px!important;
    color:#405723!important;
    font-size:20px!important;
    font-weight:900!important;
  }

  .site-header .global-nav.is-open{
    display:block!important;
    position:fixed!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }

  .site-header .nav-track{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .site-header .nav-pill{
    height:50px!important;
    min-height:50px!important;
    border-radius:16px!important;
  }

  .site-header .mobile-nav-extra{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:8px!important;
  }

  .site-header .mobile-nav-extra-link{
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:10px 8px!important;
    border:1px solid rgba(72,111,0,.13)!important;
    border-radius:16px!important;
    background:#f8f7f1!important;
    color:#557514!important;
    font-size:14px!important;
    font-weight:800!important;
    text-decoration:none!important;
  }

  .site-header .mobile-nav-extra-link:last-child{
    grid-column:1/-1!important;
  }
}


/* ===== V57: mobile shell breakpoint consistency fix ONLY =====
   The approved mobile UI breakpoint is <=760px.
   Keep backdrop and bottom dock available throughout the same range as
   the top-right menu, including 701-760px on routed inner pages.
*/
@media(max-width:760px){
  :root{--mobile-dock-h:72px}

  body{
    padding-bottom:calc(var(--mobile-dock-h) + env(safe-area-inset-bottom))!important;
  }
  body.nav-open{
    overflow:hidden!important;
    touch-action:none!important;
  }

  .mobile-nav-backdrop{
    display:block!important;
    position:fixed!important;
    z-index:1170!important;
    inset:0!important;
    background:rgba(18,37,0,.34)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
    opacity:0!important;
    visibility:hidden!important;
    transition:opacity .22s ease,visibility .22s ease!important;
  }
  body.nav-open .mobile-nav-backdrop{
    opacity:1!important;
    visibility:visible!important;
  }

  .mobile-dock{
    position:fixed!important;
    z-index:1160!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    height:var(--mobile-dock-h)!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    align-items:stretch!important;
    padding:6px!important;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:23px!important;
    background:rgba(255,255,255,.93)!important;
    box-shadow:0 18px 50px rgba(30,57,0,.20)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  .mobile-dock a,
  .mobile-dock button{
    appearance:none!important;
    border:0!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:4px 2px!important;
    border-radius:16px!important;
    background:transparent!important;
    color:#445330!important;
    text-decoration:none!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1!important;
    touch-action:manipulation!important;
  }
  .mobile-dock a::before,
  .mobile-dock button::before{
    display:grid!important;
    place-items:center!important;
    width:28px!important;
    height:28px!important;
    border-radius:10px!important;
    background:rgba(153,204,0,.10)!important;
    color:#557514!important;
    font-size:17px!important;
    font-weight:700!important;
    line-height:1!important;
  }
  .mobile-dock a[data-page="home"]::before{content:"⌂"!important}
  .mobile-dock a[data-page="forest"]::before{content:"♧"!important}
  .mobile-dock a[data-page="daily"]::before{content:"☀"!important}
  .mobile-dock a[data-page="admission"]::before{content:"✓"!important}
  .mobile-dock button::before{content:"☰"!important}
  .mobile-dock a[aria-current="page"]{
    color:#405723!important;
    background:rgba(153,204,0,.16)!important;
  }
  .mobile-dock a[aria-current="page"]::before{
    background:#99cc00!important;
    color:#203700!important;
  }
  body.nav-open .mobile-dock{z-index:1190!important}
}


/* ===== V58: mobile fixed-menu containing-block fix ONLY =====
   backdrop-filter on the sticky header makes position:fixed descendants
   use the header as their containing block in Chromium/WebKit.
   Disable only the outer header filter on <=760px; the header card itself
   keeps its existing background/border/shadow appearance.
*/
@media(max-width:760px){
  .site-header{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}