/*
 * 料金ページ専用スタイル。
 * 共通料金カードは price-section.css で管理する。
 */

.p-price-hero .p-page-hero__inner {
	max-width: 920px;
}

.p-price-section-head {
	max-width: 920px;
}

.p-price-section-head .c-section-title {
	max-width: 900px;
	margin-bottom: 18px;
}

.p-price-section-head .c-section-lead {
	max-width: 860px;
}

.p-price-note {
	max-width: 980px;
	margin: 20px 0 0;
	color: var(--color-text-secondary);
	line-height: 1.8;
}

.p-price-comparison {
	width: 100%;
	margin-top: 36px;
	overflow-x: auto;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 28px var(--color-shadow-primary-soft);
	-webkit-overflow-scrolling: touch;
}

.p-price-comparison:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
}

.p-price-comparison table {
	width: 100%;
	min-width: 900px;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

.p-price-comparison th,
.p-price-comparison td {
	padding: 18px 20px;
	vertical-align: middle;
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.p-price-comparison th:last-child,
.p-price-comparison td:last-child {
	border-right: 0;
}

.p-price-comparison tbody tr:last-child th,
.p-price-comparison tbody tr:last-child td {
	border-bottom: 0;
}

.p-price-comparison thead th {
	color: var(--color-heading);
	text-align: center;
	background: var(--color-background-subtle);
}

.p-price-comparison thead th:first-child {
	width: 28%;
	text-align: left;
}

.p-price-comparison thead th:not(:first-child) {
	width: 24%;
}

.p-price-comparison thead th span,
.p-price-comparison thead th strong {
	display: block;
}

.p-price-comparison thead th span {
	margin-bottom: 7px;
	font-weight: 600;
}

.p-price-comparison thead th strong {
	font-size: var(--font-size-item-title);
	font-weight: 700;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.p-price-comparison tbody th {
	color: var(--color-heading);
	font-weight: 500;
	text-align: left;
	background: var(--color-background-subtle);
}

.p-price-comparison tbody td {
	color: var(--color-text);
	font-weight: 500;
	text-align: center;
	background: var(--color-background);
}

.p-price-comparison .is-recommended {
	background: var(--color-primary-bg);
}

.p-price-comparison thead .is-recommended {
	color: var(--color-primary-deep);
	box-shadow: inset 0 3px 0 var(--color-primary);
}

.p-price-meta-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 36px;
}

.p-price-meta-card {
	min-width: 0;
	padding: 28px;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 10px 28px var(--color-shadow-primary-soft);
}

.p-price-meta-card__label {
	margin: 0 0 8px;
	color: var(--color-primary-dark);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.p-price-meta-card h3 {
	margin: 0;
	color: var(--color-heading);
}

.p-price-meta-card > p:last-child {
	margin: 14px 0 0;
	color: var(--color-text-secondary);
	line-height: 1.85;
}

.p-price-meta-card__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 16px 0 0;
	color: var(--color-heading);
}

.p-price-meta-card__price strong {
	font-size: var(--font-size-h3);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.p-price-meta-card__price span {
	color: var(--color-text-secondary);
	font-weight: 500;
}

@media (max-width: 960px) {
	.p-price-comparison thead th:first-child,
	.p-price-comparison tbody th {
		position: sticky;
		left: 0;
		z-index: 2;
	}

	.p-price-comparison thead th:first-child {
		z-index: 3;
	}

	.p-price-meta-grid {
		grid-template-columns: 1fr;
		max-width: 760px;
	}
}

@media (max-width: 640px) {
	.p-price-comparison {
		margin-top: 28px;
	}

	.p-price-comparison th,
	.p-price-comparison td {
		padding: 15px 16px;
	}

	.p-price-meta-grid {
		gap: 16px;
		margin-top: 28px;
	}

	.p-price-meta-card {
		padding: 22px 20px;
	}
}