/* C×A 1案：メニュー画面（ハンバーガーで開く画面）
   2026-10-28 松原さん：3案から「案1 赤い面」に決定。さらに
   - 項目は、トップの各セクションの見出しと同じ組み方：英字（Newsreader）が主、和文は右に小さく添える。文字は小さめ
   - 背景の半透明の丸・区切り線・矢印はなし。要素はすべて中央揃え（12時46分）
   - 上は閉じるボタンだけ（メニューボタンと同じ位置・同じ大きさの丸）。ロゴは予約ボタンの下（add.js で移動）
   - 下は「電話で予約する」だけ（お休みのカレンダーへのボタンはなし）。月ごとのお休みの日の羅列もなし
   - ロゴは元データのロゴ（切り取りをやめる）。言葉はお客様が主語（「私たちの想い」→「MÜSICについて」。add.js） */
.sm{--sm-bg:#c32831;--sm-fg:#fff;--sm-sub:rgba(255,255,255,.82);background:var(--sm-bg)!important;color:var(--sm-fg)!important}
.sm-ring{display:none!important}

/* 上：閉じるボタンだけ */
.sm-head{height:calc(64px + env(safe-area-inset-top,0px))!important;padding:0!important}
.sm-close{position:absolute!important;top:calc(10px + env(safe-area-inset-top,0px))!important;right:16px!important;width:44px!important;height:44px!important;border-radius:0!important;background:radial-gradient(circle,#fff 17.2px,transparent 17.8px)!important;color:#c32831!important}
.sm-close span{left:15px!important;top:21.4px!important;width:14px!important;height:1.3px!important}

/* 項目：中央揃え。英字が主（24px）、和文は右に添える（12px）。トップの「Menu メニュー・料金」と同じ並び */
.sm-nav{flex:1;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0 24px!important}
.sm-nav a{display:flex!important;flex-direction:row!important;align-items:baseline!important;justify-content:center!important;gap:12px!important;min-height:56px!important;padding:12px 16px!important;border:0!important;color:var(--sm-fg)!important;text-decoration:none}
.sm-nav .sm-en{order:0;font:400 24px/1.2 'Music Newsreader',Georgia,serif!important;letter-spacing:-.01em!important;color:var(--sm-fg)}
.sm-nav .sm-ja{order:0;font:400 12px/1.5 'Noto Sans JP',sans-serif!important;letter-spacing:.14em!important;color:var(--sm-sub);opacity:1!important}

/* 下：予約ボタン → ロゴ → 住所と SNS（すべて中央） */
.sm-hol,.sm-tel{display:none!important}
.sm-info{margin-top:0!important;align-items:center;gap:24px!important;padding:16px 24px calc(28px + env(safe-area-inset-bottom,0px))!important}
.sm-bar{display:flex;justify-content:center;width:min(100%,280px);height:54px;border-radius:30px;background:#fff;color:#1a1a1a;box-shadow:0 2px 20px rgba(45,22,0,.12);font:500 14px/1.5 'Noto Sans JP',sans-serif;letter-spacing:.05em}
.sm-bar>a{flex:1;min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;color:inherit;text-decoration:none}
.sm-bar img{flex:none;width:13px;height:13px}
.sm-info .sm-logo{position:static;display:block;line-height:0}
.sm-logo img{display:none!important}
.sm-logo img.sm-logo-orig{display:block!important;width:96px!important;height:65px!important;max-width:none}
.sm-foot{flex-direction:column;justify-content:center!important;gap:4px!important;padding:0}
.sm-addr{color:var(--sm-fg);opacity:.9;text-align:center}
.sm-sns a{color:var(--sm-fg)!important}
@media(max-height:620px){.sm-nav a{min-height:48px!important;padding:8px 16px!important}.sm-info>.sm-logo{padding-top:24px}.sm-info>.sm-foot{margin-top:16px}}

/* 11時55分 松原さん（実機）「予約ボタンが下に寄っている。全体のバランスを見て」：
   項目と予約ボタンを1つのまとまりにして、閉じるボタンの下からロゴの上までの間の「真ん中」に置く。
   ロゴ・住所・SNS は下にまとめる。項目 → ボタンは 40（大きな見出しの下と同じ）。上下の空きは auto で同じ量に */
.sm-nav{flex:0 0 auto!important;margin-top:auto!important}
.sm-info{display:contents!important}
.sm-info>.sm-bar{flex:none;align-self:center;margin-top:40px}
.sm-info>.sm-logo{flex:none;align-self:center;margin-top:auto!important;padding-top:40px}
.sm-info>.sm-foot{flex:none;align-self:center;margin-top:24px;padding:0 24px calc(28px + env(safe-area-inset-bottom,0px))!important}