/* Header button and modal navigation, shared across desktop and mobile. */
.hakkou-template .hero__area {
  min-height:64px;
  padding-inline:16px 86px;
}
.hakkou-menu-toggle {
  position:absolute;
  inset:6px 16px auto auto;
  width:56px;
  height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:5px;
  border:1px solid #ffffff70;
  border-radius:8px;
  background:#ffffff16;
  color:#fff;
  cursor:pointer;
  font:inherit;
}
.hakkou-menu-toggle__icon { display:flex; flex-direction:column; gap:5px; width:25px; }
.hakkou-menu-toggle__icon span { display:block; height:2px; width:100%; background:currentColor; border-radius:2px; }
.hakkou-menu-toggle__label { font-size:10px; line-height:12px; letter-spacing:.03em; font-weight:700; }
.hakkou-menu-toggle:hover { background:#ffffff30; }
.hakkou-menu-toggle:focus-visible { outline:3px solid #ffe51b; outline-offset:2px; }
body.hakkou-menu-open { overflow:hidden; }
.hakkou-menu {
  position:fixed;
  inset:0 0 0 auto;
  margin:0;
  width:min(420px, 100%);
  max-width:100%;
  height:100vh;
  height:100dvh;
  max-height:100%;
  padding:0;
  border:0;
  border-top:5px solid #fd7d06;
  background:#fff;
  color:#222;
  box-shadow:-12px 0 45px #00377126;
  transform:translateX(100%);
  transition:transform .25s ease;
  overflow:hidden;
  font-family:"Noto Sans JP",sans-serif;
  letter-spacing:.03em;
}
.hakkou-menu[open] { display:flex; flex-direction:column; }
.hakkou-menu.is-visible { transform:translateX(0); }
.hakkou-menu::backdrop { background:#00295799; opacity:0; transition:opacity .25s ease; }
.hakkou-menu.is-visible::backdrop { opacity:1; }
.hakkou-menu__header { display:flex; align-items:center; justify-content:space-between; padding:26px 28px 22px; border-bottom:1px solid #e2edf8; flex:none; }
.hakkou-menu__logo { display:block; width:140px; max-width:calc(100% - 64px); height:auto; object-fit:contain; }
.hakkou-menu__close { display:grid; place-items:center; width:44px; height:44px; padding:0; background:#edf5ff; color:#0360d3; border:0; border-radius:50%; font:400 32px/1 sans-serif; cursor:pointer; }
.hakkou-menu__close:hover { background:#d9eaff; }
.hakkou-menu__nav { min-height:0; overflow-y:auto; overscroll-behavior:contain; flex:1; padding:12px 28px 24px; }
.hakkou-menu__links, .hakkou-menu__links .sub-menu { list-style:none; padding:0; margin:0; }
.hakkou-menu__links > li { border-bottom:1px solid #e2edf8; }
.hakkou-menu__links a { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#234361; text-decoration:none; overflow-wrap:anywhere; font-size:17px; font-weight:700; line-height:1.6; padding:17px 4px; }
.hakkou-menu__links > li > a::after { content:'›'; font-size:25px; line-height:1; color:#fd7d06; flex:none; }
.hakkou-menu__links a:hover, .hakkou-menu__links a[aria-current] { color:#0360d3; background:#f1f7ff; }
.hakkou-menu__links .sub-menu { margin:0 0 16px 7px; padding-left:16px; border-left:3px solid #d4e7fb; }
.hakkou-menu__links .sub-menu a { padding:10px 9px; font-size:14px; font-weight:500; }
.hakkou-menu__links .sub-menu a::before { content:'–'; color:#0360d3; flex:none; }
.hakkou-menu__links .sub-menu a { justify-content:flex-start; }
.hakkou-menu__contact { flex:none; padding:18px 28px max(22px, env(safe-area-inset-bottom)); background:#fff8e7; border-top:1px solid #f4e2b6; text-align:center; }
.hakkou-menu__local { flex:none; padding:13px 22px; background:#edf5ff; color:#0360d3; font-size:12px; line-height:1.6; font-weight:700; text-decoration:none; }
.hakkou-menu__contact > p { font-size:12px; line-height:1.6; color:#936319; font-weight:700; margin-bottom:10px; }
.hakkou-menu__phone, .hakkou-menu__line { display:block; border-radius:9px; padding:12px; text-decoration:none; }
.hakkou-menu__phone { background:#0360d3; color:#fff; font-size:27px; font-family:Arial,sans-serif; font-weight:900; line-height:1.3; }
.hakkou-menu__phone span { display:block; font:500 11px/1.6 "Noto Sans JP",sans-serif; margin-bottom:2px; }
.hakkou-menu__line { margin-top:9px; background:#1ebc38; color:#fff; font-size:14px; font-weight:700; line-height:1.5; }
.hakkou-menu__line span { margin-left:8px; }
.hakkou-menu a:focus-visible, .hakkou-menu button:focus-visible { outline:3px solid #fd7d06; outline-offset:2px; }
@media (max-width:480px) {
  .hakkou-template .hero__area { gap:6px; padding-inline:10px 76px; }
  .hakkou-template .hero__image-1 { width:14px; }
  .hakkou-template .hero__text-1 { font-size:clamp(.65rem, 2.65vw, .85rem); letter-spacing:0; white-space:nowrap; }
  .hakkou-template .hero__text-2 { font-size:.6rem; letter-spacing:0; padding-top:0; white-space:nowrap; }
  .hakkou-menu-toggle { right:10px; }
  .hakkou-menu { width:min(360px, 100%); }
  .hakkou-menu__header { padding:19px 22px 16px; }
  .hakkou-menu__nav { padding-inline:22px; }
  .hakkou-menu__contact { padding-inline:22px; }
}
@media (max-height:560px) {
  .hakkou-menu__header { padding-block:10px; }
  .hakkou-menu__logo { width:92px; }
  .hakkou-menu__contact { padding-block:10px; }
  .hakkou-menu__phone { font-size:22px; padding:7px; }
  .hakkou-menu__line { padding:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .hakkou-menu, .hakkou-menu::backdrop { transition:none; }
}