/*
 * コレホシッ★ 記事パーツ（公開ページと編集画面の両方で読み込む）
 * ブランド色: 青 #59c2d8 ／ 赤 #ff5267 ／ 黄 #ffdf4d
 *
 * 編集画面では iframe の中にそのまま読み込まれる（.editor-styles-wrapper で囲まれない）ので、
 * .bodyText に頼らない書き方にしている。
 */

:root {
	--kh-blue: #59c2d8;
	--kh-blue-dark: #0e4d5a;
	--kh-blue-pale: #eef8fb;
	--kh-red: #ff5267;
	--kh-red-pale: #fff0f2;
	--kh-yellow: #ffdf4d;
	--kh-yellow-pale: #fffbe6;
	--kh-line: #cfe3e8;
}

/* ---------- マーカー ----------
 * 既存記事の <span class="marker-animation">（旧 Marker Animation。371 か所）と、書式 kh/marker の出力。
 * 旧プラグインの設定（色 #ffdf4d・太さ .6em・太字）に合わせた、動かない蛍光ペン。
 */
.marker-animation,
.kh-marker {
	background: linear-gradient(transparent 40%, var(--kh-yellow) 40%);
	font-weight: bold;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------- ポイント・注意・メモ（kh/box） ---------- */
.kh-box {
	--kh-box-color: var(--kh-blue);
	--kh-box-bg: var(--kh-blue-pale);
	position: relative;
	margin: 2em 0;
	padding: 1.2em 1.4em 1.3em;
	border: 2px solid var(--kh-box-color);
	border-radius: 12px;
	background: var(--kh-box-bg);
}
.kh-box--caution {
	--kh-box-color: var(--kh-red);
	--kh-box-bg: var(--kh-red-pale);
}
.kh-box--memo {
	--kh-box-color: #e0b800;
	--kh-box-bg: var(--kh-yellow-pale);
}
.kh-box__title {
	display: flex;
	align-items: center;
	gap: .5em;
	width: 100%;
	margin: 0 0 .6em !important;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kh-box-color);
	font-size: 1.05em;
	font-weight: bold;
	line-height: 1.5;
}
.kh-box--memo .kh-box__title {
	color: #8a6d00;
}
.kh-box__title::before {
	content: "✓";
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--kh-box-color);
	color: #fff;
	font-size: .85em;
	line-height: 1;
}
.kh-box--caution .kh-box__title::before {
	content: "!";
}
.kh-box--memo .kh-box__title::before {
	content: "i";
	font-style: italic;
	font-family: Georgia, serif;
}
/* 編集画面: 見出しの入力欄（textarea） */
textarea.kh-box__title {
	resize: none;
	font-family: inherit;
	box-shadow: none;
}
.kh-box__body > :first-child {
	margin-top: 0 !important;
}
.kh-box__body > :last-child {
	margin-bottom: 0 !important;
}
.kh-box__body p {
	margin: .8em 0;
}
.kh-box__body ul,
.kh-box__body ol {
	margin: .5em 0;
}

/* ---------- 表（本体の表ブロック） ---------- */
/* 既存の表（4 個）はすべて見出し行（thead）が無いので、表全体を読みやすくする基本の形 */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}
.wp-block-table th,
.wp-block-table td {
	padding: .6em .8em;
	border: 1px solid var(--kh-line);
	line-height: 1.6;
	vertical-align: top;
	word-break: break-word;
}
.wp-block-table thead th {
	background: rgba(89, 194, 216, .12);
	color: var(--kh-blue-dark);
	font-weight: bold;
	border-bottom: 2px solid var(--kh-blue);
}
.wp-block-table:not(.is-style-stripes) tbody tr:nth-child(even) td {
	background: #fafdfe;
}
/* 見出し行が無い表は、1 行目を見出し行と同じ見た目にする（年中行事の表 = is-style-regular は除く） */
.wp-block-table:not(.is-style-regular) table:not(:has(thead)) tbody tr:first-child td {
	background: rgba(89, 194, 216, .12);
	color: var(--kh-blue-dark);
	font-weight: bold;
	border-bottom: 2px solid var(--kh-blue);
}
.wp-block-table figcaption,
.wp-block-table .wp-element-caption {
	margin: .5em 0 0;
	color: #666;
	font-size: .85em;
}

/* 比較表（ブロックスタイル kh-compare）: 1 行目と 1 列目を見出しの色に */
.wp-block-table.is-style-kh-compare table {
	min-width: 480px;
}
.wp-block-table.is-style-kh-compare thead th,
.wp-block-table.is-style-kh-compare table:not(:has(thead)) tbody tr:first-child td {
	background: var(--kh-blue);
	color: #fff;
	border-color: var(--kh-blue);
	text-align: center;
}
.wp-block-table.is-style-kh-compare tbody th,
.wp-block-table.is-style-kh-compare tbody td:first-child {
	background: var(--kh-blue-pale);
	color: var(--kh-blue-dark);
	font-weight: bold;
	white-space: nowrap;
}
.wp-block-table.is-style-kh-compare thead th:first-child:empty,
.wp-block-table.is-style-kh-compare table:not(:has(thead)) tbody tr:first-child td:first-child:empty {
	background: transparent;
	border-color: transparent transparent var(--kh-line) transparent;
}
@media (max-width: 600px) {
	.wp-block-table.is-style-kh-compare tbody td:first-child {
		white-space: normal;
	}
}

/* ---------- お客様の声（core/quote のブロックスタイル kh-voice） ---------- */
.wp-block-quote.is-style-kh-voice {
	position: relative;
	margin: 2em 0;
	padding: 1.4em 1.4em 1.2em 3.2em;
	border: 0;
	border-radius: 12px;
	background: var(--kh-yellow-pale);
	font-style: normal;
}
.wp-block-quote.is-style-kh-voice::before {
	content: "“";
	position: absolute;
	top: .1em;
	left: .35em;
	color: var(--kh-yellow);
	font-family: Georgia, serif;
	font-size: 3.6em;
	line-height: 1;
}
.wp-block-quote.is-style-kh-voice p {
	margin: 0 0 .6em;
}
.wp-block-quote.is-style-kh-voice cite {
	display: block;
	margin-top: .6em;
	color: #666;
	font-size: .85em;
	font-style: normal;
	text-align: right;
}
.wp-block-quote.is-style-kh-voice cite::before {
	content: "― ";
}

/* ---------- 枠付きの画像（core/image のブロックスタイル kh-frame） ---------- */
.wp-block-image.is-style-kh-frame img {
	padding: 6px;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.wp-block-image.is-style-kh-frame figcaption {
	color: #666;
	font-size: .85em;
	text-align: center;
}