@import url(lower.css);

main {
  --h2-sz: max(3.4vw, 2em);
  background-color: var(--bg-c);
  padding-bottom: max(5vw, 26px);
}

.lead {
  color: var(--primary-c);
  line-height: 2;
  font-size: max(1.5vw, 20px);
  font-weight: 500;
}

h2.lead {
  text-align: center;
}

.top {
  display: flex;
  flex-direction: column;
  gap: 2em;
  align-items: center;

  h2 {
    word-break: keep-all;
  }

  .images {
    width: min(100%, 1000px);
    display: flex;
    overflow: hidden;
    border-radius: 1em;

    img {
      flex: 1;
      aspect-ratio: 8/5;
      width: calc(100% / 4);
      object-fit: cover;
      object-position: right;
    }
  }
}

.company,
.message,
.history,
.topics {
  h2 {
    text-align: center;
    margin-bottom: 3em;

    span {
      display: block;
      font-size: var(--h2-sz);
      font-weight: 300;
    }
  }
}

.company {
  dl {
    width: min(100%, 800px);
    margin-inline: auto;
    border-top: 1px solid;
  }

  .row {
    display: flex;
    gap: 1em;
    padding: 2em 3vw;
    border-bottom: 1px solid;
    line-height: 1.6;

    >* {
      text-box: trim-both cap alphabetic;
    }
  }

  .has-any {
    flex-direction: column;
    gap: .7em;

    >div {
      display: flex;
      gap: 1em;
    }
  }

  dt {
    width: 30%;
    color: var(--primary-c);
    font-weight: 500;
  }

  dd {
    flex: 1;
  }
}

.message {
  padding-inline: 10vw;

  h3 {
    margin-bottom: 0.5rem;
  }

  .body {
    display: flex;
    gap: 5vw;

    >div {
      flex: 1;
    }

    p {
      line-height: 2;
    }
  }

  figure {
    width: 30%;
    margin-top: calc(max(1.5vw, 20px) * 2 + 0.5rem);

    img {
      width: 100%;
      border-radius: 1em;
    }
  }

  figcaption {
    text-align: end;
    color: var(--primary-c);
    margin-top: 1em;
  }
}

.feature {
  h2 {
    margin-bottom: 2em;
  }

  ul {
    display: flex;
    gap: max(3vw, 1em);
  }

  li {
    display: grid;
    gap: 6px;
    place-items: center;
    place-content: center;
    container-type: inline-size;
    flex: 1;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #fff;
    position: relative;

    &::before {
      position: absolute;
      inset: 6px;
      border-radius: 50%;
      content: "";
      border: 1px solid var(--primary-c);
    }

    &:last-child p {
      margin-bottom: 1.6em;
    }
  }

  .num {
    align-items: center;
    font-size: 4.6cqi;
    display: flex;
    flex-direction: column;
    color: var(--primary-c);
    font-weight: 300;

    span {
      text-box: trim-both;
      display: block;
      font-size: 15cqi;
    }
  }

  h3 {
    color: var(--primary-c);
    font-weight: 500;
    font-size: 7cqi;
  }

  p {
    line-height: 1.6;
    text-align: center;
    font-size: 4.8cqi;
  }
}

.history {
  dl {
    width: min(100%, 800px);
    margin-inline: auto;
    line-height: 1.6;
  }

  .row {
    --fz: max(1.48vw, 16px);
    display: flex;
    gap: 2em;
    padding-block: 1em;
    font-size: var(--fz);

    &:last-child dt::before {
      display: none;
    }

    &.show dt::before {
      scale: 1;
    }
  }

  dt {
    --point-w: 16px;
    width: 5em;
    color: var(--primary-c);
    display: flex;
    align-items: start;
    justify-content: space-between;
    position: relative;

    span:first-child {
      transform: skew(-15deg);
    }

    .point {
      margin-top: calc(var(--fz) * 1.4 / 2 - var(--point-w) / 2);
      aspect-ratio: 1;
      width: var(--point-w);
      background-color: var(--primary-c);
      border-radius: 50%;
    }

    &::before {
      position: absolute;
      content: "";
      inset: calc(var(--fz) * 1.4 / 2) calc(var(--point-w) / 2 - 0.5px) calc(var(--fz) * -2.5) auto;
      width: 1px;
      background-color: var(--primary-c);
      scale: 1 0;
      transform-origin: top;
      transition: scale 0.6s linear;
    }
  }

  dd {
    flex: 1;
  }
}

.ending {
  h2 {
    margin-bottom: 1em;
  }

  p {
    line-height: 2;
    text-align: center;
    word-break: keep-all;
    margin-bottom: 2em;
  }

  img {
    width: min(100%, 600px);
    margin-inline: auto;
    border-radius: clamp(14px, 2vw, 30px);
    display: block;
  }
}

@media (width < 1024px) {
  .message .body {
    flex-direction: column;

    figure {
      width: min(80%, 360px);
      align-self: center;
      order: -1;
      margin-top: 0;
    }
  }

  .feature ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: min(100%, 640px);
    margin-inline: auto;
  }
}

@media (width < 768px) {
  section {
    padding-top: 0;
  }

  .top {
    gap: 1em;

    h2 {
      font-size: 16px;
    }

    .images {
      display: grid;
      grid-template-columns: repeat(2, 1fr);

      img {
        width: 100%;
      }
    }
  }

  .company {
    .row {
      padding-block: 1.6em;
    }

    dt {
      width: 6em;
    }

    dd .sp {
      display: block;
    }
  }

  .message {
    padding-inline: 5vw;
  }

  .feature {
    h2 {
      margin-bottom: 0.5em;
    }
  }
}

@media (width < 500px) {
  .feature {
    h2 {
      margin-bottom: 0.5em;
    }

    ul {
      display: flex;
      flex-direction: column;
    }

    li {
      border-radius: 18px;
      aspect-ratio: auto;
      place-items: start;
      place-content: start;
      grid-template-columns: 19% 1fr;
      padding-right: 1.4rem;
      row-gap: 2px;

      &::before {
        border-radius: calc(18px - 6px);
      }

      &:last-child p {
        margin-bottom: 0;
      }
    }

    .num {
      padding: 1.6rem 1.4rem 1.2rem 2.4rem;
      grid-area: 1/1/3/2;
      place-self: center;
      font-size: 0.9rem;

      span {
        font-size: 2.4rem;
      }
    }

    h3 {
      padding-top: 1.6rem;
      grid-area: 1/2/2/3;
      font-size: 1.2em;
    }

    p {
      padding-bottom: 1.2rem;
      font-size: 11px;
      text-align: start;

      .pc {
        display: none;
      }
    }
  }

  .history {
    .row {
      gap: 1em;
      padding-block: 0.6em;
    }

    dt {
      width: 4em;
      --point-w: 10px;

      &::before {
        bottom: calc(var(--fz) * -2);
      }
    }

    dd {
      padding-top: 0.2em;
      font-size: 14.2px;
      word-break: keep-all;
    }
  }

  .ending {
    h2 {
      margin-bottom: .4em;
    }

    p {
      font-size: 12.4px;
    }
  }
}