/**
 * LP ACF（acflp1）: セクション共通・WYSIWYG・グリッド・スペーサー
 */

:root {
	--lp-base-color: #333;
}

/* ----- 背景画像（インライン変数） ----- */
.section_1col.has-bg-image,
.section_2col.has-bg-image,
.section_3col.has-bg-image {
	background-image: var(--acf-lp-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ----- 背景色 ----- */
.bg-none {
	background-color: transparent;
}
.bg-white {
	background-color: #fff;
}
.bg-gray {
	background-color: #f4f4f4;
}
.bg-beige {
	background-color: #f5f0e8;
}
.bg-dark {
	background-color: #222;
	color: #f5f5f5;
}

.bg-dark .wysiwyg a {
	color: #9ecbff;
}

/* カラーピッカー背景が暗いとき（1〜3カラム） */
.section_1col.lp-bg-auto-dark,
.section_2col.lp-bg-auto-dark,
.section_3col.lp-bg-auto-dark {
	color: #f5f5f5;
}
.section_1col.lp-bg-auto-dark .wysiwyg a,
.section_2col.lp-bg-auto-dark .wysiwyg a,
.section_3col.lp-bg-auto-dark .wysiwyg a {
	color: #9ecbff;
}

/* ----- 余白 ----- */
.pad-sm {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}
.pad-md {
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.pad-lg {
	padding-top: 3rem;
	padding-bottom: 3rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.mt-none { margin-top: 0; }
.mt-sm { margin-top: 0.75rem; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 2.5rem; }

.mb-none { margin-bottom: 0; }
.mb-sm { margin-bottom: 0.75rem; }
.mb-md { margin-bottom: 1.5rem; }
.mb-lg { margin-bottom: 2.5rem; }

/* ----- コンテンツ幅 ----- */
.box-normal,
.box-wide,
.box-narrow {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.box-normal {
	max-width: 960px;
}
.box-wide {
	max-width: 1200px;
}
.box-narrow {
	max-width: 720px;
}

/* 1〜3カラム：セクション外周の影（ACF: box_shadow。pad-* は影の内側で効く） */
.section_1col.lp-box-shadow-sm,
.section_2col.lp-box-shadow-sm,
.section_3col.lp-box-shadow-sm {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	border-radius: 6px;
}
.section_1col.lp-box-shadow-md,
.section_2col.lp-box-shadow-md,
.section_3col.lp-box-shadow-md {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}
.section_1col.lp-box-shadow-lg,
.section_2col.lp-box-shadow-lg,
.section_3col.lp-box-shadow-lg {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
	border-radius: 10px;
}

/* ----- メイン画像 ----- */
.main_image__figure {
	margin: 0;
}
.main_image img {
	display: block;
	height: auto;
	max-width: 100%;
}
.main_image.img-full img {
	width: 100%;
}
.main_image.img-wide .main_image__figure {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.main_image.img-narrow .main_image__figure {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.main_image.img-align-left .main_image__figure {
	margin-left: 0;
	margin-right: auto;
}
.main_image.img-align-right .main_image__figure {
	margin-left: auto;
	margin-right: 0;
}
.main_image.img-align-center .main_image__figure {
	margin-left: auto;
	margin-right: auto;
}

/* ----- 2・3カラム ----- */
.cols-2,
.cols-3 {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}
.cols-2.va-center,
.cols-3.va-center {
	align-items: center;
}

.cols-2.ratio-1-1 {
	grid-template-columns: 1fr 1fr;
}
.cols-2.ratio-4-6 {
	grid-template-columns: 4fr 6fr;
}
.cols-2.ratio-6-4 {
	grid-template-columns: 6fr 4fr;
}

.cols-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 767px) {
	.cols-2,
	.cols-2.ratio-1-1,
	.cols-2.ratio-4-6,
	.cols-2.ratio-6-4 {
		grid-template-columns: 1fr;
	}
	.cols-3 {
		grid-template-columns: 1fr;
	}
	.sp-order-right-first .wysiwyg:nth-child(1) {
		order: 2;
	}
	.sp-order-right-first .wysiwyg:nth-child(2) {
		order: 1;
	}
}

/* ----- スペーサー ----- */
.spacer_box {
	display: block;
	border: 0;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
}

.space-top-none { padding-top: 0; }
.space-top-sm { padding-top: 0.5rem; }
.space-top-md { padding-top: 1rem; }
.space-top-lg { padding-top: 2rem; }
.space-top-xl { padding-top: 3rem; }

.space-bottom-none { padding-bottom: 0; }
.space-bottom-sm { padding-bottom: 0.5rem; }
.space-bottom-md { padding-bottom: 1rem; }
.space-bottom-lg { padding-bottom: 2rem; }
.space-bottom-xl { padding-bottom: 3rem; }

.spacer_box.has-border {
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom: none;
	border-left: none;
	border-right: none;
}

.spacer_box.border-solid {
	border-top-style: solid;
}
.spacer_box.border-dashed {
	border-top-style: dashed;
}
.spacer_box.border-double {
	border-top-style: double;
	border-top-width: 3px;
}

.spacer_box.border-black { border-top-color: #111; }
.spacer_box.border-gray { border-top-color: #888; }
.spacer_box.border-light { border-top-color: #ddd; }
.spacer_box.border-blue { border-top-color: #1a5fb4; }
.spacer_box.border-red { border-top-color: #c01c28; }
.spacer_box.border-orange { border-top-color: #e66100; }
.spacer_box.border-green { border-top-color: #2ec27e; }

/* ----- WYSIWYG 基本 ----- */
.wysiwyg {
	line-height: 1.7;
	overflow-wrap: break-word;
}
.wysiwyg > *:first-child {
	margin-top: 0;
}
.wysiwyg > *:last-child {
	margin-bottom: 0;
}
.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
	line-height: 1.35;
	margin: 1.25em 0 0.5em;
}
.wysiwyg p,
.wysiwyg ul,
.wysiwyg ol {
	margin: 0 0 1em;
}
.wysiwyg ul,
.wysiwyg ol {
	padding-left: 1.4em;
}
.wysiwyg a {
	text-decoration: underline;
}
.wysiwyg img {
	max-width: 100%;
	height: auto;
}
.wysiwyg figure {
	margin: 1em 0;
}
.wysiwyg figcaption {
	font-size: 0.875em;
	margin-top: 0.35em;
}

/* ----- WYSIWYG 拡張（エディタと同一クラス） ----- */
.wysiwyg .wysiwyg-h-title-1 {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin: 1.2em 0 0.6em;
	text-align: center;
}
.wysiwyg .wysiwyg-h-title-1::before,
.wysiwyg .wysiwyg-h-title-1::after {
	content: "";
	flex: 1 1 auto;
	border-top: 2px solid var(--lp-base-color, #333);
}

.wysiwyg .wysiwyg-h-title-2 {
	border-bottom: 3px solid var(--lp-base-color, #333);
	padding-bottom: 0.25em;
}
.wysiwyg .wysiwyg-h-title-2::first-letter {
	font-size: 1.35em;
	line-height: 1;
	font-weight: 700;
}

.wysiwyg .wysiwyg-h-title-3 {
	border-top: 2px solid var(--lp-base-color, #333);
	border-bottom: 2px solid var(--lp-base-color, #333);
	padding: 0.45em 0;
}

/* .wysiwyg ラッパー外で class が付くケース用フォールバック */
.wysiwyg-h-title-1 {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin: 1.2em 0 0.6em;
	text-align: center;
}
.wysiwyg-h-title-1::before,
.wysiwyg-h-title-1::after {
	content: "";
	flex: 1 1 auto;
	border-top: 2px solid var(--lp-base-color, #333);
}
.wysiwyg-h-title-2 {
	border-bottom: 3px solid var(--lp-base-color, #333);
	padding-bottom: 0.25em;
}
.wysiwyg-h-title-2::first-letter {
	font-size: 1.35em;
	line-height: 1;
	font-weight: 700;
}
.wysiwyg-h-title-3 {
	border-top: 2px solid var(--lp-base-color, #333);
	border-bottom: 2px solid var(--lp-base-color, #333);
	padding: 0.45em 0;
}

/* タイトル2と3を同時に付けたときは「3」の見た目に寄せる */
.wysiwyg .wysiwyg-h-title-2.wysiwyg-h-title-3 {
	border-top: 2px solid var(--lp-base-color, #333);
	border-bottom: 2px solid var(--lp-base-color, #333);
	padding: 0.45em 0;
}
.wysiwyg-h-title-2.wysiwyg-h-title-3 {
	border-top: 2px solid var(--lp-base-color, #333);
	border-bottom: 2px solid var(--lp-base-color, #333);
	padding: 0.45em 0;
}

.wysiwyg .wysiwyg-size-sm {
	font-size: 0.875rem;
}
.wysiwyg .wysiwyg-size-md {
	font-size: 1rem;
}
.wysiwyg .wysiwyg-size-lg {
	font-size: 1.125rem;
}
.wysiwyg .wysiwyg-size-xl {
	font-size: 1.375rem;
	line-height: 1.55;
}

.wysiwyg a.wysiwyg-btn-round-red,
.wysiwyg a.wysiwyg-btn-round-orange,
.wysiwyg a.wysiwyg-btn-round-blue,
.wysiwyg a.wysiwyg-btn-round-green,
.wysiwyg a.wysiwyg-btn-round-black,
.wysiwyg span.wysiwyg-btn-round-red,
.wysiwyg span.wysiwyg-btn-round-orange,
.wysiwyg span.wysiwyg-btn-round-blue,
.wysiwyg span.wysiwyg-btn-round-green,
.wysiwyg span.wysiwyg-btn-round-black {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.8em;
	padding: 0.85em 1.8em;
	border-radius: 999px;
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 1em;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.wysiwyg a.wysiwyg-btn-round-red,
.wysiwyg span.wysiwyg-btn-round-red { background: #d7263d; }
.wysiwyg a.wysiwyg-btn-round-orange,
.wysiwyg span.wysiwyg-btn-round-orange { background: #e66100; }
.wysiwyg a.wysiwyg-btn-round-blue,
.wysiwyg span.wysiwyg-btn-round-blue { background: #1a5fb4; }
.wysiwyg a.wysiwyg-btn-round-green,
.wysiwyg span.wysiwyg-btn-round-green { background: #2a9d45; }
.wysiwyg a.wysiwyg-btn-round-black,
.wysiwyg span.wysiwyg-btn-round-black { background: #111; }

/* 複数のボタン色クラスが付いたとき — 優先: 赤 > オレンジ > 青 > 緑 > 黒 */
.wysiwyg a.wysiwyg-btn-round-orange.wysiwyg-btn-round-red,
.wysiwyg span.wysiwyg-btn-round-orange.wysiwyg-btn-round-red,
.wysiwyg a.wysiwyg-btn-round-blue.wysiwyg-btn-round-red,
.wysiwyg span.wysiwyg-btn-round-blue.wysiwyg-btn-round-red,
.wysiwyg a.wysiwyg-btn-round-green.wysiwyg-btn-round-red,
.wysiwyg span.wysiwyg-btn-round-green.wysiwyg-btn-round-red,
.wysiwyg a.wysiwyg-btn-round-black.wysiwyg-btn-round-red,
.wysiwyg span.wysiwyg-btn-round-black.wysiwyg-btn-round-red { background: #d7263d; }
.wysiwyg a.wysiwyg-btn-round-blue.wysiwyg-btn-round-orange,
.wysiwyg span.wysiwyg-btn-round-blue.wysiwyg-btn-round-orange,
.wysiwyg a.wysiwyg-btn-round-green.wysiwyg-btn-round-orange,
.wysiwyg span.wysiwyg-btn-round-green.wysiwyg-btn-round-orange,
.wysiwyg a.wysiwyg-btn-round-black.wysiwyg-btn-round-orange,
.wysiwyg span.wysiwyg-btn-round-black.wysiwyg-btn-round-orange { background: #e66100; }
.wysiwyg a.wysiwyg-btn-round-green.wysiwyg-btn-round-blue,
.wysiwyg span.wysiwyg-btn-round-green.wysiwyg-btn-round-blue,
.wysiwyg a.wysiwyg-btn-round-black.wysiwyg-btn-round-blue,
.wysiwyg span.wysiwyg-btn-round-black.wysiwyg-btn-round-blue { background: #1a5fb4; }
.wysiwyg a.wysiwyg-btn-round-black.wysiwyg-btn-round-green,
.wysiwyg span.wysiwyg-btn-round-black.wysiwyg-btn-round-green { background: #2a9d45; }

.wysiwyg a[class*="wysiwyg-btn-round-"] strong,
.wysiwyg span[class*="wysiwyg-btn-round-"] strong {
	color: inherit;
	font-weight: inherit;
}

/* 見出しブロック内のボタンリンク（h3 全体がボタンに見えるよう余白だけ調整） */
.wysiwyg h1 > a[class*="wysiwyg-btn-round-"],
.wysiwyg h2 > a[class*="wysiwyg-btn-round-"],
.wysiwyg h3 > a[class*="wysiwyg-btn-round-"],
.wysiwyg h4 > a[class*="wysiwyg-btn-round-"] {
	vertical-align: middle;
}

.wysiwyg a.wysiwyg-btn-round-red:hover,
.wysiwyg a.wysiwyg-btn-round-red:focus-visible,
.wysiwyg span.wysiwyg-btn-round-red:hover {
	background: #b01e30;
	box-shadow: 0 3px 10px rgba(215, 38, 61, 0.35);
	transform: translateY(-1px);
}
.wysiwyg a.wysiwyg-btn-round-orange:hover,
.wysiwyg a.wysiwyg-btn-round-orange:focus-visible,
.wysiwyg span.wysiwyg-btn-round-orange:hover {
	background: #c25400;
	box-shadow: 0 3px 10px rgba(230, 97, 0, 0.35);
	transform: translateY(-1px);
}
.wysiwyg a.wysiwyg-btn-round-blue:hover,
.wysiwyg a.wysiwyg-btn-round-blue:focus-visible,
.wysiwyg span.wysiwyg-btn-round-blue:hover {
	background: #154a8f;
	box-shadow: 0 3px 10px rgba(26, 95, 180, 0.35);
	transform: translateY(-1px);
}
.wysiwyg a.wysiwyg-btn-round-green:hover,
.wysiwyg a.wysiwyg-btn-round-green:focus-visible,
.wysiwyg span.wysiwyg-btn-round-green:hover {
	background: #238038;
	box-shadow: 0 3px 10px rgba(42, 157, 69, 0.35);
	transform: translateY(-1px);
}
.wysiwyg a.wysiwyg-btn-round-black:hover,
.wysiwyg a.wysiwyg-btn-round-black:focus-visible,
.wysiwyg span.wysiwyg-btn-round-black:hover {
	background: #333;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
	transform: translateY(-1px);
}
.wysiwyg a.wysiwyg-btn-round-red:focus-visible,
.wysiwyg a.wysiwyg-btn-round-orange:focus-visible,
.wysiwyg a.wysiwyg-btn-round-blue:focus-visible,
.wysiwyg a.wysiwyg-btn-round-green:focus-visible,
.wysiwyg a.wysiwyg-btn-round-black:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.95);
	outline-offset: 3px;
}

.wysiwyg .wysiwyg-note {
	font-size: 0.875rem;
	color: #555;
}
.bg-dark .wysiwyg .wysiwyg-note {
	color: #ccc;
}
.section_1col.lp-bg-auto-dark .wysiwyg .wysiwyg-note,
.section_2col.lp-bg-auto-dark .wysiwyg .wysiwyg-note,
.section_3col.lp-bg-auto-dark .wysiwyg .wysiwyg-note {
	color: #ccc;
}

.wysiwyg ul.wysiwyg-checklist {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
.wysiwyg ul.wysiwyg-checklist li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.35em;
}
.wysiwyg ul.wysiwyg-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #2ec27e;
	font-weight: bold;
}