/* ===== ブロックデザインプリセット =====
 * .oc-page-content / .editor-styles-wrapper 内の WordPress 標準ブロックに
 * サイト全体で統一されたデザインを適用する。
 *
 * プリセットは <body class="oc-style--pattern-N"> で切り替わり、
 * CSS カスタムプロパティのセットが変わる仕組み。
 *
 * 新しいプリセットを追加するには:
 *   1. .oc-style--pattern-N セクションをコピーして変数を書き換え
 *   2. ACF「ブロックデザインプリセット」の choices に追加
 */

/* ===== Pattern 1（法律事務所S 既定）: セリフ見出し・赤アクセント・落ち着いた料金表 =====
 * サイト全体（下層ページ）のトーンに合わせた、信頼感重視の控えめなデザイン。
 * 色は WordPress Preset（--wp--preset--color--primary = #b01d3a）を参照する。 */
.oc-style--pattern-1 {
	/* h2：赤の下線アクセント（塗りバンドは使わない） */
	--oc-h2-color: var(--wp--preset--color--text, #333333);
	--oc-h2-bg: transparent;
	--oc-h2-radius: 0;
	--oc-h2-padding: 0 0 0.75rem;
	--oc-h2-border: none;
	--oc-h2-border-left: none;
	--oc-h2-border-bottom: 2px solid var(--wp--preset--color--primary, #b01d3a);

	/* h3：赤の左ボーダー */
	--oc-h3-color: var(--wp--preset--color--text, #333333);
	--oc-h3-bg: transparent;
	--oc-h3-border-left: 4px solid var(--wp--preset--color--primary, #b01d3a);
	--oc-h3-padding: 0.15rem 0 0.15rem 0.9rem;
	--oc-h3-after-border: none;
	--oc-h3-after-bottom: 0;

	/* h4：赤の破線下線 */
	--oc-h4-color: var(--wp--preset--color--text, #333333);
	--oc-h4-border-bottom: 1px dashed var(--wp--preset--color--primary, #b01d3a);
	--oc-h4-padding-bottom: 0.6rem;

	/* h5 */
	--oc-h5-color: var(--wp--preset--color--primary, #b01d3a);

	/* リスト：小さめの赤丸マーカー */
	--oc-list-marker-bg: var(--wp--preset--color--primary, #b01d3a);
	--oc-list-marker-radius: 50%;
	--oc-list-marker-width: 0.5rem;
	--oc-list-marker-height: 0.5rem;

	/* テーブル：赤ヘッダー＋淡いベージュの見出し列＋細いグレー罫線 */
	--oc-table-radius: 0;
	--oc-table-th-bg: var(--wp--preset--color--primary, #b01d3a);
	--oc-table-th-color: #fff;
	--oc-table-td-bg: #fff;
	--oc-table-td-first-bg: #faf5f2;

	/* 画像・グループ */
	--oc-img-radius: 6px;
	--oc-group-radius: 8px;

	/* セパレーター */
	--oc-separator-border: 1px solid #dcdcdc;
}

/* ===== Pattern 2: 左ボーダーアクセント（shika-tanaka.com 系） ===== */
.oc-style--pattern-2 {
	/* h2 */
	--oc-h2-color: inherit;
	--oc-h2-bg: transparent;
	--oc-h2-radius: 0;
	--oc-h2-padding: 0.75rem 0 0.75rem 1rem;
	--oc-h2-border: none;
	--oc-h2-border-left: 5px solid var(--wp--preset--color--primary, #25acbe);
	--oc-h2-border-bottom: none;

	/* h3 */
	--oc-h3-color: inherit;
	--oc-h3-bg: var(--wp--preset--color--background-alt, #f8f9fa);
	--oc-h3-border-left: 4px solid var(--wp--preset--color--primary, #25acbe);
	--oc-h3-padding: 0.625rem 1rem;
	--oc-h3-after-border: none;
	--oc-h3-after-bottom: 0;

	/* h4 */
	--oc-h4-color: var(--wp--preset--color--primary, #25acbe);
	--oc-h4-border-bottom: 2px solid var(--wp--preset--color--border, #dee2e6);
	--oc-h4-padding-bottom: 0.5rem;

	/* h5 */
	--oc-h5-color: var(--wp--preset--color--primary, #25acbe);

	/* リスト */
	--oc-list-marker-bg: var(--wp--preset--color--primary, #25acbe);
	--oc-list-marker-radius: 2px;
	--oc-list-marker-width: 0.5rem;
	--oc-list-marker-height: 0.5rem;

	/* テーブル */
	--oc-table-radius: 0;
	--oc-table-th-bg: var(--wp--preset--color--primary, #25acbe);
	--oc-table-th-color: #fff;
	--oc-table-td-bg: #fff;
	--oc-table-td-first-bg: var(--wp--preset--color--background-alt, #f8f9fa);

	/* 画像・グループ */
	--oc-img-radius: 0.5rem;
	--oc-group-radius: 0.5rem;

	/* セパレーター */
	--oc-separator-border: 1px solid var(--wp--preset--color--border, #dee2e6);
}

/* ===== Pattern 3: 下線ミニマル（shibuya-shinbi.jp 系） ===== */
.oc-style--pattern-3 {
	/* h2 */
	--oc-h2-color: inherit;
	--oc-h2-bg: transparent;
	--oc-h2-radius: 0;
	--oc-h2-padding: 0 0 1rem 0;
	--oc-h2-border: none;
	--oc-h2-border-left: none;
	--oc-h2-border-bottom: 2px solid var(--wp--preset--color--primary, #233b68);

	/* h3 */
	--oc-h3-color: inherit;
	--oc-h3-bg: transparent;
	--oc-h3-border-left: none;
	--oc-h3-padding: 0 0 0.625rem 0;
	--oc-h3-border-bottom: 1px solid var(--wp--preset--color--border, #dee2e6);
	--oc-h3-after-border: none;
	--oc-h3-after-bottom: 0;

	/* h4 */
	--oc-h4-color: inherit;
	--oc-h4-border-bottom: none;
	--oc-h4-padding-bottom: 0;

	/* h5 */
	--oc-h5-color: var(--wp--preset--color--text-muted, #707070);

	/* リスト */
	--oc-list-marker-bg: var(--wp--preset--color--text, #212529);
	--oc-list-marker-radius: 50%;
	--oc-list-marker-width: 0.375rem;
	--oc-list-marker-height: 0.375rem;

	/* テーブル */
	--oc-table-radius: 0;
	--oc-table-th-bg: var(--wp--preset--color--text, #212529);
	--oc-table-th-color: #fff;
	--oc-table-td-bg: #fff;
	--oc-table-td-first-bg: #fff;

	/* 画像・グループ */
	--oc-img-radius: 0;
	--oc-group-radius: 0;

	/* セパレーター */
	--oc-separator-border: 1px solid var(--wp--preset--color--border, #dee2e6);
}

/* ===== Pattern 4: ドットライン（akitsu-dental.com 系） ===== */
.oc-style--pattern-4 {
	/* h2 */
	--oc-h2-color: var(--wp--preset--color--primary, #0A4B8B);
	--oc-h2-bg: transparent;
	--oc-h2-radius: 0;
	--oc-h2-padding: 0 0 0.875rem 0;
	--oc-h2-border: none;
	--oc-h2-border-left: none;
	--oc-h2-border-bottom: 3px double var(--wp--preset--color--primary, #0A4B8B);

	/* h3 */
	--oc-h3-color: inherit;
	--oc-h3-bg: transparent;
	--oc-h3-border-left: 3px solid var(--wp--preset--color--primary, #0A4B8B);
	--oc-h3-padding: 0.25rem 0 0.25rem 0.875rem;
	--oc-h3-after-border: none;
	--oc-h3-after-bottom: 0;

	/* h4 */
	--oc-h4-color: inherit;
	--oc-h4-border-bottom: 1px dotted var(--wp--preset--color--secondary, #959FB1);
	--oc-h4-padding-bottom: 0.625rem;

	/* h5 */
	--oc-h5-color: var(--wp--preset--color--primary, #0A4B8B);

	/* リスト */
	--oc-list-marker-bg: var(--wp--preset--color--primary, #0A4B8B);
	--oc-list-marker-radius: 50%;
	--oc-list-marker-width: 0.5rem;
	--oc-list-marker-height: 0.5rem;

	/* テーブル */
	--oc-table-radius: 0.5rem;
	--oc-table-th-bg: var(--wp--preset--color--primary, #0A4B8B);
	--oc-table-th-color: #fff;
	--oc-table-td-bg: #fff;
	--oc-table-td-first-bg: #eef2f7;

	/* 画像・グループ */
	--oc-img-radius: 0.75rem;
	--oc-group-radius: 0.75rem;

	/* セパレーター */
	--oc-separator-border: 2px dotted var(--wp--preset--color--secondary, #959FB1);
}

/* ===== 共通スタイル（変数を参照） ===== */

/* ----- h2 ----- */
.oc-page-content h2.wp-block-heading,
.editor-styles-wrapper h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading, "Noto Serif JP", serif);
	font-size: clamp(1.625rem, 3.2vw, 2rem);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--oc-h2-color, inherit);
	background: var(--oc-h2-bg, transparent);
	border-radius: var(--oc-h2-radius, 0);
	padding: var(--oc-h2-padding, 0);
	border: var(--oc-h2-border, none);
	border-left: var(--oc-h2-border-left, none);
	border-bottom: var(--oc-h2-border-bottom, none);
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

/* ----- h3 ----- */
.oc-page-content h3.wp-block-heading,
.editor-styles-wrapper h3.wp-block-heading {
	position: relative;
	font-family: var(--wp--preset--font-family--heading, "Noto Serif JP", serif);
	font-size: clamp(1.3rem, 2.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--oc-h3-color, inherit);
	background: var(--oc-h3-bg, transparent);
	border-left: var(--oc-h3-border-left, none);
	border-bottom: var(--oc-h3-border-bottom, none);
	padding: var(--oc-h3-padding, 0);
	margin-top: 2.75rem;
	margin-bottom: 1.25rem;
}

.oc-page-content h3.wp-block-heading::before,
.editor-styles-wrapper h3.wp-block-heading::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: var(--oc-h3-after-bottom, -1rem);
	left: 0;
	border-bottom: var(--oc-h3-after-border, none);
	pointer-events: none;
}

/* ----- h4 ----- */
.oc-page-content h4.wp-block-heading,
.editor-styles-wrapper h4.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading, "Noto Serif JP", serif);
	font-size: clamp(1.15rem, 2vw, 1.25rem);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--oc-h4-color, inherit);
	border-bottom: var(--oc-h4-border-bottom, none);
	padding-bottom: var(--oc-h4-padding-bottom, 0);
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

/* ----- h5 ----- */
.oc-page-content h5.wp-block-heading,
.editor-styles-wrapper h5.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading, "Noto Serif JP", serif);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--oc-h5-color, inherit);
	margin-top: 2.25rem;
	margin-bottom: 0.875rem;
}

/* ----- h6 ----- */
.oc-page-content h6.wp-block-heading,
.editor-styles-wrapper h6.wp-block-heading {
	font-family: var(--wp--preset--font-family--heading, "Noto Serif JP", serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.04em;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

/* ----- 段落 ----- */
.oc-page-content > .wp-block-paragraph,
.oc-page-content .wp-block-group p:not([class*="__"]),
.oc-page-content .wp-block-column p:not([class*="__"]),
.editor-styles-wrapper .wp-block-paragraph {
	font-family: var(--wp--preset--font-family--body, "Noto Sans JP", sans-serif);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text, #333333);
	margin-top: 0;
	margin-bottom: 1.4rem;
}

.oc-page-content .wp-block-heading + .wp-block-paragraph {
	margin-top: 0;
}

/* ----- リスト ----- */
.oc-page-content ul.wp-block-list,
.oc-page-content ol.wp-block-list,
.editor-styles-wrapper ul.wp-block-list {
	margin-top: 1.375rem;
	margin-bottom: 1.5rem;
	padding-left: 0;
	list-style: none;
}

.oc-page-content ol.wp-block-list {
	list-style: decimal;
	padding-left: 1.375rem;
}

.oc-page-content .wp-block-list > li,
.editor-styles-wrapper .wp-block-list > li {
	position: relative;
	font-family: var(--wp--preset--font-family--body, "Noto Sans JP", sans-serif);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text, #333333);
	padding-left: 1.375rem;
}

.oc-page-content ol.wp-block-list > li {
	padding-left: 0;
}

.oc-page-content ul.wp-block-list > li::before,
.editor-styles-wrapper ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	width: var(--oc-list-marker-width, 0.625rem);
	height: var(--oc-list-marker-height, 0.625rem);
	top: 0.65em;
	left: 0;
	background: var(--oc-list-marker-bg, currentColor);
	border-radius: var(--oc-list-marker-radius, 50%);
}

.oc-page-content .wp-block-list > li:not(:first-child) {
	margin-top: 0.5rem;
}

/* ----- テーブル ----- */
.oc-page-content .wp-block-table {
	margin-top: 2rem;
	margin-bottom: 1.5rem;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--oc-table-radius, 0);
}

.oc-page-content .wp-block-table table,
.editor-styles-wrapper .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.oc-page-content .wp-block-table th,
.editor-styles-wrapper .wp-block-table th {
	font-family: var(--wp--preset--font-family--body, "Noto Sans JP", sans-serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--oc-table-th-color, #fff);
	background: var(--oc-table-th-bg, currentColor);
	padding: 0.875rem 1.125rem;
	border: 1px solid #d0d0d0;
	text-align: left;
	vertical-align: middle;
}

.oc-page-content .wp-block-table td,
.editor-styles-wrapper .wp-block-table td {
	font-family: var(--wp--preset--font-family--body, "Noto Sans JP", sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text, #333333);
	background: var(--oc-table-td-bg, #fff);
	border: 1px solid #d0d0d0;
	padding: 0.8125rem 1.125rem;
	vertical-align: middle;
}

.oc-page-content .wp-block-table td:first-child,
.editor-styles-wrapper .wp-block-table td:first-child {
	background: var(--oc-table-td-first-bg, #faf5f2);
	font-weight: 700;
	text-align: left;
}

/* ----- 画像 ----- */
.oc-page-content .wp-block-image {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.oc-page-content .wp-block-image img,
.editor-styles-wrapper .wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--oc-img-radius, 0);
}

/* ----- カラム ----- */
.oc-page-content .wp-block-columns {
	gap: 2.5rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* ----- グループブロック背景 ----- */
.oc-page-content .wp-block-group.has-background,
.editor-styles-wrapper .wp-block-group.has-background {
	border-radius: var(--oc-group-radius, 0);
	padding: 2.5rem 3rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* ----- セパレーター ----- */
.oc-page-content .wp-block-separator,
.editor-styles-wrapper .wp-block-separator {
	border-top: var(--oc-separator-border, 2px dashed #c0d7db);
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	opacity: 1;
}

/* ----- リンク（本文中）：サイトカラーの赤・下線・ホバーあり。ボタンは除外 ----- */
.oc-page-content a:not(.wp-element-button):not(.wp-block-button__link):not(.btn),
.editor-styles-wrapper a:not(.wp-element-button):not(.wp-block-button__link):not(.btn) {
	color: var(--wp--preset--color--primary, #b01d3a);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

	.oc-page-content a:not(.wp-element-button):not(.wp-block-button__link):not(.btn):hover,
	.editor-styles-wrapper a:not(.wp-element-button):not(.wp-block-button__link):not(.btn):hover {
		text-decoration: none;
		opacity: 0.75;
	}
}

/* ----- ボタン：サイト共通の赤ボタンに寄せる。ユーザーが色を明示指定した場合は尊重 ----- */
.oc-page-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
	border-radius: 5px;
	padding: 0.85em 2.25em;
	font-family: var(--wp--preset--font-family--body, "Noto Sans JP", sans-serif);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.oc-page-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
.editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--primary, #b01d3a);
}

.oc-page-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color),
.editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
	color: #fff;
}

.oc-page-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary, #b01d3a);
}

@media (hover: hover) and (pointer: fine) {

	.oc-page-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
	.editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
		background-color: var(--wp--preset--color--text, #333333);
	}
}

/* ----- 引用 ----- */
.oc-page-content .wp-block-quote,
.editor-styles-wrapper .wp-block-quote {
	border-left: 4px solid var(--wp--preset--color--primary, #b01d3a);
	margin: 2rem 0;
	padding: 0.4rem 0 0.4rem 1.25rem;
	color: #555555;
	font-style: normal;
}

.oc-page-content .wp-block-quote cite,
.editor-styles-wrapper .wp-block-quote cite {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.9em;
	font-style: normal;
	color: #888888;
}

.oc-page-content .wp-block-pullquote,
.editor-styles-wrapper .wp-block-pullquote {
	border-top: 2px solid var(--wp--preset--color--primary, #b01d3a);
	border-bottom: 2px solid var(--wp--preset--color--primary, #b01d3a);
	padding: 1.5rem 0;
	color: var(--wp--preset--color--text, #333333);
}

/* ----- 詳細（アコーディオン） ----- */
.oc-page-content .wp-block-details,
.editor-styles-wrapper .wp-block-details {
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	padding: 0.9rem 1.25rem;
	margin: 1.5rem 0;
	background: #fff;
}

.oc-page-content .wp-block-details summary,
.editor-styles-wrapper .wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading, "Noto Serif JP", serif);
	font-weight: 600;
	color: var(--wp--preset--color--text, #333333);
}

.oc-page-content .wp-block-details[open] summary,
.editor-styles-wrapper .wp-block-details[open] summary {
	margin-bottom: 0.75rem;
}

/* ----- ファイル ----- */
.oc-page-content .wp-block-file__button,
.editor-styles-wrapper .wp-block-file__button {
	background: var(--wp--preset--color--primary, #b01d3a);
	color: #fff;
	border-radius: 5px;
	opacity: 1;
}

/* ----- コード / 整形済みテキスト ----- */
.oc-page-content .wp-block-code,
.oc-page-content .wp-block-preformatted,
.editor-styles-wrapper .wp-block-code,
.editor-styles-wrapper .wp-block-preformatted {
	background: #f5f5f5;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	line-height: 1.7;
	overflow: auto;
}

/* ----- キャプション ----- */
.oc-page-content figcaption,
.editor-styles-wrapper figcaption {
	font-size: 0.85rem;
	color: #777777;
	margin-top: 0.5rem;
	text-align: center;
}

/* ===== レスポンシブ (768px以下) =====
 * 見出し・本文は clamp()／rem 指定のため個別の縮小指定は不要。
 * ここでは料金表のセル余白・グループ余白など、SP で詰める箇所のみ調整する。
 */
@media (max-width: 768px) {

	.oc-page-content .wp-block-paragraph,
	.oc-page-content .wp-block-group p:not([class*="__"]),
	.oc-page-content .wp-block-column p:not([class*="__"]),
	.editor-styles-wrapper .wp-block-paragraph,
	.oc-page-content .wp-block-list > li,
	.editor-styles-wrapper .wp-block-list > li {
		font-size: 1rem;
		line-height: 1.85;
	}

	.oc-page-content .wp-block-table th,
	.editor-styles-wrapper .wp-block-table th {
		padding: 0.7rem 0.75rem;
		font-size: 0.95rem;
	}

	.oc-page-content .wp-block-table td,
	.editor-styles-wrapper .wp-block-table td {
		padding: 0.65rem 0.75rem;
		font-size: 0.9rem;
	}

	.oc-page-content .wp-block-columns {
		gap: 1.25rem;
	}

	.oc-page-content .wp-block-group.has-background,
	.editor-styles-wrapper .wp-block-group.has-background {
		padding: 1.5rem 1.25rem;
	}
}