.c-scroll-link-wrap {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
	.c-scroll-link-wrap {
		display: none;
	}
}

.c-scroll-link {
	--scroll-link-width: 80px;
	--scroll-link-height: 120px;
	--scroll-link-font-size: 12px;
	--scroll-link-label-width: 30px;
	--scroll-link-dot-size: 9px;
	--scroll-link-accent: #ff635d;
	--scroll-link-text: #ffffff;
	--scroll-link-line: #ffffff;
	display: block;
	position: relative;
	width: clamp(64px, 6.666vw, var(--scroll-link-width));
	height: clamp(96px, 10vw, var(--scroll-link-height));
	color: var(--scroll-link-text);
	font-size: clamp(10px, 1vw, var(--scroll-link-font-size));
	text-decoration: none;
	transition: color 0.3s ease;
}

@media screen and (hover: hover) {
	.c-scroll-link:hover {
		color: var(--scroll-link-accent);
	}
}

.c-scroll-link::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: clamp(7px, 0.75vw, var(--scroll-link-dot-size));
	height: clamp(7px, 0.75vw, var(--scroll-link-dot-size));
	border-radius: 50%;
	background: var(--scroll-link-accent);
	transform: translateX(-50%);
	z-index: 1;
	transition: top 0.3s ease;
}

@media screen and (hover: hover) {
	.c-scroll-link:hover::before {
		top: calc(100% - clamp(7px, 0.75vw, var(--scroll-link-dot-size)));
	}
}

.c-scroll-link__label {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(24px, 2.5vw, var(--scroll-link-label-width));
	line-height: 1;
	writing-mode: vertical-rl;
}

.c-scroll-link__line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--scroll-link-line);
	transform: translateX(-50%);
}

.c-scroll-link__line::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	background: var(--scroll-link-accent);
	animation: scroll-link-line 3s ease-in-out reverse infinite;
	transition: height 0.3s ease;
}

@media screen and (hover: hover) {
	.c-scroll-link:hover .c-scroll-link__line::before {
		height: 100%;
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-scroll-link,
	.c-scroll-link::before,
	.c-scroll-link__line::before {
		transition: none;
		animation: none;
	}

	.c-scroll-link__line::before {
		height: 35%;
	}
}

@keyframes scroll-link-line {
	0% {
		bottom: 0;
		height: 0;
	}

	20%,
	40% {
		bottom: 0;
		height: 100%;
	}

	60% {
		bottom: 100%;
		height: 0;
	}

	100% {
		bottom: 100%;
		height: 0;
	}
}