.booking-page { padding-top:70px; }
.booking-hero { padding:56px 0 26px; text-align:center; background:linear-gradient(180deg,var(--color-bg2),var(--color-bg)); border-bottom:1px solid var(--color-border); }
.booking-hero .section-label { margin-bottom:10px; }
.booking-hero h1 { font-size:clamp(26px,4vw,40px); line-height:1.35; margin-bottom:14px; }
.booking-hero p { max-width:720px; margin:0 auto; color:var(--color-text-sub); line-height:1.9; font-size:14px; }

.booking-response-notice { max-width:720px; margin:18px auto 10px; padding:15px 17px; display:flex; align-items:flex-start; gap:12px; text-align:left; border:1px solid rgba(112,96,184,.28); border-radius:13px; background:rgba(112,96,184,.09); box-shadow:0 8px 24px rgba(30,24,54,.05); }
.booking-response-notice-icon { flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--color-lilac); background:rgba(112,96,184,.12); }
.booking-response-notice strong { display:block; margin-bottom:3px; color:var(--color-text); font-size:14px; }
.booking-response-notice span { display:block; color:var(--color-text); font-size:14px; line-height:1.7; }
.booking-response-notice b { color:var(--color-lilac); font-size:1.08em; }
.booking-student-link { margin:11px auto 0!important; font-size:12px!important; line-height:1.7!important; }
.booking-student-link a { color:var(--color-lilac); font-weight:800; text-decoration:underline; text-underline-offset:3px; }

.lesson-paid-notice { max-width:760px; margin:18px auto 0; padding:13px 15px; display:flex; align-items:flex-start; gap:10px; text-align:left; border:1px solid rgba(112,96,184,.22); border-radius:12px; background:rgba(112,96,184,.06); }
.lesson-paid-notice > i { flex:0 0 auto; margin-top:3px; color:var(--color-lilac); font-size:14px; }
.lesson-paid-notice div { min-width:0; }
.lesson-paid-notice strong { display:block; margin-bottom:3px; color:var(--color-text); font-size:12px; font-weight:900; }
.lesson-paid-notice span { display:block; color:var(--color-text-sub); font-size:11px; line-height:1.7; }
.lesson-paid-notice a { color:var(--color-lilac); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.form-help { margin:7px 0 0; color:var(--color-text-sub); font-size:11px; line-height:1.65; }
.form-help-important { margin-top:9px; padding:9px 10px; border-left:3px solid var(--color-lilac); border-radius:0 8px 8px 0; background:rgba(112,96,184,.065); color:var(--color-text); font-size:12px; line-height:1.65; }
.form-help-important strong { font-weight:800; }
.booking-pre-submit-notice { margin:18px 0 12px; padding:14px 15px; border:1px solid var(--color-border); border-radius:11px; background:var(--color-bg); }
.booking-pre-submit-title { display:flex; align-items:center; gap:7px; margin-bottom:8px; color:var(--color-text); font-size:12px; font-weight:900; }
.booking-pre-submit-title i { color:var(--color-lilac); }
.booking-pre-submit-notice ul { margin:0; padding-left:1.35em; color:var(--color-text-sub); font-size:11px; line-height:1.8; }
.booking-pre-submit-notice li + li { margin-top:5px; }
.booking-pre-submit-notice strong { color:var(--color-text); }
.booking-result-note { margin-top:8px; color:var(--color-text-sub); font-size:12px; line-height:1.7; }
.booking-wrap { padding:42px 0 80px; }
.booking-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr); gap:26px; align-items:start; }
.booking-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:24px; box-shadow:var(--shadow-sm); min-width:0; }
.booking-card h2 { font-size:18px; margin-bottom:8px; }
.booking-card-intro { color:var(--color-text-sub); font-size:13px; line-height:1.8; margin-bottom:16px; }
.booking-form .form-group { margin-bottom:18px; }
.booking-form label { display:block; margin-bottom:7px; font-size:13px; font-weight:700; }
.booking-form input,.booking-form select,.booking-form textarea { width:100%; border:1px solid var(--color-border); border-radius:9px; background:var(--color-bg); color:var(--color-text); font:inherit; padding:11px 12px; outline:none; }
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus { border-color:var(--color-lilac); box-shadow:0 0 0 3px rgba(112,96,184,.10); }
.booking-form textarea { min-height:120px; resize:vertical; }
.booking-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.booking-form .booking-contact-fields { grid-template-columns:1fr; gap:0; }
.required { color:#d76c7c; }

.booking-selection-panel { margin:0 0 18px; padding:14px; border:1px solid rgba(112,96,184,.20); border-radius:12px; background:rgba(112,96,184,.055); }
.booking-selection-title { margin:0 0 9px; font-size:13px; font-weight:900; }
.preference-list,.lesson-selection { display:grid; gap:8px; }
.preference-item { display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 12px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); }
.preference-rank { flex:0 0 58px; font-size:11px; color:var(--color-lilac); font-weight:800; }
.preference-value { flex:1; font-size:12px; font-weight:700; line-height:1.5; }
.preference-remove { border:0; background:transparent; color:var(--color-text-sub); cursor:pointer; padding:5px; }
.preference-empty { color:var(--color-text-sub); font-size:12px; line-height:1.7; }

/* TimeRex-inspired weekly timetable */
.booking-week-picker { border:1px solid var(--color-border); border-radius:14px; overflow:hidden; background:var(--color-bg); }
.booking-week-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--color-border); background:var(--color-surface); }
.booking-week-head > div { min-width:0; text-align:center; }
.booking-week-range { font-weight:900; font-size:15px; line-height:1.35; }
.booking-week-caption { color:var(--color-text-sub); font-size:10px; margin-top:3px; }
.booking-week-nav { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-bg); color:var(--color-text); padding:8px 10px; cursor:pointer; font:inherit; font-size:11px; font-weight:700; white-space:nowrap; }
.booking-week-nav:hover:not(:disabled) { border-color:var(--color-lilac); color:var(--color-lilac); }
.booking-week-nav:disabled { opacity:.28; cursor:not-allowed; }
.booking-week-status { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--color-border); color:var(--color-text-sub); font-size:11px; line-height:1.6; text-align:center; }
.booking-week-status[hidden] { display:none; }
.booking-week-status.error { color:#c95564; background:rgba(201,85,100,.06); }
.booking-week-status.warning { color:#a97935; background:rgba(169,121,53,.06); }
.booking-week-status button { border:1px solid currentColor; border-radius:7px; padding:5px 8px; background:transparent; color:inherit; cursor:pointer; font:inherit; font-size:10px; }
.booking-week-scroll { overflow:auto; overscroll-behavior:contain; max-height:min(66vh,760px); scrollbar-width:thin; scrollbar-color:var(--color-border) transparent; }
.timerex-grid { --timerex-days:7; display:grid; grid-template-columns:72px repeat(var(--timerex-days),minmax(132px,1fr)); min-width:996px; position:relative; background:var(--color-bg); }
.timerex-corner,.timerex-day-head { position:sticky; top:0; z-index:4; min-height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 6px; border-right:1px solid var(--color-border); border-bottom:1px solid var(--color-border); background:color-mix(in srgb,var(--color-surface) 96%,transparent); }
.timerex-corner { left:0; z-index:6; font-size:10px; color:var(--color-text-sub); font-weight:800; }
.timerex-day-head span { color:var(--color-text-sub); font-size:10px; font-weight:800; }
.timerex-day-head strong { margin-top:2px; font-size:13px; }
.timerex-day-head em { margin-top:3px; padding:2px 6px; border-radius:999px; background:var(--color-lilac); color:#fff; font-size:8px; font-style:normal; font-weight:800; }
.timerex-day-head.today { background:color-mix(in srgb,var(--color-lilac) 9%,var(--color-surface)); }
.timerex-time-label { position:sticky; left:0; z-index:3; min-height:52px; display:flex; align-items:flex-start; justify-content:flex-end; padding:7px 10px 0 6px; border-right:1px solid var(--color-border); border-bottom:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-sub); font-size:10px; font-weight:800; }
.timerex-cell { min-height:52px; display:grid; grid-template-columns:1fr; align-items:center; gap:5px; padding:5px; border-right:1px solid var(--color-border); border-bottom:1px solid var(--color-border); background:linear-gradient(180deg,transparent,rgba(112,96,184,.012)); }
.lesson-timerex-grid .timerex-cell { grid-template-columns:1fr; }
.timerex-slot { min-height:38px; border:1px solid color-mix(in srgb,var(--color-lilac) 52%,var(--color-border)); border-radius:8px; background:color-mix(in srgb,var(--color-lilac) 8%,var(--color-surface)); color:var(--color-text); cursor:pointer; font:inherit; font-size:10px; font-weight:800; line-height:1.15; padding:6px 4px; transition:.15s ease; }
.timerex-slot:hover { border-color:var(--color-lilac); background:color-mix(in srgb,var(--color-lilac) 14%,var(--color-surface)); transform:translateY(-1px); }
.timerex-slot.selected { border-color:var(--color-lilac); background:var(--color-lilac); color:#fff; box-shadow:0 4px 12px rgba(83,67,160,.18); }
.timerex-slot b { display:block; margin-top:2px; font-size:8px; font-weight:800; opacity:.92; }
.lesson-slot { min-height:40px; }
.timerex-cell-note { grid-column:1/-1; justify-self:center; color:var(--color-text-sub); font-size:9px; }
.timerex-cell-note.error { color:#c95564; }

.booking-source { display:inline-flex; align-items:center; gap:6px; color:var(--color-text-sub); font-size:11px; margin-top:8px; }
.booking-submit { width:100%; margin-top:8px; justify-content:center; }
.booking-submit:disabled { opacity:.5; cursor:not-allowed; }
.booking-result { display:none; text-align:center; padding:28px 10px; }
.booking-result.show { display:block; }
.booking-result i { font-size:34px; color:#69bb87; margin-bottom:12px; }
.booking-result h2 { margin-bottom:10px; }
.booking-result p { color:var(--color-text-sub); line-height:1.8; font-size:13px; }
.booking-policy { margin-top:16px; padding-top:16px; border-top:1px solid var(--color-border); color:var(--color-text-sub); font-size:11px; line-height:1.75; }
.booking-hp { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; }

@media(max-width:1100px){.booking-grid{grid-template-columns:1fr}.booking-week-scroll{max-height:640px}}
@media(max-width:900px){.booking-page{padding-top:62px}.booking-wrap{padding-top:28px}.booking-card{padding:18px}.booking-form .form-row{grid-template-columns:1fr}.booking-week-nav span{display:none}.booking-week-nav{width:36px;height:36px;justify-content:center;padding:0}.booking-week-scroll{max-height:58vh}.timerex-grid{grid-template-columns:62px repeat(var(--timerex-days),124px);min-width:max-content}.timerex-time-label{padding-right:7px}.timerex-cell{padding:4px;gap:4px}.timerex-slot{font-size:9px;min-height:36px}}
@media(max-width:430px){.booking-hero{padding:38px 0 20px}.booking-card{border-radius:13px;padding:15px}.booking-selection-panel{padding:12px}.booking-week-head{padding:11px 10px;gap:8px}.booking-week-range{font-size:13px}.booking-week-caption{font-size:9px}.booking-week-scroll{max-height:56vh}.timerex-grid{grid-template-columns:58px repeat(var(--timerex-days),116px)}.timerex-corner,.timerex-day-head{min-height:58px}.timerex-time-label,.timerex-cell{min-height:49px}.timerex-slot{padding:5px 3px}.preference-item{padding:9px 10px}.preference-rank{flex-basis:54px}}

/* v0.24: 通常レッスン予約の料金案内 */
.lesson-price-box { max-width:760px; margin:20px auto 0; padding:16px 20px; border:1px solid var(--color-border); border-radius:13px; background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-sm); text-align:left; }
.lesson-price-box strong { display:block; font-size:clamp(16px,2vw,20px); line-height:1.55; }
.lesson-price-box span { display:block; margin-top:5px; color:var(--color-text-sub); font-size:13px; line-height:1.7; }