/**
 * Natural CTA — subtle horizontal guidance strip.
 *
 * :has() について
 * label の有無・ボタン数に応じてレイアウトを切り替えるために使用しています。
 * 現代ブラウザ（Chrome 105+, Safari 15.4+, Firefox 121+）で動作します。
 * 非対応環境ではデフォルトのグリッド指定がそのまま適用されます。
 */
.jpl-part--natural-cta .jpl-part__inner {
	max-width: 1080px;
	margin-inline: auto;
}

.jpl-part--natural-cta .jpl-part__box {
	display: grid;
	align-items: center;
	gap: 0.75rem 1rem;
	background: var(--jpl-bg-soft);
	border: 1px solid var(--jpl-border);
	border-radius: calc(var(--jpl-radius) - 4px);
	box-shadow: none;
	padding: 1rem 1.25rem;
}

.jpl-part--natural-cta .jpl-part__label {
	flex-shrink: 0;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	background: var(--jpl-bg);
	border: 1px solid var(--jpl-border);
	color: var(--jpl-main-dark);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.jpl-part--natural-cta .jpl-part__content {
	padding: 0;
	min-width: 0;
}

.jpl-part--natural-cta .jpl-part__title {
	margin: 0;
	color: var(--jpl-text);
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 700;
	line-height: 1.45;
}

.jpl-part--natural-cta .jpl-part__subtitle {
	margin: 0.25rem 0 0;
	color: var(--jpl-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.jpl-part--natural-cta .jpl-part__text {
	margin: 0.375rem 0 0;
	color: var(--jpl-text);
	font-size: 0.875rem;
	line-height: 1.65;
}

.jpl-part--natural-cta .jpl-part__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.625rem;
	padding: 0;
}

.jpl-part--natural-cta .jpl-part__button {
	flex: 0 1 auto;
	min-height: 42px;
	padding: 0.625rem 1.125rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	writing-mode: horizontal-tb;
}

.jpl-part--natural-cta .jpl-part__button--primary {
	border: 1px solid var(--jpl-main);
	background: var(--jpl-main);
	color: #ffffff;
}

.jpl-part--natural-cta .jpl-part__button--primary:hover {
	background: var(--jpl-main-dark);
	border-color: var(--jpl-main-dark);
	color: #ffffff;
}

.jpl-part--natural-cta .jpl-part__button--secondary {
	border: 1px solid var(--jpl-border);
	background: var(--jpl-bg);
	color: var(--jpl-main-dark);
}

.jpl-part--natural-cta .jpl-part__button--secondary:hover {
	background: var(--jpl-bg-soft);
	color: var(--jpl-main-dark);
}

.jpl-part--natural-cta .jpl-part__note {
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
	color: var(--jpl-muted);
	font-size: 0.75rem;
	line-height: 1.5;
	text-align: right;
}

@media (min-width: 768px) {
	.jpl-part--natural-cta .jpl-part__box {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding: 1rem 1.5rem;
	}

	/* label なし → 本文 + ボタンの2列に切り替え */
	.jpl-part--natural-cta .jpl-part__box:not(:has(.jpl-part__label)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.jpl-part--natural-cta .jpl-part__actions {
		flex-wrap: wrap;
		justify-content: flex-end;
		max-width: 320px;
	}

	.jpl-part--natural-cta .jpl-part__note {
		text-align: right;
	}
}

@media (max-width: 767px) {
	.jpl-part--natural-cta .jpl-part__box {
		grid-template-columns: minmax(0, 1fr);
		padding: 1rem;
	}

	.jpl-part--natural-cta .jpl-part__label {
		display: none;
	}

	.jpl-part--natural-cta .jpl-part__content {
		text-align: center;
	}

	.jpl-part--natural-cta .jpl-part__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		width: 100%;
	}

	/* ボタン1つのとき → 1列幅いっぱい（2分割グリッドを解除） */
	.jpl-part--natural-cta .jpl-part__actions:has(.jpl-part__button:only-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	.jpl-part--natural-cta .jpl-part__button {
		width: 100%;
	}

	.jpl-part--natural-cta .jpl-part__note {
		grid-column: 1 / -1;
		text-align: center;
	}
}