/* ============================================================
   HPからの予約受付 締め切り（2026-08-07 12:00）関連のスタイル
   data/exhibitors.js の WEB_RESERVATION_DEADLINE と対で動く。

   色の使い分け（サイト全体で統一すること）
     赤   #e53e3e … 満員御礼・受付終了（closed: true）
     琥珀 #dd6b20 … Web受付終了・各社へお電話でご確認（締切後かつ満員でない）
     青   #2b6cb0 … 締切前のカウントダウン告知
     灰   #a0aec0 … 締切後の全体告知

   index.html / reserve/demo.html / exhibitors/template.html の3か所から読み込む。
   ============================================================ */

/* ---------- 締切前：カウントダウン告知（青） ---------- */
.deadline-banner {
    background: linear-gradient(135deg, #2b6cb0 0%, #3182ce 100%);
    color: #fff;
    border-radius: 16px;
    padding: 22px 28px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(43, 108, 176, 0.22);
}

.deadline-banner .db-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.6;
    color: #fff;
}

.deadline-banner .db-date {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 2px 10px;
    font-weight: 700;
}

.deadline-banner .db-body {
    font-size: 0.92rem;
    line-height: 1.8;
    margin: 0;
    opacity: 0.95;
}

/* ---------- 締切後：全体告知（灰） ---------- */
.closed-banner {
    background: #edf2f7;
    border: 2px solid #a0aec0;
    border-radius: 16px;
    padding: 22px 28px;
    text-align: center;
    color: #2d3748;
}

.closed-banner .cb-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.6;
    color: #2d3748;
}

.closed-banner .cb-body {
    font-size: 0.9rem;
    line-height: 1.9;
    margin: 0;
    color: #4a5568;
}

/* トップページ・予約フォームの上部に差し込むときの余白 */
.deadline-banner-slot {
    margin: 0 0 32px;
}

@media (max-width: 768px) {
    .deadline-banner,
    .closed-banner {
        padding: 18px 18px;
        border-radius: 14px;
    }
    .deadline-banner .db-title { font-size: 1.02rem; }
    .closed-banner .cb-title { font-size: 1rem; }
    .deadline-banner .db-body,
    .closed-banner .cb-body { font-size: 0.85rem; }
}

/* ---------- トップページの企業カード：琥珀リボン ---------- */
.card-ribbon-amber {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    background: rgba(221, 107, 32, 0.94);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 8px 18px;
    border-radius: 8px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.card-ribbon-amber small {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* トップページ・カード下部の「お電話でお問い合わせ」ボタン */
.btn-phone-outline {
    background: #fffaf0;
    color: #b7541a;
    border: 2px solid #dd6b20;
    font-weight: 700;
}

.btn-phone-outline:hover {
    background: #dd6b20;
    color: #fff;
}

/* ---------- 企業ページ・予約フォーム：電話案内ボックス（琥珀） ---------- */
.res-phone-notice {
    background: #fffaf0;
    border: 2px solid #dd6b20;
    border-radius: 16px;
    padding: 22px 26px;
    color: #7b341e;
    font-size: 0.95rem;
    line-height: 1.9;
}

.res-phone-notice .rpn-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #b7541a;
    margin: 0 0 10px;
    line-height: 1.6;
}

.res-phone-notice .rpn-caution {
    font-size: 0.85rem;
    color: #975a16;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #f6ad55;
    line-height: 1.8;
}

/* 電話発信ボタン（スマホではタップで発信） */
.tel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #dd6b20 0%, #ed8936 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(221, 107, 32, 0.32);
    margin-top: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(221, 107, 32, 0.4);
}

.tel-btn small {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.9;
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .res-phone-notice { padding: 18px 18px; }
    .tel-btn { font-size: 1.05rem; padding: 14px 24px; width: 100%; }
}

/* ---------- 予約フォームの企業選択カード：琥珀 ---------- */
.res-comp-card.phone-only {
    cursor: not-allowed;
    background: #fffaf0;
    border-color: #dd6b20;
}

.res-comp-card.phone-only:hover {
    background: #fffaf0;
    border-color: #dd6b20;
    transform: none;
    box-shadow: none;
}

.res-comp-card.phone-only .res-comp-name { color: #7b341e; }
.res-comp-card.phone-only .res-comp-city { color: #b7541a; }

.res-comp-phone-badge {
    display: inline-block;
    background: #dd6b20;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
    align-self: center;
    white-space: nowrap;
}

/* ==========================================================================
   開催終了時（EVENT_STATUS = 'finished'）の表示
   ここは年をまたいで使い回す。来年 'open' に戻せば一切適用されない。
   ========================================================================== */

/* トップページ・カード下部の「体験の内容を見る」ボタン
   予約を促さず、記録として中身だけ見せるための落ち着いた配色。 */
.btn-detail-outline {
    background: #f4fafc;
    color: #1d6b7c;
    border: 2px solid #9ecfdb;
    font-weight: 700;
}

.btn-detail-outline:hover {
    background: #33b5cc;
    border-color: #33b5cc;
    color: #fff;
}

/* 企業ページ・予約フォームの「開催は終了しました」案内ボックス */
.event-finished-notice {
    background: #f4fafc;
    border: 1px solid #cfe4ea;
    border-radius: 12px;
    padding: 24px 22px;
    text-align: center;
    color: #4a555a;
    line-height: 1.9;
}

.event-finished-notice .efn-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1d6b7c;
    margin-bottom: 8px;
}

.event-finished-notice .efn-body {
    font-size: 0.95rem;
}

.event-finished-notice .efn-link {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 28px;
    border-radius: 999px;
    background: #33b5cc;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.event-finished-notice .efn-link:hover {
    background: #2aa5bc;
}

/* ---------- 開催終了時：ヒーロー直下のカウントダウン跡地 ---------- */
.countdown-finished-msg {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2.4vw, 26px);
    line-height: 1.5;
    color: #1d6b7c;
    margin: 6px 0 0;
    letter-spacing: 0.04em;
}

.countdown-finished-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ff7e67;
    text-decoration: none;
}

.countdown-finished-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .countdown-finished-msg .cf-br { display: none; }
}