.schedule {
  font-family:
    "Zen Maru Gothic",
    system-ui,
    -apple-system,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  margin-bottom: 21px;

  .schedule__inner {
    background-color: #fdfbfd;
    padding: 0 30px;
  }

  .schedule__heading {
    margin-bottom: 28px;
  }

  .schedule__graph-image-container {
    margin-inline: auto;
    margin-bottom: 20px;
    max-width: 100%;
    width: fit-content;
  }

  .schedule__note-container {
    margin-bottom: 22px;
  }

  .schedule__note {
    color: #e7a1ab;
    font-size: 14px;
    font-weight: bold;
    margin-inline: auto;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(10px, 2.3vw + 0.97px, 14px);
    }
  }

  .schedule__list {
    /* 全サイズ: 320px → 0px / 1024px → 32px で流動的に変化 */
    column-gap: clamp(0px, 4.55vw - 14.55px, 32px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-inline: auto;
    width: fit-content;
  }

  .schedule__list-item {
    @media (min-width: 568px) {
      max-width: 320px;
    }

    &:nth-child(2) {
      margin-top: 20px;
    }
  }

  .schedule__list-item-image-container {
    aspect-ratio: 1 / 1;
    height: auto;
    margin-inline: auto;
    margin-bottom: 12px;
    max-width: 180px;
    width: 100%;
  }

  .schedule__list-item-title {
    color: #e7a1ab;
    font-size: 16px;
    font-weight: bold;
    margin-inline: auto;
    margin-bottom: 5px;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(14px, 1.15vw + 9.48px, 16px);
    }
  }

  .schedule__list-item-description {
    color: #4c4c4c;
    font-size: 16px;

    @media (min-width: 568px) {
      margin-inline: auto;
      width: 70%;
    }

    @media (max-width: 567px) {
      font-size: clamp(9px, 4.02vw + -6.81px, 16px);
    }

    /* タブレット: 568px → 11px / 1024px → 16px で流動的に変化 */
    @media (min-width: 568px) and (max-width: 1024px) {
      font-size: clamp(11px, 1.1vw + 4.75px, 16px);
    }

    /* タブレット（小）: 幅を広げて狭い列でも読みやすく */
    @media (min-width: 568px) and (max-width: 767px) {
      width: 95%;
    }
  }

  .schedule__background-bottom {
    aspect-ratio: 786 / 118;
    height: auto;
    width: 100%;

    img {
      height: auto;
      width: 100%;
    }
  }
}