@charset "UTF-8";

/* ==========================================================================
   1. リセットCSS & 全体設定（統合・最適化）
   ========================================================================== */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-height: 100vh;
  font-family: "helvetica-lt-pro", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
  -webkit-font-smoothing: antialiased;
  background: #fff;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    font-size: 100%;
    line-height: 1;
}


/* 画面幅が 767px 以下のデバイス（スマホ）にのみ適用 */
@media screen and (max-width: 767px) {
  .br2::before {
  content: "\A";
  white-space: pre;}
  
  .title span {
	margin-bottom:0px;}
  
  .none {
  	display:none;}
  
  
}
/* ==========================================================================
   2. 予約フォーム全体
   ========================================================================== */
#form {
    width: 95%;
    margin: 15px auto; /* 上下15px、左右中央 */}


/* 2. 画面が768px以上（PCなど）のときだけ上書きする */
@media (min-width: 768px) {
    #form {
        width: 80%;
        margin-top: 30px;
        margin-bottom: 0;
        float: none;
    }

#form p, #form h1 {
    text-align: center;}

#form h1 {
	font-size:1.5em;
	line-height:1.6em;}

#form p {
	line-height:1.6em;
	margin:15px auto;}

#booking-package .day_slot {
    min-height: 80px !important;
}

#booking-package .day_slot.available_day .symbolPanel.material-icons {
    color: #dafe3a !important;
    font-size: 2em !important;
}

#booking-package .dateField {
    font-family: helvetica-lt-pro, sans-serif !important; /* 不要なセミコロンを修正 */
}

/* 予約が埋まっている時間帯（赤字）の色をグレーに変更 */
#booking-package .schedulePage .closed,
#booking-package .schedulePage .closed span,
#booking-package .closed {
    color: #dcdcdc !important;
}


#form .back {
	display:block;
	margin:15px auto;
	text-align:center;}

/* ==========================================================================
   3. ボタンのカスタマイズ（中央寄せ配置）
   ========================================================================== */
/* 「予約する」ボタン */
#booking-package_inputFormPanel .book_now_button,
#booking-package_inputFormPanel .next_page_button,
#booking-package button.book_now_button {
    background-color: #0d234d !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 16px 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    width: 60% !important;
    margin: 15px auto !important;
    display: block !important;
}

#booking-package_inputFormPanel .book_now_button:hover,
#booking-package button.book_now_button:hover {
    background-color: #163673 !important;
    opacity: 0.9 !important;
}

/* 「戻る」ボタン */
#booking-package_inputFormPanel .return_form_button,
#booking-package button.return_form_button,
#returnToSchedules button,
#returnToSchedules .return_form_button {
    background-color: #ffffff !important;
    color: #0d234d !important;
    border: 1px solid #0d234d !important;
    border-radius: 4px !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
    font-weight: normal !important;
    cursor: pointer !important;
    width: 60% !important;
    margin: 15px auto !important;
    display: block !important;
}

#booking-package_inputFormPanel .return_form_button:hover,
#booking-package button.return_form_button:hover,
#returnToSchedules button:hover {
    background-color: #f4f6f9 !important;
}



/* Booking Package の月移動ボタンを強制的に最前面に表示 */
.pab-calendar-box button.pab-month-next,
.pab-calendar-box button.pab-month-prev,
.pab-header-calendar button.pab-month-next,
.pab-header-calendar button.pab-month-prev,
.pab-month-next,
.pab-month-prev {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 99999 !important;
}

/* ボタンのアイコン（矢印）が消えている場合の対策（文字を強制表示） */
.pab-month-next::after {
    content: " ＞" !important;
    color: #333 !important;
    font-weight: bold !important;
}
.pab-month-prev::before {
    content: "＜ " !important;
    color: #333 !important;
    font-weight: bold !important;
}