.legal {
	position: relative;
	aspect-ratio: 1400 / 615;
	overflow: hidden;
	background: var(--color-white);
}

.legal__bg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
}

.legal__text {
	position: absolute;
	left: 10.714vw;
	top: 2.643vw;
	width: 28.571vw;
	text-align: left;
}

.legal__heading {
	display: flex;
	align-items: center;
	gap: 1.143vw;
	margin: 0 0 1.071vw;
	font-size: 2.214vw;
	line-height: 1;
	color: var(--color-navy);
	white-space: nowrap;
}

.legal__heading::before {
	content: "";
	width: 2.857vw;
	height: 1px;
	background: var(--color-navy);
}

.legal__title {
	margin: 0 0 0.857vw;
	font-size: 4.55vw;
	line-height: 1;
	font-weight: 700;
	color: var(--color-navy);
	white-space: nowrap;
}

.legal__subtitle {
	margin: 0;
	font-size: 1.643vw;
	line-height: 1;
	color: var(--color-navy);
	white-space: nowrap;
}

.legal__boxes {
	position: absolute;
	left: 68.786vw;
	top: 11.357vw;
	display: flex;
	flex-direction: column;
	gap: 1.571vw;
}

.legal__box {
	width: 21.429vw;
	height: 6.071vw;
	border: 1px solid var(--color-teal);
	border-radius: 4px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.4);
}

.legal__box img {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
}

.legal__box--placeholder span {
	font-size: 1.2rem;
	color: #999999;
	white-space: nowrap;
}

.legal-notice {
	margin: 0;
	padding: 12px 20px;
	background: var(--color-white);
	text-align: center;
	font-size: 1.2rem;
	color: #999999;
}

@media (max-width: 768px) {
	.legal {
		position: static;
		aspect-ratio: auto;
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.legal__bg {
		position: static;
		order: 1;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	.legal__text {
		position: static;
		order: 2;
		width: auto;
		padding: 24px 20px 0;
		text-align: center;
	}

	.legal__heading,
	.legal__title {
		display: none;
	}

	.legal__subtitle {
		font-size: 1.3rem;
	}

	.legal__boxes {
		position: static;
		order: 3;
		flex-direction: row;
		justify-content: center;
		padding: 20px;
		gap: 12px;
	}

	.legal__box {
		width: 140px;
		height: 60px;
	}
}