/* =========================================
   Booking Package 個別予約ページ 共通CSS
   RESERVA風カレンダー
   各メニュー専用ページ用
========================================= */


/* =========================================
   1. Booking Package全体
========================================= */

#booking-package {
  max-width: 860px;
  margin: 0 auto;
  color: #111827;
  font-size: 14px;
  line-height: 1.8;
  box-sizing: border-box;
}

#booking-package * {
  box-sizing: border-box;
}


/* =========================================
   2. サービス選択画面
   ※ services=1 などを使うため、無理に非表示にしない
========================================= */

#booking-package_servicePage {
  max-width: 860px;
  margin: 0 auto;
  color: #111827;
}


/* =========================================
   3. カレンダー全体
========================================= */

#booking-package_calendarPage {
  max-width: 860px;
  margin: 0 auto;
  color: #111827;
}


/* カレンダー見出し */
#booking-package_calendarPage h1,
#booking-package_calendarPage h2,
#booking-package_calendarPage h3 {
  color: #111827;
  font-weight: 700;
}


/* =========================================
   4. カレンダー表
========================================= */

#booking-package_calendarPage table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  background: #ffffff;
}


/* 曜日・日付セル */
#booking-package_calendarPage th,
#booking-package_calendarPage td {
  border: none;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
  padding: 13px 6px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
}


/* 曜日 */
#booking-package_calendarPage th {
  font-weight: 700;
  border-bottom: 1px solid #9ca3af;
}


/* 日付 */
#booking-package_calendarPage .dateField {
  color: #111827;
  font-weight: 500;
  font-size: 14px;
}


/* 日曜日 */
#booking-package .sun {
  color: #dc2626 !important;
}


/* 土曜日 */
#booking-package .sat {
  color: #2563eb !important;
}


/* 祝日 */
#booking-package .nationalHoliday {
  color: #dc2626 !important;
}


/* =========================================
   5. 予約不可・満室表示
========================================= */

#booking-package_calendarPage .dateOfFullRoom,
#booking-package_calendarPage .startDateOfFullRoom,
#booking-package_calendarPage .endDateOfFullRoom {
  background: #ffffff !important;
  color: #d1d5db !important;
}


/* ×や○など */
#booking-package_calendarPage td * {
  font-weight: 500;
}


/* =========================================
   6. 入力フォーム・予約詳細画面
========================================= */

#booking-package_inputFormPanel,
#booking-package_myBookingDetails {
  max-width: 860px;
  margin: 0 auto;
}

#booking-package input[type="text"],
#booking-package input[type="email"],
#booking-package input[type="tel"],
#booking-package textarea,
#booking-package select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  background: #ffffff;
  color: #111827;
  box-sizing: border-box;
}

#booking-package textarea {
  min-height: 90px;
}


/* =========================================
   7. ボタン
========================================= */

#booking-package button,
#booking-package input[type="button"],
#booking-package input[type="submit"],
#booking-package .button {
  background: #14b8a6;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#booking-package button:hover,
#booking-package input[type="button"]:hover,
#booking-package input[type="submit"]:hover,
#booking-package .button:hover {
  background: #0f766e;
}


/* 戻るボタン */
#booking-package .returnButton,
#booking-package .backButton {
  background: #14b8a6;
  color: #ffffff;
}


/* =========================================
   8. スマホ・iPhone調整
========================================= */

@media (max-width: 767px) {

  #booking-package {
    max-width: 100%;
    font-size: 13px;
  }

  #booking-package_servicePage,
  #booking-package_calendarPage,
  #booking-package_inputFormPanel,
  #booking-package_myBookingDetails {
    max-width: 100%;
  }

  #booking-package_calendarPage th,
  #booking-package_calendarPage td {
    padding: 11px 3px;
    font-size: 13px;
  }

  #booking-package button,
  #booking-package input[type="button"],
  #booking-package input[type="submit"],
  #booking-package .button {
    width: 100%;
    padding: 12px 16px;
  }
}

/* =========================================
   Booking Package
   スマホ入力欄タップ時の自動拡大対策
========================================= */
@media (max-width: 768px) {

  #booking-package input,
  #booking-package textarea,
  #booking-package select,
  .booking-package input,
  .booking-package textarea,
  .booking-package select,
  [id*="booking-package"] input,
  [id*="booking-package"] textarea,
  [id*="booking-package"] select,
  [class*="booking-package"] input,
  [class*="booking-package"] textarea,
  [class*="booking-package"] select {
    font-size: 16px !important;
    line-height: 1.6 !important;
    min-height: 44px !important;
    -webkit-text-size-adjust: 100% !important;
  }

}