body {
    font-family: Arial, sans-serif;
    /* margin: 20px; */
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    background-color: lightblue; /* カレンダーの背景色 */
    padding: 20px; /* 内側の余白を追加 */
}

.month {
    display: contents;
    background-color: #0099cc; /* 濃い目の水色 */
}

.month div {
    text-align: center;
    padding: 10px;
    border-right: 2px solid #0077aa; /* 水色の右線 */
    color: white; /* 月の文字色を白に */
}

.month div:last-child {
    border-right: none; /* 最後の月の右線を削除 */
}

.events {
    display: contents;
}

.event {
    margin-top: 10px;
    padding: 20px;
    text-align: center;
    border: 1px solid white; /* 白い線 */
    display: flex;
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 横中央揃え */
}

.orange {
    background-color: orange;
    color: white; /* オレンジの文字色を白に */
}

.blue {
    background-color: blue;
    color: white; /* 青背景の文字を白に */
}

.training {
    grid-column: span 7; /* 全体の幅を使う */
    background-color: white;
    color: black;
    padding: 10px;
    text-align: center;
}

.event:last-child {
    background-color: blue;
    color: white; /* 青背景の文字を白に */
}

.event:nth-child(3) {
    background-color: orange; /* 社員との顔合わせの背景色をオレンジに */
}