/*
 * 旧ブロック「セクション」「背景画像付きセクション」（snow-monkey-blocks/section・section-with-bgimage）
 * SMB 26.0.3 dist/blocks/section/style-index.css・section-with-bgimage/style-index.css と同じ規則。
 * 🛑 保存済みの HTML のクラスに当てるだけ。HTML は書き換えない。
 */
.smb-section {
	--smb-section--color: currentColor;
	--smb-section--min-height: 0px;
	--smb-section--padding: var(--_padding3);
	--smb-section--subtitle-color: inherit;
	--smb-section--contents-wrapper-width: 100%;
	--smb-section--background-color: #0000;
	--smb-section--background-image: initial;
	--smb-section--background-transform: initial;
	--smb-section--background-top: 0;
	--smb-section--background-right: 0;
	--smb-section--background-bottom: 0;
	--smb-section--background-left: 0;
	--smb-section--background-texture-image: initial;
	--smb-section--background-texture-opacity: 1;
	--smb-section--fixed-background-color: #0000;
	--smb-section--fixed-background-image: initial;
	--smb-section--fixed-background-texture-image: initial;
	--smb-section--fixed-background-texture-opacity: 1;
	--smb-section--dividers-top: 0%;
	--smb-section--dividers-bottom: 0%;
	--smb-section--top-divider-level: 0px;
	--smb-section--bottom-divider-level: 0px;
	--smb-section--background-text-color: inherit;
	--smb-section--background-text-opacity: 0.2;
	--smb-section--background-text-font-size: inherit;
	--smb-section--background-text-line-height: inherit;
	--smb-section--background-text-top: initial;
	--smb-section--background-text-right: initial;
	--smb-section--background-text-bottom: initial;
	--smb-section--background-text-left: initial;
	position: relative;
	display: flex;
	align-items: center;
	color: var(--smb-section--color);
	min-height: var(--smb-section--min-height);
	padding: var(--smb-section--padding) 0;
}
.smb-section__background-text, .smb-section__fixed-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.smb-section__background__texture, .smb-section__fixed-background__texture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; mix-blend-mode: multiply; }
.smb-section__background {
	position: absolute;
	top: var(--smb-section--background-top);
	right: var(--smb-section--background-right);
	bottom: var(--smb-section--background-bottom);
	left: var(--smb-section--background-left);
	background-color: var(--smb-section--background-color);
	background-image: var(--smb-section--background-image);
	transform: var(--smb-section--background-transform);
}
.smb-section__background__texture { background-image: var(--smb-section--background-texture-image); opacity: var(--smb-section--background-texture-opacity); }
.smb-section__fixed-background {
	background-color: var(--smb-section--fixed-background-color);
	background-image: var(--smb-section--fixed-background-image);
	padding-top: var(--smb-section--top-divider-level);
	padding-bottom: var(--smb-section--bottom-divider-level);
}
.smb-section__fixed-background__texture { background-image: var(--smb-section--fixed-background-texture-image); opacity: var(--smb-section--fixed-background-texture-opacity); }
.smb-section__background-text { overflow: hidden; position: relative; height: 100%; }
.smb-section__background-text__text {
	position: absolute; font-weight: 700; max-width: 100%;
	color: var(--smb-section--background-text-color);
	opacity: var(--smb-section--background-text-opacity);
	font-size: var(--smb-section--background-text-font-size);
	line-height: var(--smb-section--background-text-line-height);
	top: var(--smb-section--background-text-top);
	right: var(--smb-section--background-text-right);
	bottom: var(--smb-section--background-text-bottom);
	left: var(--smb-section--background-text-left);
}
.smb-section__dividers { position: absolute; top: var(--smb-section--dividers-top); right: 0; bottom: var(--smb-section--dividers-bottom); left: 0; overflow: hidden; }
.smb-section__divider { position: absolute; right: -1px; left: -1px; line-height: 1; font-size: 0; }
.smb-section__divider svg { position: absolute; right: 0; left: 0; height: auto; width: 100%; max-height: 100px; }
.smb-section__divider--top { top: -1px; }
.smb-section__divider--top svg { top: 0; transform: rotate(180deg); }
.smb-section__divider--bottom { bottom: -1px; }
.smb-section__divider--bottom svg { bottom: 0; }
.smb-section__divider--triangle svg { margin: 0 auto; max-width: 200px; }
.smb-section__inner { flex: 1 1 auto; position: relative; display: flex; flex-wrap: wrap; align-items: center; max-width: 100%; }
.smb-section__inner > .c-container { position: relative; }
.smb-section__inner > :is(.c-container.alignfull, .c-container.alignwide) { flex-grow: 1; }
.smb-section__inner > .c-container.alignwide { max-width: var(--wp--style--global--wide-size); }
.smb-section__inner[class*=is-content-justification-] > .c-container { display: flex; }
.smb-section__inner[class*=is-content-justification-] > .c-container > .smb-section__contents-wrapper { margin-right: 0; margin-left: 0; }
.smb-section__inner.is-content-justification-left > .c-container { justify-content: flex-start; }
.smb-section__inner.is-content-justification-center > .c-container { justify-content: center; }
.smb-section__inner.is-content-justification-right > .c-container { justify-content: flex-end; }
.smb-section__contents-wrapper { margin-right: auto; margin-left: auto; width: auto; max-width: min(100%, var(--smb-section--contents-wrapper-width)); }
.smb-section__contents-wrapper > * + * { margin-top: var(--_margin2); }
.smb-section__contents-wrapper--center > .smb-section__header, .smb-section__contents-wrapper--center > .smb-section__header .c-container,
.smb-section__contents-wrapper--left > .smb-section__header, .smb-section__contents-wrapper--left > .smb-section__header .c-container,
.smb-section__contents-wrapper--right > .smb-section__header, .smb-section__contents-wrapper--right > .smb-section__header .c-container { text-align: inherit; }
:is(.smb-section__contents-wrapper--left, .smb-section__contents-wrapper--right) > .smb-section__header .smb-section__lede-wrapper { display: block; }
.smb-section__contents-wrapper--left { text-align: left; }
.smb-section__contents-wrapper--center { text-align: center; }
.smb-section__contents-wrapper--right { text-align: right; }
.smb-section__header, .smb-section__subtitle, .smb-section__title { text-align: center; }
.smb-section__header > *, .smb-section__header > .c-container > * { text-align: inherit; margin-top: 0; margin-bottom: 0; }
.smb-section__header > * + *, .smb-section__header > .c-container > * + * { margin-top: var(--_margin-2); }
.smb-section__header > * + :is(.smb-section__lede, .smb-section__lede-wrapper) { margin-top: var(--_margin1); }
.smb-section__subtitle { color: var(--smb-section--subtitle-color); --_font-size-level: -2; font-size: var(--_font-size); line-height: var(--_line-height); font-weight: 700; }
.smb-section__title { --_font-size-level: 4; font-size: var(--_fluid-font-size); line-height: var(--_line-height); }
.smb-section__lede-wrapper { display: flex; justify-content: center; }
.smb-section__lede { --_font-size-level: -1; font-size: var(--_font-size); line-height: var(--_line-height); }
.smb-section__body { max-width: 100%; }
.smb-section [data-is-text-align=left] { text-align: left; }
:is(.smb-section--left, .smb-section--right) > .smb-section__inner > .c-container > .smb-section__lede-wrapper { display: block; }
.smb-section--left > .smb-section__inner > .c-container > .smb-section__body,
.smb-section--left > .smb-section__inner > .c-container > .smb-section__lede-wrapper > .smb-section__lede,
.smb-section--left > .smb-section__inner > .c-container > .smb-section__subtitle,
.smb-section--left > .smb-section__inner > .c-container > .smb-section__title { text-align: left; }
.smb-section--center > .smb-section__inner > .c-container > :is(.smb-section__body, .smb-section__subtitle, .smb-section__title) { text-align: center; }
.smb-section--right > .smb-section__inner > .c-container > .smb-section__body,
.smb-section--right > .smb-section__inner > .c-container > .smb-section__lede-wrapper > .smb-section__lede,
.smb-section--right > .smb-section__inner > .c-container > .smb-section__subtitle,
.smb-section--right > .smb-section__inner > .c-container > .smb-section__title { text-align: right; }
.smb-section--wide { --smb-section--min-height: 75vh; }
.smb-section--full { --smb-section--min-height: 100vh; }
.smb-section--top-divider-no-overlay > .smb-section__inner { padding-top: max(var(--smb-section--top-divider-level), var(--smb-section--top-divider-level) * -1); }
.smb-section--bottom-divider-no-overlay > .smb-section__inner { padding-bottom: max(var(--smb-section--bottom-divider-level), var(--smb-section--bottom-divider-level) * -1); }
:is(.smb-section.is-content-justification-center, .smb-section.is-content-justification-left, .smb-section.is-content-justification-right) > .smb-section__inner > .c-container { display: flex; flex-wrap: wrap; }
:is(.smb-section.is-content-justification-center, .smb-section.is-content-justification-left, .smb-section.is-content-justification-right) > .smb-section__inner > .c-container > :is(.smb-section__body, .smb-section__lede-wrapper, .smb-section__subtitle, .smb-section__title) { flex: 1 1 100%; }
:is(.smb-section.is-content-justification-center, .smb-section.is-content-justification-left, .smb-section.is-content-justification-right) > .smb-section__inner > .c-container > .smb-section__contents-wrapper { margin-right: 0; margin-left: 0; }
.smb-section.is-content-justification-left > .smb-section__inner > .c-container { justify-content: flex-start; }
.smb-section.is-content-justification-center > .smb-section__inner > .c-container { justify-content: center; }
.smb-section.is-content-justification-right > .smb-section__inner > .c-container { justify-content: flex-end; }
.smb-section.is-items-alignment-top { align-items: flex-start; }
.smb-section.is-items-alignment-center { align-items: center; }
.smb-section.is-items-alignment-bottom { align-items: flex-end; }
:where(.smb-section__body.is-layout-constrained > *) { --wp--style--global--content-size: 100%; --wp--style--global--wide-size: 100%; }

/* ---- 背景画像付きセクション ----
 * 🛑 SMB の元の CSS は --smb-section-with-bgimage--mask-color の行末にセミコロンが無く、
 *    次の行（mask-image: initial）と1つの値に繋がっている。既定の黒は効かず、マスク画像は「未定義」になる。
 *    見た目を同じにするため、その状態をそのまま再現する（直すと、色を指定していない箇所で見た目が変わる）。
 */
.smb-section-with-bgimage {
	--smb-section-with-bgimage--mask-color: var(--wp--preset--color--black) --smb-section-with-bgimage--mask-image: initial;
	--smb-section-with-bgimage--mask-opacity: 1;
	--smb-section-with-bgimage--lg-media-position: 50%;
	--smb-section-with-bgimage--lg-repeatable-image: initial;
	--smb-section-with-bgimage--md-media-position: 50%;
	--smb-section-with-bgimage--md-repeatable-image: initial;
	--smb-section-with-bgimage--sm-media-position: 50%;
	--smb-section-with-bgimage--sm-repeatable-image: initial;
	position: relative;
	overflow: hidden;
}
.smb-section-with-bgimage__repeatable-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: repeat; background-position: 50% 50%; opacity: var(--smb-section-with-bgimage--mask-opacity); }
.smb-section-with-bgimage__repeatable-image img { display: none; }
.smb-section-with-bgimage__bgimage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--wp--preset--color--white); }
.smb-section-with-bgimage__bgimage--lg :is(img, video) { opacity: var(--smb-section-with-bgimage--mask-opacity); object-position: var(--smb-section-with-bgimage--lg-media-position); }
.smb-section-with-bgimage__bgimage--lg .smb-section-with-bgimage__repeatable-image { background-position: var(--smb-section-with-bgimage--lg-media-position); background-image: var(--smb-section-with-bgimage--lg-repeatable-image); }
.smb-section-with-bgimage__bgimage--md :is(img, video) { opacity: var(--smb-section-with-bgimage--mask-opacity); object-position: var(--smb-section-with-bgimage--md-media-position); }
.smb-section-with-bgimage__bgimage--md .smb-section-with-bgimage__repeatable-image { background-position: var(--smb-section-with-bgimage--md-media-position); background-image: var(--smb-section-with-bgimage--md-repeatable-image); }
.smb-section-with-bgimage__bgimage--sm :is(img, video) { opacity: var(--smb-section-with-bgimage--mask-opacity); object-position: var(--smb-section-with-bgimage--sm-media-position); }
.smb-section-with-bgimage__bgimage--sm .smb-section-with-bgimage__repeatable-image { background-position: var(--smb-section-with-bgimage--sm-media-position); background-image: var(--smb-section-with-bgimage--sm-repeatable-image); }
.smb-section-with-bgimage__bgimage :is(iframe, img, video) { position: absolute; height: 100%; width: 100%; }
.smb-section-with-bgimage__bgimage :is(img, video) { object-fit: cover; }
.smb-section-with-bgimage__mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--smb-section-with-bgimage--mask-color); background-image: var(--smb-section-with-bgimage--mask-image); }
.smb-section-with-bgimage--left:not([class*=smb-section--]) > .c-container > :is(.smb-section__body, .smb-section__lede, .smb-section__subtitle, .smb-section__title),
.smb-section-with-bgimage--left:not([class*=smb-section--]) > .c-container > .smb-section__lede-wrapper > .smb-section__lede { text-align: left; }
.smb-section-with-bgimage--left:not([class*=smb-section--]) > .c-container > .smb-section__lede-wrapper { display: block; }
.smb-section-with-bgimage--center:not([class*=smb-section--]) > .c-container > :is(.smb-section__body, .smb-section__title) { text-align: center; }
.smb-section-with-bgimage--right:not([class*=smb-section--]) > .c-container > :is(.smb-section__body, .smb-section__lede, .smb-section__subtitle, .smb-section__title),
.smb-section-with-bgimage--right:not([class*=smb-section--]) > .c-container > .smb-section__lede-wrapper > .smb-section__lede { text-align: right; }
.smb-section-with-bgimage--right:not([class*=smb-section--]) > .c-container > .smb-section__lede-wrapper { display: block; }
@media (min-width: 640px) {
	.smb-section-with-bgimage__bgimage--sm { display: none; }
}
@media (min-width: 1024px) {
	.smb-section-with-bgimage__bgimage--md { display: none; }
}