@charset "utf-8";

/* タイムテーブル全体コンテナ */
.session_timetable_wrap {
    width: 100%;
    /* 表示倍率（100%・125%・150%など）やモニター幅に関わらず、PCでは最大900pxで統一する
       ※親要素（.inner）が画面幅の75%指定のため、上限を設けないと画面が広いほど表が横に伸びてしまう */
    max-width: 900px;
    margin-top: 15px;
    font-family: sans-serif;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

/* ヘッダー行 */
.timetable_head {
    display: flex;
    background: #002B66; /* 既存サイトを踏まえたディープブルー */
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    font-size: 15px;
}
.timetable_head div {
    padding: 12px 10px;
}

/* レコーディング・行スタイル */
.timetable_row {
    display: flex;
    border-bottom: 1px solid #ddd;
    background: #fff;
}
.timetable_row:last-child {
    border-bottom: none;
}

/* 列の幅比率調整（3トラック） */
.time_col {
    width: 12%;
    min-width: 90px;
    background: #f4f7fa;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
}
.track_col {
    width: 33.3333%;
    box-sizing: border-box;
}
.timetable_head .track_col:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.2);
}

/* 1つのトラックで全画面ぶち抜く場合（基調講演など） */
.row_full .session_cell {
    width: 100%;
}

/* ==========================================
   1. セッションカード単体の修正（該当箇所を差し替え）
   ========================================== */
.session_cell {
    width: 33.3333%;
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* position: relative;  ← 重なりの原因になるため削除、またはコメントアウト */
    background: #fff;
    transition: background 0.2s ease;
}
.timetable_row:not(.row_full) .session_cell:not(:last-child) {
    border-right: 1px solid #eee;
}

/* ==========================================
   2. 時間とバッジを同じ行に並べる（バッジは右端）
   ========================================== */
.session_cell_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;    /* タイトルと重ならないよう下部に隙間を維持 */
}
.session_time {
    font-size: 14px;
}
.session_badge {
    display: inline-block;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
}
.badge_few {
    background: #FFF3CD;
    color: #856404;
    border: 1px solid #FFEBAA;
}
.badge_full {
    background: #F8D7DA;
    color: #721C24;
    border: 1px solid #F5C6CB;
}

/* ステータスに応じたセッションセルの背景変更 */
.session_cell.status_few {
    background: #fffdf7;
}
.session_cell.status_full {
    background: #fafafa;
    color: #999;
}

/* ==========================================
   3. セッションタイトルの余白調整
   ========================================== */
.session_ttl {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
    color: #002B66;
    margin: 0 0 8px 0;      /* margin-top を 0 にリセット */
}
.status_full .session_ttl {
    color: #999;
}
.session_speaker {
    font-size: 12.5px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 15px;
    margin-top: 0;
}

/* ==========================================
   4. 「選択する」ボタン（チェックボックス選択エリア）
   ========================================== */
.session_select {
    margin-top: auto; /* 下部に固定 */
    text-align: center;
}
/* 実体のチェックボックスは非表示にし、label をボタンとして見せる */
.session_select input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* 「選択する」ボタン本体 */
.session_select_btn {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 8px;
    font-size: 13px;
    font-weight: bold;
    color: #002B66;
    background: #f8fafc;
    border: 1px solid #002B66;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.session_select_btn:hover {
    background: #e9f0fa;
}

/* クリックしてチェックが入った状態＝ボタンの色を変える */
.session_select_btn.is-selected {
    background: #002B66;
    border-color: #002B66;
    color: #ffffff;
}

/* 満席時：ボタンを選択できない見た目・状態にする */
.status_full .session_select_btn {
    background: #eee;
    border-color: #ddd;
    color: #999;
    cursor: not-allowed;
}

/* ==========================================
   レスポンシブ対応（スマホ表示時に縦並びに変換）
========================================== */
@media screen and (max-width: 768px) {
    .timetable_head {
        display: none; /* スマホではヘッダーを非表示 */
    }
    .timetable_row {
        display: block; /* 横並びから縦並びへ */
        border: none;
        margin-bottom: 20px;
        background: transparent;
    }
    .time_col {
        width: 100% !important;
        padding: 8px;
        background: #002B66;
        color: #fff;
        border-right: none;
        border-radius: 4px 4px 0 0;
    }
    .session_cell {
        width: 100% !important;
        border-right: 1px solid #ddd !important;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .session_cell:last-child {
        border-radius: 0 0 4px 4px;
    }
    .row_full .session_cell {
        width: 100%;
    }
    .session_ttl {
        margin-top: 5px;
    }
}