/**
 * 旧テーマ互換：cast-box
 *
 * C案：薄い背景＋左アクセントライン
 *
 * このCSSは、meri_legacy_cast_box_enabled が有効な場合だけ
 * PHP側から読み込まれる。bodyクラスには依存しない。
 */

.post_content .cast-box {
	position: relative !important;
	box-sizing: border-box !important;
	width: 100% !important;

	margin: 1.5em 0 !important;

	padding-top:
		var(--meri-legacy-cast-pad-y, 30px)
		!important;

	padding-right:
		var(--meri-legacy-cast-pad-x, 20px)
		!important;

	padding-bottom:
		var(--meri-legacy-cast-pad-y, 30px)
		!important;

	/*
	 * 通常の左右余白に、
	 * アクセントライン用の余白を追加
	 */
	padding-left:
		calc(
			var(--meri-legacy-cast-pad-x, 20px)
			+ 18px
		)
		!important;

	/*
	 * 旧ストライプ背景を廃止して、
	 * 単色背景に変更
	 */
	background-color:
		var(--meri-legacy-cast-bg, #f7f7f5)
		!important;

	background-image: none !important;
	background-size: auto !important;

	border: none !important;
	border-radius: 6px !important;
	box-shadow: none !important;

	color: #333 !important;
}


/**
 * 左側のアクセントライン
 *
 * 既存の「ストライプ色」の設定値を
 * アクセントライン色として再利用する。
 */
.post_content .cast-box::before {
	content: "" !important;
	position: absolute !important;

	top: 18px !important;
	bottom: 18px !important;
	left: 14px !important;

	width: 4px !important;

	background-color:
		var(--meri-legacy-cast-stripe, #d2a24c)
		!important;

	border-radius: 4px !important;

	pointer-events: none !important;
}


/**
 * ボックス内の上下余白調整
 */
.post_content .cast-box > :first-child {
	margin-top: 0 !important;
}

.post_content .cast-box > :last-child {
	margin-bottom: 0 !important;
}


/**
 * 直下にリストがある場合
 */
.post_content .cast-box > ul,
.post_content .cast-box > ol {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.post_content .cast-box > ul > li,
.post_content .cast-box > ol > li {
	margin-bottom: 1em;
	line-height: 1.9;
}

.post_content .cast-box > ul > li:last-child,
.post_content .cast-box > ol > li:last-child {
	margin-bottom: 0;
}


/**
 * スマートフォン
 */
@media screen and (max-width: 767px) {

	.post_content .cast-box {
		margin: 1.3em 0 !important;

		padding-top:
			min(
				var(--meri-legacy-cast-pad-y, 30px),
				22px
			)
			!important;

		padding-right:
			min(
				var(--meri-legacy-cast-pad-x, 20px),
				18px
			)
			!important;

		padding-bottom:
			min(
				var(--meri-legacy-cast-pad-y, 30px),
				22px
			)
			!important;

		padding-left:
			calc(
				min(
					var(--meri-legacy-cast-pad-x, 20px),
					18px
				)
				+ 14px
			)
			!important;

		border-radius: 4px !important;
	}

	.post_content .cast-box::before {
		top: 14px !important;
		bottom: 14px !important;
		left: 10px !important;

		width: 3px !important;
	}

	.post_content .cast-box > ul > li,
	.post_content .cast-box > ol > li {
		margin-bottom: 0.9em;
		line-height: 1.8;
	}
}