/* C×A 1案：下のバー（2026-10-28 松原さん「A の白いフレームの中にお問い合わせとお休み」）
   - 形は A（ab/site.css の .fixed-bar）と同じ：白・高さ54px・角丸
   - 言葉はお客様が主語（11時51分 松原さん）：左「電話で予約する」、右「お休みを見る」。電話番号は出さない（アクセス・メニューの中にある）
   - 位置も A と同じ：下から max(20px, 安全領域)
   - いつも表示（写真に重なってよい：松原さん「写真の上だとわかりやすい」）
   - アイコンは C の赤（#C32831）
   このファイルを外し、page.html の .a-bar を消せば、C の2つの丸いボタンに戻る。 */
html[data-variant="3"] .hero-visit.visit-bar{display:none!important}
.a-bar{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(100% - 32px);max-width:448px;height:54px;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:#fff;border-radius:30px;box-shadow:0 2px 20px rgba(45,22,0,.12);z-index:15;font-family:'Noto Sans JP',sans-serif;color:#1a1a1a;letter-spacing:.05em;line-height:1.5;transition:opacity .6s ease}
.a-bar>a,.a-bar>button{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;background:none;border:0;color:inherit;font:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.a-bar .ab-phone,.a-bar .ab-hol{font-size:14px;font-weight:500}
.a-bar .ab-hol{position:relative}
.a-bar .ab-hol::before{content:'';position:absolute;left:0;top:11px;bottom:11px;width:.8px;background:#bdbdbd}
.a-bar .ab-phone img{width:13px;height:13px;flex:none}
.a-bar .ab-hol img{width:14px;height:13.7px;flex:none}
.a-bar a:focus-visible,.a-bar button:focus-visible{outline:2px solid #c32831;outline-offset:-4px;border-radius:30px}
.js:not(.ready) .a-bar{opacity:0;pointer-events:none}
@media(max-width:374px){.a-bar{width:calc(100% - 24px)}.a-bar .ab-phone,.a-bar .ab-hol{letter-spacing:0;gap:6px}}
@media(prefers-reduced-motion:reduce){.a-bar{transition:none}}
/* 押したときの手応え（10/28 16時24分 松原さん）：押している間だけ、バー全体がわずかに沈み、押した側に淡い赤がつく。
   指を離すと 0.2 秒で戻る（区切り線がずれないよう、ボタン単体ではなくバー全体を縮める）。メニュー画面の予約ボタンも同じ */
.a-bar{transition:opacity .6s ease,transform .2s ease}
.a-bar:has(>:active){transform:translateX(-50%) scale(.98);transition:opacity .6s ease,transform .06s ease}
.a-bar>a,.a-bar>button{position:relative}
.a-bar>a::after,.a-bar>button::after{content:'';position:absolute;inset:5px 6px;border-radius:24px;background:#c32831;opacity:0;transition:opacity .2s ease;pointer-events:none}
.a-bar>a:active::after,.a-bar>button:active::after{opacity:.08;transition-duration:.06s}
.sm-bar{transition:transform .2s ease}
.sm-bar:has(>a:active){transform:scale(.97);transition-duration:.06s}
@media(prefers-reduced-motion:reduce){.a-bar:has(>:active){transform:translateX(-50%)}.sm-bar:has(>a:active){transform:none}}

/* 11時55分 松原さん（実機）「押しても沈まない」：iPhone の Safari は、指で押したときに :active が付かないことがある。
   押している間は JS（add.js）で .is-press を付けて、同じ見た目にする。指を離しても 0.15 秒は残して、短い1回押しでも見えるように */
.a-bar.is-press{transform:translateX(-50%) scale(.98);transition:opacity .6s ease,transform .06s ease}
.a-bar>a.is-press::after,.a-bar>button.is-press::after{opacity:.08;transition-duration:.06s}
.sm-bar.is-press{transform:scale(.97);transition-duration:.06s}
@media(prefers-reduced-motion:reduce){.a-bar.is-press{transform:translateX(-50%)}.sm-bar.is-press{transform:none}}