.footer {
  background-color: #e7f2bc;
  color: #4c4c4c;
  font-family:
    "Zen Maru Gothic",
    system-ui,
    -apple-system,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  .footer__bg-top {
    background-color: #fffff4;
    height: auto;
    width: 100%;

    img {
      height: auto;
      width: 100%;
    }
  }

  .footer__inner {
    padding: 44px 32px 20px;
  }

  .footer__heading-icon-container {
    height: 42px;
    margin-inline: auto;
    width: 42px;

    @media (max-width: 567px) {
      height: clamp(20px, 12.64vw + -29.69px, 42px);
      width: clamp(20px, 12.64vw + -29.69px, 42px);
    }

    img {
      aspect-ratio: 1 / 1;
      height: auto;
      width: 100%;
    }
  }

  .footer__heading-text {
    color: #333333;
    font-size: 34px;
    font-weight: bold;
    text-align: center;

    @media (max-width: 567px) {
      font-size: clamp(20px, 8.05vw + -11.62px, 34px);
    }
  }

  .footer__heading-sub-text {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin: 0 auto 8px;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(10px, 3.45vw + -3.55px, 16px);
    }
  }

  .footer__tel-content-container {
    align-items: center;
    column-gap: 3px;
    display: flex;
    font-size: 26px;
    justify-content: center;
    margin-bottom: 30px;

    @media (max-width: 567px) {
      font-size: clamp(22px, 2.3vw + 12.97px, 26px);
      margin-bottom: clamp(13px, 9.77vw + -25.4px, 30px);
    }
  }

  .footer__tel-icon-container {
    aspect-ratio: 1 / 1;
    height: 1em;
    margin-top: 3px;
    width: 1em;

    @media (max-width: 567px) {
      height: clamp(20px, 3.45vw + 6.45px, 26px);
      width: clamp(20px, 3.45vw + 6.45px, 26px);
    }

    img {
      height: auto;
      width: 100%;
    }
  }

  .footer__tel-number {
    color: #4c4c4c;
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
  }

  .footer__address {
    font-size: 16px;
    font-weight: bold;
    margin-inline: auto;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(10px, 3.45vw + -3.55px, 16px);
    }
  }

  .footer__address-sub-text {
    color: #e7a1ab;
    font-size: 16px;
    font-weight: bold;
    margin-inline: auto;
    margin-bottom: 20px;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(10px, 3.45vw + -3.55px, 16px);
      margin-bottom: clamp(8px, 6.9vw + -19.1px, 20px);
    }
  }

  .btn-outline {
    margin-bottom: 36px;
  }

  .footer__copy-right {
    color: #a9c37a;
    font-size: 11px;
    font-weight: bold;
    margin-inline: auto;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(9px, 1.15vw + 4.48px, 11px);
    }
  }
}