/*
 * 介護保険の訪問介護と保険外サービスの比較表（.clover-compare）— /kaigonomikata/ と /otoshiyorinomikata/ の本文に在る
 *
 * なぜ: 表はテーマの料金表（.price-table）の見た目を借りているが、テーマのスマホ用の CSS（640px 以下）は
 *   料金表のセルを「中央揃え・折り返さない」にしており、文の長いこの表は 360px で幅 1,967px になった（2026-10-30 実測）。
 *   PC 幅でもセルは中央揃え。この枠の中だけを上書きする。
 * !important の理由: スマホ用の th の指定は /otoshiyorinomikata/ で #home-helper03 の ID 付きで出ており、
 *   クラスだけでは詳細度で勝てない。射程は .clover-compare の中だけ（既存の .price-table1〜3 には及ばない）。
 */
.clover-compare .table-body { overflow-x: visible !important; }
.clover-compare table { width: 100%; table-layout: fixed; }
.clover-compare th,
.clover-compare td {
	white-space: normal !important;
	text-align: left !important;
	vertical-align: top;
	line-height: 1.7;
	word-break: auto-phrase; /* 文節で折る（対応するブラウザだけ。ほかは今まで通り） */
	overflow-wrap: anywhere;
}
.clover-compare .clover-compare__head th { text-align: center !important; vertical-align: middle; }
.clover-compare .clover-compare__head th:first-child { width: 8.5em; }
.clover-compare tbody th[scope="row"] { white-space: nowrap !important; }

/* 見出しは中央寄せ＝文節（<wbr>）でだけ折る */
.clover-compare h3.title { word-break: keep-all; overflow-wrap: anywhere; }

/* 表の上の 1 文（地の文として置く。箱にしない） */
.clover-compare .clover-compare__lead { margin: 0 0 1em; line-height: 1.8; word-break: auto-phrase; }

/* 見出し行の「項目」は読み上げだけに出す（目には空のセル） */
.clover-compare .clover-compare__sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* スマホ: 3 列は狭い。行ごとに「項目 → 介護保険 → 保険外」の順に縦に積む。
   640px はテーマのスマホ用の切り替え（style.css の max-width: 640px が 45 件・641px 以上で PC 用）に合わせた。
   表の役割は HTML 側の role で保つ（display:block で表の意味が落ちるブラウザがある） */
@media screen and (max-width: 640px) {
	.clover-compare table,
	.clover-compare thead,
	.clover-compare tbody,
	.clover-compare tr,
	.clover-compare th,
	.clover-compare td { display: block; width: auto !important; }
	.clover-compare .clover-compare__head { display: none; }
	.clover-compare tbody th[scope="row"] { white-space: normal !important; margin-top: 1em; }
	.clover-compare tbody tr:first-child th[scope="row"] { margin-top: 0; }
	.clover-compare td::before {
		content: attr(data-label);
		display: block;
		font-weight: bold;
		margin-bottom: 0.2em;
	}
}