/*
 * 選ばれる理由ページ。
 * 共通の見出し・余白を引き継ぎ、MEO支援の強みを具体的に伝える。
 */

.p-reason-page {
	color: var(--color-text);
	background: var(--color-background);
}

.p-reason-page h4 {
	color: var(--color-heading);
}

.p-reason-page p,
.p-reason-page li {
	color: var(--color-text);
}

.p-reason-page .c-eyebrow {
	color: var(--color-primary);
}

.p-reason-hero .p-page-hero__lead {
	max-width: 820px;
}

.p-reason-overview__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
	align-items: center;
	gap: 72px;
}

.p-reason-overview__content {
	max-width: 620px;
}

.p-reason-overview__body {
	margin-top: 34px;
}

.p-reason-overview__body p {
	margin: 0;
	color: var(--color-text);
	line-height: 2;
}

.p-reason-overview__body p + p {
	margin-top: 20px;
}

.p-reason-overview__media {
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	background: var(--color-background-subtle);
}

.p-reason-overview__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 52%;
}

/* 4つの理由 */
.p-reason-reason-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding: 0;
	margin: 34px 0 0;
	list-style: none;
}

.p-reason-reason {
	min-width: 0;
	padding: 34px 34px 36px;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.p-reason-reason h3 {
	max-width: 500px;
	margin: 0;
	color: var(--color-heading);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: -0.02em;
}

.p-reason-reason p {
	margin: 14px 0 0;
	color: var(--color-text-secondary);
	line-height: 1.95;
}

/* こんなお悩みにおすすめ */
.p-reason-usecase-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 40px;
}

.p-reason-usecase {
	min-width: 0;
	padding: 32px 34px 34px;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.p-reason-usecase h3 {
	margin: 0;
	color: var(--color-heading);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: -0.02em;
}

.p-reason-usecase p {
	margin: 12px 0 0;
	color: var(--color-text-secondary);
	line-height: 1.9;
}

/* CTAは白文字・1ボタンで明快にする */
.p-reason-page .p-cta,
.p-reason-page .p-cta .c-eyebrow,
.p-reason-page .p-cta h2,
.p-reason-page .p-cta p,
.p-reason-page .p-cta li,
.p-reason-page .p-cta span {
	color: var(--color-text-inverse);
}

.p-reason-page .p-cta__actions {
	display: flex;
	justify-content: center;
}

@media (max-width: 1200px) {
	.p-reason-overview__layout {
		grid-template-columns: 1fr;
	}

	.p-reason-overview__content {
		max-width: 760px;
	}

	.p-reason-overview__media {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 800px) {
	.p-reason-reason-grid,
	.p-reason-usecase-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.p-reason-overview .c-section-title br {
		display: none;
	}

	.p-reason-overview__media {
		aspect-ratio: 4 / 3;
	}

	.p-reason-reason-grid {
		gap: 14px;
		margin-top: 28px;
	}

	.p-reason-reason,
	.p-reason-usecase {
		padding: 28px 22px 30px;
	}

	.p-reason-usecase-grid {
		gap: 14px;
		margin-top: 30px;
	}
}