/* ================================
   Footer Banner
================================ */

.footer-banner {
  background-color: var(--color-navy-3);
  overflow: hidden;
  padding-block: 63px 0;
}

.footer-banner__inner {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.footer-banner__row {
  color: var(--color-white-1);
  font-family: "Outfit", var(--font-family-figtree), sans-serif;
  font-size: max(162px, 9vw);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  overflow: hidden;
  padding-block: 6px 14px;
  white-space: nowrap;
}

.footer-banner__track {
  display: flex;
  inline-size: max-content;
  min-inline-size: 100%;
  will-change: transform;
  animation: footer-banner-marquee 28s linear infinite;
}

.footer-banner__group {
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  padding-inline-end: 24px;
}

.footer-banner:hover .footer-banner__track {
  animation-play-state: paused;
}

.footer-banner__text {
  display: block;
  flex: 0 0 auto;
}

.footer-banner__accent {
  font-weight: 900;
}

@keyframes footer-banner-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ================================
   Tablet（769px〜1200px）
================================ */
@media screen and (min-width: 769px) and (max-width: 1200px) {
  .footer-banner__row {
    font-size: 118px;
  }

  .footer-banner__group {
    gap: 18px;
    padding-inline-end: 18px;
  }
}

/* ================================
   SP（〜768px）
================================ */
@media screen and (max-width: 768px) {
  .footer-banner__row {
    font-size: 72px;
    padding-block: 8px 10px;
  }

  .footer-banner__track {
    animation-duration: 20s;
  }

  .footer-banner__group {
    gap: 14px;
    padding-inline-end: 14px;
  }
}