@charset "UTF-8";

.p-pagetop {
	position: fixed;
	right: 10px;
	z-index: 100;
	opacity: 0;
	transform: translateY(100px);
  }
  .p-pagetop > span {
	display: grid;
	place-content: center;
	text-align: center;
	align-items: center;
	width: 2.4rem;
	height: 2.4rem;
	transition: all 0.3s;
	cursor: pointer;
	background: rgba(0,0,0, 0.6235294118);
	color: #fff;
	font-size: 1.2rem;
	border-radius: 50%;
  }
  .p-pagetop > span:hover {
	opacity: 0.7;
  }
  .p-pagetop.upMove {
	animation: UpAnime 0.5s forwards;
  }
  .p-pagetop.downMove {
	animation: DownAnime 0.5s forwards;
  }
  
  @keyframes UpAnime {
	from {
	  opacity: 0;
	  transform: translateY(100px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  @keyframes DownAnime {
	from {
	  opacity: 1;
	  transform: translateY(0);
	}
	to {
	  opacity: 1;
	  transform: translateY(100px);
	}
  }