:root {
   --primary-color: #007bff;
   --primary-dark: #0056b3;
   /* 黃色系：色彩心理・アートセラピー */
   --yellow-bg: #fff9db;
   --yellow-text: #856404;
   --yellow-border: #f08c00;
   /* 紅色系：色彩心理Basic */
   --red-bg: #fff5f5;
   --red-text: #c92a2a;
   --red-border: #fa5252;
   /* 灰色系：イベント */
   --grey-bg: #f1f3f5;
   --grey-text: #495057;
   --grey-border: #adb5bd;
   --text-color: #333333;
   --border-color: #e0e0e0;
 }

 body {
   /* font-family: 'Noto Sans JP', sans-serif; */
   color: var(--text-color);
   /* background-color: #ffffff; */
   line-height: 1.8;
   scroll-behavior: smooth;
 }

/* セクションタイトル */
.section-title { text-align: center; margin-bottom: 20px; }
.section-title h2 { font-weight: 700; font-size: 1.75rem; }

/* 凡例（Legend） */
.course-legend-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}
.legend-item {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
}
.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.1);
}
.swatch-blue { background: #ebf4ff; border-left: 3px solid #007bff; }
.swatch-yellow { background: #fff9db; border-left: 3px solid #f08c00; }
.swatch-red { background: #fff5f5; border-left: 3px solid #fa5252; }
.swatch-grey { background: #f1f3f5; border-left: 3px solid #adb5bd; }

/* カレンダーラッパー */
#calendar-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 60px;
}

/* FullCalendar カスタムスタイル */
.fc-toolbar-title { font-size: 1.25rem !important; font-weight: 700 !important; }
.fc-button-primary { 
    background-color: #fff !important; 
    border-color: var(--border-color) !important; 
    color: #333 !important;
    padding: 4px 8px !important;
    font-size: 0.9rem !important;
}
.fc-day-sun .fc-col-header-cell-cushion { color: #d9534f; }
.fc-day-sat .fc-col-header-cell-cushion { color: #0275d8; }

.fc-event {
    cursor: pointer;
    padding: 8px 10px !important;
    border-radius: 4px;
    white-space: normal !important;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    margin-bottom: 4px !important;
    border: 1px solid transparent !important;
    line-height: 1.5 !important;
}
/* 画面端の「他月の日付」にあるイベントを非表示にする */
.fc-day-other .fc-daygrid-event {
    display: none !important;
}

/* デスクトップ版の高さ統一設定 */
@media (min-width: 992px) {
    .fc-daygrid-event {
        min-height: 95px !important; 
        height: auto !important;     
        display: flex !important;
        flex-direction: column;
        justify-content: center !important; 
    }
    .fc-event-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: auto;
        width: 100%;
    }
}

/* コースカラー */
.event-blue { background-color: #ebf4ff !important; border-left: 4px solid var(--primary-color) !important; }
.event-blue .fc-event-title { color: var(--primary-dark) !important; font-weight: 700; }
.event-yellow { background-color: var(--yellow-bg) !important; border-left: 4px solid var(--yellow-border) !important; }
.event-yellow .fc-event-title { color: var(--yellow-text) !important; font-weight: 700; }
.event-red { background-color: var(--red-bg) !important; border-left: 4px solid var(--red-border) !important; }
.event-red .fc-event-title { color: var(--red-text) !important; font-weight: 700; }
.event-grey { background-color: var(--grey-bg) !important; border-left: 4px solid var(--grey-border) !important; cursor: default !important; }
.event-grey .fc-event-title { color: var(--grey-text) !important; font-weight: 700; }

/* 過去のイベント（クリック可能だが、さらに淡く表示） */
.fc-event-past {
    opacity: 0.8 !important; /* 透明度をさらに下げて「過去」を強調 */
    filter: grayscale(30%);   /* 少し彩度を落とす */
    box-shadow: none !important;
    border-left-width: 2px !important; /* ボーダーも細くして存在感を抑える */
}

/* ホバーエフェクト（グレーおよび過去の日付以外） */
.fc-event:not(.event-grey):not(.fc-event-past):hover { 
    transform: translateY(-2px); 
    background-color: var(--primary-color) !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
.fc-event:not(.event-grey):not(.fc-event-past):hover .fc-event-title { color: #ffffff !important; }

/* 過去のイベントのホバー時は少しだけ不透明度を戻す（クリック可能であることを示す） */
.fc-event-past:hover {
    opacity: 0.5 !important;
}

/* リスト表示スタイル */
.fc-list-event-title { padding: 15px 12px !important; font-size: 0.9rem !important; font-weight: 700 !important; }
.fc-list-event.event-blue .fc-list-event-title { color: var(--primary-dark) !important; }
.fc-list-event.event-yellow .fc-list-event-title { color: var(--yellow-text) !important; }
.fc-list-event.event-red .fc-list-event-title { color: var(--red-text) !important; }
.fc-list-event.event-grey .fc-list-event-title { color: var(--grey-text) !important; }
.fc-list-event-time { display: none !important; }

/* フォームセクション */
#contact { background-color: var(--secondary-bg); padding: 60px 0; }
.contact-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: all 0.4s ease;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-box.active-fill { border-color: var(--primary-color); transform: scale(1.01); }
.form-control { border-radius: 6px; padding: 12px 15px; border: 1px solid var(--border-color); }

#subject { font-size: 0.9rem; }
@media (max-width: 768px) { #subject { font-size: 0.85rem; } }

.btn-submit {
    padding: 14px 40px; font-weight: 600; border-radius: 50px; width: 100%; border: none;
    background-color: var(--primary-color); color: white; transition: background 0.3s;
}
.btn-submit:hover { background-color: var(--primary-dark); }
.btn-submit:disabled { background-color: #ccc; cursor: not-allowed; }

/* クリアボタン */
#clearSelection {
    font-size: 0.75rem; font-weight: 700; padding: 2px 8px;
    border: 1px solid #dc3545; color: #dc3545; background-color: #fff;
    border-radius: 4px; transition: all 0.2s; line-height: 1.2;
}
#clearSelection:hover { background-color: #dc3545; color: #fff; }

/* 送信成功メッセージ */
#formSuccessMessage {
    display: none; 
    background-color: #d4edda; 
    color: #155724; 
    border: 1px solid #c3e6cb;
    padding: 20px; 
    border-radius: 8px; 
    text-align: center; 
    font-weight: 500;
    width: 100%;
}

footer { background: #333; color: #fff; padding: 30px 0; text-align: center; }

@media (max-width: 768px) {
    .hero { padding: 50px 0; }
    .hero h1 { font-size: 1.5rem; }
    .section-title h2 { font-size: 1.4rem; }
    #calendar-wrapper { padding: 10px; }
    .contact-box { padding: 25px; }
}