#page-top a{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 8px 0 0;
background: url(../../img/usr/common/back.png) center / contain no-repeat;
font-size: 10px;
line-height: 1.2;
font-weight: bold;
color: #fff;
position: relative;
}

#page-top a::before{
display: block;
content: 'PAGE';
}

#page-top a::after{
display: block;
content: 'TOP';
}

#page-top {
font-family: "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
position: fixed;
margin: 0;
padding: 0;
height: 0;
right: 40px;
z-index: 1000;
opacity: 0;
transform: translateY(100px);
letter-spacing: initial;
}

#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: 1;
 transform: translateY(100px);
 }
}

#page-top.totop_bottom{
bottom: 75px;
}


@media only screen and (max-device-width: 1199px) {

#page-top a{
width: 5rem;
height: 5rem;
background: url(../../img/usr/common/sp/back.png) center / contain no-repeat;
font-size: 1.0rem;
padding: 0.5rem 0 0;
}

#page-top {
right: 1.5rem;
transform: translateY(8rem);
}

#page-top.totop_bottom{
bottom: 6.7rem;
}

#page-top.UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
from {
 opacity: 0;
 transform: translateY(8rem);
 }
 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(8rem);
 }
}
}