/* =========================================
   table / tableパーツ
========================================= */
/* =========================================
 defaultTable
 ・GutenbergのテーブルブロックでAdditional CSS classに
 　defaultTableを指定した場合、そのクラスは実際には
 　<table>本体ではなく外側の<figure class="wp-block-table">
 　に付く。そのため「.defaultTable table」も併記して
 　どちらの場合でも本体（width/border-bottom等）に
 　スタイルが当たるようにしている。
 ・WordPress core（wp-block-library）側がtd・thに
 　border:1px solid を標準で当てているため、そのままだと
 　thead/tdの四辺すべてに線が入り、縦罫（左右の線）まで
 　表示されてしまう。ここでは明示的にborder:noneで
 　打ち消し、tr側のborder-top/bottomだけが見えるようにする。
 ・Gutenbergのテーブルブロックは「ヘッダーセクション」を
 　オンにしない限りthを一切使わず、全セルがtdになる
 　（実際に確認したところ、th widthの指定が一つも効かず
 　全列tdのみだった）。そのため見出し列（1列目）用の
 　スタイルはthだけでなく td:first-child にも同じものを
 　当てて、th・tdどちらの組み方でも1列目の幅が固定される
 　ようにしている。
 ・一番下の線だけ太く(2px程度)見える不具合について：
 　実際にクラスが付くのは<figure class="wp-block-table">側
 　だけなので、border-bottomを「.defaultTable」と
 　「.defaultTable table」の両方に指定すると、外側の
 　figureと内側のtable、2つの要素それぞれの下端に
 　1pxの線が引かれ、隙間なく重なって2px相当に見えてしまう。
 　border-bottom・width・marginはfigure側（.defaultTable）
 　だけに指定し、table側には重ねない。
 　border-collapse・table-layoutは<table>要素自身にしか
 　効かないプロパティなので、こちらは引き続き
 　「.defaultTable table」側にも指定しておく。
========================================= */
.defaultTable,
.defaultTable table{
	border-collapse: collapse;
	table-layout: fixed;
	/* table-layout:autoのままだと、thにwidthを指定しても
	   セルの中身の量に応じてブラウザが列幅を再計算してしまい、
	   2列だけの表だと結果的にほぼ50%:50%になってしまう。
	   fixedにして、1行目のセル幅（th width）通りに
	   列幅を固定する。SP幅ではth/tdをdisplay:blockに
	   しているので、table-layoutの影響は受けない。 */
}
.defaultTable th,
.defaultTable td,
.defaultTable table th,
.defaultTable table td{
	border: none;
}
@media screen and (max-width: 991px) {
	.defaultTable {
		width: 100%;
		margin: 0;
		border-bottom : 1px solid var(--color-border);
	}
	.defaultTable table {
		width: 100%;
		margin: 0;
	}
	.defaultTable tr{
		border-top : 1px solid var(--color-border);
		border-bottom : 1px solid var(--color-border);
	}
	.defaultTable tr:last-child {
		border: none;
	}
	.defaultTable th,
	.defaultTable td:first-child {
		display:block;
		width:100%;
		text-align: left;
		font-size: 100%;
		line-height: 1.8;
		padding: 15px 0 5px !important;
		vertical-align: middle;
		font-weight: 400;
	}
	.defaultTable td {
		display:block;
		width:100%;
		text-align: left;
		font-size: 100%;
		line-height: 1.8;
		padding: 0 0 15px 0 !important;
		vertical-align: middle;
	}
}
@media screen and (min-width: 992px) {
	.defaultTable {
		width: 100%;
		margin: 0;
		border-bottom : 1px solid var(--color-border);
	}
	.defaultTable table {
		width: 100%;
		margin: 0;
	}
	.defaultTable tr{
		border-top : 1px solid var(--color-border);
		border-bottom : 1px solid var(--color-border);
	}
	.defaultTable tr:last-child {
		border: none;
	}
	.defaultTable th,
	.defaultTable td:first-child {
		width: 130px;
		font-size: 100%;
		line-height: 1.8;
		color: #707070;
		text-align: left;
		padding: 15px 0;
		vertical-align: middle;
	}
	.defaultTable td {
		font-size: 100%;
		line-height: 1.8;
		color: #231815;
		text-align: left;
		padding: 15px 0;
		vertical-align: middle;
	}
}
.defaultTable {
	font-size: 14px;
	line-height: 1.8;
}