/**
 * Snow Monkey セクション系「装飾ありのタイトル」
 * ブロックに is-style-smb-section-decorated-title が付与されたとき
 *
 * 装飾（赤／金の ::before / ::after、帯のパディング）は .smb-section__title に付与。
 * 親の .smb-section__header はレイアウト用（flex 列・配置）のみとし、
 * コンテンツ幅に対する左右配置がしやすい構造にする。
 *
 * 見出しの余白調整（任意）:
 *   --msm-decor-title-padding で上書き（1〜4 値）。未設定時は下記パディングがそのまま使われる。
 *
 * 赤は ::before のみ（幅を狭めて中央配置）、金は ::after のグラデーションで左右のみ描画。
 */

.smb-section.is-style-smb-section-decorated-title {
	--msm-decor-title-padding: 1.35rem 3.25rem 1.2rem;
	--msm-decor-skew: -12deg;
	--msm-decor-red: #d32f2f;
	--msm-decor-gold: #d4a012;
	--msm-decor-gold-zone: 22px;
	--msm-decor-gap-clear: 6px;
	--msm-decor-gold-bars-gap: 3px;
}

/* サイドバー「配置」: コンテンツ幅（.smb-section__contents-wrapper）内でタイトル行を寄せる */
.smb-section.is-style-smb-section-decorated-title.msm-decor-title-align-left .smb-section__contents-wrapper {
	text-align: left;
}

.smb-section.is-style-smb-section-decorated-title.msm-decor-title-align-right .smb-section__contents-wrapper {
	text-align: right;
}

/* ヘッダー: 子（装飾付きタイトル・サブタイトル）のまとまりの配置のみ */
.smb-section.is-style-smb-section-decorated-title .smb-section__header,
.smb-section.is-style-smb-section-decorated-title .smb-section-break-the-grid__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0;
	padding: 0;
	max-width: none;
	background: none;
	position: static;
	overflow: visible;
	box-sizing: border-box;
}

.smb-section.is-style-smb-section-decorated-title.msm-decor-title-align-left .smb-section__header,
.smb-section.is-style-smb-section-decorated-title.msm-decor-title-align-left .smb-section-break-the-grid__header {
	align-items: flex-start;
	text-align: left;
}

.smb-section.is-style-smb-section-decorated-title.msm-decor-title-align-right .smb-section__header,
.smb-section.is-style-smb-section-decorated-title.msm-decor-title-align-right .smb-section-break-the-grid__header {
	align-items: flex-end;
	text-align: right;
}

/* 装飾本体: タイトル要素に赤・金・帯のパディング */
.smb-section.is-style-smb-section-decorated-title .smb-section__title,
.smb-section.is-style-smb-section-decorated-title .smb-section-break-the-grid__title {
	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow: visible;
	width: fit-content;
	max-width: min(100%, 920px);
	margin: 0;
	padding: var(--msm-decor-title-padding);
	box-sizing: border-box;
	background: none;
	border: none;
	color: #fff !important;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
@media (max-width: 599px) {
	.smb-section.is-style-smb-section-decorated-title .smb-section__title {
		width: 100%;
	}
}

/* 下層：左右のゴールドのみ（テーマ .smb-section__title:after の 60×1px 下線を完全に上書きする） */
.smb-section.is-style-smb-section-decorated-title .smb-section__title::after,
.smb-section.is-style-smb-section-decorated-title .smb-section-break-the-grid__title::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	z-index: -2;
	pointer-events: none;
	transform: skewX(var(--msm-decor-skew));
	transform-origin: center center;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: linear-gradient(
		90deg,
		var(--msm-decor-gold) 0,
		var(--msm-decor-gold) 5px,
		transparent 5px,
		transparent calc(5px + var(--msm-decor-gold-bars-gap)),
		var(--msm-decor-gold) calc(5px + var(--msm-decor-gold-bars-gap)),
		var(--msm-decor-gold) 18px,
		transparent 18px
	),
		linear-gradient(
			90deg,
			transparent 0,
			transparent calc(100% - 18px),
			var(--msm-decor-gold) calc(100% - 18px),
			var(--msm-decor-gold) calc(100% - 5px - var(--msm-decor-gold-bars-gap)),
			transparent calc(100% - 5px - var(--msm-decor-gold-bars-gap)),
			transparent calc(100% - 5px),
			var(--msm-decor-gold) calc(100% - 5px),
			var(--msm-decor-gold) 100%
		);
	background-size: var(--msm-decor-gold-zone) 100%, var(--msm-decor-gold-zone) 100%;
	background-position: left center, right center;
	display: block;
}

/* 上層：赤パネルのみ（テーマの title 向け ::before がある場合に備え寸法を明示） */
.smb-section.is-style-smb-section-decorated-title .smb-section__title::before,
.smb-section.is-style-smb-section-decorated-title .smb-section-break-the-grid__title::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 50%;
	width: calc(100% - 2 * (var(--msm-decor-gold-zone) + var(--msm-decor-gap-clear)));
	max-width: 100%;
	min-width: 0;
	min-height: 100%;
	height: auto;
	transform: translateX(-50%) skewX(var(--msm-decor-skew));
	transform-origin: center center;
	background-color: var(--accent-color);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent 55%),
		linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 42%, transparent 65%);
	background-size: 100% 100%, 13px 13px, 13px 13px, 100% 100%;
	background-position: 0 0, 0 0, 0 0, 0 0;
	background-repeat: no-repeat, repeat, repeat, no-repeat;
}

/* テーマ／他CSSの title::before / ::after（下線・マージン等）を装飾と両立しないようにリセット */
.smb-section.is-style-smb-section-decorated-title .smb-section__title::before,
.smb-section.is-style-smb-section-decorated-title .smb-section__title::after,
.smb-section.is-style-smb-section-decorated-title .smb-section-break-the-grid__title::before,
.smb-section.is-style-smb-section-decorated-title .smb-section-break-the-grid__title::after {
	margin: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.smb-section.is-style-smb-section-decorated-title .smb-section__subtitle {
	position: relative;
	z-index: 1;
	margin: 0.55rem 0 0;
	padding: 0;
	font-family: Urbanist, "Noto Sans JP", sans-serif;
	font-size: clamp(0.625rem, 1.35vw, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.45;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.96) !important;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.smb-section.is-style-smb-section-decorated-title .smb-section__header + .smb-section__lede-wrapper,
.smb-section.is-style-smb-section-decorated-title .smb-section-break-the-grid__header + .smb-section__lede-wrapper {
	margin-top: var(--_margin1, 1rem);
}

@media (max-width: 599px) {
	.smb-section.is-style-smb-section-decorated-title {
		--msm-decor-gold-zone: 20px;
		--msm-decor-gap-clear: 5px;
		--msm-decor-gold-bars-gap: 2px;
		--msm-decor-title-padding: 1.1rem 1.65rem 1rem;
	}
}