
/* Kedaijasa FINAL NAVIGATION */
.header{
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
  height:72px !important; padding:0 32px !important; box-sizing:border-box;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  z-index:100000 !important; background:rgba(244,241,234,.97) !important;
  border-bottom:1px solid rgba(17,17,17,.15) !important;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.text-logo{
  display:block !important; color:#111 !important; text-decoration:none !important;
  font-family:var(--display,Arial,sans-serif) !important; font-weight:800 !important;
  font-size:clamp(18px,2vw,25px) !important; line-height:1 !important;
  letter-spacing:-.075em !important; white-space:nowrap !important; z-index:100002 !important;
}
.text-logo span{color:#e21d2f !important}
.menu-button{
  appearance:none !important; -webkit-appearance:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:10px !important; width:92px !important; height:42px !important; padding:0 12px !important;
  border:1px solid #111 !important; background:#111 !important; color:#fff !important;
  cursor:pointer !important; touch-action:manipulation !important;
  position:relative !important; z-index:100003 !important;
  font:700 10px/1 var(--mono,monospace) !important; letter-spacing:.12em !important;
}
.menu-button.is-open{background:#e21d2f !important;border-color:#e21d2f !important}
.menu-icon{display:flex !important;flex-direction:column !important;justify-content:space-between !important;width:17px;height:13px}
.menu-icon i{display:block !important;width:100%;height:1px;background:#fff;transition:.2s}
.menu-button.is-open .menu-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-button.is-open .menu-icon i:nth-child(2){opacity:0}
.menu-button.is-open .menu-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-label{display:block !important}

.menu{
  position:fixed !important; inset:0 !important; width:100vw !important;
  height:100vh !important; height:100dvh !important; z-index:99999 !important;
  display:block !important; background:#111 !important; color:#fff !important;
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transform:translateY(-12px) !important; overflow-y:auto !important;
  transition:opacity .22s ease,transform .25s ease,visibility 0s linear .25s !important;
}
.menu.is-open{
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  transform:none !important; transition:opacity .22s ease,transform .25s ease !important;
}
.menu-inner{
  min-height:100%; box-sizing:border-box; padding:100px 7vw 30px !important;
  display:flex !important; flex-direction:column !important;
}
.menu-top{
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  color:#999 !important; border-bottom:1px solid #333 !important; padding-bottom:18px !important;
  font:9px/1.3 var(--mono,monospace) !important;
}
.menu-top button{
  display:block !important; appearance:none !important; background:transparent !important;
  border:0 !important; color:#fff !important; font:9px var(--mono,monospace) !important;
  cursor:pointer !important;
}
.menu-inner > a{
  display:flex !important; align-items:center !important; width:100% !important;
  min-height:75px !important; box-sizing:border-box !important;
  color:#fff !important; opacity:1 !important; visibility:visible !important;
  text-decoration:none !important; border-bottom:1px solid #303030 !important;
  font:800 clamp(35px,6vw,78px)/.86 var(--display,Arial,sans-serif) !important;
  letter-spacing:-.075em !important; cursor:pointer !important;
}
.menu-inner > a::before{
  content:"↗"; display:block; width:40px; color:#e21d2f;
  font:15px/1 var(--mono,monospace);
}
.menu-inner > a:hover{color:#e21d2f !important}
.menu-bottom{
  margin-top:auto !important; padding-top:22px !important;
  display:flex !important; justify-content:space-between !important;
  color:#888 !important; font:9px var(--mono,monospace) !important;
}

/* floating back-to-top arrow */
#kjBackTop{
  position:fixed !important; right:22px !important; bottom:22px !important;
  width:48px !important; height:48px !important; border:1px solid #111 !important;
  background:#111 !important; color:#fff !important; z-index:9000 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font:20px/1 var(--mono,monospace) !important; cursor:pointer !important;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:.2s ease; touch-action:manipulation;
}
#kjBackTop.is-visible{opacity:1;visibility:visible;transform:none}
#kjBackTop:hover{background:#e21d2f;border-color:#e21d2f}
@media(max-width:768px){
  .header{
    height:calc(64px + env(safe-area-inset-top)) !important;
    padding:env(safe-area-inset-top) 14px 0 !important;
  }
  .text-logo{font-size:clamp(16px,5vw,21px) !important;max-width:calc(100vw - 80px);overflow:hidden;text-overflow:ellipsis}
  .menu-button{width:52px !important;min-width:52px !important;height:44px !important;padding:0 !important}
  .menu-label{display:none !important}
  .menu{
    height:100dvh !important; max-height:100dvh !important;
    overflow-x:hidden !important; overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .menu-inner{
    min-height:100% !important; padding:calc(82px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .menu-inner > a{
    min-height:60px !important; font-size:clamp(29px,9vw,43px) !important;
  }
  .menu-inner > a::before{width:30px;font-size:13px}
  #kjBackTop{right:14px !important;bottom:calc(14px + env(safe-area-inset-bottom)) !important;width:44px !important;height:44px !important}
}
@media(max-width:390px){
  .menu-inner{padding-left:15px !important;padding-right:15px !important}
  .menu-inner > a{min-height:56px !important;font-size:29px !important}
}

body.kj-menu-lock{overflow:hidden !important}


/* FINAL MOBILE MENU VISIBILITY + VIEWPORT LOCK */
@media (max-width: 768px) {
  .header {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .menu-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .menu.is-open,
  .menu[aria-hidden="false"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.kj-menu-lock {
    position: fixed !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}
