@charset "utf-8";

/*========= ページトップのためのCSS ===============*/

/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;

  background: #D8EA99;
  border-radius: 50%;
  width: 60px;
  height: 60px;

  color: #707070;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size:0.8rem;

  transition:all 0.3s;
  position: relative;
}

#page-top a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #707070;
  border-right: solid 2px #707070;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

#page-top a:hover{
  filter: brightness(90%) contrast(120%);
}

#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 50;
  
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;                 /* ←非表示に戻す */
    transform: translateY(100px);
  }
}