@charset "utf-8";
/* CSS Document */

/******************************
 * 日別設定 カレンダー 
 ******************************/
/* カレンダー全体のスライダーコンテナ */
.calendar-slider {
    width: 100%;
    overflow: hidden; /* スライドのために必要 */
    background-color: #FFFFFF; /* 背景色 */
    border-radius: 12px; /* 角丸 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* 影 */
    padding: 20px;
    box-sizing: border-box;
}

/* 実際にスライドするカレンダー群のコンテナ */
.calendar-container {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 各月のカレンダー */
.calendar-month {
    flex: 0 0 50%; /* 2つのカレンダーを横並びにする */
	flex: 0 0 100%; 
    box-sizing: border-box;
    padding: 0 10px;
}

/* 月移動コントロール部分 */
.calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}

/* コントロールボタン */
.calendar-controls button {
    background-color: #f0f0f0; /* グレー系の背景色 */
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.calendar-controls button:hover {
    background-color: #e0e0e0;
}

/* ボタンのプレースホルダー */
.calendar-controls .btn-placeholder {
    width: 60px; /* ボタンのおおよその幅 */
    height: 34px;
}

/* 現在表示中の年月 */
.current-month-display {
    font-size: 1.1em;
    font-weight: 600;
    color: #333333;
}

/* 日付テーブル */
.calendar-month table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #e0e0e0;
}

/* テーブルヘッダー（曜日）とセル（日付） */
.calendar-month th,
.calendar-month td {
    text-align: center;
    padding: 2px 0;
    border: 1px solid #f0f0f0;
    font-size: 0.85em;
    height: 48px;
    vertical-align: middle;
}

/* クリック可能な未来の日付のスタイル */
.calendar-month td[data-date]:not(.past-date) {
    cursor: pointer;
}
.calendar-month td[data-date]:not(.past-date):hover {
    background-color: #E9ECEF;
}

/* 日付の数字部分 */
.date-number {
    display: block;
    margin: 0 auto 2px;
    width: 28px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

/* 〇記号のコンテナ */
.date-symbols-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 14px;
}

/* 〇記号のスタイル */
.symbol {
    font-size: 16px;
    color: #0070c0;
}
.symbol-ng {
    color: #333333;
}
/* テーブルヘッダー（曜日）のスタイル */
.calendar-month th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #555555;
    font-size: 0.8em;
    padding: 8px 0;
}
.calendar-month th:nth-child(6) { color: #007bff; } /* 土曜日 */
.calendar-month th:nth-child(7) { color: #e60000; } /* 日曜日 */

/* 土日の日付の色 */
.calendar-month td:not(.past-date):nth-child(6) .date-number { color: #007bff; }
.calendar-month td:not(.past-date):nth-child(7) .date-number { color: #e60000; }

/* 過去日のスタイル */
.calendar-month td.past-date .date-number {
    color: #cccccc !important;
}
.calendar-month td.past-date .date-symbols-container {
    display: none; /* 過去日は〇を非表示 */
}
.calendar-month td.past-date.today .date-number {
    background-color: transparent;
}

/* 当月以外の日付 */
.calendar-month td.other-month {
    background-color: #fafafa;
    visibility: hidden; /* 見えなくする */
}

/* モーダル表示用のスタイル */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}
.modal-box {
    background-color: white; padding: 25px 30px; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center;
    max-width: 90%; width: 320px;
}
.modal-message {
    margin-bottom: 20px; font-size: 1.1em; line-height: 1.5;
    white-space: pre-wrap;
}
.modal-close-btn {
     background-color: #6c757d; color: white; border: none;
     padding: 10px 20px; border-radius: 5px; cursor: pointer;
}
.hidden { display: none; }

@media (max-width: 768px) {
    .calendar-month {
        flex: 0 0 100%; /* スマホでは1列表示 */
        margin-bottom: 20px;
    }
     .calendar-month:last-child {
        margin-bottom: 0;
    }
}

/* */
.disabled_eve{cursor: default; pointer-events: none;}