/* 適応フォント */
/* font-family: "Zen Old Mincho", serif; */
html {
  font-size: min(calc(10 / 1440 * 100vw), 10px);
}

:root {
  --Zen_Old_Min: "Zen Old Mincho", serif;
}
.reservation_wrapper {
  font-family: var(--Zen_Old_Min);
  color: #202020;
}


/* <!-- 黒背景エリア --> */
.reservation_black_area {
  background-color: #202020;
  color: #fff;
}
.reservation_title_area {
  margin-bottom : 16rem;
  padding-top : 16rem;
}
.reservation_main_title {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
.main_sub_text {
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.6;
}

/* <!-- ヴィラヤ --> */
.section_center{
  width: 112rem;
  margin: 0 auto;

}
.villaya_area {
  margin-bottom: 16rem;
}
.villaya_area_flex {
  display: flex;
  gap: 6rem;
}
.villaya_logo_area {
  width: 12rem;
  height: 2.6rem;
  margin-bottom: 1.6rem;
}
.villaya_logo_title {
  font-size: 3.4rem;
  margin-bottom: 2.4rem;
}
.villaya_sub_title {
  font-size: 2rem;
  margin-bottom: 1.6rem;
  font-weight: 700;
}
.villaya_text {
  font-size: 1.4rem;
  margin-bottom: 3.2rem;
  line-height: 1.8;
}
.villaya_address_flex {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  margin-bottom: 1.1rem;
}
.villaya_addresslogo_wrap {
  width: 1.4rem;
  height: 2rem;
}
.villaya_address_font {
  font-size: 1.4rem;
}
.villaya_iframe_wrap {
  width: 50rem;
  height: 22.8rem;
}
.villaya_iframe{
  width: 100%;
  height: 100%;
}
.villaya_right_area {
  width: 56rem;
  height: 53.3rem;
}

/* <!-- ヤド --> */
.yado_logo_area{
  width: 7rem;
  height: 4.4rem;
  margin-bottom: 1.6rem;
}

/* <!-- ショコラ --> */
.chocolat_logo_area{
  width: 14.6rem;
  height: 3.31rem;
  margin-bottom: 1.6rem;
}
.chocolat_bottom{
  padding-bottom: 24.6rem;
  margin-bottom: 20rem;
}

/* <!-- 白背景エリア --> */
.reservation_white_area {
  width: 100rem;
  margin: 0 auto 15rem;
}
.form_english_title {
  font-size: 1.8rem;
  margin-bottom: 3.2rem;
}
.reservation_form_title {
  font-size: 3.4rem;
  margin-bottom: 1.6rem;
}
.form_sub_title {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}
.form_description {
  font-size: 1.4rem;
  line-height: 1.8;
  margin-bottom: 4.8rem;
}
.form_redfont {
  font-size: 1.4rem;
  font-weight: 500;
  color: #C93900;
  margin-bottom: 1.6rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.form_description_address {
  color: #404040;
  font-weight: 500;
}

/* <!-- form_area --> */
.form_checkbox_font{
  font-weight: 500;
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.form_checkbox_flex {
  display: flex;
  gap: 5rem;
  padding-bottom: 2.4rem;
  border-bottom: 0.1rem solid #404040;
  margin-bottom: 3rem;
}
.wrap_checkbox_flex{
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.checkbox_input {
  width: 1.8rem;
  height: 1.8rem;
}
.checkbox_label_font {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: #404040;
}

/* <!-- grey_area --> */
.form_grey_area {
  background-color: #DDDDDD;
}
.grey_area_center{
  width: 72rem;
  margin: 0 auto 3rem;
  padding: 8rem 0 3rem;
}
.form_greyarea_font {
  display: flex;
  flex-direction: column;
}
.form__font {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
}
.form_red_font{
  font-size: 1.1rem;
  color: #C93900;
  margin-left: 1.2rem;
  font-weight: 500;

}
.form_input_area {
  background-color: #FBFBFB;
  height: 4.5rem;
  padding: 1rem;
  width: 100%;
  font-size: 1.4rem;
}
.form_greyarea_font {
  margin-bottom: 6rem;
}
.tel_area_bottom{
  margin-bottom: 1rem;
}
.tel_font_list {
  list-style-type: none;
  /* list-style-type: disc; */
  list-style-position: inside;
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
  line-height: 1.5;
  font-family: "Zen Kaku Gothic New", sans-serif;
  position: relative;
  padding-left: 1.7rem;
}
.tel_font_list::after{
  content: "";
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background-color: #404040;
  position: absolute;
  left: 0.7rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.tel_font_list p{
  font-weight: 500;
}
/* .tel_list_bottom{
  margin-bottom: 6.4rem;
} */
.font_list_red{
  color: #C93900;
}
.font_list_bottom{
  margin-bottom: 2rem;
}
.days_select_list {
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.days_label_font {
  margin-right: 0.55rem;
  font-size: 1.4rem;
  font-weight: 700;
}
.days_select_font {
  font-size: 1.4rem;
  width: 13rem;
  height: 4.5rem;
  background-color: #FBFBFB;
  padding: 1.2rem 2rem;
  appearance: none;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.person_select_padding{
  width: 10rem;
}
.select_box_flex{
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.times_select_width{
  width: 37.8rem;
}
.days_select_relative{
  position: relative;
}
.days_select_relative::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  margin: auto 0;
  content: "";
  width: 1.2rem;
  height: 0.6rem;
  background-image: url(../images/reservation/vector.png);
  background-repeat: no-repeat;
  background-size: 1.2rem 0.6rem;
}
.form_select_top{
  margin: 6rem 0;
}
.days__font{
  font-size: 1.4rem;
  font-weight: 500;
  width: 37.8rem;
  height: 4.5rem;
  background-color: #FBFBFB;
  padding: 1.2rem 2rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #231815;
}
.days__font span{
  color: #231815;
  font-weight: 500;
}
.textarea_column{
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 6rem;
}
.textarea_height{
  min-height: 23.4rem;
  padding: 1.2rem 2rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
}
/* .textarea_height::placeholder{ */
textarea.wpcf7-form-control.wpcf7-textarea.form_input_area.textarea_height{
  color: #404040;
}
.personally_bottom{
  margin-bottom: 1.3rem;
}
.font_list_wrap{
  margin-bottom: 1.4rem;
}
.personally_check_flex{
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 6rem;
}
.disabled_btn_wrap p{
  display: inline-block;
  position: relative;
  margin-left: 7.5rem;
}
.disabled_btn_wrap p::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24.2rem;
  margin: auto 0;
  content: "";
  width: 1.4rem;
  height: 1.2rem;
  background-image: url(../images/reservation/horizontal_arrow.png);
  background-repeat: no-repeat;
  background-size: 1.4rem 1.2rem;
}

.disabled_btn {
  width: 28rem;
  height: 5.6rem;
  background-color: #404040;
  border-radius: 0.3rem;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  text-align: left;
  padding-left: 2.4rem;
  font-size: 1.6rem;
  font-weight: 500;
}
.disabled_btn:hover {
  background-color: rgba(64, 64, 64, 0.6);
}
/* .disabled_btn::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2rem;
  margin: auto 0;
  content: "";
  width: 1.4rem;
  height: 1.2rem;
  background-image: url(../images/reservation/horizontal_arrow.png);
  background-repeat: no-repeat;
  background-size: 1.4rem 1.2rem;
} */
.form_small_font {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
}
.link_small_font {
  font-size: 1rem;
  font-weight: 500;
  color: #0071E3;
}
.reservation_under_font {
  font-size: 1.4rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #404040;
}
.form_select_flex{
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
.disabled_btn_wrap{
  text-align: center;
  margin-bottom: 8rem;
}
.here_link{
  font-weight: 500;
}
.list_position_top::after{
  top: 0.9rem;
  bottom: auto;
}

.sp_only{
  display: none;
}

/* チェックデザイン変更 */
form input {
  display: inline-block;
  /* margin-right: 8px; */
  /* transform: scale(1.5); */
  accent-color: #fff;
  
}
input[type="checkbox"]:checked + span::before {
  background-image: url(../images/reservation/horizontal_arrow.png);
  /* background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='%230bd' stroke-width='3' points='2,7.3 7.3,12.7 18,2 '/%3E%3C/svg%3E"); */
  background-repeat: no-repeat;
  background-position: 0 2px;
}


/* フェードイン */
.fadeIn {
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  opacity: 1;
}

/* チェックボックス */
.wpcf7-list-item{
  margin: 0;
}
.form_check_box {
  cursor: pointer;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: #404040;
}
/* .form_checkbox_area{
  } */
span.wpcf7-form-control.wpcf7-checkbox.form_checkbox_area.fadeIn.animated {
  /* width: 100%; */
  padding-bottom: 2.4rem;
  border-bottom: 0.1rem solid #404040;
  margin-bottom: 3rem;
  display: flex;
  gap: 5rem;
}
.check_text{
  font-size: 1.6rem;
  display: flex;
  align-items: center;
}

/* .form_check_box input {
  display: none;
} */

.form_check_box input + .check_text:before {
  content: "";
  display: inline-block;
  position: relative;
  margin: 0 0.8rem 0 0;
  background-image: none, url(../images/reservation/check_frame.png);
  background-position: top 55% right 50%, 0 0;
  background-repeat: no-repeat, no-repeat;
  width: 1.8rem;
  height: 1.8rem;
  background-size: 100%;
}

.form_check_box input:checked + .check_text:before {
  background-position: top 55% right 80%, 40% 40%;
  background-size: 90% auto, 70%;
  background-image: url(../images/reservation/check_frame.png), url(../images/reservation/check.png);
}

span.wpcf7-list-item-label {
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.6rem;
}

.wpcf7-list-item label {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.wpcf7-list-item label input[type="checkbox"]{
  height: 1.8rem;
  width: 1.8rem;
}

.list_bottom_none{
  margin-bottom: 0;
}

.form_greyarea_bottom0{
  margin-bottom: 0;
}
/* 同意チェックボックス */
.form_check_box {
  cursor: pointer;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: #404040;
}
.form_check_font{
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;
}
/* .form_check_box input {
  display: none;
} */

.form_check_box input + .form_check_font:before {
  content: "";
  display: inline-block;
  position: relative;
  margin: 0 0.8rem 0 0;
  background-image: none, url(../images/reservation/agreement_box.png);
  background-position: top 55% right 50%, 0 0;
  background-repeat: no-repeat, no-repeat;
  width: 1.8rem;
  height: 1.8rem;
  background-size: 100%;
}

.form_check_box input:checked + .form_check_font:before {
  background-position: top 55% right 80%, 40% 40%;
  background-size: 90% auto, 70%;
  background-image: url(../images/reservation/check_frame.png), url(../images/reservation/check.png);
}
.tel_area_short{
  width: 35.9rem;
}

.form_small_font br,.form_check_box br{
  display: none;
}
/* SP */
@media screen and (max-width: 699.98px) {
  html {
    font-size: calc(10 / 375 * 100vw);
    /* 画面幅375pxで10px*/
  }

  /* <!-- 黒背景エリア --> */
  .reservation_title_area {
    padding-top: 12rem;
    margin-bottom: 12rem;
  }
  .reservation_main_title {
    font-size: 3.2rem;
    margin-bottom: 4rem;
  }

  /* <!-- ヴィラヤ --> */
  .section_center{
    width: 100%;
  }
  .villaya_area {
    margin-bottom: 10rem;
  }
  .villaya_area_flex {
    display: flex;
    flex-direction: column-reverse;
    gap: 2.4rem;
  }
  .villaya_black_center{
    width: 33.5rem;
    margin: 0 auto;
  }
  .villaya_logo_title {
    font-size: 2.2rem;
  }
  .villaya_sub_title {
    font-size: 1.8rem;
    gap: 0.8rem;
  }
  .villaya_text {
    margin-bottom: 1.6rem;
  }
  .villaya_address_flex {
    margin-bottom: 1.6rem;
  }
  .villaya_iframe_wrap {
    width: 100%;
    height: 21.1rem;
  }
  .villaya_right_area {
    width: 100%;
    height: 21.1rem;
  }
  .reservation_house_image{
    height: 100%;
    overflow: hidden;
  }

  /* <!-- ヤド --> */

  /* <!-- ショコラ --> */
  .chocolat_bottom{
    padding-bottom: 8.8rem;
    margin-bottom: 6rem;
  }

  /* <!-- 白背景エリア --> */
  .reservation_white_area {
    width: 100%;
    margin: 0 auto 3.2rem;
  }
  .form_information_area {
    width: 33.5rem;
    margin: 0 auto;
  }
  .form_english_title {
    margin-bottom: 1rem;
  }
  .reservation_form_title {
    font-size: 3.2rem;
  }
  .form_sub_title {
    font-size: 1.8rem;
  }
  .form_description {
    margin-bottom: 3.2rem;
  }
  .form_redfont {
    margin-bottom: 3.2rem;
  }

  /* <!-- form_area --> */
  .form_checkbox_area {
    width: 33.5rem;
    margin: 0 auto;
  }
  .form_checkbox_flex {
    flex-direction: column;
    gap: 1.6rem;
    padding-bottom: 3.2rem;
    margin-bottom: 3.2rem;
  }

  /* <!-- grey_area --> */

  .grey_area_center{
    width: 33.5rem;
    padding: 3.2rem 0 4rem;
  }
  /* .form_input_area {
    margin-bottom: 3.2rem;
  } */
  .form_greyarea_font {
    margin-bottom: 3.2rem;
  }
  .tel_area_short{
    width: 100%;
  }
  .tel_area_bottom{
    margin-bottom: 0.6rem;    
  }
  .tel_font_list {
    font-size: 1.3rem;
  }
  /* .tel_list_bottom{
    margin-bottom: 3.2rem;
  } */
  .days_select_list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.8rem;
  }
  .days_select_font {
    width: 7.4rem;
    padding: 1.2rem 1rem;
  }
  .times_select_width{
    width: 15.5rem;
  }
  .days_select_relative::after{
    right: 1rem;
  }
  .days__font{
    width: 15.5rem;
    padding: 1.2rem 1rem;
  }
  .form_select_top{
    margin: 3.2rem 0;
  }
  .textarea_height{
    min-height: 26.6rem; 
  }
  .textarea_column{
    margin-bottom: 3.2rem;
  }
  .person_select_font{
    width: 10rem;
  }
  .list_position_sp::after{
    top: 0.9rem;
    bottom: auto;
  }
  .list_inline_left{
    list-style-position: outside;
    font-size: 1.3rem;
    line-height: 1.5;
  }
  .list_inline_left:last-child{
    margin-bottom: 0;
  }
  .font_list_wrap{
    margin-bottom: 0;
  }
  /* .list_bottom_none{
    margin-bottom: 0;
  } */
  .person_select_padding{
    padding: 1.2rem 2rem;
  }
  .personally_check_flex{
    margin-bottom: 4.2rem;
  }
  .disabled_btn_wrap p::after {
    bottom: 0;
    top: 2.2rem;
    right: 2.2rem;
    left: auto;
    margin: 0;
  }
  /* .disabled_btn {
    margin-bottom: 4rem;
  } */
  .form_small_font {
    line-height: 1.5;
  }
  .reservation_under_font {
    line-height: 1.8;
    width: 33.5rem;
    margin: 0 auto;
  }

  .form_check_box input + .form_check_font:before {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.45rem;
  }

  .disabled_btn_wrap p{
    margin: 0;
    width: 28rem;
  }

  .disabled_btn_wrap{
    margin-bottom: 0;
  }


  .pc_only{
    display: none;
  }
  .sp_only{
    display: block;
  }
  .sp_inline{
    display: inline-block;
    font-weight: 500;
  }

  /* チェックボックス */
  span.wpcf7-form-control.wpcf7-checkbox.form_checkbox_area.fadeIn.animated{
    flex-direction: column;
    gap: 1.6rem;
  }
  .days_select_relative br{
    display: none;
  }
  
}