/**
 * 旧テーマ互換：料金フロー・process-box
 * Version: 1.1.0
 *
 * 有効化：
 * 外観 → カスタマイズ → 旧テーマ仕様：料金フロー
 *
 * 対象HTMLは .meri-legacy-flow で囲む。
 *
 * v1.1.0:
 * - 本文の文字サイズと行間を固定せず、SWELLの本文設定を継承
 */

/* =========================================================
 * 共通
 * ======================================================= */

.post_content .meri-legacy-flow,
.editor-styles-wrapper .meri-legacy-flow {
	box-sizing: border-box;
	width: 100%;
	font-size: inherit;
	line-height: inherit;
}

.post_content .meri-legacy-flow *,
.editor-styles-wrapper .meri-legacy-flow * {
	box-sizing: border-box;
}

.post_content .meri-legacy-flow > p,
.editor-styles-wrapper .meri-legacy-flow > p {
	margin-top: 0;
	margin-bottom: 1.4em;
}

/* =========================================================
 * PDFリンク
 * ======================================================= */

.post_content .meri-legacy-flow .icon-arrow-r,
.editor-styles-wrapper .meri-legacy-flow .icon-arrow-r {
	margin: 1.2em 0 2em;
	padding: 0;
}

.post_content .meri-legacy-flow .icon-arrow-r::before,
.editor-styles-wrapper .meri-legacy-flow .icon-arrow-r::before {
	content: "›";
	display: inline-block;
	margin-right: 0.4em;
	color: var(--meri-flow-link-icon, #9b7925);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1;
}

.post_content .meri-legacy-flow .icon-arrow-r a,
.editor-styles-wrapper .meri-legacy-flow .icon-arrow-r a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================
 * 料金フロー
 * ======================================================= */

.post_content .meri-legacy-flow ol.flow-chart,
.editor-styles-wrapper .meri-legacy-flow ol.flow-chart {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none !important;
	counter-reset: none !important;
}

.post_content .meri-legacy-flow ol.flow-chart > li,
.editor-styles-wrapper .meri-legacy-flow ol.flow-chart > li {
	position: relative;
	box-sizing: border-box;
	margin: 0 0 var(--meri-flow-gap, 54px);
	padding: 0 !important;
	list-style: none !important;
}

.post_content .meri-legacy-flow ol.flow-chart > li:last-child,
.editor-styles-wrapper .meri-legacy-flow ol.flow-chart > li:last-child {
	margin-bottom: 2em;
}

.post_content .meri-legacy-flow ol.flow-chart > li::marker,
.editor-styles-wrapper .meri-legacy-flow ol.flow-chart > li::marker {
	content: "";
	font-size: 0;
}

.post_content .meri-legacy-flow ol.flow-chart > li::before,
.editor-styles-wrapper .meri-legacy-flow ol.flow-chart > li::before {
	display: none !important;
	content: none !important;
}

/* 料金ボックス */
.post_content .meri-legacy-flow .process-box,
.editor-styles-wrapper .meri-legacy-flow .process-box {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding:
		var(--meri-flow-pad-y, 27px)
		var(--meri-flow-pad-x, 30px);
	border: 1px solid var(--meri-flow-border, #eee4ac);
	border-radius: var(--meri-flow-radius, 8px);
	background:
		linear-gradient(
			135deg,
			var(--meri-flow-bg-start, #fffef4) 0%,
			var(--meri-flow-bg-end, #f7f1cc) 100%
		);
	color: inherit;
}

/* ボックス間の下向き矢印 */
.post_content
.meri-legacy-flow
ol.flow-chart
> li:not(:last-child)::after,
.editor-styles-wrapper
.meri-legacy-flow
ol.flow-chart
> li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom:
		calc(
			(var(--meri-flow-gap, 54px) - var(--meri-flow-arrow-height, 21px))
			/ -2
		);
	width: 0;
	height: 0;
	transform: translate(-50%, 50%);
	border-top:
		var(--meri-flow-arrow-height, 21px)
		solid
		var(--meri-flow-arrow, #96701e);
	border-right:
		var(--meri-flow-arrow-width, 39px)
		solid
		transparent;
	border-left:
		var(--meri-flow-arrow-width, 39px)
		solid
		transparent;
}

/* =========================================================
 * 賢威の汎用クラス互換
 * .meri-legacy-flow 内だけで有効
 * ======================================================= */

.post_content .meri-legacy-flow .m20-b,
.editor-styles-wrapper .meri-legacy-flow .m20-b {
	margin-bottom: 20px !important;
}

.post_content .meri-legacy-flow .m0-b,
.editor-styles-wrapper .meri-legacy-flow .m0-b {
	margin-bottom: 0 !important;
}

.post_content .meri-legacy-flow .f12em,
.editor-styles-wrapper .meri-legacy-flow .f12em {
	font-size: 1.12em;
}

.post_content .meri-legacy-flow .b,
.editor-styles-wrapper .meri-legacy-flow .b {
	font-weight: 700;
}

.post_content .meri-legacy-flow .note,
.editor-styles-wrapper .meri-legacy-flow .note {
	color: var(--meri-flow-note, #e65f4d);
}

/* =========================================================
 * ボックス内
 * ======================================================= */

.post_content .meri-legacy-flow .process-box p,
.editor-styles-wrapper .meri-legacy-flow .process-box p {
	margin-top: 0;
	margin-bottom: 1em;
}

.post_content .meri-legacy-flow .process-box p:last-child,
.editor-styles-wrapper .meri-legacy-flow .process-box p:last-child {
	margin-bottom: 0;
}

.post_content .meri-legacy-flow .process-box .f12em,
.editor-styles-wrapper .meri-legacy-flow .process-box .f12em {
	line-height: 1.9;
	font-weight: 700;
}

.post_content .meri-legacy-flow .process-box u,
.editor-styles-wrapper .meri-legacy-flow .process-box u {
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.post_content .meri-legacy-flow .price-result,
.editor-styles-wrapper .meri-legacy-flow .price-result {
	margin-top: 0.8em;
	text-align: right;
	line-height: 1.8;
}

.post_content .meri-legacy-flow .price-subnote,
.editor-styles-wrapper .meri-legacy-flow .price-subnote {
	margin-top: 1em;
	text-align: right;
	font-size: 0.94em;
}

/* =========================================================
 * 注意事項
 * ======================================================= */

.post_content .meri-legacy-flow .legacy-notice-title,
.editor-styles-wrapper .meri-legacy-flow .legacy-notice-title {
	display: block;
	margin: 0.5em 0 1em;
	color: #800000;
	font-weight: 700;
}

.post_content .meri-legacy-flow .legacy-important,
.editor-styles-wrapper .meri-legacy-flow .legacy-important {
	color: #ff6600;
	font-weight: 700;
}

.post_content .meri-legacy-flow hr,
.editor-styles-wrapper .meri-legacy-flow hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid #ddd;
}

/* =========================================================
 * スマートフォン
 * ======================================================= */

@media screen and (max-width: 600px) {
	.post_content .meri-legacy-flow,
	.editor-styles-wrapper .meri-legacy-flow {
		font-size: inherit;
		line-height: inherit;
	}

	.post_content .meri-legacy-flow .process-box,
	.editor-styles-wrapper .meri-legacy-flow .process-box {
		padding:
			max(18px, calc(var(--meri-flow-pad-y, 27px) * 0.78))
			max(16px, calc(var(--meri-flow-pad-x, 30px) * 0.58));
	}

	.post_content .meri-legacy-flow .price-result,
	.post_content .meri-legacy-flow .price-subnote,
	.editor-styles-wrapper .meri-legacy-flow .price-result,
	.editor-styles-wrapper .meri-legacy-flow .price-subnote {
		text-align: left;
	}

	.post_content .meri-legacy-flow .f12em,
	.editor-styles-wrapper .meri-legacy-flow .f12em {
		font-size: 1.06em;
	}
}