main {
  width: 100%;
  overflow-x: hidden;
}

.p-heading-lv1 {
  display: grid;
  place-content: center;
  padding-block: calc(var(--space-section) / 2);
}

.p-contents {
  display: grid;
  row-gap: var(--space-section);
  padding-block-end: var(--space-section);
}

.p-contents-item {
  --numbers-text-color: #9aaab1;
  --offset-x-size: 4rem;
  --number-image-height: 10rem;
  --padding-opposite: calc(50% + var(--offset-x-size) + 1em);

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;

  .p-contents-item-body {
    display: grid;
    grid-row: 1;
    grid-column: 1 / -1;
    row-gap: 2em;
    align-self: flex-end;
  }

  .p-contents-item-title {
    padding-inline-end: var(--padding-opposite);
  }

  .p-contents-item-text {
    padding-inline-end: var(--padding-opposite);
  }

  .p-contents-item-number {
    position: relative;
    z-index: 1;
    align-items: end;
    justify-self: start;

    > img {
      display: block;
      height: var(--number-image-height);
      transform-origin: center left;
    }
  }

  .p-contents-item-image {
    grid-row: 1;
    grid-column: 2;
    margin-inline-start: calc(var(--offset-x-size) * -1);
    margin-inline-end: calc((100vw - 200%) / -2);

    > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media (width < 1000px) {
    --number-image-height: min(10rem, 25vw);

    grid-template-columns: 1fr;
    row-gap: 3em;

    .p-contents-item-body {
      grid-row: 2;
      grid-column: 1;
    }

    .p-contents-item-title {
      padding-inline-end: unset;
    }

    .p-contents-item-text {
      padding-block-start: 0.5em;
      padding-block-end: 0;
      padding-inline-end: unset;
    }

    .p-contents-item-image {
      grid-column: 1;
      margin-inline: 0;
      margin-inline: calc(var(--offset-x-size) * -1);
    }
  }
}

.p-contents-item--reverse {
  .p-contents-item-title {
    padding-inline-start: var(--padding-opposite);
    padding-inline-end: unset;
  }

  .p-contents-item-text {
    padding-inline-start: var(--padding-opposite);
    padding-inline-end: unset;
  }

  .p-contents-item-number {
    padding-inline-start: var(--padding-opposite);
  }

  .p-contents-item-number-02 {
    padding-inline-start: var(--padding-opposite);
  }

  .p-contents-item-image {
    grid-column: 1;
    margin-inline-start: calc((100vw - 200%) / -2);
    margin-inline-end: calc(var(--offset-x-size) * -1);
  }

  @media (width < 1000px) {
    .p-contents-item-title {
      grid-column: 1;
      padding-inline: unset;
    }

    .p-contents-item-text {
      grid-column: 1;
      padding-inline: unset;
    }

    .p-contents-item-number {
      grid-column: 1;
      padding-inline: unset;
    }

    .p-contents-item-number-02 {
      grid-column: 1;
      padding-inline: unset;
    }

    .p-contents-item-image {
      grid-column: 1;
      margin-inline: calc(var(--offset-x-size) * -1);
    }
  }
}