.p-mainVisual {
  width: 100%;

  > video {
    width: 100%;
    height: auto;
  }
}

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

.p-history {
  --history-line-width: 3px;

  /* 20~24px 375/1920px */
  --padding-inside: clamp(1.25rem, 0.552rem + 2.98vw, 4.125rem);

  /* 16~24px 375/1920px */
  --padding-top: clamp(1rem, 0.879rem + 0.52vw, 1.5rem);

  /* 30~70px 375/1920px */
  --year-font-size: clamp(2.5rem, 2.045rem + 1.94vw, 4.375rem);
  --row-gap: calc(var(--year-font-size) * 2);

  position: relative;
  display: grid;
  padding-block-start: var(--year-font-size);
  padding-block-end: var(--row-gap);

  &::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 2.4em;
    aspect-ratio: 36 / 15;
    content: "";
    background: url("../../images/pages/top-arrow-down.svg") no-repeat center
      center/cover;
    transform: translateX(-50%);
  }

  @media (width <768px) {
    row-gap: var(--row-gap);

    &::after {
      left: 0;
    }
  }
}

.p-history-item {
  position: relative;
  display: grid;
  row-gap: 1rem;
  padding-block-start: var(--padding-top);
  padding-inline-start: var(--padding-inside);
  margin-inline-start: 50%;

  .p-history-item-year {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: inline-block;
    padding-inline-start: var(--padding-inside);
    font-family: var(--ff-accent);
    font-size: var(--year-font-size);
    font-style: italic;
    font-weight: var(--fw-accent-sans);
    line-height: 1;
    color: var(--accent);
    letter-spacing: 0.03em;
    border-block-end: 1px solid currentcolor;
    text-box: trim-both cap alphabetic;

    &::before {
      --size: 0.4em;

      position: absolute;
      top: 100%;
      left: 0;
      width: var(--size);
      height: var(--size);
      content: "";
      background-color: var(--accent-subtle);
      border-radius: var(--bdrs-full);
      transform: translate(-50%, -50%);
    }
  }

  .p-history-item-title {
    font-size: var(--fz-h3);
    font-weight: var(--fw-heading);

    > span {
      display: block;
      font-size: 0.818em;
      font-weight: 500;
    }
  }

  .p-history-item-text {
    line-height: 1.75em;
    text-align: justify;
  }

  /* ボーダー */
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--history-line-width);
    height: calc(100% + var(--row-gap));
    content: "";
    background-color: var(--background-subtle);
    transform: translateX(-50%);
  }

  @media (width <768px) {
    margin-inline-start: 0;
  }
}

@media (768px < width) {
  .p-history-item--reverse {
    padding-inline-start: 0;
    padding-inline-end: var(--padding-inside);
    margin-inline-start: 0%;
    margin-inline-end: 50%;

    .p-history-item-year {
      right: 0;
      left: auto;
      padding-inline-start: 0;
      padding-inline-end: var(--padding-inside);

      &::before {
        right: 0;
        left: auto;
        transform: translate(50%, -50%);
      }
    }

    .p-history-item-title {
      text-align: right;
    }

    /* ボーダー */
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      left: auto;
      width: var(--history-line-width);
      height: calc(100% + var(--row-gap));
      content: "";
      background-color: var(--background-subtle);
      transform: translateX(50%);
    }
  }
}

.p-history-future {
  padding-block-end: var(--space-section);
  text-align: center;

  .p-history-future-title {
    font-family: var(--ff-accent);

    /* 30~70px 375/1920px */
    font-size: clamp(2.5rem, 2.045rem + 1.94vw, 4.375rem);
    font-style: italic;
    font-weight: var(--fw-accent-sans);
    color: var(--accent-subtle);
    text-transform: uppercase;
  }

  .p-history-future-text {
    font-weight: 500;
  }
}

.p-bottomMessage {
  color: var(--background-subtle);
  background: url("../../images/pages/top-bottom-bgImage.webp") no-repeat center
    center/cover;

  .p-bottomMessage-inner {
    display: grid;
    row-gap: 1em;
    max-width: 800px;
    padding-block: var(--space-section);
    padding-inline: 2em;
    margin: 0 auto;
  }

  .p-bottomMessage-title {
    font-size: var(--fz-h3);
    font-weight: var(--fw-heading);
    color: var(--color-white);
    text-align: center;
  }
}