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



/*  教習期間・スケジュールのご案内
-----------------------------------------*/


        .schedule-container {
            max-width: 900px;
            margin: 0 auto;
        }

        /* テーブルの基本スタイル */
        .schedule-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 15px; /* 行ごとの隙間を作る */
        }

        .schedule-table th, .schedule-table td {
            padding: 15px;
            vertical-align: top;
            border-radius: 4px;
        }

        /* 各種カラー・ヘッダー定義 */
        .step-header {
            color: #fff;
            font-weight: bold;
            text-align: center;
            font-size: 1.1rem;
        }

        .bg-pink { background-color: #e5007f; }
        .bg-orange { background-color: #f39800; }
        .bg-green { background-color: #009944; }
        .bg-blue { background-color: #009ddb; }

        /* コンテンツ部分の枠線スタイル */
        .content-box {
            background: #fff;
            border: 2px solid;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 10px;
        }
        .box-pink { border-color: #e5007f; }
        .box-green { border-color: #009944; }
        .box-blue { border-color: #009ddb; }
        .box-orange { border-color: #f39800; }

        .box-title {
            color: #fff;
            text-align: center;
            font-weight: bold;
            padding: 5px;
            margin: -15px -15px 15px -15px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        /* 注意書きなどの装飾 */
        .alert-text {
            color: #e5007f;
            font-weight: bold;
            font-size: 0.9rem;
        }
        
        .info-period {
            text-align: center;
            color: #e5007f;
            font-weight: bold;
            font-size: 1.2rem;
            padding: 10px 0;
        }

        /* 矢印（フロー）の表現 */
        .arrow-row td {
            text-align: center;
            padding: 0;
            font-size: 24px;
            color: #aaa;
        }

        /* ==========================================
           レスポンシブ対応 (画面幅 768px 以下)
           ========================================== */

/*  教習期間・スケジュールのご案内
-----------------------------------------*/
        @media screen and (max-width: 768px) {
            .schedule-table, .schedule-table tbody, .schedule-table tr, .schedule-table td {
                display: block;
                width: 100%;
                box-sizing: border-box;
            }
            
            .schedule-table tr {
                margin-bottom: 20px;
            }

            .step-header {
                padding: 12px;
                border-radius: 6px 6px 0 0;
            }

            .schedule-table td {
                background: #fff;
                /*border: 1px solid #ddd;*/
                border-top: none;
                border-radius: 0 0 6px 6px;
                padding: 15px 10px;
            }

            /* 2カラム並んでいる部分を縦並びにする */
            .flex-container {
                display: block !important;
            }
            
            .flex-child {
                width: 100% !important;
                margin-bottom: 15px;
            }
            
            .flex-child:last-child {
                margin-bottom: 0;
            }
            
            .arrow-row {
                display: none; /* スマホでは矢印行を非表示（枠線の流れで見せるため） */
            }
        }

        /* PC環境での横並び用レイアウト */
        .flex-container {
            display: flex;
            gap: 15px;
        }
        .flex-child {
            flex: 1;
        }