/*
 * SWELL Blocks Portable - article style
 * SWELLデフォルト設定（h2=バンド / h3=下線グラデ / h4=左線 / 引用=シンプル /
 * 本文 SP:4vw PC:16px / 游ゴシック）を静的CSS化したもの。
 * .post_content と .CMS-ARTICLE-CONTENT の両方に適用されます。
 * 色は --color_htag（既定でメインカラー）で一括変更できます。
 */

/* ===== 本文フォントサイズ（SWELL: post_font_size SP=4vw / PC=16px） ===== */
:root,
.editor-styles-wrapper {
	--swl-fz--content: 4vw;
	--swl-font_family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--swl-font_weight: 500;
}
@media (min-width: 960px) {
	:root,
	.editor-styles-wrapper {
		--swl-fz--content: 16px;
	}
}

.post_content,
.CMS-ARTICLE-CONTENT {
	font-family: var(--swl-font_family);
	font-weight: var(--swl-font_weight);
}

/* ===== 記事コンテナ（CMSラッパー用。テーマの .post_content には幅を強制しない） ===== */
.CMS-ARTICLE-CONTENT {
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
	color: var(--color_text);
}

/* SPはコンテナ余白4vw（SWELLの --swl-pad_container 相当）。h2バンドはここから2vwはみ出す */
@media (max-width: 959px) {
	.post_content,
	.CMS-ARTICLE-CONTENT {
		padding-left: var(--swl-pad_container, 4vw);
		padding-right: var(--swl-pad_container, 4vw);
	}
}
/* PCでは h2 のはみ出しを無効化（テーマ側にコンテナ余白がない前提で安全側に） */
@media (min-width: 960px) {
	.post_content,
	.CMS-ARTICLE-CONTENT {
		--swl-h2-margin--x: 0px;
	}
}

/* ===== 見出しデザイン（SWELLデフォルト） ===== */

/* h2: バンド（band） */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)),
.CMS-ARTICLE-CONTENT h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)),
.editor-styles-wrapper h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	background: var(--color_htag, var(--color_main));
	padding: .75em 1em;
	color: #fff;
}
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.CMS-ARTICLE-CONTENT h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.editor-styles-wrapper h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
	content: "";
	position: absolute;
	display: block;
	pointer-events: none;
	top: -4px;
	left: 0;
	width: 100%;
	height: calc(100% + 4px);
	box-sizing: content-box;
	border-top: solid 2px var(--color_htag, var(--color_main));
	border-bottom: solid 2px var(--color_htag, var(--color_main));
}

/* h3: メインカラー下線＋グレー（main_gray） */
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)),
.CMS-ARTICLE-CONTENT h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)),
.editor-styles-wrapper h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	padding: 0 .5em .5em;
}
.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.CMS-ARTICLE-CONTENT h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
.editor-styles-wrapper h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
	content: "";
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--color_htag, var(--color_main)) 0%, var(--color_htag, var(--color_main)) 29.3%, rgba(150, 150, 150, .2) 29.3%, rgba(150, 150, 150, .2) 100%);
}

/* h4: 左ライン（left_line） */
.post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)),
.CMS-ARTICLE-CONTENT h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)),
.editor-styles-wrapper h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	padding: 0 0 0 16px;
	border-left: solid 2px var(--color_htag, var(--color_main));
}

/* ===== 引用（simple） ===== */
.post_content blockquote,
.CMS-ARTICLE-CONTENT blockquote {
	padding: 1.5em 2em 1.5em 3em;
}
.post_content blockquote::before,
.CMS-ARTICLE-CONTENT blockquote::before {
	content: "";
	display: block;
	width: 5px;
	height: calc(100% - 3em);
	top: 1.5em;
	left: 1.5em;
	border-left: solid 1px rgba(180, 180, 180, .75);
	border-right: solid 1px rgba(180, 180, 180, .75);
}

/* ===== Google Map ブロック（旧Custom CSSからの引き継ぎ） ===== */
.cms-map-block {
	margin: 2.5em 0;
}
.cms-map-title {
	margin: 0 0 .8em;
	padding-left: 12px;
	border-left: 3px solid var(--color_htag, var(--color_main));
	color: var(--color_text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}
.cms-map-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 360px;
	overflow: hidden;
	border: 1px solid var(--color_border--table, #dcdcdc);
	background: #f7f7f7;
}
.cms-map-frame iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}
@media (max-width: 768px) {
	.cms-map-title {
		font-size: 16px;
	}
	.cms-map-frame {
		aspect-ratio: auto;
		height: 320px;
		min-height: 320px;
	}
}