@import 'base.css';
@import 'utils.css';
@import 'components.css';

/* リードセクション */
#lead {
  background-color: var(--lp-color-white);
  padding-block: 32px;
  @media (min-width: 768px) {
    padding-block: 64px;
  }

  & p {
    letter-spacing: 0.04em;
    @media (min-width: 768px) {
      letter-spacing: 0;
      text-align: center;
    }
  }

  & p + p {
    margin-top: 28px;
    @media (min-width: 768px) {
      margin-top: 36px;
    }
  }
}

/* 動画セクション */
#video {
  background-color: var(--lp-color-orange);
  padding-block: 32px;
  @media (min-width: 768px) {
    padding-block: 64px;
  }
}

/* Aboutセクション */
#about {
  padding-block: 32px;
  @media (min-width: 768px) {
    padding-block: 64px;
  }

  & .aboutRainbow {
    & + * {
      margin-top: 24px;
      @media (min-width: 768px) {
        margin-top: 40px;
      }
    }

    .descBox + * {
      margin-top: 8px;
    }
  }

  & .producedBy {
    & .producedByInner {
      @media (min-width: 768px) {
        width: fit-content;
        margin-inline: auto;
      }
    }

    & .descContents {
      @media (min-width: 768px) {
        width: fit-content;
        margin-inline: auto;
      }
    }

    & .descContents + * {
      margin-top: 16px;
      @media (min-width: 768px) {
        margin-top: 8px;
      }
    }
  }

  .p-area-return-link__button {
    display: block;
    max-width: 360px;
    margin-inline: auto;
    @media (min-width: 768px) {
      max-width: none;
      width: 480px;
    }

    & .c-button {
      height: 64px;
      font-size: 12px;
      letter-spacing: 0.04em;
      margin-top: 32px;
      @media (min-width: 768px) {
        max-width: 480px;
        font-size: 14px;
        margin-top: 64px;
      }
    }
  }
}