/* ===============================
   rooms-flow: 会議から会食への転換
   =============================== */

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

.rooms-flow__heading {
	font-size: var(--fs-hero-mobile);
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.rooms-flow__subcopy {
	margin-top: var(--space-2);
	font-size: var(--fs-body-sm);
	letter-spacing: 0.04em;
}

.rooms-flow__sequence {
	margin-top: 0;
}

.rooms-flow__step {
	display: flex;
	flex-direction: column;
}

.rooms-flow__caption {
	order: 1;
	margin-bottom: 6px;
	color: var(--color-primary);
	font-size: var(--fs-body);
	letter-spacing: 0.08em;
	text-align: center;
}

.rooms-flow__photo {
	order: 2;
	width: 100%;
	margin-inline: 0;
	aspect-ratio: 9 / 5;
	height: auto;
	object-fit: cover;
}

.rooms-flow__step--meeting .rooms-flow__photo {
	object-position: center 64%;
}

.rooms-flow__step--dining .rooms-flow__photo {
	aspect-ratio: 19 / 10;
	object-position: center bottom;
}

.rooms-flow__timeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--space-1) / 2);
	margin-block: 1px;
	color: var(--color-main);
	font-size: var(--fs-body);
	letter-spacing: 0.08em;
	line-height: var(--lh-tight);
	text-align: center;
}

.rooms-flow__timeline::before,
.rooms-flow__timeline::after {
	content: "";
	width: 1px;
	height: var(--space-3);
	background: currentcolor;
}

.rooms-flow__timeline-break {
	display: none;
}

.rooms-flow__note {
	margin-top: 10px;
	font-size: var(--fs-body-sm);
	letter-spacing: 0.05em;
	line-height: var(--lh-body);
	text-align: center;
}

@media (max-width: 340px) {
	.rooms-flow__heading {
		white-space: normal;
	}
}

@media (min-width: 768px) {
	.rooms-flow {
		padding-block: var(--space-4) 17px;
	}

	.rooms-flow > .container {
		max-width: calc(var(--container-max) + var(--container-gutter) * 2);
		padding-inline: var(--space-9);
	}

	.rooms-flow__heading {
		font-size: var(--fs-h2);
		letter-spacing: 0.04em;
		transform: translateY(var(--space-1)) scaleX(0.915);
		transform-origin: left center;
	}

	.rooms-flow__subcopy {
		margin-top: var(--space-3);
		font-size: var(--fs-page-lead);
		letter-spacing: 0.02em;
	}

	.rooms-flow__sequence {
		display: grid;
		grid-template-columns: 39.5% 18% 42.5%;
		align-items: start;
		margin-top: calc(var(--space-6) + var(--space-1));
	}

	.rooms-flow__step {
		display: flex;
	}

	.rooms-flow__photo {
		order: 1;
		width: 100%;
		margin-inline: 0;
		aspect-ratio: auto;
		height: 295px;
	}

	.rooms-flow__step--dining .rooms-flow__photo {
		object-position: center 64%;
	}

	.rooms-flow__caption {
		order: 2;
		margin: 10px 0 0;
		color: var(--color-text);
		font-size: var(--fs-section-link);
		letter-spacing: 0.07em;
	}

	.rooms-flow__step--dining .rooms-flow__caption {
		transform: translateX(-35px);
	}

	.rooms-flow__timeline {
		align-self: center;
		gap: var(--space-4);
		margin: 0 var(--space-7) var(--space-9);
		color: var(--color-text);
		font-size: var(--fs-page-lead);
		line-height: var(--lh-body);
	}

	.rooms-flow__timeline::before,
	.rooms-flow__timeline::after {
		width: 100%;
		height: 1px;
		background: var(--color-comparison-line);
	}

	.rooms-flow__timeline-break {
		display: inline;
	}

	.rooms-flow__note {
		margin-top: var(--space-1);
		font-size: var(--fs-body);
		line-height: var(--lh-tight);
	}

	.rooms-flow__note-break {
		display: none;
	}
}

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

	.rooms-flow__heading {
		font-size: var(--fs-h2-mobile);
		line-height: var(--lh-tight);
		white-space: normal;
	}

	.rooms-flow__subcopy,
	.rooms-flow__note {
		margin-top: var(--space-4);
		font-size: var(--fs-body-pc);
		line-height: var(--lh-body);
	}

	.rooms-flow__sequence {
		margin-top: var(--space-5);
	}

	.rooms-flow__caption,
	.rooms-flow__timeline {
		font-size: var(--fs-body);
		line-height: var(--lh-body);
	}

	.rooms-flow__caption {
		margin-bottom: var(--space-3);
	}

	.rooms-flow__timeline {
		margin-block: var(--space-3);
	}
}