@charset "utf-8";
#solo-modal,
#long-modal,
#dp-modal-all,
#dp-modal,
#dp-modal-kids,
#dpaf60-modal,
#dpaf21-modal,
#dpd3af30-modal,
#dpd2af30-modal,
#solo-child-modal,
#long-child-modal,
#dpa-child-modal,
#dp-child-modal,
#dpaf60-child-modal,
#dpaf21-child-modal,
#dpd3af30-child-modal,
#dpd2af30-child-modal,
#dp-child-modal-kids,
#hotel-modal,
#hotel-child-modal,
#hotelaf60-modal,
#hotelaf60-child-modal,
#hotelaf21-modal,
#hotelaf21-child-modal,
#hoteld3af60-modal,
#hoteld3af60-child-modal,
#hoteld2af30-modal,
#hoteld2af30-child-modal,
#hotel2-modal,
#hotelsolo-modal,
#hotel2-child-modal,
#hotelsolo-child-modal,
#hotel2af60-modal,
#hotel2af60-child-modal,
#hotel5day-modal,
#hotel5day-child-modal,
#pkg-modal,
#pkg-child-modal{
   max-width: 500px;
   width: 100%;
   margin: auto;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   height: auto;
   max-height: 680px;
   z-index: 10000000001;
   overflow: auto;
   background: #fff;
   display: none;
}

.modal-body {
   background: #fff;
}


.modal-head {
   font-size: 1.8rem;
   text-align: left;
   background: #144490;
   color: #FFF;
   padding: 25px;
}

.modal-head .search-text {
   font-weight: bold;
}

.modal-inner {
   padding: 0 15px 25px;
}

.modal-inner .modal-title {
   font-size: 1.8rem;
}

.modal-inner .modal-title-icn {
   display: inline-block;
   vertical-align: sub;
   margin-right: 12px;
}

.modal-inner .modal-col {
   position: relative;
   font-size: 1.6rem;
}


.modal-inner .modal-col dt {
  float: left;
  font-weight: bold;
  color: #144490;
  width: 15%;
}

.modal-inner .modal-col dd {
  float: right;
  width: 80%;
  font-size: 1.4rem;
}

.modal-inner .modal-col dd > div {
  display: inline-block;
  width: 49%;
}

.modal-inner .modal-col dd label{
  display: inline-block;
  vertical-align: middle;
  width: 40%;
}

.modal-inner .modal-col select, .modal-inner .modal-col button {
   border: 1px solid rgb(169, 169, 169);
   border-radius: 3px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
   height: 28px;
   width: 50%;
   font-size: 1.6rem;
   vertical-align: middle; 
   display: inline-block;
   text-align: left;
   line-height: 1;
}

.modal-col button.modal2-open {
  width: 100px;
}

.n-box{
  width: 100%;
}

.modal-inner .modal-col2 {
  /*margin-bottom: 15px;*/
}

.modal-inner .modal-col2 select, .modal-inner .modal-col2 .selecter {
   width: 150px;
}

.modal-inner .modal-col2 .selecter {
  padding-left: 5px;
}

.box_wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box_wrap > .c-block{
  width: 48%;
}
.c-block {
   border-bottom: 1px solid #dcdcdc;
   padding: 15px 0;
}

.cal-box label {
   font-size: 1.4rem;
   padding-bottom: 5px;
   display: block;
}

.cal-box .cal-input {
   padding: 6px;
   border-radius: 3px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
   background-image: url(/_shared/images/root/common/ico_form_calendar.png);
   background-position: right center;
   background-repeat: no-repeat;
   cursor: pointer;
   width: 100%;
}

.modal-col label{
  display: block;
  padding-bottom: 5px;
  font-size: 1.4rem;
}

.modal-inner .num-select-box {
   margin-top: 2.5em;
}

.modal-inner .btn-area01 {
   text-align: center;
}

.modal-inner .btn-area01 .submit-btn {
   width: 45%;
   font-size: 1.6em;
   border: 0;
   padding: 0.5em 0 0.5em;
   background: #d54100;
   color: #FFF;
   margin-top: 10%;
   
}

.btn-area02 {
   position: absolute;
   top: 10px;
   right: 10px;
}

.close-modal-btn {
   width: 35px;
   height: 35px;
   position: relative;
   border: none;
   background: none;
   cursor: pointer;
}

.close-modal-btn span::before {
   transform: rotate(-45deg);
}

.close-modal-btn span::after {
   transform: rotate(45deg);
}

.close-modal-btn span::before, .close-modal-btn span::after {
   display: block;
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 84%;
   height: 16%;
   margin: -8% 0 0 -42%;
   background: #FFF;
}

#modal-bg {
   z-index: 1000;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.6);
   display: none;
}

.fixbg {
   position: fixed;
   left: 0;
   right: 0;
   height: auto;
   overflow-y: scroll;
}
@media (max-width: 500px){
   .modal-inner {
     padding-left: 5px;
     padding-right: 5px;
   }
   .box_wrap > .c-block{
      width: 100%;
    }
   .modal-inner .modal-col2 .n-box select .modal-inner .modal-col2 .selecter {
      width: 100px;
   }
   
   .modal-inner .modal-col dt, .modal-inner .modal-col dd {
     float: none;
     width: 100%;
   }
}

/* カレンダーCSS */
.ui-widget-header { border: 0 !important; background: #144490 !important; color: #fff !important;}
.ui-widget-header .ui-icon { background-image: url("/domtour/kyushu/miyazaki_cpn/image/ui-icons_888888_256x240.png") !important;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 0 !important; background: #fff !important; color: #333 !important; text-align: center !important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { font-weight: bold !important; color: #fff !important; background: #144490 !important;}
.ui-datepicker-header .ui-state-hover { background: none !important; border: 0 !important;}
.ui-datepicker-calendar .ui-state-hover { background: #d3d3d3 !important;}