/* private-space: 空間のしつらえ */

.private-space {
	padding-block: var(--space-5);
	background-color: var(--color-bg);
	background-image: url("../../img/bg_top-concrete.webp");
	background-repeat: repeat;
	border-top: 1px solid var(--color-border-soft);
}

.private-space__inner {
	padding-inline: 28px;
}

.private-space__title {
	font-size: var(--fs-section-title-mobile);
	font-weight: var(--fw-normal);
	letter-spacing: 0.14em;
}

.private-space__text {
	margin-top: var(--space-4);
	font-size: 9px;
	line-height: var(--lh-body);
	letter-spacing: 0.05em;
}

.private-space__collage {
	margin-top: var(--space-5);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-1);
}

.private-space__frame {
	position: relative;
	overflow: hidden;
}

.private-space__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.private-space__frame--flowers {
	grid-column: 1 / -1;
	aspect-ratio: 2.35 / 1;
}

.private-space__frame--lamp,
.private-space__frame--art {
	aspect-ratio: 1.05 / 1;
}

.private-space__img--flowers {
	object-position: 50% 62%;
	transform: scale(4.5);
	transform-origin: 50% 58%;
}

.private-space__img--lamp {
	object-position: 24% 45%;
	transform: scale(5.2);
	transform-origin: 24% 42%;
}

.private-space__img--art {
	object-position: 30% 35%;
	transform: scale(4);
	transform-origin: 30% 35%;
}

@media (min-width: 768px) {
	.private-space {
		padding-block: var(--space-7);
	}

	.private-space__inner {
		max-width: 1440px;
		display: grid;
		grid-template-columns: 28% 22% 27% 23%;
		align-items: end;
		padding-inline: 60px;
	}

	.private-space__copy {
		padding-right: var(--space-10);
		padding-bottom: var(--space-8);
	}

	.private-space__title {
		font-size: 30px;
	}

	.private-space__text {
		margin-top: var(--space-7);
		font-size: var(--fs-body-pc);
		line-height: 2.15;
	}

	.private-space__collage {
		grid-column: 2 / -1;
		margin: 0;
		display: grid;
		grid-template-columns: 1fr 1.3fr 1.2fr;
		gap: var(--space-4);
	}

	.private-space__frame--flowers,
	.private-space__frame--lamp,
	.private-space__frame--art {
		grid-column: auto;
		width: 100%;
		height: 260px;
		aspect-ratio: auto;
	}

	.private-space__frame--flowers {
		order: 2;
	}

	.private-space__frame--lamp {
		order: 1;
	}

	.private-space__frame--art {
		order: 3;
	}
}

@media (max-width: 767px) {
	.private-space {
		padding-block: var(--space-6) var(--space-4);
		border-top: 0;
	}

	.private-space__inner {
		padding-inline: var(--container-gutter-mobile);
	}

	.private-space__title {
		font-size: var(--fs-h2-mobile);
		font-weight: var(--fw-normal);
		line-height: var(--lh-tight);
		letter-spacing: 0.1em;
		text-align: center;
	}

	.private-space__title::after {
		display: block;
		width: var(--space-9);
		margin: var(--space-2) auto 0;
		border-bottom: 1px solid var(--color-main);
		content: "";
	}

	.private-space__text {
		margin-top: var(--space-4);
		font-size: var(--fs-body-pc);
		line-height: var(--lh-body);
		word-break: auto-phrase;
	}

	.private-space__collage {
		gap: var(--space-2);
		margin-top: var(--space-5);
	}

	.private-space__frame {
		border-radius: var(--radius-sm);
	}

	.private-space__frame--flowers {
		aspect-ratio: 12 / 5;
	}

	.private-space__frame--lamp,
	.private-space__frame--art {
		aspect-ratio: 3 / 2;
	}
}