@media screen and (min-width: 769px) {
#flow{
    margin-top:20px;
    text-align: center;
}
.form_table{
    border-top:1px solid #BBB;
    border-left:1px solid #BBB;
    margin-top:30px;
    font-size:90%;
}
.form_table th{
    width:30%;
    text-align:left;
    padding:13px 20px;
    border-bottom:1px solid #BBB;
    border-right:1px solid #BBB;
    background:#F6F6F8;
    color:#00306C;
    vertical-align:top;
    position: relative;
}
.form_table th .icon_required{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.form_table td{
    padding:13px 20px;
    border-bottom:1px solid #BBB;
    border-right:1px solid #BBB;
}
.icon_required{
    background:#D90000;
    color:#FFFFFF;
    font-size:12px;
    font-weight:normal;
    padding:4px 8px;
    line-height:1;
}
.btn_confirm{
    width:400px;
    margin:30px auto auto;
}
.btn_confirm .btn{
    background:#00306D;
    padding:10px 0;
    font-size:120%;
}
.btn_send{
    display:inline-block;
    vertical-align:middle;
    margin:0 8px 0 0;
}
.btn_confirm .btn,
.btn_send .btn{
    background:#00306D;
    padding:10px 0;
    font-size:120%;
}
.btn_back .btn{
    border:1px solid #00306D;
    color:#00306D;
    background:#F5F5F5;
    padding:10px 0;
}
/* Buttons inline layout for desktop: back and send appear side-by-side */
.btn_send, .btn_back { display: inline-block; vertical-align: middle; }
.btn_confirm { text-align: center; }

/* Reserve2 specific button row styling */
.btn-row { text-align: center; margin-top: 24px; }
.btn-row .btn_back { margin-right: 16px; }
.btn-row .btn_send .btn,
.btn-row .btn_back .btn { display: inline-block; padding: 10px 22px; font-size: 1em; }
.btn-row .btn_back .btn { border: 1px solid #00306D; background: #F5F5F5; color: #00306D; }
.btn-row .btn_send .btn { background: #00306D; color: #fff; border: none; }
/* make buttons more generous in width on desktop */
@media screen and (min-width: 769px) {
    .btn-row .btn_back .btn, .btn-row .btn_send .btn { min-width: 400px; }
}
@media screen and (max-width: 768px) {
    .btn-row { text-align: center; }
    .btn-row .btn_back, .btn-row .btn_send { display: block; width: 100%; margin: 8px 0; }
    .btn-row .btn_back .btn, .btn-row .btn_send .btn { width: 100%; box-sizing: border-box; }
}
#thanks{
    border:1px solid #BBB;
    margin-top:40px;
    padding:50px 30px;
    text-align:center;
}
/* mobile */
}
@media screen and (max-width: 768px ){
#flow{ margin:10px; }
.lead{ margin:auto 10px; }
.form_table{ border-top:1px solid #BBB; margin-top:10px; box-sizing:border-box; }
.form_table th{ display:block; text-align:left; padding:10px 20px; border-bottom:1px solid #BBB; background:#F6F6F8; color:#00306C; }
.btn_confirm{ width:100%; margin:20px auto; }
.btn_send{ width:100%; margin:20px auto; float:none; }
.btn_back{ width:100%; margin:10px auto; float:none; }
}

/* 以下、sample の r_style.css からカレンダー・時間選択・ラジオカード等を抜粋 */
.booking-form {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1140px;
    box-sizing: border-box;
    margin: 0 auto; /* 中央寄せ */
}
.booking-section { margin-bottom: 40px; }
.booking-label-group { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.booking-label-title { display:flex; align-items:center; gap:10px; }
.booking-heading { font-size:1.2em; font-weight:bold; color:#333; white-space:nowrap; }
.booking-required { background-color:#D90000; color:#fff; font-size:0.7em; font-weight:bold; padding:3px 8px; border-radius:0; white-space:nowrap; }
.booking-duration { font-size:0.85em; color:#666; white-space:nowrap; }

.calendar-display { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:20px; padding-left:0; padding-right:0; }
.calendar-list { display:flex; flex-wrap:nowrap; width:auto; padding-bottom:10px; }
.calendar-item { flex-shrink:0; box-sizing:border-box; text-align:center; margin-right:1px; width:calc((100% - (2px * 13)) / 14); min-width:70px; }
.calendar-list .calendar-item:last-child { margin-right:0; }
.calendar-item-button { display:block; height:100%; width:100%; }
.calendar-item-content { border:1px solid #ccc; padding:5px 3px; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; height:85px; background-color:#fff; position:relative; transition:all 0.2s ease-in-out; }
.calendar-item-content.is-selected { border-color:#00306d; background-color:#edfbff; }
.calendar-dayofweek { font-size:11px; color:#666; margin-bottom:2px; text-align:left; padding-left:2px; line-height:1.5; }
.calendar-date-display { font-size:1.0em; font-weight:bold; color:#333; line-height:1.1em; text-align:center; }
.calendar-status-info { font-size:1.0em; font-weight:bold; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:1px 0; line-height:1em; text-align:center; }
.note-icon--circle { color:#00306d; }
.note-icon--square { color:#00306d; }
.note-icon--tel { color:#666; }
.note-phone-number { white-space:nowrap; }

.time-selection-grid { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:10px; }
.time-tags-list { display:flex; flex-wrap:wrap; gap:8px; }
.time-tag-button { background-color:#f8f8f8; border:1px solid #ccc; padding:8px 12px; border-radius:30px; font-size:0.95em; color:#333; transition:background-color .3s, border-color .3s; flex-shrink:0; min-width:80px; box-sizing:border-box; text-align:center; }
.time-tag-button:hover:not(.is-disabled) { background-color:#e0e0e0; border-color:#999; }
.time-tag-button.is-selected { background-color:#00306d; color:#fff; border-color:#00306d; }
.time-tag-button.is-disabled { background-color:#f0f0f0; color:#ccc; border-color:#e0e0e0; cursor:not-allowed; opacity:0.6; }

.meeting-spot-options { display:flex; flex-direction:column; gap:12px; }
.radio-card { display:block; cursor:pointer; }
.radio-card-input { display:none; }
.radio-card-body { display:flex; align-items:center; border:1px solid #ccc; padding:10px; border-radius:4px; transition:border-color .3s, background-color .3s; background-color:#fff; }
.radio-card-input:checked + .radio-card-body { border-color:#00306d; background-color:#edfbff; }

/* JSが付与するis-selectedクラスに対しても白背景/可視テキストを維持 */
.radio-card-body.is-selected { border-color:#00306d; background-color:#fff; color:#333; }
.radio-card-body.is-selected .spot-name, .radio-card-body.is-selected .spot-detail { color:#333; }
.radio-card-icon { flex-shrink:0; width:24px; height:24px; margin-right:10px; position:relative; }
.radio-card-icon svg { position:absolute; top:0; left:0; width:100%; height:100%; }
.radio-card-icon svg { position:absolute; top:0; left:0; width:100%; height:100%; }

.radio-card-icon .icon-default { display:block; }
.radio-card-icon .icon-default path { display: none !important; }
.radio-card-icon .icon-default path:nth-of-type(1) { display: block !important; fill: none !important; stroke: #bfbfbf !important; stroke-width: 3px !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.radio-card-icon .icon-checked { display:none; }


.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-default { display: none !important; }
.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-checked { display:block !important; }
.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-checked path { display: none !important; }
.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-checked path:nth-of-type(1) { display: block !important; fill: none !important; stroke: #00306d !important; stroke-width: 3px !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.radio-card-input:checked + .radio-card-body .radio-card-icon .icon-checked path:nth-of-type(3) { display: block !important; fill: #00306d !important; stroke: none !important; }

/* Ensure text remains visible when a radio is selected (prevent accidental white-on-white). */
.radio-card-body { color: #333; background-color: #fff; }
.radio-card-input:checked + .radio-card-body { border-color: #00306d; background-color: #fff; }
.radio-card-input:checked + .radio-card-body .spot-name,
.radio-card-input:checked + .radio-card-body .spot-detail { color: #333 !important; }

/* Meeting spot heading: match sample appearance */
.booking-section--meeting-spot .booking-heading { color: #00306d; }
.radio-card-content { flex-grow:1; }

/* Make each radio card take full available width and prevent it from shrinking when textarea is resized */
.meeting-spot-options .radio-card { width:100%; box-sizing: border-box; }
.meeting-spot-options .radio-card .radio-card-body { width:100%; }
.spot-name { font-weight:bold; color:#333; display:block; margin-bottom:2px; font-size:0.95em; }
.spot-name span { font-weight:normal; }
.spot-detail { font-size:0.8em; color:#666; }

/* テキストエリアを親幅に合わせ中央寄せに見えるように調整 */
/* textarea を横方向にリサイズ不可にし、幅をカレンダーと揃える */
.meeting-spot-options textarea#note1 { width:100%; box-sizing:border-box; min-height:80px; padding:10px; resize: vertical; max-width: 100%; }

/* 幅の基準をカレンダーと同じにするため、meeting-spot の横幅を制限 */
.booking-section--meeting-spot .meeting-spot-options { max-width: 100%; width: 100%; box-sizing: border-box; }

/* カレンダー基準の横幅（booking-form の max-width に合わせる） */
.booking-form { max-width: 1140px; }

/* カレンダー内の ○／▲ を #00306d にする */
.status-available { color: #00306d; }
.status-unavailable { color: #00306d; }

.submit-button-group { text-align:center; margin-top:30px; }
.submit-button { background-color:#00306d; color:#fff; padding:12px 25px; border-radius:4px; font-size:1em; font-weight:bold; width:100%; max-width:250px; box-sizing:border-box; transition:background-color .3s; }
.submit-button:hover { background-color:#e06b00; }

@media (max-width: 768px) {
    .booking-form { padding:15px; }
    .booking-label-group { flex-direction:column; align-items:flex-start; gap:5px; }
    .booking-heading { font-size:1.1em; }
    .booking-required, .booking-duration { font-size:0.75em; }
    .calendar-item { min-width:70px; }
    .calendar-list { width:calc((70px + 2px) * 14); padding-bottom:10px; }
}