/**
 * 見出し3 ブロックスタイル
 */

:root {
	--swell-child-h3-mix-15: color-mix(in srgb, var(--color_htag) 15%, transparent);
	--swell-child-h3-mix-20: color-mix(in srgb, var(--color_htag) 20%, transparent);
	--swell-child-h3-mix-50: color-mix(in srgb, var(--color_htag) 50%, transparent);
	--swell-child-h3-gray-line: rgba(150, 150, 150, 0.2);
}

.post_content h3[class*="is-style-h3-"],
.editor-styles-wrapper h3[class*="is-style-h3-"] {
	position: relative;
	border: none;
	background: transparent;
	border-radius: 0;
	padding: 0;
	color: inherit;
}

.post_content h3[class*="is-style-h3-"]::before,
.post_content h3[class*="is-style-h3-"]::after,
.editor-styles-wrapper h3[class*="is-style-h3-"]::before,
.editor-styles-wrapper h3[class*="is-style-h3-"]::after {
	content: none;
	border: none;
	background: none;
	box-shadow: none;
	width: auto;
	height: auto;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	display: block;
	position: absolute;
	pointer-events: none;
}

/* 下線（キーカラー） */
.post_content h3.is-style-h3-main-line,
.editor-styles-wrapper h3.is-style-h3-main-line {
	padding: 0 0.5em 0.5em;
}

.post_content h3.is-style-h3-main-line::before,
.editor-styles-wrapper h3.is-style-h3-main-line::before {
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color_htag);
}

/* 下線（グレー交互） */
.post_content h3.is-style-h3-main-gray,
.editor-styles-wrapper h3.is-style-h3-main-gray {
	padding: 0 0.5em 0.5em;
}

.post_content h3.is-style-h3-main-gray::before,
.editor-styles-wrapper h3.is-style-h3-main-gray::before {
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--color_htag) 0%,
		var(--color_htag) 29.3%,
		var(--swell-child-h3-gray-line) 29.3%,
		var(--swell-child-h3-gray-line) 100%
	);
}

/* 下線（薄い交互） */
.post_content h3.is-style-h3-main-thin,
.editor-styles-wrapper h3.is-style-h3-main-thin {
	padding: 0 0.5em 0.5em;
}

.post_content h3.is-style-h3-main-thin::before,
.editor-styles-wrapper h3.is-style-h3-main-thin::before {
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--color_htag) 0%,
		var(--color_htag) 29.3%,
		var(--swell-child-h3-mix-20) 29.3%,
		var(--swell-child-h3-mix-20) 100%
	);
}

/* グラデーション下線 */
.post_content h3.is-style-h3-gradation,
.editor-styles-wrapper h3.is-style-h3-gradation {
	padding: 0 0.5em 0.5em;
}

.post_content h3.is-style-h3-gradation::before,
.editor-styles-wrapper h3.is-style-h3-gradation::before {
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--color_htag) 0%,
		var(--color_htag) 20%,
		var(--swell-child-h3-mix-50) 90%,
		var(--swell-child-h3-mix-50) 100%
	);
}

/* ストライプ下線 */
.post_content h3.is-style-h3-stripe,
.editor-styles-wrapper h3.is-style-h3-stripe {
	padding: 0 0.5em 0.5em;
}

.post_content h3.is-style-h3-stripe::before,
.editor-styles-wrapper h3.is-style-h3-stripe::before {
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	opacity: 0.5;
	background: linear-gradient(
		135deg,
		transparent 25%,
		var(--color_htag) 25%,
		var(--color_htag) 50%,
		transparent 50%,
		transparent 75%,
		var(--color_htag) 75%,
		var(--color_htag)
	);
	background-size: 4px 4px;
}

/* 左に縦線 */
.post_content h3.is-style-h3-l-border,
.editor-styles-wrapper h3.is-style-h3-l-border {
	border-left: solid 4px var(--color_htag);
	padding: 0.25em 0 0.25em 16px;
}

/* 左に2色ブロック */
.post_content h3.is-style-h3-l-block,
.editor-styles-wrapper h3.is-style-h3-l-block {
	padding: 0.25em 1em;
}

.post_content h3.is-style-h3-l-block::before,
.editor-styles-wrapper h3.is-style-h3-l-block::before {
	content: "";
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background: repeating-linear-gradient(
		var(--color_htag) 0%,
		var(--color_htag) 50%,
		var(--swell-child-h3-mix-15) 50%,
		var(--swell-child-h3-mix-15) 100%
	);
}