.sec-daily .image {
  position: relative;
  margin: 0 auto;
  width: min(700px, calc(700 / 1400 * 100vw));
  margin-top: min(30px, calc(30 / 1400 * 100vw));
}

.sec-annual .annual {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: min(20px, calc(20 / 1400 * 100vw));
  row-gap: min(50px, calc(50 / 1400 * 100vw));
  width: min(840px, calc(840 / 1400 * 100vw));
  margin-top: min(30px, calc(30 / 1400 * 100vw));
  margin-bottom: min(50px, calc(50 / 1400 * 100vw));
}

.sec-annual .annual .event {
  display: flex;
  align-items: center;
  gap: min(10px, calc(10 / 1400 * 100vw));
}

.sec-annual .annual .event .month {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-orange);
  color: var(--color-white);
  font-weight: 700;
  width: min(60px, calc(60 / 1400 * 100vw));
  font-size: 24px;
}

.sec-annual .annual .event .text {
  flex: 1;
  line-height: 1.33;
  font-size: 18px;
}

.sec-annual .monthly {
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: min(25px, calc(25 / 1400 * 100vw));
  width: min(840px, calc(840 / 1400 * 100vw));
}

.sec-annual .monthly .title {
  width: max-content;
  background: var(--grad-orange);
  color: var(--color-white);
  font-weight: 700;
  border-radius: min(40px, calc(40 / 1400 * 100vw));
  padding: min(12px, calc(12 / 1400 * 100vw)) min(50px, calc(50 / 1400 * 100vw));
  font-size: 24px;
}

.sec-annual .monthly .text {
  flex: 1;
  line-height: 1.33;
  font-size: 18px;
}

@media print, screen and (min-width: 769px) {
  .sec-daily .image::before,
  .sec-daily .image::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .sec-daily .image::before {
    aspect-ratio: 116/231;
    width: min(116px, calc(116 / 1400 * 100vw));
    background-image: url(../img/schedule/bg_01.webp);
    bottom: min(418px, calc(418 / 1400 * 100vw));
    left: max(-120px, calc(-120 / 1400 * 100vw));
  }

  .sec-daily .image::after {
    aspect-ratio: 168/228;
    width: min(168px, calc(168 / 1400 * 100vw));
    background-image: url(../img/schedule/bg_02.webp);
    bottom: min(32px, calc(32 / 1400 * 100vw));
    right: max(-130px, calc(-130 / 1400 * 100vw));
  }
}

@media only screen and (max-width: 768.8px) {
  .sec-daily .image {
    width: 86.4vw;
    margin-top: 8vw;
  }

  .sec-annual .annual {
    grid-template-columns: 1fr;
    gap: 6.6666666667vw;
    width: 73.3333333333vw;
    margin-top: 8vw;
    margin-bottom: 10.6666666667vw;
  }

  .sec-annual .annual .event {
    gap: 2.6666666667vw;
  }

  .sec-annual .annual .event .month {
    font-size: 2.4rem;
  }

  .sec-annual .annual .event .month {
    width: 16vw;
  }

  .sec-annual .annual .event .text {
    font-size: 1.8rem;
  }

  .sec-annual .annual .event .text {
    text-align: center;
  }

  .sec-annual .monthly {
    gap: 4vw;
    width: 73.3333333333vw;
    flex-direction: column;
  }

  .sec-annual .monthly .title {
    font-size: 2.4rem;
  }

  .sec-annual .monthly .title {
    border-radius: 10.6666666667vw;
    padding: 1.6vw 10.6666666667vw;
  }

  .sec-annual .monthly .text {
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1399.8px) {
  .sec-annual .annual .event .month {
    font-size: 2.4rem;
  }

  .sec-annual .annual .event .text {
    font-size: 1.8rem;
  }

  .sec-annual .monthly .title {
    font-size: 2.4rem;
  }

  .sec-annual .monthly .text {
    font-size: 1.8rem;
  }
}