@charset "utf-8";

/* ======================
footer__contact
====================== */
.footer__contact {
  background-color: #1d1d1d;
  padding-top: clamp(2.9375rem, 1.771rem + 2.431vw, 4.6875rem);
  padding-bottom: clamp(3.75rem, 1.417rem + 4.861vw, 7.25rem);
}
.footer-contact__inner {
  padding: 0 clamp(1.25rem, -5.917rem + 14.93vw, 12rem);
}
.footer-contact__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.25rem, 0.417rem + 1.736vw, 2.5rem);
  padding: clamp(2.5rem, 0.875rem + 3.385vw, 4.9375rem) clamp(1.25rem, -1.917rem + 6.597vw, 6rem);
  background-color: #2b2a2a;
}
.footer-contact__sub {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(0.875rem, 0.708rem + 0.347vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.footer-contact__main {
  margin-top: clamp(1rem, 0.458rem + 1.128vw, 1.8125rem);
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(1.25rem, 0.75rem + 1.042vw, 2rem);
  font-weight: 400;
  line-height: 1.875;
  color: #fff;
}
.footer-contact__right > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.footer-contact__right .container {
  display: none;
}
.footer-contact__btn {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: clamp(19.875rem, 9.333rem + 21.962vw, 35.6875rem);
  height: clamp(5rem, 3rem + 4.167vw, 8rem);
  padding: 0 clamp(1.5625rem, 1.438rem + 0.26vw, 1.75rem);
  background-color: #1d1d1d;
}
.footer-contact-btn__text {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(1.25rem, 0.75rem + 1.042vw, 2rem);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}
.footer-contact-btn__icon {
  flex-shrink: 0;
  width: clamp(1.1875rem, 0.938rem + 0.521vw, 1.5625rem);
  height: auto;
  opacity: 0;
}
.footer-contact__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(1.5625rem, 1.438rem + 0.26vw, 1.75rem);
  width: clamp(1.1875rem, 0.938rem + 0.521vw, 1.5625rem);
  height: clamp(0.4375rem, 0.354rem + 0.174vw, 0.5625rem);
  translate: 0 -50%;
  background-image: url("https://rkw.co.jp/system_panel/uploads/images/20260721101624673739.png"), url("https://rkw.co.jp/system_panel/uploads/images/20260721101624673739.png");
  background-repeat: no-repeat;
  background-size: clamp(1.1875rem, 0.938rem + 0.521vw, 1.5625rem) clamp(0.4375rem, 0.354rem + 0.174vw, 0.5625rem);
  background-position: 0 50%, -40px 50%;
  transition: background-position 0.4s ease-in-out;
  pointer-events: none;
}
.footer-contact__btn:hover::after,
a:hover .footer-contact__btn::after {
  background-position: 40px 50%, 0 50%;
}

/* ======================
footer__loop
====================== */
.footer__loop {
  display: flex;
  overflow: hidden;
  background-color: #1d1d1d;
}
.footer-loop__text {
  flex-shrink: 0;
  width: auto;
  max-width: none;
  height: clamp(3.75rem, 1.25rem + 5.208vw, 7.5rem);
  animation: footer-loop 30s linear infinite;
}
@keyframes footer-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ======================
footer
====================== */
.footer {
  background-color: #1d1d1d;
  padding-top: clamp(3.75rem, -0.583rem + 9.028vw, 10.25rem);
  padding-bottom: clamp(1.375rem, 1.208rem + 0.347vw, 1.625rem);
}
.footer__inner {
  padding: 0 clamp(1.25rem, -5.917rem + 14.93vw, 12rem);
}
.footer__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__left {
  display: flex;
  flex-direction: column;
}
.footer__logo {
  width: 79px;
  height: auto;
}
.footer__access {
  margin-top: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.792rem + 0.174vw, 1rem);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.footer__right {
  display: flex;
  gap: clamp(1.875rem, -0.208rem + 4.34vw, 5rem);
}
.footer__box {
  display: flex;
  gap: clamp(1.875rem, -0.208rem + 4.34vw, 5rem);
}
.footer__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer__item {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(0.875rem, 0.708rem + 0.347vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}
.footer__item--legal {
  font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
}
.footer__copyright {
  position: relative;
  margin-top: clamp(2.5rem, -1.542rem + 8.42vw, 8.5625rem);
  padding-top: clamp(1.625rem, 1.458rem + 0.347vw, 1.875rem);
  font-family: "Zen Old Mincho", serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
.footer__copyright::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background-color: #fff;
  pointer-events: none;
}

@media (max-width: 767px) {
  .footer__contact {
    padding-top: 47px;
    padding-bottom: 60px;
  }
  .footer-contact__inner {
    padding: 0 20px;
  }
  .footer-contact__container {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 40px 9px 60px;
  }
  .footer-contact__left {
    padding-right: 8px;
    padding-left: 8px;
  }
  .footer-contact__main {
    line-height: 1.6;
  }
  .footer-contact__btn {
    width: 100%;
    height: 80px;
  }
  .footer-contact__btn::after {
    background-position: 0 50%, -30px 50%;
  }
  .footer-contact__btn:hover::after,
  a:hover .footer-contact__btn::after {
    background-position: 30px 50%, 0 50%;
  }

  .footer-loop__text {
    height: 60px;
  }

  .footer {
    padding-top: 60px;
    padding-bottom: 22px;
  }
  .footer__inner {
    padding: 0 20px;
  }
  .footer__container {
    flex-direction: column;
    align-items: center;
  }
  .footer__left {
    align-items: center;
  }
  .footer__logo {
    width: 96px;
  }
  .footer__access {
    margin-top: 26px;
    text-align: center;
  }
  .footer__right {
    flex-direction: column;
    gap: 32px;
    width: 100%;
    margin-top: 60px;
    padding: 0 20px;
    max-width: 375px;
  }
  .footer__box {
    gap: 0;
  }
  .footer__box {
    justify-content: space-between;
    width: 100%;
  }
  .footer__box .footer__items {
    gap: 32px;
  }
  .footer__copyright {
    margin-top: 40px;
    padding-top: 26px;
  }
}

@media (max-width: 374px) {
  .footer-contact__main {
    font-size: 16px;
  }
  .footer-contact__btn {
    padding: 0 8px;
  }
}