@import url(lower.css);

.main {
  padding-block: max(8vw, 60px);
  position: relative;
  &::before {
    position: absolute;
    inset: 26% 0 auto;
    height: 38vw;
    content: "";
    background: linear-gradient(#fff, transparent 30% 70%, #fff),
      url(../img/bg.png.webp) left/contain no-repeat;
    opacity: 0.8;
    scale: -1 1;
  }
  .inner {
    width: min(100%, 1200px);
    margin-inline: auto;
    position: relative;
  }
  h2 {
    width: fit-content;
    margin: 0 auto max(8vw, 60px);
    span {
      color: #666;
      font-weight: 500;
    }
    > span {
      transform: skew(-15deg);
      font-size: clamp(1.4em, 3.6vw, 60px);
      line-height: 1.7;
      &:first-child {
        display: flex;
        align-items: center;
        gap: 0.6em;
        &::before {
          width: 1.6em;
          height: 1px;
          content: "";
          background-color: currentColor;
        }
      }
      &:last-child {
        padding-left: 3em;
        display: block;
      }
    }
  }
  img {
    display: block;
    width: max(30%, 200px);
    margin: 0 auto max(8vw, 60px) 0;
    border-radius: max(1.4vw, 1em);
    position: relative;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 30%;
  }
  .body {
    display: flex;
    gap: 2em;
  }
  h3 {
    flex: 1;
    color: #999;
    width: max(44%, 160px);
    span {
      font-size: max(2.6vw, 1.4em);
      display: block;
      margin-bottom: 1em;
      color: #333;
    }
  }
  .lead {
    width: min(70%, 650px);
    p {
      line-height: 2;
      font-size: clamp(1em, 1.3vw, 20px);
      & ~ p {
        margin-top: 1.6em;
      }
    }
  }
}
@media (width < 486px) {
  .main {
    overflow: hidden;
    &::before {
      inset: 50% 0 auto;
      margin-top: auto;
      height: 100vw;
      aspect-ratio: 16/9;
      background: linear-gradient(to left, #fff, transparent 30% 70%, #fff),
        url(../img/bg.png.webp) left/cover;
      rotate: 90deg;
      transform-origin: left bottom;
    }
    h2 > span:last-child {
      margin-right: -1em;
    }
    img {
      margin-left: auto;
    }
    .body {
      flex-direction: column;
      > * {
        width: 100%;
      }
    }
  }
  .sp-p {
    display: block;
    text-align: right;
  }
}