/* 公式アプリへの誘導（予約画面。2026-10-28 R35）
 * ① トップのヘッダーの上の帯 ② 予約完了のカード ③ マイページの行。表示の切り替えは mobile_app_promo.js。
 * 色・角丸・影は mobile.css の変数を使う。mobile.css は変えない。 */

/* hidden 属性で隠す（display を指定しているため、明示しないと hidden が効かない） */
.m-appbar[hidden],.m-appcard[hidden],.m-approw[hidden]{display:none;}

/* ① トップの帯（閉じたら30日出さない） */
.m-appbar{display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 8px) 12px 8px 6px;background:var(--box);border-bottom:1px solid var(--rule);}
.m-appbar .x{width:32px;height:32px;border:0;background:none;color:var(--ink-60);font-size:20px;line-height:1;flex:none;cursor:pointer;font-family:inherit;}
.m-appbar img{width:40px;height:40px;border-radius:10px;box-shadow:0 0 0 1px var(--rule);flex:none;background:#fff;}
.m-appbar .bd{flex:1;min-width:0;line-height:1.35;}
.m-appbar .bd b{display:block;font-size:13px;}
.m-appbar .bd span{display:block;font-size:11.5px;color:var(--ink-60);}
.m-appbar .go{flex:none;border-radius:16px;background:var(--shu);color:#fff;font-size:13px;font-weight:700;padding:7px 14px;text-decoration:none;}
/* 帯を出しているときは、帯がセーフエリアの余白を持つ */
.m-app.has-appbar .m-header{padding-top:4px;}

/* ② 予約完了のカード */
.m-appcard{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin:14px 0 16px;}
.m-appcard .hd{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.m-appcard .hd img{width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px var(--rule);flex:none;}
.m-appcard .hd b{font-size:15px;line-height:1.45;}
.m-appcard p{font-size:13px;color:var(--ink-60);line-height:1.7;margin:0 0 12px;}
.m-appcard .steps{margin:0 0 14px;padding-left:1.5em;font-size:13.5px;line-height:1.75;color:var(--ink);}
.m-appcard .steps li{margin-bottom:2px;}
.m-appcard .m-btn{margin:0;text-decoration:none;}

/* ③ マイページの行 */
.m-approw{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px;margin-bottom:14px;text-decoration:none;color:var(--ink);}
.m-approw img{width:36px;height:36px;border-radius:9px;box-shadow:0 0 0 1px var(--rule);flex:none;}
.m-approw .bd{flex:1;min-width:0;}
.m-approw .bd b{display:block;font-size:14px;}
.m-approw .bd span{display:block;font-size:12px;color:var(--ink-60);margin-top:2px;line-height:1.5;}
.m-approw .chev{color:var(--shu);display:flex;}