@layer components {
	/* 表。デザインにない部品なので、会員組合リスト(.mem)と同じ罫線の扱いにした（計画 1-2）
	   上端=濃い1px罫、行の区切り=薄い罫、見出しセル=デザインのラベルと同じ色・ウェイト・字間 */
	.tbl-wrap { container-type: inline-size; }
	.tbl { width: 100%; font-size: 15px; border-top: 1px solid var(--ink); }
	.tbl th, .tbl td { text-align: start; padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
	.tbl th { font-size: 13px; font-weight: 500; color: var(--ink-faint); letter-spacing: .14em; white-space: nowrap; }
	.tbl td { color: var(--ink); }
	.tbl thead th { background: var(--mint-wash); }
	.tbl tbody th[scope="row"] { color: var(--ink-soft); }
	.tbl a { color: var(--mint); text-decoration: underline; text-underline-offset: .2em; }
	.tbl .none { color: var(--ink-faint); }
	.tbl--kv th { width: 11em; }
	.tbl .ph-wait--inline { white-space: normal; }

	/* 幅が狭いとき：見出し列型は項目名を上・内容を下に積む。一覧型は1件を1つのまとまりにして値の前に項目名を出す */
	@container (width < 640px) {
		.tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; }
		.tbl thead { display: none; }
		.tbl--kv tr { border-bottom: 1px solid var(--line); padding-block: 12px; }
		.tbl--kv th, .tbl--kv td { border: 0; padding: 0; width: auto; }
		.tbl--kv th { padding-bottom: 2px; }
		.tbl--list tr { border-bottom: 1px solid var(--line); padding-block: 14px; }
		.tbl--list th[scope="row"] { border: 0; padding: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .03em; white-space: normal; }
		.tbl--list td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 8.5em 1fr; gap: 8px; font-size: 14.5px; }
		.tbl--list td::before { content: attr(data-label); color: var(--ink-faint); font-size: 12px; font-weight: 500; letter-spacing: .1em; padding-top: .2em; }
	}
	.tbl-note { margin-top: 16px; font-size: 13px; color: var(--ink-soft); }
}