/* ===============================
   rooms-compare: 個室と宴会場の比較
   =============================== */

.rooms-compare {
	padding-block: var(--space-2);
	background: var(--color-page-bg);
}

.rooms-compare__heading {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-inline: calc(var(--space-2) + 1px) calc(var(--space-7) + 3px);
	color: var(--color-text);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.08em;
	transform: translateY(calc(-1 * var(--space-3)));
	white-space: nowrap;
}

.rooms-compare__heading::before,
.rooms-compare__heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-comparison-line);
}

.rooms-compare__table {
	display: none;
}

.rooms-compare__mobile {
	margin: calc(-1 * (var(--space-5) + 1px)) calc(var(--space-7) + 3px) 0 calc(var(--space-2) + 1px);
}

.rooms-compare__group {
	border: 1px solid var(--color-comparison-frame);
	border-radius: calc(var(--radius-sm) / 2);
}

.rooms-compare__group:first-child {
	padding-top: var(--space-1);
}

.rooms-compare__group + .rooms-compare__group {
	margin-top: calc(var(--space-2) - 2px);
}

.rooms-compare__group-heading {
	padding-inline: var(--space-4);
	color: var(--color-primary);
	font-size: var(--fs-body);
	letter-spacing: 0.08em;
}

.rooms-compare__row {
	display: grid;
	grid-template-columns: var(--space-10) 1fr;
	border-top: 1px solid var(--color-comparison-grid);
	font-size: var(--fs-comparison-mobile);
	line-height: var(--lh-comparison);
}

.rooms-compare__group:first-child .rooms-compare__row {
	min-height: var(--space-4);
	align-items: center;
}

.rooms-compare__row dt,
.rooms-compare__row dd {
	padding-inline: var(--space-3);
}

.rooms-compare__row dt {
	border-right: 1px solid var(--color-comparison-grid);
	white-space: nowrap;
}

.rooms-compare__no-break {
	white-space: nowrap;
}

@media (min-width: 768px) {
	.rooms-compare > .container {
		max-width: calc(var(--container-max) + var(--container-gutter) * 2);
		padding-inline: var(--space-9);
	}

	.rooms-compare {
		padding-block: 0 var(--space-7);
	}

	.rooms-compare__heading {
		display: block;
		margin: calc(-1 * var(--space-2)) 0 var(--space-2);
		font-size: var(--fs-h2);
		letter-spacing: 0.04em;
		transform: translateY(calc(-1 * var(--space-2)));
	}

	.rooms-compare__heading::before,
	.rooms-compare__heading::after {
		display: none;
	}

	.rooms-compare__table {
		display: table;
		table-layout: fixed;
		border: 1px solid var(--color-border-soft);
		background: var(--color-white);
		font-size: var(--fs-page-lead);
		line-height: var(--lh-tight);
		text-align: center;
	}

	.rooms-compare__label-column {
		width: 13%;
	}

	.rooms-compare__private-column {
		width: 33%;
	}

	.rooms-compare__banquet-column {
		width: 54%;
	}

	.rooms-compare__table th,
	.rooms-compare__table td {
		padding: var(--space-3) var(--space-6);
		border: 1px solid var(--color-border-soft);
		font-weight: var(--fw-normal);
	}

	.rooms-compare__table thead th {
		background: var(--color-page-bg);
		font-weight: var(--fw-medium);
	}

	.rooms-compare__table tbody th {
		text-align: center;
		white-space: nowrap;
	}

	.rooms-compare__table thead tr {
		height: var(--space-10);
	}

	.rooms-compare__table tbody tr:nth-child(1) {
		height: calc(var(--space-10) + var(--space-2));
	}

	.rooms-compare__table tbody tr:nth-child(2) {
		height: var(--space-12);
	}

	.rooms-compare__table tbody tr:nth-child(3) {
		height: var(--space-11);
	}

	.rooms-compare__mobile {
		display: none;
	}
}

@media (max-width: 767px) {
	.rooms-compare {
		padding-block: var(--space-7);
	}

	.rooms-compare__heading {
		margin-inline: 0;
		font-size: var(--fs-h2-mobile);
		line-height: var(--lh-tight);
		transform: none;
		white-space: normal;
	}

	.rooms-compare__mobile {
		margin: var(--space-5) 0 0;
	}

	.rooms-compare__group-heading {
		padding: var(--space-3);
		font-size: var(--fs-body);
	}

	.rooms-compare__row {
		grid-template-columns: minmax(var(--space-12), 2fr) 5fr;
		min-height: var(--space-9);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
	}

	.rooms-compare__row dt,
	.rooms-compare__row dd {
		display: flex;
		align-items: center;
		padding: var(--space-2) var(--space-3);
	}

	.rooms-compare__row dt,
	.rooms-compare__no-break {
		white-space: normal;
	}
}