/**
 * 見出し2 ブロックスタイル
 * SWELL の --color_htag を利用
 */

:root {
	--swell-child-h2-mix-3: color-mix(in srgb, var(--color_htag) 3%, transparent);
	--swell-child-h2-mix-5: color-mix(in srgb, var(--color_htag) 5%, transparent);
	--swell-child-h2-mix-15: color-mix(in srgb, var(--color_htag) 15%, transparent);
	--swell-child-h2-mix-50: color-mix(in srgb, var(--color_htag) 50%, transparent);
	--swell-child-h2-mix-80: color-mix(in srgb, var(--color_htag) 80%, transparent);
}

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

.post_content h2[class*="is-style-h2-"]::before,
.post_content h2[class*="is-style-h2-"]::after,
.editor-styles-wrapper h2[class*="is-style-h2-"]::before,
.editor-styles-wrapper h2[class*="is-style-h2-"]::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;
	visibility: visible;
}

/* 白文字スタイル（エディターでも反映） */
.post_content h2.is-style-h2-band,
.post_content h2.is-style-h2-block,
.post_content h2.is-style-h2-stitch,
.post_content h2.is-style-h2-balloon,
.editor-styles-wrapper h2.is-style-h2-band,
.editor-styles-wrapper h2.is-style-h2-block,
.editor-styles-wrapper h2.is-style-h2-stitch,
.editor-styles-wrapper h2.is-style-h2-balloon {
	color: #fff;
}

/* H2｜帯 */
.post_content h2.is-style-h2-band,
.editor-styles-wrapper h2.is-style-h2-band {
	background: var(--color_htag);
	padding: 0.75em 1em;
}

.post_content h2.is-style-h2-band::before,
.editor-styles-wrapper h2.is-style-h2-band::before {
	content: "";
	top: -4px;
	left: 0;
	width: 100%;
	height: calc(100% + 4px);
	box-sizing: content-box;
	border-top: solid 2px var(--color_htag);
	border-bottom: solid 2px var(--color_htag);
}

/* H2｜塗り潰し */
.post_content h2.is-style-h2-block,
.editor-styles-wrapper h2.is-style-h2-block {
	background: var(--color_htag);
	padding: 0.75em 1em;
	border-radius: var(--swl-radius--2, 0);
}

/* H2｜左に縦線 */
.post_content h2.is-style-h2-b-left,
.editor-styles-wrapper h2.is-style-h2-b-left {
	border-left: solid 6px var(--color_htag);
	padding: 0.5em 0 0.5em 16px;
}

/* H2｜左に2色ブロック */
.post_content h2.is-style-h2-b-left2,
.editor-styles-wrapper h2.is-style-h2-b-left2 {
	padding: 0.5em 0 0.5em 24px;
}

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

/* H2｜付箋風 */
.post_content h2.is-style-h2-tag-normal,
.editor-styles-wrapper h2.is-style-h2-tag-normal {
	border-left: solid 8px var(--color_htag);
	padding: 0.75em 1em;
	background: var(--swell-child-h2-mix-3);
}

/* H2｜付箋風（ストライプ） */
.post_content h2.is-style-h2-tag,
.editor-styles-wrapper h2.is-style-h2-tag {
	border-left: solid 8px var(--color_htag);
	padding: 0.75em 1em;
	background: linear-gradient(
		135deg,
		transparent 25%,
		var(--swell-child-h2-mix-5) 25%,
		var(--swell-child-h2-mix-5) 50%,
		transparent 50%,
		transparent 75%,
		var(--swell-child-h2-mix-5) 75%,
		var(--swell-child-h2-mix-5)
	);
	background-size: 4px 4px;
}

/* H2｜ステッチ */
.post_content h2.is-style-h2-stitch,
.editor-styles-wrapper h2.is-style-h2-stitch {
	padding: 1em;
	border-radius: 2px;
	background: var(--color_htag);
}

.post_content h2.is-style-h2-stitch::before,
.editor-styles-wrapper h2.is-style-h2-stitch::before {
	content: "";
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	top: 4px;
	left: 4px;
	right: auto;
	bottom: auto;
	border: dashed 1px #fff;
}

/* H2｜ステッチ（薄） */
.post_content h2.is-style-h2-stitch-thin,
.editor-styles-wrapper h2.is-style-h2-stitch-thin {
	padding: 1em;
	border-radius: 2px;
	background: var(--swell-child-h2-mix-5);
}

.post_content h2.is-style-h2-stitch-thin::before,
.editor-styles-wrapper h2.is-style-h2-stitch-thin::before {
	content: "";
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	top: 4px;
	left: 4px;
	right: auto;
	bottom: auto;
	border: dashed 1px var(--swell-child-h2-mix-50);
}

/* H2｜ふきだし風 */
.post_content h2.is-style-h2-balloon,
.editor-styles-wrapper h2.is-style-h2-balloon {
	padding: 0.75em 1em;
	border-radius: 2px;
	background: var(--color_htag);
}

.post_content h2.is-style-h2-balloon::before,
.editor-styles-wrapper h2.is-style-h2-balloon::before {
	content: "";
	bottom: calc(2px - 1.5em);
	left: 1.5em;
	width: 0;
	height: 0;
	border: 0.75em solid transparent;
	border-top-color: var(--color_htag);
}

/* H2｜上下に線 */
.post_content h2.is-style-h2-b-topbottom,
.editor-styles-wrapper h2.is-style-h2-b-topbottom {
	border-top: solid 2px var(--color_htag);
	border-bottom: solid 2px var(--color_htag);
	padding: 1em 0.75em;
}

/* H2｜1文字目にアクセント */
.post_content h2.is-style-h2-letter:first-letter {
	font-size: 1.5em;
	padding: 0 2px 4px;
	border-bottom: solid 2px var(--color_htag);
	color: var(--color_htag);
}

.editor-styles-wrapper h2.is-style-h2-letter {
	padding: 0 1em;
}

.editor-styles-wrapper h2.is-style-h2-letter::before {
	content: "";
	width: 1em;
	height: 2px;
	left: 1em;
	bottom: 0;
	background-color: var(--color_htag);
}

/* H2｜グラデーション帯（新規） */
.post_content h2.is-style-h2-gradient,
.editor-styles-wrapper h2.is-style-h2-gradient {
	padding: 0.75em 1em 0.75em 1.25em;
	background: linear-gradient(
		90deg,
		var(--color_htag) 0%,
		var(--swell-child-h2-mix-80) 55%,
		transparent 100%
	);
}

.post_content h2.is-style-h2-gradient::before,
.editor-styles-wrapper h2.is-style-h2-gradient::before {
	content: "";
	left: 0;
	top: 0;
	width: 6px;
	height: 100%;
	background: var(--color_htag);
}

/* H2｜下線アクセント（新規） */
.post_content h2.is-style-h2-underline,
.editor-styles-wrapper h2.is-style-h2-underline {
	padding: 0.25em 0 0.75em;
}

.post_content h2.is-style-h2-underline::after,
.editor-styles-wrapper h2.is-style-h2-underline::after {
	content: "";
	left: 0;
	bottom: 0;
	width: 4em;
	height: 4px;
	border-radius: 2px;
	background: var(--color_htag);
}

/* H2｜左ブロック＋影（新規） */
.post_content h2.is-style-h2-side-block,
.editor-styles-wrapper h2.is-style-h2-side-block {
	padding: 0.65em 1em 0.65em 1.25em;
	background: #fff;
	box-shadow: 4px 4px 0 var(--swell-child-h2-mix-15);
}

.post_content h2.is-style-h2-side-block::before,
.editor-styles-wrapper h2.is-style-h2-side-block::before {
	content: "";
	left: 0;
	top: 0;
	width: 10px;
	height: 100%;
	background: var(--color_htag);
}

/* H2｜左右線（中央）（新規） */
.post_content h2.is-style-h2-center-line,
.editor-styles-wrapper h2.is-style-h2-center-line {
	padding: 0 3.5em;
	text-align: center;
}

.post_content h2.is-style-h2-center-line::before,
.post_content h2.is-style-h2-center-line::after,
.editor-styles-wrapper h2.is-style-h2-center-line::before,
.editor-styles-wrapper h2.is-style-h2-center-line::after {
	content: "";
	top: 50%;
	width: 2.5em;
	height: 2px;
	background: var(--color_htag);
}

.post_content h2.is-style-h2-center-line::before,
.editor-styles-wrapper h2.is-style-h2-center-line::before {
	left: 0;
	right: auto;
}

.post_content h2.is-style-h2-center-line::after,
.editor-styles-wrapper h2.is-style-h2-center-line::after {
	left: auto;
	right: 0;
}

@media screen and (max-width: 599px) {
	.post_content h2.is-style-h2-center-line,
	.editor-styles-wrapper h2.is-style-h2-center-line {
		padding: 0 2.5em;
	}

	.post_content h2.is-style-h2-center-line::before,
	.post_content h2.is-style-h2-center-line::after,
	.editor-styles-wrapper h2.is-style-h2-center-line::before,
	.editor-styles-wrapper h2.is-style-h2-center-line::after {
		width: 1.5em;
	}
}