@charset "utf-8";

/*====================================================================================================
SETTINGS
====================================================================================================*/
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) img,
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) svg,
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) iframe {
	width: auto;
	max-width: 100%;
}

:where(.mce-content-body, .editor-styles-wrapper, .wp-block-post-content, .l-BlockContent) > * + * {
	margin-top: 1.8em;
	margin-bottom: 1.6em;
}

:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) > * {
	font-size: clamp(14px, 15 / 1440 * 100vw, 15px);
}

/* クラシックエディター用設定
----------------------------------------------- */
.mce-content-body {
	padding: 10px;
}

/* ページタイトル
----------------------------------------------- */
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) h1 {
	font-weight: bold;
	font-size: 24px;
}

/*====================================================================================================
H2
====================================================================================================*/
h2:is(.is-style-default, :not([class*="is-style-"])):where(.mce-content-body *, .editor-styles-wrapper *, .l-BlockContent *) {
	border-left: 2px solid var(--color-border-primary);
	font-weight: bold;
	line-height: 1.5;
	font-size: clamp(18px, 24 / 1440 * 100vw, 24px);
	padding: clamp(10px, 10 / 1440 * 100vw, 10px) clamp(12px, 22 / 1440 * 100vw, 22px) 10px;
}

/*====================================================================================================
H3
====================================================================================================*/
h3:is(.is-style-default, :not([class*="is-style-"])):where(.mce-content-body *, .editor-styles-wrapper *, .l-BlockContent *) {
	border-bottom: 1px solid var(--color-border-primary);
	font-weight: bold;
	font-size: clamp(16px, 24 / 1440 * 100vw, 24px);
	padding-bottom: clamp(8px, 11 / 1440 * 100vw, 11px);
}

/*====================================================================================================
H4
====================================================================================================*/
h4:is(.is-style-default, :not([class*="is-style-"])):where(.mce-content-body *, .editor-styles-wrapper *, .l-BlockContent *) {
	font-weight: bold;
	font-size: clamp(14px, 21 / 1440 * 100vw, 21px);
}

/*====================================================================================================
H5
====================================================================================================*/
h5:is(.is-style-default, :not([class*="is-style-"])):where(.mce-content-body *, .editor-styles-wrapper *, .l-BlockContent *) {
	font-weight: bold;
	font-size: clamp(14px, 18 / 1440 * 100vw, 18px);
}

/*====================================================================================================
UL
====================================================================================================*/
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) ul > li:not([class]) {
	padding-left: 1em;
	text-indent: -1em;
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) ul > li:not([class])::before {
	content: "・";
}

/*====================================================================================================
OL
====================================================================================================*/
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) ol:not([class]) {
	position: relative;
	counter-reset: number 0;
}

:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) ol > li:not([class]) {
	position: relative;
	padding-left: 1.5em;
}

:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) ol > li:not([class])::before {
	position: absolute;
	top: 100%;
	left: 0;
	translate: 0 -100%;
	counter-increment: number 1;
	content: counter(number) ".";
	width: 1.5em;
	text-align: right;
}

/*====================================================================================================
A
====================================================================================================*/
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) a:not([class]) {
	text-decoration: underline;
	transition: all 0.5s ease;
	transition-property: opacity;
}

:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) a:not([class]):focus-visible {
	opacity: 0.7;
}

@media (any-hover: hover) {
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) a:not([class]):hover {
		opacity: 0.7;
	}
}

/*====================================================================================================
BLOCKQUOTE
====================================================================================================*/
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) blockquote {
}

/*====================================================================================================
IMG
====================================================================================================*/
/* left */
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) img.alignleft {
	margin-right: auto;
}

/* center */
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) img.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* right */
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) img.alignright {
	margin-left: auto;
}

/*====================================================================================================
figure
====================================================================================================*/
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) figcaption {
	font-size: 12px;
	text-align: right;
	margin-top: 1em;
}

/*====================================================================================================
LazyBlock
====================================================================================================*/

/*====================================================================================================
GAP
====================================================================================================*/
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap100 {
	gap: clamp(60px, 100 / 1440 * 100vw, 100px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap90 {
	gap: clamp(54px, 90 / 1440 * 100vw, 90px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap80 {
	gap: clamp(48px, 80 / 1440 * 100vw, 80px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap70 {
	gap: clamp(42px, 70 / 1440 * 100vw, 70px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap60 {
	gap: clamp(36px, 60 / 1440 * 100vw, 60px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap50 {
	gap: clamp(30px, 50 / 1440 * 100vw, 50px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap40 {
	gap: clamp(24px, 40 / 1440 * 100vw, 40px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap30 {
	gap: clamp(18px, 30 / 1440 * 100vw, 30px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap20 {
	gap: clamp(20px, 20 / 1440 * 100vw, 20px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .gap10 {
	gap: clamp(10px, 10 / 1440 * 100vw, 10px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap100 {
	row-gap: clamp(60px, 100 / 1440 * 100vw, 100px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap90 {
	row-gap: clamp(54px, 90 / 1440 * 100vw, 90px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap80 {
	row-gap: clamp(48px, 80 / 1440 * 100vw, 80px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap70 {
	row-gap: clamp(42px, 70 / 1440 * 100vw, 70px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap60 {
	row-gap: clamp(36px, 60 / 1440 * 100vw, 60px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap50 {
	row-gap: clamp(30px, 50 / 1440 * 100vw, 50px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap40 {
	row-gap: clamp(24px, 40 / 1440 * 100vw, 40px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap30 {
	row-gap: clamp(18px, 30 / 1440 * 100vw, 30px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap20 {
	row-gap: clamp(20px, 20 / 1440 * 100vw, 20px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .row-gap10 {
	row-gap: clamp(10px, 10 / 1440 * 100vw, 10px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap100 {
	column-gap: clamp(60px, 100 / 1440 * 100vw, 100px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap90 {
	column-gap: clamp(54px, 90 / 1440 * 100vw, 90px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap80 {
	column-gap: clamp(48px, 80 / 1440 * 100vw, 80px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap70 {
	column-gap: clamp(42px, 70 / 1440 * 100vw, 70px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap60 {
	column-gap: clamp(36px, 60 / 1440 * 100vw, 60px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap50 {
	column-gap: clamp(30px, 50 / 1440 * 100vw, 50px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap40 {
	column-gap: clamp(24px, 40 / 1440 * 100vw, 40px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap30 {
	column-gap: clamp(18px, 30 / 1440 * 100vw, 30px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap20 {
	column-gap: clamp(20px, 20 / 1440 * 100vw, 20px);
}
:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .column-gap10 {
	column-gap: clamp(10px, 10 / 1440 * 100vw, 10px);
}

@media screen and (max-width: 767px) {
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap100 {
		gap: clamp(60px, 100 / 1440 * 100vw, 100px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap90 {
		gap: clamp(54px, 90 / 1440 * 100vw, 90px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap80 {
		gap: clamp(48px, 80 / 1440 * 100vw, 80px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap70 {
		gap: clamp(42px, 70 / 1440 * 100vw, 70px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap60 {
		gap: clamp(36px, 60 / 1440 * 100vw, 60px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap50 {
		gap: clamp(30px, 50 / 1440 * 100vw, 50px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap40 {
		gap: clamp(24px, 40 / 1440 * 100vw, 40px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap30 {
		gap: clamp(18px, 30 / 1440 * 100vw, 30px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap20 {
		gap: clamp(20px, 20 / 1440 * 100vw, 20px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_gap10 {
		gap: clamp(10px, 10 / 1440 * 100vw, 10px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap100 {
		row-gap: clamp(60px, 100 / 1440 * 100vw, 100px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap90 {
		row-gap: clamp(54px, 90 / 1440 * 100vw, 90px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap80 {
		row-gap: clamp(48px, 80 / 1440 * 100vw, 80px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap70 {
		row-gap: clamp(42px, 70 / 1440 * 100vw, 70px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap60 {
		row-gap: clamp(36px, 60 / 1440 * 100vw, 60px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap50 {
		row-gap: clamp(30px, 50 / 1440 * 100vw, 50px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap40 {
		row-gap: clamp(24px, 40 / 1440 * 100vw, 40px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap30 {
		row-gap: clamp(18px, 30 / 1440 * 100vw, 30px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap20 {
		row-gap: clamp(20px, 20 / 1440 * 100vw, 20px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_row-gap10 {
		row-gap: clamp(10px, 10 / 1440 * 100vw, 10px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap100 {
		column-gap: clamp(60px, 100 / 1440 * 100vw, 100px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap90 {
		column-gap: clamp(54px, 90 / 1440 * 100vw, 90px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap80 {
		column-gap: clamp(48px, 80 / 1440 * 100vw, 80px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap70 {
		column-gap: clamp(42px, 70 / 1440 * 100vw, 70px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap60 {
		column-gap: clamp(36px, 60 / 1440 * 100vw, 60px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap50 {
		column-gap: clamp(30px, 50 / 1440 * 100vw, 50px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap40 {
		column-gap: clamp(24px, 40 / 1440 * 100vw, 40px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap30 {
		column-gap: clamp(18px, 30 / 1440 * 100vw, 30px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap20 {
		column-gap: clamp(20px, 20 / 1440 * 100vw, 20px);
	}
	:where(.mce-content-body, .editor-styles-wrapper, .l-BlockContent) .sp_column-gap10 {
		column-gap: clamp(10px, 10 / 1440 * 100vw, 10px);
	}
}

/*====================================================================================================
カスタムカラーパレットに設定した色用のCSS
====================================================================================================*/
/*=====雛形=====
.has-slug-color {
  color: #fff;
}
.has-slug-background-color {
  background: #fff;
}
==============*/