@charset "UTF-8";

/* ==================================================
   delivery/assets/css/order.css
   お客様向けの選択式注文画面（order-type → schedule → index → product →
   cart → customer-info → order-confirm → order-complete）専用のスタイル。

   【方針】
   ・スマホファースト（基準幅360px）。LINE内ブラウザで自然に見えること。
   ・大阪王将の赤をアクセントに、背景は白基調。
   ・タップ領域は最低48px。指で押しやすい間隔を空ける。
   ・業務システム風の詰まった表組みにしない。
   ・PHP側のロジック（価格・在庫・日時判定・注文処理）には一切関与しない。
     見た目と操作性だけをここで整える。
   ================================================== */

:root {
    --red: #c62828;
    --red-dark: #a31d1d;
    --red-soft: #fdf0f0;
    --text: #1f2020;
    --text-muted: #6b6b6b;
    --line: #e5e5e7;
    --bg: #f6f6f7;
    --surface: #ffffff;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .08);
    --tap: 48px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0 0 24px;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                 "Noto Sans JP", "Yu Gothic", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    word-break: break-word;
}

/* 下部固定ボタンがある画面は、最後の内容が隠れないよう余白を足す */
body.has-cta { padding-bottom: 108px; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red); }

/* ---------- レイアウト ---------- */
.wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
}

.section { margin: 20px 0; }
.section + .section { margin-top: 24px; }

/* ---------- ヘッダー ---------- */
.appbar {
    background: var(--red);
    color: #fff;
    padding: 14px 16px;
    text-align: center;
}

.appbar-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
}

.appbar-sub {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: .92;
}

/* ---------- ヒーロー背景（order-type.php トップ） ---------- */
.appbar-hero {
    position: relative;
    padding: 0;
    background: var(--red) url("../images/order-hero.jpg") center / cover no-repeat;
    min-height: 200px;
}

.appbar-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    background: rgba(0, 0, 0, .4);
}

.appbar-hero .appbar-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #fff;
    opacity: .92;
}

.appbar-hero .appbar-sub {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.page-title {
    margin: 20px 0 4px;
    font-size: 20px;
    font-weight: 700;
}

.page-lead {
    margin: 0 0 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.section-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    padding-left: 10px;
    border-left: 3px solid var(--red);
}

/* ---------- 選択中の条件（チャネル・日時） ---------- */
.context {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
}

.context-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

.context-row + .context-row { margin-top: 6px; }

.badge {
    display: inline-block;
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid rgba(198, 40, 40, .25);
    border-radius: 999px;
    padding: 3px 12px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.context-value {
    color: var(--text);
    font-weight: 600;
}

.context-link {
    margin-left: auto;
    color: var(--red);
    font-size: 13px;
    text-decoration: underline;
    padding: 6px 0 6px 8px;
    white-space: nowrap;
}

/* ---------- カード ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
}

.card + .card { margin-top: 12px; }

/* ---------- ステップ表示（注文の現在地） ---------- */
.steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 8px;
}

.step {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #9a9a9e;
    white-space: nowrap;
}

.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e8e8ea;
    color: #9a9a9e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.step.is-active { color: var(--text); font-weight: 700; }
.step.is-active .step-num { background: var(--red); color: #fff; }

.step-sep {
    color: #d2d2d6;
    font-size: 10px;
    padding: 0 1px;
}

/* ---------- 大きな選択カード（注文方法） ---------- */
.choice-list { display: grid; gap: 14px; }

/* 受け取り方法ごとに配色を変え、テイクアウトとデリバリーを一目で見分けられるようにする。
   色はカードごとに --choice-accent / --choice-soft を差し替えるだけで切り替わる。 */
.choice {
    --choice-accent: var(--red);
    --choice-soft: var(--red-soft);
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 112px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 6px solid var(--choice-accent);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 18px 14px 18px 16px;
    margin: 0;
    text-align: left;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.choice-takeout {
    --choice-accent: #c62828;
    --choice-soft: #fdf0f0;
}

.choice-delivery {
    --choice-accent: #b45309;
    --choice-soft: #fff5e8;
}

.choice:active {
    background: var(--choice-soft);
    border-color: var(--choice-accent);
}

/* 直前に選んでいた方法は、選び直しに来たときすぐ分かるよう色を敷いておく */
.choice.is-current {
    background: var(--choice-soft);
    border-color: var(--choice-accent);
}

.choice-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--choice-soft);
    color: var(--choice-accent);
}

.choice.is-current .choice-icon { background: #fff; }

.choice-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

.choice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.choice-title {
    display: block;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--choice-accent);
}

.choice-desc {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted);
}

.choice-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.choice-tag {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--surface);
}

.choice-tag-current {
    border-color: var(--choice-accent);
    background: var(--choice-accent);
    color: #fff;
    font-weight: 700;
}

.choice-mark {
    flex: 0 0 auto;
    color: var(--choice-accent);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

/* ---------- 店内飲食のご案内（注文ボタンではない） ----------
   テイクアウト・デリバリーと同じ .choice のカードデザインをそのまま使い、
   3枚が同じ見た目で並ぶようにする。ただしこれは押しても何も起きない案内カードなので、
   .choice が持つ「押せる見た目」（指カーソル・押下時の色変化）だけを打ち消す。
   矢印（.choice-mark）はマークアップ側で出していない。 */
.choice-dinein {
    --choice-accent: #2e7d32;
    --choice-soft: #eef6ee;
    cursor: default;
}

.choice-dinein:active {
    background: var(--surface);
    border-color: var(--line);
    border-left-color: var(--choice-accent);
}

.dinein-heading {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ---------- 受付停止の案内 ---------- */
.closed {
    text-align: center;
    padding: 8px 4px 4px;
}

.closed-mark {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #f0f0f1;
    color: #8a8a8e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.closed-mark svg { width: 30px; height: 30px; display: block; }

.closed-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.closed-text {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
}

.closed-tel {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.closed-tel p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- ボタン ---------- */
.btn {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 2px solid var(--red);
    background: var(--red);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.btn:active { background: var(--red-dark); border-color: var(--red-dark); }

.btn[disabled] {
    background: #d9d9dc;
    border-color: #d9d9dc;
    color: #fff;
    cursor: default;
}

.btn-outline {
    background: var(--surface);
    color: var(--red);
}

.btn-outline:active { background: var(--red-soft); }

.btn-sm {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
    width: auto;
    display: inline-block;
}

.btn-quiet {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
}

/* 下部固定のメインボタン */
.cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    z-index: 20;
}

.cta-inner { max-width: 480px; margin: 0 auto; }

.cta-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 14px;
}

.cta-total strong { font-size: 20px; color: var(--red); }

/* ---------- 日付・時間の選択 ---------- */
.chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 6px;
    -webkit-overflow-scrolling: touch;
}

.chip {
    position: relative;
    flex: 0 0 auto;
}

.chip input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.chip-label {
    display: block;
    min-width: 76px;
    min-height: var(--tap);
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.chip-note {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.chip input:checked + .chip-label {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}

.chip input:checked + .chip-label .chip-note { color: rgba(255, 255, 255, .9); }

.chip input:disabled + .chip-label {
    background: #f0f0f1;
    border-color: #e8e8ea;
    color: #b0b0b4;
    cursor: default;
}

/* ---------- 時間選択の見出し（選択中の日付を添えて表示） ---------- */
.schedule-time-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 12px;
}

.schedule-date-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: var(--red-soft);
    color: var(--red);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.schedule-date-sub {
    font-size: 11px;
    font-weight: 600;
    opacity: .85;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.slot { position: relative; }

.slot input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.slot-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow);
    font-size: 16px;
    font-weight: 700;
}

.slot-note {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
}

.slot input:checked + .slot-label {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}

.slot input:disabled + .slot-label {
    background: #f0f0f1;
    border-color: #e8e8ea;
    color: #b8b8bc;
    cursor: default;
}

/* ---------- 商品一覧 ---------- */

/* カテゴリのクイックタブ（複数カテゴリがある場合だけ表示。横スクロール） */
.category-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.category-nav-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 16px;
    -webkit-overflow-scrolling: touch;
}

.category-tab {
    flex: 0 0 auto;
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.category-tab:active { background: var(--red-soft); border-color: var(--red); color: var(--red); }

.category {
    margin: 22px 0 10px;
    font-size: 16px;
    font-weight: 700;
    padding-left: 10px;
    border-left: 3px solid var(--red);
    /* sticky なカテゴリタブの下に隠れないよう、アンカージャンプ時の余白を確保する */
    scroll-margin-top: 54px;
}

.product-list { display: grid; gap: 12px; }

.product-card {
    display: block;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

a.product-card:active { background: var(--red-soft); }

.product-card-body {
    display: flex;
    gap: 12px;
    padding: 12px;
    align-items: flex-start;
}

/* タップして詳細へ進めるカードだけ、右側にシェブロンを添えてタップ可能なことを示す
   （PHP側の <a>/<div> 分岐はそのまま。矢印は CSS の疑似要素のみで、マークアップは増やさない） */
a.product-card .product-card-body { padding-right: 30px; }

a.product-card .product-card-body::after {
    content: "\203A";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--red);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.product-thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f0f1;
}

.product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #a9a9ad;
    font-size: 11px;
    text-align: center;
}

.product-info { flex: 1 1 auto; min-width: 0; }

.product-name {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.product-desc {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--red);
}

/* 【2026-08 商品単位のディスカウント】割引中の商品にだけ付ける。
   割引していない商品は.product-price/.detail-priceだけのまま（見た目を変えない）。 */
.price-original {
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 400;
    font-size: 13px;
    margin-right: 4px;
}

.discount-label {
    display: inline-block;
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    margin-right: 4px;
}

.product-foot {
    padding: 0 12px 12px;
    text-align: right;
}

.is-soldout { background: #fafafa; }
.is-soldout .product-thumb img { opacity: .45; }
.is-soldout .product-name { color: var(--text-muted); }

.tag-soldout {
    display: inline-block;
    background: #6b6b6b;
    color: #fff;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ---------- 商品詳細 ---------- */
.hero {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f0f0f1;
    overflow: hidden;
}

.hero img { width: 100%; height: 100%; object-fit: cover; }

.hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #a9a9ad;
    font-size: 13px;
}

.detail-name {
    margin: 16px 0 6px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.detail-price {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: var(--red);
}

.detail-desc {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
}

.qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.qty-label { font-weight: 700; font-size: 15px; }

.stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px;
    background: var(--surface);
}

.stepper button {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--red-soft);
    color: var(--red);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.stepper button:active { background: var(--red); color: #fff; }
.stepper button[disabled] { background: #f0f0f1; color: #bdbdc1; cursor: default; }

.stepper input {
    width: 56px;
    height: 44px;
    border: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- カート・明細 ---------- */
.line-item + .line-item { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }

.line-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.line-name { font-weight: 700; font-size: 15px; }
.line-total { font-weight: 700; font-size: 15px; white-space: nowrap; }

.line-meta {
    margin: 2px 0 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.line-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.line-controls form { margin: 0; }

.link-remove {
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: underline;
    padding: 12px 4px;
    font-family: inherit;
    cursor: pointer;
}

.summary { margin: 0; }

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 15px;
}

.summary-row.is-total {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 12px;
    font-size: 17px;
    font-weight: 700;
}

.summary-row.is-total .summary-value { color: var(--red); font-size: 20px; }

.summary-label { color: var(--text-muted); }
.summary-row.is-total .summary-label { color: var(--text); }

/* ---------- 受取方法の常時表示カード（テイクアウト／デリバリー誤認防止 PHASE1） ---------- */
.reminder-card {
    --reminder-accent: var(--red);
    --reminder-soft: var(--red-soft);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--reminder-soft);
    border: 1px solid var(--reminder-accent);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.reminder-takeout { --reminder-accent: #c62828; --reminder-soft: #fdf0f0; }
.reminder-delivery { --reminder-accent: #b45309; --reminder-soft: #fff5e8; }

.reminder-icon { font-size: 28px; line-height: 1.2; flex: 0 0 auto; }

.reminder-body { flex: 1 1 auto; min-width: 0; }

.reminder-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--reminder-accent); }
.reminder-sub { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--text); }
.reminder-note { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

.reminder-change {
    align-self: center;
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--reminder-accent);
    text-decoration: underline;
    white-space: nowrap;
    padding: 6px 0 6px 6px;
}

/* ---------- 確定直前の確認ボックス（誤認防止 PHASE2） ---------- */
.confirm-box-heading {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
}

.confirm-box-lead {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- 確定直前の必須チェック（誤認防止 PHASE3） ---------- */
.confirm-check-box {
    background: var(--red-soft);
    border: 2px solid var(--red);
    border-radius: var(--radius);
    padding: 14px;
}

.confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.confirm-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    accent-color: var(--red);
}

.confirm-check-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.5;
}

/* ---------- お知らせ・エラー ---------- */
.notice {
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 14px;
    background: #fff8e6;
    border: 1px solid #f0dca8;
    color: #7a5c11;
}

.notice + .notice { margin-top: 8px; }

.notice-error {
    background: var(--red-soft);
    border-color: rgba(198, 40, 40, .3);
    color: var(--red);
    font-weight: 700;
}

.notice-info {
    background: #f2f6fb;
    border-color: #d5e2f0;
    color: #33506e;
}

.empty {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 16px;
}

/* ---------- フォーム ---------- */
.field { margin-bottom: 16px; }

.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
}

.field-required {
    display: inline-block;
    margin-left: 6px;
    background: var(--red);
    color: #fff;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 2px;
}

.field-help {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.input,
.textarea {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    font-size: 16px;   /* 16px未満だとiOSで自動ズームするため下げない */
    font-family: inherit;
    color: var(--text);
}

.input:focus,
.textarea:focus { outline: 2px solid rgba(198, 40, 40, .35); outline-offset: 1px; border-color: var(--red); }

.textarea { min-height: 88px; resize: vertical; }

/* ---------- 完了画面 ---------- */
.done {
    text-align: center;
    padding: 28px 16px 8px;
}

.done-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red);
    font-size: 32px;
    line-height: 64px;
    font-weight: 700;
}

.done-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.done-lead { margin: 0; color: var(--text-muted); font-size: 14px; }

.order-no {
    display: inline-block;
    margin-top: 12px;
    background: var(--surface);
    border: 1px dashed var(--red);
    border-radius: var(--radius);
    padding: 10px 18px;
    font-size: 15px;
}

.order-no strong { font-size: 20px; color: var(--red); margin-left: 6px; }

/* ---------- 情報の並び ---------- */
.info-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
}

.info-row + .info-row { border-top: 1px dashed var(--line); }

.info-label { flex: 0 0 84px; color: var(--text-muted); }
.info-value { flex: 1 1 auto; font-weight: 600; }

.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.center { text-align: center; }

.link-row { margin: 18px 0 8px; text-align: center; }
.link-row a { font-size: 14px; }

/* ---------- 少し広い端末 ---------- */
@media (min-width: 480px) {
    .slot-grid { grid-template-columns: repeat(4, 1fr); }
    .product-thumb { flex-basis: 112px; width: 112px; height: 112px; }
}

/* =====================================================================
   よくある質問（delivery/faq.php 専用）
   =====================================================================
   ここより上のクラスは注文フローの各画面が共有しているため一切変更していない。
   FAQページで新しく必要になったものだけを、この末尾に追記する。
   ===================================================================== */

/* 戻る矢印付きのヘッダー。タイトルは中央、矢印は左に重ねる（高さは .appbar のまま）。 */
.appbar-withback { position: relative; }

.appbar-withback .appbar-title { text-align: center; padding: 0 44px; }

.appbar-back {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
}

.appbar-back:active { background: rgba(255, 255, 255, .18); }

.faq-lead { margin: 18px 0 14px; }

/* ---------- 検索 ---------- */
.faq-search { margin: 0 0 18px; }

.faq-search-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.faq-search-box { position: relative; }

.faq-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    display: flex;
    pointer-events: none;
}

.faq-search-input { padding-left: 38px; }
.faq-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.faq-empty { margin-bottom: 18px; }

/* ---------- カテゴリ ---------- */
.faq-group { margin: 0 0 22px; }
.faq-group-title { margin-bottom: 10px; }

/* ---------- アコーディオン ---------- */
.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-item + .faq-item { margin-top: 8px; }

.faq-q {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px;
    min-height: var(--tap);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
    box-sizing: border-box;
}

/* 既定の三角マーカーは消して、右側の自前の矢印だけにする */
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }

.faq-q:active { background: var(--red-soft); }

.faq-q-mark {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* min-width:0 が無いと長い質問文でカードが横に広がり、横スクロールが出る */
.faq-q-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.faq-q-arrow {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.faq-item[open] .faq-q-arrow { transform: rotate(-135deg); margin-top: 9px; }

.faq-a {
    padding: 0 14px 14px 46px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.faq-a p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    overflow-wrap: anywhere;
}

.faq-a p:last-child { margin-bottom: 0; }

/* ---------- お問い合わせ ---------- */
.faq-contact {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 14px;
    margin: 26px 0 32px;
}

.faq-contact-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }

.faq-contact-lead {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
}

.faq-contact-toggle { width: 100%; }

.faq-contact-form { margin-top: 16px; }

/* select は .input と同じ見た目に揃える（ネイティブの矢印は残す） */
.faq-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.field-optional {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f0f0f1;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}

/* ハニーポット。スクリーンリーダーにも読ませず、画面にも出さない */
.faq-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =====================================================================
   よくある質問 — 仕上げ（delivery/faq.php 専用・追記のみ）
   =====================================================================
   ここも faq.php だけに効くセレクタで構成する。注文画面が使う既存クラス
   （.card / .btn / .input / .field / .notice など）のスタイルは変更しない。
   ===================================================================== */

.faq-ico { display: block; }

/* ---------- リード ---------- */
.faq-lead {
    margin: 18px 0 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ---------- カテゴリカード（3列×2段。横スクロールさせない） ---------- */
.faq-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 0 22px;
}

.faq-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 76px;
    padding: 10px 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    text-align: center;
    box-shadow: var(--shadow);
}

.faq-cat:active { background: var(--red-soft); border-color: var(--red); }

.faq-cat-icon { color: var(--red); }

.faq-cat-label {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ---------- カテゴリ見出し（赤い縦線） ---------- */
.faq-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 4px solid var(--red);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.faq-group-icon { color: var(--red); display: flex; }

/* ---------- 質問カード ---------- */
.faq-item { box-shadow: var(--shadow); }

.faq-q-mark {
    background: var(--red);
    color: #fff;
}

.faq-item[open] .faq-q { background: var(--red-soft); }

.faq-a {
    background: #fbfbfc;
    padding-left: 14px;
}

/* ---------- 注文方法の2カード ---------- */
.faq-ways { display: grid; gap: 10px; margin-top: 12px; }

/* 375px級では文字が窮屈になるため縦積み。余裕がある幅でだけ2カラムにする */
@media (min-width: 560px) {
    .faq-ways { grid-template-columns: 1fr 1fr; }
}

.faq-way {
    --way-accent: var(--red);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.faq-way-ai { --way-accent: #1f8a4c; background: #f2faf5; border-color: #cfe8d9; }
.faq-way-normal { --way-accent: var(--red); background: #fdf4f4; border-color: #f2d5d5; }

.faq-way-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.faq-way-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--way-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-way-heading { display: flex; flex-direction: column; min-width: 0; }
.faq-way-title { font-size: 15px; font-weight: 700; color: var(--way-accent); overflow-wrap: anywhere; }
.faq-way-sub { font-size: 12px; color: var(--text-muted); }

/* ---------- ステップ ---------- */
.faq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.faq-step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 8px;
    padding: 8px 10px;
}

.faq-step-num {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--way-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-step-text { font-size: 13.5px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }

/* ---------- 補足（薄い黄色） ---------- */
.faq-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 0;
    padding: 11px 12px;
    background: #fff9e6;
    border: 1px solid #f2e3b0;
    border-radius: 10px;
}

.faq-tip-icon { flex: 0 0 auto; color: #b8860b; margin-top: 1px; }

.faq-tip-text { min-width: 0; font-size: 13px; line-height: 1.6; color: var(--text); }
.faq-tip-text strong { display: block; color: #a36a00; font-size: 13.5px; }

/* ---------- トラブル解決手順 ---------- */
.faq-trouble { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }

.faq-trouble-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
}

.faq-trouble-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.faq-trouble-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.faq-trouble-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.faq-trouble-icon { color: var(--red); display: flex; }

.faq-trouble-text { font-size: 13px; line-height: 1.6; color: var(--text-muted); overflow-wrap: anywhere; }

/* ---------- 下部の電話案内（番号はページ内でここだけ） ---------- */
.faq-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    font-size: 14px;
    font-weight: 700;
}

.faq-tel-icon { color: var(--red); display: flex; }
.faq-tel a { text-decoration: none; }

/* customer-info: placeholder only */
#customer_tel::placeholder,
#customer_postal_code::placeholder,
#customer_address::placeholder,
#customer_building::placeholder {
    color: #e2e2e6;
    opacity: 1;
}