/* イントロダクションセクション */
.introduction {
  position: relative;
  width: 100%;
  height: 1570px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--section-padding);
  gap: 20px;
  z-index: -10;
}

.intro-bg-image {
  position: absolute;
  width: 3000px;
  height: 2170px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top;
  z-index: -10;
}

.intro-section-title-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.about-title-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

.about-title-logo {
  width: 350px;
  height: 98px;
  margin-top: 6px;
}

.intro-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 770px;
  max-height: 1180px;
  margin-top: 600px;
  gap: 138px;
  align-items: center;
}

.intro-content p {
  font-family: var(--primary-font);
  font-size: 1em;
  font-weight: 700;
  line-height: 2.25;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--white);
}

.about {
  display: flex;
  flex-direction: column;
  max-width: 548px;
  gap: 48px;
}

.about p {
  line-height: 1.7;
}

/* PC表示のレスポンシブ */
@media screen and (min-width: 3000px) {
  .intro-bg-image {
    width: 100%;
    height: 150%;
  }
}

@media screen and (min-width: 501px) {
  .intro-bg-image {
    background-image: url(../../images/topPage/about_rule_background.svg);
  }
}

/* モバイル表示のレスポンシブ */
@media screen and (max-width: 767px) {
  .introduction {
    height: 1690px;
  }

  .intro-content {
    margin-top: calc(650 * (100vw / 767));
  }
}

@media screen and (max-width: 500px) {
  .introduction {
    height: 1050px;
  }

  .introduction .title {
    font-size: 2.5em;
  }

  .about {
    padding: 0px 44px 0px 44px;
  }

  .intro-bg-image {
    width: 120%;
    height: 130%;
    background-image: url(../../images/topPage/sp_about_rule_background.svg);
    background-size: cover;
  }

  .intro-content {
    margin-top: calc(250 * (100vw / 500));
    gap: 100px;
  }

  .intro-content p {
    font-size: 0.75em;
    letter-spacing: 0.5px;
  }

  .intro-section-title-container img {
    width: 14px;
    height: 26px;
  }

  .intro-section-title-container .about-title-logo {
    width: 200px;
    height: 98px;
    margin-top: 6px;
  }
}