@charset "utf-8";
/* ==========================================================================
   べつかい乳業興社 ショッピングカート - モダンレイヤー
   既存の cargo.css / cart.css / sed.css の後に読み込み、
   固定幅レイアウトをレスポンシブ化し、見た目を現行のトレンドに合わせる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
    --brand: #d97706;
    --brand-dark: #b45309;
    --brand-soft: #fffbeb;
    --brand-line: #fcd9a4;
    --brand-ring: rgba(217, 119, 6, .25);

    --accent: #0f766e;
    --danger: #c2321f;
    --danger-soft: #fef2f2;
    --ok: #15803d;

    --bg: #faf7f2;
    --surface: #ffffff;
    --surface-2: #f7f4ef;
    --surface-3: #efe9e1;
    --border: #e3ddd4;
    --border-strong: #cdc4b8;

    --text: #241f1a;
    --text-muted: #5f574d;
    --text-faint: #8b8175;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(36, 31, 26, .06);
    --shadow: 0 2px 6px rgba(36, 31, 26, .07), 0 1px 2px rgba(36, 31, 26, .04);
    --shadow-md: 0 6px 18px rgba(36, 31, 26, .10);

    /* 本文カラムの最大幅（2026-09-08: 1080px → +10% → さらに +5%、計 +15.5%） */
    --wrap: 1247px;
    --form-wrap: 760px;

    --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
            "Yu Gothic UI", "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   2. ベース（旧レイアウトの打ち消しを含む）
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    background-image: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.75;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-dark); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand); text-decoration: underline; }

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

p { font-size: 1em; line-height: 1.8; margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

h1, h2, h3, h4 { line-height: 1.45; }

/* 旧CSSの「全ての span を赤太字にする」指定を打ち消す */
span { font-size: inherit; color: inherit; font-weight: inherit; }
.red    { color: var(--danger); font-weight: 700; }
.orange { color: var(--brand-dark); font-weight: 700; }
.small  { font-size: .84em; color: var(--text-faint); font-weight: 400; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.ta-l { text-align: left; }
.va-t { vertical-align: top; }
.va-m { vertical-align: middle; }
.va-b { vertical-align: bottom; }
.nw   { white-space: nowrap; }
/* スクリーンリーダー向けにのみ読み上げる（表の説明など） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. ヘッダー
   -------------------------------------------------------------------------- */
#cartheader {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 14px 4vw;
    background-image: none;
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 30;
}
#cartheader p {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0;
    text-align: left;
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: .01em;
}
#cartheader a { color: var(--text); }
#cartheader a:hover { color: var(--brand-dark); text-decoration: none; }

/* ヘッダのミルク缶アイコン＋タイトル  2026.09.11 追加
   アイコンの高さを文字サイズに連動させ、両者が視覚的に釣り合うようにする */
#cartheader a {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    line-height: 1.2;
}
.site-icon {
    flex: none;
    /* 文字の約1.6倍。タイトルを変えても比率が保たれる */
    width: 1.6em;
    height: 1.6em;
    display: block;
}
#cartheader a > strong { font-weight: 700; }

#cartheader #container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: none;
    max-width: var(--wrap);
    margin: 0 auto;
}

#logoContainer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

#mypageLink {
    max-height: none;
    grid-column: auto;
    grid-row: auto;
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: left;
}

/* 狭い画面ではタイトルを少し抑える（アイコンは em 指定なので自動で追従する）
   ※ font-size 指定より後に置かないと上書きされるためここに配置  2026.09.11 */
@media screen and (max-width: 600px) {
    #cartheader p, #mypageLink { font-size: 1.3em; }
    #cartheader a { gap: .5em; }
}
#mypageLink a { color: var(--text); }

/* マイページ */
#mypageContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    height: auto;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    grid-column: auto;
    grid-row: auto;
    /* プルダウンの位置基準をマイページボタン自身にする
       （指定しないと #logoContainer が基準になり左端に表示される） */
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}
#mypageContainer:hover { background: var(--brand-soft); border-color: var(--brand-line); }
#mypageImg { width: 22px; height: 22px; grid-column: auto; grid-row: auto; }
#mypageImg img { width: 100%; height: 100%; opacity: .75; }
#mypageText {
    color: var(--text-muted);
    font-weight: 700;
    font-size: .84em;
    grid-column: auto;
    grid-row: auto;
    white-space: nowrap;
}

/* マイページボタンの右端に揃えて真下に開く */
#mypageDropdown.dropdown-content {
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    min-width: 210px;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    background: var(--surface);
    overflow: hidden;
    padding: 6px;
}
#mypageDropdown.dropdown-content a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .9em;
    border: 0;
}
#mypageDropdown.dropdown-content a:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
    text-decoration: none;
}

/* ログイン状態の表示（会員=ログインID / 非会員=ゲスト）  2026.09.27 追加
   マイページボタンの中（.login-status）と、マイページを持たない画面用の単独ピル（#loginStatusBox）の2通り */
.login-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .84em;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}
.login-status__dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-faint);
}
.login-status.is-member .login-status__dot {
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .18);
}
.login-status__label { color: var(--text-muted); }
.login-status.is-member .login-status__label { color: var(--ok); }
.login-status__id {
    min-width: 0;
    max-width: 16em;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
#mypageContainer .login-status {
    padding-left: 8px;
    border-left: 1px solid var(--border);
}
#loginStatusBox {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

/* --------------------------------------------------------------------------
   4. 本文コンテナ
   -------------------------------------------------------------------------- */
#cartbody {
    display: block;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 28px 4vw 64px;
}

/* --------------------------------------------------------------------------
   5. ステップ表示（画像 GIF を置き換えたリスト）
   -------------------------------------------------------------------------- */
#stepcont.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    width: 100%;
    max-width: none;
    margin: 0 0 28px;
    padding: 0;
    border-bottom: 0;
    text-align: left;
    counter-reset: none;
}
.steps .step {
    flex: 1 1 130px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    font-size: .82em;
    line-height: 1.4;
}
.steps .step-no {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-faint);
    font-weight: 700;
    font-size: 12px;
}
.steps .step-label { font-weight: 600; }

.steps .is-done {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}
.steps .is-done .step-no { background: var(--accent); color: #fff; }

.steps .is-current {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand-dark);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.steps .is-current .step-no { background: var(--brand); color: #fff; }

/* --------------------------------------------------------------------------
   5-2. 注文履歴一覧（sed_order_history_list.php）専用テーブル
        商品一覧の .list とは要件が異なるため独立したクラスにする  2026.09.10 新設
          ・注文日/発送日/注文番号/金額 … 折り返さず全体をセル内に表示
          ・商品名                      … 残り幅いっぱいで折り返して表示
   -------------------------------------------------------------------------- */
/* sed.css の #order_history_list table.… と同じ詳細度で指定する
   （modern.css が後に読み込まれるため、こちらが優先される） */
#order_history_list table.order_history_table {
    width: 100%;
    /* 商品名の列が潰れないよう最小幅を確保（狭い画面では横スクロール） */
    min-width: 860px;
    /* 内容にあわせて列幅を決めるため fixed にはしない
       （fixed だと注文日が指定幅に押し込められて折り返す） */
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin: 0 0 20px;
    /* 配送先一覧（sed_list.php）と同じ文字サイズ  2026.09.17 変更（旧 .94em） */
    font-size: 1em;
    text-align: left;
}
#order_history_list table.order_history_table th,
#order_history_list table.order_history_table td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    vertical-align: middle;
    line-height: 1.6;
}
#order_history_list table.order_history_table tr > *:last-child { border-right: 0; }
#order_history_list table.order_history_table tr:last-child > td { border-bottom: 0; }

/* 見出し行 = 配送先一覧の見出しと同じ（sed.css のスレートブルー地・白文字を打ち消す）  2026.09.17 変更 */
#order_history_list table.order_history_table thead th {
    background: var(--surface-2);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: normal;
    text-align: left;
}
/* 内容行 = 白地（sed.css のグレー地・実線枠を打ち消す） */
#order_history_list table.order_history_table tbody tr.order_history_list_row {
    background: transparent;
    background-color: transparent;
    border: 0;
}
#order_history_list table.order_history_table tbody td {
    background: var(--surface);
    background-color: var(--surface);
    color: var(--text);
}
/* 行をクリックすると詳細へ進むため、マウスを載せた行だけ薄いオレンジにする */
#order_history_list table.order_history_table tbody tr:hover > td {
    background: var(--brand-soft);
    background-color: var(--brand-soft);
}
/* セル内リンクは他画面と同じオレンジ系（sed.css の青・下線を打ち消す） */
#order_history_list table.order_history_table .order_history_list_row td a {
    color: var(--brand-dark);
    text-decoration: none;
}
#order_history_list table.order_history_table .order_history_list_row td a:hover {
    text-decoration: underline;
}

/* 表題「注文履歴一覧」「配送先一覧」= 会員情報などと同じ、左にオレンジの線が入る見出し */
#order_history_list table.order_history_table > caption.title,
#sed_list table.order_history_table > caption.title {
    caption-side: top;
    text-align: left;
    font-size: 1.08em;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 14px;
    padding: 0 0 0 13px;
    border-left: 4px solid var(--brand);
}

/* 折り返さない列（注文日・発送日が途中で切れないようにする）
   ※発送日・商品名は PHP 側で <br> が入るため、改行はそのまま反映される */
#order_history_list table.order_history_table th,
#order_history_list table.order_history_table td:nth-child(1),
#order_history_list table.order_history_table td:nth-child(2),
#order_history_list table.order_history_table td:nth-child(3),
#order_history_list table.order_history_table td:nth-child(4),
#order_history_list table.order_history_table td:nth-child(6) {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* 商品名だけ折り返す */
#order_history_list table.order_history_table td:nth-child(5) {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* 列幅の目安（table-layout:auto なので内容が入りきらなければ広がる） */
#order_history_list table.order_history_table .ohl-col-no      { width: 7.5em; }
#order_history_list table.order_history_table .ohl-col-date    { width: 12em; }
#order_history_list table.order_history_table .ohl-col-ship    { width: 8.5em; }
#order_history_list table.order_history_table .ohl-col-godid   { width: 7.5em; }
#order_history_list table.order_history_table .ohl-col-godname { width: auto; }
#order_history_list table.order_history_table .ohl-col-sum     { width: 7.5em; }

/* 合計金額は右寄せ */
#order_history_list table.order_history_table td:nth-child(6),
#order_history_list table.order_history_table thead th:nth-child(6) { text-align: right; }

/* 狭い画面では表だけ横スクロールさせる */
#order_history_list {
    width: 100%;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   5-4. 注文履歴詳細（sed_order_history_dtl.php）  2026.09.17 追加
        表のスタイルを配送先一覧（sed_list.php）に揃え、色をオレンジ系に統一する。
          ・幅は --form-wrap で中央寄せ
          ・青い見出し帯 → 左にオレンジの線が入る見出し
          ・見出し/ラベルセル = ベージュ地・太字、内容セル = 白地、余白 12px 14px
          ・小計（グレー）・合計（水色）も同じ体裁にし、支払合計金額だけオレンジで強調
        sed.css の指定を確実に上書きするため #order_history_dtl を付けて詳細度を上げている。
   -------------------------------------------------------------------------- */
#order_history_dtl.order_history_dtl {
    width: 100%;
    max-width: var(--form-wrap);
    margin: 0 auto 2em;
}

/* 見出し：青帯 → オレンジの線 */
#order_history_dtl.order_history_dtl .odt_section_head {
    background: transparent;
    background-color: transparent;
    color: var(--text);
    font-size: 1.08em;
    font-weight: 700;
    margin: 28px 0 12px;
    padding: 0 0 0 13px;
    border: 0;
    border-left: 4px solid var(--brand);
}
#order_history_dtl.order_history_dtl > .odt_section:first-child .odt_section_head { margin-top: 0; }

/* 表の外枠（3種類とも配送先一覧と同じ） */
#order_history_dtl.order_history_dtl .odt_info_table,
#order_history_dtl.order_history_dtl .odt_total_table,
#order_history_dtl.order_history_dtl .odt_product_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin: 0 0 20px;
    font-size: 1em;
}

/* セル共通 */
#order_history_dtl.order_history_dtl .odt_info_table th,
#order_history_dtl.order_history_dtl .odt_info_table td,
#order_history_dtl.order_history_dtl .odt_total_table th,
#order_history_dtl.order_history_dtl .odt_total_table td,
#order_history_dtl.order_history_dtl .odt_product_table th,
#order_history_dtl.order_history_dtl .odt_product_table td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    vertical-align: middle;
    font-size: 1em;
    line-height: 1.6;
}
#order_history_dtl.order_history_dtl .odt_info_table tr > *:last-child,
#order_history_dtl.order_history_dtl .odt_total_table tr > *:last-child,
#order_history_dtl.order_history_dtl .odt_product_table tr > *:last-child { border-right: 0; }
#order_history_dtl.order_history_dtl .odt_info_table tr:last-child > *,
#order_history_dtl.order_history_dtl .odt_total_table tr:last-child > *,
#order_history_dtl.order_history_dtl .odt_product_table tbody tr:last-child > * { border-bottom: 0; }

/* ラベル列・見出し行 = ベージュ地・太字（sed.css の #f8f8f8 / 濃いグレーを打ち消す） */
#order_history_dtl.order_history_dtl .odt_info_table th.odt_label,
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_total_labelvalue th.odt_total_label,
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_subtotal_labelvalue th.odt_subtotal_label,
#order_history_dtl.order_history_dtl .odt_product_table thead th {
    background: var(--surface-2);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-weight: 700;
    text-align: left;
}
#order_history_dtl.order_history_dtl .odt_info_table th.odt_label,
#order_history_dtl.order_history_dtl .odt_total_table th.odt_total_label,
#order_history_dtl.order_history_dtl .odt_total_table th.odt_subtotal_label {
    width: 200px;
}

/* 内容セル = 白地（sed.css の #f1f1f1・グレー・水色を打ち消す） */
#order_history_dtl.order_history_dtl .odt_info_table td.odt_value,
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_total_labelvalue td.odt_total_value,
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_subtotal_labelvalue td.odt_subtotal_value,
#order_history_dtl.order_history_dtl .odt_product_table tbody td {
    background: var(--surface);
    background-color: var(--surface);
    color: var(--text);
}

/* 金額は右寄せ・折り返さない（「2,980円」が「円」だけ次の行に落ちないようにする） */
#order_history_dtl.order_history_dtl .odt_total_table td.odt_total_value,
#order_history_dtl.order_history_dtl .odt_total_table td.odt_subtotal_value,
#order_history_dtl.order_history_dtl .odt_product_table .odt_col_num,
#order_history_dtl.order_history_dtl .odt_product_table .odt_col_amt {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
#order_history_dtl.order_history_dtl .odt_product_table .odt_col_qty { text-align: center; white-space: nowrap; }
#order_history_dtl.order_history_dtl .odt_product_table .odt_col_no  { white-space: nowrap; }

/* 支払合計金額 = オレンジで強調（sed.css の水色を打ち消す） */
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_total_highlight th.odt_total_label,
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_total_highlight td.odt_total_value {
    background: var(--brand-soft);
    background-color: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 700;
    border-top: 1px solid var(--brand-line);
}
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_total_highlight td.odt_pay_total {
    font-size: 1.15em;
}

/* 商品情報：狭い画面では表だけ横スクロール（sed.css の min-width:400px を解除） */
#order_history_dtl.order_history_dtl .odt_product_section {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* のし(シール)・配達希望時間帯 */
#order_history_dtl.order_history_dtl .odt_message_section,
#order_history_dtl.order_history_dtl .odt_send_time_section {
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
}
#order_history_dtl.order_history_dtl .odt_message_section .odt_message_label,
#order_history_dtl.order_history_dtl .odt_send_time_section .odt_send_time_label {
    color: var(--text-muted);
    font-size: .9em;
    margin: 0;
}
#order_history_dtl.order_history_dtl .odt_message_value,
#order_history_dtl.order_history_dtl .odt_send_time_section .odt_send_time_value {
    color: var(--text);
}

/* 「注文履歴一覧に戻る」ボタンの上に余白 */
#order_history_dtl_button { margin-top: 24px; }

/* 総合計ブロック（画面最下部）  2026.09.18 追加
   配送先カードと同じ体裁の1ブロックにまとめ、支払合計金額を目立たせる。
   消費税の行は、直前の「商品合計」「送料合計」の内訳と分かるよう少し下げて薄く表示する。 */
#order_history_dtl.order_history_dtl .odt_grand_total {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin: 0 0 24px;
}
#order_history_dtl.order_history_dtl .odt_grand_head {
    margin: 0;
    padding: 12px 18px;
    background: var(--brand-soft);
    border: 0;
    border-bottom: 1px solid var(--brand-line);
    color: var(--brand-dark);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.4;
}
#order_history_dtl.order_history_dtl .odt_grand_body {
    padding: 16px 18px 18px;
}
#order_history_dtl.order_history_dtl .odt_grand_total .odt_total_table {
    box-shadow: none;
    margin: 0;
}
/* 消費税は直前の行の内訳として見せる */
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_total_tax th.odt_total_label {
    padding-left: 30px;
    color: var(--text-faint);
    font-weight: 400;
}
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_total_tax td.odt_total_value {
    color: var(--text-muted);
}

@media screen and (max-width: 600px) {
    #order_history_dtl.order_history_dtl .odt_grand_head { padding: 12px 14px; }
    #order_history_dtl.order_history_dtl .odt_grand_body { padding: 14px; }
    #order_history_dtl.order_history_dtl .odt_total_table tr.odt_total_tax th.odt_total_label { padding-left: 20px; }
}

/* 配送先カード  2026.09.17 追加
   配送先情報・のし(シール)・配達希望時間帯・商品情報・小計を 1 枚のカードにまとめる。
   カードの外枠に影を付け、中の表は影なし・余白詰めにして「ひとまとまり」に見せる。 */
#order_history_dtl.order_history_dtl .odt_dest {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin: 0 0 24px;
}
/* カードの見出し：「配送先 1 / 2」＋ お名前 */
#order_history_dtl.order_history_dtl .odt_dest_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 0;
    padding: 12px 18px;
    background: var(--brand-soft);
    border: 0;
    border-bottom: 1px solid var(--brand-line);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.4;
}
#order_history_dtl.order_history_dtl .odt_dest_no {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    font-size: .88em;
    letter-spacing: .02em;
    white-space: nowrap;
}
#order_history_dtl.order_history_dtl .odt_dest_name {
    color: var(--text);
    overflow-wrap: anywhere;
}
#order_history_dtl.order_history_dtl .odt_dest_body {
    padding: 16px 18px 18px;
}
/* カード内の小見出し（配送先情報／のし(シール)・配達希望時間帯／商品情報） */
#order_history_dtl.order_history_dtl .odt_sub_head {
    margin: 20px 0 8px;
    padding: 0 0 0 10px;
    border: 0;
    border-left: 3px solid var(--brand);
    background: transparent;
    color: var(--text-muted);
    font-size: .92em;
    font-weight: 700;
    line-height: 1.4;
}
#order_history_dtl.order_history_dtl .odt_dest_body > .odt_sub_head:first-child { margin-top: 0; }

/* カード内の表は影なし（カードの影と二重にしない） */
#order_history_dtl.order_history_dtl .odt_dest .odt_info_table,
#order_history_dtl.order_history_dtl .odt_dest .odt_product_table,
#order_history_dtl.order_history_dtl .odt_dest .odt_total_table {
    box-shadow: none;
    margin: 0;
}
/* 商品表は狭い画面で横スクロール */
#order_history_dtl.order_history_dtl .odt_product_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* 商品表の列幅 */
#order_history_dtl.order_history_dtl .odt_product_table .odt_col_no  { width: 7em; }
#order_history_dtl.order_history_dtl .odt_product_table .odt_col_num { width: 7.5em; }
#order_history_dtl.order_history_dtl .odt_product_table .odt_col_qty { width: 4.5em; }
#order_history_dtl.order_history_dtl .odt_product_table .odt_col_amt { width: 7.5em; }

/* この配送先の小計は、商品表のすぐ下に置く */
#order_history_dtl.order_history_dtl .odt_dest .odt_dest_subtotal { margin-top: 10px; }
/* 小計（商品合計金額+送料）の行は太字 */
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_subtotal_sum th.odt_subtotal_label,
#order_history_dtl.order_history_dtl .odt_total_table tr.odt_subtotal_sum td.odt_subtotal_value {
    color: var(--text);
    font-weight: 700;
}

@media screen and (max-width: 600px) {
    #order_history_dtl.order_history_dtl .odt_dest_head { padding: 12px 14px; }
    #order_history_dtl.order_history_dtl .odt_dest_body { padding: 14px; }
    #order_history_dtl.order_history_dtl .odt_info_table th.odt_label,
    #order_history_dtl.order_history_dtl .odt_total_table th.odt_total_label,
    #order_history_dtl.order_history_dtl .odt_total_table th.odt_subtotal_label { width: 8em; }
}

/* --------------------------------------------------------------------------
   5-3. 配送先一覧（sed_list.php）
        注文履歴一覧（sed_order_history_list.php）と同じ一覧表示スタイル（table.order_history_table）
        に揃える。列は3列（名前・住所・電話番号）のため、5-2 の6列前提の nth-child 指定は使わず
        この節で個別に指定する。行全体がクリック可能な点・表題の見た目も注文履歴一覧と同じにする。
        sed.css の黄色ヘッダ・実線枠を打ち消すため、同じ詳細度で上書きする。  2026.09.29 変更
        （旧: 2026.09.17 usr_info.php の .tablestyle01 に合わせていた）
   -------------------------------------------------------------------------- */
#sed_list {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#sed_list table.order_history_table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin: 0 0 20px;
    font-size: 1em;
    text-align: left;
}
#sed_list table.order_history_table th,
#sed_list table.order_history_table td {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    vertical-align: middle;
    line-height: 1.6;
}
#sed_list table.order_history_table tr > *:last-child { border-right: 0; }
#sed_list table.order_history_table tbody tr:last-child > td { border-bottom: 0; }

/* 見出し行 = 注文履歴一覧と同じ（sed.css のスレートブルー地・白文字を打ち消す） */
#sed_list table.order_history_table thead th {
    background: var(--surface-2);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: normal;
    text-align: left;
}
/* 内容行 = 白地（sed.css のグレー地・実線枠を打ち消す） */
#sed_list table.order_history_table tbody tr {
    background: transparent;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}
#sed_list table.order_history_table tbody td {
    background: var(--surface);
    background-color: var(--surface);
    color: var(--text);
}
/* 行をクリックすると編集画面へ進むため、マウスを載せた行だけ薄いオレンジにする */
#sed_list table.order_history_table tbody tr:hover > td {
    background: var(--brand-soft);
    background-color: var(--brand-soft);
}
/* セル内リンク（お名前）は他画面と同じオレンジ系（sed.css の青・下線を打ち消す） */
#sed_list table.order_history_table tbody td a {
    color: var(--brand-dark);
    text-decoration: none;
}
#sed_list table.order_history_table tbody td a:hover {
    text-decoration: underline;
}

/* 名前・電話番号は折り返さず、住所だけ折り返す */
#sed_list table.order_history_table td:nth-child(1) { white-space: nowrap; width: 10em; }
#sed_list table.order_history_table td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
#sed_list table.order_history_table td:nth-child(3) { white-space: nowrap; width: 10em; word-break: normal; }

/* --------------------------------------------------------------------------
   5-5. 配送先の編集（sed_edit.php）  2026.09.18 追加
        会員情報の変更（usr_info_edit.php）と同じフォームの体裁にするため、
        sed.css が ID で付けている入力欄の割合幅（#sed_add2 の 95% など）を打ち消し、
        他のフォームと同じく size 属性どおりの幅で表示する。
   -------------------------------------------------------------------------- */
#sed_edit_form #sed_add2,
#sed_edit_form #sed_add3,
#sed_edit_form #sed_add4,
#sed_edit_form #sed_camp_name,
#sed_edit_form #sed_tel_no1,
#sed_edit_form #sed_tel_no2,
#sed_edit_form #sed_tel_no3 {
    width: auto;
}

/* --------------------------------------------------------------------------
   6. 一覧テーブル（買い物かご / 注文内容）
   -------------------------------------------------------------------------- */
#order {
    width: 100%;
    max-width: none;
    margin: 0 0 28px;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.list {
    width: 100%;
    min-width: 620px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
    font-size: .94em;
    margin-bottom: 16px;
}
thead { background: transparent; color: inherit; font-size: inherit; }
tbody { background: transparent; font-size: inherit; }

.list thead th,
.list th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .84em;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 12px 10px;
    border: 0;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.list td {
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 13px 10px;
    vertical-align: middle;
    color: var(--text);
}
.list tr:last-child td { border-bottom: 0; }
.list tbody tr:hover td { background: var(--brand-soft); }

.itemno {
    font-size: .88em;
    color: var(--text-muted);
    white-space: nowrap;
    background: transparent;
    border-left: 0;
}
.itenmname { text-align: left; font-weight: 600; line-height: 1.6; }
/* 商品一覧の商品画像（横幅100px）＋商品名  2026.09.27 追加 */
.itenmname a.item-link {
    display: flex;
    align-items: center;
    gap: 14px;
}
.item-thumb {
    flex: none;
    width: 100px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.item-text { min-width: 0; }
.mprice {
    white-space: nowrap;
    text-align: right;
    font-weight: 700;
    color: var(--danger);
    font-variant-numeric: tabular-nums;
}
.teika { color: var(--text-faint); text-align: right; font-weight: 400; }
/* セルの固定幅指定は解除して内容にあわせる */
/* 商品一覧テーブルの列幅
     商品名以外は折り返さない（価格・在庫数・注文数が2行になるのを防ぐ）  2026.09.10 変更
     .p001:品番 .p002:商品名 .p004:標準価格/会員価格 .p005:在庫数 .p006:ご注文数 .p007:カゴへ */
.list th, .list td { white-space: nowrap; }
.list .p002, .list .itenmname { white-space: normal; }

.list .p001 { width: 6em; }
.list .p002 { width: auto; }
.list .p004 { width: 7em; }
.list .p005 { width: 5.5em; }
.list .p006 { width: 7.5em; }
.list .p007 { width: 6.5em; }
.new_items, .no1_items {
    display: inline-block;
    color: #fff;
    background: var(--danger);
    border-radius: 4px;
    font-size: .74em;
    font-weight: 700;
    padding: 2px 7px;
    margin-right: .5em;
    vertical-align: 2px;
}
.small_gray { font-size: .86em; color: var(--text-muted); }
p.tax {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: .88em;
    padding: 8px 12px;
    margin-top: 0;
}
.list .ok_caption {
    background: var(--brand-soft);
    text-align: left;
    font-size: .9em;
    padding: 10px 12px;
}

/* --------------------------------------------------------------------------
   7. 入力エリア
   -------------------------------------------------------------------------- */
#cartmain,
#cartmain.member-info-cartmain,
#add {
    width: 100%;
    max-width: var(--form-wrap);
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

/* セクション見出し */
div.cartmainh1, div.cartmainh2, div.cartmainh3,
div.cartmainh4, div.cartmainh5,
.member-info-h1 {
    font-size: 1.08em;
    font-weight: 700;
    color: var(--text);
    background: transparent;
    background-color: transparent;
    margin: 34px 0 14px;
    padding: 0 0 0 13px;
    border: 0;
    border-left: 4px solid var(--brand);
    border-bottom: 0;
    text-align: left;
}
div.cartmainh1 { border-left-color: var(--danger); }
div.cartmainh2 { border-left-color: var(--ok); }
div.cartmainh3 { border-left-color: var(--accent); }
div.cartmainh4 { border-left-color: var(--brand); margin-top: 34px; }
.member-info-h1 { border-left-color: var(--brand); }
#cartmain > div[class^="cartmainh"]:first-child { margin-top: 0; }

.member-info-done-msg {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-sm);
    color: var(--ok);
    font-weight: 700;
    padding: 12px 16px;
    margin-bottom: 20px;
}

/* 入力テーブル */
.tablestyle01, .tablestyle02 {
    width: 100%;
    max-width: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    margin: 0 0 20px;
    text-align: left;
}
.tablestyle01 caption, .tablestyle02 caption {
    caption-side: top;
    text-align: left;
    font-size: .88em;
    font-weight: 700;
    color: var(--danger);
    padding: 0 0 8px;
}

.tablestyle01 td, .tablestyle02 td,
td.lavel, td.lavel00, td.lavel30, td.lavelbt, td.inform, td.informbt, td.label200,
.lavelsel, .lavelname, .lavelzip, .laveladd, .laveltel, .lavelcut,
.tdstyle02, .tdcenter {
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
    font-size: 1em;
    vertical-align: middle;
}
td.lavel, td.lavel00, td.lavel30, td.lavelbt,
.lavelsel, .lavelname, .lavelzip, .laveladd, .laveltel, .lavelcut {
    background: var(--surface-2);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-weight: 700;
    border-right: 1px solid var(--border);
    text-align: left;
}
/* 2列構成の入力テーブルのラベル列のみ固定幅にする
   （配送先テーブルは 5 列あるため .lavel* には適用しない）  2026.09.10 変更 */
td.lavel, td.lavel00, td.lavel30, td.lavelbt { width: 200px; }

/* --------------------------------------------------------------------------
   配送先リスト（cart_step2 の「現在登録されている配送先」）
     旧実装の <table> を <ul><li> に置き換えたもの  2026.09.10
   -------------------------------------------------------------------------- */
.sed-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.sed-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}

/* 配送先の情報（チェック／宛先／削除） */
.sed-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
}
.sed-check {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
}
.sed-check label {
    font-size: .88em;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}
.sed-info { flex: 1 1 auto; min-width: 0; }
.sed-name {
    margin: 0 0 6px;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.5;
}
.sed-row {
    display: flex;
    gap: 10px;
    margin: 0 0 2px;
    font-size: .95em;
    line-height: 1.6;
    color: var(--text-muted);
}
.sed-label {
    flex: none;
    width: 3em;
    color: var(--text-faint);
    font-size: .86em;
    padding-top: .15em;
}
.sed-val { min-width: 0; }
.sed-act { flex: none; }
.sed-act input[type="button"] {
    padding: 7px 16px;
    min-height: 34px;
    font-size: .88em;
}

/* 送付する商品と数量 */
.sed-goods {
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.sed-goods-head,
.sed-goods-row {
    display: grid;
    grid-template-columns: 9em minmax(0, 1fr) 6.5em;
    gap: 14px;
    align-items: center;
    padding: 10px 18px;
}
.sed-goods-head {
    font-size: .84em;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .03em;
    border-bottom: 1px solid var(--border);
}
.sed-goods-row {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.sed-goods > div:last-child > .sed-goods-row:last-child { border-bottom: 0; }
/* 品番は "OK-12345" のようにハイフンを含み、既定だとそこで改行されるため */
.g-id { white-space: nowrap; font-size: .95em; }
.g-name { min-width: 0; line-height: 1.5; }
.g-num select { width: 100%; }

@media screen and (max-width: 600px) {
    .sed-head { flex-wrap: wrap; gap: 10px; padding: 14px; }
    .sed-info { flex: 1 1 100%; order: 3; }
    .sed-act { margin-left: auto; }
    .sed-goods-head, .sed-goods-row {
        grid-template-columns: 7em minmax(0, 1fr) 5.5em;
        gap: 10px;
        padding: 10px 14px;
    }
}
td.lavel00 { background: var(--surface-2); background-color: var(--surface-2); color: var(--text-muted); }
/* アカウント情報変更画面のラベル列（account.css の黄色を打ち消す） */
td.label200 {
    background: var(--surface-2);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-weight: 700;
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
    width: 300px !important;
}
td.label200 .small, td.label200 .red { display: block; margin-top: 2px; font-weight: 400; }
td.inform, td.informbt { background: var(--surface); }
.tdcenter { text-align: center; }
.tablestyle01 tr:last-child > td,
.tablestyle02 tr:last-child > td { border-bottom: 0; }

/* 必須マーク */
td.lavel span, .lavelname span, .laveladd span,
.lavelzip span, .laveltel span, .lavelsel span {
    color: var(--danger);
    font-weight: 700;
}

/* 補足テキスト */
.tablestyle01 .small, .tablestyle02 .small {
    display: inline-block;
    margin-top: 2px;
    color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   8. フォーム部品
   -------------------------------------------------------------------------- */
form { margin: 0 0 24px; font-size: 1em; text-align: left; }

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="date"], select, textarea {
    font-family: inherit;
    font-size: 1em;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    max-width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { line-height: 1.7; resize: vertical; }
select { cursor: pointer; }

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input[type="date"]:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
input[readonly] { background: var(--surface-3); color: var(--text-muted); }

input[type="checkbox"], input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0 6px 0 0;
    vertical-align: -3px;
    accent-color: var(--brand);
    cursor: pointer;
}
label { cursor: pointer; }

/* ボタン */
button,
input[type="submit"], input[type="button"], input[type="reset"], .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: .96em;
    font-weight: 700;
    line-height: 1.4;
    padding: 12px 26px;
    min-height: 44px;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
button:hover,
input[type="submit"]:hover, input[type="button"]:hover, .btn:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    text-decoration: none;
}
button:active,
input[type="submit"]:active, input[type="button"]:active { transform: translateY(1px); }
button:focus-visible,
input[type="submit"]:focus-visible, input[type="button"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--brand-ring);
}
/* 副次ボタン（戻る・変更など） */
input[type="button"], input[type="reset"] {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-strong);
}
input[type="button"]:hover, input[type="reset"]:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--text-faint);
}
/* 主要ボタン（input[type=button] でも主たる操作にはこのクラスを付ける）  2026.09.11 追加 */
input[type="button"].btn-primary, .btn-primary {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}
input[type="button"].btn-primary:hover, .btn-primary:hover {
    color: #fff;
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}
/* 一覧テーブル内の小さいボタン */
.list input[type="submit"], .list input[type="button"] {
    font-size: .84em;
    padding: 7px 14px;
    min-height: 34px;
}
.zip_add_convert_btn { font-size: .84em; padding: 8px 14px; min-height: 36px; }

/* 注文確定ボタン */
p.kakutei {
    width: 100%;
    background: transparent;
    background-color: transparent;
    padding: 0;
    margin: 22px 0;
    text-align: center;
}
p.kakutei input[type="submit"] {
    width: 100%;
    max-width: 420px;
    font-size: 1.05em;
    padding: 16px 24px;
    min-height: 54px;
    background: var(--danger);
    border-color: var(--danger);
    box-shadow: var(--shadow-md);
}
p.kakutei input[type="submit"]:hover { background: #a52717; border-color: #a52717; }

/* 変更・訂正リンク行 */
.henkou {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    font-size: .9em;
}

/* 注文へ進む / かご操作 */
#shopbid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    width: 100%;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    background-color: transparent;
    font-size: .88em;
    color: var(--text-faint);
}
p.carttitle {
    font-size: 1.08em;
    font-weight: 700;
    text-align: left;
    color: var(--text);
    margin: 0 0 16px;
}
#listunder {
    width: 100%;
    text-align: left;
    font-size: .92em;
    color: var(--danger);
    margin: 12px 0;
}
#listunder span { font-weight: 400; color: var(--text-muted); }
#orderbutton {
    margin: 28px 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
    width: 100%;
}
#orderbutton form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin: 0;
}
#topbtn, #godbtn { float: none; width: auto; text-align: left; }
p.carttitle {
    font-size: 1.05em;
    font-weight: 700;
    margin-bottom: 16px;
}

#forgetpw {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    text-align: center;
    font-size: .92em;
    padding: 18px;
}

/* --------------------------------------------------------------------------
   9. お支払い方法（step3）
   -------------------------------------------------------------------------- */
.payment {
    width: 100%;
    margin: 0 0 26px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
}
.paymenttitle {
    background: var(--surface-2);
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 22px 0 12px;
    text-align: left;
    font-weight: 700;
}
.payment > .paymenttitle:first-child { margin-top: 0; }
.paymenttitle:has(input:checked) {
    background: var(--brand-soft);
    background-color: var(--brand-soft);
    border-color: var(--brand-line);
}
.crt_pay_typ_label { font-size: 1.02em; }

/* 注意書きの囲み */
.payment div[style*="border"] {
    border: 1px solid #f3b4ab !important;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    padding: 14px 16px !important;
    margin: 14px 0 !important;
    font-size: .88em !important;
}

/* --------------------------------------------------------------------------
   10. 完了画面
   -------------------------------------------------------------------------- */
#thanks {
    width: 100%;
    max-width: var(--form-wrap);
    margin: 24px auto;
    border: 1px solid var(--border);
    border-top: 4px solid var(--ok);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 32px 28px;
    text-align: center;
    font-size: 1em;
}
#thanks h2 {
    border: 0;
    color: var(--ok);
    font-size: 1.28em;
    margin: 0 0 18px;
}
#thanks p { text-align: left; }

/* エラー・注意パネル */
.panel-note {
    background: var(--brand-soft);
    background-color: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
    padding: 22px 24px;
}
table.ta-c { margin: 0 auto 24px; width: 100%; max-width: var(--form-wrap); }

/* --------------------------------------------------------------------------
   11. 商品ページ（god_detail / god_list）
   -------------------------------------------------------------------------- */
/* 見出し（hfontcargo.css の装飾を刷新） */
h1 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .02em;
    background: transparent;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 14px;
}
h2 {
    font-size: 1.18em;
    font-weight: 700;
    color: var(--text);
    background: transparent;
    background-color: transparent;
    border: 0;
    border-left: 4px solid var(--brand);
    padding: 0 0 0 13px;
    letter-spacing: normal;
    margin: 28px 0 14px;
}
h3 {
    font-size: 1.08em;
    font-weight: 700;
    color: var(--text);
    border: 0;
    border-left: 3px solid var(--brand-line);
    padding: 0 0 0 11px;
    margin: 24px 0 12px;
}
h4 { font-size: 1.05em; color: var(--text); margin: 16px 0 10px; }
h5 {
    width: auto;
    border: 0;
    border-left: 3px solid var(--accent);
    padding: 0 0 0 11px;
    letter-spacing: normal;
    text-align: left;
    color: var(--accent);
    font-size: 1.02em;
    margin-bottom: 10px;
}
h6 {
    font-size: .95em;
    background: var(--surface-2);
    background-color: var(--surface-2);
    border: 0;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    margin: 0 0 10px;
}

/* 上部ナビ（カテゴリ切替・カートを見る） */
#topnaviscontainer {
    width: 100%;
    max-width: none;
    background: transparent;
    background-color: transparent;
    border-bottom: 0;
    margin: 0 0 16px;
}
#topnavis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
#topnavis form { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
#topnavis img { float: none; }

/* カートを見るボタン（旧 lookcart.gif の置き換え） */
.btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    min-height: 44px;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    font-size: .94em;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .05s ease;
}
.btn-cart:hover {
    color: #fff;
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.btn-cart:active { transform: translateY(1px); box-shadow: none; }
.btn-cart:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.btn-cart__icon {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.btn-cart__icon circle { fill: currentColor; stroke: none; }

@media screen and (max-width: 480px) {
    .btn-cart { width: 100%; }
}

#panlist {
    width: 100%;
    max-width: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: .86em;
    color: var(--text-faint);
}
#panlist span { color: var(--border-strong); margin: 0 6px; }

#main1 {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}
#text1 { width: 100%; max-width: none; margin: 0; padding: 0; float: none; text-align: left; }
#topprice {
    font-size: 1.02em;
    text-align: left;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 0 0 20px;
    width: 100%;
}
#topprice .red { font-size: 1.18em; }
#photo1 {
    width: 100%;
    max-width: none;
    margin: 0 0 20px;
    padding: 0;
    float: none;
    text-align: center;
}
#photo1 img { border-radius: var(--radius); box-shadow: var(--shadow); }
#photo1 div.info {
    width: auto;
    border: 1px solid #f3b4ab;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger);
    padding: 12px 14px;
    text-align: left;
}
#setsumei {
    float: none;
    width: 100%;
    font-size: 1em;
    line-height: 1.85;
    color: var(--text);
    text-align: left;
    margin-bottom: 24px;
}
#customer_voice {
    clear: both;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 320px;
    overflow: auto;
    font-size: .92em;
    color: var(--text-muted);
    padding: 0;
    margin: 0 0 24px;
}
#customer_voice:empty { display: none; }
#voice {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    font-size: .92em;
    padding: 16px 18px;
    text-align: left;
}

/* 商品一覧のジャンルメニュー */
/* 商品一覧テーブルは #order のようなスクロール親を持たないため、
   狭い画面ではこの要素側で横スクロールさせる  2026.09.10 追加 */
#ichiran {
    width: 100%;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#janlemenu {
    width: 100%;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
    font-size: 1em;
    text-align: left;
}
#janlemenu a, #janlemenu a#first, #janlemenu a#current {
    position: static;
    width: auto;
    margin: 0;
    padding: 8px 16px;
    font-size: .9em;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}
#janlemenu a:hover {
    background: var(--brand-soft);
    background-color: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand-dark);
    text-decoration: none;
}
#janlemenu .show_type, #janlemenu a#current {
    background: var(--brand);
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ついで買い商品 */
#additem {
    clear: both;
    width: 100%;
    max-width: none;
    margin: 28px 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    font-size: 1em;
    text-align: left;
}
#additem h2 {
    font-size: 1.05em;
    color: var(--brand-dark);
    background: transparent;
    background-color: transparent;
    border: 0;
    border-left: 4px solid var(--brand);
    border-radius: 0;
    padding: 0 0 0 13px;
    margin: 0 0 16px;
}
#addleft {
    float: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
#addleft h2 { flex: 1 1 100%; }
#addphoto { float: none; width: 150px; flex: none; }
#addphoto img { border-radius: var(--radius-sm); }
#addtext {
    float: none;
    width: auto;
    flex: 1 1 260px;
    margin: 0;
    font-size: .94em;
}
#addform, #addform form {
    text-align: left;
    margin-top: 10px;
    padding: 0;
    border: 0;
    font-size: 1em;
    color: var(--text);
    font-weight: 400;
}
#addform span { font-size: .92em; }
#otokus, #otoku {
    float: none;
    width: auto;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    background-color: var(--brand-soft);
    padding: 12px 14px;
    margin: 12px 0;
    font-size: .92em;
    text-align: left;
}
#otokus em, #otoku em { color: var(--danger); font-style: normal; font-weight: 700; text-decoration: none; }

#text2 {
    float: none;
    width: 100%;
    height: auto;
    max-height: 220px;
    overflow: auto;
    font-size: .9em;
    color: var(--text-muted);
    padding: 0;
    margin-top: 16px;
}

#submenu400 {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
}
.sub400title {
    font-size: 1.02em;
    font-weight: 700;
    color: var(--text);
    padding: 0 0 0 13px;
    border-left: 4px solid var(--brand);
    background: transparent;
    background-color: transparent;
    text-align: left;
    margin: 0 0 14px;
}
div.subitemname {
    border-bottom: 1px solid var(--border);
    background-image: none;
    padding: 9px 0;
    padding-left: 0;
    font-size: .9em;
    line-height: 1.6;
}
.subitemname a { color: var(--text); }
.subitemname a:hover { color: var(--brand-dark); }
span.subteika { color: var(--text-faint); font-weight: 400; text-decoration: line-through; }
span.submember { color: var(--danger); font-weight: 700; font-size: .95em; }
#sub170mem {
    clear: both;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    background-color: var(--brand-soft);
    padding: 10px 12px;
    font-size: .88em;
    margin-top: 10px;
    text-align: center;
}

/* 下部ナビ */
#undernavi, #undernavi2 {
    clear: both;
    width: 100%;
    max-width: none;
    margin: 24px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border);
    font-size: .86em;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: center;
}
#undernavi2 { border-top: 0; padding-top: 0; margin: 0 0 12px; }
#undernavi a, #undernavi2 a {
    padding: 4px 0;
    border: 0;
    color: var(--text-muted);
}
#undernavi a:hover, #undernavi2 a:hover {
    background: transparent;
    color: var(--brand-dark);
    text-decoration: underline;
}

#extra {
    clear: both;
    width: 100%;
    max-width: none;
    margin: 24px 0;
    padding: 0;
    font-size: .92em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
#extra img { float: none; margin: 0 0 8px; }
#ex1, #ex2, #ex3 {
    float: none;
    width: auto;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    line-height: 1.7;
}
#totop {
    clear: both;
    width: 100%;
    max-width: none;
    text-align: right;
    margin: 24px 0;
    font-size: .86em;
}
#totop a {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
}
#totop a:hover { background: var(--brand-soft); border-color: var(--brand-line); text-decoration: none; }

#cart_u {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    justify-content: center;
    width: 100%;
    margin: 28px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
    font-size: .88em;
    /* 旧マークアップの「|」区切りは色を落として目立たせない */
    color: transparent;
}
#cart_u a { color: var(--text-muted); }
#cart_u a:hover { color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   11-2. お問合せ / お客様の声 / パスワード確認
   -------------------------------------------------------------------------- */
/* IME 制御（imemode.css を読まないページでも効くように定義） */
.imeon  { ime-mode: active; }
.imeoff { ime-mode: disabled; }

#privacy {
    width: 100%;
    max-width: var(--form-wrap);
    margin: 0 auto;
    padding: 28px 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
}
#privacy h1 {
    font-size: 1.3em;
    color: var(--text);
    border: 0;
    border-left: 4px solid var(--brand);
    border-radius: 0;
    padding: 0 0 0 13px;
    margin: 0 0 16px;
    background: transparent;
    background-image: none;
}
#privacy p { text-align: left; font-size: 1em; }

#law, .law {
    width: 100%;
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--surface);
}
#law td, .law td {
    padding: 12px 14px;
    text-align: left;
    font-size: 1em;
    line-height: 1.7;
    background: var(--surface);
    background-color: var(--surface);
    border: 0;
    border-bottom: 1px solid var(--border);
}
#law tr:last-child > td, .law tr:last-child > td { border-bottom: 0; }
#law .cap, .law .cap, #law td:first-child, .law td:first-child {
    width: 200px;
    background: var(--surface-2);
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-weight: 700;
    border-right: 1px solid var(--border);
}

/* ポップアップウィンドウ（パスワード確認など） */
body.popup { background: var(--surface); }
body.popup #cartbody { max-width: 620px; padding: 28px 24px 40px; }
body.popup h1 {
    font-size: 1.2em;
    border-left: 4px solid var(--brand);
    padding-left: 13px;
    margin-bottom: 14px;
}

/* エラー・完了などの通知ボックス  2026.09.11 追加 */
.alert {
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 0 0 20px;
    font-size: .95em;
    line-height: 1.75;
}
.alert-error { background: var(--danger-soft); border-color: #f3b4ab; color: var(--danger); }
.alert-ok    { background: #f0fdf4;            border-color: #bbf7d0; color: var(--ok); }
.alert-info  { background: var(--brand-soft);  border-color: var(--brand-line); color: var(--brand-dark); }
.alert a { color: inherit; text-decoration: underline; }
.alert:empty { display: none; }

/* お知らせ・休業案内 */
.notice {
    border: 1px solid #f3b4ab;
    border-radius: var(--radius);
    background: var(--danger-soft);
    color: var(--danger);
    padding: 14px 18px;
    margin: 0 0 20px;
    font-size: .95em;
    line-height: 1.7;
}

/* 休業案内など（guidance） */
#cartbody > p[style*="inset"] {
    border: 1px solid #f3b4ab !important;
    border-radius: var(--radius) !important;
    background: var(--danger-soft);
    padding: 14px 18px !important;
}

@media screen and (max-width: 720px) {
    #privacy { padding: 20px 16px; }
    #law, .law { display: block; }
    #law tbody, .law tbody, #law tr, .law tr { display: block; }
    #law td, .law td { display: block; width: 100% !important; border-right: 0; }
    #law .cap, .law .cap, #law td:first-child, .law td:first-child {
        border-bottom: 0;
        padding-bottom: 4px;
        font-size: .9em;
    }
}

/* --------------------------------------------------------------------------
   11-3. ログイン / ログアウト画面
        旧CSSは body{text-align:center} を前提に中央寄せしていたため、
        モダンレイヤーで明示的に中央寄せし直す
   -------------------------------------------------------------------------- */
body#login-top #login-box,
body#logout-top #logout-box,
body#logout-top #re_login_link,
body#login-top #login-copy,
body#logout-top #logout-copy {
    text-align: center;
}

/* マイページボタンが無いページはショップ名を左端に置く */
body#login-top #logoContainer,
body#logout-top #logoContainer {
    flex-direction: row;
    justify-content: flex-start;
}

body#login-top #login-box {
    width: 100%;
    max-width: 440px;
    margin: 48px auto 32px;
    padding: 32px 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}
body#login-top #login-box h2 {
    border: 0;
    padding: 0;
    margin: 0 0 2px;
    font-size: 1.35em;
    text-align: center;
}
body#login-top #login-box h3 {
    border: 0;
    padding: 0;
    margin: 0 0 24px;
    font-size: .82em !important;
    font-weight: 600 !important;
    letter-spacing: .16em;
    color: var(--text-faint);
    text-align: center;
}
body#login-top #login-box a {
    display: inline-block;
    margin-top: 6px;
    font-size: .9em;
}

/* 商品一覧への導線をボタン表示にする（他画面の「カートを見る」と同じ体裁） */
body#login-top #login-box a.btn-shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 18px 0 4px;
    padding: 11px 18px;
    min-height: 44px;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-size: .94em;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
body#login-top #login-box a.btn-shop:hover {
    background: #fdf0d5;
    border-color: var(--brand);
    color: var(--brand-dark);
    text-decoration: none;
}
body#login-top #login-box a.btn-shop:active { transform: translateY(1px); }
body#login-top #login-box a.btn-shop:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.btn-shop__icon {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 入力欄・ボタンを枠いっぱいに（旧CSSの固定幅を打ち消す） */
body#login-top #input-id-box,
body#login-top #input-pw-box { width: 100%; margin: 0 0 12px; }
body#login-top #login-box #form__box #input-id,
body#login-top #login-box #form__box #input-pw,
body#login-top #input-id,
body#login-top #input-pw {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 11px 40px 11px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 1em;
}
body#login-top #login-box #form__box .input--pwEye,
body#login-top #login-box #form__box .input--pwClose { right: 12px; }
body#login-top #login-btn {
    width: 100%;
    height: auto;
    min-height: 48px;
    margin: 6px 0 4px;
    padding: 13px;
    font-size: 1.02em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--brand);
}
body#login-top .login-err,
body#login-top #login-box .tfa-guide { text-align: left; }

/* 認証コード入力画面（god_login.php / cart_step2.php 共通）  2026.09.27 追加
   汎用の form { text-align: left } が .tfa-box の中央寄せを打ち消すため、
   入力欄とボタンを中央に置く。幅は各画面のインライン指定（80%）に従う。 */
.tfa-box form { text-align: center; }
.tfa-box .tfa-input-box input {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.tfa-box .tfa-btn-box button {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
body#login-top #login-copy,
body#logout-top #logout-copy {
    font-size: .78em;
    color: var(--text-faint);
}

body#logout-top #logout-box {
    width: 100%;
    max-width: 440px;
    margin: 56px auto 20px;
    padding: 32px 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--ok);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}
body#logout-top #logout-box h2 {
    border: 0;
    padding: 0;
    margin: 0 0 8px;
    font-size: 1.25em;
    color: var(--ok);
    text-align: center;
}
body#logout-top #re_login_link { margin-bottom: 40px; font-size: .95em; }

@media screen and (max-width: 520px) {
    body#login-top #login-box,
    body#logout-top #logout-box { padding: 24px 18px; margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   12. フッター
   -------------------------------------------------------------------------- */
footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 22px 4vw 30px;
}
address {
    max-width: var(--wrap);
    margin: 0 auto;
    text-align: center;
    font-style: normal;
    font-size: .8em;
    color: var(--text-faint);
    background: transparent;
    border: 0;
    width: auto;
    height: auto;
}
address a { color: var(--text-faint); }
address a:hover { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   13. レスポンシブ
   -------------------------------------------------------------------------- */
@media screen and (min-width: 860px) {
    #main1 { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
}

@media screen and (max-width: 720px) {
    body { font-size: 15px; }
    #cartbody { padding: 20px 16px 48px; }
    #cartheader { padding: 12px 16px; }
    #mypageText { display: none; }
    #mypageContainer { padding: 7px; }
    /* 狭い画面では色付きの点だけにする（文字は読み上げ用に残す） */
    .login-status__label, .login-status__id {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    #mypageContainer .login-status { padding-left: 0; border-left: 0; }
    #loginStatusBox { padding: 7px 10px; }

    .steps .step { flex: 1 1 100%; padding: 9px 12px; }

    /* ラベル＋入力の2列テーブルは縦積みにして横スクロールを避ける
       ※配送先一覧は <ul class="sed-list"> へ移行済みのため対象外  2026.09.10 変更 */
    .tablestyle01 { display: block; }
    .tablestyle01 tbody, .tablestyle01 tr { display: block; }
    .tablestyle01 td,
    td.lavel, td.lavel00, td.lavel30, td.lavelbt, td.inform, td.informbt, td.label200 {
        display: block;
        width: 100% !important;
        border-right: 0;
    }
    td.lavel, td.lavel00, td.lavel30, td.lavelbt, td.label200 {
        border-bottom: 0;
        padding-bottom: 4px;
        font-size: .9em;
    }
    .tablestyle01 tr:last-child > td:last-child { border-bottom: 0; }


    input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], select, textarea {
        max-width: 100%;
    }

    .payment { padding: 14px; }
    #orderbutton form { flex-direction: column; }
    #orderbutton input, #shopbid input { width: 100%; }
    /* ボタンが縦に並ぶときは間隔を空ける（配送先の編集など、form 直下にボタンがある画面を含む）  2026.09.18 追加 */
    #orderbutton { display: flex; flex-direction: column; gap: 12px; }
    #orderbutton form { gap: 12px; }
    #orderbutton input { margin: 0; }
    p.kakutei input[type="submit"] { max-width: none; }
    #thanks { padding: 24px 18px; }
}


/* --------------------------------------------------------------------------
   13-b. 数量ステッパー（js/qty-stepper.js が生成）  2026.09.14 追加
   元の <select> は残したまま非表示にし、＋/− のボタンで数量を増減する。
   選べる数値は元の option と同じ（範囲・飛び番も踏襲）。
   -------------------------------------------------------------------------- */
select.qty-stepper__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    line-height: 1;
}

.qty-stepper__btn {
    flex: none;
    width: 32px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 0;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.qty-stepper__btn:hover:not(:disabled) { background: var(--brand); color: #fff; }
.qty-stepper__btn:active:not(:disabled) { background: var(--brand-dark); color: #fff; }
.qty-stepper__btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
.qty-stepper__btn:disabled {
    color: var(--text-faint);
    background: var(--surface-2);
    cursor: default;
    opacity: .7;
}

.qty-stepper__input {
    flex: 1 1 auto;
    width: 2.6em;
    min-width: 0;
    padding: 7px 2px;
    border: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .95em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-shadow: none;
    -moz-appearance: textfield;
}
.qty-stepper__input:focus {
    outline: 0;
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 2px var(--brand-ring);
}
.qty-stepper--wide .qty-stepper__input { width: 3.2em; }

/* 品切れ（選べる数量が 0 だけ）の場合 */
.qty-stepper.is-disabled {
    background: var(--surface-2);
    border-color: var(--border);
}
.qty-stepper.is-disabled .qty-stepper__input {
    color: var(--text-faint);
    background: var(--surface-2);
    font-weight: 400;
}

/* ステッパーが入る列は少し広げる（ご注文数・配送先ごとの数量） */
.list .p006 { width: 9.5em; }
.g-num .qty-stepper { width: 100%; }
.sed-goods-head, .sed-goods-row { grid-template-columns: 9em minmax(0, 1fr) 7.5em; }

@media screen and (max-width: 600px) {
    .qty-stepper__btn { width: 32px; }
    .qty-stepper__input { width: 2.2em; padding: 9px 2px; }
    .qty-stepper--wide .qty-stepper__input { width: 2.8em; }
    .sed-goods-head, .sed-goods-row { grid-template-columns: 6.5em minmax(0, 1fr) 6.8em; }
}

/* --------------------------------------------------------------------------
   13-c. 一覧テーブルのカード表示（js/table-cards.js が data-label を付与）
         2026.09.14 追加 / 2026.09.18 注文履歴一覧にも適用
   スマホでは列が多い表の右側（ご注文数・カゴへ）が画面外に隠れ、
   横スクロールしないと操作できなかったため、狭い画面では
   1件＝1カードの縦並びに切り替える。広い画面は従来どおりの表組み。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 680px) {
    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: auto;
        min-width: 0;
    }
    .table-cards { border-collapse: separate; background: none; box-shadow: none; border: 0; }
    .table-cards thead { display: none; }

    /* 1件を1枚のカードにする */
    .table-cards tr {
        margin: 0 0 12px;
        padding: 12px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }
    .table-cards tr:last-child { margin-bottom: 0; }
    .table-cards tbody tr:hover td { background: none; }

    /* 見出し（左）＋ 内容（右） */
    .table-cards td {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        min-height: 0;
        padding: 5px 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }
    .table-cards td::before {
        content: attr(data-label);
        flex: none;
        margin-right: auto;
        max-width: 45%;
        color: var(--text-muted);
        font-size: .84em;
        font-weight: 700;
        text-align: left;
        line-height: 1.4;
    }
    .table-cards td:not([data-label])::before { content: none; }
    .table-cards td:not([data-label]) { justify-content: flex-end; }

    /* 品番と商品名はカードの見出しとして扱う */
    .table-cards td.itemno {
        padding-top: 0;
        color: var(--text-faint);
        font-size: .86em;
    }
    .table-cards td.itenmname,
    .table-cards td.p002 {
        display: block;
        padding: 2px 0 8px;
        border-bottom: 1px dashed var(--border);
        margin-bottom: 6px;
        text-align: left;
    }
    .table-cards td.itenmname::before,
    .table-cards td.p002::before { content: none; }

    /* 注文確認画面（cart_step4）：送料・消費税・お支払合計の行（cart_step4.php が row-summary を付与）は、
       中身が空の品番・ご注文数を見出しごと隠す  2026.09.27 追加 */
    .order-confirm .table-cards tr.row-summary td.itemno,
    .order-confirm .table-cards tr.row-summary td:last-child { display: none; }

    /* 価格は数字を見やすく */
    .table-cards td.teika, .table-cards td.mprice {
        font-variant-numeric: tabular-nums;
    }

    /* 数量とボタンは押しやすい大きさで右寄せ */
    .table-cards td:last-child {
        padding-top: 10px;
        padding-bottom: 0;
    }
    .table-cards .qty-stepper { flex: none; }
    /* カード内は数字がはっきり見える幅にする */
    .table-cards .qty-stepper__input { width: 2.8em; }
    .table-cards input[type="submit"],
    .table-cards input[type="button"] {
        min-height: 40px;
        padding-left: 18px;
        padding-right: 18px;
    }

    /* カード表示のときは横スクロール不要 */
    #ichiran { overflow-x: visible; }

    /* 列幅指定はカード表示では不要 */
    .table-cards .p001, .table-cards .p002, .table-cards .p004,
    .table-cards .p005, .table-cards .p006, .table-cards .p007 { width: auto; }
    /* 注文履歴一覧（sed_order_history_list.php）もカード表示にする  2026.09.18 追加
       ID 指定のスタイル（最小幅 860px・枠線・セルの余白）を打ち消す。 */
    #order_history_list { overflow-x: visible; }
    #order_history_list table.order_history_table.table-cards {
        min-width: 0;
        border: 0;
        background: none;
        box-shadow: none;
        margin: 0;
    }
    #order_history_list table.order_history_table.table-cards > caption.title { display: block; }
    /* 1件を1枚のカードにする（5-2 の行スタイルを打ち消す） */
    #order_history_list table.order_history_table.table-cards tbody tr {
        display: block;
        margin: 0 0 12px;
        padding: 12px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }
    #order_history_list table.order_history_table.table-cards tbody tr:last-child { margin-bottom: 0; }
    #order_history_list table.order_history_table.table-cards tbody td {
        width: auto;
        padding: 5px 0;
        border: 0;
        background: none;
        text-align: right;
        white-space: normal;
    }
    #order_history_list table.order_history_table.table-cards tbody tr:hover > td { background: none; }
    /* 商品名は長いので、見出しを上に出して全幅で折り返す */
    #order_history_list table.order_history_table.table-cards td:nth-child(5) {
        display: block;
        text-align: left;
        padding: 2px 0 8px;
        margin-bottom: 6px;
        border-bottom: 1px dashed var(--border);
    }
    #order_history_list table.order_history_table.table-cards td:nth-child(5)::before {
        display: block;
        max-width: none;
        margin: 0 0 2px;
    }
    /* 合計金額は数字を見やすく */
    #order_history_list table.order_history_table.table-cards td:nth-child(6) {
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    /* 配送先一覧（sed_list.php）も注文履歴一覧と同じカード表示にする  2026.09.29 追加 */
    #sed_list { overflow-x: visible; }
    #sed_list table.order_history_table.table-cards {
        min-width: 0;
        border: 0;
        background: none;
        box-shadow: none;
        margin: 0;
    }
    #sed_list table.order_history_table.table-cards > caption.title { display: block; }
    #sed_list table.order_history_table.table-cards tbody tr {
        display: block;
        margin: 0 0 12px;
        padding: 12px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }
    #sed_list table.order_history_table.table-cards tbody tr:last-child { margin-bottom: 0; }
    #sed_list table.order_history_table.table-cards tbody td {
        width: auto;
        padding: 5px 0;
        border: 0;
        background: none;
        text-align: right;
        white-space: normal;
    }
    #sed_list table.order_history_table.table-cards tbody tr:hover > td { background: none; }
    /* 住所は長いので、見出しを上に出して全幅で折り返す */
    #sed_list table.order_history_table.table-cards td:nth-child(2) {
        display: block;
        text-align: left;
        padding: 2px 0 8px;
        margin-bottom: 6px;
        border-bottom: 1px dashed var(--border);
    }
    #sed_list table.order_history_table.table-cards td:nth-child(2)::before {
        display: block;
        max-width: none;
        margin: 0 0 2px;
    }

}

/* --------------------------------------------------------------------------
   13-e. 配送先ごとの のし(シール)・配達希望時間  2026.09.16 追加
   cart_step2 の配送先一覧で、選択した配送先にだけ表示される指定欄。
   -------------------------------------------------------------------------- */
/* 一覧の先頭に並ぶ「ご注文者さま（会員登録住所）」の目印 */
.sed-self-mark {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    vertical-align: middle;
    color: var(--brand-dark);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: 999px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.sed-opt {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding: 12px 18px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.sed-opt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sed-opt-label {
    flex: none;
    color: var(--text-muted);
    font-size: .84em;
    font-weight: 700;
    letter-spacing: .02em;
}
.sed-opt select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

/* 配送先がまだ登録されていない場合の案内 */
.sed-note {
    margin: 10px 2px 0;
    color: var(--text-muted);
    font-size: .9em;
}

/* cart_step3 の配達希望時間（一括指定）のラジオ */
.send-time-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 14px 4px 0;
    white-space: nowrap;
}

@media screen and (max-width: 600px) {
    .sed-opt { padding: 12px 14px; gap: 10px 16px; }
    .sed-opt-row { flex: 1 1 100%; justify-content: space-between; min-width: 0; }
    .sed-opt select { flex: 1 1 0; }
    .sed-self-mark { margin: 4px 0 0; }
}
/* --------------------------------------------------------------------------
   14. 印刷
   -------------------------------------------------------------------------- */
@media print {
    body { background: #fff; }
    #cartheader, footer, #totop, #cart_u, #orderbutton, #stepcont { display: none !important; }
    #cartbody { max-width: none; padding: 0; }
    .list, .tablestyle01, .tablestyle02, .payment, #thanks {
        box-shadow: none;
        border-color: #999;
    }
    a { color: #000; text-decoration: none; }
}