/* ===== カスタムブロック共通レイアウト =====
 * ブロック用の変数定義・アラインメント・ページコンテンツラッパー
 * 別テーマへの移植時はこのファイルごと持っていく
 */

/* ----- セクション間隔の変数定義 ----- */
:root {
	--oc-section-gap: var(--wp--preset--spacing--4-xl, 8.75rem);
	--oc-content-gutter: var(--wp--preset--spacing--md, 1.5rem);
	--oc-content-width: calc(var(--wp--style--global--content-size, 1248px) - var(--oc-content-gutter) * 2);

	/* ----- EC ブロック共通変数 ----- */
	--oc-font-display: "Marcellus", serif;
	--oc-color-dark: #1f1f1f;
	--oc-color-muted: #999;
	--oc-color-body: #666;
}

@media (max-width: 768px) {

	:root {
		--oc-section-gap: var(--wp--preset--spacing--2-xl, 4rem);
	}
}

/* ----- WordPress ブロックアラインメント ----- */
.alignfull {
	width: 100%;
	max-width: none;
}

.alignwide {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1248px);
	margin-left: auto;
	margin-right: auto;
}

/* ----- LP 系ブロック（implant-lp-*）の overflow 封じ込め -----
 * これらのブロックは固定幅（desktop px ベース）レイアウトのため、
 * 内部要素が狭いビューポートで viewport 幅を超える場合がある。
 * 各ブロック root で overflow-x: clip することで、ページ全体に
 * 横スクロールが伝播しないようにする。 */
[class*="wp-block-octheme-implant-lp-"] {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: clip;
}

/* implant-lp-* 内部要素にも border-box を徹底 */
[class*="wp-block-octheme-implant-lp-"] * {
	box-sizing: border-box;
}

/* ---------- モバイル: 巨大 px 下限 padding / margin / width を無効化 ----------
 * implant-lp-* は desktop 1310px 固定幅設計で
 * max(Xvw, Ypx) を多用しているため、狭い viewport で px 下限が勝ち
 * 要素が viewport を超える。モバイルでは強制的に通常レイアウトに戻す。
 */
@media (max-width: 768px) {
	[class*="wp-block-octheme-implant-lp-"] {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	[class*="wp-block-octheme-implant-lp-"] * {
		max-width: 100%;
	}

	[class*="wp-block-octheme-implant-lp-"] img {
		height: auto;
	}
}

/* ----- 固定ページ: ブロックコンテンツのレイアウト ----- */
.oc-page-content {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--oc-content-gutter), 1fr)
		[content-start] min(var(--oc-content-width), calc(100% - var(--oc-content-gutter) * 2))
		[content-end] minmax(var(--oc-content-gutter), 1fr)
		[full-end];
	width: 100%;
	margin: 0;
	padding: 0;
}

.oc-page-content--privacy {
	padding-top: clamp(4rem, 8vw, 7.5rem);
	padding-bottom: clamp(5rem, 10vw, 8.75rem);
}

@media (max-width: 768px) {

	.oc-page-content--privacy {
		padding-top: var(--wp--preset--spacing--2-xl, 4rem);
		padding-bottom: var(--wp--preset--spacing--2-xl, 4rem);
	}
}

.oc-page-content > * {
	grid-column: content-start / content-end;
	min-width: 0;
}

.oc-page-content > .alignwide {
	grid-column: full-start / full-end;
	width: min(var(--wp--style--global--wide-size, 1248px), calc(100% - var(--oc-content-gutter) * 2));
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.oc-page-content > .alignfull {
	grid-column: full-start / full-end;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ----- エディター内: フロント用レイアウトを無効化 -----
 * エディターは独自の alignfull 処理を持つ。
 * フロント用の grid-column 指定がエディター iframe 内で
 * 適用されると編集幅とずれるため、リセットする。
 */
.editor-styles-wrapper .alignfull,
.editor-styles-wrapper .oc-page-content > .alignfull,
.editor-styles-wrapper .oc-page-content > .alignwide {
	grid-column: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* エディター内の全 octheme ブロックが親幅を超えないようにする */
.editor-styles-wrapper [class*="wp-block-octheme-"] {
	max-width: 100%;
	overflow-x: auto;
	box-sizing: border-box;
}

/* ----- セクションブロック共通スタイル -----
 * 各ブロックの <section> に .oc-section を付与すると、
 * セクション間隔・隣接ブロック間の二重padding解消が自動適用される
 */
.oc-section {
	padding-top: var(--oc-section-gap);
	padding-bottom: var(--oc-section-gap);
}

/* 隣接セクションの二重padding解消：
 * 原則として後続セクションの padding-top を 0 にし、
 * 前のセクションの padding-bottom だけで間隔を取る。
 * 背景色が異なる場合（色の切れ目）のみ padding-top を復元する。
 */
.oc-section + .oc-section {
	padding-top: 0;
}

/* 背景色の切れ目（bg あり→なし、なし→あり）：padding-top を復元 */
.oc-section.oc-section--has-bg + .oc-section:not(.oc-section--has-bg),
.oc-section:not(.oc-section--has-bg) + .oc-section.oc-section--has-bg {
	padding-top: var(--oc-section-gap);
}

/* 非セクション要素（見出し・段落等）の直後のセクション：
 * 前の要素の margin-bottom だけで十分な間隔があるため、
 * セクション自体の padding-top を除去して二重余白を防ぐ。
 */
.oc-page-content > :not(.oc-section) + .oc-section {
	padding-top: 0;
}

/* ----- エディター内: セクション間隔の適用 -----
 * エディターではブロックが .wp-block-octheme-* の div でラップされるため、
 * .oc-section の隣接セレクタが効かない。ブロックラッパーレベルで制御する。
 * .is-root-container > で限定し、InnerBlocks（treatment-step 等）に影響しないようにする。
 */
.editor-styles-wrapper .is-root-container > [class*="wp-block-octheme-"] {
	padding-top: var(--oc-section-gap);
	padding-bottom: var(--oc-section-gap);
}

.editor-styles-wrapper .is-root-container > [class*="wp-block-octheme-"] + [class*="wp-block-octheme-"] {
	padding-top: 0;
}

/* 非ブロック要素（見出し等）の直後の octheme ブロック：padding-top を除去 */
.editor-styles-wrapper .is-root-container > :not([class*="wp-block-octheme-"]) + [class*="wp-block-octheme-"] {
	padding-top: 0;
}

/* ----- EC ブロック共通セクションヘッダー ----- */
.oc-section-header {
	text-align: center;
	margin-bottom: 3rem;
}

.oc-section-header__sub {
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--oc-color-muted);
	margin: 0 0 2px;
}

.oc-section-header__title {
	font-family: var(--oc-font-display);
	font-size: 2.5rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--oc-color-dark);
	margin: 0;
}

@media (max-width: 767px) {

	.oc-section-header__title {
		font-size: 2.2rem;
	}

	.oc-section-header {
		margin-bottom: 2rem;
	}
}

/* ----- EC ブロック共通アンダーラインボタン ----- */
.oc-underline-btn {
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--oc-underline-btn-color, var(--oc-color-dark));
	text-decoration: none;
	border-bottom: 1px solid var(--oc-underline-btn-color, var(--oc-color-dark));
	padding-bottom: 0.25rem;
	transition: opacity 0.2s ease;
	background: none;
}

.oc-underline-btn:hover {
	opacity: 0.7;
	color: var(--oc-underline-btn-color, var(--oc-color-dark));
}

.oc-underline-btn--light {
	--oc-underline-btn-color: #fff;
}

/* サブセクション（direction-stepsなど、小さめの余白） */
.oc-section--sub {
	padding-top: var(--wp--preset--spacing--xl);
	padding-bottom: var(--wp--preset--spacing--xl);
}

/* ----- セクション区切り（角丸バリエーション） -----
 * 背景色付きセクション同士の重なりで角丸の視覚効果を作る。
 * ::before で次セクションの背景色レイヤーを敷き、
 * セクション自体に border-radius を設定して区切りを表現する。
 */
.oc-section--rounded {
	position: relative;
	z-index: 1;
}

.oc-section--rounded::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: var(--oc-section-behind-bg, transparent);
}

/* 角丸パターン: 左下のみ (0 0 0 50px) */
.oc-section--round-bl {
	border-radius: 0 0 0 50px;
}

/* 角丸パターン: 左上＋右下 (0 50px 0 50px) */
.oc-section--round-tr-bl {
	border-radius: 0 50px 0 50px;
}

/* 角丸パターン: 右上のみ (0 50px 0 0) */
.oc-section--round-tr {
	border-radius: 0 50px 0 0;
}

/* 角丸パターン: 上部両方 (50px 50px 0 0) */
.oc-section--round-top {
	border-radius: 50px 50px 0 0;
}

@media (max-width: 768px) {

	.oc-section--round-bl {
		border-radius: 0 0 0 30px;
	}

	.oc-section--round-tr-bl {
		border-radius: 0 30px 0 30px;
	}

	.oc-section--round-tr {
		border-radius: 0 30px 0 0;
	}

	.oc-section--round-top {
		border-radius: 30px 30px 0 0;
	}
}