@charset "UTF-8";

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    background: transparent;
}

button,
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}

input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label {
    background: #ff0000;
}

/* rss_content
----------------------------------------------------------- */
/*========================================
　●　プランRSS
========================================*/
.osusume,
.osusume h2,
.osusume--inner{
/* base.cssへ */
}

.plan_rss{
 display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
 width: 100%;
}

.plan_rss .mini{
 display: flex;
  flex-direction: column;
 overflow: hidden;
 width: 31.3%;
 min-height: 500px;
 margin-bottom: 30px;
 padding: 15px 15px;

 background: #dfe7b2;
}
.plan_rss .mini .plan_img{
 width: 100%;
 min-height: 0%;
 padding-top: 0px;
 padding-bottom: 6px;

 order: 1;
 text-align: center;
}
.plan_rss .mini .plan_img img{
 display: inline-block;
 width: 100%;
 max-width: 362px;
 height: auto;
}

.plan_rss .mini .plan_text {
 width: 100%;
 text-align: left;
 order: 2;
}

.plan_rss .mini .plan_text h4{
 min-height: 75px;
 margin-bottom: 4px;
 padding-top: 0px;
 padding-bottom: 12px;
 padding-left: 5px;
 color: #37291d;
 font-size: 1.8rem;
 font-weight: 300;
 line-height: 1.5;
}

.plan_rss .mini .plan_text p{
 padding-bottom: 10px;
 padding-left: 5px;
 color: #37291d;
 font-size: 1.5rem;
 line-height: 1.6;
}

.plan_rss .mini .plan_text a{
 color: #37291d;
 font-size: 1.8rem;
 text-decoration: none;
}

.plan_rss .mini .plan_text a:hover{
 color: #94691d;
}


/*======================================== ■ media（1087） */
@media only screen and (max-width: 1087px){
.plan_rss{
 display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
 width: 100%;
}

.plan_rss .mini .plan_text h4{
 padding-left: 0;
}

.plan_rss .mini .plan_text p{
 padding-left: 0;
}

}/*--- media ---*/

/*======================================== ■ media(767) */
@media only screen and (max-width: 767px){

.plan_rss{}
.plan_rss .mini{
 display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
 width: 100%;
 max-width: 520px;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 15px;
 padding: 0px;
}

.plan_rss .mini .plan_img{
 display: block;
 width: 95%;
 height: auto;
 margin: 0 auto;
 padding-top: 10px;
}
.plan_rss .mini .plan_img img{
 display: block;
 width: 100%;
 max-width: 100%;
 height: auto;
}

.plan_rss .mini .plan_text{
 width: 100%;
 padding-right: 10px;
 padding-left : 10px;
 order: 2;
}

.plan_rss .mini .plan_text h4{
 margin-bottom: 0;
 font-size: 2.4rem;
 line-height: 1.3;
}

.plan_rss .mini .plan_text p{
 padding-left: 0px;
 font-size: 1.5rem;
 line-height: 1.7;
}

.plan_rss .mini .plan_text a{
 font-size: 1.8rem;
 text-decoration: none;
}

.plan_rss .mini .plan_text a:hover{
 color: #f8b862;
}

}/*--- @media ---*/



/*========================================
　●　検索窓
========================================*/
/*---------------------------------------- 外枠設定 */
.roomsearch{
 display: flex;
  align-items: center;
  justify-content: center;

 width: 100%;
 margin: 0px auto 0px auto;
 padding-bottom: 0px;
 color: #fff;
 text-align; center;
 background: #37291d;
}

.roomsearch h3{
 width: 175px;
 padding-bottom: 0px;
 color: #faf2eb;
 font-size: 30px;
 text-align: center;
}

.roomsearch--inner{
 width: 100%;
 max-width: 1057px;
 padding: 12px 20px 20px 0px;
/* background: #000000;*/
}

.roomsewarch--wrap01{
 max-width: 1057px;
 color: #fff;
/* color: #666;*/
 padding-right: 30px;
 padding-left: 30px;
/* background: #000;*/
/* background: #fff;*/
}


/*---------------------------------------- 大枠設定 */
.plan_form{
/* width: 1000px;*/
}

.plan_form .form_box{
 display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items: center;
}

/*-------------------- 一括設定 */
.check_in,
.undecided,
.guests,
.type,
.price{
 height: 68px;
}


/*---------------------------------------- 入力枠設定 */
.plan_form .title{
 margin:0 0 12px 0;
 padding:0; text-align: center; font-size:14px;
}

.plan_form span{
 margin:0 10px 0 0;
}

.plan_form select{
 position: relative;
 padding:10px;
 background: #ffffff;
 border: 1px solid #bfbfbf;
 border-radius: 1px;
}

.plan_form input{
 position: relative;
 padding:10px;
 background: #ffffff;
 border: 1px solid #ccc;
 border-radius: 1px;
}

/*---------------------------------------- 宿泊日 */
.plan_form .check_in {
 width:auto;
 text-align: center;
}

.plan_form .check_in input{
 width:100px;
 cursor: pointer;
}

/*---------------------------------------- 人数 */
.plan_form .guests{
 width:auto;
 text-align: center;
}

.plan_form .guests select{
 width:100px;
}

.plan_form .type {
 width: auto;
 text-align: center;
}

/*---------------------------------------- 部屋タイプ */
.plan_form .type select{
 width:100px;
}

/*---------------------------------------- 予算 */
.plan_form .price {
 width:auto;
 text-align: center;
}

.plan_form .price span {
 width:10px;
 text-align: center;
 margin:0;
}

/*---------------------------------------- 検索 */
.search_btn{
 padding-left: 10px;
}

.plan_form .search_btn .btn{
 width: 170px;
 height: 60px;
 margin: 20px auto;
 padding: 0px 0 0px 0;

 color: #ffffff;
 font-size: 27px;
 cursor: pointer;
 letter-spacing: 4px;

 background: #628f28;
 transition: all 0.2s ease;
}

.plan_form .search_btn .btn:hover{
 opacity: 0.8;
 border: 1px #688c5c solid;
}

/*---------------------------------------- 日付未定 */
.plan_form .undecided{
 width:auto;
 text-align: center;
}

.plan_form .undecided input{
 margin:14px 0 0 -25px;
}

.plan_form .option-input{
 position:relative;  cursor: pointer;
}

.plan_form .option-input:before {
 position: absolute;
  z-index: 1;
  top: 0.125rem;
  left: 0.1875rem;
 width: 0.75rem;
 height: 0.375rem;
 content: '';

 -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75); transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
 -webkit-transform: rotate(-45deg) scale(0, 0); transform: rotate(-45deg) scale(0, 0);

 border: 2px solid #330301;
 border-top-style: none;
 border-right-style: none;
}

.plan_form .option-input:checked:before { 
 -webkit-transform: rotate(-45deg) scale(1, 1);
 transform: rotate(-45deg) scale(1, 1);
}

.plan_form .option-input:after {
 position: absolute;
  top: -0.125rem;
  left: 0; width: 1rem;
 height: 1rem;
 content: '';
 cursor: pointer;
 border: 2px solid #330301;
 background: #ffffff;
}



/*======================================== ■ media（1087） */
@media only screen and (max-width: 1087px){
.roomsearch{
  flex-direction: column;
 width: 100%;
}

.roomsearch h3{
 width: 175px;
 padding-top: 25px;
 padding-bottom: 0;
 color: #fff;
 text-align: center;
}

.roomsearch--inner{ padding: 25px 25px;}

.roomsewarch--wrap01{
 width: 100%;
 max-width: 800px;
 margin: 0 auto;
 padding-top: 15px;
 padding-bottom: 10px;
 padding-right: 8px;
 padding-left: 8px;
}

/*---------------------------------------- 大枠設定 */
.plan_form{
 width: 100%;
 margin: 0 auto;
}

.plan_form .form_box{
 display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
 max-width: 800px;
 margin: 0 auto;
}


/*---------------------------------------- 検索 */
.search_btn{padding-left: 0;}



/*---------------------------------------- 項目サイズ */
.plan_form .check_in,
.plan_form .undecided,
.plan_form .guests,
.plan_form .type{ width: 25%;}

.plan_form .price,
.search_btn{ width: 50%;
}
.search_btn{ text-align: center;}

.plan_form .search_btn .btn{ width: 76%;}


}/*----- media -----*/

/*======================================== ■ media */
@media only screen and (max-width: 767px){
/*---------------------------------------- 外枠設定 */
.roomsearch{
 display: flex;
  flex-direction: column;
  align-items: center;

 width: 100%;
 margin: 0px auto 0px auto;
}

.roomsearch h3{
}

.roomsewarch--wrap01{
 width: 100%;
 color: #000;
 padding-top: 0px;
 padding-bottom: 0px;
 padding-right: 10px;
 padding-left: 10px;
 background: #fff;
}


/*---------------------------------------- 大枠設定 */
.plan_form{
 width:auto;
 padding: 20px;
 position: relative;
}

.plan_form .form_box{
 display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}

/*---------------------------------------- 入力枠設定 */
.plan_form .title{
 margin:0 0 5px 0;
 padding:0;
 text-align: center;
 font-size:14px;
}

.plan_form span{
 margin:0 10px 0 0;
}

.plan_form select{
 position: relative;
 border-radius: 1px;
 border: 1px solid #bfbfbf;
 background: #ffffff;
 padding:10px;
}

.plan_form input{
 position: relative;
 border-radius: 1px;
 border: 1px solid #bfbfbf;
 background: #ffffff;
 padding:10px;
}


.plan_form .check_in {
 width:48%;
 text-align: center;
 margin:0 0 20px 0;
}

.plan_form .check_in input{width:100%;}

.plan_form .undecided {
 width:50%;
 text-align: center;
 margin:0 0 20px 0;
}

/*---------------------------------------- 人数 */
.plan_form .guests{
 width:48%;
 text-align: center;
 margin:0 0 20px 0;
}

.plan_form .guests select{
 width:100%;
}

/*---------------------------------------- 部屋タイプ */
.plan_form .type {
 width:48%;
 text-align: center;
 margin:0 0 20px 0;
}

.plan_form .type select{
 width:100%;
}

/*---------------------------------------- 予算 */
.plan_form .price {
 width:100%;
 text-align: center;
 display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items: center;
}

.plan_form .price .title{
 width:100%;
}

.plan_form .price select{
 width:46%;
}

.plan_form .price span {
 width:10px;
 text-align: center;
 padding:0 6px 0 0;
}

/*---------------------------------------- 検索 */
.plan_form .search_btn{width:100%;}

.plan_form .search_btn .btn{
 width:100%;
 margin:20px auto;
 padding: 5px 0 5px 0;
 font-size: 18px;
 cursor: pointer;
 letter-spacing: 4px;
}

/*---------------------------------------- 日付未定 */
.plan_form .undecided input{
 margin:14px 0 0 -20px;
}

.plan_form .option-input{
 position:relative;
 cursor: pointer;
 height: auto;
}

.plan_form .option-input:before {
 position: absolute;
  z-index: 1;
  top: 0.125rem;
  left: 0.1875rem;
 width: 0.75rem;
 height: 0.375rem;
 content: '';

 -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
 transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);

 -webkit-transform: rotate(-45deg) scale(0, 0);
 transform: rotate(-45deg) scale(0, 0);

 border: 2px solid #330301;
 border-top-style: none;
 border-right-style: none;
}

.plan_form .option-input:checked:before {
 -webkit-transform: rotate(-45deg) scale(1, 1);
 transform: rotate(-45deg) scale(1, 1);}

.plan_form .option-input:after {
 position: absolute;
  top: -0.125rem;
  left: 0; width: 1rem;
 height: 1rem;
 content: '';
 cursor: pointer;
 border: 2px solid #330301;
 background: #ffffff;
}

input{ height: 42px;}

input[type="text"] {box-sizing: border-box;font-size: 16px;}

select {box-sizing: border-box;font-size: 16px; height: 42px;}

}/*--- @media ---*/
