@charset "UTF-8";

/* footer - SP overrides
================================================ */

@media (width <= 750px) {
  /* Gradient angle */
  footer {
    background: linear-gradient(
      81.86deg,
      var(--color-hd-contrast-lightest) 0%,
      var(--color-hd-contrast-lighter) 9.2%,
      var(--color-hd-contrast-light) 18.9%,
      var(--color-hd-contrast-dark) 28.6%,
      var(--color-hd-contrast-darker) 38.8%,
      var(--color-hd-contrast-darkest) 51.1%
    );
  }

  footer.footer--recruitment {
    background: linear-gradient(81.86deg, var(--color-rc-contrast-dark) 74.237%, var(--color-rc-contrast-light) 100%);
  }

  footer.footer--sales {
    background: linear-gradient(81.86deg, var(--color-sa-contrast-dark) 74.237%, var(--color-sa-contrast-light) 100%);
  }

  /* Container */
  .footer__inner {
    display: flex;
    flex-direction: column;
    gap: min(calc(30 / 375 * 100vw), 30px);
    padding: min(calc(50 / 375 * 100vw), 50px) 0;
  }

  /* Content area: column on SP */
  .footer-area {
    flex-direction: column;
    gap: min(calc(30 / 375 * 100vw), 30px);
    padding-right: min(calc(20 / 375 * 100vw), 20px);
  }

  /* Brand panel */
  .footer__brand {
    border-radius: 0 min(calc(5 / 375 * 100vw), 5px) min(calc(5 / 375 * 100vw), 5px) 0;
    gap: min(calc(20 / 375 * 100vw), 20px);
    padding: min(calc(50 / 375 * 100vw), 50px) min(calc(20 / 375 * 100vw), 20px);
  }

  .footer__tagline {
    font-size: min(calc(24 / 375 * 100vw), 24px);
    line-height: min(calc(35 / 375 * 100vw), 35px);
  }

  .footer__logos {
    gap: min(calc(10 / 375 * 100vw), 10px);
    order: -1;
  }

  .footer__logo-main {
    width: min(calc(78 / 375 * 100vw), 78px);
  }

  .footer__logos-sub {
    gap: min(calc(10 / 375 * 100vw), 10px);
  }

  .footer__logos-sub img {
    height: min(calc(30 / 375 * 100vw), 30px);
  }

  /* Navigation */
  .footer-nav {
    flex: none;
    font-size: min(calc(14 / 375 * 100vw), 14px);
    padding: 0 min(calc(20 / 375 * 100vw), 20px);
    width: 100%;
  }

  .footer-nav__list {
    gap: min(calc(20 / 375 * 100vw), 20px);
  }

  .footer-nav__item {
    padding-bottom: min(calc(20 / 375 * 100vw), 20px);
  }

  .footer-nav__item a {
    font-family: var(--font-family-primary);
    font-size: min(calc(18 / 375 * 100vw), 18px);
    font-weight: bold;
  }

  .footer-nav__arrow {
    height: min(calc(10 / 375 * 100vw), 10px);
    width: min(calc(10 / 375 * 100vw), 10px);
  }

  /* Service section: column on SP */
  .footer-nav__service {
    flex-direction: column;
    gap: min(calc(15 / 375 * 100vw), 15px);
    padding-bottom: min(calc(20 / 375 * 100vw), 20px);
  }

  .footer-nav__service-label {
    font-family: var(--font-family-primary);
    font-size: min(calc(18 / 375 * 100vw), 18px);
    font-weight: bold;
    width: auto;
  }

  .footer-nav__service-groups {
    gap: min(calc(20 / 375 * 100vw), 20px);
  }

  .footer-nav__service-group {
    display: flex;
    flex-direction: column;
    gap: min(calc(15 / 375 * 100vw), 15px);
  }

  .footer-nav__service-header {
    font-size: min(calc(16 / 375 * 100vw), 16px);
    padding: min(calc(10 / 375 * 100vw), 10px);
    white-space: nowrap;
    width: fit-content;
    min-width: min(calc(182 / 375 * 100vw), 182px);
  }

  .footer-nav__service-items {
    gap: min(calc(15 / 375 * 100vw), 15px);
    margin-top: 0;
  }

  .footer-nav__service-items li {
    align-items: flex-start;
    display: flex;
    gap: min(calc(5 / 375 * 100vw), 5px);
  }

  .footer-nav__service-items li::before {
    flex-shrink: 0;
    height: min(calc(10 / 375 * 100vw), 10px);
    margin-right: 0;
    margin-top: min(calc(8 / 375 * 100vw), 8px);
    width: min(calc(10 / 375 * 100vw), 10px);
  }

  .footer-nav__service-items a {
    font-size: min(calc(14 / 375 * 100vw), 14px);
  }

  /* Buttons */
  .footer-nav__buttons {
    gap: min(calc(15 / 375 * 100vw), 15px);
  }

  .footer-nav__button {
    font-size: min(calc(14 / 375 * 100vw), 14px);
    padding: min(calc(5 / 375 * 100vw), 5px) min(calc(10 / 375 * 100vw), 10px);
  }

  /* Copyright */
  .footer__copyright {
    font-size: min(calc(14 / 375 * 100vw), 14px);
    line-height: min(calc(50 / 375 * 100vw), 50px);
    margin-top: 0;
  }
}