/* ブログパーツ（エディタの「ブログパーツ」ボタンで挿入する囲み）。本文とエディタの両方で読み込む。 */

/* ===== 黒板（できるようになること） ===== */
.content .tz-chalkboard {
	position: relative;
	margin: 2em 0;
	padding: 40px 56px 56px;
	background: #518f78;
	border: 16px solid #dbb774;
	color: #fff;
}

.content .tz-chalkboard__title {
	margin: 0 0 16px;
	text-align: center;
	font-size: 1.35em;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
}

.content .tz-chalkboard__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tz-chalk;
}

.content .tz-chalkboard__list li {
	position: relative;
	margin: 0;
	padding: 16px 0 16px 48px;
	border-bottom: 3px solid rgba(255, 255, 255, 0.2);
	line-height: 1.7;
	color: #fff;
	counter-increment: tz-chalk;
}

.content .tz-chalkboard__list li + li {
	margin-top: 0;
}

.content .tz-chalkboard__list li::before {
	content: counter(tz-chalk);
	position: absolute;
	left: 0;
	top: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f6cf55;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}

/* 右下の黒板消し */
.content .tz-chalkboard::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 88px;
	height: 36px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 36'%3E%3Crect x='40' y='0' width='10' height='10' fill='%2366501a'/%3E%3Crect x='0' y='6' width='88' height='16' fill='%23f6d36b'/%3E%3Ccircle cx='10' cy='14' r='2.5' fill='%23356b2a'/%3E%3Ccircle cx='28' cy='14' r='2.5' fill='%23356b2a'/%3E%3Ccircle cx='62' cy='14' r='2.5' fill='%23356b2a'/%3E%3Ccircle cx='78' cy='14' r='2.5' fill='%23356b2a'/%3E%3Crect x='0' y='22' width='88' height='14' rx='4' fill='%232d5596'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width: 600px) {
	.content .tz-chalkboard {
		padding: 28px 20px 48px;
		border-width: 10px;
	}

	.content .tz-chalkboard__list li {
		padding-left: 44px;
	}

	.content .tz-chalkboard::after {
		width: 66px;
		height: 27px;
	}
}

/* ===== 箇条書き（色違い）：よくある思い込み・相手の声などを、通常の青い箇条書きと分けて見せる ===== */
.content ul.tz-list-alt {
	margin: 1.2em 0;
	padding: 20px 24px;
	list-style: none;
	background: #fdf4e3;
	border-radius: 8px;
}

.content ul.tz-list-alt > li {
	position: relative;
	margin: 0;
	padding-left: 1.6em;
	line-height: 1.7;
}

.content ul.tz-list-alt > li + li {
	margin-top: 0.6em;
}

.content ul.tz-list-alt > li::before {
	content: "";
	position: absolute;
	left: 0.4em;
	top: calc(0.85em - 3.5px);
	width: 7px;
	height: 7px;
	background: #e0a33a;
	border-radius: 50%;
}

/* ===== 吹き出し：[talk] の直後に自動で入る改行で、下に1行分の空きができるのを消す ===== */
.content .balloon + br { display: none; }