@import url(lower.css);
@import url("https://unpkg.com/scroll-hint@latest/css/scroll-hint.css");

.message {
  padding-inline: 0;
  width: min(90%, 1000px);
  margin-inline: auto;
  .lower-title {
    width: 40%;
  }
  .contents {
    display: flex;
  }
  .body {
    flex: 1;
    line-height: 2;
  }
  .name {
    display: flex;
    flex-direction: column;
    align-items: end;
    line-height: 1.6;
    margin-top: 2em;
    span {
      font-size: var(--fz);
      font-weight: 500;
    }
  }
  .profile {
    display: flex;
    gap: max(3vw, 1em);
    margin-top: 2em;
  }
  .card {
    flex: 1;
    border-radius: 10px;
    padding: max(2vw, 1em) max(2.4vw, 1.2em);
    background-color: var(--bg-c);
    &:last-child {
      max-width: 340px;
    }
    h3 {
      margin-bottom: 0.4em;
    }
    ul {
      display: flex;
      flex-direction: column;
      gap: 0.4em;
      margin-bottom: 0.4em;
      color: #666;
    }
    > p {
      color: #666;
    }
    li {
      display: flex;
      align-items: start;
      gap: 0.6em;
      line-height: 1.6;
      padding-left: 1.6em;
      position: relative;
      &::before {
        position: absolute;
        inset: 0.4em auto auto 0;
        content: "";
        width: 0.8em;
        background-color: #fff;
        aspect-ratio: 1;
        border-radius: 50%;
      }
      > span:last-child {
        flex: 1;
      }
    }
    .year {
      width: 5em;
    }
  }
  ~ section {
    padding-top: 0;
  }
}

.view {
  padding: 0 0 max(8vw, 60px);
  width: min(90%, 1440px);
  margin-inline: auto;
  .lower-title {
    margin-bottom: 2em;
  }
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: max(3vw, 1em);
  figure {
    opacity: 0;
    translate: 0 20px;
  }
  img {
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 8/5;
    object-fit: cover;
    margin-bottom: 0.6em;
  }
}

.outline {
  padding-inline: 0;
  width: min(90%, 1000px);
  margin-inline: auto;
  display: flex;
  .lower-title {
    width: 40%;
  }
  .row {
    display: flex;
    padding-block: 2em;
    border-bottom: 2px solid var(--bg-c);
  }
  dl {
    flex: 1;
  }
  dt {
    font-weight: normal;
    width: 30%;
  }
  dd {
    flex: 1;
  }
}

.schedule {
  .lower-title {
    width: fit-content;
    margin-inline: auto;
    margin-bottom: max(5vw, 50px);
  }
}

@media (width < 1024px) {
  .message .card {
    &:last-child {
      max-width: 310px;
    }
    li {
      flex-direction: column;
      gap: 0;
    }
  }
}
@media (width < 768px) {
  .message {
    .contents {
      flex-direction: column;
    }
    .card:last-child {
      max-width: 100%;
    }
    .lower-title {
      width: 100%;
    }
  }

  .profile {
    flex-direction: column;
  }

  .gallery {
    display: flex;
    flex-direction: column;
    width: min(80%, 400px);
    margin-inline: auto;
  }

  .outline {
    flex-direction: column;
    .lower-title {
      width: 100%;
    }
  }
}