/* BAGZY v2 — 三本線のメニュー（全ページ共通）。<details class="navm"> で作るので JS が無くても開閉できる。
   使い方：ヘッダーの .hd-nav の最後に
   <details class="navm"><summary aria-label="メニュー"><span class="navm-bars" aria-hidden="true"></span></summary>
     <nav class="navm-panel" aria-label="メニュー"><ul class="navm-list"><li><a href="#id"><span class="navm-en">Label</span>日本語</a></li>…</ul>
       <div class="navm-foot">（予約ボタンなど）</div></nav></details> */
.navm{position:static;flex:none}
.navm>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.navm>summary::-webkit-details-marker{display:none}
.navm>summary::before{content:"";position:absolute;inset:-4px}
.navm-bars,.navm-bars::before,.navm-bars::after{display:block;width:22px;height:1.5px;background:#fff;transition:transform .25s,background-color .2s}
.navm-bars{position:relative}
.navm-bars::before,.navm-bars::after{content:"";position:absolute;left:0}
.navm-bars::before{top:-7px}
.navm-bars::after{top:7px}
.navm[open] .navm-bars{background:transparent}
.navm[open] .navm-bars::before{transform:translateY(7px) rotate(45deg);background:var(--gold)}
.navm[open] .navm-bars::after{transform:translateY(-7px) rotate(-45deg);background:var(--gold)}
.navm-panel{position:fixed;left:0;right:0;top:var(--hd);bottom:0;z-index:99;background:var(--ink);color:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px var(--gutter) 40px;border-top:1px solid var(--rule-gold)}
.navm-list{max-width:560px;margin:0 auto}
.navm-list li{border-bottom:1px solid rgba(255,255,255,.16)}
.navm-list a{display:flex;align-items:baseline;gap:14px;min-height:56px;padding:15px 2px;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.5;letter-spacing:.08em;color:#fff}
.navm-list a:hover,.navm-list a:focus-visible{color:var(--gold)}
.navm-en{flex:none;width:6.2em;font-family:var(--en);font-style:italic;font-weight:500;font-size:15px;letter-spacing:.04em;color:var(--gold)}
.navm-sub{max-width:560px;margin:22px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.navm-sub a{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid rgba(255,255,255,.5);font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.1em;color:#fff}
.navm-sub a:hover{background:#fff;color:var(--ink)}
.navm-foot{max-width:560px;margin:22px auto 0;display:grid;gap:10px}
.navm-foot .btn{display:flex;width:auto}
/* 開いている間も後ろの画面は固定しない（固定すると上の帯ごと三本線が画面外へ消えるため）。パネル内のスクロールが後ろへ伝わらないようにだけする */
.navm-panel{overscroll-behavior:contain}
.navm>summary{z-index:101}
@media (min-width:1024px){
  .navm-panel{left:auto;width:440px;border-left:1px solid var(--rule-gold)}
}
@media (prefers-reduced-motion:reduce){.navm-bars,.navm-bars::before,.navm-bars::after{transition:none}}

/* 店舗ページ：ヘッダーにボタン 3 つ＋三本線が並ぶ。狭い画面では詰め、とても狭い画面では Instagram をメニューの中だけにする */
.navm-foot .btn-ig{color:#fff;border-color:rgba(255,255,255,.7)}
@media (max-width:767px){
  .hd-nav:has(.navm):has(.hd-staff){gap:3px}
  .hd-nav:has(.navm):has(.hd-staff) .btn--sm{padding-left:8px;padding-right:8px}
  .hd-nav:has(.navm):has(.hd-staff) .btn-ig.btn--sm{padding-left:6px;padding-right:6px}
  .hd-nav:has(.navm):has(.hd-staff) .navm>summary{width:34px}
}
@media (max-width:384px){
  .hd-nav:has(.navm):has(.hd-staff)>.btn-ig{display:none}
}
/* 2026-10-12 fix3：767px 以下では、店舗ページのヘッダーの Instagram を常に隠す（三本線メニューの中にある）。「予約する」「スタイリスト」「三本線」は残す */
@media (max-width:767px){
  .hd-nav:has(.navm):has(.hd-staff)>.btn-ig{display:none}
  .hd-nav:has(.navm):has(.hd-staff){gap:6px}
  .hd-nav:has(.navm):has(.hd-staff) .btn--sm{padding-left:12px;padding-right:12px}
  .hd-nav:has(.navm):has(.hd-staff) .navm>summary{width:40px}
}

/* 2026-10-12 ヘッダーの Instagram は経営者の指定（予約するの並びに置く）。スマホの幅では 4 つ並ぶと入りきらないので、
   560px 以上で表示し、それより狭い画面では最初の画面のボタン・三本線メニュー・下の固定帯から行けるようにする */
@media (min-width:560px){
  .hd-nav:has(.navm):has(.hd-staff)>.btn-ig{display:inline-flex}
}