@charset "utf-8";

.schedule::after {
  content: "";
  display: block;
  width: 920px;
  height: 920px;
  aspect-ratio: 1/1;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
}

.schedule-title {
    margin-top: 200px;
    width: 100%;
    font-size: 40px;
}

.schedule-title::before,
.schedule-title::after {
  content: "";
  display: inline-block;
  vertical-align: middle; 
  width: 50px;
  height: 2px;
  background-color: #fff;
  margin: 0 20px; 
}

.schedule-title,
.date {
    text-align: center;
}

.date {
    font-size: 28px;
    margin-top: 30px;
}

.calendar div {
    background-color: #abb5be;
    line-height: 1.2;
    /* box-sizing: border-box;
    overflow: hidden; */
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 60px repeat(5, 100px);    grid-auto-rows: 100px;
    gap: 2px;
    max-width: calc((100px * 7) + (2px * 6));
    margin: 40px auto;
}

.calendar div:nth-child(-n+7) {
    display: flex;
    justify-content: center; 
    align-items: center;      
    text-align: center;   
    font-size: 20px;    
}

.calendar div:nth-child(7n+1) .date-number {
    color: #a5292b;
  }

  .calendar div:nth-child(7n) .date-number {
    color: #000566;
  }

  .date-number {
    font-size: 20px;
  }

  .calendar div:nth-child(n+8) .date-number {
    display: inline-block;
    margin-top: 6px;
    margin-left: 6px;
  }

  .calendar .time {
    display: block;
    margin-top: 6px;
    text-align: center;
  }

  .sche-text-flex {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .schedule {
    margin-bottom: 10px;
  }

  .sche-text {
    min-height: 100px;
  }