/* ----------------------------------------------------- */
/* 💡 胃カメラ空き情報テーブル用 CSS (PC 100% / スマホ 横スクロール 対応) */
/* ----------------------------------------------------- */

/* 1. 全体共通の基本設定 */
#availability-table-container {
    /* 常に横スクロールの親要素として設定 */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}

#availability-table-container table {
    /* PC表示時の初期設定: 幅100% */
    width: 100%;                  
    border-collapse: collapse;    
    font-family: inherit;         
    margin: 20px auto;            
    border: 1px solid #ccc;       
    /* PC表示で幅100%を維持し、セル幅を固定 */
    table-layout: fixed; 
}

#availability-table-container th, 
#availability-table-container td {
    border: 1px solid #ddd;      
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 1em; 
    /* 💡【重要】基本は折り返し（PC表示）を許可 */
    white-space: normal; 
}


/* ----------------------------------------------------- */
/* 2. PCからスマホへの切り替え (メディアクエリ) */
/* ----------------------------------------------------- */

/* 画面幅が狭いとき（例: 768px以下）に適用されるスタイル */
@media screen and (max-width: 768px) {
    
    /* 1. スマホ時はテーブルの幅を自動にし、内容量に合わせて広がるようにする */
    #availability-table-container table {
        width: auto;                  
        table-layout: auto; /* width: auto に合わせて table-layout も変更 */
        /* 最小幅を設定することで、横スクロールを確実に発動させる */
        min-width: 600px; 
    }
    
    /* 2. スマホ時はすべてのセルで改行を禁止し、横スクロールを強制 */
    #availability-table-container th, 
    #availability-table-container td {
        white-space: nowrap; 
    }
    
    /* 3. 備考欄はフォントをさらに小さくして、横幅を稼ぐ */
    .note-cell {
        font-size: 0.7em; 
    }
}


/* ----------------------------------------------------- */
/* 3. 画像のデザイン再現 (色分け・フォント) - 共通 */
/* ----------------------------------------------------- */

.table-header-left {
    background-color: #f0f0f0; 
    font-weight: bold;
}

.table-header-top {
    background-color: #d9e2f3; 
    font-weight: bold;
}

/* 備考欄のセル（左寄せ）- PC表示での設定 */
.note-cell {
    text-align: left;
    font-size: 0.9em; /* PC時のサイズ */
}


/* ----------------------------------------------------- */
/* 4. 条件付き書式用クラス (×/△の色分け) - 共通 */
/* ----------------------------------------------------- */

.status-unavailable {
    background-color: #ffcccc; 
    font-weight: bold;
}

.status-limited {
    background-color: #fff9c4; 
    font-weight: bold;
}

/* ----------------------------------------------------- */
/* 5. 胃カメラ空き情報 見出しまわりのデザイン           */
/* ----------------------------------------------------- */

.availability-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1f286f;              /* 既存サイトのメインブルーに合わせる */
    margin-top: 10px;
    margin-bottom: 4px;
}

.availability-sub {
    text-align: center;
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 12px;
}

/* 凡例のテキスト（◯△×の説明） */
.availability-note {
    text-align: center;
    font-size: 0.85rem;
    color: #555;
    margin-top: 8px;
    margin-bottom: 0;
}

/* スマホ時は少しだけ文字サイズを上げて読みやすく */
@media screen and (max-width: 768px) {
    .availability-title {
        font-size: 1.4rem;
    }
    .availability-sub,
    .availability-note {
        font-size: 0.8rem;
    }
}