/*
 * 記事の本文の装飾。名前と寸法は現行（Cocoon）のものを実測して合わせてある。
 * 色は現行の値のまま（赤・ピンク・青などは、文章の意味に使われているため）。
 */
:root {
	--kd-red: #e60033;
	--kd-pink: #e95295;
	--kd-blue: #0095d9;
	--kd-green: #3eb370;
	--kd-black: #333;
	--kd-white: #fff;
}

/* --- 文字の飾り --- */
.bold { font-weight: 700; }
.bold-blue { font-weight: 700; color: var(--kd-blue); }
.bold-green { font-weight: 700; color: var(--kd-green); }
.green { color: var(--kd-green); }
.marker-under { background: linear-gradient(transparent 60%, #ff9 60%); }

.fz-12px { font-size: 12px; }
.fz-20px { font-size: 20px; }
.fz-24px { font-size: 24px; }
.fz-32px { font-size: 32px; }
.fz-36px { font-size: 36px; }
.fz-40px { font-size: 40px; }

/* バッジ（白い文字、色つきの背景） */
.badge-pink, .badge-blue { color: var(--kd-white); padding: 1px 5px 0; border-radius: 2px; font-size: 12px; }
.badge-pink { background-color: var(--kd-pink); }
.badge-blue { background-color: var(--kd-blue); }

/* キーボードキー（<code> の中などで使われる） */
.keyboard-key {
	padding: 1px 3px; border: 1px solid #888; border-radius: 2px;
	background-color: #f9f9f9; font-family: inherit; font-size: 0.85em;
}

/* ボタン風リンク。中のリンクは文字色を引き継ぎ、下線を消す */
[class*="inline-button-"] {
	display: inline-block; position: relative;
	padding: 7px 13px; border: 2px solid var(--kd-black); border-radius: 4px;
	background-color: var(--kd-black); color: var(--kd-white);
	/* 行の高さは、フォントによらず 20px（現行は「自動」で、書体によって高さが変わる。高さ 38px に合わせる） */
	font-size: 14px; font-weight: 700; line-height: 20px; text-align: center; text-decoration: none; cursor: pointer;
	transition: all 0.3s ease;
}
[class*="inline-button-"]:hover { opacity: 0.7; }
[class*="inline-button-"] a { color: inherit; text-decoration: none; }
.inline-button-red { border-color: var(--kd-red); background-color: var(--kd-red); }
[class*="inline-button-white-"] { border-width: 1px; background-color: transparent; }
[class*="inline-button-white-"]:hover { opacity: 0.3; }
.inline-button-white-black { color: var(--kd-black); border-color: var(--kd-black); }

/* --- ブロックの飾り --- */
/* 下の余白を 0 にする（ブロックスタイル「bottom-margin-0em」） */
.has-bottom-margin.is-style-bottom-margin-0em { margin-bottom: 0 !important; }

/* リスト: 各項目の頭に吹き出しの印（現行は Cocoon のアイコンフォント。同じ意味の図形に置き換え） */
.wp-block-list.is-style-icon-list-comment { padding: 8px 16px 8px 24px; list-style: none; }
.wp-block-list.is-style-icon-list-comment > li { position: relative; padding-left: 1.6em; list-style: none; }
.wp-block-list.is-style-icon-list-comment > li::before {
	content: ""; position: absolute; left: 0; top: 0.4em; width: 1em; height: 1em;
	background-color: #47585c;
	-webkit-mask: var(--kd-bubble) center / contain no-repeat; mask: var(--kd-bubble) center / contain no-repeat;
}

/* コメントボックス: 左に大きな吹き出しの印、枠は薄いグレーブルー */
.is-style-comment-box.has-box-style {
	position: relative; display: block; padding: 20px 20px 20px 72px;
	border: 1px solid #ccd; border-radius: 4px; background: #fefefe;
}
.is-style-comment-box.has-box-style::before {
	content: ""; position: absolute; left: 10px; top: 50%; width: 44px; height: 34px; margin-top: -17px;
	background-color: #999;
	-webkit-mask: var(--kd-bubble-line) center / 34px 34px no-repeat; mask: var(--kd-bubble-line) center / 34px 34px no-repeat;
}

:root {
	--kd-bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	--kd-bubble-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3.5h16a1.5 1.5 0 0 1 1.5 1.5v10a1.5 1.5 0 0 1-1.5 1.5h-8.3l-4.7 3.8v-3.8H4A1.5 1.5 0 0 1 2.5 15V5A1.5 1.5 0 0 1 4 3.5z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2列・3列のレイアウト（Cocoon の「カラム」ブロック）。幅 834px 以下では縦に積む */
.column-wrap { display: flex; justify-content: space-between; position: relative; margin: 0 0 0.7em; gap: 1%; }
.column-wrap > div { width: 49.5%; margin: 0; }
.column-wrap > div > :first-child { margin-top: 0; }
.column-wrap.column-3 > div { width: 32.5%; }
.column-2-3-1-2 .column-left { width: 34%; }
.column-2-3-1-2 .column-right { width: 65%; }
.column-2-3-2-1 .column-left { width: 65%; }
.column-2-3-2-1 .column-right { width: 34%; }
.column-2-4-1-3 .column-left { width: 25%; }
.column-2-4-1-3 .column-right { width: 74%; }
.column-2-4-3-1 .column-left { width: 74%; }
.column-2-4-3-1 .column-right { width: 25%; }

@media (max-width: 834px) {
	.column-wrap { flex-direction: column; }
	.column-wrap > div { width: 100%; }
}
/* 480px 以下: コメントボックスは、印を上の中央に置く */
@media (max-width: 480px) {
	.is-style-comment-box.has-box-style { padding: 28px 12px 12px; }
	.is-style-comment-box.has-box-style::before { top: 0.7em; left: 50%; width: 18px; height: 18px; margin: 0 0 0 -9px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; }
}