@charset "UTF-8";

.page-top {
    position: fixed;
    right: 10px;
    bottom:30px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(150px);
  }
  
  .page-top.UpMove{
    animation: UpAnime 0.5s forwards;
  }
  
  @keyframes UpAnime{
    from {
      opacity: 0;
    transform: translateY(150px);
    }
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  .page-top.DownMove{
    animation: DownAnime 0.5s forwards;
  }
  
  @keyframes DownAnime{
    from {
      opacity: 1;
    transform: translateY(0);
    }
    to {
      opacity: 1;
    transform: translateY(150px);
    }
  }
  
 .page-top a {
    display: block;
    width: 90px;
    height: 90px;
    color: #333;
    text-align: center;
    text-transform: uppercase; 
    text-decoration: none;
    font-size:0.6rem;
    background: url(../Logo_300px.svg) no-repeat center;
    background-size: contain;
  }
  
 .page-top.floatAnime a{
    /* width: 70px;
    height: 110px; */
    background: url(../Logo_300px.svg) no-repeat center;
    background-size: contain;
    animation: floatAnime 2s linear infinite;
    opacity: 0;
  }
  
  @keyframes floatAnime {
    0% { transform: translateX(0); opacity: 0; }
    25% { transform: translateX(-6px);opacity: 1; }
    50% { transform: translateX(0) }
    100% { transform: translateX(6px);opacity: 1; }
  }
  
  .page-top span{
      position: absolute;
      bottom: -10px;
      left: 20px;
  }