:root{--ink:#202522;--muted:#6a746f;--line:#dfe5e1;--paper:#f7f5ef;--surface:#fff;--brand:#087563;--brand-dark:#075548;--accent:#bd4a3c;--shadow:0 18px 45px rgba(32,48,43,.11)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;background:linear-gradient(135deg,#eff8f5,#fbf5ec 60%,#f7f5ef)}button,input,select,textarea{font:inherit}button{cursor:pointer}.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);padding:18px clamp(16px,4vw,38px)}.site-header h1{font-size:24px;margin:3px 0}.site-header p{color:var(--muted);margin:0}.eyebrow{color:var(--brand)!important;font-size:11px;font-weight:900;letter-spacing:.14em}.flow-panel{max-width:850px;margin:28px auto;padding:0 16px}.flow-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow);text-align:center}.flow-card h2{margin:0 0 8px}.flow-card p{color:var(--muted);line-height:1.7}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;margin-top:20px}.choice-button{border:1px solid var(--line);border-radius:16px;background:#f7faf8;color:var(--ink);padding:22px 15px;text-align:left}.choice-button strong{display:block;color:var(--brand-dark);font-size:17px;margin-bottom:5px}.choice-button span{color:var(--muted);font-size:13px}.choice-button:hover{border-color:#7db4a8;background:#eef8f5}.state-message{background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--muted);padding:20px}.category-nav{background:rgba(247,245,239,.98);border-block:1px solid var(--line);display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:11px clamp(16px,4vw,38px);position:sticky;top:0;z-index:18;scrollbar-width:none;-webkit-overflow-scrolling:touch}.category-nav::-webkit-scrollbar{display:none}.category-nav a{background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--ink);flex:0 0 auto;font-size:13px;font-weight:800;padding:9px 13px;text-decoration:none;white-space:nowrap}.category-nav a[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff}.layout{display:grid;gap:24px;grid-template-columns:minmax(0,1fr) 360px;margin:0 auto;max-width:1180px;padding:24px clamp(16px,4vw,38px) 120px}.category-section{margin-bottom:32px;scroll-margin-top:76px}.category-section h2{border-left:4px solid var(--brand);font-size:18px;margin:0 0 14px;padding-left:10px}.product-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.product-card{background:#fff;border:1px solid var(--line);border-radius:15px;cursor:pointer;overflow:hidden;box-shadow:0 8px 22px rgba(32,48,43,.06)}.product-card img{aspect-ratio:4/3;background:#e9efec;display:block;object-fit:contain;width:100%}.product-body{padding:14px}.product-body h3{font-size:16px;margin:0 0 5px}.product-body p{color:var(--muted);display:-webkit-box;font-size:13px;margin:0 0 12px;min-height:38px;white-space:pre-line;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.product-action,.panel-head,.total-row{align-items:center;display:flex;gap:10px;justify-content:space-between}.price{font-weight:900}.quantity-control{align-items:center;display:flex;gap:8px}.icon-button{align-items:center;background:var(--brand);border:0;border-radius:50%;color:#fff;display:inline-flex;height:36px;justify-content:center;width:36px}.icon-button.secondary{background:#e8eeeb;color:var(--ink)}.checkout-panel{align-self:start;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;position:sticky;top:150px}.panel-head h2{font-size:18px;margin:0}.text-button{background:transparent;border:0;color:var(--accent);font-size:13px;font-weight:800}.fulfillment-summary{background:#eff8f5;border-radius:10px;color:#145c4f;font-size:13px;font-weight:800;margin-top:12px;padding:10px}.cart-list{border-bottom:1px solid var(--line);margin:12px 0;max-height:250px;overflow:auto;padding-bottom:8px}.cart-item{display:grid;gap:4px;grid-template-columns:1fr auto;padding:9px 0}.cart-item small,.empty-cart,.panel-note{color:var(--muted)}.checkout-form{display:grid;gap:12px}.checkout-form label{color:#4b5954;display:grid;font-size:13px;font-weight:800;gap:6px}.checkout-form input,.checkout-form select,.checkout-form textarea{border:1px solid #cfd9d5;border-radius:9px;padding:11px;width:100%;background:#fff}.panel-note{font-size:12px;margin:0}.panel-note:empty{display:none}.total-row{padding-top:4px}.total-row strong{font-size:22px}.primary-button{background:var(--brand);border:0;border-radius:10px;color:#fff;font-weight:900;padding:14px;text-decoration:none;text-align:center}.primary-button:hover{background:var(--brand-dark)}.primary-button:disabled{background:#aab4b0;cursor:not-allowed}.line-guide{border:1px solid #a8d0c7;border-radius:10px;padding:12px;text-align:center}.line-guide p{font-size:13px}.line-guide img{display:block;margin:12px auto 0;width:190px}.mobile-cart-bar{align-items:center;background:var(--ink);bottom:0;color:#fff;display:none;justify-content:space-between;left:0;padding:12px 16px;position:fixed;right:0;z-index:30;transition:transform .22s ease}.mobile-cart-bar.is-hidden{transform:translateY(115%)}.mobile-cart-bar a{background:#fff;border-radius:8px;color:var(--ink);font-weight:800;padding:9px 13px;text-decoration:none}.mobile-cart-bar span{font-size:12px;margin-right:8px}.toast{background:var(--ink);border-radius:10px;bottom:24px;color:#fff;left:50%;max-width:min(560px,calc(100% - 32px));opacity:0;padding:12px 15px;pointer-events:none;position:fixed;transform:translate(-50%,8px);transition:.2s;z-index:60}.toast.show{opacity:1;transform:translate(-50%,0)}body.sheet-open .toast{bottom:auto;top:24px;transform:translate(-50%,-8px)}body.sheet-open .toast.show{transform:translate(-50%,0)}[hidden]{display:none!important}.complete-page{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:24px}.complete-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);max-width:620px;padding:clamp(22px,5vw,42px);width:100%}.complete-card h1{margin-top:4px}.receipt-no{background:var(--ink);border-radius:12px;color:#fff;font-size:clamp(22px,6vw,34px);font-weight:900;letter-spacing:.06em;margin:22px 0;padding:18px;text-align:center}.order-meta{background:#f1f7f4;border-radius:12px;margin-bottom:16px;padding:10px 15px}.order-meta p{margin:5px 0}.complete-items{border-block:1px solid var(--line);margin:16px 0;padding:8px 0}.cancel-order{display:block;margin:24px auto 0}.reorder-link{display:block;margin:20px 0 12px}.cancel-feedback{color:var(--accent);font-size:13px;text-align:center}@media(max-width:840px){.layout{display:block}.checkout-panel{margin-top:24px;position:static}.mobile-cart-bar{display:flex}.flow-card{padding:22px 17px}.product-grid{grid-template-columns:1fr}.product-card{display:grid;grid-template-columns:112px minmax(0,1fr)}.product-card img{aspect-ratio:1;height:100%;object-fit:contain}.product-body{padding:12px 14px}.product-body p{min-height:0;-webkit-line-clamp:3}}@media(max-width:520px){.site-header h1{font-size:20px}.product-card{grid-template-columns:96px minmax(0,1fr)}.product-body{padding:11px 12px}.product-body h3{font-size:15px}.product-body p{margin-bottom:10px}.flow-panel{margin:18px auto}}.product-sheet{align-items:flex-end;display:flex;inset:0;justify-content:center;position:fixed;z-index:50}.product-sheet-backdrop{background:rgba(20,28,25,.5);inset:0;position:absolute}.product-sheet-panel{background:#fff;border-radius:20px 20px 0 0;box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:88vh;overflow:hidden;padding-bottom:18px;position:relative;width:min(560px,100%)}.product-sheet-scroll{overflow:auto;-webkit-overflow-scrolling:touch}.product-sheet-close{background:rgba(255,255,255,.94);border:0;border-radius:50%;box-shadow:0 2px 8px rgba(32,48,43,.18);color:var(--ink);font-size:20px;height:36px;line-height:1;position:absolute;right:10px;top:10px;width:36px;z-index:2}.product-sheet-panel img{aspect-ratio:4/3;background:#e9efec;display:block;object-fit:contain;width:100%}.product-sheet-body{padding:18px clamp(16px,5vw,24px) 0}.product-sheet-body h2{font-size:20px;margin:0 0 10px}.product-sheet-body p{color:var(--muted);font-size:14px;line-height:1.8;margin:0;overflow-wrap:anywhere;white-space:pre-line}.product-sheet-note{color:var(--accent);font-size:13px;font-weight:800;margin:14px clamp(16px,5vw,24px) 0}.product-sheet-foot{align-items:center;display:flex;gap:14px;justify-content:space-between;padding:18px clamp(16px,5vw,24px) 0}.product-sheet-foot .price{font-size:20px}body.sheet-open{overflow:hidden}@media(min-width:521px){.product-sheet{align-items:center;padding:20px}.product-sheet-panel{border-radius:20px}}
.product-sheet-options{display:grid;gap:14px;padding:18px clamp(16px,5vw,24px) 0}.option-group{border:1px solid var(--line);border-radius:12px;margin:0;padding:12px 14px}.option-group legend{align-items:baseline;display:flex;font-size:15px;font-weight:900;gap:8px;padding:0 6px}.option-rule{background:#eff8f5;border-radius:999px;color:var(--brand-dark);font-size:11px;font-weight:800;padding:3px 8px}.option-choice{align-items:center;display:flex;gap:10px;padding:9px 2px}.option-choice span:nth-of-type(1){flex:1 1 auto}.option-delta{color:var(--brand-dark);font-weight:800}.option-select-button{background:var(--brand);border:0;border-radius:999px;color:#fff;font-size:13px;font-weight:800;padding:10px 15px}.option-select-button:disabled{background:#aab4b0}.cart-item-side{align-items:flex-end;display:grid;gap:6px;justify-items:end}.cart-item-side .icon-button{height:30px;width:30px}
.sold-out-badge{background:#fbeceb;border-radius:999px;color:var(--accent);font-size:11px;font-weight:800;margin-left:6px;padding:3px 8px;vertical-align:middle;white-space:nowrap}.product-card.is-sold-out img{filter:grayscale(1);opacity:.55}.product-card.is-sold-out .price{color:var(--muted)}.icon-button:disabled{background:#aab4b0;cursor:not-allowed}
/* 選んだオプション（たれ／塩など）は商品名と混ざると読めません。行を分けます。
   注文状況・注文履歴の両方で使います。 */
.item-options{color:var(--muted);display:block;font-size:12px}
/* 選択肢の横には、カートに入っている点数を出します。四角のチェックだけでは実際に
   何点頼んでいるのかが分からず、カートと詳細で数が食い違って見えていました。
   1点も入っていない選択肢は何も出しませんが、場所だけは空けます（消すと、点数のある
   行だけ加算額が左へずれます）。桁が増えても同じ理由で幅を固定します。 */
.option-count{background:#eff8f5;border-radius:999px;color:var(--brand-dark);font-size:12px;font-variant-numeric:tabular-nums;font-weight:800;min-width:42px;padding:2px 8px;text-align:center;white-space:nowrap}.option-count.is-empty{visibility:hidden}.option-cart-note{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
/* このテーブルのご注文（テーブルQRの伝票） */
.table-orders-button{background:#fff;border:1px solid var(--brand);border-radius:999px;color:var(--brand-dark);font-weight:800;margin-top:14px;padding:10px 18px}.table-orders-button:hover{background:#eef8f5}.table-orders-sheet .product-sheet-body{padding-bottom:18px}.table-orders-lead{color:var(--muted);font-size:13px;font-weight:800;margin:0 0 10px}.table-order{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:12px}.table-order.is-mine{border-color:#7db4a8;background:#f4faf8}.table-order-head{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:6px}.table-order-head small{color:var(--muted);margin-left:8px}.table-order-mine{background:var(--brand);border-radius:999px;color:#fff;font-size:11px;font-weight:800;padding:3px 9px}.table-order-items{list-style:none;margin:0;padding:0}.table-order-items li{display:flex;font-size:14px;gap:10px;justify-content:space-between;padding:4px 0}.table-order-items small{color:var(--muted);display:block;font-size:12px}.table-order-foot{border-top:1px solid var(--line);display:flex;font-size:13px;justify-content:space-between;margin-top:6px;padding-top:8px}.table-orders-total{align-items:center;background:var(--ink);border-radius:12px;color:#fff;display:flex;font-size:16px;justify-content:space-between;margin-top:14px;padding:14px 16px}.table-orders-total strong{font-size:22px}.table-orders-note{color:var(--muted);font-size:12px;line-height:1.7;margin:10px 0 0}
.table-bill{margin-top:14px}.table-bill-button{background:var(--brand);border:0;border-radius:999px;color:#fff;font-size:16px;font-weight:800;min-height:48px;padding:12px 18px;width:100%}.table-bill-button:disabled{opacity:.6}.table-bill-requested{background:#eef8f5;border:1px solid #7db4a8;border-radius:12px;color:var(--brand-dark);font-weight:800;line-height:1.7;margin:0;padding:12px 14px}
/* 友だち追加から戻ったあと、注文を続けるボタン（テーブルQR・引き継ぎの入口） */
.friend-resume-button{background:#fff;border:1px solid var(--brand);border-radius:10px;color:var(--brand-dark);font-weight:800;padding:13px 16px;width:min(100%,420px)}.friend-resume-button:hover{background:#eef8f5}
/* 合計と確定ボタン（2026-09-13）。PC・タブレット横では、カート欄をカテゴリーの帯のすぐ下から
   画面の下端までに収め、合計と確定ボタンを欄の下端に貼り付けます。以前は top:150px の
   貼り付きで欄が画面より高く、ページの一番下までスクロールしないとボタンが見えませんでした。
   法定6項目（#order-terms）はボタンの下にあり、欄の中をスクロールすると読めます。 */
.checkout-actions{display:grid;gap:10px}.checkout-terms-pointer{color:var(--muted);font-size:12px;line-height:1.6;margin:0}
@media(min-width:841px){.checkout-panel{top:76px;max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.cart-list{max-height:min(250px,max(96px,calc(100vh - 560px)))}.checkout-actions{background:#fff;border-top:1px solid var(--line);bottom:0;margin-inline:-18px;padding:12px 18px;position:sticky;z-index:1}}

/* テーブルQRのメニュー区分（ランチ／ディナーなど）。「店内注文」の見出しの横に出します。通常メニューでは出ません。 */
.menu-channel-badge{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;background:var(--brand,#087563);color:#fff;font-size:13px;font-weight:800;vertical-align:middle}
/* 店舗がメニュー区分を切り替えた直後の案内。金額を確かめ直してもらうので、トーストではなく画面に残します。 */
.menu-channel-changed{border:1px solid #eed39d;background:#fff3df;color:#7c5316;border-radius:10px;padding:10px 12px;font-weight:700}
/* 「店頭払い＋オンライン決済」の注文画面で出す、お支払い方法の選択（2026-09-23）。
   .checkout-form input の width:100%・padding をラジオには当てません（当たるとボタンが横いっぱいに伸びます）。 */
.payment-field{border:1px solid var(--line);border-radius:10px;display:grid;gap:8px;margin:0;min-width:0;padding:8px 12px 12px}
.payment-field legend{color:#4b5954;font-size:13px;font-weight:800;padding:0 4px}
.checkout-form .payment-option{align-items:center;cursor:pointer;display:flex;gap:10px;font-weight:400}
.checkout-form .payment-option input{accent-color:var(--brand);flex:0 0 auto;height:18px;margin:0;padding:0;width:18px}
.payment-option span{display:grid;gap:2px;min-width:0}
.payment-option strong{color:var(--ink);font-size:14px}
.payment-option small{color:var(--muted);font-size:12px}
.checkout-form .payment-option:has(input:disabled){cursor:not-allowed;opacity:.55}
/* 写真の無い商品（2026-09-28 ユーザー指示）。「No image」の画像は出さず、写真の枠ごと省きます。
   カードは縦並びにして、価格と数量ボタンを下端へ寄せます。格子で写真のあるカードと同じ行に並んでも
   下端がそろい、スマートフォンの横長の行では写真の列が無くなって商品名が全幅になります。
   読み込めなかった写真も api-client.js がこの見た目に切り替えます。 */
.product-card.no-image{display:flex;flex-direction:column}
.product-card.no-image .product-body{display:flex;flex:1;flex-direction:column}
.product-card.no-image .product-body h3{font-size:17px;line-height:1.45;overflow-wrap:anywhere}
.product-card.no-image .product-action{margin-top:auto}
@media(min-width:841px){.product-card.no-image .product-body{padding:18px 16px 16px}.product-card.no-image .product-body h3{font-size:18px;margin-bottom:8px}.product-card.no-image .product-body p{-webkit-line-clamp:5}}
/* 商品詳細シートで写真が無いときは、商品名が上端に来ます。閉じるボタン（×）と重ならないよう右をあけます。 */
.product-sheet-panel.is-no-image .product-sheet-body{padding-top:22px}
.product-sheet-panel.is-no-image .product-sheet-body h2{padding-right:44px}
/* 見るだけの画面（2026-10-04）。LINEの外から来た方・友だちでない方・受付停止中に、注文はできないがメニューを見せます
   （api-client.js の enterBrowse()）。カート欄と数量の操作は出しません。 */
body.browse-only .checkout-panel,body.browse-only .mobile-cart-bar,body.browse-only .product-sheet-foot .quantity-control{display:none}
body.browse-only .layout{display:block;padding-bottom:48px}
.browse-actions{align-items:center;display:flex;flex-direction:column;gap:12px;margin:18px 0 0}
.browse-actions .primary-button{display:inline-block;min-width:min(100%,280px)}
.browse-order-link{color:var(--brand);font-weight:700}
.browse-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.browse-tab{background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-weight:700;padding:9px 18px}
.browse-tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
/* テーブルQRの店内注文の下固定バー（2026-10-07。居酒屋向けUI案 §4.1）。「店員を呼ぶ」「もう一杯」「カート確認」を同じ場所に並べます。 */
.mobile-bar-actions{display:flex;gap:8px;align-items:center}
.mobile-bar-button{background:transparent;border:1px solid rgba(255,255,255,.55);border-radius:8px;color:#fff;font-weight:800;min-height:40px;padding:0 12px;white-space:nowrap}
.mobile-bar-button:disabled{opacity:.5}
@media(max-width:400px){.mobile-cart-bar{padding:10px 12px}.mobile-bar-button{padding:0 9px;font-size:13px}.mobile-cart-bar a{padding:9px 10px}}
/* 卓の名前。店内注文の見出しの上に大きく出します（店員と同じ「卓番」で会話できるように）。 */
.table-label-head{display:block;font-size:30px;font-weight:900;letter-spacing:.02em;line-height:1.1;margin:0 0 6px}
/* L.O. と飲み放題の残り時間（2026-10-07。居酒屋向けUI案 §4.1）。残りが少ないと琥珀、過ぎたら赤。 */
.table-timers{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 10px}
.table-timer{background:#eef3f1;border-radius:999px;color:#3b4844;font-size:13px;font-weight:800;padding:4px 10px}
.table-timer.is-soon{background:#fff1d6;color:#8a5a00}
.table-timer.is-over{background:#fde3df;color:#a52a1e}
/* 会計待ちのテーブルの案内（2026-10-21）。丸い札（.table-timer）の段の中で、横いっぱいの1段にします。 */
.table-orders-closed{flex:1 1 100%;margin:0;padding:8px 12px;border-radius:10px;background:#fde3df;color:#a52a1e;font-size:13px;font-weight:800;line-height:1.5;text-align:left;overflow-wrap:anywhere}
/* 「とりあえず」。店舗が印を付けた品（quick_order）を、メニューの先頭に数量つきの大きなボタンで並べます。 */
.quick-section h2{display:flex;align-items:center;gap:10px}
.quick-section h2 small{color:var(--muted);font-size:12px;font-weight:700}
.quick-grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.quick-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;display:grid;gap:6px;padding:10px 10px 8px}
.quick-item.is-in-cart{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.quick-item h3{font-size:17px;line-height:1.2;margin:0;overflow-wrap:anywhere}
.quick-item .price{color:var(--muted);font-size:13px;font-weight:700}
.quick-item .quantity-control{display:grid;gap:4px;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}
.quick-item .quantity-control .icon-button{height:44px;width:44px;font-size:22px}
.quick-item .quantity-control strong{font-size:22px;text-align:center}
.quick-item .option-select-button{min-height:44px;width:100%}
@media(min-width:841px){.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 店員を呼ぶ（050）の用件ボタン。酔った手でも押せるよう 64px 以上。 */
.table-call-lead{color:var(--muted);font-size:13px;font-weight:700;margin:0 0 12px}
.table-call-grid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.table-call-button{background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);font-size:18px;font-weight:900;min-height:72px;padding:10px}
.table-call-button:disabled{opacity:.5}
.table-call-button.is-bill{grid-column:1/-1;background:#fff3df;border-color:#eed39d;color:#6b4400}
.table-call-done{background:#eef8f5;border:1px solid #7db4a8;border-radius:12px;color:var(--brand-dark);font-weight:800;line-height:1.7;margin:12px 0 0;padding:12px 14px}
/* このテーブルのご注文: 品ごとの進み具合（調理中／まもなく／提供済み）。 */
.serving-status{border-radius:999px;display:inline-block;font-size:11px;font-weight:800;margin-left:6px;padding:2px 8px;vertical-align:middle;white-space:nowrap}
.serving-status.is-requested{background:#fff3df;color:#7c5316}
.serving-status.is-cooked{background:#e4f5ee;color:#0d6b52}
.serving-status.is-served{background:#eef1f0;color:#56635f}
/* 下書きプレビューを店舗管理から開いたときだけ出る帯（#preview-return-bar。2026-10-15）。お客様には出ない（hidden）。 */
.preview-return-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px clamp(16px,4vw,38px);background:#172321;color:#fff;font-size:13px;font-weight:800}
.preview-return-bar a{color:#fff;text-decoration:underline;white-space:nowrap}
/* 下書きプレビューの「見るメニュー」の切り替え（#preview-switcher。2026-10-15）。ボタンは .browse-tab と同じ見た目。お客様には出ない（hidden）。 */
.preview-switcher{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px}
.preview-switcher .browse-tab{max-width:100%;overflow-wrap:anywhere}

/* ===== 画面の幅ごとの崩れ（2026-10-15、ユーザー指示「PC・iPad・iPhoneで画面崩れが無いか」） ===== */

/* <a class="primary-button"> も <button> と同じ箱にします。インラインのままだと上下の余白が行に入らず、
   LINEの案内では下のQRコードに約2px重なっていました。 */
a.primary-button{display:inline-block}

/* 「公式アカウントを友だち追加」と「友だち追加が済んだら…注文を続ける」は、上下に並ぶので同じ幅にします。 */
.primary-button[data-add-friend],.friend-resume-button{box-sizing:border-box;width:min(100%,420px)}

/* カートの入力欄（人数・日付・時刻）は16pxにします。ラベルの13pxを受け継いでいたため、
   iPhone の Safari がタップしたときに画面を拡大し、そのまま戻りませんでした。 */
.checkout-form input:not([type=radio]):not([type=checkbox]),.checkout-form select,.checkout-form textarea{font-size:16px}

/* 下に貼り付いたバー（店員を呼ぶ・もう一杯・カート確認）。
   「カート確認」も <button> と同じ高さの箱にし、狭い幅でボタンが出ているときは2段にします。
   1段のままだと 320px で「カ／ー／ト／確／認」と縦に並び、375px でも2行に折れていました。 */
.mobile-cart-bar a{align-items:center;display:inline-flex;justify-content:center;min-height:40px;padding:0 12px;white-space:nowrap}
@media(max-width:430px){
.mobile-cart-bar:has(.mobile-bar-button:not([hidden])){flex-wrap:wrap;row-gap:8px}
.mobile-cart-bar:has(.mobile-bar-button:not([hidden])) .mobile-bar-actions{display:grid;flex:1 1 100%;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}
.mobile-bar-button,.mobile-cart-bar a{font-size:14px;min-height:44px}
.order-page:has(.mobile-bar-button:not([hidden])) .customer-footer{padding-bottom:150px}
}

/* 商品カードの価格と数量の行。＋−は縮めず、「選んで追加（2）」は1行のままにします。
   狭い幅（400px以下）で価格と並ばないときは、ボタンを次の行の右へ回します（＋−が楕円に縮んでいました）。 */
.icon-button{flex:0 0 auto}
.option-select-button{min-height:36px;white-space:nowrap}
@media(max-width:400px){
.product-action{flex-wrap:wrap;row-gap:8px}
.product-action .quantity-control,.product-action .option-select-button{margin-left:auto}
}

/* 「とりあえず」は、とても狭い幅（359px以下）では1列にします。2列だと数量の欄が約22pxになり、
   2桁の数がボタンに重なっていました。 */
@media(max-width:359px){.quick-grid{grid-template-columns:minmax(0,1fr)}}

/* 注文状況の「注文履歴を見る」「メニューに戻る」も、上の主ボタンと同じ全幅・同じ高さにします。 */
.complete-card .secondary-link{align-items:center;display:flex;margin-top:12px;min-height:48px;width:100%}
.complete-card .reorder-link{min-height:48px}

/* お支払いのページは、狭い幅（400px以下）で外側の余白を詰め、カード番号の欄（Squareの枠）の幅を空けます。 */
@media(max-width:400px){
.complete-page{padding:12px}
.complete-card{padding:20px 14px}
}
