.introduction {
  color: #333;
  font-family:
    "Zen Maru Gothic",
    system-ui,
    -apple-system,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  width: 100%;

  .introduction__heading {
    margin-bottom: 50px;

    @media (max-width: 567px) {
      margin-bottom: clamp(43px, 4.02vw + 27.19px, 50px);
    }
  }

  .introduction__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%;
    }
  }

  .introduction__heading-sub-text {
    color: #333333;
    font-size: 28px;
    font-weight: bold;
    text-align: center;

    @media (max-width: 567px) {
      font-size: clamp(10px, 10.34vw + -30.66px, 28px);
    }
  }

  .introduction__heading-main-text {
    color: #333333;
    font-size: 36px;
    font-weight: bold;
    text-align: center;

    @media (max-width: 567px) {
      font-size: clamp(22px, 8.05vw + -9.62px, 36px);
    }
  }

  .introduction__description {
    font-size: 20px;
    line-height: 2;
    margin-bottom: 2em;
    text-align: center;
    white-space: nowrap;

    @media (max-width: 567px) {
      font-size: clamp(13px, 4.02vw + -2.81px, 20px);
    }
  }

  .introduction__bottom-image {
    aspect-ratio: 393 / 251;
    background-image: url("/wp-content/uploads/2026/02/introduction_tulip_bottom_image.png");
    background-repeat: repeat;
    background-size: contain;
    height: 200px;
    width: 100%;

    @media (max-width: 567px) {
      background-repeat: no-repeat;
      background-size: cover;
      height: auto;
    }
  }
}