@charset "utf-8";

.js-pagetop {
	z-index: 9;
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: auto;
	aspect-ratio: 1 / 1;
	opacity: 0;
	transition: .5s;
	background-color: #E3C34C;
}

.js-pagetop::before {
	content: "";
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 20%;
	height: 20%;
	border-top: 1px #fff solid;
	border-right: 1px #fff solid;
}

.js-pagetop.active {
	opacity: 1;
}

@media screen and (min-width: 768px) {
	.js-pagetop {
		/* width: 50px; */
	}
}

@media screen and (min-width: 1024px) {
	.js-pagetop {
		/* width: 50px; */
		width: 5%;
	}
}

@media screen and (min-width: 1440px) {
	.js-pagetop {
		/* width: 70px; */
	}
}

@media screen and (min-width: 1920px) {
	.js-pagetop {
		/* width: 100px; */
	}
}