#booking-package .sun { } #booking-package .mon { } #booking-package .tue { } #booking-package .wed { } #booking-package .thu { } #booking-package .fri { } #booking-package .sat { } #booking-package .nationalHoliday { } #booking-package_calendarPage .dateField { /** background-color: #0f9b79; color: #fff; font-weight: 400; **/ } #booking-package_calendarPage .startDateOfFullRoom { /** background-image: repeating-linear-gradient(270deg, #ff8989 0px 50%, transparent 0% 100%); **/ } #booking-package_calendarPage .dateOfFullRoom { /** background: #ff8989; **/ } #booking-package_calendarPage .endDateOfFullRoom { /** background-image: repeating-linear-gradient(90deg, #ff8989 0px 50%, transparent 0% 100%); **/ } /* Untitled Surf — Booking Package ブランドリスキン v5 */ [id^="booking-package"] { --paper:#ece8e0; --paper-2:#f6f3ec; --wash:#e6e2d9; --ink:#191813; --muted:#6f6b60; --line:#d4cec2; --line-soft:#e2ddd2; --teal:#1e5a56; --teal-2:#2c7a73; --teal-deep:#143f3c; --radius:3px; font-family:"Hanken Grotesk","Zen Kaku Gothic New",sans-serif !important; color:var(--ink) !important; box-sizing:border-box; } [id^="booking-package"] * { box-sizing:border-box; } #booking-package { max-width:940px; margin:1.5rem auto 0 !important; } [id^="booking-package"] a { color:var(--teal) !important; text-decoration:none; } [id^="booking-package"] a:hover { text-decoration:underline; } [id^="booking-package"] a:focus-visible, [id^="booking-package"] button:focus-visible, [id^="booking-package"] input:focus-visible, [id^="booking-package"] select:focus-visible { outline:2px solid var(--teal); outline-offset:2px; } /* 月カレンダー */ #booking-package_calendarPage .calendarHeader { display:flex; align-items:center; justify-content:space-between; margin:0 0 .9rem; padding:0 .1rem .7rem; border-bottom:1px solid var(--line); } #booking-package_calendarPage .arrowLeft, #booking-package_calendarPage .arrowRight { display:flex; align-items:center; gap:.1rem; font-family:"Space Mono",monospace !important; font-size:.8rem; color:var(--muted) !important; cursor:pointer; transition:color .2s ease; } #booking-package_calendarPage .arrowLeft:hover, #booking-package_calendarPage .arrowRight:hover { color:var(--teal) !important; } #current_date_in_header { font-family:"Space Mono",monospace !important; font-weight:700; letter-spacing:.08em; font-size:1rem; color:var(--ink) !important; background:none !important; } #booking-package_calendarPage .calendar { display:grid !important; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } #booking-package_calendarPage .week_slot { background:var(--paper-2); color:var(--muted) !important; font-family:"Zen Kaku Gothic New",sans-serif !important; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-align:center; padding:.55rem 0; } #booking-package_calendarPage .week_slot.sun { color:#a2564f !important; } #booking-package_calendarPage .week_slot.sat { color:var(--teal-2) !important; } #booking-package_calendarPage .day_slot { background:#fff; min-width:0; min-height:82px; padding:.5rem .55rem; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; transition:background .18s ease; } #booking-package_calendarPage .dateField { font-family:"Hanken Grotesk",sans-serif !important; font-size:.95rem; font-weight:600; line-height:1; color:var(--ink) !important; } #booking-package_calendarPage .numberInsteadOfSymbols { margin-top:auto; font-family:"Space Mono",monospace !important; font-size:.74rem; font-weight:700; color:var(--teal) !important; letter-spacing:.01em; white-space:nowrap; } #booking-package_calendarPage .numberInsteadOfSymbols::before { content:"残り"; margin-right:.15rem; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:500; font-size:.64rem; color:var(--muted); } #booking-package_calendarPage .available_day { cursor:pointer; } #booking-package_calendarPage .available_day:hover { background:var(--wash) !important; } #booking-package_calendarPage .available_day:hover .dateField { color:var(--teal-deep) !important; } #booking-package_calendarPage .pastDay { background:var(--paper-2); } #booking-package_calendarPage .pastDay .dateField { color:#c3bdb1 !important; font-weight:500; } #booking-package_calendarPage .today .dateField { color:var(--teal) !important; font-weight:800; border-bottom:2px solid var(--teal); padding-bottom:2px; } /* スケジュール画面（縦積み全幅） */ #booking-package_schedulePage { position:relative; } #booking-package_schedulePage #topPanel { display:flex; justify-content:center; align-items:center; margin:0 0 1.1rem; } #booking-package_schedulePage #selectedDate { font-family:"Space Mono",monospace !important; font-weight:700; letter-spacing:.06em; font-size:1rem; color:var(--ink) !important; } #booking-package_schedulePage #courseMainPanel, #booking-package_schedulePage #scheduleMainPanel, #booking-package_schedulePage #daysListPanel, #booking-package_schedulePage #optionsMainPanel { position:static !important; width:100% !important; max-width:100% !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; height:auto !important; margin:0 0 .9rem !important; box-shadow:none !important; } #booking-package_schedulePage .selectable_service_slot { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; background:var(--paper-2) !important; border:1px solid var(--line) !important; border-radius:var(--radius); padding:1rem 1.2rem !important; margin:0 !important; } #booking-package_schedulePage .service_name_cost { flex:1 1 auto; font-family:"Zen Kaku Gothic New",sans-serif !important; font-weight:700; font-size:1.05rem; } #booking-package_schedulePage .serviceCost { font-family:"Space Mono",monospace !important; color:var(--teal) !important; font-weight:700; font-size:1.05rem; } #booking-package_schedulePage .descriptionOfService { flex-basis:100%; color:var(--muted) !important; font-size:.85rem; margin-top:.1rem; } #booking-package_schedulePage #scheduleMainPanel { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; } #booking-package_schedulePage .selectable_time_slot { display:flex; align-items:center; justify-content:center; gap:.4rem; padding:1.05rem 1rem !important; margin:0 !important; border:1.5px solid var(--line) !important; border-radius:var(--radius); background:#fff; font-family:"Space Mono",monospace !important; font-size:1.15rem; letter-spacing:.02em; color:var(--ink) !important; cursor:pointer; transition:background .18s ease, border-color .18s ease, transform .18s ease; } #booking-package_schedulePage .selectable_time_slot:hover { background:var(--wash) !important; border-color:var(--teal) !important; transform:translateY(-1px); } #booking-package_schedulePage .selectable_time_slot.selected_time_slot, #booking-package_schedulePage .selectedTimeSlotPanel { background:var(--teal) !important; color:#fff !important; border-color:var(--teal) !important; } #booking-package_schedulePage #daysListPanel { display:flex !important; flex-wrap:wrap; gap:.4rem; } #booking-package_schedulePage .selectable_day_slot { display:flex; flex-direction:column; align-items:center; gap:.1rem; min-width:54px; padding:.5rem .3rem; border:1px solid var(--line) !important; border-radius:var(--radius); background:#fff; cursor:pointer; font-family:"Hanken Grotesk",sans-serif !important; transition:background .15s ease, border-color .15s ease; } #booking-package_schedulePage .selectable_day_slot .weekPanel { font-size:.68rem; color:var(--muted) !important; } #booking-package_schedulePage .selectable_day_slot:hover { border-color:var(--teal) !important; background:var(--wash); } #booking-package_schedulePage .selectable_day_slot.selected_day_slot { background:var(--teal) !important; color:#fff !important; border-color:var(--teal) !important; } #booking-package_schedulePage .selectable_day_slot.selected_day_slot .weekPanel { color:#d7e6e3 !important; } #booking-package_schedulePage .selectable_day_slot.closed { opacity:.45; cursor:default; } #booking-package_schedulePage #bottomPanel { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.3rem; } /* 入力フォーム */ #booking-package_inputFormPanel { max-width:620px; margin:0 auto; } #reservationHeader.title_in_form { font-family:"Zen Kaku Gothic New",sans-serif !important; font-weight:700; font-size:1.15rem; text-align:center; color:var(--ink) !important; margin:0 0 1.2rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); } #booking-package_inputFormPanel .row { margin:0 0 .9rem; } #booking-package_inputFormPanel .row .name { font-family:"Zen Kaku Gothic New",sans-serif !important; font-weight:700; font-size:.85rem; color:var(--ink) !important; margin-bottom:.3rem; } #booking-package_inputFormPanel .row .name.required:after, [id^="booking-package"] .required:after, [id^="booking-package"] .indispensableLabel:after { content:" *"; color:var(--teal) !important; font-weight:700; } #booking-package_inputFormPanel .row .value { color:var(--ink) !important; } #booking-package_inputFormPanel .row:has(.bookingDate), #booking-package_inputFormPanel .row:has(#booking_package_selectedServicesPanel), #booking-package_inputFormPanel .row.total_amount { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:0; padding:.7rem 1rem; background:var(--paper-2); border-left:2px solid var(--teal); border-bottom:1px solid var(--line-soft); } #booking-package_inputFormPanel .row:has(.bookingDate) { border-radius:var(--radius) var(--radius) 0 0; } #booking-package_inputFormPanel .row.total_amount { border-radius:0 0 var(--radius) var(--radius); border-bottom:0; margin-bottom:1.4rem; } #booking-package_inputFormPanel .row:has(.bookingDate) .name, #booking-package_inputFormPanel .row:has(#booking_package_selectedServicesPanel) .name, #booking-package_inputFormPanel .row.total_amount .name { margin:0; color:var(--muted) !important; font-size:.8rem; } #booking-package_inputFormPanel .bookingDate, #booking-package_inputFormPanel .bookingTime { font-family:"Space Mono",monospace !important; font-size:.95rem; } #booking-package_inputFormPanel .addedService { display:flex; gap:.6rem; align-items:baseline; } #booking-package_inputFormPanel .addedService .serviceName { font-family:"Zen Kaku Gothic New",sans-serif !important; font-weight:700; } #booking-package_inputFormPanel .row.total_amount .value { font-family:"Space Mono",monospace !important; font-weight:700; font-size:1.15rem; color:var(--teal) !important; } #booking-package_inputFormPanel .form_text, #booking-package_inputFormPanel .form_select, #booking-package_inputFormPanel .form_textarea, #booking-package_inputFormPanel input[type="text"], #booking-package_inputFormPanel select, #booking-package_inputFormPanel textarea { display:block !important; width:100% !important; height:auto !important; min-height:46px; margin:0 !important; padding:.62rem .8rem !important; line-height:1.4 !important; font-family:"Zen Kaku Gothic New","Hanken Grotesk",sans-serif !important; font-size:1rem !important; color:var(--ink) !important; background-color:#fff !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:none !important; transition:border-color .18s ease, box-shadow .18s ease; } #booking-package_inputFormPanel .form_select, #booking-package_inputFormPanel select { -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; padding-right:2.2rem !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f6b60' stroke-width='1.6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right .85rem center !important; background-size:12px 8px !important; } #booking-package_inputFormPanel .form_textarea, #booking-package_inputFormPanel textarea { min-height:100px !important; resize:vertical; } #booking-package_inputFormPanel .form_text:focus, #booking-package_inputFormPanel .form_select:focus, #booking-package_inputFormPanel .form_textarea:focus, #booking-package_inputFormPanel input:focus, #booking-package_inputFormPanel select:focus, #booking-package_inputFormPanel textarea:focus { outline:none !important; border-color:var(--teal) !important; box-shadow:0 0 0 3px rgba(30,90,86,.14) !important; } #booking_package_input_terms label { display:inline-flex; align-items:center; gap:.5rem; font-weight:500; } #booking-package_inputFormPanel .form_checkbox { width:18px !important; height:18px; min-height:0 !important; accent-color:var(--teal); } /* ボタン */ [id^="booking-package"] .book_now_button, [id^="booking-package"] .select_date_button, [id^="booking-package"] .next_button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:13px 26px !important; font-family:"Hanken Grotesk","Zen Kaku Gothic New",sans-serif !important; font-size:13px !important; font-weight:700; letter-spacing:.04em; line-height:1.1; color:#fff !important; background:var(--teal) !important; border:1.5px solid var(--teal) !important; border-radius:var(--radius) !important; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } [id^="booking-package"] .book_now_button:hover, [id^="booking-package"] .select_date_button:hover, [id^="booking-package"] .next_button:hover { background:var(--teal-deep) !important; border-color:var(--teal-deep) !important; transform:translateY(-1px); } #booking-package_pay_locally { display:block; } #booking-package_pay_locally .book_now_button { width:100%; margin-top:.4rem; } [id^="booking-package"] .return_button, [id^="booking-package"] .return_form_button, [id^="booking-package"] .previous_available_day_button, [id^="booking-package"] .next_available_day_button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 20px !important; font-family:"Hanken Grotesk","Zen Kaku Gothic New",sans-serif !important; font-size:13px !important; font-weight:700; letter-spacing:.04em; line-height:1.1; color:var(--ink) !important; background:transparent !important; border:1.5px solid var(--ink) !important; border-radius:var(--radius) !important; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } [id^="booking-package"] .return_button:hover, [id^="booking-package"] .return_form_button:hover, [id^="booking-package"] .previous_available_day_button:hover, [id^="booking-package"] .next_available_day_button:hover { background:var(--ink) !important; color:#fff !important; transform:translateY(-1px); } #nextAndReturnPanel { margin-top:.6rem; } /* メッセージ・エラー */ [id^="booking-package"] .messagePanel { padding:.8rem 1rem !important; border-radius:var(--radius); background:var(--paper-2) !important; color:var(--ink) !important; } [id^="booking-package"] .errorPanel { padding:.8rem 1rem !important; border-radius:var(--radius); background:#f6ecec !important; color:#a23b3b !important; border:1px solid #e6cccc !important; } /* モバイル */ @media (max-width:640px) { [id^="booking-package"] { font-size:15px; } #booking-package { margin-top:1rem !important; } #booking-package_calendarPage .day_slot { min-height:60px; padding:.35rem .3rem; } #booking-package_calendarPage .dateField { font-size:.82rem; } #booking-package_calendarPage .numberInsteadOfSymbols { font-size:.64rem; } #booking-package_calendarPage .numberInsteadOfSymbols::before { content:""; margin:0; } #booking-package_schedulePage #scheduleMainPanel { grid-template-columns:1fr 1fr; } #booking-package_schedulePage .selectable_time_slot { font-size:1.05rem; padding:.9rem .6rem !important; } } /* v5.1: 時間選択画面では日付リストを隠す（本来の非表示に戻す） */ #booking-package_schedulePage #daysListPanel.hidden_panel { display: none !important; } /* v5.2: 日付リストは常に非表示（カレンダーで選択済みのため再選択不要） */ #booking-package_schedulePage #daysListPanel { display: none !important; } /* v5.3: 日付ジャンプ（日12/金10）を撤去＋戻るをカレンダー直帰に一本化 */ #booking-package_schedulePage #returnToDayListButton, #booking-package_schedulePage #previous_available_day_button, #booking-package_schedulePage #next_available_day_button { display: none !important; } #booking-package_schedulePage #returnToCalendarButton { display: inline-flex !important; }