#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%);
    **/
}
#booking-package_schedulePage .closed {
    color: #CCC;
}
@media only screen and (min-width:768px){
    #booking-package_inputFormPanel .row {
        display: flex;
		padding: 1.5em 0 !important;
    }
	#booking-package_inputFormPanel .row .value {
        width: 100%;
    }
    #booking-package_inputFormPanel .row .name {
        width: 28rem;
    }
}
.cartPanel,.bottomBarPanel {
    text-align: center;
}
.reserve-calendar {
	display: block;
	max-width: 75rem;
	margin: 0 auto;
}
#booking-package input[type=text], #booking-package textarea, #booking-package-user-form input[type=text], #booking-package-user-form input[type=password], #booking-package-user-form textarea, #booking-package-loginform input[type=text], #booking-package-loginform input[type=password], #booking-package-loginform textarea, #booking-package-user-edit-form input[type=text], #booking-package-user-edit-form input[type=password], #booking-package-user-edit-form textarea {
    border: 1px solid #d6d6d6;
    width: 100%;
}
#booking-package_schedulePage .selectable_day_slot .service_name_cost::after,
#booking-package_schedulePage .selectable_service_slot .service_name_cost::after,
#booking-package_schedulePage .selectable_time_slot .service_name_cost::after,
#booking-package_servicePage .selectable_service_slot .service_name_cost::after {
	display:inline-block;
	content: "時間を選択→";
	font-size: .95em;
	float: right;
	color: #9AC717;
}
#booking-package_schedulePage .courseCostPanel, 
#booking-package_schedulePage .serviceCost,
#booking-package_servicePage .serviceCost {
	display: none;
}
#booking-package_inputFormPanel select, #booking-package-user-form select, #booking-package-user-edit-form select {
	padding-right: 2em;
	background-image: url('https://farm.machiwaku.net/wp/images/arrow_select.svg');
	background-repeat: no-repeat;
	background-size: .75em auto;
	background-position: right .5em center;
}
#booking-package_inputFormPanel .title_in_form {
	padding-bottom: 1.5em !important;
}

@media only screen and (min-width:768px){
	/* ラジオボタンのラップコンテナ */
	#booking_package_input_paymentMethod {
	  display: flex;
	  gap: 16px;
	  margin-top: 10px;
	}
}

/* ラベル全体をボタン風のカードにする */
#booking_package_input_paymentMethod label {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 24px;
  background-color: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  user-select: none;
  font-weight: 600;
  color: #4a4a4a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#booking_package_input_paymentMethod input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.radio_title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio_title::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #b5b5b5;
  border-radius: 50%;
  transition: all 0.25s ease;
  background-color: #fff;
  box-sizing: border-box;
}

/* マウスホバー時の動き */
#booking_package_input_paymentMethod label:hover {
  border-color: #a0aec0;
  transform: translateY(-1px);
}

/* 【重要】ラジオボタンがチェックされた時のスタイル変化 */
#booking_package_input_paymentMethod input[type="radio"]:checked + .radio_title::before {
  border-color: #4f46e5; /* 鮮やかなインディゴブルー */
  background-color: #4f46e5;
  box-shadow: inset 0 0 0 3px #fff; /* 中に白い円を残すデザイン */
}

#booking_package_input_paymentMethod label:has(input[type="radio"]:checked) {
  border-color: #4f46e5;
  background-color: #f5f3ff; /* ほんのり紫がかった背景に */
  color: #4f46e5;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}

/* キーボード操作時のフォーカス対応 */
#booking_package_input_paymentMethod input[type="radio"]:focus-visible + .radio_title::before {
  outline: 2px solid #4f46e5;
  outline-offset: 3px;
}

/* 同意エリア全体のコンテナ */
#booking_package_input_terms {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
}

/* ラベル全体をクリッカブルな大きなエリアにする */
#booking_package_input_terms label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  font-weight: 600;
  color: #374151;
  width: fit-content;
}

/* 本物のチェックボックスは隠す（アクセシビリティ維持） */
#booking_package_input_terms input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* カスタムチェックボックスの枠 */
#booking_package_input_terms .radio_title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px; /* 四角いチェックボックス */
  margin-right: 10px;
  vertical-align: middle;
  transition: all 0.2s ease;
  background-color: #fff;
  box-sizing: border-box;
}

/* ホバー時 */
#booking_package_input_terms label:hover {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

/* 【重要】チェックされた時の動きとデザイン */
#booking_package_input_terms input[type="checkbox"]:checked + .radio_title::before {
  border-color: #2563eb;
  background-color: #2563eb;
  /* 簡易的なチェックマーク（レ点）を白線で表現 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* チェックされたらラベル全体の枠線もアクティブに */
#booking_package_input_terms label:has(input[type="checkbox"]:checked) {
  border-color: #2563eb;
  background-color: #eff6ff;
  color: #1d4ed8;
}

/* キャンセルポリシー（説明文）のスタイリング */
.description {
  margin-top: .5em;
  font-size: 0.95em;
  color: #6b7280;
  line-height: 1.5;
}