@charset "utf-8";

/* ================================================
--- 宿泊プランモジュール
=================================================*/
.plan-module{
  background: url(../images/common/bg-gray.jpg);
  margin-top: 60px;
  padding: 30px 0;
}
.plan-module .mod-inner{
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid #CCC;
  padding: 15px 0;
}
.mod-inner .left{
  width: 20%;
  text-align: center;
  margin: 0 auto;
}
.mod-inner .left h2{
  font-size: 1rem !important;
  font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.mod-inner .left h2 span.ttl-search{
  font-size: 1.5rem !important;
  color: #442506;
  line-height: 1.5;
}
.mod-inner .right{
  width: 94%;
  margin: 0 auto;
}
.mod-inner .right .r-top {
  display: flex;
  padding:20px;
  justify-content: space-between;
  align-items: center
}

.mod-inner .right .r-top form {
  width: 100%;
}

.r-top-l {
  width: 85%;
  display: flex;
  justify-content: center;
}

.r-top-l label{
  line-height: 1.8rem;
}

.r-top-l .chkin {
  position: relative;
  overflow: hidden;
  margin-right: 15px;
}
.r-top-l input#datepicker {    
  width: 130px;
  border: none;
  padding: 4px 3px 3px 9px; 
}
select#nights,
select#otona,
select#room,
select#komado {
  padding: 1px 3px 3px 5px;
  border: none;
  margin-left: 2px;
  margin-right: 2px;
  background: #fff;
}
.nopk #kids {
  border: none !important;
  padding-left: 10px;
}
.r-top-l .chkin:after {
  position: absolute;
  right: 10px;
  bottom: 1px;
  font-family: FontAwesome;
  content: "\f073";
  transform: translate(0, -50%);
}

.nght { margin-right: 15px;}

.nop { 
  margin-right: 15px;
  padding-right: 6px;
}

/* .r-top-r {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 45%;
} */

.nopk { 
  margin-right: 15px;
  padding-right: 6px;
  position: relative;
  /*  width: 8em;*/
}

.r-top-r { width: 16%;}

.btn_search { margin-bottom: 0;}

.dropdown {
  display:none;
  position: absolute;
  background-color: #fff;
  width: 12em;
  padding: 15px;
  border: 1px solid #666;
  border-radius: 10px;
  z-index: 30;
  top: 70px;
}


@media(max-width: 500px) {

  .dropdown {
    width: 12em;
    padding: 15px;
    border: 1px solid #666;
    border-radius: 10px;
    margin: 10px;
    z-index: 30;
    top: 40px;
    left: -80px;
  }

}
.dropdown label { font-size: 1.2rem;}

label[for="menu"] {
  /*display:block;*/
  cursor: pointer;
}

label[for="menu"]:hover { background-color: #ccc;}

label[for="menu"]::before { transform:rotate(225deg);}

/*#menu { display: none;}*/

#menu:checked + .dropdown { display:block;}

.pulldown { display: none;}

.btn_search input{
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: #333;
  color: #FFF;
  font-size: 1em;
}
.btn_plan_list{
  width: 49%;
  float: right;
  margin-bottom: 0;
}
.btn_plan_list a{
  display: block;
  padding: 6px 10px;
  border: none;
  background: #bba455;
  color: #FFF;
  font-size: 1em;
  text-align: center;
}
ul.r-bot{
  display: block;
  margin-bottom: 0;
  padding-top: 1%;
  text-align: right;
}
ul.r-bot li{
  display: inline-block;
}
ul.r-bot li a{
  position: relative;    
  padding-right: 30px;
}
ul.r-bot li a:hover{
  text-decoration: underline;
}
ul.r-bot li a:after{
  position: absolute;
  right: 13px;
  top: 50%;
  font-family: FontAwesome;
  content: "\f105";
  transform: translate(0, -50%);    
}
/**下層メインコンテンツ
**********************************/

@media(max-width: 1024px) {
  .plan-module .mod-inner{
    width: 95%;
    padding: 20px 0;
  }
  .mod-inner .left{
    width: 30%;
  }
  .mod-inner .right{
    width: 100%;
  }
  .mod-inner .right .r-top{
    padding: 0;
    display: block;
  }
  ul.r-bot{
  padding-top: 2%;
  text-align: center;
}
  .r-top-l {
    width: 86%;
    margin: 0 auto;
  }
  .r-top-r{
    width: 26%;
    margin: 0 auto;
    padding-top: 20px;
  }
  .nopk #kids{
    width: 40px;
  }
}
@media(max-width: 810px) {
  .mod-inner .left {
    width: 100%;
  }
  .mod-inner .right {
    width: 90%;
    padding-left: 0;
    margin: 0 auto;
  }
  .r-top-l {
    margin: 0 auto;
    width: 100%;
    justify-content: center;
  }
  .chkin label {
    display: block;
  }
  .rmq {
    padding-left: 20px;
  }
  .btn_search input {
    width: 100%;
    padding: 14px 10px;
  }
  .r-top-r {
    margin: 0 auto;
    width: 30%;
  }
  .nopk,.rmq,.nop,.nght{
    margin-right:0;
    padding: 16px 0 0 12px; 
  }
  .nopk #kids {
    border: none !important;
    padding-left: 10px;
    width: 25px;
  }
}
@media(max-width: 480px) {
  .plan-module .mod-inner {
    width: 77%;
    padding: 20px 0;
  }
  .mod-inner .right {
    width: 90%;
    padding-left: 0;
    margin: 0 auto;
    text-align: left;
  }
  .mod-inner .right .r-top {
    padding: 0;
    display: block;
  }
  .r-top-l {
    margin: 0 auto;
    width: 100%;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
  }
  .r-top-l .chkin {
    width: 64%;
    margin-right: 0;
    margin-bottom: 20px;
    margin: 0 auto 0;
  }
  .r-top-r {
    margin: 0 auto;
    width: 100%;
  }
  .btn_search {
    float: none;
    width: 91%;
    margin: 0 auto 3%;
  }
}