@charset "utf-8";
/*===================
footer
===================*/
footer {
  padding-top: 100px;
  position: relative;
  z-index: 2;
}
.footer__nav {
  margin-bottom: 10px;
}
.footer__nav ul {
  font-size: max(14px, 0.97vw);
  line-height: 1.75;
  display: flex;
  justify-content: center;
  gap: 0 2em;
  margin: 0 auto;
  transition: 0.3s;
}
.footer__nav ul li a:hover {
  color: #004896;
}
.footer__copy {
  border-radius: 15px 15px 0 0;
  padding: 27px 0 25px;
}
.footer__copy p {
  font-size: max(12px, 0.83vw);
  line-height: 1.75;
  letter-spacing: 0.2em;
}
#totop {
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #004896;
  text-shadow:
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  position: fixed;
  bottom: 3vw;
  left: 50%;
  transform: translateX(492px);
  transition: 0.3s;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
#totop.is-hide {
  opacity: 0;
  pointer-events: none;
}

#totop.is-stop {
  bottom: 80px;
}
#totop::after {
  content: "";
  width: 2.75em;
  height: 2.75em;
  background: url(../imgs/common/arrow_bl.svg) no-repeat center / contain;
  transform: translateY(0) rotate(-90deg);
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

#totop:hover::after {
  animation: jumpUp 0.3s ease-out forwards;
}

@keyframes jumpUp {
  0% {
    transform: translateY(0) rotate(-90deg);
  }
  60% {
    transform: translateY(-8px) rotate(-90deg);
  }
  80% {
    transform: translateY(-5px) rotate(-90deg);
  }
  100% {
    transform: translateY(0px) rotate(-90deg);
  }
}
@media screen and (max-width: 1240px) {
  #totop {
    left: auto;
    right: 2vw;
    transform: initial;
  }
}
@media screen and (max-width: 980px) {
  .footer__nav ul {
    flex-wrap: wrap;
    width: calc(100% - 66px);
    max-width: 400px;
  }
}
@media screen and (max-width: 768px) {
  #totop span {
    display: none;
  }
}
@media screen and (max-width: 480px) {
}

@media screen and (max-width: 375px) {
}