@charset "utf-8";
.base-move-button {
  position: fixed;
  bottom: 10.6666666667vw;
  right: 4vw;
  transform: translateY(-100%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
}
@media (min-width: 768px) {
  .base-move-button {
    bottom: 7.8125vw;
    right: 2.9296875vw;
    width: 7.8125vw;
    height: 7.8125vw;
  }
}
@media (min-width: 960px) {
  .base-move-button {
    right: 2.2916666667vw;
    bottom: 5.2083333333vw;
    width: 3.125vw;
    height: 3.125vw;
  }
}
@media (min-width: 1920px) {
  .base-move-button {
    right: 44px;
    bottom: 100px;
    width: 60px;
    height: 60px;
  }
}
.base-move-button i {
  line-height: 0;
}
.base-move-button svg {
  width: 100%;
  height: 100%;
}
.base-move-button svg path {
  transition: opacity 0.2s ease-in;
}
.base-move-button svg:hover path {
  opacity: 1;
}
.base-move-button .move-button__top {
  transform: rotate(180deg);
}
.base-move-button.hidden {
  animation: baseMoveFadeOut 0.3s ease-in forwards;
  bottom: -100%;
}
.base-move-button.visible {
  animation: baseMoveFadeIn 0.3s ease-in forwards;
}

aside.base-move-button {
  height: auto;
  transform: translateY(0);
}

@keyframes baseMoveFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes baseMoveFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 960px) {
  .modal-open .base-move-button {
    right: 3.0729166667vw;
  }
}
@media (min-width: 1920px) {
  .modal-open .base-move-button {
    right: 59px;
  }
}