@charset "utf-8";
/* member-common.css — 会員系ページ（register / mypage / reservation / review-post）で共有する見た目
   対応する部品は /assets/js/pages/member-common.js */

/* ---------- 予約の状態ラベル ---------- */
.p-status { display: inline-block; flex: none; padding: 0 9px; border-radius: 2px; background: #8d857e; color: #fff; font-size: 11px; font-weight: bold; line-height: 20px; white-space: nowrap; vertical-align: middle; }
.p-status--reserved { background: var(--c-primary); }
.p-status--visited { background: var(--c-all); }
.p-status--cancelled { background: #8d857e; }
.p-status--noshow { background: var(--c-error); }

/* ---------- クーポン・メニュー明細 ----------
   定義表（.c-deftable）の値セルの中に置くので、セルの罫線・背景は tbody/tfoot まで指定して明示する */
.p-items { width: 100%; border: 1px solid var(--c-border-light); background: #fff; }
.p-items tbody th, .p-items tbody td, .p-items tfoot th, .p-items tfoot td { padding: 8px 12px; border: 1px solid var(--c-border-light); background: none; vertical-align: middle; line-height: 1.5; }
.p-items tbody th { width: 104px; background: #fcfaf8; font-weight: normal; white-space: nowrap; }
.p-items__kind { color: var(--c-sub); font-size: 11px; }
.p-items .c-label + .p-items__kind { display: none; }
.p-items tbody .p-items__name { font-weight: bold; word-break: break-word; }
.p-items__name small { display: block; color: var(--c-sub); font-size: 11px; font-weight: normal; }
.p-items tbody .p-items__price { width: 104px; font-weight: bold; text-align: right; white-space: nowrap; }
.p-items tfoot th { width: auto; background: #fffdfb; color: var(--c-heading); font-weight: bold; text-align: right; }
.p-items tfoot .p-items__total { background: #fffdfb; color: var(--c-price); font-size: 17px; font-weight: bold; text-align: right; white-space: nowrap; }

/* ---------- 会員情報フォームの小物 ---------- */
.p-member-sub { display: inline-flex; align-items: center; gap: 6px; color: #555; font-size: 12px; }
.p-member-birth .c-select { min-width: 86px; }

@media (max-width: 767px) {
  .p-status { font-size: 12px; line-height: 22px; }
  /* 明細は「区分 / 名称 … 金額」の縦積みにする（狭い幅で名称が細切れに折り返さないように） */
  .p-items, .p-items tbody, .p-items tfoot { display: block; }
  .p-items tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-top: 1px solid var(--c-border-light); }
  .p-items tbody tr:first-child { border-top: 0; }
  .p-items tbody th, .p-items tbody td, .p-items tfoot th, .p-items tfoot td { display: block; width: auto; padding: 0; border: 0; background: none; }
  .p-items tbody th { flex: 1 1 100%; line-height: 1.3; }
  .p-items tbody .p-items__name { flex: 1 1 0; min-width: 0; font-size: 13px; }
  .p-items tbody .p-items__price { flex: none; width: auto; }
  .p-items tfoot tr { background: #fffdfb; }
  .p-items tfoot th { flex: 1 1 0; text-align: left; }
  .p-items tfoot .p-items__total { background: none; }
  .p-member-sub { flex: 1 1 0; min-width: 0; font-size: 13px; white-space: nowrap; }
  .p-member-sub .c-input { flex: 1 1 0; width: auto; min-width: 0; }
  .p-member-birth .c-select { flex: 1 1 0; min-width: 0; }
}