/**
 * Convention Theme Custom Styles
 *
 * @package ConventionTheme
 * @since 1.0.0
 */

/* ==========================================================================
   ヒーローセクション - レイヤー画像システム
   ========================================================================== */

.hero-section {
	position: relative;
	width: 100%;
	min-height: 740px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* 背景レイヤー */
.layer-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.layer-background .layer-image {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* TOPイメージ（カスタマイザーでサイズ・トリミング制御） */
.top-image-wrapper {
	overflow: hidden;
	position: relative;
	/* width / height はカスタマイザー設定によりインラインスタイルで上書き */
}

.top-image-wrapper img {
	display: block;
	/* margin-top / margin-left / width / height はカスタマイザー設定によりインラインスタイルで上書き */
}


/* ==========================================================================
   新着情報セクション
   ========================================================================== */

.news-section {
	background-color: #fff;
	position: relative;
	z-index: 50;
	margin-top: 0;
	border-radius: 0;
	box-shadow: none;
}

.news-section .list-group-item {
	border-left: none;
	border-right: none;
	transition: background-color 0.2s ease;
}

.news-section .list-group-item:hover {
	background-color: #f8f9fa;
}

.news-section .list-group-item a {
	color: #212529;
	font-weight: 500;
	transition: color 0.2s ease;
}

.news-section .list-group-item a:hover {
	color: #007bff;
}

.news-section .badge {
	font-weight: normal;
	padding: 0.5em 0.75em;
}

/* ==========================================================================
   ウィジェットエリア
   ========================================================================== */

.widget-area {
	color: #fff !important;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.widget-area.p-3 {
	padding: 0.75rem !important;
	/* サイドメニューの各ボタンが角丸なしの矩形なので合わせる */
	border-radius: 0;
}

.widget-area .widget {
	padding-bottom: 1rem;
	border-bottom: 1px solid #333;
	color: #fff !important;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.widget-area .widget:last-child {
	border-bottom: none;
}

.widget-area .widget-title,
.widget-area h2,
.widget-area h3,
.widget-area h4,
.widget-area h5 {
	color: #fff !important;
	font-size: 1.1rem;
	font-weight: 600;
}

.widget-area ul {
	list-style: none;
	padding-left: 0;
}

.widget-area ul li {
	padding: 0.4rem 0;
	color: #e0e0e0 !important;
}

.widget-area a,
.widget-area a:link,
.widget-area a:visited {
	color: #e0e0e0 !important;
	text-decoration: none;
	transition: color 0.2s ease;
}

.widget-area a:hover,
.widget-area a:focus,
.widget-area a:active {
	color: #fff !important;
	text-decoration: underline;
}

/* 検索フォーム */
.widget_search .search-form,
.wp-block-search {
	margin-bottom: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100%;
}

/* 検索ラベルを視覚的に非表示 */
.wp-block-search__label {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.widget_search .search-form input[type="search"],
.wp-block-search__input {
	background-color: #fff;
	border-color: #ddd;
	color: #333;
	height: 3em;
	padding: 0.375rem 0.75rem;
	border-radius: 5px;
	flex: 1;
	min-width: 0;
}

.widget_search .search-form input[type="search"]::placeholder,
.wp-block-search__input::placeholder {
	color: #999;
}

.widget_search .search-form input[type="search"]:focus {
	background-color: #333;
	border-color: #007bff;
	color: #fff;
}

.widget_search .search-form .btn,
.wp-block-search__button {
	height: 3em;
	padding: 0.375rem 1rem;
	border-radius: 5px;
	min-width: 5em;
	flex-shrink: 0;
	white-space: nowrap;
}

/* ==========================================================================
   記事・ページコンテンツ
   ========================================================================== */

.site-main:not(.front-page),
.site-main.front-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* 本文を載せる白い面。
   検索結果なし(.no-results)と 404(.error-404-content) も同じ扱いにする。
   これらは専用テンプレートを持たず index.php / 404.php が直接
   div を書いているため、対象に含めないと背景も余白も付かず
   見出しが画面の端に張り付く。 */
article,
.post,
.page-content,
.entry-content,
.no-results,
.error-404-content {
	background-color: #fff;
	padding: 2em;
	margin: 0;
	margin-top: 0;
}

.entry-header {
	margin-bottom: 1em;
	background-color: #fff;
	padding: 2em;
	padding-bottom: 0;
}

.entry-title {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.entry-meta {
	color: #666;
	font-size: 0.9rem;
	display: flex;
	gap: 1rem;
}

.entry-content {
	line-height: 1.8;
	margin-bottom: 2em;
}

.entry-content p {
	font-size: 1.1rem;
}

.entry-content h2 {
	font-size: 1.4rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #e0e0e0;
}

.entry-content h3 {
	font-size: 1.3rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.entry-content h4 {
	font-size: 1.2rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.entry-content h5,
.entry-content h6 {
	font-size: 1.1rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

/* 列数の多い表は、表の中だけで横に送る。
   ページごと横に伸ばすと、狭い画面で本文全体が崩れる。 */
.entry-content .wp-block-table {
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.entry-content table th,
.entry-content table td {
	padding: 0.75rem;
	border: 1px solid #e0e0e0;
	text-align: left;
}

.entry-content table th {
	background-color: #f5f5f5;
	font-weight: bold;
}

.entry-content table th:first-child,
.entry-content table td:first-child {
	width: 25%;
}

/* ==========================================================================
   ボタン
   ========================================================================== */

.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: #007bff;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #0056b3;
	color: #fff;
}

/* ==========================================================================
   パンくずリスト
   ========================================================================== */

.breadcrumb {
	padding: 1rem 2rem;
	margin-bottom: 0;
	font-size: 0.9rem;
	color: #fff;
	background-color: #1a1a1a;
}

.breadcrumb a {
	color: #e0e0e0;
	text-decoration: none;
}

.breadcrumb a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
   ページネーション
   ========================================================================== */

.pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 1rem;
	background-color: #f5f5f5;
	color: #333;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background-color: #007bff;
	color: #fff;
}

/* ==========================================================================
   404エラーページ
   ========================================================================== */

.error-404-content {
	text-align: center;
	/* 上下は広めに取るが、左右は白い面の余白（2em）をそのまま活かす。
	   以前は padding: 3rem 0 として左右を打ち消していた。 */
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.error-404-content h1 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: #d9534f;
}

.error-404-search {
	margin-top: 2rem;
	text-align: left;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

/* タブレット表示 (Bootstrap lg breakpoint) */
@media (max-width: 991.98px) {
	.hero-section {
		min-height: 500px;
	}

	.layer-background .layer-image {
		height: auto;
	}


}

/* モバイル表示 (Bootstrap md breakpoint) */
@media (max-width: 767.98px) {
	.hero-section {
		min-height: 400px;
	}

	.layer-background .layer-image {
		height: auto;
	}


	.entry-title {
		font-size: 1.5rem;
	}

	.entry-content table {
		font-size: 0.9rem;
	}
}

/* 小型モバイル表示 (Bootstrap sm breakpoint) */
@media (max-width: 575.98px) {
	.hero-section {
		min-height: 350px;
	}

	.layer-background .layer-image {
		height: auto;
	}


	.entry-title {
		font-size: 1.3rem;
	}

	.btn {
		width: 100%;
		text-align: center;
	}
}

/* 極小モバイル表示 (450px以下) */
@media (max-width: 450px) {
	article,
	.post,
	.page-content,
	.entry-content {
		padding: 1em;
	}

	.entry-header {
		padding: 1em;
		padding-bottom: 0;
	}
}

/* ==========================================================================
   ページの先頭へ戻るボタン

   これまで CSS が一切なく、JS が <body> 末尾に追加した素のボタンが
   通常フローのまま左下に表示されていた。画面右下に固定する。

   サイドメニューが角丸なしの矩形なので、真円のボタンは浮く。
   角丸を控えめ（12px）にして矩形の印象を残しつつ、
   半透明＋背景ぼかしで本文の上に載せても読みを妨げないようにする。
   ========================================================================== */

.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1030;

	/* 44px 以上。指で確実に押せる大きさを確保する */
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	background-color: rgba(26, 26, 26, 0.82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	color: #fff;
	cursor: pointer;

	/* 非表示時。visibility も切ってキーボード操作の対象から外す */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease,
	            visibility 0.2s, background-color 0.2s ease, box-shadow 0.2s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background-color: #007bff;
	border-color: rgba(255, 255, 255, 0.35);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
	transform: translateY(-2px);
}

.back-to-top:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.back-to-top:active {
	transform: translateY(0);
}

.back-to-top__icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 画面が狭いときは端に寄せて本文の邪魔をしない */
@media (max-width: 767.98px) {
	.back-to-top {
		right: 16px;
		bottom: 16px;
		width: 44px;
		height: 44px;
		border-radius: 10px;
	}

	.back-to-top__icon {
		width: 18px;
		height: 18px;
	}
}

/* 動きを減らす設定のときは移動させない */
@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: opacity 0.01ms, visibility 0.01ms;
		transform: none;
	}

	.back-to-top.is-visible,
	.back-to-top:hover,
	.back-to-top:focus-visible,
	.back-to-top:active {
		transform: none;
	}
}

/* ==========================================================================
   新着情報の要約（本文の1行目）

   タイトルの次の行に置く。同じ行に流すと、要約が長い投稿で
   タイトルとの境界が分からなくなる。
   ========================================================================== */

.news-section .news-summary {
	margin-top: 0.2em;
}

/* ==========================================================================
   見出しとサイト識別子の既定スタイル

   これまで管理画面の「追加CSS」（DB側）に置かれていた指定をテーマに移した。
   DB に置くとテーマを別環境に入れたときに失われ、Git の履歴にも残らない。

   注意: 元の記述には行頭 # でコメントアウトしたつもりの行が含まれていたが、
   CSS のコメントは / * * / で、# は ID セレクタである。
   不正な宣言として読み飛ばされていたため実害は無かったが、
   ここでは正しい記法に直したうえで、無効だった記述は取り込まない。
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	width: 100%;
}

/* 本文の H1（ページタイトル）
   薄い下罫線に、左端だけアクセント色を重ねる。

   以前は 1em 幅の黒い正方形を左に置いていたが、
   箱が文字より背が高く、視線が文字より先に箱へ向かっていた。
   罫線を細くしてアクセントを短く置くことで、主役を文字に戻す。

   色はカスタマイザーの「メインカラー」に追従する。 */
.site-main h1 {
	border-left: none;
	padding-left: 0;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 0.45em;
	margin-bottom: 1.4em;
	position: relative;
}

.site-main h1::after {
	content: "";
	position: absolute;
	left: 0;
	/* 下罫線(1px)に重ねる。1px 下げると罫線を覆って途切れて見える */
	bottom: -2px;
	width: 2.8em;
	height: 3px;
	background-color: var( --convention-primary, #007bff );
}

/* 本文の H2 / H3 も H1 と同じ考え方に揃える。
   濃い全幅の下罫線をやめ、薄い罫線の左端にアクセントを短く重ねる。
   アクセントは H1 より細く短くして、見出しの階層が分かるようにする。

   H1 が 3px x 2.8em、H2/H3 は 2px x 2.2em。

   対象を .site-main に限定する。素の h2 / h3 に当てると
   サイドバーのウィジェット見出しにも罫線が付いてしまう。 */
.site-main h2,
.site-main h3 {
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 0.35em;
	position: relative;
}

.site-main h2::after,
.site-main h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 2.2em;
	height: 2px;
	background-color: var( --convention-primary, #007bff );
}

/* サイトタイトルと説明文は本文とは別の書体を当てる。
   Web フォントは配信元がドメインで制限しており、登録外のドメインや
   ローカル環境では 404 になる。読めなかったときにブラウザ既定の
   書体（多くは明朝/Times）へ落ちないよう、同系統の代替を並べる。 */
/* サイトタイトル
   書体名自体が Bold だが、配信元の @font-face は font-weight: 1 1000 を
   宣言しており可変フォントとして扱われる。そのため 900 を指定すると
   実際にさらに太く描画され、TOPイメージ内のロゴより太くなっていた。
   1段階下げて画像側の太さに合わせる。 */
h1.site-title {
	font-family: "MFW-UDShinGoPr6N-Bold", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif !important;
	font-weight: 800 !important;
}

p.site-description {
	font-family: "MFW-PA1MinchoStdN-Bold", "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif;
	font-weight: 400 !important;
}

nav {
	font-family: "MFW-UDShinGoPr6N-Regular", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
	font-weight: 600 !important;
}

/* ==========================================================================
   新着情報の日付カラム

   日付を左、内容を右に置く2カラム。日付は固定幅で桁を揃える。
   ========================================================================== */

.news-section .news-date {
	width: 9em;
	flex-shrink: 0;
}

/* 狭い画面では日付を内容の上に積む。
   横並びのまま固定幅 9em を確保すると、iPhone SE (375px) では
   本文に 200px ほどしか残らず、10文字程度で折り返してしまう。 */
@media (max-width: 575.98px) {
	.news-section .list-group-item .d-flex {
		flex-direction: column;
	}

	.news-section .news-date {
		width: auto;
		margin-bottom: 0.25em;
	}
}

/* ==========================================================================
   角丸の統一

   サイドメニューの各ボタンが角丸なしの矩形なのに対し、
   検索欄・検索ボタンが 5px で不揃いだった。矩形に揃える。
   （ウィジェット枠は .widget-area.p-3 の定義側で 0 にしている）
   ========================================================================== */

.wp-block-search__input,
.wp-block-search__button {
	border-radius: 0;
}

/* ==========================================================================
   新着情報の内容幅

   Bootstrap の .container は 540/720/960/1140px と段階的な max-width を持つため、
   画面幅が増えても内容幅が追従せず、左右に大きな余白ができていた。
   実測（画面825px）で新着情報は左右53px、フッターは32px と左端が揃っていなかった。

   固定ページ本文（.entry-content の padding: 2em）とフッター（32px）に合わせ、
   段階的な max-width をやめて余白を一定にする。
   ========================================================================== */

/* 余白は外側のセクションだけに持たせる。
   内側の .container にも padding を残すと、container-fluid の 12px と
   二重にかかって左端がフッターと 12px ずれる。 */
.news-section {
	padding-left: 2em;
	padding-right: 2em;
}

.news-section .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* 狭い画面では余白を詰めて本文の幅を稼ぐ */
@media (max-width: 575.98px) {
	.news-section {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ==========================================================================
   本文の左右余白

   article と .entry-content の両方に padding: 2em が当たっており、
   .entry-content は article の中に入るため左右の余白が二重にかかっていた。
   実測（画面360px）で本文に使えるのは 264px しかなく、
   画面の 27% が余白に消えていた。

   余白は外側の article 側だけに持たせる。
   ========================================================================== */

article .entry-content,
article .entry-header,
article .page-content,
.post .entry-content,
.post .entry-header {
	padding-left: 0;
	padding-right: 0;
}

/* 狭い画面では外側の余白も詰めて本文の幅を稼ぐ。
   上の指定は詳細度が高いため、内側が再び余白を持つことはない。 */
@media (max-width: 575.98px) {
	/* 白い本文カード（article）を画面いっぱいに広げる。
	   style.css のモバイル指定で .site-main にも padding: 1rem が付いており、
	   article の余白と合わせて左右に二重にかかっていた。 */
	.site-main {
		padding-left: 0;
		padding-right: 0;
	}

	article,
	.post,
	.page-content,
	.entry-content,
	.entry-header,
	.no-results,
	.error-404-content {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ==========================================================================
   ブロックエディタのボタン

   WordPress コアの既定は border-radius: 9999px で完全な楕円になる。
   テーマの .btn は 4px なので揃える。
   コア側は .wp-block-button__link（詳細度 0-1-0）で指定してくるため、
   確実に上回るよう親クラスを含めた 0-2-0 で指定する。
   ========================================================================== */

.wp-block-button .wp-block-button__link {
	border-radius: 4px;
}

/* ==========================================================================
   ボタンの操作フィードバック

   ブロックエディタのボタンには hover / focus / active がひとつも
   定義されておらず、押せる要素だと分かりにくかった。
   （transition: all は指定されていたが、変化する値が無く何も起きなかった）

   - hover  : 見た目をはっきり変えて押せることを示す
   - focus-visible : キーボード操作時のみ枠を出す。マウス操作では出さない
   - active : 押し込みを1px の沈み込みで表す
   - transition は all ではなく対象を明示する（レイアウトを動かさないため）
   ========================================================================== */

.wp-block-button__link {
	cursor: pointer;
	transition: background-color 0.2s ease,
	            border-color 0.2s ease,
	            color 0.2s ease,
	            transform 0.1s ease,
	            box-shadow 0.2s ease;
}

/* 塗りつぶし（既定）: 配色を問わず効くよう明度を落とす */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	filter: brightness(0.88);
}

/* 輪郭線: 背景を塗って文字を反転させる。輪郭ボタンの定石 */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #333;
	border-color: #333;
	color: #fff;
}

/* キーボード操作時のみ枠を出す。
   :focus ではなく :focus-visible を使い、マウスクリック後に
   枠が残って見えるのを避ける。 */
.wp-block-button__link:focus-visible {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

/* テーマ独自の .btn にも同じ操作感を与える */
.btn {
	cursor: pointer;
	transition: background-color 0.2s ease,
	            transform 0.1s ease,
	            box-shadow 0.2s ease;
}

.btn:focus-visible {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

.btn:active {
	transform: translateY(1px);
}

/* 動きを減らす設定のときは沈み込みを行わない */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.btn {
		transition: background-color 0.01ms, color 0.01ms;
	}

	.wp-block-button__link:active,
	.btn:active {
		transform: none;
	}
}

/* ==========================================================================
   404ページの検索フォーム

   見出し・入力欄・ボタンがいずれも margin 0 で完全に密着していた。

   Bootstrap の .input-group は入力欄とボタンを「隙間なく連結する」ための
   仕組みで、横並びを前提に角丸も内側だけ落とす。
   ここでは双方が全幅になって折り返し、縦積みになるため、
   連結の前提が崩れて間隔ゼロのまま重なって見えていた。

   横並びに戻すより、404 の導線としては縦積みのほうが押しやすい。
   連結を前提にせず、明示的な縦並びと間隔を与える。
   ========================================================================== */

.error-404-search h2 {
	margin-bottom: 0.9rem;
}

.error-404-search .input-group {
	flex-direction: column;
	gap: 0.75rem;
}

/* 縦積みでは .input-group が内側の角だけ落とすため、
   ボタンの左側だけ角が立つなど不揃いになる。全体を揃え直す。 */
.error-404-search .input-group > .form-control,
.error-404-search .input-group > .btn {
	width: 100%;
	border-radius: 4px;
}

/* 検索フォームとトップページへの導線の間も詰まっていた */
.error-404-home-link {
	margin-top: 2rem;
}

/* ==========================================================================
   表の見せ方（テーブルブロックの設定）

   ブロックの設定「表の見せ方」で付くクラス。
   問い合わせ先のような説明の表を、罫線に囲まれた「データの表」に
   見せないためのもの。

   セレクタを 2 通り書いているのは、クラスの付く場所が違うため。
   表示側は figure（.wp-block-table）に付き、編集画面では
   ブロックの外枠に付いて figure はその中に入る。
   ========================================================================== */

/* 罫線なし。項目名と値を、線ではなく余白で分ける */
.wp-block-table.convention-table--plain th,
.wp-block-table.convention-table--plain td,
.convention-table--plain .wp-block-table th,
.convention-table--plain .wp-block-table td {
	border: 0;
}

.wp-block-table.convention-table--plain th,
.convention-table--plain .wp-block-table th {
	background: transparent;
	font-weight: 400;
}

/* 左端は本文の頭に揃える。1 文字ぶん内側に入ると、
   前後の段落と行の始まりがずれて見える。 */
.wp-block-table.convention-table--plain tr > *:first-child,
.convention-table--plain .wp-block-table tr > *:first-child {
	padding-left: 0;
	padding-right: 1.5em;
}

/* 横線だけ。行が多い表で、縦線の格子がうるさいときに */
.wp-block-table.convention-table--rows th,
.wp-block-table.convention-table--rows td,
.convention-table--rows .wp-block-table th,
.convention-table--rows .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--convention-color-border);
}

.wp-block-table.convention-table--rows th,
.convention-table--rows .wp-block-table th {
	background: transparent;
}

/* 1 列目の幅。値はクラスで持ち、幅の指定は 1 つにまとめる */
.convention-table--head-6em  { --convention-table-head: 6em; }
.convention-table--head-8em  { --convention-table-head: 8em; }
.convention-table--head-10em { --convention-table-head: 10em; }
.convention-table--head-12em { --convention-table-head: 12em; }
.convention-table--head-25   { --convention-table-head: 25%; }
.convention-table--head-30   { --convention-table-head: 30%; }

.wp-block-table[class*="convention-table--head-"] tr > *:first-child,
[class*="convention-table--head-"] .wp-block-table tr > *:first-child {
	width: var(--convention-table-head);
}

/* 行の間隔を広げる。項目が少ない表を 1 行ずつ読ませたいとき */
.wp-block-table.convention-table--roomy th,
.wp-block-table.convention-table--roomy td,
.convention-table--roomy .wp-block-table th,
.convention-table--roomy .wp-block-table td {
	padding-top: 1em;
	padding-bottom: 1em;
}