:root {
  --ink: #1f2d33;
  --muted: #5f6f76;
  --line: #d9e2e5;
  --bg: #f4f7f7;
  --card: #ffffff;
  --accent: #1f6f78;   /* 既定（碧） */
  --accent-ink: #ffffff;
  --ng: #b3261e;
  --ok: #1e7a46;
}
/* 事業（ブランド）ごとの配色 */
body.t-teal   { --accent: #1f6f78; }
body.t-orange { --accent: #c2500c; }
body.t-navy   { --accent: #24406b; }
body.t-green  { --accent: #2f6d3a; }

/* 事業の切り替えバー（お客様向け画面・ドメインが違っても行き来できる） */
.brandbar { background: #fff; border-bottom: 1px solid var(--line); }
.brandbar .wrap { padding-block: 10px; }
.brandbar .tab { font-size: 14px; }

/* 管理画面の事業タブ */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.tabs .tab { font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: var(--muted); background: #fff; }
.tabs .tab.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
table.orders .c-brand { min-width: 7em; }

* { box-sizing: border-box; }
/* hidden 属性は常に優先（.field 等の display 指定に負けないように） */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.7 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
.wrap { max-width: 600px; margin: 0 auto; padding-inline: 16px; }
header.site { background: var(--accent); color: var(--accent-ink); }
header.site .wrap { display: flex; justify-content: space-between; align-items: center; padding-block: 12px; }
.logo { font-weight: 700; letter-spacing: .06em; }
.secure { font-size: 12px; opacity: .9; }
main { padding-block: 20px 32px; }
h1 { font-size: 22px; margin: 8px 0 16px; }
h2 { font-size: 16px; margin: 0 0 12px; color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.field { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.field small { font-weight: 400; color: var(--muted); margin-left: 6px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; color: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .row { grid-template-columns: 1fr; } }
.qty, .exp { display: flex; align-items: center; gap: 8px; }
.qty input { max-width: 110px; }
#amountField .qty input { max-width: 160px; }
#amountField small { display: block; font-weight: 400; color: var(--muted); margin: 2px 0 0; }
.qty span, .exp > span { margin-top: 6px; font-weight: 400; }
.total { margin: 6px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); text-align: right; }
.total strong { font-size: 26px; color: var(--accent); }
.brands { font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }
.alert { background: #fdecea; color: var(--ng); border: 1px solid #f5c2bd; border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.alert ul { margin: 0; padding-left: 18px; }
.test { background: #fff4d6; border: 1px solid #f0d58a; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.btn { display: inline-block; padding: 14px 20px; border-radius: 10px; border: 1px solid var(--accent); color: var(--accent); background: #fff; text-decoration: none; font: inherit; font-weight: 700; cursor: pointer; }
.btn.primary { display: block; width: 100%; background: var(--accent); color: var(--accent-ink); font-size: 17px; }
.btn:disabled { opacity: .6; cursor: wait; }
.result h1 { margin-top: 0; }
.result.ok h1 { color: var(--ok); }
.result.ng h1 { color: var(--ng); }
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; }
footer.wrap { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding-block: 0 24px; }
footer a { color: var(--muted); }
section.terms h2 { color: var(--ng); }
.terms-body { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; background: #fbfcfc; font-size: 14px; }
.terms-body p { margin: 0 0 8px; }
ul.checks { list-style: none; margin: 14px 0 0; padding: 0; }
ul.checks li { margin-bottom: 10px; }
ul.checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; cursor: pointer; }
ul.checks input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.btn.primary:disabled { background: #b9c6c8; border-color: #b9c6c8; cursor: not-allowed; }
.btn.line { background: #06c755; border-color: #06c755; color: #fff; }
.card.promo { border-color: var(--accent); background: linear-gradient(180deg,#fff, #fbfdfd); }
.card.promo h2 { margin-top: 0; }
.card.promo p { margin: 0 0 10px; font-size: 14px; }
dl.legal { display: grid; grid-template-columns: 12em 1fr; gap: 10px 20px; margin: 0; }
dl.legal dt { color: var(--muted); font-size: 14px; }
dl.legal dd { margin: 0; }
@media (max-width: 560px) {
  dl.legal { grid-template-columns: 1fr; gap: 2px; }
  dl.legal dd { margin-bottom: 12px; }
}
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar h1 { margin: 8px 0; }
.btn.small { padding: 8px 14px; font-size: 14px; }
.tablewrap { overflow-x: auto; max-width: 100%; }
/* 管理画面（注文一覧）は画面幅に合わせて広く使う */
body:has(table.orders) .wrap { max-width: min(1600px, 96vw); }
table.orders { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; background: #fff; table-layout: auto; }
table.orders th, table.orders td { border: 1px solid var(--line); padding: 6px 8px; white-space: nowrap; }
table.orders th { background: #eef3f4; position: sticky; top: 0; }
/* 品目だけ折り返しを許可し、1文字ずつにならないよう最低幅を確保する */
table.orders .c-item { white-space: normal; min-width: 15em; }
table.orders .c-fac { white-space: normal; min-width: 9em; }
table.orders .c-name { min-width: 6em; }
table.orders .c-mail { min-width: 12em; }
table.orders .c-time { min-width: 6.5em; }
table.orders .num { text-align: right; }
tr.st-paid td { background: #eef8f1; }
tr.st-failed td, tr.st-cancelled td { color: var(--muted); }
/* 画面が広いときは表のまま、狭くなるにつれて重要度の低い列を省略 */
@media (max-width: 1450px) { .c-mail, .c-tel { display: none; } }
@media (max-width: 1100px) { .c-track, .c-err { display: none; } }
@media (max-width: 900px) { .c-name, .c-date { display: none; } }
@media (max-width: 800px) { .c-fac { display: none; } }

/* スマホでは1件ずつのカード表示に切り替え（横スクロール不要） */
@media (max-width: 680px) {
  .tablewrap { overflow-x: visible; }
  table.orders { min-width: 0; }
  table.orders, table.orders tbody, table.orders tr, table.orders td { display: block; width: 100%; }
  table.orders thead { display: none; }
  table.orders tr {
    border: 1px solid var(--line); border-radius: 12px; background: var(--card);
    padding: 10px 14px; margin-bottom: 12px;
  }
  table.orders td {
    border: 0; padding: 3px 0; white-space: normal; word-break: break-word;
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-align: right;
  }
  table.orders td::before {
    content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left; flex: none;
  }
  table.orders td:empty { display: none; }
  table.orders .c-mail, table.orders .c-tel, table.orders .c-track,
  table.orders .c-err, table.orders .c-name, table.orders .c-date, table.orders .c-fac { display: flex; }
  table.orders .c-id { font-weight: 700; }
  table.orders .c-amt { font-size: 16px; font-weight: 700; color: var(--accent); }
  tr.st-paid td { background: transparent; }
  tr.st-paid { border-color: var(--ok); background: #f2fbf5; }
}