@charset "utf-8";

/*====================================================
SETTINGS
====================================================*/
/* BASE
----------------------------------------------- */
.mce-content-body,
.editor-styles-wrapper,
.wp-block-post-content,
.l-BlockContent {
	font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* Font Size
----------------------------------------------- */
.mce-content-body > *,
.editor-styles-wrapper > *,
.l-BlockContent > * {
	font-size: 17px;
}

/* 要素間のマージン
----------------------------------------------- */
.mce-content-body > * + *,
.editor-styles-wrapper > * + *,
.wp-block-post-content > * + *, /*管理画面エディター用*/
.l-BlockContent > * + * {
	margin-top: 1.7em;
}
.mce-content-body > * ,
.editor-styles-wrapper > * ,
.wp-block-post-content > * , /*管理画面エディター用*/
.l-BlockContent > * {
	margin-bottom: 1.4em;
}

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

/* iframe
----------------------------------------------- */
.mce-content-body iframe,
.editor-styles-wrapper iframe,
.l-BlockContent iframe {
	width: 100%;
	aspect-ratio: 16/9;
}

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

/* 管理画面ページタイトル
----------------------------------------------- */
.mce-content-body h1,
.editor-styles-wrapper h1,
.l-BlockContent h1 {
	font-weight: bold;
	font-size: 32px;
}

/*====================================================
H2
====================================================*/
.mce-content-body h2,
.editor-styles-wrapper h2,
.wp-block-post-content h2,
.l-BlockContent h2 {
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.35;
	margin: 48px 0 16px;
	font-weight: 600;
}

/*====================================================
H3
====================================================*/
.mce-content-body h3,
.editor-styles-wrapper h3,
.wp-block-post-content h3,
.l-BlockContent h3 {
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.35;
	margin: 32px 0 12px;
	font-weight: 600;
}

/*====================================================
H4
====================================================*/
.mce-content-body h4,
.editor-styles-wrapper h4,
.wp-block-post-content h4,
.l-BlockContent h4 {
	font-size: clamp(18px, 1.9vw, 22px);
	line-height: 1.5;
	margin: 24px 0 12px;
	font-weight: 600;
}

/*====================================================
UNDERLINE
====================================================*/
.mce-content-body u,
.editor-styles-wrapper u,
.wp-block-post-content u,
.l-BlockContent u {
	text-decoration: underline;
}

/*====================================================
BLOCKQUOTE (引用)
====================================================*/
.mce-content-body blockquote,
.editor-styles-wrapper blockquote,
.wp-block-post-content blockquote,
.l-BlockContent blockquote {
	position: relative;
	margin: 48px 0;
	padding: 50px 20px 40px 20px;
	background-color: #fff;
}

/* 上部左の開き引用符 */
.mce-content-body blockquote::before,
.editor-styles-wrapper blockquote::before,
.wp-block-post-content blockquote::before,
.l-BlockContent blockquote::before {
	content: '"';
	position: absolute;
	top: 7px;
	left: 0;
	font-size: 80px;
	line-height: 1;
	color: rgba(0, 179, 214, 0.3);
	font-family: serif;
	font-weight: 300;
	z-index: 0;
}

/* 上部の水平線 */
.mce-content-body blockquote::after,
.editor-styles-wrapper blockquote::after,
.wp-block-post-content blockquote::after,
.l-BlockContent blockquote::after {
	content: '';
	position: absolute;
	top: 26px;
	left: 60px;
	right: 20px;
	height: 1px;
	background-color: rgba(0, 179, 214, 0.3);
	z-index: 0;
}

/* 引用テキスト */
.mce-content-body blockquote p,
.editor-styles-wrapper blockquote p,
.wp-block-post-content blockquote p,
.l-BlockContent blockquote p {
	position: relative;
	margin: 0;
	padding: 0;
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 1.8;
	color: #2A2F30;
	z-index: 1;
}

.mce-content-body blockquote p:not(:last-child),
.editor-styles-wrapper blockquote p:not(:last-child),
.wp-block-post-content blockquote p:not(:last-child),
.l-BlockContent blockquote p:not(:last-child) {
	margin-bottom: 16px;
}

/* cite要素がない場合、最後のp要素に下部装飾を追加 */
.mce-content-body blockquote p:last-of-type,
.editor-styles-wrapper blockquote p:last-of-type,
.wp-block-post-content blockquote p:last-of-type,
.l-BlockContent blockquote p:last-of-type {
	margin-bottom: 0;
	padding-bottom: 50px;
}

.mce-content-body blockquote p:last-of-type::before,
.editor-styles-wrapper blockquote p:last-of-type::before,
.wp-block-post-content blockquote p:last-of-type::before,
.l-BlockContent blockquote p:last-of-type::before {
	content: '';
	position: absolute;
	bottom: 27px;
	left: 0;
	right: 60px;
	height: 1px;
	background-color: rgba(0, 179, 214, 0.3);
}

.mce-content-body blockquote p:last-of-type::after,
.editor-styles-wrapper blockquote p:last-of-type::after,
.wp-block-post-content blockquote p:last-of-type::after,
.l-BlockContent blockquote p:last-of-type::after {
	content: '"';
	position: absolute;
	right: 0;
	bottom: -45px;
	font-size: 80px;
	line-height: 1;
	color: rgba(0, 179, 214, 0.3);
	font-family: serif;
	font-weight: 300;
}

/* cite要素がある場合は、最後のp要素の装飾を無効化 */
.mce-content-body blockquote:has(cite) p:last-of-type,
.editor-styles-wrapper blockquote:has(cite) p:last-of-type,
.wp-block-post-content blockquote:has(cite) p:last-of-type,
.l-BlockContent blockquote:has(cite) p:last-of-type {
	padding-bottom: 0;
}

.mce-content-body blockquote:has(cite) p:last-of-type::before,
.editor-styles-wrapper blockquote:has(cite) p:last-of-type::before,
.wp-block-post-content blockquote:has(cite) p:last-of-type::before,
.l-BlockContent blockquote:has(cite) p:last-of-type::before,
.mce-content-body blockquote:has(cite) p:last-of-type::after,
.editor-styles-wrapper blockquote:has(cite) p:last-of-type::after,
.wp-block-post-content blockquote:has(cite) p:last-of-type::after,
.l-BlockContent blockquote:has(cite) p:last-of-type::after {
	display: none;
}

/* 著者名（cite要素） */
.mce-content-body blockquote cite,
.editor-styles-wrapper blockquote cite,
.wp-block-post-content blockquote cite,
.l-BlockContent blockquote cite {
	display: block;
	margin-top: 24px;
	text-align: right;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.6;
	color: #2A2F30;
	font-style: normal;
	position: relative;
	padding-right: 50px;
	padding-bottom: 50px;
	z-index: 1;
}

/* 下部右の閉じ引用符 */
.mce-content-body blockquote cite::after,
.editor-styles-wrapper blockquote cite::after,
.wp-block-post-content blockquote cite::after,
.l-BlockContent blockquote cite::after {
	content: '"';
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 80px;
	line-height: 1;
	color: rgba(0, 179, 214, 0.3);
	font-family: serif;
	font-weight: 300;
	z-index: 0;
}

/* 下部の水平線 */
.mce-content-body blockquote cite::before,
.editor-styles-wrapper blockquote cite::before,
.wp-block-post-content blockquote cite::before,
.l-BlockContent blockquote cite::before {
	content: '';
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 60px;
	height: 1px;
	background-color: rgba(0, 179, 214, 0.3);
	z-index: 0;
}

@media screen and (min-width: 768px) {
	.mce-content-body blockquote,
	.editor-styles-wrapper blockquote,
	.wp-block-post-content blockquote,
	.l-BlockContent blockquote {
		padding: 60px 30px 50px 30px;
	}

	.mce-content-body blockquote::before,
	.editor-styles-wrapper blockquote::before,
	.wp-block-post-content blockquote::before,
	.l-BlockContent blockquote::before {
		font-size: 100px;
	}

	.mce-content-body blockquote::after,
	.editor-styles-wrapper blockquote::after,
	.wp-block-post-content blockquote::after,
	.l-BlockContent blockquote::after {
		top: 33px;
		left: 80px;
		right: 30px;
	}

	.mce-content-body blockquote cite,
	.editor-styles-wrapper blockquote cite,
	.wp-block-post-content blockquote cite,
	.l-BlockContent blockquote cite {
		padding-right: 70px;
		padding-bottom: 60px;
	}

	.mce-content-body blockquote cite::after,
	.editor-styles-wrapper blockquote cite::after,
	.wp-block-post-content blockquote cite::after,
	.l-BlockContent blockquote cite::after {
		font-size: 100px;
	}

	.mce-content-body blockquote cite::before,
	.editor-styles-wrapper blockquote cite::before,
	.wp-block-post-content blockquote cite::before,
	.l-BlockContent blockquote cite::before {
		right: 80px;
	}

	.mce-content-body blockquote p:last-of-type,
	.editor-styles-wrapper blockquote p:last-of-type,
	.wp-block-post-content blockquote p:last-of-type,
	.l-BlockContent blockquote p:last-of-type {
		padding-bottom: 60px;
	}

	.mce-content-body blockquote p:last-of-type::before,
	.editor-styles-wrapper blockquote p:last-of-type::before,
	.wp-block-post-content blockquote p:last-of-type::before,
	.l-BlockContent blockquote p:last-of-type::before {
		right: 80px;
	}

	.mce-content-body blockquote p:last-of-type::after,
	.editor-styles-wrapper blockquote p:last-of-type::after,
	.wp-block-post-content blockquote p:last-of-type::after,
	.l-BlockContent blockquote p:last-of-type::after {
		font-size: 100px;
	}
}

/*====================================================
INLINE COLOR CLASSES
====================================================*/
/* プライマリー（青） */
.mce-content-body .has-inline-color.has-primary-color,
.editor-styles-wrapper .has-inline-color.has-primary-color,
.wp-block-post-content .has-inline-color.has-primary-color,
.l-BlockContent .has-inline-color.has-primary-color,
.mce-content-body mark.has-inline-color.has-primary-color,
.editor-styles-wrapper mark.has-inline-color.has-primary-color,
.wp-block-post-content mark.has-inline-color.has-primary-color,
.l-BlockContent mark.has-inline-color.has-primary-color {
	color: #00B3D6 !important;
}

/* セカンダリー（赤） */
.mce-content-body .has-inline-color.has-secondary-color,
.editor-styles-wrapper .has-inline-color.has-secondary-color,
.wp-block-post-content .has-inline-color.has-secondary-color,
.l-BlockContent .has-inline-color.has-secondary-color,
.mce-content-body mark.has-inline-color.has-secondary-color,
.editor-styles-wrapper mark.has-inline-color.has-secondary-color,
.wp-block-post-content mark.has-inline-color.has-secondary-color,
.l-BlockContent mark.has-inline-color.has-secondary-color {
	color: #EC6D6D !important;
}

/* アクセント（紫） */
.mce-content-body .has-inline-color.has-accent-color,
.editor-styles-wrapper .has-inline-color.has-accent-color,
.wp-block-post-content .has-inline-color.has-accent-color,
.l-BlockContent .has-inline-color.has-accent-color,
.mce-content-body mark.has-inline-color.has-accent-color,
.editor-styles-wrapper mark.has-inline-color.has-accent-color,
.wp-block-post-content mark.has-inline-color.has-accent-color,
.l-BlockContent mark.has-inline-color.has-accent-color {
	color: #66507F !important;
}

/* 黒 */
.mce-content-body .has-inline-color.has-black-color,
.editor-styles-wrapper .has-inline-color.has-black-color,
.wp-block-post-content .has-inline-color.has-black-color,
.l-BlockContent .has-inline-color.has-black-color,
.mce-content-body mark.has-inline-color.has-black-color,
.editor-styles-wrapper mark.has-inline-color.has-black-color,
.wp-block-post-content mark.has-inline-color.has-black-color,
.l-BlockContent mark.has-inline-color.has-black-color {
	color: #2A2F30 !important;
}

/* 白 */
.mce-content-body .has-inline-color.has-white-color,
.editor-styles-wrapper .has-inline-color.has-white-color,
.wp-block-post-content .has-inline-color.has-white-color,
.l-BlockContent .has-inline-color.has-white-color,
.mce-content-body mark.has-inline-color.has-white-color,
.editor-styles-wrapper mark.has-inline-color.has-white-color,
.wp-block-post-content mark.has-inline-color.has-white-color,
.l-BlockContent mark.has-inline-color.has-white-color {
	color: #FFFFFF !important;
}

/* グレー（濃） */
.mce-content-body .has-inline-color.has-gray-dark-color,
.editor-styles-wrapper .has-inline-color.has-gray-dark-color,
.wp-block-post-content .has-inline-color.has-gray-dark-color,
.l-BlockContent .has-inline-color.has-gray-dark-color,
.mce-content-body mark.has-inline-color.has-gray-dark-color,
.editor-styles-wrapper mark.has-inline-color.has-gray-dark-color,
.wp-block-post-content mark.has-inline-color.has-gray-dark-color,
.l-BlockContent mark.has-inline-color.has-gray-dark-color {
	color: #999999 !important;
}

/* グレー（中） */
.mce-content-body .has-inline-color.has-gray-color,
.editor-styles-wrapper .has-inline-color.has-gray-color,
.wp-block-post-content .has-inline-color.has-gray-color,
.l-BlockContent .has-inline-color.has-gray-color,
.mce-content-body mark.has-inline-color.has-gray-color,
.editor-styles-wrapper mark.has-inline-color.has-gray-color,
.wp-block-post-content mark.has-inline-color.has-gray-color,
.l-BlockContent mark.has-inline-color.has-gray-color {
	color: #B7B7B7 !important;
}

/* グレー（薄） */
.mce-content-body .has-inline-color.has-gray-light-color,
.editor-styles-wrapper .has-inline-color.has-gray-light-color,
.wp-block-post-content .has-inline-color.has-gray-light-color,
.l-BlockContent .has-inline-color.has-gray-light-color,
.mce-content-body mark.has-inline-color.has-gray-light-color,
.editor-styles-wrapper mark.has-inline-color.has-gray-light-color,
.wp-block-post-content mark.has-inline-color.has-gray-light-color,
.l-BlockContent mark.has-inline-color.has-gray-light-color {
	color: #F5F5F5 !important;
}

/*====================================================
p
====================================================*/

/*====================================================
UL
====================================================*/
.mce-content-body ul > li,
.editor-styles-wrapper ul > li,
.l-BlockContent ul > li {
	position: relative;
	padding-left: 1em;
}
.mce-content-body ul > li::before,
.editor-styles-wrapper ul > li::before,
.l-BlockContent ul > li::before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1em;
}

/*====================================================
OL
====================================================*/
.mce-content-body ol,
.editor-styles-wrapper ol,
.l-BlockContent ol {
	position: relative;
	counter-reset: number 0;
}

.mce-content-body ol > li,
.editor-styles-wrapper ol > li,
.l-BlockContent ol > li {
	position: relative;
	padding-left: 1.5em;
}
.mce-content-body ol > li::before,
.editor-styles-wrapper ol > li::before,
.l-BlockContent ol > li::before {
	position: absolute;
	top: 0;
	left: 0;
	counter-increment: number 1;
	content: counter(number) ".";
	width: 1.5em;
	text-align: right;
}

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

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

/*====================================================
TABLE
====================================================*/
/* .mce-content-body table,
.editor-styles-wrapper table,
.l-BlockContent table {
} */

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

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

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

/*====================================================
FIGCAPTION (キャプション)
====================================================*/
.mce-content-body figcaption,
.editor-styles-wrapper figcaption,
.wp-block-post-content figcaption,
.l-BlockContent figcaption {
	text-align: center;
	font-size: clamp(13px, 1.5vw, 14px);
	line-height: 1.6;
	margin-top: 8px;
	opacity: 0.8;
}

/*====================================================
CHECKLIST BOX PATTERN (VALUE FEATURE)
====================================================*/
.p-value-feature-checklist-pattern {
	margin-top: 32px;
	margin-bottom: 32px;
}

/* タイトル部分とコンテンツ部分の間のマージンを削除 */
.p-value-feature-checklist-pattern .p-value-feature-box1__txt4 + .wp-block-group,
.p-value-feature-checklist-pattern .p-value-feature-box1__txt4 + * {
	margin-top: 0 !important;
}

.p-value-feature-box1__txt4 {
	color: var(--color-txt-white);
	background-color: var(--color-bg-accent);
	border-radius: 8px 8px 0 0;
	padding: 10px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0 !important;
}

.p-value-feature-box1__checklist {
	background-color: var(--color-bg-white);
	border-radius: 0 0 8px 8px;
	border: 1px solid var(--color-border-accent);
	padding: 20px;
	margin-top: 0 !important;
}
@media screen and (min-width: 768px) {
	.p-value-feature-box1__checklist {
		padding: 30px 20px;
	}
}

/* Primary（青）バージョン */
.p-value-feature-checklist-pattern-primary {
	margin-top: 32px;
	margin-bottom: 32px;
}

.p-value-feature-checklist-pattern-primary .p-value-feature-box1__txt4--primary + .wp-block-group,
.p-value-feature-checklist-pattern-primary .p-value-feature-box1__txt4--primary + * {
	margin-top: 0 !important;
}

.p-value-feature-box1__txt4--primary {
	color: var(--color-txt-white);
	background-color: var(--color-bg-primary);
	border-radius: 8px 8px 0 0;
	padding: 10px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0 !important;
}

.p-value-feature-box1__checklist--primary {
	background-color: var(--color-bg-white);
	border-radius: 0 0 8px 8px;
	border: 1px solid var(--color-border-primary);
	padding: 20px;
	margin-top: 0 !important;
}
@media screen and (min-width: 768px) {
	.p-value-feature-box1__checklist--primary {
		padding: 30px 20px;
	}
}

/* Secondary（赤）バージョン */
.p-value-feature-checklist-pattern-secondary {
	margin-top: 32px;
	margin-bottom: 32px;
}

.p-value-feature-checklist-pattern-secondary .p-value-feature-box1__txt4--secondary + .wp-block-group,
.p-value-feature-checklist-pattern-secondary .p-value-feature-box1__txt4--secondary + * {
	margin-top: 0 !important;
}

.p-value-feature-box1__txt4--secondary {
	color: var(--color-txt-white);
	background-color: var(--color-bg-secondary);
	border-radius: 8px 8px 0 0;
	padding: 10px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0 !important;
}

.p-value-feature-box1__checklist--secondary {
	background-color: var(--color-bg-white);
	border-radius: 0 0 8px 8px;
	border: 1px solid var(--color-border-secondary);
	padding: 20px;
	margin-top: 0 !important;
}
@media screen and (min-width: 768px) {
	.p-value-feature-box1__checklist--secondary {
		padding: 30px 20px;
	}
}

/*====================================================
REFERENCE BOX (VALUE FEATURE)
====================================================*/
.p-value-feature-box2__reference,
.p-value-feature-box2__reference.wp-block-group {
	border: 1px solid var(--color-border-accent);
	border-top-width: 11px;
	background-color: var(--color-bg-accent-light3);
	border-radius: 8px;
	padding: 20px 20px 40px;
	margin-top: 46px;
}
@media screen and (min-width: 768px) {
	.p-value-feature-box2__reference,
	.p-value-feature-box2__reference.wp-block-group {
		border-top-width: 16px;
	}
}

.p-value-feature-box2-reference__ttl {
	display: inline-block;
	border-radius: 8px;
	background-color: var(--color-bg-accent);
	color: var(--color-txt-white);
	text-align: center;
	padding-inline: 17px;
	font-weight: bold;
	line-height: 1.7;
	font-size: 18px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.p-value-feature-box2-reference__body {
	line-height: 1.85;
	font-weight: 500;
	font-size: 16px;
	margin-top: 30px;
}
@media screen and (max-width: 767px) {
	.p-value-feature-box2-reference__body {
		margin-top: 16px;
	}
}

/* 最初の段落のマージンを調整 */
.p-value-feature-box2__reference > .wp-block-heading + .wp-block-paragraph,
.p-value-feature-box2__reference > .wp-block-group > .wp-block-heading + .wp-block-paragraph {
	margin-top: 30px;
}
@media screen and (max-width: 767px) {
	.p-value-feature-box2__reference > .wp-block-heading + .wp-block-paragraph,
	.p-value-feature-box2__reference > .wp-block-group > .wp-block-heading + .wp-block-paragraph {
		margin-top: 16px;
	}
}

/*====================================================
REFERENCE LIST BOX (VALUE FEATURE - 参考文献)
====================================================*/
/* 背景付きコンテンツボックスの基本スタイル */
.mce-content-body .p-value-feature-accent-wrap,
.editor-styles-wrapper .p-value-feature-accent-wrap,
.wp-block-post-content .p-value-feature-accent-wrap,
.l-BlockContent .p-value-feature-accent-wrap {
	background-color: var(--color-bg-accent-light3);
	border-radius: 8px;
	padding: 30px 20px;
}

@media screen and (min-width: 768px) {
	.mce-content-body .p-value-feature-accent-wrap,
	.editor-styles-wrapper .p-value-feature-accent-wrap,
	.wp-block-post-content .p-value-feature-accent-wrap,
	.l-BlockContent .p-value-feature-accent-wrap {
		padding: 30px;
	}
}

/* html :where(.wp-block)のマージンを上書き（2つ下のdiv部分） */
.mce-content-body .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content,
.editor-styles-wrapper .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content,
.wp-block-post-content .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content,
.l-BlockContent .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* 参考文献ボックスのテキストサイズ */
.mce-content-body .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content p,
.editor-styles-wrapper .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content p,
.wp-block-post-content .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content p,
.l-BlockContent .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content p {
	font-size: 14px;
}

@media screen and (min-width: 768px) {
	.mce-content-body .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content p,
	.editor-styles-wrapper .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content p,
	.wp-block-post-content .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content p,
	.l-BlockContent .p-value-feature-box1__wrap--reference .p-value-feature-box1__wrap--content p {
		font-size: 15px;
	}
}

/*====================================================
ALERT BOX (VALUE ABOUT)
====================================================*/
.p-value-about-sec1__box {
	border-radius: 8px;
	border: 1px solid var(--color-border-secondary);
	background-color: #FFF6F7;
	color: var(--color-txt-secondary);
	font-weight: bold;
	line-height: 1.85;
	font-size: clamp(16px, 1.18vw, 17px);
	padding: 20px;
	margin-top: 20px;
}
@media screen and (min-width: 768px) {
	.p-value-about-sec1__box {
		padding: 20px 30px;
		margin-top: 30px;
	}
}

/*====================================================
SCROLLABLE TABLE (VALUE SELF)
====================================================*/
.scroll-hint-shadow-wrap {
	margin-top: 15px;
}

.p-value-self-sec1__scroll {
	overflow-y: auto;
	position: relative;
}

/* WordPressテーブルブロックのラッパー調整 */
.p-value-self-sec1__table.wp-block-table {
	margin: 0;
	display: flex;
	flex-direction: column;
}
.p-value-self-sec1__table.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	display: grid;
	grid-template-columns: 152px 308px 360px;
}
.p-value-self-sec1__table.wp-block-table table thead,
.p-value-self-sec1__table.wp-block-table table tbody,
.p-value-self-sec1__table.wp-block-table table tfoot,
.p-value-self-sec1__table.wp-block-table table tr {
	display: contents;
}
.p-value-self-sec1__table.wp-block-table table th,
.p-value-self-sec1__table.wp-block-table table td {
	display: block;
	padding: 10px 20px;
	border: none !important;
}
.p-value-self-sec1__table.wp-block-table table thead th {
	text-align: left;
	background-color: var(--color-bg-accent);
	color: var(--color-txt-white);
	font-weight: bold;
	font-size: clamp(16px, 1.18vw, 17px);
}
.p-value-self-sec1__table.wp-block-table table tr:nth-of-type(odd) td {
	background-color: var(--color-bg-white);
}
.p-value-self-sec1__table.wp-block-table table tr:nth-of-type(even) td {
	background-color: #F5F4F7;
}

/*====================================================
FAQ ITEM
====================================================*/
.p-faq__item {
	cursor: pointer;
	border-radius: 8px;
	background-color: var(--color-bg-accent-light3);
	padding: 15px 10px;
}
@media screen and (min-width: 768px) {
	.p-faq__item {
		padding: 25px 20px;
	}
}

.p-faq__question {
	--iconSize: 18px;
	display: grid;
	grid-template-columns: 1fr var(--iconSize);
	align-items: center;
	column-gap: 20px;
	font-weight: bold;
	line-height: 1.85;
	font-size: 16px;
	padding-inline: 10px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	position: relative;
}
@media screen and (min-width: 768px) {
	.p-faq__question {
		padding-inline: 0;
	}
}
.p-faq__question::after {
	content: "";
	aspect-ratio: 1;
	background: url("../img/common/common_icon_right_black.png") no-repeat center center/contain;
	rotate: 90deg;
	transition: all 0.4s ease;
	transition-property: rotate;
	width: var(--iconSize);
	height: var(--iconSize);
}

.p-faq__item.isActive .p-faq__question::after {
	rotate: 270deg;
}

.p-faq__answer,
.p-faq__answer.wp-block-group {
	display: grid;
	grid-template-rows: 0fr !important;
	transition: all 0.4s ease;
	transition-property: grid-template-rows;
	overflow: hidden;
	display: none;
}
.isActive .p-faq__answer.wp-block-group  {
	display: block;
}

/* エディタ内でのみ適用 */
.editor-styles-wrapper .p-faq__item.isActive .p-faq__answer,
.editor-styles-wrapper .p-faq__item.isActive .p-faq__answer.wp-block-group,
.wp-block-post-content .p-faq__item.isActive .p-faq__answer,
.wp-block-post-content .p-faq__item.isActive .p-faq__answer.wp-block-group {
	grid-template-rows: 1fr !important;
}

.p-faq__answer--inner,
.p-faq__answer--inner.wp-block-group {
	overflow: hidden;
	min-height: 0;
}

.p-faq__answer--content {
	border-top: 2px dotted #D4D5D6;
	padding-top: 15px;
	padding-inline: 10px;
	margin-top: 15px;
}
@media screen and (min-width: 768px) {
	.p-faq__answer--content {
		padding-inline: 0;
	}
}

.p-faq__answer--txt {
	line-height: 1.85;
	font-size: 16px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

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

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

/* #tabs-5-posts, #tabs-5-allPatterns {
	display: none;
} */

mark {
    background-color: #ffdbdb;
}

/* エディタのポップオーバー内のマークアイコン */
.components-popover__content .dashicon.tadv-mark-icon,
.components-dropdown-menu__menu .dashicon.tadv-mark-icon,
.dashicon.tadv-mark-icon {
    background-color: #ffdbdb !important;
}

/*====================================================
TARGET AUDIENCE (こんな人に読んでほしい)
====================================================*/
.mce-content-body .p-single-articles__target-audience--list,
.editor-styles-wrapper .p-single-articles__target-audience--list,
.wp-block-post-content .p-single-articles__target-audience--list,
.l-BlockContent .p-single-articles__target-audience--list {
	list-style-type: circle;
	margin: 0;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.7;
	color: #333333;
}

.mce-content-body .p-single-articles__target-audience--item,
.editor-styles-wrapper .p-single-articles__target-audience--item,
.wp-block-post-content .p-single-articles__target-audience--item,
.l-BlockContent .p-single-articles__target-audience--item {
	margin-bottom: 8px;
}

.mce-content-body .p-single-articles__target-audience--item:last-child,
.editor-styles-wrapper .p-single-articles__target-audience--item:last-child,
.wp-block-post-content .p-single-articles__target-audience--item:last-child,
.l-BlockContent .p-single-articles__target-audience--item:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.mce-content-body .p-single-articles__target-audience--list,
	.editor-styles-wrapper .p-single-articles__target-audience--list,
	.wp-block-post-content .p-single-articles__target-audience--list,
	.l-BlockContent .p-single-articles__target-audience--list {
		font-size: 16px;
		padding-left: 24px;
	}
}