@layer components {
	/* ============================================================
	 * content-table … ラベル付き定義テーブル（見出し列 th ＋ 内容列 td）。
	 * 企業情報（会社概要／役員一覧・#89）で初出。今後の採用・法務ページでも
	 * 再利用する共有部品のため blocks/ ではなく components/ に置く（ADR 0007）。
	 *
	 * 構造（各ダイナミックブロックが出力）:
	 *   section.content-table-section
	 *     h3.content-table-section__title   … セクション見出し
	 *     table.content-table               … th/td 行
	 *
	 * 移植元 css/style.css の .content-table / .page-content h3 / .page-content--gap-48
	 * を移植。レスポンシブはモバイルファースト（min-width で上書き・ADR 0009）。
	 * ============================================================ */

	/* --- セクション（見出し＋表を1単位に） --- */
	.content-table-section {
		display: flex;
		flex-direction: column;
		/* 見出し→表の間隔（移植元 .page-content--gap-48 相当）。 */
		gap: var(--wp--preset--spacing--40);
	}

	/* セクション間（会社概要 ↔ 役員一覧）の間隔（移植元 .page-body gap＝2XL 相当）。 */
	.content-table-section + .content-table-section {
		margin-top: var(--wp--preset--spacing--60);
	}

	/*
	 * セクション見出しの体裁（細字・下線ルール）は page-prose.css の
	 * `.nexray-sheet__inner h2, .content-table-section__title` に一本化（DRY・#122 系）。
	 * ここでは content-table セクション固有の構造だけ持つ（見出しの margin 0 化は
	 * page-prose.css の .content-table-section__title 専用ルールが持つ＝flow 外のため。#142）。
	 * このブロック見出しは H2 出力（company-overview/officers）＝hero H1 の直下階層。
	 */

	/* --- テーブル本体 --- */
	.content-table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--wp--preset--font-size--body);
		line-height: 1.5;
	}

	/*
	 * モバイル基準：th/td を縦積み（1行ずつブロック表示）。tr が枠線を持つ。
	 * sm(600px)〜で通常の表レイアウト（見出し列 192px）へ切り替える。
	 */
	.content-table tr {
		display: block;
		padding-block: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--slate-300);
	}

	.content-table th,
	.content-table td {
		display: block;
		width: 100%;
		padding: 0;
		text-align: left;
		/*
		 * セル枠線を明示的に消す。content-table は独自ブロック（会社概要＝<table
		 * class="content-table">）だけでなく、コアのテーブルブロックに追加CSSクラス
		 * `content-table` を付けた法務ページ（例 プライバシーポリシー・マイナンバー＝
		 * <figure class="wp-block-table content-table">）でも使う。後者はコアの
		 * `.wp-block-table td,th{border:1px solid}`（@layer wp）が付くため、ここで
		 * リセットしないと top/left/right の枠が残りボックス表示になる。content-table は
		 * components 層＝層順で wp 層に勝つので !important 不要（行下線は tr〈モバイル〉／
		 * th・td の border-bottom〈≥600〉で再付与する）。
		 */
		border: 0;
	}

	.content-table th {
		margin-bottom: 4px;
		font-weight: 600;
		color: var(--wp--preset--color--primary);
	}

	.content-table td {
		font-weight: 300;
		color: var(--wp--preset--color--contrast);
	}

	/* 免許等・加盟協会など複数項目の td（#87 の複数行フィールドを ul 化）。
	 * 行頭記号なし＝移植元の <br> 区切りの見た目に寄せる。 */
	.content-table__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.content-table__list li + li {
		margin-top: 0.25em;
	}

	@media (min-width: 600px) {
		.content-table tr {
			display: table-row;
			padding-block: 0;
			border-bottom: 0;
		}

		.content-table th,
		.content-table td {
			display: table-cell;
			width: auto;
			padding: var(--wp--preset--spacing--30);
			/* ラベル（th）を内容（td）の先頭行に揃える。複数行 td（郵送先・所在地等）で
			   中央寄せだとラベルが浮くため top で統一。 */
			vertical-align: top;
			border-bottom: 1px solid var(--wp--preset--color--slate-300);
		}

		.content-table th {
			width: 192px;
			margin-bottom: 0;
			white-space: nowrap;
		}
	}
}