/* 全体設定 */
body {
    background-color: #f5f5f5;
    font-family: sans-serif;
    margin: 20px;
    padding: 0;
}
h1{font-size:1.2em;text-align:center;color:#01407e;}
/* カレンダーコンテナのレイアウト（PC版: 2x2グリッド、タブレット以上） */
.calendar-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; /* カレンダー間のスペース */
    max-width: 1200px;
    margin: 0 auto;
}

/* スマートフォン（1カラム表示） */
@media (max-width: 767px) {
    .calendar-container {
        grid-template-columns: 1fr; /* 1列に */
    }
}

.calendar-wrapper {
    background-color: #ffffff; /* 各カレンダーの背景は白にして、bodyの背景色と区別 */
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* カレンダーテーブルのスタイル */
table {
    width: 100%;
    border-collapse: collapse;
}

/* キャプション（年月） */
caption {
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    color: #333;
}

/* ヘッダーセル (th) */
th {
    background-color: #ddd;
    border: 1px solid #ccc;
    padding: 10px 5px;
    color: #333;
    font-weight: normal;
    text-align: center;
}

/* データセル (td) */
td {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 8px 3px;
    text-align: center;
    vertical-align: middle; /* 縦方向中央揃え */
    height: auto; /* 高さ指定なし */
    font-size: 0.9em;
    color: #333;
}

/* 日曜日のヘッダーセル */
th.sunday {
    background-color: #01407e;
    color: #ffffff;
}

/* 指定日のセル内の要素のスタイル */
td .date-number {
    display: block;
    font-size: 1.2em;
    font-weight: bold; /* 数字を太く */
    line-height: 1.4; /* 日付とテキストの段落に適用 */
}

td .schedule-text {
    margin: 0;
    padding: 0;
    font-size: 0.8em;
    line-height: 1.4; /* 日付とテキストの段落に適用 */
    color: inherit; /* セルの文字色を継承 */
}

/* 講座時間などの情報 */
.time-info {
    text-align: left;
    font-size: 0.9em;
    margin: 10px 0 0 0;
    padding-left: 5px;
    color: #555;
}

.special-info-red {
    text-align: left;
    font-size: 0.9em;
    font-weight: bold;
    color: #e60039;
    margin: 5px 0 0 0;
    padding-left: 5px;
}

/* 指定日（赤色） */
td.red {
    background-color: #7bbfa8;
    color: #ffffff;
}

/* 指定日（青色） */
td.blue {
    background-color: #0062B0;
    color: #ffffff;
}

/* 指定日（オレンジ色） */
td.orange {
    background-color: #FF8000;
    color: #ffffff;
}

/* カレンダー上の空のセル */
td.empty {
    background-color: #f9f9f9; /* 少し薄い色などにして見やすくしても良い */
    color: #ccc;
}