.rhythm_stability_alert_section {
	display: flex;
	justify-content: space-between;
	gap: 4vw;
	padding: 5vw 1vw;
	padding-bottom: 10vw;
	background-color: #050505;
	color: #fafafa;
}

.rhythm_stability_alert_section__images {
	position: relative;
	flex-shrink: 0;
	width: 47.5vw;
	min-height: 84vw;
}

.rhythm_stability_alert_section__images img {
	position: absolute;
	height: auto;
	opacity: 0;
	transform: translateY(4vw);
	transition:
		opacity 1.2s ease-out,
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.rhythm_stability_alert_section__images img:first-child {
	top: 3vw;
	left: 2.3vw;
	width: 21vw;
}

.rhythm_stability_alert_section__images img:last-child {
	top: 15.6vw;
	left: 6vw;
	width: 40.5vw;
	transition-delay: 0.2s;
}

.rhythm_stability_alert_section__images img.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.rhythm_stability_alert_section__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 46.6vw;
}

.info__title {
	font-size: 6.1vw;
	line-height: 5.3vw;
	font-weight: 500;
	letter-spacing: -0.05vw;
	color: #363636;
	width: 40vw;
}

.info__description {
	margin-top: 4vw;
	font-size: 1.7vw;
	line-height: 2.5vw;
	text-align: justify;
}

.content__chart {
	margin-top: 8vw;
}

.chart__title,
.chart__subtitle {
	position: relative;
	z-index: 1;
	font-size: 1.04vw;
}

.chart__title {
	font-weight: 500;
	text-transform: uppercase;
}

.chart__subtitle {
	margin: 0.6vw 0 0;
	line-height: 1.45vw;
	color: #363636;
}

.chart__box {
	position: relative;
	margin-top: -3vw;
	padding: 0 0 2.4vw 1.6vw;
}

.chart__box span {
	position: absolute;
	font-size: 1.04vw;
	font-weight: 600;
	white-space: nowrap;
}

.chart__box span:first-of-type {
	top: 54%;
	left: 0.5vw;
	transform: translate(-50%, -50%) rotate(-90deg);
}

.chart__box span:last-of-type {
	bottom: 0;
	left: calc(1.6vw + 45vw * 0.517);
	transform: translateX(-50%);
}

.chart__svg {
	display: block;
	width: 45vw;
	height: auto;
}

.chart__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.chart__area {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 2.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.chart__box.is-visible .chart__line {
	stroke-dashoffset: 0;
}

.chart__box.is-visible .chart__area {
	clip-path: inset(0 0 0 0);
}

@media (max-width: 800px) {
	.rhythm_stability_alert_section {
		flex-direction: column;
		gap: 10vw;
		padding: 15vw 4vw;
	}

	.rhythm_stability_alert_section__images {
		width: 100%;
		min-height: 150vw;
	}

	.rhythm_stability_alert_section__images img:first-child {
		top: 0;
		left: 0;
		width: 42vw;
	}

	.rhythm_stability_alert_section__images img:last-child {
		top: 24vw;
		left: 10vw;
		width: 82vw;
	}

	.rhythm_stability_alert_section__content {
		width: 100%;
	}

	.content__info {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: 4.9vw;
	}

	.info__title {
		flex: 1;
		width: auto;
		margin-top: -1vw;
		font-size: 9.3vw;
		line-height: 10vw;
		font-weight: 700;
		letter-spacing: 0;
		color: #3a3a3a;
	}

	.info__description {
		flex-shrink: 0;
		width: 49vw;
		margin-top: 0;
		font-size: 4.3vw;
		line-height: 5.7vw;
	}

	.content__chart {
		margin-top: 8vw;
	}

	.chart__title,
	.chart__subtitle {
		display: none;
	}

	.chart__box span {
		font-size: 3.2vw;
	}

	.chart__box {
		margin-top: 0;
		padding: 0 0 6vw 7vw;
	}

	.chart__box span:first-of-type {
		left: 2vw;
	}

	.chart__box span:last-of-type {
		left: calc(7vw + 85vw * 0.517);
	}

	.chart__svg {
		width: 85vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rhythm_stability_alert_section__images img,
	.chart__line,
	.chart__area {
		transition: none;
	}
}