﻿/* 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;
}

.CheckboxInput {
  padding: 7px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.CheckboxInput-Input {
  margin: 0;
  width: 0;
  opacity: 0;
}
.CheckboxInput:hover{}
.CheckboxInput-Input:focus + .CheckboxInput-DummyInput{}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput {
/*チェックボックス背景色*/	
background: #005982; 
}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  height: 4px;
  border-radius: 2px;
  transform: translate(-5px, 2px) rotateZ(-135deg);
  transform-origin: 2px 2px;
  background: #FFFFFF;
}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  height: 4px;
  border-radius: 2px;
  transform: translate(-5px, 2px) rotateZ(-45deg);
  transform-origin: 2px 2px;
  background: #FFFFFF;
}
.CheckboxInput-DummyInput {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 22px;
  height: 22px;
  border: solid 2px transparent;
  background: rgba(0,0,0, .1);
  border-radius: 4px;
}
.CheckboxInput-LabelText {
  margin-left: 12px;
  display: block;
  font-size: 18px;
  font-weight: bold;
}

/* 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_no {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; font-weight: bold;}
.plan_form span{margin: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 .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-position:right 15px center; border:none; color:#fff; font-size:18px; cursor: pointer;
/*検索ボタン背景色*/
background:#005982;}
.plan_form .option-input{position:relative;  cursor: pointer;}

@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:16px; font-weight: bold;}
.plan_form span{margin: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{}
.plan_form .undecided .CheckboxInput {padding: 0 15px; display: flex; justify-content:center; cursor: pointer;}
.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:auto; text-align: center; padding:0;}
.plan_form .search_btn{width:100%;}    
.plan_form .search_btn .btn{width:100%; margin:20px auto; padding:10px 0 10px 0; 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{display: none;}
.plan_form .option-input:checked:before {display: none;}
.plan_form .option-input:after{display: none;}
input{ height: 42px;}
input[type="text"] {box-sizing: border-box;font-size: 16px;}
select {box-sizing: border-box;font-size: 16px; height: 42px;}    
}

@media only screen and (max-width: 360px){
	
.plan_form .check_in {width:100%; text-align: center; margin:0 0 20px 0;}
.plan_form .check_in input{width:100%;}
.plan_form .undecided {width:100%; text-align: center; margin:0 0 20px 0;}
.plan_form .guests{width:100%; text-align: center; margin:0 0 20px 0;}
.plan_form .type {width:100%; 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:100%;} 
.plan_form .price span {width:100%; text-align: center; padding:0; margin:10px 0!important; display: block;}
.plan_form .search_btn{width:100%;}    

	
}