/* ブログ本文：見出し */
/* [blog_parts]ショートコードの出力にも post_content クラスが付くため、
   記事本文以外（p-blogParts＝CTA・フッターメニュー等）には効かないよう除外する */
.post_content:not(.p-blogParts) h2:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title) {
	background: #0e254d;
	padding: 8px 20px;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 2px;
}

.post_content:not(.p-blogParts) h2:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)::before {
	content: none;
}

.post_content:not(.p-blogParts) h3:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title) {
	background: #ebf2fa;
	padding: 10px 16px;
	color: #1a1a1a;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
	letter-spacing: 0.2px;
}

.post_content:not(.p-blogParts) h3:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)::before {
	content: none;
}

/* ブログ本文：ポイントボックス（引用ブロックにスタイル追加） */
.post_content .wp-block-quote.is-style-nextscale-point-box {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0 0 2em;
	padding: 24px 24px 24px 28px;
	border: none;
	border-left: 4px solid #0e254d;
	background: #ebf2fa;
}

.post_content .wp-block-quote.is-style-nextscale-point-box::before,
.post_content .wp-block-quote.is-style-nextscale-point-box::after {
	content: none;
}

.post_content .wp-block-quote.is-style-nextscale-point-box p {
	margin: 0;
}

.post_content .wp-block-quote.is-style-nextscale-point-box p:first-child {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: bold;
}

.post_content .wp-block-quote.is-style-nextscale-point-box p:first-child::before {
	content: "";
	flex-shrink: 0;
	width: 15px;
	height: 20px;
	background: url(../img/icon-point-box.svg) no-repeat center / contain;
}

.post_content .wp-block-quote.is-style-nextscale-point-box p:not(:first-child) {
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 2px;
}

.post_content .wp-block-quote.is-style-nextscale-point-box cite {
	display: none;
}

/* ブログ本文用テーブルスタイル「NEXTSCALE（青ヘッダー）」 */
.wp-block-table.is-style-nextscale-table table {
	table-layout: auto !important;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.wp-block-table.is-style-nextscale-table th,
.wp-block-table.is-style-nextscale-table td {
	border: 1px solid #f6f6f6;
	text-align: center;
	vertical-align: middle;
}

/* ヘッダー行：core/tableで「ヘッダーを含める」がOFF（theadなし）の場合も、1行目を同じ見た目にする */
.wp-block-table.is-style-nextscale-table thead th,
.wp-block-table.is-style-nextscale-table tbody tr:first-child td {
	padding: 16.5px 17px;
	background: #1659ca;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: normal;
}

/* 1列目：文字数に応じて幅を可変にし、左右中央配置のまま余白のみ詰める
   （エディタで1列目のセルだけ「ヘッダーセル」指定にしている記事があり、その場合は
   　td ではなく th になるため :is(td, th) で両方に効かせる） */
.wp-block-table.is-style-nextscale-table thead th:first-child,
.wp-block-table.is-style-nextscale-table tbody tr:first-child :is(td, th):first-child,
.wp-block-table.is-style-nextscale-table tbody :is(td, th):first-child {
	width: 1% !important;
	white-space: nowrap;
	padding-inline: 16px;
}

.wp-block-table.is-style-nextscale-table thead th:nth-child(2),
.wp-block-table.is-style-nextscale-table thead th:nth-child(3),
.wp-block-table.is-style-nextscale-table thead th:nth-child(4),
.wp-block-table.is-style-nextscale-table tbody td:nth-child(2),
.wp-block-table.is-style-nextscale-table tbody td:nth-child(3),
.wp-block-table.is-style-nextscale-table tbody td:nth-child(4) {
	width: 28.09% !important;
}

/* 5列以上（データ列4つ以上）のテーブル：%指定では収まりきらず文字が縦崩れするため、
   列ごとに一定幅を持たせてPCでも横スクロールで見せる（列数が増えても崩れないようにする） */
.wp-block-table.is-style-nextscale-table:has(tr td:nth-child(5)) {
	overflow-x: auto;
}

.wp-block-table.is-style-nextscale-table:has(tr td:nth-child(5)) table {
	width: auto;
	min-width: 100%;
}

.wp-block-table.is-style-nextscale-table:has(tr td:nth-child(5)) thead th:nth-child(n + 2),
.wp-block-table.is-style-nextscale-table:has(tr td:nth-child(5)) tbody td:nth-child(n + 2) {
	width: 250px !important;
	white-space: normal;
}

.wp-block-table.is-style-nextscale-table tbody td {
	padding: 16px 17px;
	color: #1a1a1a;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 2px;
}

.wp-block-table.is-style-nextscale-table tbody :is(td, th):first-child {
	font-size: 16px;
	font-weight: bold;
}

.wp-block-table.is-style-nextscale-table tbody tr:nth-child(even) {
	background: #fff;
}

.wp-block-table.is-style-nextscale-table tbody tr:nth-child(odd) {
	background: #ebf2fa;
}

@media (max-width: 767px) {
	.wp-block-table.is-style-nextscale-table {
		overflow-x: auto;
	}

	/* 横スクロールが発生するテーブル（3列・4列）にのみ、スクロールできることを示すヒントを表示 */
	.wp-block-table.is-style-nextscale-table:has(table tr td:nth-child(3))::after {
		content: "→ 横にスクロールできます";
		display: block;
		margin-top: 8px;
		color: #666;
		font-size: 12px;
		text-align: center;
	}

	/* 列数に応じて必要なmin-widthを確保し、幅の合計がコンテナ幅を超える場合は
	   縮小させず横スクロールさせる（3列テーブル＝データ列2つ、4列テーブル＝データ列3つ） */
	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)):not(:has(tr td:nth-child(4))) {
		min-width: 600px;
	}

	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(4)) {
		min-width: 850px;
	}

	/* 2列目以降：3列以上のテーブル（横スクロールあり）はスマホ時250px幅にする（max-widthはtable-layout:auto時にセルへ効かないため使わない）
	   nth-child(n+2)で2列目以降すべてを対象にし、5列目以降が増えても幅指定漏れが起きないようにする */
	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) thead th:nth-child(n + 2),
	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) tbody td:nth-child(n + 2) {
		width: 250px !important;
	}

	/* 1列目：3列・4列テーブルは横スクロール時も文字が見えるよう幅を詰めて固定表示(sticky)にする
	   （1列目が th になっている記事もあるため :is(td, th) で両方に効かせる） */
	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) thead th:first-child,
	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) tbody tr:first-child :is(td, th):first-child,
	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) tbody :is(td, th):first-child {
		width: 100px !important;
		white-space: normal;
		padding-inline: 6px;
		position: sticky;
		left: 0;
		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
	}

	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) thead th:first-child {
		z-index: 2;
	}

	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) tbody :is(td, th):first-child {
		z-index: 1;
	}

	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) tbody tr:nth-child(odd) :is(td, th):first-child {
		background: #ebf2fa;
	}

	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) tbody tr:nth-child(even) :is(td, th):first-child {
		background: #fff;
	}

	/* 1行目（見出し行）の左上マスは縞模様よりブルーを優先させる */
	.wp-block-table.is-style-nextscale-table table:has(tr td:nth-child(3)) tbody tr:first-child :is(td, th):first-child {
		background: #1659ca;
	}

	/* 2列テーブル（横スクロール不要）：固定表示にせず、読みやすい幅で左右に配分する */
	.wp-block-table.is-style-nextscale-table table:not(:has(tr td:nth-child(3))) thead th:first-child,
	.wp-block-table.is-style-nextscale-table table:not(:has(tr td:nth-child(3))) tbody tr:first-child :is(td, th):first-child,
	.wp-block-table.is-style-nextscale-table table:not(:has(tr td:nth-child(3))) tbody :is(td, th):first-child {
		width: 38% !important;
		white-space: normal;
		padding-inline: 12px;
	}

	.wp-block-table.is-style-nextscale-table table:not(:has(tr td:nth-child(3))) thead th:nth-child(2),
	.wp-block-table.is-style-nextscale-table table:not(:has(tr td:nth-child(3))) tbody td:nth-child(2) {
		width: 62% !important;
	}
}