/* ================================================== Booking Package 予約者情報入力フォーム ================================================== */ /* -------------------------------------------------- 基本カラー -------------------------------------------------- */ #booking-package_inputFormPanel { --bp-primary: #173c66; --bp-primary-hover: #0f2d4f; --bp-text: #202733; --bp-subtext: #667085; --bp-border: #cbd5e1; --bp-line: #e1e5ea; --bp-input-bg: #f2f5f8; --bp-required: #d92d20; width: 100%; max-width: 780px; margin: 30px auto; padding: 34px 42px 30px; background: #fff; border: 1px solid #e1e6ec; border-radius: 14px; box-shadow: 0 12px 36px rgba(25, 40, 60, 0.08); color: var(--bp-text); } #booking-package_inputFormPanel, #booking-package_inputFormPanel * { box-sizing: border-box; } /* ================================================== タイトル ================================================== */ /* * 元の「個人情報を入力してください」を画面上で非表示にし、 * 新しいタイトルを表示します。 */ #booking-package_inputFormPanel #reservationHeader { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 0 17px !important; border-bottom: 1px solid #d9dee5 !important; color: var(--bp-text) !important; font-size: 0 !important; font-weight: 400 !important; line-height: 1 !important; text-align: center !important; } #booking-package_inputFormPanel #reservationHeader::before { content: "ご予約者情報の入力"; display: block; color: var(--bp-text); font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; } #booking-package_inputFormPanel #reservationHeader::after { content: "ご予約に必要な情報をご入力ください"; display: block; margin-top: 4px; color: var(--bp-subtext); font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: 0; } /* ================================================== 各入力項目 ================================================== */ /* * WordPressテーマ側の.rowや.form-rowとの競合を防止 */ #booking-package_inputFormPanel .row, #booking-package_inputFormPanel .form-row { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 12px 0 !important; border-bottom: 1px solid var(--bp-line) !important; } /* 項目名 */ #booking-package_inputFormPanel .name, #booking-package_inputFormPanel label { display: block; width: 100%; margin: 0 0 6px !important; padding: 0 !important; color: var(--bp-text) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.5; letter-spacing: 0; } /* 日時・金額など、入力欄ではない値 */ #booking-package_inputFormPanel .value { margin: 0 !important; padding: 0 !important; color: var(--bp-text); font-size: 16px; line-height: 1.6; } /* ================================================== 入力欄 ================================================== */ #booking-package_inputFormPanel input[type="text"], #booking-package_inputFormPanel input[type="email"], #booking-package_inputFormPanel input[type="tel"], #booking-package_inputFormPanel input[type="number"], #booking-package_inputFormPanel input[type="password"], #booking-package_inputFormPanel input[type="url"], #booking-package_inputFormPanel input[type="date"], #booking-package_inputFormPanel input[type="time"], #booking-package_inputFormPanel select, #booking-package_inputFormPanel textarea { display: block !important; width: 100% !important; max-width: none !important; min-height: 46px !important; margin: 0 !important; padding: 9px 13px !important; appearance: none; -webkit-appearance: none; background: var(--bp-input-bg) !important; border: 1px solid var(--bp-border) !important; border-radius: 7px !important; color: var(--bp-text) !important; font-family: inherit !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.03) !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* 入力中 */ #booking-package_inputFormPanel input[type="text"]:focus, #booking-package_inputFormPanel input[type="email"]:focus, #booking-package_inputFormPanel input[type="tel"]:focus, #booking-package_inputFormPanel input[type="number"]:focus, #booking-package_inputFormPanel input[type="password"]:focus, #booking-package_inputFormPanel input[type="url"]:focus, #booking-package_inputFormPanel input[type="date"]:focus, #booking-package_inputFormPanel input[type="time"]:focus, #booking-package_inputFormPanel select:focus, #booking-package_inputFormPanel textarea:focus { background: #fff !important; border-color: var(--bp-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(23, 60, 102, 0.12) !important; } #booking-package_inputFormPanel textarea { min-height: 120px !important; resize: vertical; } /* ================================================== 必須表示 ================================================== */ /* 項目名自体は黒にする */ #booking-package_inputFormPanel .name { color: var(--bp-text) !important; } /* * 赤い「*」を「必須」バッジへ変更 * Booking Package標準のrequired要素を対象にします。 */ #booking-package_inputFormPanel .name .required, #booking-package_inputFormPanel label .required { display: inline-flex !important; align-items: center; justify-content: center; min-width: 34px; height: 19px; margin-left: 7px !important; padding: 0 5px !important; background: var(--bp-required) !important; border-radius: 3px; color: transparent !important; font-size: 0 !important; font-weight: 600 !important; line-height: 1 !important; vertical-align: 2px; } #booking-package_inputFormPanel .name .required::before, #booking-package_inputFormPanel label .required::before { content: "必須"; color: #fff !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; } /* ================================================== チェックボックス ================================================== */ #booking-package_inputFormPanel input[type="checkbox"] { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 0 8px 0 0 !important; padding: 0 !important; border: 1px solid var(--bp-border) !important; border-radius: 3px; background: #fff !important; accent-color: var(--bp-primary); vertical-align: -3px; cursor: pointer; } #booking-package_inputFormPanel input[type="checkbox"] + label { display: inline !important; width: auto !important; margin: 0 !important; color: var(--bp-text) !important; font-size: 15px !important; font-weight: 400 !important; cursor: pointer; } /* ================================================== 予約するボタン ================================================== */ #booking-package_inputFormPanel .bookingButton, #booking-package_inputFormPanel #bookingButton, #booking-package_inputFormPanel button, #booking-package_inputFormPanel input[type="button"], #booking-package_inputFormPanel input[type="submit"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 320px !important; min-height: 52px !important; margin: 24px auto 0 !important; padding: 12px 24px !important; appearance: none !important; -webkit-appearance: none !important; background: var(--bp-primary) !important; border: 1px solid var(--bp-primary) !important; border-radius: 7px !important; color: #fff !important; font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.5 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } #booking-package_inputFormPanel .bookingButton:hover, #booking-package_inputFormPanel #bookingButton:hover, #booking-package_inputFormPanel button:hover, #booking-package_inputFormPanel input[type="button"]:hover, #booking-package_inputFormPanel input[type="submit"]:hover { background: var(--bp-primary-hover) !important; border-color: var(--bp-primary-hover) !important; color: #fff !important; transform: translateY(-1px); } /* ================================================== 戻るボタン ================================================== */ #booking-package_inputFormPanel .returnButton, #booking-package_inputFormPanel #returnButton, #booking-package_inputFormPanel .backButton, #booking-package_inputFormPanel #backButton, #booking-package_inputFormPanel [class*="returnButton"], #booking-package_inputFormPanel [id*="returnButton"], #booking-package_inputFormPanel [class*="backButton"], #booking-package_inputFormPanel [id*="backButton"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 320px !important; min-height: 46px !important; margin: 10px auto 0 !important; padding: 10px 20px !important; background: #fff !important; border: 1px solid var(--bp-border) !important; border-radius: 7px !important; color: var(--bp-text) !important; font-size: 15px !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transform: none !important; } #booking-package_inputFormPanel .returnButton:hover, #booking-package_inputFormPanel #returnButton:hover, #booking-package_inputFormPanel .backButton:hover, #booking-package_inputFormPanel #backButton:hover, #booking-package_inputFormPanel [class*="returnButton"]:hover, #booking-package_inputFormPanel [id*="returnButton"]:hover, #booking-package_inputFormPanel [class*="backButton"]:hover, #booking-package_inputFormPanel [id*="backButton"]:hover { background: #f3f5f7 !important; border-color: #aeb8c4 !important; color: var(--bp-primary) !important; transform: none !important; } /* ================================================== エラー表示 ================================================== */ #booking-package_inputFormPanel .error, #booking-package_inputFormPanel .errorMessage, #booking-package_inputFormPanel .inputError { margin-top: 6px; color: #d92d20 !important; font-size: 13px !important; font-weight: 400; line-height: 1.5; } /* ================================================== スマートフォン ================================================== */ @media screen and (max-width: 767px) { #booking-package_inputFormPanel { margin: 20px auto; padding: 25px 18px 24px; border-radius: 10px; } #booking-package_inputFormPanel #reservationHeader { padding-bottom: 14px !important; } #booking-package_inputFormPanel #reservationHeader::before { font-size: 21px; } #booking-package_inputFormPanel #reservationHeader::after { margin-top: 3px; font-size: 12px; } #booking-package_inputFormPanel .row, #booking-package_inputFormPanel .form-row { padding: 11px 0 !important; } #booking-package_inputFormPanel input[type="text"], #booking-package_inputFormPanel input[type="email"], #booking-package_inputFormPanel input[type="tel"], #booking-package_inputFormPanel input[type="number"], #booking-package_inputFormPanel input[type="password"], #booking-package_inputFormPanel input[type="url"], #booking-package_inputFormPanel input[type="date"], #booking-package_inputFormPanel input[type="time"], #booking-package_inputFormPanel select, #booking-package_inputFormPanel textarea { min-height: 46px !important; font-size: 16px !important; } #booking-package_inputFormPanel .bookingButton, #booking-package_inputFormPanel #bookingButton, #booking-package_inputFormPanel button, #booking-package_inputFormPanel input[type="button"], #booking-package_inputFormPanel input[type="submit"], #booking-package_inputFormPanel .returnButton, #booking-package_inputFormPanel #returnButton, #booking-package_inputFormPanel .backButton, #booking-package_inputFormPanel #backButton { max-width: none !important; } } /* ================================================== Booking Package 入力エラー表示 ================================================== */ /* * Booking Packageは未入力項目のrowに * error_empty_valueクラスを追加する */ /* ピンク色の行背景を解除 */ #booking-package_inputFormPanel .row.error_empty_value, #booking-package_inputFormPanel .form-row.error_empty_value, #booking-package_inputFormPanel .error_empty_value { background-color: transparent !important; background-image: none !important; } /* エラー行 */ #booking-package_inputFormPanel .row.error_empty_value, #booking-package_inputFormPanel .form-row.error_empty_value { position: relative; padding-bottom: 32px !important; } /* エラー時の項目名 */ #booking-package_inputFormPanel .row.error_empty_value .name, #booking-package_inputFormPanel .form-row.error_empty_value .name { background-color: transparent !important; color: var(--bp-text, #202733) !important; } /* エラー時の入力欄 */ #booking-package_inputFormPanel .row.error_empty_value input:not([type="checkbox"]), #booking-package_inputFormPanel .form-row.error_empty_value input:not([type="checkbox"]), #booking-package_inputFormPanel .row.error_empty_value select, #booking-package_inputFormPanel .form-row.error_empty_value select, #booking-package_inputFormPanel .row.error_empty_value textarea, #booking-package_inputFormPanel .form-row.error_empty_value textarea { background-color: #fff8f8 !important; border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08) !important; } /* エラー入力欄のフォーカス */ #booking-package_inputFormPanel .row.error_empty_value input:not([type="checkbox"]):focus, #booking-package_inputFormPanel .form-row.error_empty_value input:not([type="checkbox"]):focus, #booking-package_inputFormPanel .row.error_empty_value select:focus, #booking-package_inputFormPanel .form-row.error_empty_value select:focus, #booking-package_inputFormPanel .row.error_empty_value textarea:focus, #booking-package_inputFormPanel .form-row.error_empty_value textarea:focus { background-color: #fff !important; border-color: #dc2626 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important; } /* エラーメッセージ */ #booking-package_inputFormPanel .row.error_empty_value::after, #booking-package_inputFormPanel .form-row.error_empty_value::after { content: "この項目を入力してください"; position: absolute; left: 0; bottom: 9px; display: block; color: #dc2626; font-size: 12px; font-weight: 500; line-height: 1.5; } /* チェックボックスのエラー */ #booking-package_inputFormPanel .row.error_empty_value input[type="checkbox"], #booking-package_inputFormPanel .form-row.error_empty_value input[type="checkbox"] { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important; } /* ================================================== Booking Package 時間選択画面・競合回避版 ================================================== */ /* -------------------------------------------------- 画面全体 プラグイン内部の横幅・行高・罫線には触れない -------------------------------------------------- */ #booking-package_schedulePage { --bp-primary: #173c66; --bp-primary-hover: #0f2d4f; --bp-text: #202733; --bp-subtext: #667085; --bp-line: #d9dee5; width: 100% !important; max-width: none !important; margin: 30px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--bp-text); } /* box-sizingだけ統一 */ #booking-package_schedulePage, #booking-package_schedulePage * { box-sizing: border-box; } /* ================================================== タイトル ================================================== */ #booking-package_schedulePage .selectedDate { position: static !important; float: none !important; clear: both !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; height: auto !important; min-height: 0 !important; /* 下線を消しつつ、時間一覧との間隔は確保 */ margin: 0 0 18px !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: var(--bp-subtext) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; text-align: center !important; } #booking-package_schedulePage .selectedDate::before { content: "ご予約時間の選択"; display: block; margin-bottom: 2px; color: var(--bp-text); font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; } /* ================================================== 日付・時間一覧 ================================================== */ /* * 行高・padding・borderはBooking Package標準に戻す。 * 左右の位置計算をプラグインに任せる。 */ /* 前回指定した罫線を確実に解除 */ #booking-package_schedulePage #daysListPanel .selectable_day_slot, #booking-package_schedulePage #daysListPanel .selected_day_slot, #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot, #booking-package_schedulePage #scheduleMainPanel .selectedTimeSlotPanel { height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; /* * paddingとborderはプラグイン標準値を使うため、 * ここでは指定しない */ } /* * 見出しを疑似要素で追加した分だけ、 * 右側の時間一覧を下へ移動して左の日付一覧と揃える。 */ #booking-package_schedulePage #scheduleMainPanel { margin-top: 32px !important; } /* 時間のホバーだけ変更 */ #booking-package_schedulePage .selectable_time_slot:hover { background-color: #f2f5f8 !important; } /* 選択中 */ #booking-package_schedulePage .selectedTimeSlotPanel, #booking-package_schedulePage .selected_day_slot { background-color: #edf2f7 !important; } /* ================================================== 下部ボタンエリア ================================================== */ #booking-package_schedulePage #bottomPanel { position: static !important; float: none !important; clear: both !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 24px 0 0 !important; padding: 24px 0 0 !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--bp-line) !important; overflow: visible !important; } /* ================================================== 戻るボタン ================================================== */ #booking-package_schedulePage button.return_button:not(.hidden_panel), #booking-package_schedulePage #returnToCalendarButton:not(.hidden_panel), #booking-package_schedulePage #returnToDayListButton:not(.hidden_panel) { display: flex !important; align-items: center !important; justify-content: center !important; float: none !important; width: 100% !important; max-width: 320px !important; min-height: 52px !important; margin: 0 auto !important; padding: 12px 24px !important; appearance: none !important; -webkit-appearance: none !important; background: var(--bp-primary) !important; border: 1px solid var(--bp-primary) !important; border-radius: 7px !important; color: #fff !important; font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.5 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } #booking-package_schedulePage button.return_button:not(.hidden_panel):hover, #booking-package_schedulePage #returnToCalendarButton:not(.hidden_panel):hover, #booking-package_schedulePage #returnToDayListButton:not(.hidden_panel):hover { background: var(--bp-primary-hover) !important; border-color: var(--bp-primary-hover) !important; color: #fff !important; transform: translateY(-1px); } /* ================================================== スマートフォン ================================================== */ @media screen and (max-width: 767px) { #booking-package_schedulePage { margin: 20px 0 !important; } #booking-package_schedulePage .selectedDate { margin-bottom: 16px !important; padding-bottom: 0 !important; font-size: 14px !important; } #booking-package_schedulePage .selectedDate::before { font-size: 21px; } #booking-package_schedulePage #scheduleMainPanel { margin-top: 28px !important; } #booking-package_schedulePage #bottomPanel { margin-top: 20px !important; padding-top: 20px !important; } #booking-package_schedulePage button.return_button:not(.hidden_panel), #booking-package_schedulePage #returnToCalendarButton:not(.hidden_panel), #booking-package_schedulePage #returnToDayListButton:not(.hidden_panel) { max-width: none !important; } } /* ================================================== 時間帯の予約状況 ================================================== */ /* 状態表示分の右余白を確保 */ #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot, #booking-package_schedulePage #scheduleMainPanel .closed, #booking-package_schedulePage #scheduleMainPanel .selectPanelError { position: relative !important; padding-right: 105px !important; } /* -------------------------------------------------- 予約可能 -------------------------------------------------- */ #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot:not(.closed):not(.selectPanelError)::after { content: "予約可能"; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 66px; height: 24px; padding: 0 8px; background: #edf8f2; border: 1px solid #9bcdb1; border-radius: 4px; color: #287548; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; } /* -------------------------------------------------- 予約不可 -------------------------------------------------- */ #booking-package_schedulePage #scheduleMainPanel .closed::after, #booking-package_schedulePage #scheduleMainPanel .selectPanelError::after, #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.closed::after, #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.selectPanelError::after { content: "予約不可"; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 66px; height: 24px; padding: 0 8px; background: #f3f4f6; border: 1px solid #cbd0d6; border-radius: 4px; color: #667085; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; } /* 予約不可枠自体を少し分かりやすくする */ #booking-package_schedulePage #scheduleMainPanel .closed, #booking-package_schedulePage #scheduleMainPanel .selectPanelError { background-color: #fafafa !important; color: #8a929e !important; cursor: not-allowed !important; } /* スマートフォン */ @media screen and (max-width: 767px) { #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot, #booking-package_schedulePage #scheduleMainPanel .closed, #booking-package_schedulePage #scheduleMainPanel .selectPanelError { padding-right: 88px !important; } #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot:not(.closed):not(.selectPanelError)::after, #booking-package_schedulePage #scheduleMainPanel .closed::after, #booking-package_schedulePage #scheduleMainPanel .selectPanelError::after, #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.closed::after, #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.selectPanelError::after { right: 8px; min-width: 60px; height: 22px; padding: 0 6px; font-size: 11px; } } /* ================================================== 最終調整 定休日・予約不可・各ボタン ================================================== */ /* -------------------------------------------------- 1. カレンダーの定休日を土日と同じグレーにする -------------------------------------------------- */ #booking-package #booking-package_calendarPage .holidayPanel, #booking-package #booking-package_calendarPage .closingDay, #booking-package #booking-package_calendarPage .nationalHoliday { background-color: #eee !important; background-image: none !important; color: #3c434a !important; } #booking-package #booking-package_calendarPage .holidayPanel .dateField, #booking-package #booking-package_calendarPage .closingDay .dateField, #booking-package #booking-package_calendarPage .nationalHoliday .dateField { background-color: transparent !important; background-image: none !important; color: #3c434a !important; } /* -------------------------------------------------- 2. 予約不可の時間帯を薄い赤にする -------------------------------------------------- */ #booking-package #booking-package_schedulePage #scheduleMainPanel .closed, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectPanelError, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.closed, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.selectPanelError { background-color: #fff0f0 !important; color: #b42318 !important; cursor: not-allowed !important; } #booking-package #booking-package_schedulePage #scheduleMainPanel .closed::after, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectPanelError::after, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.closed::after, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.selectPanelError::after { background-color: #fde3e3 !important; border-color: #e39a9a !important; color: #b42318 !important; } #booking-package #booking-package_schedulePage #scheduleMainPanel .closed:hover, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectPanelError:hover, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.closed:hover, #booking-package #booking-package_schedulePage #scheduleMainPanel .selectable_time_slot.selectPanelError:hover { background-color: #ffe7e7 !important; color: #b42318 !important; } /* -------------------------------------------------- 3. 予約するボタンを赤にする -------------------------------------------------- */ #booking-package #booking-package_inputFormPanel button.book_now_button, #booking-package #booking-package_inputFormPanel .book_now_button, #booking-package #booking-package_inputFormPanel button[class*="book_now"], #booking-package #booking-package_inputFormPanel button[id*="book_now"], #booking-package #booking-package_inputFormPanel .bookingButton, #booking-package #booking-package_inputFormPanel #bookingButton { background-color: #c8102e !important; border-color: #c8102e !important; color: #fff !important; } #booking-package #booking-package_inputFormPanel button.book_now_button:hover, #booking-package #booking-package_inputFormPanel .book_now_button:hover, #booking-package #booking-package_inputFormPanel button[class*="book_now"]:hover, #booking-package #booking-package_inputFormPanel button[id*="book_now"]:hover, #booking-package #booking-package_inputFormPanel .bookingButton:hover, #booking-package #booking-package_inputFormPanel #bookingButton:hover { background-color: #a80d27 !important; border-color: #a80d27 !important; color: #fff !important; } /* -------------------------------------------------- 4. 戻るボタンを白背景・グレー枠にする -------------------------------------------------- */ /* 入力フォーム */ #booking-package #booking-package_inputFormPanel button.return_form_button, #booking-package #booking-package_inputFormPanel .return_form_button, #booking-package #booking-package_inputFormPanel button[class*="return_form"], #booking-package #booking-package_inputFormPanel button[id*="return_form"], #booking-package #booking-package_inputFormPanel .returnButton, #booking-package #booking-package_inputFormPanel #returnButton, #booking-package #booking-package_inputFormPanel .backButton, #booking-package #booking-package_inputFormPanel #backButton { background-color: #fff !important; border-color: #aeb8c4 !important; color: #344054 !important; } /* 時間選択画面 */ #booking-package #booking-package_schedulePage button.return_button:not(.hidden_panel), #booking-package #booking-package_schedulePage #returnToCalendarButton:not(.hidden_panel), #booking-package #booking-package_schedulePage #returnToDayListButton:not(.hidden_panel) { background-color: #fff !important; border-color: #aeb8c4 !important; color: #344054 !important; } /* 戻るボタンのホバー */ #booking-package #booking-package_inputFormPanel button.return_form_button:hover, #booking-package #booking-package_inputFormPanel .return_form_button:hover, #booking-package #booking-package_inputFormPanel button[class*="return_form"]:hover, #booking-package #booking-package_inputFormPanel button[id*="return_form"]:hover, #booking-package #booking-package_inputFormPanel .returnButton:hover, #booking-package #booking-package_inputFormPanel #returnButton:hover, #booking-package #booking-package_inputFormPanel .backButton:hover, #booking-package #booking-package_inputFormPanel #backButton:hover, #booking-package #booking-package_schedulePage button.return_button:not(.hidden_panel):hover, #booking-package #booking-package_schedulePage #returnToCalendarButton:not(.hidden_panel):hover, #booking-package #booking-package_schedulePage #returnToDayListButton:not(.hidden_panel):hover { background-color: #f2f4f7 !important; border-color: #98a2b3 !important; color: #173c66 !important; transform: none !important; }