@charset "utf-8";

.contents {
  position: relative;
  overflow: hidden;
  &::before {
    position: absolute;
    bottom: -130px;
    left: calc(50% + 110px);
    width: 600px;
    height: auto;
    aspect-ratio: 1;
    background: url(../img/introduction/img_introduction_logo.svg) no-repeat;
    content: "";
  }
}
@media screen and (width <= 768px) {
  .contents {
    padding-bottom: max(80vw,300px);
    &::before {
      right: 0;
      bottom: max(21.33vw,80px);
      left: auto;
      width: max(58.66vw,220px);
      background-size: cover;
    }
  }
}

.pageHeader {
  & h1 {
    text-align: center;
  }
}
@media screen and (width <= 768px) {
  .pageHeader {
    & h1 {
      font-size: max(9.66vw, 36px);
    }
  }
}

.pageBody {
  margin-top: 100px;
  & p {
    font-size: 22px;
    line-height: 1.87;
    text-align: center;
    & + p {
      margin-top: 80px;
    }
  }
  & strong {
    margin-left: -0.8em;
    padding-left: 0.8em;
    background: linear-gradient(transparent 53%, rgba(240,90,160,.3) 53%);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.37;
  }
}
@media screen and (width <= 768px) {
  .pageBody {
    margin-top: max(6.66vw,25px);
    & p {
      font-size: 4.26vw;
      line-height: 2;
      text-align: center;
      &:first-child {
        background: linear-gradient(transparent 86%, rgba(240,90,160,.3) 86%);
      }
      & + p {
      margin-top: max(10.66vw,40px);;
    }
    }
    & strong {
      margin-left: 0;
      padding-left: 0;
      background: none;
      /* font-size: max(6.4vw,24px); */
      font-size: 5vw;
      line-height: 1.37;
    }
  }
}

.keyVisual {
  padding: 150px 0;
  background: url(../img/introduction/img_introduction_bg.webp) repeat;
  & div {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
@media screen and (width <= 768px) {
  .keyVisual {
    padding: max(26.66vw,100px) 0;
    & div {
      max-width: 100%;
      padding: 0 max(5.33vw,20px);
    }
  }
}