@charset "utf-8";

/* ================================
    Calendar – FULL OPTIMIZED CSS
    空白なし／デザイン統一版
================================ */

/* カレンダー全体 */
#calendar {
    margin-top: 50px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* タイトル */
.calendar_title {
    font-weight: bold;
    padding-left: 10px;
}

/* ▼各月のテーブル共通設定 */
#calendar table {
    width: 100%;
    background: #ffffff;
    border-radius: 15px;
    padding: 20px 15px;
    border-collapse: separate !important;
    border-spacing: 8px 0 !important;  /* ← 縦の余白ゼロ */
    margin-bottom: 5px !important;
}

/* 最後の月は余白ゼロ */
#calendar table:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 月タイトル（例：2025年12月の定休日） */
#calendar caption {
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    padding: 10px 0 15px;
    color: #013b7a;
}

/* 曜日ヘッダ */
#calendar thead th {
    font-size: 15px;
    font-weight: 700;
    padding: 6px 0;
    color: #013b7a;
}

/* ヘッダ背景色（アップロード画像準拠） */
#calendar table:nth-of-type(1) thead tr {
    background: #f5e588; /* 黄色（11月） */
}

#calendar table:nth-of-type(2) thead tr {
    background: #f5b498; /* オレンジ（12月） */
}

/* 日付セル共通 */
#calendar tbody td {
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    color: #333333;
    background: #ffffff;
    border-radius: 6px;
    border-bottom: 1px dotted #CCCCCC;
}

/* 土曜 */
#calendar th#saturday,
#calendar td.saturday {
    color: #003f95;
}

/* 日曜 */
#calendar th#sunday,
#calendar td.sunday {
    color: #d60031;
}

/* ▼定休日（赤文字のみ、画像と同じ） */
#calendar td.holiday {
    color: #d60031 !important;
    font-weight: 700;
    background: transparent !important;
}

/* ▼前月・翌月の空白セル */
#calendar td.empty {
    height: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    border-bottom: none !important; /* ドット線を消去 */
    background: transparent !important;
    font-size: 0 !important;
}

/* 高さの強制リセット */
#calendar td {
    min-height: 0 !important;
}

/* 背景テーマ関連の競合防止 */
.sidebar,
.right-column,
#sub,
#side,
#menu,
.column_r {
    background-repeat: no-repeat !important;
    background-size: auto !important;
}





/* ================================
   ▼ スマホ最適化（幅 768px 以下）
   ================================ */
@media screen and (max-width: 768px) {

    #calendar {
        margin-top: 20px;
        padding: 0 10px;
    }

    /* カレンダータイトル */
    .calendar_title {
        font-size: 16px;
        padding-left: 0;
        text-align: center;
        margin-bottom: 10px;
    }

    /* ▼ 1ヶ月ごとのテーブル */
    #calendar table {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        border-spacing: 4px 4px; /* スマホ用に圧縮 */
        margin-bottom: 15px !important;
    }

    /* ▼ 月タイトル（11月のような部分） */
    #calendar caption {
        font-size: 14px;
        text-align: center;
        padding: 5px 0 10px;
    }

    /* ▼ 曜日 */
    #calendar thead th {
        font-size: 12px;
        padding: 4px 0;
    }

    /* ▼ 日付セル */
    #calendar tbody td {
        width: 30px;
        height: 30px;
        font-size: 14px;
        border-radius: 4px;
        padding: 0;
    }

    /* ▼ 空白セル最適化 */
    #calendar td.empty {
        height: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    /* ▼ 2ヶ月目（12月）の無駄な余白削除 */
    #calendar table:last-of-type {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}
.calendar_title .note-red {
    color: #d60031; /* 画像と同じ赤 */
    font-weight: bold;
}