﻿@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*/
.plan_rss{display:flex; flex-wrap: wrap; justify-content:space-between; width:800px;}
.plan_rss .mini {width:250px; padding:0px; display:flex; flex-wrap: wrap;}
.plan_rss .mini .plan_img {width:100%; order:1;}
.plan_rss .mini .plan_img img{display: block; width:100%; height:auto;}
.plan_rss .mini .plan_text {width:100%; text-align: left; order:2;}
.plan_rss .mini .plan_text a{font-size:14px; text-decoration: none;}
.plan_rss .mini .plan_text h4{font-size:14px; margin:15px 0;}
.plan_rss .mini .plan_text p{font-size:14px;}


@media only screen and (max-width: 767px){
.plan_rss{display:flex; flex-wrap: wrap; justify-content:space-between; width:100%;}
.plan_rss .mini {width:auto; padding:20px;}
.plan_rss .mini .plan_img img{display: block; width:100%; height: auto;}
.plan_rss .mini .plan_text {text-align: left;}
.plan_rss .mini .plan_text a{font-size:14px; text-decoration: none;}
.plan_rss .mini .plan_text h4{font-size:14px; margin:15px 0;}
.plan_rss .mini .plan_text p{font-size:14px;}
}

/*検索窓*/

.plan_form{width:800px;}
.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:auto; text-align: center;}
.plan_form .check_in input{width:100px; cursor: pointer;}
.plan_form .undecided {width:auto; text-align: center;}
.plan_form .undecided input{margin:14px 0 0 -25px;}
.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;}
.plan_form .search_btn .btn{width:100px; margin:20px auto; padding:10px 0 10px 0; background:#330301; background-position:right 15px center; border:none; color:#fff; font-size:18px; cursor: pointer;}
.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 only screen and (max-width: 767px){
.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 .undecided input{margin:14px 0 0 -20px;}
.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:10px 0 10px 0; background:#330301; background-position:right 15px center; border:none; color:#fff; font-size:18px; cursor: pointer;}
.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;}    
}

