/* reserve_style.css - reserve.php専用スタイルシート */
/* 依存ファイル: common.css（共通スタイル） */
/* 呼び出し元: reserve.php */
/* 呼び出し先: なし */
/* ※ 共通スタイルは common.css を参照。ここにはページ固有スタイルのみ記載 */

/* ================================================
   本日の受付時間バー（section_type=html で生成）
   common.css の .aboutus_img { float: left } の影響を受けないよう
   clear: both で float を解除する
   ================================================ */
.reserve-today {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    background-color: #f0f7f1;
    border-left: 4px solid #196519;
    border-radius: 0 6px 6px 0;
    padding: 10px 16px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

/* 休診時 */
.reserve-today.reserve-today-closed {
    background-color: #f8f9fa;
    border-left-color: #9ca3af;
}

.reserve-today-label {
    font-weight: 700;
    color: #196519;
    white-space: nowrap;
}

.reserve-today.reserve-today-closed .reserve-today-label {
    color: #6c757d;
}

.reserve-today-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
}

.reserve-today-closed-text {
    color: #9ca3af;
    font-weight: 500;
}

.reserve-today-note {
    font-size: 0.82rem;
    color: #6c757d;
    width: 100%;
    padding-top: 2px;
}

/* 午前・午後バッジ */
.reserve-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background-color: #6c757d;
    padding: 1px 7px;
    border-radius: 3px;
    white-space: nowrap;
}

/* ================================================
   電話番号周辺（ご予約はお電話で ブロック）
   reserve.css の .aboutus_tel は text-align:center 済み
   h4.caption と p.text_right も中央寄せに揃える
   ================================================ */
.articleleft_aboutus_article h4.caption {
    text-align: center;
}

.articleleft_aboutus_article address.aboutus_tel {
    text-align: center;
}

.articleleft_aboutus_article p.text_right {
    text-align: center;
}

/* 受付時間内 */
.reserve-today.reserve-today-open {
    background-color: #f0f7f1;
    border-left-color: #196519;
    flex-wrap: wrap;
}

/* 電話ボタン行 */
.reserve-today-tel {
    width: 100%;
    margin-top: 8px;
}

.reserve-today-tel .link_button {
    display: inline-block;
    width: auto;
    padding: 8px 24px;
    font-size: 0.95rem;
}

/* ================================================
   レスポンシブ
   ================================================ */
@media (max-width: 575px) {
    .reserve-today {
        font-size: 0.85rem;
        gap: 8px 12px;
    }
}