@import url(lower.css);

.common-top h2 {
  font-size: clamp(1.7em, 3.1vw, 44px);
  @media (width < 768px) {
    font-size: 1.3em;
  }
}
.contents {
  padding-block: max(8vw, 60px);
  .inner {
    isolation: isolate;
    width: var(--w);
    margin-inline: auto;
    display: flex;
    align-items: start;
    gap: 5vw;
  }
  h2 {
    font-size: clamp(1.4em, 2.4vw, 40px);
    font-weight: 500;
    flex: 1;
    position: sticky;
    top: 160px;
    &::before {
      display: block;
      content: attr(data-num);
      color: var(--secondary-c);
      font-size: 1.4rem;
      margin-bottom: 0.4em;
    }
  }
  .body {
    width: 66%;
  }
  h3 {
    font-size: clamp(1.2em, 1.8vw, 28px);
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 3rem;
  }
  p {
    line-height: 1.8;
    margin-bottom: 3rem;
  }
  img {
    width: 100%;
    aspect-ratio: 7/5;
    object-fit: cover;
    border-radius: var(--r);
  }
}
.usage {
  margin-top: -100vh;
}
.container .deco {
  position: sticky;
  height: 100vh;
  top: 0;
  margin-left: 5vw;
  display: grid;
  place-items: center start;
  color: var(--bg-c);
  opacity: 0.5;
  z-index: -1;
  img {
    width: 60vw;
  }
}

@media (width < 630px) {
  .contents {
    .inner {
      flex-direction: column;
    }
    h2 {
      position: relative;
      top: 0;
      text-align: right;
      width: 100%;
      &::before {
        margin-bottom: 0em;
      }
    }
  

    .body {
      width: 100%;
    }
    h3, p {
      margin-bottom: 5vw;
    }

    &:not(:last-child) {
    padding-bottom: 0;
  }

  }
  .container .deco {
    width: 100vw;
    overflow: hidden;
    margin-left: 0;
    img {
      translate: -38.5%;
      width: 90vh;
      rotate: -90deg;
    }
  }
}