/* ハンバーガーメニュー（スマホ・パソコン共通） */
.hamb{display:block;position:relative;z-index:60;width:44px;height:44px;margin-left:16px;border:0;background:transparent;cursor:pointer;padding:0;flex:0 0 auto}
.hamb span{display:block;width:22px;height:1.5px;margin:5px auto;background:var(--ink);transition:.25s}
.hamb.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamb.is-open span:nth-child(2){opacity:0}
.hamb.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.hamb:focus-visible{outline:2px solid var(--brown-dp);outline-offset:2px}

header.head{position:relative;z-index:60}

.navpanel{position:fixed;inset:0;z-index:55;background:var(--bg);overflow-y:auto;
  padding:84px 24px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:24px}
.navpanel[hidden]{display:none!important}
.navpanel nav{display:flex;flex-direction:column}
.navpanel nav a{padding:16px 2px;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:.06em;color:var(--ink)}
.navpanel nav a:hover{color:var(--brown-dp)}
.navpanel-cta{display:flex;flex-direction:column;gap:10px}
.navpanel-cta .btn{text-align:center}
.navpanel-note{color:var(--muted);font-size:12px;line-height:1.9;text-align:center;margin:0}
.navpanel-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;background:transparent;font-size:28px;line-height:1;color:var(--ink);cursor:pointer}

/* パソコン：右から出るパネル＋背景を暗く */
@media (min-width:821px){
  .navpanel{left:auto;width:min(420px,92vw);box-shadow:-18px 0 60px rgba(0,0,0,.14);padding:88px 36px 48px;
    border-left:1px solid var(--line);animation:navslide .28s ease both}
  .navpanel nav a{padding:18px 2px;font-size:16px}
  @keyframes navslide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){ .navpanel{animation:none} .hamb span{transition:none} }