/* =============================================================
   JAA 顧客側 共通スタイル style.css
   =============================================================
   【2026-09-10 顧客側CSSの整理（フェーズ1）】
   ・各画面（customer/*.php）のページ内 <style> をここへ集約した。画面側には <style> を置かない
     （唯一の例外なし。幅の据え置きは .mypage--narrow で行う）。
   ・色・罫線・角丸・文字サイズ・余白は :root の変数で一元管理する。画面の見た目を変えるときは
     変数か該当セクションを直す＝1か所で全画面に効く。
   ・赤の基準色は --jaa-red（#c8102e）。エラー系だけ --jaa-error（少し暗い赤）。
     旧 #b3121a / #a00000 / #c00 は廃止（すべて変数に置換済み）。
   ・既存のクラス名は極力そのまま（テストが参照するため）。
   ============================================================= */

/* ---- ブランド基調（差し色：赤／文字：黒／地：白・和テイスト）---- */
:root {
  --jaa-red:        #c8102e;  /* 差し色（ロゴの赤・主ボタン・リンク）*/
  --jaa-red-dark:   #9e0b23;  /* ホバー時 */
  --jaa-error:      #a8102a;  /* エラー文字・必須マーク（基準色より一段暗い赤）*/
  --jaa-error-ink:  #7a0b1c;  /* エラー枠内の文字 */
  --jaa-error-bg:   #fdecee;  /* エラー枠の地 */
  --jaa-error-line: #f5c2c8;  /* エラー枠の枠線 */
  --jaa-ink:        #1a1a1a;  /* 本文の黒 */
  --jaa-muted:      #6b6b6b;  /* 補助テキスト */
  --jaa-muted-2:    #8f8f8f;  /* さらに薄い補助（無効・番号）*/
  --jaa-line:       #e5e1db;  /* 罫線（やや暖色）*/
  --jaa-line-strong:#c9c3ba;  /* 合計行・小計線などの強い罫線 */
  --jaa-paper:      #fbf9f6;  /* 生成りの地（和紙感）*/
  --jaa-info-line:  #ece3d3;  /* 補足枠の枠線 */
  --jaa-bg:         #ffffff;
  --jaa-ok:         #0a5c26;  /* 出荷済み・入金済みなど良い状態の緑（バッジ用）*/
  --jaa-ok-bg:      #e9f7ef;
  --jaa-radius:     6px;
  --jaa-radius-sm:  4px;
  --jaa-radius-lg:  8px;
  --jaa-focus:      rgba(200, 16, 46, 0.25);  /* フォーカスリング */
  /* 文字サイズの段階（本文 16px 基準）*/
  --jaa-fs-xxs: 0.75rem;   /* 12px：図解など最小 */
  --jaa-fs-xs:  0.8rem;    /* 12.8px：表のヘッダ・バッジ */
  --jaa-fs-sm:  0.85rem;   /* 13.6px：ラベル・注記 */
  --jaa-fs-sub: 0.92rem;   /* 14.7px：補助文・表本文 */
  --jaa-fs-body:1rem;      /* 16px：本文・入力欄・ボタン */
  --jaa-fs-lg:  1.12rem;   /* 合計行・強調 */
  --jaa-fs-h3:  1.05rem;
  --jaa-fs-h2:  1.1rem;
  --jaa-fs-h1:  1.4rem;
  /* 余白の段階 */
  --jaa-sp-1: 0.25rem;
  --jaa-sp-2: 0.5rem;
  --jaa-sp-3: 0.75rem;
  --jaa-sp-4: 1rem;
  --jaa-sp-5: 1.5rem;
  --jaa-sp-6: 2rem;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--jaa-fs-body);
  color: var(--jaa-ink);
  background: #f7f7f5;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* リンク：本文中は赤＋下線（リンクだと分かるように）。ナビ・ページャ・補助リンクは下線なし（下で個別指定）。 */
a { color: var(--jaa-red); text-decoration: underline; }
a:hover { color: var(--jaa-red-dark); }
.nowrap { white-space: nowrap; }
.small-link { font-size: var(--jaa-fs-sm); }

.placeholder {
  max-width: 640px;
  margin: 20vh auto;
  padding: 0 24px;
  text-align: center;
}
.placeholder h1 { font-size: 1.8rem; margin-bottom: .5rem; }
.placeholder p { color: var(--jaa-muted); }

/* =============================================================
   全ページ共通ヘッダー（ロゴ）site-header
   ============================================================= */
.site-header {
  display: flex; align-items: center;
  padding: 0.6rem 1.25rem;
  background: var(--jaa-bg);
  border-bottom: 1px solid var(--jaa-line);
}
.site-header__logo { display: inline-flex; align-items: center; line-height: 0; }
.site-header__logo img { height: 48px; width: 48px; display: block; }
@media (max-width: 640px) {
  .site-header { padding: 0.5rem 1rem; }
  .site-header__logo img { height: 40px; width: 40px; }
}

/* =============================================================
   認証系ページ共通スタイル（login / register / otp / password 系）
   ============================================================= */
.auth-card {
  max-width: 400px;
  margin: 8vh auto;
  padding: 2.75rem 2.5rem;
  background: var(--jaa-bg);
  border: 1px solid var(--jaa-line);
  border-top: 3px solid var(--jaa-red);   /* 上辺だけ赤の細帯（差し色）*/
  border-radius: var(--jaa-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.auth-card h1 { margin: 0 0 1.5rem; font-size: var(--jaa-fs-h1); font-weight: 600; letter-spacing: 0.02em; }
.auth-card p  { margin: 0 0 1.25rem; color: var(--jaa-muted); font-size: var(--jaa-fs-sub); }

/* 会員登録フォームは項目が多いので幅広に */
.auth-card-wide { max-width: 760px; }

/* 住所グループ（登録先／発送先）を枠で区切る */
.addr-group {
  margin: 1.5rem 0 0; padding: 0.5rem 1.25rem 1.25rem;
  border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius);
}
.addr-group legend {
  padding: 0 0.4rem; font-size: var(--jaa-fs-sub); font-weight: 600; color: var(--jaa-ink);
}

/* 住所項目を2カラム。狭幅で1カラムに折返し。 */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.addr-grid .field { display: flex; flex-direction: column; min-width: 0; }
.addr-grid .field--full { grid-column: 1 / -1; }
.addr-grid .field label { margin: 1rem 0 0.4rem; }
@media (max-width: 560px) {
  .addr-grid { grid-template-columns: 1fr; }
}
/* 「登録先住所と同じ」チェック行 */
.checkbox-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.6rem 0 0.4rem; font-weight: 400; font-size: var(--jaa-fs-sub); color: var(--jaa-ink);
}
.checkbox-row input { width: auto; }
/* 必須マーク */
.req, .sr-req, .os-req { color: var(--jaa-error); font-weight: 700; }

/* =============================================================
   フォーム部品（ラベル・入力欄）— 全画面共通の1定義
   認証カード／プロフィール（.field）／アドレス帳（.sa-form）／発送依頼（.sr-row）／
   注文フォームの明細表（.os-table）と要望欄（.os-freenote）
   ============================================================= */
.auth-card label, .field label, .sa-form label, .sr-row label, .os-freenote label {
  display: block; margin: 1.1rem 0 0.4rem;
  font-size: var(--jaa-fs-sm); font-weight: 600; color: var(--jaa-ink);
}
.field { margin: 0; }
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"],
.auth-card input[type="url"],
.auth-card input[type="number"],
.auth-card select,
.auth-card textarea,
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="url"],
.sa-form input[type="text"],
.sr-row input[type="text"], .sr-row select, .sr-row textarea,
.os-table input[type="text"], .os-table input[type="url"], .os-table input[type="number"],
.os-freenote textarea {
  width: 100%; box-sizing: border-box;
  padding: 0.7rem 0.85rem; font-size: var(--jaa-fs-body); font-family: inherit;
  color: var(--jaa-ink); background: var(--jaa-bg);
  border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-card textarea, .sr-row textarea, .os-freenote textarea {
  line-height: 1.5; resize: vertical; min-height: 7rem;
}
/* select：枠線・高さ・角丸を他の入力欄と統一（ネイティブの▼矢印は残す）。認証カード内は中幅。 */
.auth-card select { width: 16rem; max-width: 100%; }
.auth-card input:focus, .auth-card select:focus, .auth-card textarea:focus,
.field input:focus, .sa-form input:focus,
.sr-row input:focus, .sr-row select:focus, .sr-row textarea:focus,
.os-table input:focus, .os-freenote textarea:focus {
  outline: none; border-color: var(--jaa-red);
  box-shadow: 0 0 0 3px var(--jaa-focus);
}
/* 注文フォームのフィールド幅調整（表示のみ）*/
.auth-card input.input-amount { width: 13rem; }
.auth-card input.input-narrow { width: 6rem; }
.auth-card textarea.textarea-lg { min-height: 10rem; }

/* =============================================================
   ボタン — 1系統（主＝赤 .btn／副＝黒文字・薄グレー枠 .btn-secondary）
   ・主ボタンは内容幅が既定。認証カードの中だけ幅100%。
   ・.btn-primary は注文・発送依頼画面で使っている別名（同じ見た目）。
   ・小サイズ .btn-sm（一覧の Pay now など）。.btn-inline は旧名の別名。
   ============================================================= */
.btn, .btn-primary {
  display: inline-block; width: auto; margin: 0;
  padding: 0.7rem 1.4rem; font-size: var(--jaa-fs-body); font-weight: 600; line-height: 1.25;
  font-family: inherit; text-align: center; text-decoration: none;
  color: #fff; background: var(--jaa-red);
  border: 1px solid var(--jaa-red); border-radius: var(--jaa-radius);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.btn:hover, .btn-primary:hover { color: #fff; background: var(--jaa-red-dark); border-color: var(--jaa-red-dark); }
.btn:focus-visible, .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jaa-focus); }
.btn[disabled], .btn-primary[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.auth-card .btn { width: 100%; margin-top: 1.75rem; }

.btn-secondary {
  color: var(--jaa-ink); background: transparent; border-color: var(--jaa-line);
}
.btn-secondary:hover { color: var(--jaa-ink); background: var(--jaa-paper); border-color: var(--jaa-muted); }

.btn-sm, .btn-inline {
  display: inline-block; padding: 0.3rem 0.75rem; font-size: var(--jaa-fs-xs); font-weight: 600; line-height: 1.4;
  color: #fff; background: var(--jaa-red); border: 1px solid var(--jaa-red);
  border-radius: var(--jaa-radius); cursor: pointer; text-decoration: none; font-family: inherit;
}
.btn-inline[disabled] { opacity: 0.55; cursor: not-allowed; }

/* テキスト風ボタン（OTP再送・アドレス帳の Set as default など）*/
.otp-resend { margin: 0.75rem 0 0; text-align: center; }
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--jaa-red); font-size: var(--jaa-fs-sub); text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* 支払い手段の色分け（pay.php）。決済手段を色で区別するため統一しない（桜井さん決定）。 */
.btn-paypal  { background: #ffc439; border-color: #ffc439; color: #111; }
.btn-paypal:hover  { background: #f0b52d; border-color: #f0b52d; color: #111; }
.btn-balance { background: #137333; border-color: #137333; color: #fff; }
.btn-balance:hover { background: #0f5c29; border-color: #0f5c29; }

/* 注文フォームの「明細を追加」（破線）と行削除 × */
.os-add { margin: 12px 0 4px; }
.os-add button {
  background: var(--jaa-bg); border: 1px dashed var(--jaa-red); color: var(--jaa-red);
  padding: 8px 16px; border-radius: var(--jaa-radius-sm); cursor: pointer; font-size: var(--jaa-fs-sub); font-family: inherit;
}
.os-add button[disabled] { border-color: var(--jaa-line-strong); color: var(--jaa-muted-2); cursor: default; }
.os-del-btn { border: 0; background: none; color: var(--jaa-red); font-size: 1.2em; cursor: pointer; line-height: 1; padding: 8px; }
.os-del-btn[disabled] { color: var(--jaa-line-strong); cursor: default; }

/* =============================================================
   メッセージ — 3系統
   エラー .form-error ／ 成功 .form-notice（中立グレー）／ 注意・補足 .form-info・.form-hint
   保管の案内（.os-storage-notice 等）・振込の案内は「注意・補足」の別名（左に赤帯）。
   ============================================================= */
.form-error, .form-info, .form-notice {
  margin: 0 0 1.25rem; padding: 0.75rem 0.9rem;
  font-size: var(--jaa-fs-sub); border-radius: var(--jaa-radius); border: 1px solid transparent;
}
.form-error  { color: var(--jaa-error-ink); background: var(--jaa-error-bg); border-color: var(--jaa-error-line); }
.form-info   { color: var(--jaa-ink); background: var(--jaa-paper); border-color: var(--jaa-info-line); }
.form-notice { color: var(--jaa-ink); background: #f4f4f2; border-color: var(--jaa-line); }
.form-error p, .form-info p, .form-notice p { margin: 0; }
.form-error div + div { margin-top: 0.3rem; }
.form-error ul { margin: 0.3em 0 0 1.2em; padding: 0; }
.form-error-inline { color: var(--jaa-error); font-size: var(--jaa-fs-sm); margin: 0.25rem 0 0; }
.form-hint { margin: 1.1rem 0 0; color: var(--jaa-muted); font-size: var(--jaa-fs-sm); line-height: 1.5; }
/* 左に赤帯の案内（保管の案内・振込の案内・ショップサービスへの誘導）＝注意・補足の別名 */
.callout, .os-storage-notice, .oc-storage-notice, .pay-storage-notice, .bt-storage-notice,
.os-bank-hint, .oc-bank-hint, .bt-callout, .oc-refund-note {
  max-width: 760px; margin: 0 0 1rem; padding: 0.75rem 0.9rem;
  font-size: var(--jaa-fs-sub); color: var(--jaa-ink);
  background: var(--jaa-paper); border: 1px solid var(--jaa-info-line); border-left: 3px solid var(--jaa-red);
  border-radius: var(--jaa-radius);
}
.os-shop-guide a { font-weight: 700; }

/* ---- 補助リンク・補助テキスト ---- */
.auth-links { margin-top: 1.5rem; text-align: center; font-size: var(--jaa-fs-sub); }
.auth-links a { color: var(--jaa-red); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.muted { color: var(--jaa-muted); font-size: var(--jaa-fs-sub); }

/* =============================================================
   マイページ族（ログイン後の全画面：.mypage）
   ============================================================= */
.mypage {
  /* 【2026-09-01】980px → 1160px：注文フォームと統一。 */
  max-width: 1160px;
  margin: 4vh auto;
  padding: 0 1.25rem 3rem;
}
/* 入力フォーム中心の画面（profile.php）は 980px に据え置き（意図的） */
.mypage--narrow { max-width: 980px; }
.mypage-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  border-bottom: 1px solid var(--jaa-line); padding-bottom: 1rem; margin-bottom: 1.5rem;
}
.mypage-head h1 { margin: 0 0 0.25rem; font-size: var(--jaa-fs-h1); font-weight: 600; }
.mypage-head p  { margin: 0; }
.mypage-head form { margin: 0; }
.mypage-head .btn { padding: 0.5rem 1rem; }
.mypage-head .auth-links { margin: 0; }
/* 【2026-09-11】Overview 以外の画面見出し（.page-head）：Overview の挨拶（30px）より一段小さい 22px・下罫線で区切る。
   Welcome や Log out は置かない（挨拶は Overview・Log out はヘッダー）。 */
.mypage-head.page-head { padding-bottom: 14px; margin-bottom: 20px; }
.mypage-head.page-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.mypage-head.page-head p { margin: 4px 0 0; font-size: var(--jaa-fs-sm); }
/* 見出し（h2／h3）は .mypage 内で共通 */
.mypage h2 { font-size: var(--jaa-fs-h2); font-weight: 600; margin: 0 0 0.75rem; }
.mypage h3 { font-size: var(--jaa-fs-h3); font-weight: 600; margin: 1.5rem 0 0.5rem; }
.mypage > .form-error, .mypage > .row-action, .mypage > .bank-note { margin: 0 0 1.25rem; }

/* 左サイドメニュー＋右コンテンツ
   【2026-09-11 デザイン資料 JAA Account Home（1A）に合わせて枠構成に】
   左メニュー（208px・白・右罫線）とコンテンツ（内側余白 28px）を1つの枠（罫線・角丸・生成りの地）に収める。
   枠の左端＝ヘッダーのロゴの左端、右端＝Log out の右端（.site-header__inner と同じ 1160px・同じ左右余白）。 */
.mypage-layout {
  display: flex; align-items: stretch; gap: 0;
  background: var(--jaa-paper); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius-lg); overflow: hidden;
}
.mypage-nav { flex: 0 0 208px; background: var(--jaa-bg); border-right: 1px solid var(--jaa-line); padding: 28px 0 32px; }   /* 【2026-09-11】上 22→28px：最上部の「+ New order」にゆとり */
.mypage-nav ul { list-style: none; margin: 0; padding: 0; }
.mypage-nav li { margin: 0; }
.mypage-nav a {
  display: block; padding: 9px 20px; margin: 0;
  color: var(--jaa-ink); text-decoration: none; font-size: var(--jaa-fs-sub);
  border-left: 3px solid transparent;
}
.mypage-nav a:hover { background: var(--jaa-paper); color: var(--jaa-ink); }
.mypage-nav a.is-active {
  background: var(--jaa-paper); border-left-color: var(--jaa-red);
  color: var(--jaa-red); font-weight: 700;
}
.mypage-content { flex: 1 1 auto; min-width: 0; padding: 28px 28px 36px; background: var(--jaa-paper); }   /* min-width:0 で table-scroll がはみ出さない */
.mypage-content > h2 { margin: 0 0 1rem; }
.mypage-subsection { margin-top: 2rem; }
.mypage-subsection h3 { margin: 0 0 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--jaa-line); }

/* 商品名セルの省略表示 */
.ellipsis {
  display: inline-block; max-width: 220px; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 狭幅：サイドメニューを上部の横並びに切替 */
@media (max-width: 640px) {
  .mypage-layout { flex-direction: column; gap: 0; }
  .mypage-nav { flex: none; width: 100%; border-right: none; border-bottom: 1px solid var(--jaa-line); padding: 12px 12px 14px; }
  .mypage-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .mypage-nav a {
    margin-bottom: 0; border-left: none; border-bottom: 2px solid transparent; border-radius: var(--jaa-radius);
    padding: 0.5rem 0.75rem;
  }
  .mypage-nav a.is-active { border-left: none; border-bottom-color: var(--jaa-red); }
  .mypage-content { padding: 18px 14px 24px; }
  .ellipsis { max-width: 140px; }
  .mypage-head { flex-direction: column; }
}

.mypage-section { margin-top: 2rem; }

/* 残高 */
.balance-box {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--jaa-paper); border: 1px solid var(--jaa-line);
  border-left: 3px solid var(--jaa-red); border-radius: var(--jaa-radius);
}
.balance-amount { font-size: 1.9rem; font-weight: 700; letter-spacing: 0.01em; color: var(--jaa-ink); }
.balance-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* =============================================================
   残高・取引履歴（mypage view=balance）【2026-09-21 デザイン刷新＋払い戻し】
   資料 デザイン/顧客画面/JAA Balance History.dc.html の生16進を --jaa-* に読み替え：
   黒箱 #1b1817→--jaa-ink（白文字は既存 .balance-dark と同じ #fff）／赤 #c8102e→--jaa-red／緑 #1b7a4b→--jaa-ok／
   地 #faf8f7→--jaa-paper／枠 #ddd7d3・#e6e1dd・#f4f1ef→--jaa-line／補助 #3d3836・#56504e→--jaa-muted／
   黒箱ラベル #d8d3cf→--jaa-line-strong。フォント（Manrope/Noto）は読み込まず既存スタックのまま。
   ページャは注文一覧（.ol-showing/.ol-pager/.ol-page-btn）を流用。
   ============================================================= */
.bh-title { font-size: var(--jaa-fs-h1); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.1rem; }
.bh-box {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  background: var(--jaa-ink); color: #fff; border-radius: var(--jaa-radius); padding: 22px 24px; margin-bottom: 1.5rem;
}
.bh-box-label { font-size: var(--jaa-fs-xxs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--jaa-line-strong); font-weight: 700; margin-bottom: 8px; }
.bh-box-amount { font-size: 2.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* 黒い箱の2ボタン（Add balance／Request withdrawal）。ボタンだけを横並び（資料6）。押せない理由は箱の下の1行で伝える＝ボタン下に文字は置かない。 */
.bh-box-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bh-box .btn { padding: 13px 22px; font-size: var(--jaa-fs-body); font-weight: 700; white-space: nowrap; }
.bh-box .btn[disabled] { background: transparent; border: 1px solid var(--jaa-muted); color: var(--jaa-line-strong); opacity: 1; cursor: not-allowed; }
/* 払い戻しカード（フォーム＋案内3通り）：資料「Request a withdrawal」に寄せる。地・枠・赤は --jaa-*（赤は --jaa-red のみ）。 */
.bh-card { background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); padding: 20px 22px 22px; margin-bottom: 1.6rem; }
/* フォーム画面の「Back to balance」リンクと、処理中の請求を1行で出す帯 */
.bh-back { margin: 0 0 1rem; font-size: var(--jaa-fs-sub); }
.bh-back a { font-weight: 600; }
.bh-pending-line { background: var(--jaa-paper); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); padding: 12px 18px; margin: 0 0 1.6rem; color: var(--jaa-ink); font-size: var(--jaa-fs-sub); line-height: 1.6; }
.bh-form-head { font-size: var(--jaa-fs-body); font-weight: 700; margin: 0 0 14px; }
.bh-form-avail { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--jaa-line); }
.bh-form-avail-label { color: var(--jaa-muted); font-size: var(--jaa-fs-sub); }
.bh-form-avail-amt { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-form-label { display: block; font-size: var(--jaa-fs-sm); font-weight: 700; margin: 16px 0 7px; }
.bh-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bh-input-wrap { flex: 1 1 220px; min-width: 180px; display: flex; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid var(--jaa-line-strong); border-radius: var(--jaa-radius-sm); background: var(--jaa-bg); }
.bh-input-wrap:focus-within { border-color: var(--jaa-red); }
.bh-input-yen { font-size: var(--jaa-fs-body); font-weight: 700; color: var(--jaa-muted); }
.bh-input-wrap input { flex: 1; min-width: 0; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--jaa-fs-body); color: var(--jaa-ink); font-variant-numeric: tabular-nums; }
.bh-input-wrap input::-webkit-outer-spin-button, .bh-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bh-input-wrap input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.bh-form-submit { flex: 0 0 auto; padding: 13px 22px; font-weight: 700; white-space: nowrap; }
.bh-form-note { margin: 12px 0 0; color: var(--jaa-muted); font-size: var(--jaa-fs-sm); line-height: 1.7; }
.bh-history-h { font-size: var(--jaa-fs-h2); font-weight: 700; margin: 0 0 0.75rem; }
.bh-list { background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); overflow: hidden; }
.bh-head, .bh-row { display: flex; gap: 14px; align-items: baseline; padding: 12px 20px; }
.bh-head { background: var(--jaa-paper); border-bottom: 1px solid var(--jaa-line); font-size: var(--jaa-fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 700; }
.bh-row { border-bottom: 1px solid var(--jaa-line); }
.bh-row:last-of-type { border-bottom: 0; }
.bh-c-txn { flex: 1 1 auto; min-width: 0; }
.bh-c-amt { flex: 0 0 96px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-c-bal { flex: 0 0 90px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-txn-title { display: block; font-size: var(--jaa-fs-sub); font-weight: 600; line-height: 1.45; }
.bh-txn-sub { display: block; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bh-foot { border-top: 1px solid var(--jaa-line); background: var(--jaa-paper); margin-top: 0; }

/* =============================================================
   テーブル — 2系統
   一覧表 .data-table（別名：注文フォーム .os-table／発送依頼 .sr-table）
   明細表 .detail-table（項目名＋値の2列。別名：振込案内 .bt-table）
   金額の内訳（.brk-*・.pay-table）は明細表の派生。合計線は --jaa-line-strong で統一。
   ============================================================= */
.table-scroll, .os-scroll { overflow-x: auto; }
.data-table, .os-table, .sr-table { width: 100%; border-collapse: collapse; font-size: var(--jaa-fs-sub); }
.data-table th, .data-table td, .os-table th, .os-table td, .sr-table th, .sr-table td {
  text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--jaa-line);
  vertical-align: top;
}
.data-table thead th, .os-table thead th, .sr-table thead th {
  font-size: var(--jaa-fs-xs); font-weight: 600; color: var(--jaa-muted);
  border-bottom: 2px solid var(--jaa-line); white-space: nowrap;
}
.data-table td.num, .data-table th.num, .os-table td.num, .os-table th.num, .sr-table td.num, .sr-table th.num {
  text-align: right; white-space: nowrap;
}
.amount-pos { color: var(--jaa-ok); }   /* 入金・返金＝プラス（緑）*/
.amount-neg { color: var(--jaa-red); }  /* 引落・支払＝マイナス（赤）*/
tr.row-link { cursor: pointer; }
tr.row-link:hover { background: var(--jaa-paper); }

/* 明細表（ラベル／値） */
.detail-table, .bt-table { width: 100%; border-collapse: collapse; font-size: var(--jaa-fs-sub); }
.detail-table th, .detail-table td, .bt-table th, .bt-table td {
  text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--jaa-line); vertical-align: top;
}
.detail-table th, .bt-table th { width: 38%; font-weight: 600; color: var(--jaa-muted); white-space: nowrap; }
.detail-table thead th { width: auto; }
.detail-table td.num, .detail-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 消費税など「合計の外の別項目」を視覚的に分離 */
.detail-table.tax-row { margin-top: 0.4rem; }
.detail-table.tax-row th, .detail-table.tax-row td { border-top: 2px solid var(--jaa-line-strong); border-bottom: none; color: var(--jaa-ink); }
/* 合計行 */
.detail-table tr.total-row th, .detail-table tr.total-row td {
  font-weight: 700; color: var(--jaa-ink); border-top: 2px solid var(--jaa-line-strong);
}
/* 金額の内訳（注文フォーム・確認・完了）*/
.brk { max-width: 640px; margin: 22px 0 8px; }
.brk-heading { font-weight: 700; color: var(--jaa-ink); margin: 0 0 10px; }
.brk-order { margin: 0 0 10px; padding: 10px 12px; background: var(--jaa-paper); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); }
.brk-order-head { font-weight: 600; color: var(--jaa-ink); margin-bottom: 4px; }
.brk-name { color: var(--jaa-muted-2); font-weight: 400; }
.brk-tbl, .brk-totals { width: 100%; border-collapse: collapse; }
.brk-tbl td, .brk-totals td { padding: 3px 4px; }
.brk-label { color: var(--jaa-muted); }
.brk-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.brk-line td { border-top: 1px solid var(--jaa-line-strong); font-weight: 700; padding-top: 6px; }
.brk-totals { margin-top: 10px; }
.brk-totals tr:first-child td { border-top: 1px solid var(--jaa-line-strong); padding-top: 6px; }
.brk-totals tr.grand td { border-top: 2px solid var(--jaa-line-strong); font-weight: 700; font-size: var(--jaa-fs-lg); padding-top: 6px; }
.brk-empty { color: var(--jaa-muted-2); }

/* 支払い画面の内訳（pay.php）*/
.pay-center { max-width: 460px; margin: 0 auto; }
.pay-table { width: 100%; max-width: 420px; border-collapse: collapse; margin: 8px auto 16px; font-size: var(--jaa-fs-sub); }
.pay-table td { padding: 6px 4px; }
.pay-table td.amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-table tr.rule td { border-top: 2px solid var(--jaa-line-strong); }
.pay-table tr.total td { font-weight: 700; font-size: var(--jaa-fs-lg); }
.pay-actions { margin-top: 16px; text-align: center; }

/* 行内アクション（Pay now 枠）・振込案内 */
.row-action { margin-top: 0.35rem; }
.bank-note { margin-top: 0.35rem; font-size: var(--jaa-fs-xs); color: var(--jaa-muted); line-height: 1.5; }

/* ページャ */
.pager { margin-top: 0.9rem; display: flex; gap: 1rem; align-items: center; font-size: var(--jaa-fs-sub); }
.pager a { color: var(--jaa-red); text-decoration: none; }
.pager a:hover { text-decoration: underline; }

/* 状態バッジ（発送履歴・発送詳細・発送依頼）*/
.st-badge, .sr-badge {
  display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: var(--jaa-fs-sm);
  white-space: nowrap; background: #f0f2f5; color: #444; border: 1px solid #d5d9de;
}
.st-shipped, .sr-b-shipped { background: var(--jaa-ok-bg); color: var(--jaa-ok); border-color: #9fd4b0; }
.st-warn { background: var(--jaa-error-bg); color: var(--jaa-error); border-color: var(--jaa-error-line); font-weight: bold; }
.sr-b-unpacked { background: #fff4d6; color: #8a5a00; border-color: #f0dfb0; }
.sr-b-packing  { background: #eef3fd; color: #1a4b8f; border-color: #c9d8f5; }
.sr-b-packed   { background: #f1e8fa; color: #5b2d8e; border-color: #ddcbef; }
.pay-link { color: var(--jaa-red); font-weight: bold; white-space: nowrap; }
/* Shipping history の添付件数リンク【2026-09-11 修正】本文色＋細い下線でクリックできると分かる（赤は Shipment No. と Track で使用済みなので増やさない）*/
.file-link { color: var(--jaa-ink); font-size: var(--jaa-fs-sm); text-decoration: underline; text-decoration-color: var(--jaa-line-strong); text-underline-offset: 3px; }
.file-link:hover { color: var(--jaa-ink); text-decoration-color: var(--jaa-ink); }

/* =============================================================
   新規注文（サービス選択 order-new.php）
   ============================================================= */
.svc-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.svc-card { flex: 1 1 220px; border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius-lg); padding: 20px; background: var(--jaa-bg); }
.svc-card h2 { margin: 0 0 6px; }
.svc-card p { color: var(--jaa-muted); font-size: var(--jaa-fs-sub); margin: 0 0 16px; }

/* =============================================================
   注文フォーム3画面（order-auction / order-shop / order-forwarding）
   ============================================================= */
.os-intro { color: var(--jaa-muted); margin: 4px 0 14px; }
.os-h { color: var(--jaa-ink); }
.os-table { min-width: 720px; }
.os-col-no    { width: 34px; color: var(--jaa-muted-2); text-align: center; padding-top: 1.1rem; }
.os-col-price { width: 130px; }
.os-col-qty   { width: 84px; }
.os-col-line  { width: 120px; text-align: right; white-space: nowrap; padding-top: 1.1rem; color: var(--jaa-ink); }
.os-col-del   { width: 40px; text-align: center; }
.os-note { color: var(--jaa-muted); font-size: var(--jaa-fs-sub); margin: 6px 0; }
.os-freenote { max-width: 640px; margin: 16px 0 6px; }
.os-freenote label { margin: 0 0 4px; }
.os-actions { margin-top: 18px; }
/* ヤフオク以外URLの入力中警告（JS が .os-url-bad を付ける）*/
.os-url-warn { display: none; color: var(--jaa-error); font-size: var(--jaa-fs-sm); margin-top: 3px; }
.os-url-bad input[name="auction_url[]"] { border-color: var(--jaa-error); background: var(--jaa-error-bg); }
.os-url-bad .os-url-warn { display: block; }

/* 確認・完了画面 */
.oc-note { color: var(--jaa-muted); font-size: var(--jaa-fs-sub); margin: 10px 0; }
.oc-ship, .oc-shipto-hold, .oc-freenote { max-width: 640px; margin: 10px 0; color: var(--jaa-ink); }
.oc-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* 確認画面：残高と支払い方法の内訳【2026-09-14】合計（.brk-totals）の下に置く。金額は右寄せ・桁揃え。
   合計行（Remaining balance／To pay by …）は太字＋上に強い罫線（.pay-table と同じ流儀）。色は本文色のみ（赤は使わない）。 */
.oc-pay { max-width: 640px; margin: 4px 0 14px; }
.oc-pay-tbl { width: 100%; border-collapse: collapse; font-size: var(--jaa-fs-sub); }
.oc-pay-tbl td { padding: 6px 4px; }
.oc-pay-tbl td.amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-pay-tbl tr:first-child td { border-top: 1px solid var(--jaa-line-strong); padding-top: 10px; }
.oc-pay-tbl tr.oc-pay-total td { font-weight: 700; font-size: var(--jaa-fs-lg); }
.oc-pay-tbl tr.oc-pay-total:not(:first-child) td { border-top: 1px solid var(--jaa-line); padding-top: 8px; }
.oc-pay-note { margin: 6px 4px 0; font-size: var(--jaa-fs-sub); color: var(--jaa-muted); }

/* 転送フォームの警告ブロック（One package = one fee = one line）【2026-09-11 短い警告に差し替え】
   赤い帯（--jaa-red の地・白文字・小さめ大文字・字間広め）＋白地の本体（見出し1行＋本文 2〜3 行）だけ。
   表・取り消し線・アイコン・記号は使わない。赤は帯の地色だけ。
   ★本文より狭い幅（76%・上限 800px）で「浮かせる」＝注意書きらしさは地色でなくラベル・短さ・狭さで出す。640px 以下は全幅。 */
.pf-warn { width: 76%; max-width: 800px; margin: 0 0 28px; background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); overflow: hidden; }
.pf-warn-band { background: var(--jaa-red); color: #fff; padding: 7px 16px; font-size: var(--jaa-fs-xxs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; }
.pf-warn-body { padding: 14px 16px 16px; }
.pf-warn-body h2 { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--jaa-ink); }
.pf-warn-body p { margin: 0; font-size: var(--jaa-fs-sm); line-height: 1.6; color: var(--jaa-ink); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pf-warn { width: 100%; max-width: none; margin-bottom: 20px; }
}

/* =============================================================
   銀行振込の案内（order-bank.php）【2026-09-16 デザイン統一】資料 JAA Bank Transfer
   ・完了画面（Step 3）の部品（.os-head／.oc-wrap.oc-done-wrap／.oc-done*／.oc-next*／.oc-callout／.oc-actions）をそのまま流用。
   ・受付番号と金額のカードは既存の .bt-table（th/td）を確認画面の合計カード（.oc-wrap .brk-totals）と同じ見た目にする。
     最終行＝Amount to transfer（振込額＝total−残高）を太い罫線と大きな数字で強調（.bt-amount）。
   ・口座情報の枠（資料の TRANSFER THESE DETAILS EXACTLY）は作らない。色は --jaa-* のみ・12px 未満なし
   ============================================================= */
.oc-wrap .bt-table { margin: 0 0 16px; background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); overflow: hidden; font-size: var(--jaa-fs-sub); }
.oc-wrap .bt-table th, .oc-wrap .bt-table td { padding: 11px 20px; border-bottom: 1px solid var(--jaa-paper); vertical-align: baseline; line-height: 1.5; }
.oc-wrap .bt-table th { width: auto; font-weight: 400; color: var(--jaa-muted); white-space: normal; }
.oc-wrap .bt-table td { text-align: right; white-space: nowrap; font-weight: 600; color: var(--jaa-ink); font-variant-numeric: tabular-nums; }
.oc-wrap .bt-table tr:first-child th, .oc-wrap .bt-table tr:first-child td { padding-top: 14px; }
.oc-wrap .bt-table tr:last-child th, .oc-wrap .bt-table tr:last-child td { border-top: 2px solid var(--jaa-ink); border-bottom: none; padding-top: 14px; padding-bottom: 16px; font-weight: 700; color: var(--jaa-ink); font-size: var(--jaa-fs-body); }
.oc-wrap .bt-table tr:last-child td.bt-amount { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }   /* 【2026-09-14】振込額（＝total−残高）を強調（最終行の指定より優先） */
@media (max-width: 640px) {
  .oc-wrap .bt-table th, .oc-wrap .bt-table td { padding-left: 14px; padding-right: 14px; }
  .oc-wrap .bt-table tr:last-child td.bt-amount { font-size: 20px; }
}

/* =============================================================
   発送依頼（shipment-request.php）【2026-09-17 デザイン刷新】資料 JAA In Warehouse
   ・3つの枠（①Items in storage ②Request a shipment ③Requests in progress）は支払い画面のカード（.pc-card／.pc-head）を流用。
   ・赤帯の注意枠は確認画面の .oc-callout・ボタンは .btn-primary／.btn-secondary・状態バッジは従来の .sr-badge。
   ・新しいのは 保管中の行（label 1行＝チェック／商品名＋注文番号／サービス／到着日）と依頼カードの中身の並びだけ。
   ・色は --jaa-* のみ・12px（--jaa-fs-xxs）未満なし
   ============================================================= */
.sr-box { margin: 0 0 20px; }
.sr-box .pc-head { align-items: center; padding: 14px 20px; }
.sr-box-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--jaa-ink); }
.sr-select-all { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); cursor: pointer; font-weight: 400; }
.sr-select-all input { margin: 0; accent-color: var(--jaa-red); }
.sr-empty, .sr-noaddr { margin: 0; padding: 16px 20px; }
.sr-noaddr { border: 0; border-radius: 0; }
/* 保管中の行：見出し行（薄い地・小さな大文字）＋ label 行（クリックでチェック） */
.sr-list-head, .sr-item { display: flex; gap: 14px; align-items: flex-start; padding: 13px 20px; border-bottom: 1px solid var(--jaa-line); }
.sr-list-head { padding: 10px 20px; background: var(--jaa-paper); font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 700; }
.sr-item { cursor: pointer; }
.sr-item:hover { background: var(--jaa-paper); }
.sr-item:last-child { border-bottom: none; }
.sr-item-check { flex: 0 0 18px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--jaa-red); }
.sr-item-main { flex: 1 1 auto; min-width: 0; }
.sr-item-title { display: block; font-size: var(--jaa-fs-sub); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; text-wrap: pretty; }
.sr-item-no { font-size: var(--jaa-fs-xxs); font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-item-svc { flex: 0 0 96px; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); }
.sr-item-date { flex: 0 0 90px; text-align: right; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 枠②：依頼フォーム */
.sr-form { padding: 20px 22px 22px; }
.sr-form .sr-box-title { margin-bottom: 4px; }
.sr-form-intro { margin: 0 0 18px; }
.sr-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.sr-grid .sr-row { flex: 1 1 200px; min-width: 200px; margin: 0; }
.sr-grid .sr-row-addr { flex: 1 1 260px; min-width: 240px; }
.sr-row label { display: block; margin: 0.6rem 0 0.3rem; font-size: var(--jaa-fs-sm); font-weight: 700; }
.sr-grid .sr-row label { margin-top: 0; margin-bottom: 7px; }
.sr-add-link { display: inline-block; margin-top: 8px; font-weight: 600; }
.sr-row textarea { min-height: 5rem; }
.sr-ins { margin-top: 16px; }
.sr-row label.sr-ins-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--jaa-fs-body); font-weight: 400; color: var(--jaa-ink); cursor: pointer; margin: 0; }   /* .sr-row label（太字）より優先 */
.sr-ins-label input { margin: 0; accent-color: var(--jaa-red); }
.sr-ins-help { margin: 4px 0 0 24px; }
.sr-note { color: var(--jaa-muted); font-size: var(--jaa-fs-sub); margin: 8px 0; }
.sr-callout { margin: 20px 0; }
.sr-actions { margin-top: 4px; }
.sr-actions .btn-primary { padding: 15px 26px; font-weight: 700; }
/* 枠③：依頼カード（未出荷だけ） */
.sr-list-title { margin: 30px 0 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sr-reqcard { margin: 0 0 14px; }   /* ★.sr-req は必須マーク（.req/.sr-req/.os-req）の既存クラス＝カードには使わない */
.sr-req-head { align-items: center; padding: 14px 20px; }
.sr-req-title { font-size: 15px; font-weight: 700; }
.sr-req-meta { margin-top: 3px; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); font-variant-numeric: tabular-nums; }
.sr-req-body { padding: 12px 20px 14px; }
.sr-req-item { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--jaa-line); }
.sr-req-item:last-of-type { border-bottom: none; }
.sr-req-item-title { flex: 1 1 240px; min-width: 0; font-size: var(--jaa-fs-sub); line-height: 1.45; overflow-wrap: anywhere; }
.sr-req-item-svc { font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); }
.sr-shipto { color: var(--jaa-muted); font-size: var(--jaa-fs-sm); line-height: 1.6; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--jaa-line); }
.sr-req-note { margin: 4px 0 0; font-size: var(--jaa-fs-sm); }
.sr-cancel-form { margin: 10px 0 0; }
.sr-cancel-form .btn-secondary { color: var(--jaa-ink); background: var(--jaa-bg); border-color: var(--jaa-line-strong); }   /* .btn-sm の赤地より優先＝副ボタンの見た目 */
.sr-cancel-form .btn-secondary:hover { background: var(--jaa-paper); border-color: var(--jaa-muted); }
.sr-empty-list { margin: 0 0 8px; }
.sr-history-link { margin: 6px 0 0; font-size: var(--jaa-fs-sub); }
.sr-history-link a { font-weight: 600; }
@media (max-width: 640px) {
  .sr-box .pc-head, .sr-list-head, .sr-item, .sr-req-head, .sr-req-body, .sr-empty, .sr-noaddr { padding-left: 14px; padding-right: 14px; }
  .sr-list-head { display: none; }
  .sr-item { flex-wrap: wrap; }
  .sr-item-main { flex: 1 1 calc(100% - 32px); }
  .sr-item-svc, .sr-item-date { flex: 0 0 auto; text-align: left; margin-left: 32px; }
  .sr-form { padding: 16px 14px 18px; }
  .sr-grid .sr-row, .sr-grid .sr-row-addr { flex: 1 1 100%; min-width: 0; }
  .sr-actions .btn-primary { width: 100%; box-sizing: border-box; text-align: center; }
}

/* =============================================================
   送付先の追加ポップアップ（app/includes/shipaddr_modal.php・4画面共通）【2026-09-17】ページ内 style から移設
   固定オーバーレイ＝ページの幅には影響しない。見た目は移設前と同じ
   ============================================================= */
.sam-overlay { position:fixed; inset:0; background:rgba(26,26,26,.55); z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow:auto; }
.sam-overlay[hidden] { display:none; }
.sam-dialog { background:var(--jaa-bg); border-radius:var(--jaa-radius-lg); width:100%; max-width:640px; box-shadow:0 12px 40px rgba(0,0,0,.25); padding:20px 24px 22px; box-sizing:border-box; position:relative; }
.sam-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 4px; }
.sam-head h2 { font-size:1.15rem; font-weight:600; margin:0; }
.sam-x { background:none; border:0; font-size:1.5rem; line-height:1; color:var(--jaa-muted); cursor:pointer; padding:4px 8px; }
.sam-x:hover { color:var(--jaa-ink); }
.sam-note { font-size:var(--jaa-fs-sm); color:var(--jaa-muted); margin:0 0 6px; }
.sam-note a { color:var(--jaa-red); }
.sam-errors { margin:10px 0 0; }
.sam-errors[hidden] { display:none; }
.sam-dialog .addr-grid .field label { margin:.8rem 0 .3rem; font-size:.92rem; }
.sam-dialog .addr-grid .field input { padding:.55rem .7rem; border:1px solid var(--jaa-line); border-radius:var(--jaa-radius-sm); font-size:.95rem; }
.sam-dialog .addr-grid .field input.is-invalid { border-color:var(--jaa-error); background:var(--jaa-error-bg); }
.sam-actions { display:flex; gap:1rem; align-items:center; margin-top:1.25rem; }
.sam-actions .btn { width:auto; margin-top:0; padding:.6rem 1.4rem; }
.sam-actions .btn[disabled] { opacity:.6; cursor:wait; }
.sam-added { display:inline-block; margin-left:8px; color:var(--jaa-ok); font-size:var(--jaa-fs-sm); font-weight:600; }
body.sam-open { overflow:hidden; }

/* =============================================================
   送付先アドレス帳（shipping-addresses.php）
   ============================================================= */
/* 【2026-09-18 デザイン刷新】資料 JAA Shipping Addresses：見出し行（h2＋n of 20 saved・右に赤い主ボタン）→ カード横並び（250〜320px・16px 間隔）→ 補足文。
   既定カードは 2px の赤枠＋DEFAULT（赤地・白字・大文字・角丸 4px）。色は --jaa-* のみ・12px 未満なし。フォーム（.sa-form）は従来どおり */
.sa-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 18px; }
.sa-count { margin: 0; padding-top: 4px; font-size: var(--jaa-fs-sub); color: var(--jaa-muted); font-variant-numeric: tabular-nums; }   /* 【2026-09-18 修正】パネル内 h2 は無し（外側 h1 と二重だった） */
.sa-toolbar .btn { flex: 0 0 auto; padding: 13px 22px; font-weight: 700; white-space: nowrap; }
.sa-toolbar .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.sa-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }   /* 【2026-09-18 修正】2列（資料どおり・カード1枚を広く） */
.sa-card {
  border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius);
  background: var(--jaa-bg); padding: 0;
  display: flex; flex-direction: column;
}
.sa-card.is-default { border: 2px solid var(--jaa-red); }
.sa-card-body { flex: 1 1 auto; padding: 16px 18px 0; }
.sa-card.is-default .sa-card-body { padding: 15px 17px 0; }   /* 2px 枠の分だけ内側を詰めて他のカードと揃える */
.sa-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.sa-card-head strong { font-size: var(--jaa-fs-body); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.sa-badge {
  flex: 0 0 auto; display: inline-block; padding: 4px 10px; font-size: var(--jaa-fs-xxs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;   /* 【2026-09-18 修正】角丸の長方形・全部大文字（DEFAULT）。ピル型ではない */
  color: var(--jaa-bg); background: var(--jaa-red); border-radius: var(--jaa-radius-sm); white-space: nowrap; line-height: 1.3;
}
.sa-lines { margin: 0; font-size: var(--jaa-fs-sub); line-height: 1.7; color: var(--jaa-ink); overflow-wrap: anywhere; }
.sa-phone { margin: 1.7em 0 0; font-size: var(--jaa-fs-sub); line-height: 1.7; color: var(--jaa-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }   /* 【2026-09-18 修正】住所ブロックと1行分あけて独立 */
/* 【2026-09-18 修正】操作段＝カード下部のフッター（区切り線＋生成りの地・注文一覧の .ol-foot と同じ作り） */
.sa-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 14px 18px; margin-top: 16px; border-top: 1px solid var(--jaa-line); background: var(--jaa-paper); border-radius: 0 0 var(--jaa-radius) var(--jaa-radius); }
.sa-card.is-default .sa-actions { padding: 14px 17px; }
.sa-actions form { margin: 0; }
.sa-actions a, .sa-actions .btn-link { font-size: var(--jaa-fs-sm); font-weight: 700; white-space: nowrap; }
.sa-actions .btn-link { font-weight: 600; color: var(--jaa-ink); }
.sa-delete, .sa-actions .btn-link.sa-delete { color: var(--jaa-muted); }
.sa-delete:hover, .sa-actions .btn-link.sa-delete:hover { color: var(--jaa-red); }
.sa-hint { margin: 18px 0 0; font-size: var(--jaa-fs-sm); line-height: 1.7; color: var(--jaa-muted); text-wrap: pretty; }
@media (max-width: 640px) {
  .sa-toolbar { flex-direction: column; align-items: stretch; }
  .sa-toolbar .btn { text-align: center; }
  .sa-cards { grid-template-columns: 1fr; }   /* 狭い幅ではカードを縦に積む */
}
.sa-form { max-width: 640px; }
.sa-form-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.sa-note { color: var(--jaa-muted); font-size: var(--jaa-fs-sm); margin: 0.75rem 0 0; }

/* =============================================================
   プロフィール（profile.php）
   ============================================================= */
.profile-section { border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius-lg); padding: 18px 22px; margin: 18px 0; }
.profile-section .btn { margin-top: 1.25rem; }

/* =============================================================
   発送詳細（shipment.php）：荷姿写真・書類
   ============================================================= */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 0; }
.pkg-grid a img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--jaa-radius-sm); display: block; border: 1px solid var(--jaa-line); }
.pkg-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85);
                z-index: 1000; align-items: center; justify-content: center; }
.pkg-lightbox:target { display: flex; }
.pkg-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
.doc-list { list-style: none; padding: 0; }
.doc-list li { padding: 6px 0; border-bottom: 1px solid var(--jaa-line); }
.doc-list .muted { margin-left: 8px; }

/* =============================================================
   全ページ共通フッター site-footer（app/includes/footer.php）
   【2026-09-10 利用規約・プライバシーポリシー】
   会社情報（左）＋リンク類（右）の2カラム。640px 以下で縦積み。文字 12px・グレー。
   メールアドレスだけブランドレッド（mailto:）。著作権表示は下段に細い罫線で区切る。
   ============================================================= */
.site-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--jaa-line);
  background: var(--jaa-bg);
  font-size: 12px;
  line-height: 1.6;
  color: var(--jaa-muted);
}
.site-footer__inner {
  max-width: 1160px; margin: 0 auto; padding: 1.25rem;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap;
}
.site-footer p { margin: 0; }
.site-footer__name { color: var(--jaa-ink); font-weight: 600; }
.site-footer__links { list-style: none; margin: 0; padding: 0; text-align: right; }
.site-footer__links li { margin: 0 0 0.2rem; }
.site-footer__links a { color: var(--jaa-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--jaa-ink); text-decoration: underline; }
.site-footer__links a.site-footer__mail { color: var(--jaa-red); }
.site-footer__links a.site-footer__mail:hover { color: var(--jaa-red-dark); }
.site-footer__copyright {
  border-top: 1px solid var(--jaa-line);
  padding: 0.6rem 1.25rem; text-align: center; color: var(--jaa-muted-2);
}
@media (max-width: 640px) {
  .site-footer__inner { flex-direction: column; gap: 1rem; padding: 1rem; }
  .site-footer__links { text-align: left; }
}

/* =============================================================
   利用規約・プライバシーポリシー（terms.php / privacy.php）legal-page
   【2026-09-10】ログイン不要の静的ページ。本文は読みやすい幅 760px に収める。
   原文（Markdown）の見出し・段落・箇条書き・表・太字を再現する。
   ============================================================= */
.legal-page {
  max-width: 760px;
  margin: 4vh auto;
  padding: 0 1.25rem 3rem;
  line-height: 1.7;
}
.legal-page h1 { margin: 0 0 0.25rem; font-size: var(--jaa-fs-h1); font-weight: 600; }
.legal-meta { margin: 0 0 1.5rem; color: var(--jaa-muted); font-size: var(--jaa-fs-sub); }
.legal-meta strong { color: var(--jaa-ink); }
.legal-page h2 {
  margin: 2.25rem 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--jaa-line);
  font-size: var(--jaa-fs-h2); font-weight: 600;
}
.legal-page h3 { margin: 1.25rem 0 0.5rem; font-size: var(--jaa-fs-h3); font-weight: 600; }
.legal-page p { margin: 0 0 0.9rem; }
.legal-page ol, .legal-page ul { margin: 0 0 0.9rem; padding-left: 1.6rem; }
.legal-page li { margin: 0 0 0.45rem; }
.legal-page li ul { margin: 0.35rem 0 0; }
.legal-page .table-scroll { margin: 0.5rem 0 1rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--jaa-fs-sub); }
.legal-table th, .legal-table td {
  text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--jaa-line); vertical-align: top;
}
.legal-table thead th {
  font-size: var(--jaa-fs-xs); font-weight: 600; color: var(--jaa-muted);
  border-bottom: 2px solid var(--jaa-line); white-space: nowrap;
}
.legal-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; font-size: var(--jaa-fs-sub); }
.legal-nav a { text-decoration: none; }
.legal-nav a:hover { text-decoration: underline; }
.legal-company { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--jaa-line); font-size: var(--jaa-fs-sub); }
.legal-company p { margin: 0; }
/* 登録フォームの同意チェック（register.php）：リンクは別タブで開く */
.agree-row { margin-top: 1.5rem; align-items: flex-start; }
.agree-row input { margin-top: 0.3rem; }

/* =============================================================
   共通ヘッダーの拡張【2026-09-11 マイページの刷新／同日 デザイン資料に合わせて内側幅を 1160px に】
   左＝ロゴ＋ブランド名／右＝Contact us・Log out（ログイン中のみ・POST フォームのボタン）
   中身は .site-header__inner（最大幅 1160px・左右余白 1.25rem＝.mypage / .site-footer__inner と同じ）に収める
   ＝ロゴの左端が左メニューの枠の左端と、Log out の右端がコンテンツの枠の右端と縦に揃う。
   ============================================================= */
.site-header { display: block; padding: 0; }
.site-header__inner {
  max-width: 1160px; margin: 0 auto; padding: 13px 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-header__logo { gap: 12px; text-decoration: none; line-height: 1.2; }
.site-header__logo img { height: 30px; width: 30px; }
.site-header__brand { font-size: var(--jaa-fs-sub); font-weight: 700; color: var(--jaa-ink); letter-spacing: 0.01em; }
.site-header__links { display: flex; align-items: center; gap: 18px; font-size: var(--jaa-fs-sm); }
.site-header__links a { color: var(--jaa-muted); text-decoration: none; }
.site-header__links a:hover { color: var(--jaa-red); text-decoration: underline; }
.site-header__logout { margin: 0; }
.site-header__logout-btn { font-size: var(--jaa-fs-sm); color: var(--jaa-muted); padding: 0; }
.site-header__logout-btn:hover { color: var(--jaa-red); }
@media (max-width: 640px) {
  .site-header__inner { padding: 10px 1rem; }
  .site-header__brand { display: none; }
  .site-header__links { gap: 0.9rem; }
}

/* =============================================================
   左メニューの拡張【2026-09-11】区分見出し（ACCOUNT / SETTINGS）・件数・New order ブロック
   寸法はデザイン資料（見出し 10px・字間 0.12em・左右 20px／CTA は margin 26px 20px 0・padding 14px・破線）
   ============================================================= */
.mypage-nav .nav-section { margin: 0; }
.mypage-nav .nav-section + .nav-section { margin-top: 22px; }
.mypage-nav .nav-section-title {
  font-size: var(--jaa-fs-xxs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jaa-muted);
  padding: 0 20px; margin: 0 0 14px;
}
.mypage-nav .nav-count { color: var(--jaa-muted); font-weight: 400; }
.mypage-nav a.is-active .nav-count { color: var(--jaa-red); }
/* 【2026-09-11 修正】「+ New order」は左メニューの最上部（ACCOUNT の前）。誘い文・破線枠は無し。
   ボタンは既存の .btn（赤地・白文字）のまま。★.mypage-nav a の黒文字がリンク色を上書きしないよう a.btn で .btn の色を明示 */
.mypage-nav .nav-cta { margin: 0 20px 26px; padding: 4px 0 26px; border-bottom: 1px solid var(--jaa-line); }   /* 【2026-09-11】上下に余白＋下に細い罫線＝メニューとは別の独立した領域に見せる（ボタン自体は不変） */
.mypage-nav .nav-cta .btn { display: block; width: 100%; text-decoration: none; text-align: center; padding: 10px; font-weight: 700; }
.mypage-nav a.btn { color: #fff; background: var(--jaa-red); border-color: var(--jaa-red); }
.mypage-nav a.btn:hover { color: #fff; background: var(--jaa-red-dark); border-color: var(--jaa-red-dark); }
@media (max-width: 640px) {
  .mypage-nav .nav-section + .nav-section { margin-top: 8px; }
  .mypage-nav .nav-section-title { padding: 0 4px; margin-bottom: 6px; }
  .mypage-nav .nav-cta { margin: 0 0 12px; padding: 2px 0 12px; border-bottom: 1px solid var(--jaa-line); }
  .mypage-nav .nav-cta .btn { display: inline-block; width: auto; padding: 8px 16px; }
}

/* =============================================================
   マイページ Overview【2026-09-11・同日デザイン資料 JAA Account Home（1A）に合わせて寸法調整】
   挨拶（30px）＋ランクカード（min-width 260px）を同じ行の両端／Needs you（カード間隔 14px）／
   下段＝In the warehouse（白カード）と 残高（黒箱）＋Recent activity（白カード）を 20px 間隔で横並び。
   色はすべて --jaa-* 変数（新しい色は増やさない）。
   ============================================================= */
.ov-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.ov-greeting h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.ov-greeting p  { margin: 0; font-size: var(--jaa-fs-sm); }
.rank-card {
  flex: 0 0 auto; min-width: 260px; max-width: 100%;
  background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius);
  padding: 14px 16px;
}
.rank-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rank-name { font-size: var(--jaa-fs-sm); font-weight: 700; }
.rank-rate { margin-left: auto; color: var(--jaa-muted); font-size: var(--jaa-fs-xxs); white-space: nowrap; }
.rank-medal { flex: 0 0 auto; width: 22px; height: 22px; }
.rank-medal-ribbon { fill: var(--jaa-red); }
.rank-bronze .rank-medal-disc { fill: #b87333; } .rank-bronze .rank-medal-inner { fill: #d9a066; }
.rank-silver .rank-medal-disc { fill: #a8a9ad; } .rank-silver .rank-medal-inner { fill: #d7d7d9; }
.rank-gold   .rank-medal-disc { fill: #d4a017; } .rank-gold   .rank-medal-inner { fill: #f1d27a; }
/* 【2026-10-21・STEP 47】platinum＝青みのある白金（silver の灰色より青く・明るい内側で区別）。形は同じメダル */
.rank-platinum .rank-medal-disc { fill: #7d93ad; } .rank-platinum .rank-medal-inner { fill: #e3eaf3; }
.rank-progress { height: 5px; background: var(--jaa-line); border-radius: 3px; margin: 8px 0 7px; overflow: hidden; }
.rank-progress-bar { height: 100%; background: var(--jaa-red); }
.rank-progress-text { margin: 0; font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); }

.ov-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ov-section-head h2, .ov-warehouse h2, .ov-activity h2 { margin: 0; font-size: 15px; font-weight: 700; }
.ov-section-head .muted { font-size: var(--jaa-fs-xxs); }
.ov-needs { margin-bottom: 30px; }
.ov-needs-empty {
  margin: 0; padding: 14px 16px; border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius);
  background: var(--jaa-bg); color: var(--jaa-muted); font-size: var(--jaa-fs-sm);
}
.needs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.needs-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-top: 3px solid var(--jaa-line); border-radius: var(--jaa-radius);
  padding: 16px;
}
.needs-pay      { border-top-color: var(--jaa-red); }
.needs-arrived  { border-top-color: var(--jaa-ink); }
.needs-resolved { border-top-color: var(--jaa-line-strong); }
.needs-tag { font-size: var(--jaa-fs-xxs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-muted); margin-bottom: 8px; }
.needs-pay .needs-tag { color: var(--jaa-red); }
.needs-title { font-size: var(--jaa-fs-sub); font-weight: 700; line-height: 1.4; margin-bottom: 4px; }
.needs-detail { color: var(--jaa-muted); font-size: var(--jaa-fs-xxs); line-height: 1.5; margin-bottom: 12px; overflow-wrap: anywhere; }
.needs-action { margin-top: auto; }
.needs-action .btn { display: inline-block; text-decoration: none; padding: 8px 14px; font-size: var(--jaa-fs-xxs); font-weight: 700; border-radius: var(--jaa-radius-sm); }
.needs-action .btn-secondary { border-color: var(--jaa-ink); color: var(--jaa-ink); background: var(--jaa-bg); }
.needs-link { font-size: var(--jaa-fs-xxs); font-weight: 700; }

.ov-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.ov-warehouse {
  flex: 2 1 380px; min-width: 300px;
  background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); padding: 18px 20px;
}
.ov-warehouse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ov-wh-table { font-size: var(--jaa-fs-sm); }
.ov-wh-table thead th { font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-muted); border-bottom: 1px solid var(--jaa-line); padding: 0 8px 8px 0; }
.ov-wh-table td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--jaa-line); vertical-align: baseline; }
.ov-wh-table td:first-child { font-weight: 600; }
.ov-wh-table .ellipsis { max-width: 260px; }
.ov-wh-table .wh-days { font-weight: 400; color: var(--jaa-muted); white-space: nowrap; }
.ov-wh-table td.wh-order { color: var(--jaa-muted); font-size: var(--jaa-fs-xxs); font-variant-numeric: tabular-nums; }
.ov-wh-table td.wh-order a { color: var(--jaa-muted); }
.ov-wh-table td.wh-ends { text-align: right; font-size: var(--jaa-fs-xxs); white-space: nowrap; }
.ov-wh-table th.wh-ends { text-align: right; }
.ends-soon { color: var(--jaa-red); font-weight: 600; }
.ov-wh-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 14px; }
.ov-wh-actions .btn { display: inline-block; text-decoration: none; padding: 9px 16px; font-size: var(--jaa-fs-xxs); font-weight: 700; border-radius: var(--jaa-radius-sm); border-color: var(--jaa-ink); color: var(--jaa-ink); background: var(--jaa-bg); }
.ov-view-all { font-size: var(--jaa-fs-xxs); font-weight: 600; text-decoration: none; }
.ov-view-all:hover { text-decoration: underline; }

.ov-money { flex: 1 1 240px; min-width: 230px; display: flex; flex-direction: column; gap: 14px; }
.balance-dark {
  background: var(--jaa-ink); color: #fff; border-radius: var(--jaa-radius);
  padding: 18px 20px; min-width: 0;
}
.balance-dark-label { font-size: var(--jaa-fs-xxs); color: var(--jaa-line-strong); margin-bottom: 6px; }
.balance-dark-amount { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0 0 14px; overflow-wrap: anywhere; }
.balance-dark-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.balance-dark-actions .btn { display: inline-block; text-decoration: none; padding: 8px 14px; font-size: var(--jaa-fs-xxs); font-weight: 600; border-radius: var(--jaa-radius-sm); }
.balance-dark-actions .btn-secondary { background: transparent; color: #fff; border-color: var(--jaa-muted); }
.balance-dark-actions .btn-secondary:hover { background: var(--jaa-muted); border-color: var(--jaa-muted); color: #fff; }
.ov-activity {
  flex: 1 1 auto; margin: 0;
  background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); padding: 16px 18px;
}
.ov-activity h2 { font-size: var(--jaa-fs-sub); margin-bottom: 12px; }
.activity-list { list-style: none; margin: 0; padding: 0; font-size: var(--jaa-fs-xxs); }
.activity-list li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--jaa-line); }
.activity-date { flex: 0 0 auto; color: var(--jaa-muted); white-space: nowrap; }
.activity-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-amount { flex: 0 0 auto; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.ov-activity .ov-view-all { display: inline-block; margin-top: 10px; font-weight: 700; }

@media (max-width: 640px) {
  .ov-head { flex-direction: column; gap: 14px; margin-bottom: 20px; }
  .ov-greeting h1 { font-size: 24px; }
  .rank-card { min-width: 0; width: 100%; }
  .needs-cards { grid-template-columns: 1fr; }   /* Needs you のカードは縦に積む */
  .ov-warehouse { min-width: 0; flex-basis: 100%; }
  .ov-money { min-width: 0; flex-basis: 100%; }
  .balance-dark-amount { font-size: 26px; }       /* 黒箱の残高が潰れないように */
  .activity-list li { flex-wrap: wrap; }
  .activity-desc { white-space: normal; flex-basis: 100%; order: 3; }
}

/* =============================================================
   注文フォーム共通部品【2026-09-11 デザイン刷新（デザイン/20260911/JAA Order Page.dc.html）】
   まず order-shop.php で型を決め、order-auction.php / order-forwarding.php にも同じ部品を適用する。
   ・.os-head / .os-step / .os-h … STEP 1 OF 3 と見出し（30px）・右端に Back
   ・.os-card / .os-card-head / .os-row / .os-field / .os-label / .os-line-total … 明細（項目ごとにラベル付き・表は使わない）
   ・.os-add / .os-del-btn … 追加（赤の破線）と行削除 ×（既存の定義を流用）
   ・.os-summary / .os-est* / .os-brk / .os-actions / .os-pay-note … 見積もり（左）と操作（右）
   色はすべて --jaa-* 変数（新しい色は増やさない）。10〜11px の指定は 12px（--jaa-fs-xxs）に読み替え。
   ============================================================= */
.os-page { max-width: 1160px; }
.os-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.os-step {
  font-size: var(--jaa-fs-xxs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jaa-red); font-weight: 600; margin-bottom: 10px;
}
.os-head .os-h { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: var(--jaa-ink); }
.os-head .back-link { margin: 0; padding-bottom: 6px; font-size: var(--jaa-fs-sub); }
.os-head .back-link a { text-decoration: none; }
.os-head .back-link a:hover { text-decoration: underline; }
.os-body { margin-top: 0; }
.os-page .os-intro { margin: 18px 0 0; font-size: var(--jaa-fs-body); line-height: 1.6; color: var(--jaa-muted); max-width: 620px; }
.os-page .os-storage-notice { margin: 24px 0 36px; padding: 16px 18px; max-width: none; background: var(--jaa-bg); line-height: 1.6; }
.os-page .form-error { margin: 0 0 24px; }

/* 明細カード */
.os-card { background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); overflow: hidden; }
.os-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px; border-bottom: 1px solid var(--jaa-line);
}
.os-card-head h2 { margin: 0; font-size: var(--jaa-fs-body); font-weight: 700; letter-spacing: -0.01em; }
.os-count { font-size: var(--jaa-fs-sm); color: var(--jaa-muted); font-variant-numeric: tabular-nums; }
.os-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px;
  padding: 14px 24px; border-top: 1px solid var(--jaa-line);
}
.os-row:first-child { border-top: none; }
.os-row-no { flex: 0 0 auto; width: 18px; font-size: var(--jaa-fs-sm); color: var(--jaa-muted-2); font-variant-numeric: tabular-nums; padding-bottom: 10px; }
.os-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.os-f-url   { flex: 3 1 210px; min-width: 160px; }
.os-f-name  { flex: 2 1 170px; min-width: 150px; }
.os-f-price { flex: 0 1 190px; min-width: 170px; }   /* 【2026-09-14】ラベル「UNIT PRICE (EXCL. TAX)」「MAX BID (EXCL. TAX)」が1行に収まる幅 */
.os-f-qty   { flex: 0 0 72px; }
.os-f-line  { flex: 1 1 100px; min-width: 90px; align-items: flex-end; }
.os-label {
  display: block; margin: 0; font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--jaa-muted); font-weight: 600;
}
.os-f-price .os-label, .os-f-qty .os-label { text-align: right; }
.os-card .os-field input {
  width: 100%; min-width: 0; padding: 9px 11px; font-size: var(--jaa-fs-sm); font-family: inherit;
  color: var(--jaa-ink); background: var(--jaa-paper); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.os-card .os-field input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.os-card .os-field input:focus { outline: none; border-color: var(--jaa-red); box-shadow: 0 0 0 3px var(--jaa-focus); }
.os-line-total { font-size: var(--jaa-fs-sub); font-weight: 600; font-variant-numeric: tabular-nums; padding: 9px 0; line-height: 1; white-space: nowrap; }
.os-card .os-del-btn { flex: 0 0 auto; width: 26px; height: 26px; margin-bottom: 6px; padding: 0; border-radius: var(--jaa-radius-sm); color: var(--jaa-muted-2); font-size: 15px; }
.os-card .os-del-btn:hover:not([disabled]) { background: var(--jaa-error-bg); color: var(--jaa-red); }
.os-card .os-add { margin: 0; padding: 16px 24px 20px; border-top: 1px solid var(--jaa-line); }
.os-card .os-add button { padding: 9px 16px; font-size: var(--jaa-fs-sm); font-weight: 600; }
.os-card .os-add button:hover:not([disabled]) { background: var(--jaa-error-bg); }

/* 備考 */
.os-page .os-freenote { max-width: none; margin: 24px 0 0; }
.os-page .os-freenote label { margin: 0 0 8px; font-size: var(--jaa-fs-sm); font-weight: 600; }
.os-page .os-freenote label .muted { font-weight: 400; font-size: var(--jaa-fs-sm); }
.os-page .os-freenote textarea { min-height: 5.5rem; padding: 12px 14px; font-size: var(--jaa-fs-sub); line-height: 1.6; }

/* 見積もり（左）＋操作（右） */
.os-summary { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.os-est {
  flex: 3 1 340px; min-width: 260px;
  background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); padding: 22px 24px;
}
.os-est h3 { margin: 0 0 4px; font-size: var(--jaa-fs-body); font-weight: 700; }
.os-est-sub { margin: 0 0 18px; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); }
.os-est-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0; font-size: var(--jaa-fs-sub); border-top: 1px solid var(--jaa-line);
}
.os-est-label { color: var(--jaa-muted); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-est-note-inline { color: var(--jaa-muted-2); font-size: var(--jaa-fs-xxs); }
.os-est-amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--jaa-ink); }
.os-est-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0 0; margin-top: 8px; border-top: 2px solid var(--jaa-ink);
}
.os-est-total span:first-child { font-size: var(--jaa-fs-body); font-weight: 700; }
.os-est-total span:last-child { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.os-est-note { margin: 16px 0 0; font-size: var(--jaa-fs-xxs); line-height: 1.6; color: var(--jaa-muted); }
.os-brk { max-width: none; margin: 14px 0 0; }
.os-brk summary { cursor: pointer; font-size: var(--jaa-fs-sm); font-weight: 600; color: var(--jaa-red); list-style: none; }
.os-brk summary::-webkit-details-marker { display: none; }
.os-brk summary::before { content: "▸ "; }
.os-brk[open] summary::before { content: "▾ "; }
.os-brk summary:hover { text-decoration: underline; }
.os-brk #os-breakdown, .os-brk > div { margin-top: 12px; }
.os-brk .brk-order { font-size: var(--jaa-fs-sm); }
.os-actions { flex: 1 1 260px; min-width: 240px; margin-top: 0; display: flex; flex-direction: column; gap: 12px; }
.os-actions .os-review { width: 100%; padding: 16px; font-size: var(--jaa-fs-body); font-weight: 700; letter-spacing: 0.01em; }
.os-pay-note { margin: 0; padding: 4px 2px 0; font-size: var(--jaa-fs-xxs); line-height: 1.7; color: var(--jaa-muted); }
.os-pay-method { margin: 0; padding: 0 2px; font-size: var(--jaa-fs-xxs); line-height: 1.7; color: var(--jaa-muted-2); }

@media (max-width: 640px) {
  .os-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .os-head .os-h { font-size: 24px; }
  .os-page .os-storage-notice { margin: 16px 0 24px; }
  .os-card-head { padding: 14px 16px; }
  .os-row { padding: 12px 16px; gap: 10px; }
  .os-row-no { width: 100%; padding-bottom: 0; }
  .os-f-url, .os-f-name { flex-basis: 100%; min-width: 0; }
  .os-f-price { flex: 1 1 120px; }
  .os-f-qty { flex: 0 0 80px; }
  .os-f-line { flex: 1 1 100px; }
  .os-card .os-add { padding: 12px 16px 16px; }
  .os-summary { gap: 16px; }
  .os-est { padding: 16px; min-width: 0; flex-basis: 100%; }
  .os-actions { flex-basis: 100%; min-width: 0; }
}

/* ---- オークション・転送フォーム固有【2026-09-11】共通部品に無い部分だけ（ショップと同じ .os-* はそのまま使う）---- */
/* 転送：パッケージ金額欄（ラベル「PACKAGE VALUE (¥)」が収まる幅・右寄せ） */
.os-f-value { flex: 1 1 140px; min-width: 130px; }
.os-f-value .os-label { text-align: right; }
/* 転送：「+ Add another package」の横のヒント */
.os-add-hint { display: inline-block; margin-left: 14px; font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); }
/* 転送：見積もりの「Declared value」＝請求しない額。他の行より薄く */
.os-est-row.os-est-muted .os-est-label, .os-est-row.os-est-muted .os-est-amt { color: var(--jaa-muted-2); }
/* 転送：表示用の段階表（値は billing.php の FORWARDING_TIERS から描く・小さく） */
.os-tier { width: 100%; border-collapse: collapse; margin: 14px 0 0; font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); }
.os-tier caption { text-align: left; font-weight: 600; padding: 0 0 6px; color: var(--jaa-muted); }
.os-tier td { padding: 4px 0; border-top: 1px solid var(--jaa-line); }
.os-tier td:first-child { width: 4.5em; white-space: nowrap; }
.os-tier td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--jaa-ink); }
/* オークション：URL 欄の下の警告（.os-url-warn / .os-url-bad は既存定義。行が div になっても同じ） */
.os-card .os-f-url .os-url-warn { margin-top: 0; }
@media (max-width: 640px) {
  .os-f-value { flex: 1 1 140px; min-width: 0; }
}
/* ショップ・オークション共通：単価／上限額欄【2026-09-14】ラベル「UNIT PRICE (EXCL. TAX)」「MAX BID (EXCL. TAX)」が1行に収まる幅。
   税抜表記はラベルに入れる（入力欄の下の注記だと入力欄の高さが揃わず、プレースホルダは入力で消えるため）。641px 以上は折り返さない・640px 以下は折り返しを許す。 */
@media (min-width: 641px) {
  .os-f-price .os-label { white-space: nowrap; }
}

/* =============================================================
   管理画面（admin/*）【2026-09-14】銀行振込の未入金の可視化・確定への導線・手動キャンセル
   ・管理画面の新規部品はページ内 <style> ではなくここに置く。文字サイズは 16px 以上（桜井さん指示）。
   ============================================================= */
/* ---- 管理画面トップ（admin/index.php）【2026-09-19 デザイン刷新】資料 デザイン/管理画面/JAA管理画面トップ改善.zip
   ・トップのページ内 <style>（約50行）をここへ移設。★.admin-page / .admin-head は他の管理画面15本がページ内 <style> で
     幅を個別に定義しているため、共通側では定義しない（トップの幅・余白は .adm-top が持つ＝他画面に影響しない）。
   ・色は --jaa-* のみ（資料の赤 → --jaa-red、本文 → --jaa-ink、薄字 → --jaa-muted/--jaa-muted-2、罫線 → --jaa-line、
     地 → --jaa-paper、0件の破線 → --jaa-line、hover の罫線 → --jaa-line-strong、影は --jaa-line で代用。色コードは書かない）。
   ・文字は 16px 以上（注記・副題だけ 12px＝--jaa-fs-xxs）。件数 38px。フォントは既存のまま（Noto Sans JP は読み込まない）。
   ・件数の色は現行どおり 0件＝灰／1件以上＝赤（.zero）。0件は破線・灰だが <a> のまま。発送グループの青は廃止（赤・黒・白）。
   ・入出金（.grp-money）は 0件のときカードごと出さない（index.php 側の分岐・2026-09-14 決定）。 ---- */
.adm-top-body { margin: 0; background: var(--jaa-paper); }
.adm-top-bar { background: var(--jaa-bg); border-bottom: 1px solid var(--jaa-line); }
.adm-top-bar-in { max-width: 1200px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.adm-top-brand { display: flex; align-items: baseline; gap: 14px; }
.adm-top-brand h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 0.04em; color: var(--jaa-ink); }
.adm-top-sub { font-size: var(--jaa-fs-xxs); color: var(--jaa-muted-2); letter-spacing: 0.08em; }
.adm-top-bar .who { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--jaa-muted); }
.adm-top-bar .who strong { color: var(--jaa-ink); font-weight: 500; }
.adm-top-logout { border: 1px solid var(--jaa-line-strong); border-radius: 999px; padding: 6px 16px; font-size: 16px; color: var(--jaa-muted); background: var(--jaa-bg); text-decoration: none; white-space: nowrap; }
.adm-top-logout:hover { border-color: var(--jaa-red); color: var(--jaa-red); text-decoration: none; }
/* 【2026-09-29】今の PayPal の接続先（admin/index.php のヘッダー帯）。LIVE＝緑・SANDBOX＝赤系・未設定＝灰 */
.adm-top-paypal { align-self: center; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 12px; border-radius: 999px; border: 1px solid var(--jaa-line-strong); color: var(--jaa-muted); background: var(--jaa-paper); white-space: nowrap; }
.adm-top-paypal.is-live { color: var(--jaa-ok); background: var(--jaa-ok-bg); border-color: var(--jaa-ok); }
.adm-top-paypal.is-sandbox { color: var(--jaa-error-ink); background: var(--jaa-error-bg); border-color: var(--jaa-error-line); }
/* 【STEP37】担当者バッジ（全管理画面 右上に「部門：表示名」＋切替）。index.php はヘッダー帯内にインライン、他画面は右上固定ピル。 */
.adm-staff-badge { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; }
.adm-staff-who { font-weight: 700; color: var(--jaa-ink); white-space: nowrap; }
.adm-staff-switch { font-size: 16px; font-weight: 700; color: var(--jaa-muted); text-decoration: none; border: 1px solid var(--jaa-line-strong); border-radius: 999px; padding: 3px 14px; white-space: nowrap; }
.adm-staff-switch:hover { background: var(--jaa-ink); color: var(--jaa-bg); border-color: var(--jaa-ink); text-decoration: none; }
.adm-staff-badge--fixed { position: fixed; top: 12px; right: 16px; z-index: 300; background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: 999px; padding: 7px 10px 7px 16px; box-shadow: 0 2px 10px var(--jaa-line); }
.adm-staff-badge--none .adm-staff-who { color: var(--jaa-muted); font-weight: 700; }   /* 【安全策】担当者未登録の表示 */
.adm-top { max-width: 1200px; margin: 0 auto; padding: 32px 28px 64px; line-height: 1.7; }
/* セクション見出し：右へ伸びる 1px の罫線（::after） */
.adm-top .badge-group { margin: 0 0 36px; }
.adm-top .badge-group h2, .adm-top .menu-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.06em; color: var(--jaa-ink); white-space: nowrap; }
.adm-top .badge-group h2::after, .adm-top .menu-head::after { content: ''; flex: 1 1 24px; min-width: 0; height: 1px; background: var(--jaa-line); }
/* 件数カード：全グループ 4 列（発送は 3 枚・入出金は 1 枚でも同じ幅） */
.adm-top .badge-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.adm-top a.todo-badge { display: flex; flex-direction: column; gap: 10px; background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: 10px; padding: 18px 20px 20px; box-shadow: 0 1px 2px var(--jaa-line); color: var(--jaa-ink); text-decoration: none; }
.adm-top a.todo-badge:hover { box-shadow: 0 6px 18px var(--jaa-line); border-color: var(--jaa-line-strong); }
.adm-top a.todo-badge .lbl { font-size: 16px; font-weight: 700; color: var(--jaa-ink); }
.adm-top a.todo-badge .cnt { display: flex; align-items: baseline; gap: 4px; font-size: 38px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--jaa-red); }
.adm-top a.todo-badge .cnt small { font-size: 16px; font-weight: 400; color: var(--jaa-muted-2); }
.adm-top a.todo-badge .warn { font-size: 16px; font-weight: 700; color: var(--jaa-red); }
/* 0件：破線・灰（押せば一覧が開く） */
.adm-top a.todo-badge.zero { background: var(--jaa-paper); border: 1px dashed var(--jaa-line); box-shadow: none; }
.adm-top a.todo-badge.zero .lbl { color: var(--jaa-muted); }
.adm-top a.todo-badge.zero .cnt { color: var(--jaa-muted-2); }
.adm-top a.todo-badge.zero:hover { border-color: var(--jaa-line-strong); }
.adm-top .badge-note { font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); margin: -22px 0 36px; }
.adm-top .badge-fail { font-size: 16px; color: var(--jaa-red); background: var(--jaa-bg); border: 1px solid var(--jaa-red); border-radius: 10px; padding: 10px 14px; margin: 0 0 36px; }
/* メニュー：auto-fit で横並び（4 枚） */
.adm-top .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; align-items: start; }   /* 270px：幅 1200px（内側 1144px）で 4 枚が横並びになる最大値（資料の 280px では 4 枚目が折り返す） */
.adm-top .menu-card { background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: 10px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.adm-top .menu-card h2 { margin: 0; padding: 0; border: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--jaa-ink); }
.adm-top .menu-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.adm-top .menu-card li { margin: 0; font-size: 16px; line-height: 1.6; padding: 9px 0; border-top: 1px solid var(--jaa-line); }
.adm-top .menu-card li a { color: var(--jaa-ink); text-decoration: none; }
.adm-top .menu-card li a:hover { color: var(--jaa-red); text-decoration: underline; }
.adm-top .menu-card .note { margin: 0; font-size: var(--jaa-fs-xxs); line-height: 1.7; color: var(--jaa-muted); background: var(--jaa-paper); border-radius: 6px; padding: 10px 12px; }
/* 明細の操作画面：未払い受付の案内枠（銀行振込＝確定画面への導線／PayPal＝自動キャンセルの案内） */
.adm-unpaid-box { border: 2px solid var(--jaa-line-strong, #c9c3ba); background: var(--jaa-paper, #fbf9f6);
                  border-radius: 8px; padding: 16px 20px; margin: 16px 0; font-size: 16px; line-height: 1.8; }
.adm-unpaid-box p { margin: 0 0 6px; }
.adm-unpaid-box .adm-unpaid-amount { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-unpaid-box a.adm-unpaid-link { display: inline-block; font-weight: 700; padding: 8px 18px; border-radius: 8px;
                  border: 2px solid #1a4b8f; background: #eef3fd; color: #1a4b8f; text-decoration: none; }
.adm-unpaid-box a.adm-unpaid-link:hover { background: #dde8fb; }
/* キャンセル操作：確定への導線から離して置く（誤操作防止）。実行は確認画面（.adm-confirm-box）を経由する */
.adm-bank-cancel { margin: 40px 0 16px; padding-top: 16px; border-top: 1px dashed var(--jaa-line-strong, #c9c3ba); font-size: 16px; }
.adm-bank-cancel p { margin: 0 0 8px; color: var(--jaa-muted, #6b6b6b); }
.adm-bank-cancel button { font-size: 16px; font-weight: 700; padding: 8px 20px; border-radius: 8px; cursor: pointer;
                  border: 2px solid #c99; background: #fff5f5; color: #900; }
.adm-confirm-box { border: 2px solid var(--jaa-red); background: #fff7f7; border-radius: 8px;
                  padding: 16px 20px; margin: 16px 0; font-size: 16px; line-height: 1.8; }
.adm-confirm-box h2 { font-size: 18px; margin: 0 0 8px; color: var(--jaa-red); }
.adm-confirm-box ul { margin: 6px 0 12px; padding-left: 1.4em; }
.adm-confirm-box .adm-confirm-actions { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.adm-confirm-box .adm-confirm-actions button { font-size: 16px; font-weight: 700; padding: 9px 24px; border-radius: 8px; cursor: pointer;
                  border: 2px solid var(--jaa-red); background: var(--jaa-red); color: var(--jaa-bg); }
.adm-confirm-box .adm-confirm-actions a.back { display: inline-block; padding: 8px 20px; border: 1px solid #999; border-radius: 8px;
                  color: #333; text-decoration: none; background: #fff; font-size: 16px; }
/* 入金待ちの受付（receipts-pending.php）：受付番号で絞り込み中の案内 */
.adm-filter-note { border: 1px solid #1a4b8f; background: #eef3fd; color: #1a4b8f; border-radius: 6px;
                  padding: 10px 14px; margin: 12px 0; font-size: 16px; }
/* 入金待ちの受付（receipts-pending.php）【2026-09-14】各行の記帳導線・キャンセル・説明文（16px 以上・色は変数のみ） */
.adm-lead { font-size: 16px; line-height: 1.8; margin: 8px 0 12px; }
a.adm-ledger-link { display: inline-block; margin-top: 8px; font-size: 16px; font-weight: 700; padding: 6px 14px; border-radius: 8px;
                    border: 2px solid var(--jaa-ok); background: var(--jaa-bg); color: var(--jaa-ok); text-decoration: none; white-space: nowrap; }
a.adm-ledger-link:hover { background: var(--jaa-paper); }
td.adm-row-cancel { text-align: right; vertical-align: middle; border-left: 3px double var(--jaa-line-strong); }
button.adm-btn-cancel { font-size: 16px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
                        border: 2px solid var(--jaa-line-strong); background: var(--jaa-bg); color: var(--jaa-red); white-space: nowrap; }
button.adm-btn-cancel:hover { border-color: var(--jaa-red); }
.adm-confirm-tbl { border-collapse: collapse; margin: 6px 0 10px; font-size: 16px; }
.adm-confirm-tbl th, .adm-confirm-tbl td { border: 1px solid var(--jaa-line); padding: 6px 12px; text-align: left; vertical-align: top; }
.adm-confirm-tbl th { background: var(--jaa-paper); font-weight: normal; color: var(--jaa-muted); white-space: nowrap; }
.adm-confirm-lines { margin: 0; padding-left: 1.2em; }

/* =============================================================
   確認画面（Step 2）のデザイン刷新【2026-09-14・デザイン/20260914/JAA Order Confirm.dc.html の 2A／1A 案】
   ・注文フォーム（Step 1）の共通部品（.os-page / .os-head / .os-step / .os-h / .os-intro / .form-error）を再利用し、
     内訳（.brk-*）と残高表（.oc-pay）は既存クラスのまま見た目だけ直す（サーバー側の関数出力は変えない）。
   ・資料の「見にくさの原因」5点への対処：項目名を本文色に／商品名を太字の独立行に／金額は右寄せ・桁揃え／
     Total を大きく／カードは白地＋罫線（薄いベージュ地をやめる）。
   ・残高表は黒枠＋黒い帯（帯の文言は残高の状態で切替＝:has()）。注意枠は赤い帯（.pf-warn と同じ流儀）。
   ・色は --jaa-* 変数のみ。10〜11px 指定は 12px（--jaa-fs-xxs）に読み替え。フォント指定（Manrope）は採用しない。
   ============================================================= */
.oc-page .os-intro { margin: 18px 0 0; }
.oc-wrap { max-width: 680px; margin: 22px 0 0; }
.oc-wrap .form-error { margin: 0 0 20px; }
/* 商品カード（ITEM #1 の小さい大文字ラベル／商品名を太字の独立行／Auction ID は薄く） */
.oc-wrap .brk { max-width: none; margin: 0 0 16px; }
.oc-wrap .brk-order { margin: 0 0 14px; padding: 0; background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); overflow: hidden; }
.oc-wrap .brk-order-head { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--jaa-line); font-weight: 400; }
.brk-eyebrow { display: block; font-size: var(--jaa-fs-xxs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 600; margin-bottom: 4px; }
.brk-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--jaa-ink); overflow-wrap: anywhere; }
.brk-sub { display: block; margin-top: 4px; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); overflow-wrap: anywhere; }
.oc-wrap .brk-tbl { margin: 0; }
.oc-wrap .brk-tbl td { padding: 9px 20px; font-size: var(--jaa-fs-sub); line-height: 1.5; }
.oc-wrap .brk-tbl tr:first-child td { padding-top: 12px; }
.oc-wrap .brk-label { color: var(--jaa-ink); }
.oc-wrap .brk-line td { border-top: 1px solid var(--jaa-line); font-weight: 700; padding-top: 12px; padding-bottom: 16px; }
/* 合計カード（Subtotal／PayPal fee／Total。Total は大きく・上に太い罫線） */
.oc-wrap .brk-totals { margin: 0 0 16px; background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); overflow: hidden; }
.oc-wrap .brk-totals td { padding: 11px 20px; font-size: var(--jaa-fs-sub); }
.oc-wrap .brk-totals tr:first-child td { border-top: none; padding-top: 14px; }
.oc-wrap .brk-totals tr.grand td { border-top: 2px solid var(--jaa-ink); padding: 14px 20px 16px; font-size: var(--jaa-fs-body); }
.oc-wrap .brk-totals tr.grand td.brk-amt { font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
/* 残高表：黒枠＋黒い帯。帯の文言は残高の状態で切替（全額充当＝Paid from your account balance／それ以外＝Payment）。
   ★出力は app/includes/order_confirm_payment.php の関数そのまま（行・金額・id は不変。帯は CSS の ::before で足す）。赤は使わない */
.oc-wrap .oc-pay { max-width: none; margin: 0 0 16px; background: var(--jaa-bg); border: 2px solid var(--jaa-ink); border-radius: var(--jaa-radius); overflow: hidden; }
.oc-wrap .oc-pay::before { content: "Payment"; display: block; background: var(--jaa-ink); color: #fff; padding: 10px 20px; font-size: var(--jaa-fs-sm); font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; }
.oc-wrap .oc-pay:has(#oc-pay-remaining)::before { content: "Paid from your account balance"; }
.oc-wrap .oc-pay-tbl { font-size: 15px; }
.oc-wrap .oc-pay-tbl td { padding: 9px 20px; }
.oc-wrap .oc-pay-tbl tr:first-child td { border-top: none; padding-top: 14px; }
.oc-wrap .oc-pay-tbl tr.oc-pay-total td { padding-bottom: 16px; }
.oc-wrap .oc-pay-tbl tr.oc-pay-total:not(:first-child) td { border-top: 1px solid var(--jaa-line); padding-top: 12px; }
.oc-wrap .oc-pay-note { margin: 0; padding: 12px 20px; background: var(--jaa-paper); border-top: 1px solid var(--jaa-line); color: var(--jaa-ink); font-weight: 600; font-size: var(--jaa-fs-sub); }
/* 注意枠（About this amount／Before you confirm）：赤い帯＋白地の本文。.pf-warn と同じ流儀・赤は帯の地色だけ */
.oc-callout { margin: 0 0 16px; background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); overflow: hidden; }
.oc-callout-band { background: var(--jaa-red); color: #fff; padding: 7px 18px; font-size: var(--jaa-fs-xxs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; }
.oc-callout-body { padding: 14px 18px 16px; font-size: var(--jaa-fs-sub); line-height: 1.7; color: var(--jaa-ink); }
.oc-callout-body p { margin: 0; }
.oc-callout-body p + p { margin-top: 8px; }
/* お客様の要望（入力があるときだけ）：薄い地のカード */
.oc-wrap .oc-freenote { max-width: none; margin: 0 0 16px; padding: 14px 18px; background: var(--jaa-paper); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); font-size: var(--jaa-fs-sub); line-height: 1.7; }
.oc-freenote-label { display: block; font-size: var(--jaa-fs-xxs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 600; margin-bottom: 6px; }
/* ボタン（文言は jaa_order_confirm_button_label のまま）：主ボタンを大きく・戻るは控えめ */
.oc-wrap .oc-actions { margin-top: 6px; }
.oc-wrap .oc-actions .btn-primary { padding: 14px 28px; font-weight: 700; }
@media (max-width: 640px) {
  .oc-wrap .brk-tbl td, .oc-wrap .brk-totals td, .oc-wrap .oc-pay-tbl td { padding-left: 14px; padding-right: 14px; }
  .oc-wrap .brk-order-head, .oc-wrap .oc-pay::before { padding-left: 14px; padding-right: 14px; }
  .oc-wrap .brk-totals tr.grand td.brk-amt { font-size: 20px; }
  .oc-wrap .oc-actions .btn-primary, .oc-wrap .oc-actions .btn-secondary { width: 100%; text-align: center; }
}
/* 注意枠「Before you confirm」の本文（クラス名 oc-bank-hint は既存テストが参照＝そのまま。見た目は .oc-callout-body と同じ） */
.oc-callout .oc-bank-hint { padding: 14px 18px 16px; font-size: var(--jaa-fs-sub); line-height: 1.7; color: var(--jaa-ink); }
.oc-callout .oc-bank-hint p { margin: 0; }
.oc-callout .oc-bank-hint p + p { margin-top: 8px; }
/* 注意枠の中では、従来の段落装飾（左罫線・地色・余白）を打ち消して本文として並べる */
.oc-callout .oc-refund-note, .oc-callout .oc-feeonly-note, .oc-callout .oc-shipto-hold,
.oc-callout .oc-bank-hint p { margin: 0; padding: 0; border: 0; background: none; max-width: none; color: var(--jaa-ink); font-size: var(--jaa-fs-sub); }
.oc-callout .oc-callout-body p + p, .oc-callout .oc-bank-hint p + p { margin-top: 8px; }
.oc-callout .oc-bank-hint { border: 0; background: none; margin: 0; max-width: none; }
/* 【2026-09-14 修正】確認画面は読むだけの画面＝内容の幅（680px）に合わせて main 自体を中央に寄せる。
   .mypage は margin: auto なので max-width を縮めるだけで見出し（STEP 2 OF 3／Review your order）と Back to My Account も
   同じ幅（680px）の中に収まる。値の根拠：資料（2A/1A）の本文幅 680px。金額行は左ラベル〜右金額が 680px 以内（間延びしない）・
   商品名 15px 太字は 1 行に約 45 字（全角）。720px ＝ 680px ＋ .mypage の左右 padding 1.25rem×2（border-box）。
   640px 以下は .mypage の側で全幅（max-width を効かせない）。 */
.mypage.os-page.oc-page { max-width: 720px; }
.oc-page .os-intro { max-width: none; }
@media (max-width: 640px) {
  .mypage.os-page.oc-page { max-width: none; }
}
/* 取引履歴一覧（admin/transactions.php）【2026-09-15・STEP 34】仮押え／仮押え解除の種別バッジ（ページ内 style には足さない） */
.badge-hold         { background: var(--jaa-paper); color: var(--jaa-ink); border-color: var(--jaa-line-strong); }
.badge-hold_release { background: var(--jaa-bg); color: var(--jaa-muted); border-color: var(--jaa-line-strong); border-style: dashed; }
/* ============================================================
   DB確認ツール（admin/db-check.php）【2026-09-15】
   ・ページ内 <style> は書かない（ここに集約）・文字は 16px 以上（--jaa-fs-body）・赤は --jaa-red のみ
   ・.dbc-warn＝異常／要注意の行（薄い赤地＋左に赤の帯）、.dbc-muted＝未設定など薄字の行
   ============================================================ */
.dbc-page { max-width: 1160px; margin: 24px auto; padding: 0 16px; line-height: 1.7; font-size: var(--jaa-fs-body); }
.dbc-page h1 { font-size: var(--jaa-fs-h1); margin: 0 0 8px; }
.dbc-page h2 { font-size: var(--jaa-fs-h2); margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--jaa-line-strong); }
.dbc-page h3 { font-size: var(--jaa-fs-body); margin: 22px 0 6px; font-weight: 700; }
.dbc-lead { color: var(--jaa-muted); margin: 0 0 16px; }
.dbc-form { background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: 8px; padding: 14px 18px 16px; }
.dbc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 14px; margin: 0 0 14px; }
.dbc-item { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--jaa-line); border-radius: 6px; cursor: pointer; }
.dbc-item.is-selected { border-color: var(--jaa-red); background: var(--jaa-paper); }
.dbc-item input[type="radio"] { margin: 6px 0 0; width: auto; }
.dbc-item-label { font-weight: 700; }
.dbc-item-desc { grid-column: 2; color: var(--jaa-muted); font-size: var(--jaa-fs-body); line-height: 1.5; }
.dbc-inputs { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: end; }
.dbc-inputs label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.dbc-pairs { margin-top: 12px; }
.dbc-pairs label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.dbc-pairs textarea { width: 100%; max-width: 46rem; box-sizing: border-box; padding: 8px 10px; font-size: var(--jaa-fs-body); font-family: inherit; font-weight: 400; border: 1px solid var(--jaa-line-strong); border-radius: 6px; }
.dbc-inputs input[type="text"] { width: 22rem; max-width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: var(--jaa-fs-body); font-family: inherit; border: 1px solid var(--jaa-line-strong); border-radius: 6px; font-weight: 400; }
.dbc-run { font-size: var(--jaa-fs-body); font-weight: 700; padding: 10px 28px; border-radius: 6px; cursor: pointer; border: 2px solid var(--jaa-red); background: var(--jaa-red); color: var(--jaa-bg); }
.dbc-run:hover { background: var(--jaa-red-dark); border-color: var(--jaa-red-dark); }
.dbc-notice { margin: 16px 0; padding: 10px 14px; border: 1px solid var(--jaa-line-strong); border-radius: 6px; background: var(--jaa-paper); }
.dbc-error  { margin: 16px 0; padding: 10px 14px; border: 1px solid var(--jaa-red); border-radius: 6px; color: var(--jaa-red); }
.dbc-ok     { margin: 6px 0 10px; padding: 10px 14px; border: 1px solid var(--jaa-line-strong); border-radius: 6px; background: var(--jaa-paper); font-weight: 600; }
.dbc-tablewrap { overflow-x: auto; margin: 6px 0; }
.dbc-table { border-collapse: collapse; width: 100%; font-size: var(--jaa-fs-body); }
.dbc-table th, .dbc-table td { border: 1px solid var(--jaa-line); padding: 6px 9px; text-align: left; vertical-align: top; }
.dbc-table th { white-space: nowrap; }
.dbc-table th { background: var(--jaa-paper); font-weight: 600; }
.dbc-table td { max-width: 28rem; }   /* 英数字の連なり（受付番号・URL）は途中で切らない＝はみ出す分は .dbc-tablewrap の横スクロール */
.dbc-table td.dbc-nw { white-space: nowrap; }   /* 金額・日時・ID は折り返さない */
.dbc-table tr.dbc-warn td { background: color-mix(in srgb, var(--jaa-red) 7%, var(--jaa-bg)); }
.dbc-table tr.dbc-warn td:first-child { border-left: 4px solid var(--jaa-red); }
.dbc-table tr.dbc-muted td { color: var(--jaa-muted-2); }
.dbc-count { margin: 4px 0 0; color: var(--jaa-muted); }
.dbc-capped { color: var(--jaa-red); }
.dbc-note { margin: 4px 0 0; color: var(--jaa-muted); }
.dbc-sql { margin: 8px 0 4px; padding: 10px 14px; background: var(--jaa-paper); border: 1px solid var(--jaa-line); border-radius: 6px; font-size: var(--jaa-fs-body); line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
/* 項目8【2026-09-19】：同じ同梱グループ（group_id）のセルを同じ識別色で示す（2件以上あるグループだけ・6色を順に）。
   赤以外の識別色＝バッジと同じ「機能色」として hsl で持つ（--jaa-red は使わない） */
.dbc-table tr td.dbc-g1 { background: hsl(210 75% 90%); border-left: 4px solid hsl(210 65% 45%); font-weight: 700; }
.dbc-table tr td.dbc-g2 { background: hsl(140 55% 88%); border-left: 4px solid hsl(140 55% 35%); font-weight: 700; }
.dbc-table tr td.dbc-g3 { background: hsl(45 90% 86%);  border-left: 4px solid hsl(45 80% 40%);  font-weight: 700; }
.dbc-table tr td.dbc-g4 { background: hsl(280 55% 91%); border-left: 4px solid hsl(280 45% 50%); font-weight: 700; }
.dbc-table tr td.dbc-g5 { background: hsl(185 55% 88%); border-left: 4px solid hsl(185 55% 35%); font-weight: 700; }
.dbc-table tr td.dbc-g6 { background: hsl(25 85% 88%);  border-left: 4px solid hsl(25 75% 45%);  font-weight: 700; }
@media (max-width: 640px) {
  .dbc-items { grid-template-columns: 1fr; }
  .dbc-inputs label, .dbc-inputs input[type="text"], .dbc-run { width: 100%; }
}
/* ============================================================
   支払い画面（customer/pay.php）のデザイン刷新【2026-09-15】
   ・中央寄せ・幅 560px のカード1枚（.pc-card）：受付番号＋発行日／内訳／黒い箱（Amount to pay）／金額入りボタン＋案内
   ・黒い箱は確認画面（Step 2）の残高表（.oc-wrap .oc-pay の黒帯）と同じ --jaa-ink 地・白文字・太字・letter-spacing 0.02em
   ・600px ＝ 560px ＋ .mypage の左右 padding 1.25rem×2（border-box）。640px 以下は .mypage 側で全幅
   ・色は --jaa-* のみ（赤は --jaa-red、黒は --jaa-ink、白は --jaa-bg）。文字は 12px（--jaa-fs-xxs）以上
   ============================================================ */
.mypage.pc-page { max-width: 600px; }
.pc-section { margin-top: 1.25rem; }
.pc-section .form-error { max-width: none; margin-bottom: 16px; }
.pc-card { background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); overflow: hidden; }
.pc-head { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; padding: 14px 22px; border-bottom: 1px solid var(--jaa-line); }
.pc-receipt { font-size: 15px; font-weight: 700; }
.pc-issued { font-size: var(--jaa-fs-sm); color: var(--jaa-muted); }
.pc-sub { padding: 10px 22px 0; font-size: 15px; font-weight: 600; }
.pc-rows { width: 100%; border-collapse: collapse; margin: 0; padding: 0; font-size: 15px; }
.pc-rows td { padding: 10px 22px; border-bottom: 1px solid var(--jaa-paper); color: var(--jaa-muted); }
.pc-rows td.amt { text-align: right; white-space: nowrap; font-weight: 600; color: var(--jaa-ink); font-variant-numeric: tabular-nums; }
.pc-rows tr:first-child td { padding-top: 18px; }
.pc-rows tr:last-child td { border-bottom: none; padding-bottom: 14px; }
.pc-rows tr.pc-total td { font-weight: 700; color: var(--jaa-ink); }
.pc-due { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; justify-content: space-between; padding: 18px 22px; background: var(--jaa-ink); color: var(--jaa-bg); }
.pc-due-label { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.pc-due-amt { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-actions { padding: 20px 22px 22px; }
.pc-actions form { margin: 0; }
.pc-btn, .pc-actions .btn { display: block; width: 100%; padding: 17px 16px; font-size: var(--jaa-fs-body); font-weight: 700; border-radius: var(--jaa-radius); }
.pc-note { margin: 12px 0 0; font-size: var(--jaa-fs-sm); line-height: 1.6; color: var(--jaa-muted); text-wrap: pretty; }
.pc-note a { font-weight: 600; }
@media (max-width: 640px) {
  .mypage.pc-page { max-width: none; }
  .pc-head, .pc-sub, .pc-rows td, .pc-due, .pc-actions { padding-left: 16px; padding-right: 16px; }
  .pc-due-amt { font-size: 28px; }
}
/* ============================================================
   完了画面（Step 3・注文3画面の done 段）【2026-09-15】資料 JAA Order Received
   ・確認画面（Step 2）の部品（.os-head／.oc-wrap／.brk-*／.oc-callout／.oc-freenote／.oc-actions）をそのまま流用。
   ・新しいのは 黒い箱 .oc-done（残高表の黒帯・支払い画面の黒い箱と同じ --jaa-ink 地・白文字）と What happens next の枠 .oc-next だけ。
   ・色は --jaa-* のみ・12px（--jaa-fs-xxs）未満なし・640px 以下は既存の .oc-wrap の調整に従う
   ============================================================ */
.oc-done { margin: 22px 0 16px; padding: 20px 22px; background: var(--jaa-ink); color: var(--jaa-bg); border-radius: var(--jaa-radius); }
.oc-done-label { font-size: var(--jaa-fs-sm); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--jaa-line); margin-bottom: 9px; }
.oc-done-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 8px; text-wrap: pretty; }
.oc-done-meta  { font-size: var(--jaa-fs-sub); color: var(--jaa-line); line-height: 1.6; font-variant-numeric: tabular-nums; }
.oc-wrap.oc-done-wrap { margin-top: 0; }
.oc-next { margin: 0 0 20px; padding: 16px 20px; background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius); }
.oc-next-title { font-size: 15px; font-weight: 700; margin-bottom: 7px; color: var(--jaa-ink); }
/* 保管の案内は従来のクラス（.oc-storage-notice＝赤い左帯の callout）のまま文言を維持し、枠の中では本文として並べる */
.oc-next .oc-storage-notice { margin: 0; padding: 0; border: 0; background: none; max-width: none; font-size: var(--jaa-fs-sub); line-height: 1.7; color: var(--jaa-ink); text-wrap: pretty; }
.oc-wrap .oc-actions .btn-secondary { padding: 14px 24px; font-weight: 600; }
@media (max-width: 640px) {
  .oc-done { padding: 18px 14px; }
  .oc-done-title { font-size: 20px; }
  .oc-next { padding: 14px; }
  .oc-wrap .oc-actions .btn-primary, .oc-wrap .oc-actions .btn-secondary { width: 100%; box-sizing: border-box; text-align: center; }
}

/* =============================================================
   注文一覧（mypage.php view=orders）【2026-09-17 デザイン刷新】資料 JAA Orders
   ・未払いの受付＝支払い画面のカード（.pc-card）の中に完了画面の黒い箱（.oc-done*）を置き、右に金額・下に状態バッジと Pay now／案内。
   ・一覧＝白いカード（.pc-card）に見出し行＋1行ずつ（注文番号と受付番号を上下・商品名太字・種別と日時を下段）。
   ・色は --jaa-* のみ・12px（--jaa-fs-xxs）未満なし。Cancelled／Unsuccessful の行は薄い地＋補助色
   ============================================================= */
.ur-box { margin: 0 0 18px; border: 2px solid var(--jaa-ink); }
.ur-done { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-end; justify-content: space-between; margin: 0; border-radius: 0; padding: 16px 20px 14px; }
.ur-done-main { flex: 1 1 auto; min-width: 0; }
.ur-done .oc-done-label { margin-bottom: 8px; }
.ur-done .oc-done-title { font-size: 17px; margin-bottom: 3px; white-space: nowrap; }
.ur-amount { flex: 0 0 auto; text-align: right; }
.ur-amount-label { font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-line); font-weight: 700; }
.ur-amount-val { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ur-body { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 14px 20px 16px; }
.ur-body .st-badge { font-size: var(--jaa-fs-xxs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 3px; }
.ur-pay { padding: 12px 24px; font-weight: 700; }
.ur-note { flex: 1 1 100%; margin: 0; font-size: var(--jaa-fs-sub); line-height: 1.7; color: var(--jaa-ink); text-wrap: pretty; }
/* 見出し＋検索窓 */
.ol-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 26px 0 8px; }
.ol-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.ol-search { display: flex; gap: 8px; align-items: stretch; flex: 0 1 380px; min-width: 240px; margin: 0; }
.ol-search-box { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--jaa-line-strong); border-radius: var(--jaa-radius-sm); background: var(--jaa-bg); color: var(--jaa-muted); margin: 0; }
.ol-search-box:focus-within { border-color: var(--jaa-red); box-shadow: 0 0 0 3px var(--jaa-focus); }
.ol-search-box svg { flex: 0 0 16px; }
.ol-search-box input { flex: 1 1 auto; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; font-size: var(--jaa-fs-sub); font-family: inherit; color: var(--jaa-ink); }
.ol-search-btn { white-space: nowrap; }
.ol-tools { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin: 0 0 12px; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); }
.ol-filter a { color: var(--jaa-muted); text-decoration: none; padding: 2px 0; }
.ol-filter a:hover { text-decoration: underline; }
.ol-filter a.is-on { color: var(--jaa-ink); font-weight: 700; border-bottom: 2px solid var(--jaa-red); }
.ol-filter-sep { margin: 0 8px; color: var(--jaa-line-strong); }
.ol-result a { font-weight: 600; }
.ol-empty { margin: 8px 0 0; }
/* 一覧 */
.ol-list { font-size: var(--jaa-fs-sub); }
.ol-list-head, .ol-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 20px; border-bottom: 1px solid var(--jaa-line); }
.ol-list-head { padding: 10px 20px; background: var(--jaa-paper); font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 700; }
.ol-order { flex: 0 0 78px; min-width: 0; }
.ol-order a { font-size: var(--jaa-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.ol-receipt { display: block; font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ol-item { flex: 1 1 auto; min-width: 0; }
.ol-item-title { display: block; font-size: var(--jaa-fs-sub); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; text-wrap: pretty; }
a.ol-item-title { color: var(--jaa-ink); }
a.ol-item-title:hover { color: var(--jaa-red); }
.ol-item-sub { display: block; font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ol-status { flex: 0 0 120px; font-size: var(--jaa-fs-sm); font-weight: 600; color: var(--jaa-ink); }
.ol-amount { flex: 0 0 84px; text-align: right; font-size: var(--jaa-fs-sub); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-row--ended { background: var(--jaa-paper); }
.ol-row--ended .ol-item-title, .ol-row--ended a.ol-item-title, .ol-row--ended .ol-status, .ol-row--ended .ol-amount { color: var(--jaa-muted); font-weight: 500; }
/* フッター（件数＋ページ送り）：既存 .pager のリンク色はそのまま */
.ol-foot { margin: 0; padding: 14px 20px; background: var(--jaa-paper); border-top: 1px solid var(--jaa-line); justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; font-size: var(--jaa-fs-sm); }
.ol-showing, .ol-page-no { color: var(--jaa-muted); font-variant-numeric: tabular-nums; }
.ol-pager { display: flex; gap: 8px; align-items: center; }
.ol-pager .ol-page-btn { color: var(--jaa-ink); background: var(--jaa-bg); border-color: var(--jaa-line-strong); text-decoration: none; }
.ol-pager .ol-page-btn.is-disabled { color: var(--jaa-muted-2); border-color: var(--jaa-line); cursor: default; }
@media (max-width: 640px) {
  .ur-done, .ur-body, .ol-list-head, .ol-row, .ol-foot { padding-left: 14px; padding-right: 14px; }
  .ur-done .oc-done-title { white-space: normal; }
  .ol-search { flex: 1 1 100%; }
  .ol-list-head { display: none; }
  .ol-row { flex-wrap: wrap; }
  .ol-order { flex: 0 0 78px; }
  .ol-item { flex: 1 1 calc(100% - 92px); }
  .ol-status, .ol-amount { flex: 0 0 auto; margin-left: 92px; text-align: left; }
  .ol-amount { margin-left: 0; }
  .ol-foot { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   発送履歴（shipping-history.php）【2026-09-17 デザイン刷新】資料 JAA Shipping History
   ・3枠＝To pay（注文一覧の .pc-card.ur-box／.oc-done を流用）→ In progress（SHIPMENT／STATUS／ITEMS）→ Shipped（SHIPMENT＋出荷日／CARRIER & TRACKING／ITEMS）。
   ・行は注文一覧（.ol-*）と同じ flex 行。ページ送りのボタンは .ol-page-btn を流用。色は --jaa-* のみ・12px 未満なし
   ============================================================= */
.sh-title { margin: 26px 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sh-title:first-child { margin-top: 0; }
.sh-card { margin: 0 0 26px; font-size: var(--jaa-fs-sub); }
.sh-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--jaa-line); }
.sh-card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--jaa-ink); }
.sh-count { margin-left: 6px; font-size: var(--jaa-fs-sub); font-weight: 400; color: var(--jaa-muted); }
.sh-head-note { font-size: var(--jaa-fs-sm); color: var(--jaa-muted); }
.sh-empty { margin: 0; padding: 16px 20px; }
.sh-list-head, .sh-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 20px; border-bottom: 1px solid var(--jaa-line); }
.sh-list-head { padding: 10px 20px; background: var(--jaa-paper); font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 700; }
.sh-row { cursor: pointer; }
.sh-row:hover { background: var(--jaa-paper); }
.sh-shipped .sh-row:last-of-type { border-bottom: none; }
.sh-progress .sh-row:last-child { border-bottom: none; }
.sh-no { flex: 0 0 72px; min-width: 0; }
.sh-no a { font-size: var(--jaa-fs-sub); font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-date { display: block; font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.sh-main { flex: 1 1 auto; min-width: 0; }
.sh-status { font-size: var(--jaa-fs-sub); font-weight: 600; color: var(--jaa-ink); }
.sh-status.is-ready { font-weight: 700; }
.sh-main .file-link { display: inline-block; margin-top: 2px; font-size: var(--jaa-fs-xxs); font-weight: 600; }
.sh-progress .sh-main .file-link { display: block; width: max-content; max-width: 100%; }   /* 資料どおり Status の下の行に */
.sh-carrier { display: block; font-size: var(--jaa-fs-sub); font-weight: 600; line-height: 1.45; }
.sh-track { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 2px; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); }
.sh-track-no { font-variant-numeric: tabular-nums; color: var(--jaa-ink); }
.sh-track a { font-size: var(--jaa-fs-xxs); font-weight: 600; }
.sh-track-none { color: var(--jaa-muted); }
.sh-items { flex: 0 0 90px; text-align: right; font-size: var(--jaa-fs-sm); color: var(--jaa-muted); white-space: nowrap; }
.sh-foot { margin: 0; padding: 14px 20px; background: var(--jaa-paper); border-top: 1px solid var(--jaa-line); justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; font-size: var(--jaa-fs-sm); }
.sh-showing { color: var(--jaa-muted); font-variant-numeric: tabular-nums; }
.ur-done .sh-box-link { color: var(--jaa-bg); font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) {
  .sh-head, .sh-list-head, .sh-row, .sh-foot, .sh-empty { padding-left: 14px; padding-right: 14px; }
  .sh-list-head { display: none; }
  .sh-row { flex-wrap: wrap; }
  .sh-main { flex: 1 1 calc(100% - 86px); }
  .sh-items { flex: 0 0 auto; margin-left: 86px; text-align: left; }
  .sh-foot { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   発送詳細（shipment.php）【2026-09-18 デザイン刷新】資料 JAA Shipment Details
   ・左メニューなし・幅は注文詳細と同じ .mypage（1160px）＋.mypage-head。各ブロックは支払い画面のカード（.pc-card）。
   ・上部の黒い箱は完了画面の .oc-done、To pay は発送履歴と同じ .ur-box。金額・箱・写真・書類の HTML 構造（.detail-table／.pkg-grid／.doc-list）は流用。
   ・色は --jaa-* のみ・12px 未満なし
   ============================================================= */
.sd-page .mypage-head .back-link { margin: 0; }
.sd-page > .form-error { max-width: 720px; }
.sd-done { margin: 0 0 20px; }
.sd-done .oc-done-title { margin-bottom: 10px; }
.sd-done-track { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.sd-done-track-no { font-size: var(--jaa-fs-body); font-weight: 700; color: var(--jaa-bg); font-variant-numeric: tabular-nums; }
.sd-done-track-link { color: var(--jaa-bg); font-weight: 700; font-size: var(--jaa-fs-sm); text-decoration: underline; }
.sd-card { margin: 0 0 20px; padding: 8px 22px 18px; }
.sd-list-card { padding: 0 0 4px; }
.sd-card-title { margin: 0; padding: 12px 0 6px; font-size: 16px; font-weight: 700; color: var(--jaa-ink); }
.sd-list-card .sd-card-title { padding: 16px 22px 14px; }
.sd-card .detail-table th, .sd-card .detail-table td { padding: 11px 0; border-bottom: none; border-top: 1px solid var(--jaa-line); font-size: 15px; vertical-align: baseline; }
.sd-card .detail-table th { width: 40%; font-weight: 400; color: var(--jaa-muted); white-space: normal; }
.sd-card .detail-table td { text-align: right; font-weight: 600; color: var(--jaa-ink); font-variant-numeric: tabular-nums; }
.sd-card .detail-table td .pay-link { margin-left: 10px; }
.sd-card .detail-table td.sd-shipto { line-height: 1.6; text-wrap: pretty; }
.sd-card .detail-table thead th { font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 700; border-top: 1px solid var(--jaa-line); padding: 9px 0; white-space: nowrap; }
.sd-card .detail-table thead th.num, .sd-card .detail-table td.num { text-align: right; }
.sd-card .detail-table.packages tbody td:first-child { text-align: left; font-weight: 400; color: var(--jaa-muted); }
.sd-card .detail-table.packages tbody td { text-align: left; font-weight: 400; }
.sd-card .detail-table.packages tbody td.num { text-align: right; }
.sd-card .detail-table tr.total-row th, .sd-card .detail-table tr.total-row td { border-top: 2px solid var(--jaa-ink); font-weight: 700; color: var(--jaa-ink); padding-top: 14px; }
.sd-card .detail-table.sd-charges tr.total-row th { font-size: var(--jaa-fs-body); }
.sd-card .detail-table.sd-charges td.sd-total { font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
.sd-bill-state { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; padding-top: 14px; border-top: 1px solid var(--jaa-line); font-size: var(--jaa-fs-sub); }
.sd-bill-state .st-badge { font-size: var(--jaa-fs-xxs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 11px; border-radius: 3px; }
.sd-bill-date { color: var(--jaa-muted); font-variant-numeric: tabular-nums; }
.sd-bank-note { flex: 1 1 100%; font-size: var(--jaa-fs-sub); line-height: 1.7; color: var(--jaa-ink); text-wrap: pretty; }
.sd-empty { margin: 0; padding: 6px 0 4px; }
.sd-list-card .sd-empty { padding: 0 22px 14px; }
.sd-list-head, .sd-item { display: flex; gap: 14px; align-items: baseline; padding: 13px 22px; border-top: 1px solid var(--jaa-line); }
.sd-list-head { padding: 9px 22px; background: var(--jaa-paper); border-bottom: 1px solid var(--jaa-line); font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 700; }
.sd-list-head + .sd-item { border-top: none; }
.sd-item-main { flex: 1 1 auto; min-width: 0; }
.sd-item-title { display: block; font-size: var(--jaa-fs-sub); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; text-wrap: pretty; }
.sd-item-order { font-size: var(--jaa-fs-xxs); font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-item-qty { flex: 0 0 60px; text-align: right; font-size: var(--jaa-fs-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-lead { margin: 0 0 12px; font-size: var(--jaa-fs-sm); line-height: 1.6; text-wrap: pretty; }
.sd-card .pkg-grid { margin-top: 0; }
.sd-card .doc-list { margin: 0; }
.sd-card .doc-list li:last-child { border-bottom: none; }
.sd-foot { margin: 8px 0 0; }
.sd-foot .back-link { margin: 0; }
@media (max-width: 640px) {
  .sd-card { padding: 6px 14px 14px; }
  .sd-list-card { padding: 0 0 4px; }
  .sd-list-card .sd-card-title, .sd-list-head, .sd-item, .sd-list-card .sd-empty { padding-left: 14px; padding-right: 14px; }
  .sd-card .detail-table th { width: 36%; }
  .sd-card .detail-table.sd-charges td.sd-total { font-size: 22px; }
  .sd-card .detail-table.packages { display: block; overflow-x: auto; }
}

/* =============================================================
   注文詳細（order.php）【2026-09-18 デザイン刷新】資料 JAA Order Details
   ・左メニューなし・幅は発送詳細と同じ .mypage＋.mypage-head。カードは発送詳細の .sd-card／.sd-rows／.sd-bill-state を流用、
     黒い箱は .oc-done、Pay now は発送履歴の .ur-pay。新しいのは 2列（.od-cols）・受付の黒帯（.od-receipt-band）・記帳の行（.od-txn）だけ。
   ・色は --jaa-* のみ・12px 未満なし
   ============================================================= */
.od-done { margin: 0 0 20px; }
.od-done .oc-done-title { font-size: 18px; line-height: 1.5; margin-bottom: 10px; }
.od-done-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--jaa-muted); font-size: var(--jaa-fs-sub); line-height: 1.6; color: var(--jaa-bg); text-wrap: pretty; }
.od-card .detail-table th { width: 32%; }
.od-rows td .od-view-item { margin-left: 8px; font-weight: 600; white-space: nowrap; }
.od-rows td .ends-soon { font-weight: 600; }
/* 2列：This order（左）／Entire receipt（右・2px の黒枠＋黒帯） */
.od-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 0 0 20px; }
.od-cols .od-this { flex: 1 1 340px; min-width: 300px; margin: 0; }
.od-cols .od-receipt { flex: 1 1 300px; min-width: 280px; margin: 0; border: 2px solid var(--jaa-ink); }
.od-receipt-band { background: var(--jaa-ink); color: var(--jaa-bg); padding: 11px 20px; font-size: var(--jaa-fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.od-receipt-body { padding: 8px 20px 18px; }
.od-sub { margin: 10px 0 0; padding: 8px 0 0; font-size: var(--jaa-fs-sm); font-weight: 700; color: var(--jaa-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.od-card .detail-table.od-money th { width: auto; }
.od-card .detail-table.od-money td { white-space: nowrap; }
.od-card .detail-table.od-money tr.total-row td.od-total, .od-card .detail-table.od-money tr.total-row td.num { font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }
.od-card .detail-table.od-receipt-money tr.total-row td.num { font-size: 26px; }
.od-card .detail-table.tax-row th, .od-card .detail-table.tax-row td { border-top: 1px solid var(--jaa-line); color: var(--jaa-muted); font-weight: 400; }
.od-card .detail-table.od-diff td.num { font-weight: 700; }
.od-hint { margin: 10px 0 0; }
.od-hint-top { margin: 8px 0 4px; }
.od-bill-state { margin-top: 4px; }
.od-bill-state .ur-pay { padding: 10px 20px; }
/* Payments for this receipt：資料の TRANSACTION／AMOUNT／BALANCE の3列 */
.od-txns { padding: 0 0 4px; }
.od-txns-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; padding: 16px 22px 14px; }
.od-txns .sd-card-title { padding: 0; }
.od-txns-no { font-size: var(--jaa-fs-sm); color: var(--jaa-muted); font-variant-numeric: tabular-nums; }
.od-txns .od-empty { padding: 0 22px 14px; }
.od-txn-head, .od-txn { display: flex; gap: 14px; align-items: baseline; padding: 12px 22px; border-top: 1px solid var(--jaa-line); }
.od-txn-head { padding: 9px 22px; background: var(--jaa-paper); border-bottom: 1px solid var(--jaa-line); font-size: var(--jaa-fs-xxs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 700; }
.od-txn-head + .od-txn { border-top: none; }
.od-txn-main { flex: 1 1 auto; min-width: 0; }
.od-txn-desc { display: block; font-size: var(--jaa-fs-sub); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.od-txn-sub { display: block; font-size: var(--jaa-fs-xxs); color: var(--jaa-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.od-txn-amt { flex: 0 0 96px; text-align: right; font-size: var(--jaa-fs-sub); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-txn-bal { flex: 0 0 90px; text-align: right; font-size: var(--jaa-fs-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .od-cols { gap: 16px; }
  .od-cols .od-this, .od-cols .od-receipt { flex: 1 1 100%; min-width: 0; }
  .od-receipt-band, .od-receipt-body, .od-txns-head, .od-txn-head, .od-txn, .od-txns .od-empty { padding-left: 14px; padding-right: 14px; }
  .od-card .detail-table th { width: 40%; }
  .od-card .detail-table.od-money tr.total-row td.num { font-size: 20px; }
  .od-card .detail-table.od-receipt-money tr.total-row td.num { font-size: 22px; }
  .od-txn { flex-wrap: wrap; }
  .od-txn-main { flex: 1 1 100%; }
  .od-txn-amt, .od-txn-bal { flex: 1 1 auto; text-align: left; }
  .od-txn-bal { text-align: right; }
}

/* =============================================================
   トップページ（index.php）home-*【2026-09-30 簡易版・10/19 公開用】
   見出し＋一文 → お知らせの枠（Log in）→ Our services（3枚）→ How it works（4段）。
   幅は 960px。色は --jaa-* のみ。手数料の金額は載せない。
   ============================================================= */
.home-page { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem; }
.home-hero { margin: 0 0 1.75rem; }
.home-hero h1 { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.25; }
.home-lead { margin: 0; font-size: var(--jaa-fs-lg); color: var(--jaa-muted); }
.home-notice {
  margin: 0 0 2.5rem; padding: 1.5rem 1.75rem;
  background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-top: 3px solid var(--jaa-red);
  border-radius: var(--jaa-radius);
}
.home-notice h2 { margin: 0 0 0.75rem; font-size: var(--jaa-fs-h2); font-weight: 600; }
.home-notice p { margin: 0 0 0.5rem; }
.home-notice__action { margin-top: 1.25rem; }
.home-notice__action .btn { min-width: 12rem; text-align: center; text-decoration: none; }
.home-section { margin: 0 0 2.5rem; }
.home-section > h2 {
  margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--jaa-line);
  font-size: var(--jaa-fs-h2); font-weight: 600;
}
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.home-card {
  padding: 1.1rem 1.25rem; background: var(--jaa-bg);
  border: 1px solid var(--jaa-line); border-radius: var(--jaa-radius);
}
.home-card h3 { margin: 0 0 0.4rem; font-size: var(--jaa-fs-h3); font-weight: 600; color: var(--jaa-red); }
.home-card p { margin: 0; font-size: var(--jaa-fs-sub); }
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.home-steps li { display: flex; gap: 0.75rem; align-items: flex-start; }
.home-steps__no {
  flex: 0 0 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jaa-red); color: var(--jaa-bg); font-weight: 700;
}
.home-steps h3 { margin: 0.2rem 0 0.25rem; font-size: var(--jaa-fs-h3); font-weight: 600; }
.home-steps p { margin: 0; font-size: var(--jaa-fs-sub); color: var(--jaa-muted); }
@media (max-width: 800px) {
  .home-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .home-page { padding: 1.5rem 1rem 0.5rem; }
  .home-hero h1 { font-size: 1.6rem; }
  .home-notice { padding: 1.1rem 1rem; }
  .home-notice__action .btn { display: block; width: 100%; }
  .home-cards, .home-steps { grid-template-columns: 1fr; }
}
/* フッターの運営会社リンク（nissin-intl.com）：本文色で控えめに */
.site-footer__company a.site-footer__company-link { color: var(--jaa-ink); text-decoration: none; }
.site-footer__company a.site-footer__company-link:hover { text-decoration: underline; }
/* 特定商取引法に基づく表記（legal-notice.php）：項目名の列を固定幅に・セル内の段落と箇条書きの余白 */
.legal-notice-table th[scope="row"] { width: 11rem; }
.legal-notice-table td p { margin: 0 0 0.5rem; }
.legal-notice-table td ul { margin: 0 0 0.5rem; padding-left: 1.2rem; }
.legal-notice-table td li { margin: 0 0 0.25rem; }
@media (max-width: 640px) {
  .legal-notice-table tr, .legal-notice-table th[scope="row"], .legal-notice-table td { display: block; width: auto; }
  .legal-notice-table th[scope="row"] { border-bottom: none; padding-bottom: 0; white-space: normal; }
}

/* =============================================================
   トップページ v2（index.php）【2026-10-05 Claude Design の見本 JAA Home.dc.html に置き換え】
   ヘッダー（トップ専用・sticky）→ ヒーロー（大見出し＋イラスト）→ お知らせの帯 → Our services（イラスト付き3枚）
   → How it works（#how・4段）→ Already a member? の黒い帯 → 共通フッター（footer.php は変えない）。
   ・見本の色コードは --jaa-* に読み替え（残高画面の刷新と同じ・対応表は index.php の先頭コメント）。
     ★この節には色コードを書かない（test-pay-redesign が支払い画面の節から末尾までを検査する）。
   ・フォント（Manrope / Noto Sans JP）は読み込まず、既存のフォントのまま。
   ・旧トップ（上の「トップページ（index.php）home-*」節）のクラスとは名前を分けた（.home-v2 の中だけで使う）。
   ============================================================= */
.home-v2 { background: var(--jaa-bg); color: var(--jaa-ink); }
.home-v2 a.home-btn, .home-hdr a.home-btn { text-decoration: none; }
/* ヘッダー（トップ専用）：ロゴ＋名前／Contact us／Log in（ログイン中は Go to My Account と Log out） */
.home-hdr { position: sticky; top: 0; z-index: 10; background: var(--jaa-bg); border-bottom: 1px solid var(--jaa-line); }
.home-hdr__inner { max-width: 1160px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 12px; }
.home-hdr__logo { display: inline-flex; align-items: center; gap: 12px; color: var(--jaa-ink); text-decoration: none; }
.home-hdr__logo:hover { color: var(--jaa-ink); text-decoration: none; }
.home-hdr__logo img { width: 30px; height: 30px; object-fit: contain; display: block; }
.home-hdr__brand { font-size: 15px; font-weight: 700; }
.home-hdr__spacer { flex: 1; }
.home-hdr__contact { font-size: 14px; color: var(--jaa-muted); white-space: nowrap; text-decoration: none; }
.home-hdr__contact:hover { color: var(--jaa-red); text-decoration: underline; }
.home-hdr__logout { margin: 0; }
.home-hdr__logout-btn { font-size: 14px; color: var(--jaa-muted); white-space: nowrap; }
.home-hdr .home-btn { padding: 9px 18px; border-radius: 4px; font-size: 14px; }
/* ボタン（赤）／枠だけのボタン */
.home-btn {
  display: inline-block; padding: 16px 30px; border-radius: 5px; border: 1px solid var(--jaa-red);
  background: var(--jaa-red); color: var(--jaa-bg); font-size: 16px; font-weight: 700; line-height: 1.25; white-space: nowrap;
}
.home-btn:hover { background: var(--jaa-red-dark); border-color: var(--jaa-red-dark); color: var(--jaa-bg); text-decoration: none; }
.home-btn--shadow { box-shadow: 0 2px 8px var(--jaa-focus); }
.home-btn--ghost { padding: 16px 22px; background: var(--jaa-bg); border-color: var(--jaa-line-strong); color: var(--jaa-ink); font-weight: 600; }
.home-btn--ghost:hover { background: var(--jaa-paper); border-color: var(--jaa-line-strong); color: var(--jaa-ink); }
/* ヒーロー */
.home-intro { background: var(--jaa-paper); border-bottom: 1px solid var(--jaa-line); }
.home-intro__inner { max-width: 1160px; margin: 0 auto; padding: 64px 28px 72px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.home-intro__text { flex: 1 1 440px; min-width: 300px; }
.home-intro__art { flex: 1 1 420px; min-width: 280px; }
.home-intro__art img { width: 100%; aspect-ratio: 4 / 3; height: auto; display: block; object-fit: cover; border-radius: 8px; }
.home-kicker { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jaa-red); font-weight: 700; margin: 0 0 16px; }
.home-title { margin: 0 0 18px; font-size: 52px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance; }
.home-sub { margin: 0 0 30px; font-size: 18px; line-height: 1.6; color: var(--jaa-muted); max-width: 520px; text-wrap: pretty; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* お知らせの帯（黒いラベル＋本文） */
.home-welcome__inner { max-width: 1160px; margin: 0 auto; padding: 40px 28px 0; }
.home-welcome__box { border: 1px solid var(--jaa-line); border-radius: 6px; overflow: hidden; display: flex; flex-wrap: wrap; }
.home-welcome__label {
  flex: 0 0 auto; background: var(--jaa-ink); color: var(--jaa-bg); padding: 20px 24px; display: flex; align-items: center;
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.home-welcome__body { flex: 1 1 420px; min-width: 260px; padding: 18px 24px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.65; }
.home-welcome__body p { margin: 0; }
.home-welcome__body p + p { color: var(--jaa-muted); }
.home-welcome__body a { font-weight: 600; }
/* 見出し（小さな見出し＋大きな見出し） */
.home-block__inner { max-width: 1160px; margin: 0 auto; padding: 72px 28px 24px; }
.home-block--how .home-block__inner { padding: 64px 28px 80px; }
.home-eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jaa-muted); font-weight: 700; margin: 0 0 10px; }
.home-h2 { margin: 0 0 32px; font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.home-block--how .home-h2 { margin-bottom: 36px; }
/* Our services：イラスト付きのカード3枚 */
.home-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.home-svc__card { border: 1px solid var(--jaa-line); border-radius: 6px; overflow: hidden; background: var(--jaa-bg); }
.home-svc__img { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--jaa-line); overflow: hidden; }
.home-svc__img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-svc__body { padding: 20px 22px 24px; }
.home-svc__no { font-size: 12px; letter-spacing: 0.1em; color: var(--jaa-red); font-weight: 700; margin: 0 0 8px; }
.home-svc__body h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.home-svc__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--jaa-muted); text-wrap: pretty; }
/* How it works：上に黒い線・番号の丸（1番だけ赤） */
.home-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 2px solid var(--jaa-ink); }
.home-flow__step { padding: 24px 24px 8px 0; }
.home-flow__no {
  width: 44px; height: 44px; border-radius: 50%; background: var(--jaa-ink); color: var(--jaa-bg);
  display: grid; place-items: center; font-size: 17px; font-weight: 800; margin-bottom: 18px;
}
.home-flow__step:first-child .home-flow__no { background: var(--jaa-red); }
.home-flow__step h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.home-flow__step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--jaa-muted); text-wrap: pretty; }
.home-flow__step strong { font-weight: 700; color: var(--jaa-ink); }
/* Already a member?（黒い帯）：直後の共通フッターとの間に隙間を空けない（このページだけ） */
.home-band { background: var(--jaa-ink); color: var(--jaa-bg); }
.home-band__inner { max-width: 1160px; margin: 0 auto; padding: 44px 28px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.home-band__title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.home-band__text { font-size: 15px; color: var(--jaa-line-strong); margin: 0; }
.home-v2 + .site-footer { margin-top: 0; }
/* スマホ幅：大見出し 34px・カードと手順は1列・余白を詰める */
@media (max-width: 640px) {
  .home-hdr__inner { padding: 12px 16px; gap: 10px; }
  .home-hdr__brand { display: none; }
  .home-intro__inner { padding: 36px 16px 44px; gap: 28px; }
  .home-intro__text, .home-intro__art { flex-basis: 100%; min-width: 0; }
  .home-title { font-size: 34px; }
  .home-sub { font-size: 16px; margin-bottom: 24px; }
  .home-actions .home-btn { flex: 1 1 100%; text-align: center; }
  .home-welcome__inner { padding: 28px 16px 0; }
  .home-welcome__label { flex-basis: 100%; padding: 12px 16px; white-space: normal; }
  .home-welcome__body { flex-basis: 100%; min-width: 0; padding: 14px 16px; }
  .home-block__inner, .home-block--how .home-block__inner { padding: 44px 16px 16px; }
  .home-h2 { font-size: 26px; margin-bottom: 22px; }
  .home-svc, .home-flow { grid-template-columns: 1fr; }
  .home-flow__step { padding: 20px 0 4px; }
  .home-band__inner { padding: 32px 16px; }
  .home-band .home-btn { flex: 1 1 100%; text-align: center; }
}

/* =============================================================
   梱包画面（admin/packing.php）のピッキング一覧を詰める【2026-10-06】
   ・100点を超える発送で縦に長くなりすぎるため、行の高さを約半分（約89px→46px）にする。
   ・この一覧だけに効かせる：#picks-form の中だけ（ページ内のスタイルより強い指定＝id つき）。ほかの表は変えない。
   ・文字は 16px 以上のまま（管理画面の決まり）。チェックは 26px（指で押せる大きさ）。
   ・「済」の行の緑・「未」の赤字はページ内のスタイルのまま（ここでは色を変えない・色コードも書かない）。
   ・見出しの一括チェック（#pick-all）は 1行ずつのチェックと同じ緑。
   ============================================================= */
#picks-form table.pick-list th { padding: 6px 10px; }
#picks-form table.pick-list td { padding: 4px 10px; height: 46px; }
#picks-form .pick-check { width: 26px; height: 26px; }
#picks-form td.order-no, #picks-form td.qty, #picks-form td.loc { font-size: 17px; }
#picks-form td.item-name { font-size: 18px; line-height: 1.35; }
#picks-form .qty-reduced { font-size: 16px; }
#picks-form .pick-state { font-size: 16px; }
#picks-form .btn-remove { min-height: 34px; padding: 3px 12px; font-size: 16px; border-radius: 6px; }
#picks-form .pick-all-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
#picks-form #pick-all { width: 22px; height: 22px; margin: 0; accent-color: var(--jaa-ok); cursor: pointer; }
#picks-form #pick-all:disabled { cursor: not-allowed; }
@media (max-width: 900px) {
  #picks-form table.pick-list th, #picks-form table.pick-list td { padding-left: 6px; padding-right: 6px; }
  #picks-form .btn-remove { white-space: normal; min-width: 6em; padding: 3px 8px; line-height: 1.25; }
}

/* =============================================================
   梱包画面（admin/packing.php）のピッキング一覧：注文番号のリンク・商品名の右の ↗【2026-10-06】
   ・注文番号は注文の管理画面を別タブで開くリンク（太字のまま・赤・下線はマウスを重ねたときだけ）。
   ・↗ は受注一覧・保管管理一覧と同じ見た目（枠つきの小さな印・灰→マウスを重ねると赤）。#picks-form の中だけに効かせる。
   ============================================================= */
#picks-form td.order-no a.order-link { color: var(--jaa-red); text-decoration: none; }
#picks-form td.order-no a.order-link:hover { color: var(--jaa-red-dark); text-decoration: underline; }
#picks-form td.item-name .item-url { white-space: nowrap; }
#picks-form td.item-name .item-url a { display: inline-block; font-size: 16px; line-height: 1.5; font-weight: normal; color: var(--jaa-muted); text-decoration: none; padding: 0 5px; border: 1px solid var(--jaa-line); border-radius: 6px; vertical-align: middle; }
#picks-form td.item-name .item-url a:hover { color: var(--jaa-red); border-color: var(--jaa-red); }

/* =============================================================
   受注一覧（admin/orders-list.php・body.ol-body）の横幅と「操作」列【2026-10-07】
   ・PC 幅（1366px 以上）で横スクロールなしに「操作」まで見えるようにする：
     ページの最大幅 1400px→1680px（ヘッダー帯も同じ）・左右の余白 28px→20px・セルの左右 8px→6px・
     見出しは折り返し可（日本語の語の途中では切らない／オークションIDだけは「オークション／ID」の2行に）・商品名の最小幅 220px→200px。
   ・それより狭くて横スクロールが残るときは「操作」列を右端に固定（sticky）＝いつでも押せる。
   ・このページだけ（body.ol-body の中）。ページ内のスタイルは残し、ここで上書きする。色は --jaa-*（色コードなし）。
   ============================================================= */
body.ol-body .admin-page, body.ol-body .ol-bar-in, body.ol-body .ol-bar-title { max-width: 1680px; }
body.ol-body .admin-page { padding-left: 20px; padding-right: 20px; }
body.ol-body .ol-bar-in, body.ol-body .ol-bar-title { padding-left: 20px; padding-right: 20px; }
body.ol-body table.list th, body.ol-body table.list td { padding-left: 6px; padding-right: 6px; }
body.ol-body table.list th { white-space: normal; word-break: keep-all; line-height: 1.35; vertical-align: bottom; }
body.ol-body table.list th:nth-child(7) { word-break: normal; min-width: 7em; }
body.ol-body .item-title { min-width: 200px; }
/* 「操作」列を右端に固定（横スクロールが出たときだけ効く）。背景を敷いて下の列が透けないように・左に区切り線 */
body.ol-body table.list th:last-child, body.ol-body table.list td:last-child { position: sticky; right: 0; z-index: 1; box-shadow: -1px 0 0 var(--jaa-line); }
body.ol-body table.list th:last-child { background: var(--jaa-paper); }
body.ol-body table.list td:last-child { background: var(--jaa-bg); }
body.ol-body table.list tr.stale td:last-child { background: inherit; }

/* =============================================================
   明細の操作画面（admin/order-status.php・body.ost-body）【2026-10-07 デザイン変更】
   資料 デザイン/管理画面/JAA管理画面改善_10/JAA 明細の操作.dc.html。見た目だけ（フォーム・処理は不変）。
   上の帯（戻る・この受付の全明細・見出し・種別と状態のバッジ）→ 情報のカード（項目名は小さい灰色・値は太字）→
   主な操作の枠（青）→ その他の操作（落札失敗＝黄・キャンセル／購入不可＝ピンク・横並び）→ 注意書き。
   ・このページだけ（body.ost-body の中）。フォントは既存のまま（資料の Noto Sans JP は読み込まない）。
   ・色は --jaa-* を基本に、操作の種類を見分ける機能色（青・黄・ピンク・バッジ）だけ色コードで書く（受注一覧のバッジと同じ色）。
   ============================================================= */
body.ost-body {
  --ost-blue: #1a4b8f; --ost-blue-dark: #163d61; --ost-blue-bg: #f4f8fd; --ost-blue-line: #b9cbe6;
  --ost-yellow-bg: #fffaeb; --ost-yellow-line: #ecd38a; --ost-yellow-ink: #7a5600; --ost-yellow-hover: #fbf1d6;
  --ost-pink-bg: #fdf6f8; --ost-pink-line: #ecbcc8; --ost-pink-ink: #a4123f; --ost-pink-hover: #fdf0f3;
}
/* 上の帯 */
body.ost-body .ost-bar { background: var(--jaa-bg); border-bottom: 1px solid var(--jaa-line); }
body.ost-body .ost-bar-in { max-width: 1000px; margin: 0 auto; padding: 14px 20px 16px; }
body.ost-body .ost-bar-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 15px; }
body.ost-body .ost-bar-links a { color: var(--jaa-muted); text-decoration: none; }
body.ost-body .ost-bar-links a:hover { color: var(--jaa-red); text-decoration: underline; }
body.ost-body .ost-bar-sep { width: 1px; height: 14px; background: var(--jaa-line); }
body.ost-body .ost-bar-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
body.ost-body .ost-bar-title h1 { margin: 0 6px 0 0; font-size: 22px; font-weight: 700; letter-spacing: 0.01em; }
body.ost-body .ost-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; }
body.ost-body .ost-svc-auction    { background: #eef3fd; color: #1a4b8f; border-color: #9db8e0; }
body.ost-body .ost-svc-shop       { background: #e9f7ef; color: #0a5c26; border-color: #9fd4b0; }
body.ost-body .ost-svc-forwarding { background: #f1e8fa; color: #5b2d8e; border-color: #c6a8e0; }
body.ost-body .ost-st-processing { background: #fdecea; color: #a00000; border-color: #e8a0a0; }
body.ost-body .ost-st-accepting  { background: #f1e8fa; color: #5b2d8e; border-color: #c6a8e0; }
body.ost-body .ost-st-awaiting   { background: #fff4d6; color: #8a5a00; border-color: #e0c060; }
body.ost-body .ost-st-storage    { background: #eef3fd; color: #1a4b8f; border-color: #9db8e0; }
body.ost-body .ost-st-shipped    { background: #e9f7ef; color: #0a5c26; border-color: #9fd4b0; }
body.ost-body .ost-st-failed, body.ost-body .ost-st-cancelled, body.ost-body .ost-st-other { background: #f0f0f0; color: #666; border-color: #ccc; }
/* 本文の幅・メッセージ */
body.ost-body .admin-page.ost-page { max-width: 1000px; margin: 0 auto; padding: 20px 20px 48px; line-height: 1.7; font-size: 16px; }
body.ost-body .ost-page .flash-error { background: var(--jaa-error-bg); border: 1px solid var(--jaa-error-line); color: var(--jaa-error-ink); border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; white-space: pre-line; }
body.ost-body .ost-page .flash-done  { background: var(--jaa-ok-bg); border: 1px solid var(--jaa-ok); color: var(--jaa-ok); border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; white-space: pre-line; }
body.ost-body .ost-page .muted { color: var(--jaa-muted); font-size: 14px; }
body.ost-body .ost-page .num { font-variant-numeric: tabular-nums; }
/* 情報のカード */
body.ost-body .ost-card { background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-radius: 8px; padding: 18px 22px; margin: 0 0 18px; }
body.ost-body .ost-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--jaa-line); }
body.ost-body .ost-item-val { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
body.ost-body .ost-item-title { font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
body.ost-body .ost-qty { font-weight: 700; color: var(--jaa-muted); }
body.ost-body .ost-qty-changed { color: #a00000; }
body.ost-body .ost-card .item-url a { display: inline-block; font-size: 15px; line-height: 1.5; color: var(--jaa-muted); text-decoration: none; padding: 0 6px; border: 1px solid var(--jaa-line); border-radius: 6px; }
body.ost-body .ost-card .item-url a:hover { color: var(--jaa-red); border-color: var(--jaa-red); }
body.ost-body .ost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 24px; padding-top: 14px; }
body.ost-body .ost-cell { display: flex; flex-direction: column; min-width: 0; }
body.ost-body .ost-cell--wide { grid-column: 1 / -1; }
body.ost-body .ost-label { font-size: 13px; color: var(--jaa-muted); font-weight: 600; letter-spacing: 0.02em; }
body.ost-body .ost-item > .ost-label { min-width: 3em; }
body.ost-body .ost-val { font-size: 17px; font-weight: 700; color: var(--jaa-ink); overflow-wrap: anywhere; }
body.ost-body a.ost-val { text-decoration: underline; text-underline-offset: 3px; }
body.ost-body a.ost-val:hover { color: var(--jaa-red); }
body.ost-body .ost-sub { font-size: 14px; color: var(--jaa-muted); }
body.ost-body .ost-note-val { font-size: 15px; overflow-wrap: anywhere; }
/* 主な操作の枠（青） */
body.ost-body .ost-main { border: 1px solid var(--ost-blue-line); background: var(--ost-blue-bg); border-radius: 8px; padding: 18px 22px; margin: 0 0 18px; }
body.ost-body .ost-main h2, body.ost-body .ost-op h2, body.ost-body .ost-guide h2, body.ost-body .ost-confirm h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
body.ost-body .ost-main h2 { color: var(--ost-blue); }
body.ost-body .ost-desc { margin: 0 0 12px; font-size: 15px; color: var(--jaa-muted); }
body.ost-body .ost-desc b { color: var(--jaa-ink); }
body.ost-body .ost-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; margin: 4px 0 14px; }
body.ost-body .ost-field { display: flex; flex-direction: column; gap: 4px; }
body.ost-body .ost-field-label { font-size: 14px; font-weight: 700; color: var(--jaa-ink); }
body.ost-body .ost-req { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 12px; background: var(--jaa-red); color: var(--jaa-bg); vertical-align: 1px; }
body.ost-body .ost-field input[type="date"], body.ost-body .ost-field input[type="number"] { font-size: 16px; padding: 8px 10px; border: 1px solid var(--jaa-line-strong); border-radius: 6px; background: var(--jaa-bg); width: 100%; max-width: 260px; }
body.ost-body .ost-field-hint { font-size: 13px; color: var(--jaa-muted); font-weight: normal; }
body.ost-body .ost-check { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-weight: 700; }
body.ost-body .ost-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.ost-body .ost-btn-main { font-size: 16px; font-weight: 700; padding: 10px 28px; border-radius: 6px; cursor: pointer; background: var(--ost-blue); color: var(--jaa-bg); border: 1px solid var(--ost-blue); }
body.ost-body .ost-btn-main:hover { background: var(--ost-blue-dark); border-color: var(--ost-blue-dark); }
body.ost-body .ost-main--sub { background: var(--jaa-bg); }
body.ost-body .ost-btn-sub { font-size: 16px; font-weight: 700; padding: 9px 24px; border-radius: 6px; cursor: pointer; background: var(--jaa-bg); color: var(--ost-blue); border: 2px solid var(--ost-blue); }
body.ost-body .ost-btn-sub:hover { background: var(--ost-blue-bg); }
/* その他の操作（落札失敗＝黄・キャンセル／購入不可＝ピンク） */
body.ost-body .ost-others { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 0 0 14px; }
body.ost-body .ost-op { border-radius: 8px; padding: 16px 20px; display: flex; flex-direction: column; }
body.ost-body .ost-op form { margin-top: auto; }
body.ost-body .ost-op--fail { background: var(--ost-yellow-bg); border: 1px solid var(--ost-yellow-line); }
body.ost-body .ost-op--fail h2 { color: var(--ost-yellow-ink); }
body.ost-body .ost-op--cancel { background: var(--ost-pink-bg); border: 1px solid var(--ost-pink-line); }
body.ost-body .ost-op--cancel h2 { color: var(--ost-pink-ink); }
body.ost-body .ost-btn-fail, body.ost-body .ost-btn-cancel { font-size: 16px; font-weight: 700; padding: 9px 22px; border-radius: 6px; cursor: pointer; background: var(--jaa-bg); }
body.ost-body .ost-btn-fail { color: var(--ost-yellow-ink); border: 1px solid var(--ost-yellow-line); }
body.ost-body .ost-btn-fail:hover { background: var(--ost-yellow-hover); }
body.ost-body .ost-btn-cancel { color: var(--ost-pink-ink); border: 1px solid var(--ost-pink-line); }
body.ost-body .ost-btn-cancel:hover { background: var(--ost-pink-hover); }
body.ost-body .ost-foot { margin: 0 0 18px; font-size: 14px; color: var(--jaa-muted); }
/* 入荷の案内・操作なし */
body.ost-body .ost-guide { background: var(--jaa-bg); border: 1px solid var(--jaa-line); border-left: 4px solid var(--ost-blue); border-radius: 8px; padding: 16px 20px; margin: 0 0 18px; }
body.ost-body .ost-guide p { margin: 0; }
body.ost-body .ost-none { background: var(--jaa-paper); border: 1px solid var(--jaa-line); border-radius: 8px; padding: 14px 20px; margin: 0 0 18px; color: var(--jaa-ink); }
/* 落札確定の確認画面（3列） */
body.ost-body .ost-confirm { border: 2px solid var(--ost-blue); background: var(--ost-blue-bg); border-radius: 8px; padding: 18px 22px; margin: 0 0 18px; }
body.ost-body .ost-confirm h2 { color: var(--ost-blue); }
body.ost-body .ost-table-scroll { overflow-x: auto; }
body.ost-body table.cmp { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 15px; background: var(--jaa-bg); }
body.ost-body table.cmp th, body.ost-body table.cmp td { border: 1px solid var(--ost-blue-line); padding: 7px 12px; }
body.ost-body table.cmp th { background: var(--ost-blue-bg); font-weight: 600; color: var(--jaa-ink); text-align: left; }
body.ost-body table.cmp th.num, body.ost-body table.cmp td.num { text-align: right; white-space: nowrap; }
body.ost-body table.cmp tr.total th, body.ost-body table.cmp tr.total td { border-top: 2px solid var(--ost-blue); font-weight: 700; }
body.ost-body .won-refund { background: var(--jaa-ok-bg); border: 1px solid var(--jaa-ok); color: var(--jaa-ok); border-radius: 6px; padding: 8px 12px; margin: 10px 0; font-weight: 700; }
body.ost-body .won-actions { margin-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
body.ost-body .won-actions button { font-size: 16px; font-weight: 700; padding: 10px 28px; border-radius: 6px; cursor: pointer; background: var(--ost-blue); color: var(--jaa-bg); border: 1px solid var(--ost-blue); }
body.ost-body .won-actions button:hover { background: var(--ost-blue-dark); }
body.ost-body .won-actions a.back { display: inline-block; padding: 9px 22px; border: 1px solid var(--jaa-line-strong); border-radius: 6px; color: var(--jaa-ink); text-decoration: none; background: var(--jaa-bg); }
/* タブレット・狭い幅 */
@media (max-width: 760px) {
  body.ost-body .ost-bar-in, body.ost-body .admin-page.ost-page { padding-left: 14px; padding-right: 14px; }
  body.ost-body .ost-card, body.ost-body .ost-main, body.ost-body .ost-confirm { padding: 14px 16px; }
  body.ost-body .ost-others { grid-template-columns: 1fr; }
}

/* =============================================================
   発送ファイル管理（admin/shipment-files.php）のドロップ欄【2026-10-14】
   file 入力を欄いっぱいに広げて透明にする＝欄のどこに落としても・クリックしても選べる（JS 不要）。
   .is-over（持ってきたとき）・.is-picked（選んだあと）は画面内の小さな JS が付ける。
   ============================================================= */
.sf-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
           box-sizing: border-box; width: 100%; min-height: 150px; margin: 8px 0 6px; padding: 20px 16px;
           border: 3px dashed var(--jaa-line-strong); border-radius: var(--jaa-radius-lg); background: var(--jaa-paper);
           text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s; }
.sf-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
                              opacity: 0; cursor: pointer; font-size: 0; }
.sf-drop-main { font-size: 1.35rem; font-weight: 700; color: var(--jaa-ink); pointer-events: none; }
.sf-drop-sub { font-size: var(--jaa-fs-body); color: var(--jaa-muted); pointer-events: none; }
.sf-drop-picked { font-size: var(--jaa-fs-sub); color: var(--jaa-ok); font-weight: 700; word-break: break-all; pointer-events: none; }
.sf-drop-picked:empty { display: none; }
.sf-drop:hover, .sf-drop:focus-within { border-color: var(--jaa-red); }
.sf-drop:focus-within { box-shadow: 0 0 0 3px var(--jaa-focus); }
.sf-drop.is-picked { border-color: var(--jaa-ok); background: var(--jaa-ok-bg); }
.sf-drop.is-over { border-color: var(--jaa-red); border-style: solid; background: var(--jaa-error-bg); }
@media (max-width: 760px) {
  .sf-drop { min-height: 130px; }
  .sf-drop-main { font-size: 1.15rem; }
}

/* =============================================================
   セラー支払い（admin/seller-payments.php）：ショップのグループの支払状況の案内【2026-10-14】
   「購入済にする」で支払状況「済」・セラー支払日を自動で入れている旨（表示のみ）。この画面は 16px 未満禁止。
   ============================================================= */
.exp-grid .sp-shop-paid-hint { flex: 1 1 100%; margin: 0; padding: 6px 12px; font-size: 16px; color: var(--jaa-ink);
                               background: var(--jaa-paper); border-left: 4px solid var(--jaa-line-strong); border-radius: var(--jaa-radius-sm); }

/* =============================================================
   セラー支払い（admin/seller-payments.php）：「済」で支払方法が空＝入力待ちの印【2026-10-14】
   一覧の支払状況の横の小さな印と、グループを開いたときの注意（表示のみ）。この画面は 16px 未満禁止。
   ============================================================= */
.rs .sp-await-input { display: inline-block; margin: 4px 0 0 6px; padding: 1px 8px; font-size: 16px; font-weight: 700; white-space: nowrap;
                      color: var(--jaa-error-ink); background: var(--jaa-error-bg); border: 1px solid var(--jaa-error-line); border-radius: var(--jaa-radius-sm); }
.exp-block .sp-method-missing { margin: 4px 0 10px; padding: 8px 12px; font-size: 16px; font-weight: 700;
                                color: var(--jaa-error-ink); background: var(--jaa-error-bg); border: 2px solid var(--jaa-error-line); border-radius: var(--jaa-radius); }

/* =============================================================
   セラー支払い（admin/seller-payments.php）：同梱グループの明細ごとの到着欄【2026-10-19】
   明細の表の「到着」列（保管場所・個口・「到着＋ラベル」・到着済の表示）。
   同梱グループ（明細2件以上）だけに出る。ボタンの色は下の「到着処理」の主ボタン（.btn-arrive-print）と同じ緑。この画面は 16px 未満禁止。
   ============================================================= */
table.exp-items td.sp-arrive-one { min-width: 150px; vertical-align: middle; }
.sp-arrive-one .spa1-inputs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 6px; }
.sp-arrive-one .spa1-inputs label { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; white-space: nowrap; }
.sp-arrive-one .spa1-loc { width: 74px; font-size: 16px; padding: 4px 6px; }
.sp-arrive-one .spa1-loc.is-invalid { border: 2px solid #c00; }
.sp-arrive-one .spa1-parcel { font-size: 16px; padding: 3px 4px; }
.sp-arrive-one .spa1-btn { display: block; width: 100%; min-height: 40px; padding: 6px 8px; white-space: nowrap; font-size: 16px; font-weight: bold;
                           border: 2px solid #0a5c26; border-radius: 8px; background: #0a5c26; color: #fff; cursor: pointer; line-height: 1.3; }
.sp-arrive-one .spa1-btn:hover { background: #084a1f; }
.sp-arrive-one .spa1-err { margin-top: 4px; color: #c00; font-size: 16px; font-weight: bold; }
.sp-arrive-one .spa1-done { display: inline-block; font-size: 16px; color: #0a5c26; font-weight: bold; }
.sp-arrive-one .spa1-date { white-space: nowrap; }

/* =============================================================
   セラー支払い（admin/seller-payments.php）：同梱グループの下の到着処理の欄【2026-10-19 改】
   「行に入れた保管場所が優先…」の案内と、保管場所が入っていない明細があるときの赤字（送信前の画面の検査）。
   同梱グループの到着フォーム（.spa1-form）だけに効く。この画面は 16px 未満禁止。
   ============================================================= */
.spa1-form .spa1-loc-note { margin: 6px 0 0; font-size: 16px; font-weight: bold; color: var(--jaa-ink); }
.spa1-form .spa1-err { margin-top: 4px; color: #c00; font-size: 16px; font-weight: bold; }
.spa1-form .spa1-bottom-loc.is-invalid { border: 2px solid #c00; }

/* =============================================================
   マイページの注文一覧（mypage.php?view=orders）：オークの金額の種類【2026-10-20】
   金額の下に小さく「Max bid」（入札上限額）／「Winning bid」（落札額）。オークの行だけに出る（表示のみ）。
   ============================================================= */
.ol-amount-val { display: block; }
.ol-amount-note { display: block; margin-top: 2px; font-size: var(--jaa-fs-xxs); font-weight: 500; color: var(--jaa-muted); letter-spacing: 0.02em; }
@media (max-width: 640px) {
  /* 狭い幅でも金額の下にラベル（金額欄の幅を増やさない＝ほかの行と同じく状態の横に並ぶ） */
  .ol-amount--noted .ol-amount-note { margin-top: 1px; }
}

/* =============================================================
   注文詳細（customer/order.php）：複数明細の受付の「注文時の請求額」「残高に戻した額」【2026-10-20】
   ENTIRE RECEIPT の現在の内訳の上に置く小さな表（表示のみ）。640px 以下では金額表の項目名を折り返す。
   ============================================================= */
.od-card .detail-table.od-receipt-settle { margin-bottom: 8px; border-bottom: 1px dashed var(--jaa-line-strong); }
.od-card .detail-table.od-receipt-settle td.num { font-weight: 600; }
@media (max-width: 640px) {
  /* 狭い幅では金額表の項目名を折り返す（長い項目名で表が枠より広がり、金額の右端が切れるのを防ぐ。金額の列は折り返さないまま） */
  .od-card .detail-table.od-money th { white-space: normal; }
}

/* =====================================================================
   テスト会員：一覧の「TEST」の印・テスト会員のデータを消す画面（admin/test-data-cleanup.php）【2026-10-20】
   ・.tm-mark＝受注一覧・入金待ち・発送管理・セラー支払い・保管管理・残高引出の顧客名の横（config/test_members.php の会員）
   ・.tdc-*＝消す画面（.dbc-* の部品を流用。消すボタンだけ赤の枠）
   ===================================================================== */
.tm-mark { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--jaa-red); border-radius: 4px; color: var(--jaa-red); background: var(--jaa-bg); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; vertical-align: middle; white-space: nowrap; }
.tdc-pick select { padding: 8px 10px; font-size: var(--jaa-fs-body); font-family: inherit; border: 1px solid var(--jaa-line-strong); border-radius: 6px; min-width: 20rem; max-width: 100%; }
.tdc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; }
.tdc-page .dbc-table td.num, .tdc-page .dbc-table th.num { text-align: right; white-space: nowrap; }
.tdc-balance td { font-weight: 700; }
.tdc-nos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 16px; }
.tdc-nos dt { font-weight: 700; }
.tdc-nos dd { margin: 0; }
.tdc-no { display: inline-block; margin: 0 8px 4px 0; padding: 1px 8px; border: 1px solid var(--jaa-line); border-radius: 4px; background: var(--jaa-paper); white-space: nowrap; }
.tdc-no small { color: var(--jaa-muted); font-size: 13px; }
.tdc-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 16px 0; }
.tdc-danger { font-size: var(--jaa-fs-body); font-weight: 700; padding: 10px 24px; border-radius: 6px; cursor: pointer; border: 2px solid var(--jaa-red); background: var(--jaa-bg); color: var(--jaa-red); }
.tdc-danger:hover { background: var(--jaa-red); color: var(--jaa-bg); }
.tdc-confirm { margin: 16px 0; padding: 14px 18px; border: 2px solid var(--jaa-red); border-radius: 8px; background: var(--jaa-bg); }
.tdc-confirm h2 { margin-top: 0; border-bottom: none; }
.tdc-type { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.tdc-type input { width: 14rem; padding: 8px 10px; font-size: var(--jaa-fs-body); font-family: inherit; border: 1px solid var(--jaa-line-strong); border-radius: 6px; }
.tdc-result h2 { margin-top: 8px; }
@media (max-width: 640px) {
  .tdc-nos { grid-template-columns: 1fr; }
  .tdc-pick select { min-width: 0; width: 100%; }
}

/* =====================================================================
   ショップ明細のオークションID（admin/order-status.php・body.ost-body）【2026-10-20・STEP 45】
   ・入力欄（購入手続き中にする・購入済にする・情報の欄の「編集」）・URL から読めた候補のボタン・「編集」の開閉
   ・明細の操作画面の節（2026-10-07）の後ろではなく末尾に置く（それより前の部分の md5 を見ているテストがあるため）
   ===================================================================== */
body.ost-body .ost-field input[type="text"] { font-size: 16px; padding: 8px 10px; border: 1px solid var(--jaa-line-strong); border-radius: 6px; background: var(--jaa-bg); width: 100%; max-width: 260px; font-family: ui-monospace, Consolas, monospace; }
body.ost-body .ost-field input[type="text"]:invalid { border-color: var(--jaa-red); }
body.ost-body .ost-aid-auto { color: var(--ost-blue); }
body.ost-body .ost-aid-cands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.ost-body .ost-aid-pick { font-size: 15px; font-family: ui-monospace, Consolas, monospace; padding: 3px 10px; border: 1px solid var(--ost-blue); border-radius: 6px; background: var(--jaa-bg); color: var(--ost-blue); cursor: pointer; }
body.ost-body .ost-aid-pick:hover { background: var(--ost-blue-bg); }
body.ost-body .ost-aid-edit { margin-top: 4px; }
body.ost-body .ost-aid-edit summary { display: inline-block; font-size: 14px; color: var(--ost-blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
body.ost-body .ost-aid-edit[open] { background: var(--ost-blue-bg); border: 1px solid var(--ost-blue-line); border-radius: 8px; padding: 8px 12px 12px; }
body.ost-body .ost-aid-edit form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* =====================================================================
   明細の操作画面：顧客の欄の手数料（注文した時の率＝受付の控え）【2026-10-21・STEP 46】
   ・今の会員の率と違うときだけ、その下に小さく並べて出す（この注文の計算には使わない）
   ===================================================================== */
body.ost-body .ost-fee-now { color: #8a5a00; }