@charset "UTF-8";

#calendar {
  width:280px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color:#4c4948;
}

.calendar-header {
  text-align:center;
  font-size:18px;
  margin-bottom:6px;
}

.calendar-grid {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}

.weekday {
  height:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:bold;
}

.weekday.sun { color:#cf131c; }
.weekday.sat { color:#1e4ea1; }

.day {
  aspect-ratio:1/1;
  background:#f2f2f3;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:bold;
  padding-bottom: 2px;
}

.day.holiday {
  background:#f9d2d7;
}

/* 凡例 */
.legend {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:16px;
  color:#4c4948;
}

.legend-box {
  width:25px;
  height:16px;
  background:#f9d2d7;
  border-radius:2px;
}
.calendar-container {
    margin: 20px auto 20px auto;
    width: fit-content;
}