/* ===== Student Page Styles ===== */
.student-page-section {
    padding-top: 40px;
    /* padding-bottom: 60px; /* フォームセクションがあるので、下のパディングはそちらで調整 */
}

.student-page-section h2 { /* 「レッスン振替のご案内」タイトル */
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 30px;
    color: #386641;
}

.make-up-lesson-section {
    background-color: #FFFFFF;
    padding: 25px 30px 30px; /* 下のパディングを少し追加 */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    margin-bottom: 40px; /* カレンダーセクションとフォームセクションの間隔 */
}

.make-up-lesson-section h3 { /* 「振替可能日時カレンダー」 */
    font-family: 'Merriweather', serif;
    font-size: 1.8em;
    color: #386641;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
}

.make-up-lesson-section > p { /* カレンダーの説明文 */
    text-align: center;
    margin-bottom: 25px;
    font-size: 0.95em;
    line-height: 1.7;
    color: #5a5a5a;
}

.calendar-container {
    margin-bottom: 0; /* make-up-lesson-sectionのpaddingで調整 */
    overflow-x: auto; /* スマホでテーブルがはみ出る場合、横スクロールを可能にする */
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* 横スクロールが発生する最小幅 (調整可) */
}

.calendar-table th {
    background-color: #E6EFE6; /* 薄いグリーン系 */
    color: #386641; /* ダークグリーン */
    padding: 12px 8px;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    border: 1px solid #D4E0D4;
}

.calendar-table td.day-cell {
    border: 1px solid #D4E0D4;
    padding: 8px;
    vertical-align: top;
    height: 120px; /* セルの高さを固定 (調整可) */
    width: 14.28%; /* 7等分 */
}

.day-cell .date-number {
    font-size: 1.1em;
    font-weight: bold;
    color: #4A4A4A;
    margin-bottom: 5px;
    text-align: right;
    padding-right: 5px;
}

/* HTMLから .today クラスが削除されたため、以下のスタイルは現在適用されません。
   もし今日の日付をハイライトしたい場合は、HTMLの該当tdに .today クラスを付与してください。 */
/*
.day-cell.today .date-number {
    background-color: #A7C957;
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    padding-right: 0;
    display: inline-block;
    float: right;
}
.day-cell.today {
    background-color: #F8F5F0;
}
*/

.available-slots ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.available-slots li {
    background-color: #E9F5E9; /* ごく薄いグリーン */
    border: 1px solid #C9DDC9;
    color: #386641;
    padding: 5px;
    margin-bottom: 4px;
    border-radius: 4px;
    font-size: 0.85em;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.available-slots li:hover {
    background-color: #A7C957;
    color: white;
}

.available-slots .no-slots {
    font-size: 0.85em;
    color: #888;
    text-align: center;
    padding-top: 20px;
}
.day-cell.day-off {
    background-color: #f0f0f0; /* 休講日は少しグレーに */
}
.day-cell.day-off .date-number {
    color: #999;
}
.day-cell.day-off .no-slots {
    font-weight: bold;
    color: #777;
}

/* ===== Google Form Section Styles ===== */
.make-up-form {
    padding: 20px 0 40px; /* 上下のパディング。カレンダーセクションとの間隔は前のセクションのmargin-bottomで調整 */
    /* background-color: #f8f5f0; /* 必要に応じて背景色を設定 */
}

/* .make-up-form > .container は main > .container の内側にあるため、
   max-width や margin:auto は継承されます。
   ここでは、フォームセクション内のコンテナに対する追加スタイルがあれば記述します。
   例: フォームをカードデザインにする場合など */
.make-up-form > .container {
    /* background-color: #fff; */ /* カード風にする場合の背景 */
    /* padding: 20px; */        /* カード風にする場合のパディング */
    /* border-radius: 8px; */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

.make-up-form iframe {
    display: block; /* iframeをブロック要素として扱う */
    width: 100%;    /* コンテナの幅に合わせる */
    max-width: 800px; /* HTMLで指定されたwidthを最大幅として尊重 */
    min-height: 1000px; /* Google Formのコンテンツ量に応じて調整。長めに設定しておくとスクロールバーが出にくい */
                       /* HTMLのheight属性も考慮し、CSSでレスポンシブに制御 */
    margin: 0 auto; /* 中央寄せ（.container内で幅が指定されている場合は効果が薄いことも） */
    border: 1px solid #dcdcdc; /* iframeの境界線を少し目立たせる */
    box-sizing: border-box; /* ボーダーを含めた幅計算 */
}


/* ----- スマートフォン向け調整 ----- */
@media (max-width: 768px) {
    .student-page-section h2 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .make-up-lesson-section {
        padding: 20px 15px 25px; /* 下のパディング調整 */
        margin-bottom: 30px;
    }
    .make-up-lesson-section h3 {
        font-size: 1.5em;
    }
    .make-up-lesson-section > p {
        font-size: 0.9em;
        margin-bottom: 20px;
    }

    .calendar-table th {
        padding: 10px 4px;
        font-size: 0.8em;
    }
    .calendar-table td.day-cell {
        padding: 5px;
        height: auto; /* 高さを自動に */
        min-height: 100px; /* 最低限の高さを確保 */
    }
    .day-cell .date-number {
        font-size: 0.9em;
    }
    /* .day-cell.today .date-number のスタイルはHTMLからクラスが消えたためコメントアウトのまま */

    .available-slots li {
        font-size: 0.75em;
        padding: 4px;
    }
    .available-slots .no-slots {
        font-size: 0.8em;
        padding-top: 10px;
    }

    /* Google Form (Phone) */
    .make-up-form {
        padding: 15px 0 30px;
    }
    .make-up-form iframe {
        min-height: 800px; /* スマホでは高さを少し抑えるか、フォームの長さに応じて調整 */
        border-width: 1px; /* スマホでは枠線を細くしても良いかも */
    }
}