/*
 * ケイモビ プラン比較ページ・送客先確認中ページ
 * 表の基本スタイルは style.css の .km-table / .km-table-scroll を使い、ここでは差分だけを定義する。
 */

/* ---------- Compare page ---------- */
.km-compare__lead {
	max-width: 46em;
	margin: 0 0 var(--km-space-6) !important;
	font-size: var(--km-text-body-lg);
	line-height: var(--km-leading-body);
}

/* 広告表記と掲載順。小さく薄くせず、本文と同等に読めるようにする */
.km-compare__disclosure {
	margin: 0 0 var(--km-space-6) !important;
	padding: var(--km-space-4) var(--km-space-5);
	border: 1px solid var(--km-color-border);
	border-left: 4px solid var(--km-color-navy);
	border-radius: var(--km-radius-sm);
	background: var(--km-color-surface-subtle);
	color: var(--km-color-text);
	font-size: var(--km-text-body);
	line-height: var(--km-leading-body);
}

.km-compare__disclosure p {
	margin: 0;
}

.km-compare__disclosure-text {
	color: var(--km-color-text-strong);
	font-weight: var(--km-weight-bold);
}

.km-compare__order {
	margin-top: var(--km-space-2) !important;
}

.km-compare__order strong {
	display: block;
	color: var(--km-color-text-strong);
}

.km-compare__disclosure a,
.km-compare__empty a:not(.km-text-link) {
	color: var(--km-color-link);
	text-decoration: underline;
}

.km-compare__disclosure a:hover {
	color: var(--km-color-link-hover);
}

.km-compare .km-placeholder-notice {
	margin-bottom: var(--km-space-6) !important;
}

/* 表 */
.km-compare__scroll {
	margin-top: 0 !important;
}

.km-compare__table tbody th.km-compare__plan {
	width: auto;
	min-width: 180px;
}

.km-compare__provider {
	display: block;
	color: var(--km-color-muted);
	font-size: var(--km-text-small);
	font-weight: var(--km-weight-regular);
	line-height: var(--km-leading-small);
}

.km-compare__plan-name {
	display: block;
	margin-top: var(--km-space-1);
	color: var(--km-color-text-strong);
	font-weight: var(--km-weight-bold);
	line-height: var(--km-leading-small);
}

.km-compare__pending {
	color: var(--km-color-muted);
}

.km-compare__action {
	white-space: nowrap;
	vertical-align: middle !important;
}

.km-compare__action .km-button {
	white-space: nowrap;
}

.km-compare__action .km-icon {
	width: 18px;
	height: 18px;
}

.km-compare__empty {
	margin: 0 !important;
	padding: var(--km-space-6);
	border: 1px solid var(--km-color-border);
	border-radius: var(--km-radius-md);
	background: var(--km-color-white);
}

.km-compare__empty p {
	margin: 0;
}

.km-compare__empty p + p {
	margin-top: var(--km-space-3);
}

/* 表の下のCTA帯(浮いたカードではなく、枠と淡い面で区切った帯) */
.km-compare-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--km-space-4) var(--km-space-6);
	margin-top: var(--km-space-10) !important;
	padding: var(--km-space-6) var(--km-space-8);
	border-top: 1px solid var(--km-color-border);
	border-bottom: 1px solid var(--km-color-border);
	background: var(--km-color-surface-info);
}

.km-compare-cta__text {
	margin: 0;
	color: var(--km-color-text-strong);
	font-size: var(--km-text-body-lg);
	font-weight: var(--km-weight-bold);
}

/* ---------- Outbound pending page ---------- */
.km-outbound-pending .km-placeholder-notice {
	margin-bottom: var(--km-space-6) !important;
}

.km-outbound-pending__text {
	margin: 0 0 var(--km-space-4) !important;
	font-size: var(--km-text-body);
	line-height: var(--km-leading-body);
	overflow-wrap: anywhere;
}

.km-outbound-pending__links {
	margin-top: var(--km-space-8) !important;
}

.km-outbound-pending__links .km-text-link {
	padding-block: var(--km-space-3);
}

/* ---------- Focus ---------- */
.km-compare a:focus-visible,
.km-compare__scroll:focus-visible,
.km-outbound-pending a:focus-visible {
	outline: 2px solid var(--km-color-focus);
	outline-offset: 3px;
}

/* ---------- SP ---------- */
@media (max-width: 781px) {
	.km-compare__disclosure {
		padding: var(--km-space-4);
	}

	/* SPでは表全体を横スクロールさせる(スクロール領域の外ははみ出さない) */
	.km-compare__table {
		min-width: 960px;
	}

	.km-compare__table tbody th.km-compare__plan {
		min-width: 160px;
	}

	.km-compare-cta {
		flex-direction: column;
		align-items: stretch;
		padding: var(--km-space-5);
	}

	.km-compare-cta .km-button {
		width: 100%;
	}
}

/* 表直下の注記(.km-page > * の余白リセットより優先) */
.km-compare .km-note {
	margin-top: var(--km-space-4);
}