/*
<div id="page_top"><a href="#">Top</a></div>
*/
#page_top {
  display: block;
  position: fixed;
  right: 10px;
  bottom: 10px;
  font-size: 0;
  user-select: none;
}
#page_top::before {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: '';
  /*background: var(--color-white);*/
  background: transparent;
  border-radius: 10px;
  /*opacity: 0.8;*/
}
#page_top a {
  display: inline-block;
  position: relative;
  right: 0;
  bottom: 0;
  padding: 110px 10px 10px;
  /*color: var(--color-deepblue);*/
  color: var(--color-gray);
  font-size: 13px;
  line-height: 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  overflow: hidden;
  transition: 0.2s;
}
#page_top a:hover {
  opacity: 0.8;
}
#page_top a::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1px;
  height: 90px;
  /*background: var(--color-deepblue);*/
  background: var(--color-gray);
  opacity: 0.4;
}
#page_top a::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1px;
  height: 90px;
  /*background: var(--color-deepblue);*/
  background: var(--color-gray);
  animation: scrlup 3.0s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes scrlup {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
}

@media screen and (max-width: 1023px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 567px) {}