@import url(common.css);

.about-section {
  background: linear-gradient(
    to bottom,
    rgb(211, 237, 251) 75%,
    rgb(255, 254, 247) 100%
  );
  position: relative;
  margin-top: 60vh;

  &::before {
    content: "";
    position: absolute;
    top: -65vh;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../img/about/back-blue.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: -1;
  }

  h4 {
    position: absolute;
    left: 15%;
    top: -50vh;
    font-size: 2.2vw;
    font-weight: bold;
    letter-spacing: 1vw;
    margin: 0;
  }

  p {
    position: relative;
    top: -30vh;
    margin: 0 auto;
    max-width: 65%;
    font-size: 1.2vw;
    letter-spacing: 0.4vw;
    line-height: 2;
    text-align: left;
  }

  > * {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 768px) {
  .about-section {
    margin-top: 10vh;

    &::before {
      top: -10vh;
      height: 60vh;
      background-position: top center;
    }

    h4 {
      font-size: clamp(1.2rem, 5vw, 2rem);
      letter-spacing: 0.5vw;
      left: 50%;
      transform: translateX(-50%);
      top: -10vh;
      text-align: center;
    }

    p {
      position: static;
      top: auto;
      max-width: 90%;
      margin: 0 auto;
      font-size: clamp(14px, 3vw, 20px);
      letter-spacing: 0.2vw;
      line-height: 1.4; /* 行間を縮める */
    }

    > * {
      position: static;
      z-index: 1;
    }
  }
}