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

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: calc(1 * -infinity);
    aspect-ratio: 162 / 1022;
    background-image: url("/wp-content/uploads/2026/03/annual_events_background_right.png");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    width: auto;
  }

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: calc(1 * -infinity);
    aspect-ratio: 182 / 1062;
    background-image: url("/wp-content/uploads/2026/03/anuual_events_background_left.png");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    width: auto;
  }

  .annual-events__heading {
    margin-bottom: 43px;
    padding-top: 22px;
  }

  .annual-events__subject-text {
    color: #4c4c4c;
    font-size: 20px;
    margin-inline: auto;
    margin-bottom: 60px;
    white-space: nowrap;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(12px, 4.6vw + -6.07px, 20px);
      margin-bottom: clamp(30px, 17.24vw + -37.76px, 60px);
    }
  }

  .annual-events__list-title {
    color: #e7a1ab;
    font-size: 32px;
    font-weight: bold;
    margin-inline: auto;
    margin-bottom: 4px;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(18px, 8.05vw + -13.62px, 32px);
    }
  }

  .annual-events__lists {
    margin-bottom: 25px;
  }

  .annual-events__lists-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 320px));
    justify-content: center;
    margin-bottom: 60px;
    row-gap: 22px;

    @media (max-width: 567px) {
      grid-template-columns: repeat(2, 1fr);
      margin-bottom: clamp(0px, 34.48vw + -135.52px, 60px);
    }
  }

  .annual-events__lists-inner {
    padding-inline: 80px;

    /* タブレット: 568px → 16px / 1024px → 80px で流動的に変化 */
    @media (min-width: 568px) {
      padding-inline: clamp(16px, 14.04vw - 63.75px, 80px);
    }
  }

  .annual-events__list-item {
    color: #4c4c4c;
    font-size: 20px;
    margin-inline: auto;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(11px, 5.17vw + -9.33px, 20px);
    }
  }
}