.l-scroll-top {
	position: fixed;
	inset: auto 20px 120px auto;
	width: 60px;
	padding: 0;
	background-color: var(--color-surface-dark);
	border: none;
	border-radius: 4px;
	aspect-ratio: 1/1;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	z-index: 30001;
}

.l-scroll-top.is-show {
	opacity: 1;
	visibility: visible;
}

.l-scroll-top::before {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	width: 18px;
	background-color: #fff;
	clip-path: polygon(0 100%, 50% 0, 100% 100%);
	aspect-ratio: 2 / 1;
	transform: translate(-50%, -50%);
}

@media (any-hover: hover) {
	.l-scroll-top:hover {
		background-color: var(--color-surface-dark);
		opacity: 0.8;
	}
}

.l-footer {
	--width-ratio: (100vw / 1440);
	background-color: var(--color-base);
}

.l-footer__main {
	position: relative;
	padding: calc(112 * var(--width-ratio)) calc(20 * var(--width-ratio)) calc(60 * var(--width-ratio));
}

.l-footer__inner {
	position: relative;
	max-width: calc(1286 * var(--width-ratio));
	margin: 0 auto;
	z-index: 1;
}

.l-footer__char {
	position: absolute;
	display: block;
}

.l-footer__char img {
	display: block;
	width: 100%;
}

.l-footer__char--blue {
	inset: calc(-112 * var(--width-ratio)) auto auto calc(22 * var(--width-ratio));
	width: calc(134 * var(--width-ratio));
}

.l-footer__char--yellow {
	inset: calc(12 * var(--width-ratio)) calc(300 * var(--width-ratio)) auto auto;
	width: calc(90 * var(--width-ratio));
}

.l-footer__char--red {
	inset: calc(-6 * var(--width-ratio)) calc(146 * var(--width-ratio)) auto auto;
	width: calc(87 * var(--width-ratio));
	transform: rotate(15deg);
}

.l-footer__logo {
	display: block;
	width: calc(280 * var(--width-ratio));
	margin: 0 auto auto calc(116 * var(--width-ratio));
}

.l-footer__logo img {
	display: block;
	width: 100%;
}

.l-footer__row {
	display: grid;
	grid-template-columns: 1fr calc(287 * var(--width-ratio));
	gap: calc(64 * var(--width-ratio));
	margin-top: calc(30 * var(--width-ratio));
}

.l-footer__boxes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(64 * var(--width-ratio));
}

.l-footer__box {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	padding: calc(26 * var(--width-ratio)) calc(20 * var(--width-ratio)) calc(20 * var(--width-ratio));
	border-radius: calc(16 * var(--width-ratio));
	aspect-ratio: 270 / 184;
}

.l-footer__box-title {
	position: relative;
	font-size: calc(20 * var(--width-ratio));
	font-weight: 700;
	line-height: 1;
	color: #fff;
	z-index: 1;
}

.l-footer__box-textarea {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-top: calc(56 * var(--width-ratio));
	font-size: calc(16 * var(--width-ratio));
	font-weight: 700;
	line-height: 1;
	z-index: 1;
}

.l-footer__box-textarea strong {
	font-size: calc(24 * var(--width-ratio));
}

.l-footer__box-textarea span {
	font-size: calc(14 * var(--width-ratio));
}

.l-footer__box-textarea ul {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding-left: 1.5em;
	list-style: disc;
}

.l-footer__box-bg {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.l-footer__box-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.l-footer__buttons {
	display: flex;
	flex-direction: column;
	gap: calc(30 * var(--width-ratio));
	margin-top: calc(20 * var(--width-ratio));
}

.l-footer__button {
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(8 * var(--width-ratio));
	padding: calc(22 * var(--width-ratio)) calc(20 * var(--width-ratio));
	border-radius: calc(8 * var(--width-ratio));
	font-size: calc(16 * var(--width-ratio));
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.l-footer__button-text {
	position: relative;
	z-index: 1;
}

.l-footer__button-icon {
	position: relative;
	display: flex;
	align-items: center;
	width: calc(16 * var(--width-ratio));
	margin-top: calc(2 * var(--width-ratio));
	padding: calc(2 * var(--width-ratio));
	background-color: #fff;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	transition: all 0.3s;
	z-index: 1;
}

.l-footer__button-icon img {
	display: block;
	width: 100%;
	height: auto;
}

.l-footer__button-bg {
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.l-footer__button-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (any-hover: hover) {
	.l-footer__button:hover {
		text-decoration: none;
	}

	.l-footer__button:hover .l-footer__button-icon {
		transform: translateX(3px);
	}
}

.l-footer__bg {
	position: absolute;
	inset: calc(60 * var(--width-ratio)) auto auto 0;
	width: 100%;
	height: calc(100% - (60 * var(--width-ratio)));
	z-index: 0;
}

.l-footer__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.l-footer-foot {
	padding: 8px 20px;
	background-color: var(--color-accent);
	color: #fff;
}

.l-footer-foot__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	max-width: 1120px;
	margin: 0 auto;
}

.l-footer-foot__links {
	display: flex;
}

.l-footer-foot__link+.l-footer-foot__link::before {
	content: '/';
	margin: 0 4px;
}

.l-footer-foot__link>a {
	font-size: 12px;
	color: unset;
}

@media (any-hover: hover) {
	.l-footer-foot__link>a:hover {
		text-decoration: underline;
	}
}

.l-footer-foot__copy {
	font-size: 12px;
}

@media screen and (max-width: 767px) {
	.l-footer {
		--width-ratio: (100vw / 750);
	}

	.l-footer__main {
		padding-left: 20px;
		padding-right: 20px;
	}

	.l-footer__char--blue {
		inset: calc(-132 * var(--width-ratio)) auto auto 0;
	}

	.l-footer__char--yellow {
		inset: calc(12 * var(--width-ratio)) calc(220 * var(--width-ratio)) auto auto;
	}

	.l-footer__char--red {
		inset: calc(-6 * var(--width-ratio)) calc(66 * var(--width-ratio)) auto auto;
	}

	.l-footer__logo {
		margin-left: 0;
	}

	.l-footer__row {
		position: relative;
		grid-template-columns: 1fr;
		gap: calc(40 * var(--width-ratio));
		margin-top: calc(40 * var(--width-ratio));
	}

	.l-footer__boxes {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(40 * var(--width-ratio));
	}

	.l-footer__box-title {
		font-size: calc(32 * var(--width-ratio));
	}

	.l-footer__box-textarea {
		gap: calc(4 * var(--width-ratio));
		margin-top: calc(42 * var(--width-ratio));
		font-size: calc(24 * var(--width-ratio));
		line-height: 1.2;
	}

	.l-footer__box-textarea strong {
		font-size: calc(32 * var(--width-ratio));
	}

	.l-footer__box-textarea span {
		font-size: calc(18 * var(--width-ratio));
	}

	.l-footer__box-textarea ul {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		padding-left: 1.5em;
		list-style: disc;
	}

	.l-footer__buttons {
		position: absolute;
		inset: auto 0 0 auto;
		width: calc(316 * var(--width-ratio));
		margin-top: 0;
	}

	.l-footer__button {
		border-radius: calc(12 * var(--width-ratio));
		font-size: calc(30 * var(--width-ratio));
	}

	.l-footer__button-icon {
		width: calc(32 * var(--width-ratio));
	}

	.l-footer__bg {
		background-color: #c1e195;
	}

	.l-footer-foot {
		padding: 20px;
	}

	.l-footer-foot__inner {
		flex-direction: column;
		gap: 24px;
	}
}