@charset "utf-8";

#modal, #modal02 {
   display: none;
   width: 740px;
   margin: 0 auto;
   z-index: 9200;
   position: fixed;
}

.modal_body {
   background-color: #fdf1e1;
   padding: 15px 25px;
   font-size: 107.7%;
   position: relative;
}

.modal_body .close_modal {
   position: absolute;
   top: 0;
   right: 0;
}
.modal_body .close_modal:focus {
   outline: 1px solid #333;
}
.modal_body button {
   width: auto;
   max-width: 282px;
   margin:auto;
   padding:0;
   background:none;
   border:0;
   font-size:0;
   line-height:0;
   overflow:visible;
   cursor:pointer;
}

.modal_body input.input_cal, .modal_body select {
   font-size: 100%;
   height: 33px;
   border: none;
   box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding-left: 8px;
   border-radius: 3px;
}
.modal_body input.input_cal:focus {
   outline: 1px solid #333;
}
select::-ms-expand {
    display: none;
}

.modal_body input.input_cal {
   background: url("/tour/common/_shared/images/root/common/icon_calendar.png") no-repeat right center;
   background-color: #fff;
   background-size: 30px auto;
   cursor: pointer;
   width: 100%;
}

.modal_body select {
   background: url("/img/reservation/cont/icon_select_arrow_pc.png") no-repeat right center;
   background-color: #fff;
   background-size: 14px 16px;
   width: 100%;
}


.modal_body .modal_body_inner .box_form {
   border-bottom: 1px solid #d1d1d1;
   padding: 23px 0;
}

.modal_body .modal_body_inner .box_form .txt_age {
   font-weight: bold;
   font-size: 110%;
   margin-bottom: 12px;
   
}

.modal_body .modal_body_inner .checkbox {
   margin-top: 20px;
}

.modal_body .modal_body_inner .modalheader {
   border-top: none;
}

.modal_body .modal_body_inner .modalheader .dep_arr {
   line-height: 1;
}

.modal_body .modal_body_inner .seach_box {
   border-bottom: none;
   text-align: center;
}

.modal_body .modal_body_inner ul {
   text-align: center;
}

.modal_body .modal_body_inner li {
   display: inline-block;
   width: 48%;
   text-align: left;
   margin-right: 4%;
}

.modal_body .modal_body_inner .result_cld {
   text-align: center;
   border-bottom: none;
}

.modal_body .modal_body_inner li:last-child {
   margin-right: 0;
}

#modal .modal_body .modal_body_inner .select_ap select {
   width: 39%;
}

#modal .modal_body .modal_body_inner .selecter {
   padding: 5.5px;
   box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
   height: 33px;
   background: url("/img/reservation/cont/icon_select_arrow_pc.png") no-repeat right center;
   background-color: #fff;
   border-radius: 3px;
}

#modal .modal_body .modal_body_inner .txt_modalheader, #modal .modal_body .modal_body_inner .hotelname {
   font-size: 1.2rem;
   font-weight: bold;
}

#modal .modal_body .modal_body_inner .hotelname {
   margin-top: 10px;
}


#modal .modal_body .modal_body_inner .select_ap {
   text-align: center;
}

#modal .modal_body .modal_body_inner .select_ap .aplist {
   display: inline-block !important;
   width: 48%;
   margin-right: 4%;
   text-align: left;
}

#modal .modal_body .modal_body_inner .select_ap .aplist:last-child {
   margin-right: 0 !important
}

#modal .modal_body .modal_body_inner .select_ap .aplist select {
   width: 100%;
}

#modal02 .modal_body .modal_body_inner .infancy ul {
   text-align: left;
}


#modal_overlay {
   position: fixed;
   z-index: 9199;
   background: rgba(0,0,0,0.6);
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
}

/*�w�i�X�N���[���h�~�p�N���X*/
.fixedbase {
   position: fixed;
   left: 0;
   right: 0;
}

@media screen and (max-width: 600px) {
   #modal, #modal02 {
      width: 100% !important;
   }
}
@media screen and (max-width: 600px), (max-height: 1000px) {
   #modal, #modal02 {
      max-height: 95vh;
      overflow-y: auto;
      margin: auto !important;
   }
}
@media screen and (max-width: 600px), (max-height: 640px) {
   #modal, #modal02 {
      max-height: 80vh;
      overflow-y: auto;
      top: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      margin: auto !important;
   }
   
   .modal_body {
      padding: 15px 13px;
   }
   
   .modal_body input.input_cal {
      cursor: auto;
   }
   #modal-content,#modal-content2 {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
   }
   .modal_body input.input_cal, .modal_body select {
      margin-top: 5px;
   }
   
   .modal_body .modal_body_inner li {
      display: block;
      width: 95%;
      margin: 0 auto;
   }
   
   .modal_body .modal_body_inner li:last-child {
      margin-right: auto;
      margin-top: 17px;
   }
   
   #modal .modal_body .modal_body_inner .select_ap .aplist {
      display: block;
      width: 95%;
      margin: 0 auto;
   }
   
   #modal .modal_body .modal_body_inner .select_ap .aplist:last-child {
      margin-right: auto;
      margin-top: 17px;
   }



}


