/*フェードイン*/
.fadein {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha( opacity=100 )";
  transition: all 0.5s;
}

.movie {
  overflow: hidden;
  max-height: 43vw;
}
.movie .movie_img {
  width: 100%;
  min-height: 700px;
  min-width: 1280px;
  background: url(../img/top/welcome_bg_sp.png) right 0px no-repeat;
  background-size: cover;
}

.movie .inner {
  width: 1005px;
  margin: 0 auto;
}

.movie video {
  width: 100%;
  object-fit: cover;
  max-height: 810px;
}

/*ようこそ*/
.welcome_wrap {
  background: url(../img/top/welcome_bg.png) center 50px no-repeat;
  padding: 0 0 50px;
  margin: 50px auto 50px auto;
}
.welcome_wrap h2 {
  padding-bottom: 10px;
}

.welcome_wrap strong {
  font-size: 20px;
  padding-top: 10px;
  display: block;
}

/*コンテンツ*/
.top_btm .left {
  width: 660px;
}
.top_btm .right {
  width: 277px;
}

/*宿泊プラン*/

.search_wrap {
  margin-bottom: 20px;
}
.search_wrap .search_head {
  width: 277px;
  height: 40px;
  margin: 0 auto;
  background: rgb(2, 0, 36);
  background: radial-gradient(
    circle,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 9, 121, 1) 36%,
    rgba(0, 212, 255, 1) 100%
  );
  border-radius: 7px 7px 0 0;
}

.search_wrap .search_head p.plan_title {
  text-align: center;
  padding: 0 auto;
  line-height: 40px;
  color: #fff;
}

.top_btm .right .search_body {
  background-color: #fff;
  width: 275px;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
  border-radius: 0 0 7px 7px;
  border-bottom: solid 1px gray;
  border-left: solid 1px gray;
  border-right: solid 1px gray;
}

/*フェイスブック*/
.top_btm .right .fb_wrap {
  margin-top: 30px;
}

/*おすすめ宿泊プラン*/
.top_btm .left .plan .left {
  float: left;
  width: 360px;
}
.top_btm .left .plan h3 {
  font-weight: bold;
  line-height: 1.4em;
  font-size: 18px;
  padding-bottom: 10px;
}
.top_btm .left .plan p {
  font-size: 14px;
  line-height: 1.8em;
}
.top_btm .left .plan {
  padding: 30px 0 30px;
  border-bottom: 1px #888 dashed;
}

/*インスタグラム*/
.instagram_wrap {
  margin-top: 50px;
}
.instagram_wrap li {
  float: left;
  padding: 4px 4px 0;
}

/*インスタグラムフィード*/
#insta h3 {
  margin-bottom: 20px;
}
#instafeed {
  width: 960px; /*640px*/
  margin-left: 50px;
}
#instafeed li {
  width: 200px;
  height: 180px;
  float: left;
  overflow: hidden;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}
#instafeed li:nth-child(4n) {
  margin-right: 0;
}
#instafeed li .image {
  width: 200px;
  height: 180px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#instafeed li .image img {
  position: relative;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#instafeed .mask {
  width: 200px; /*168*/
  height: 180px; /*148*/
  position: absolute;
  top: 0;
  left: 0;
  /*background:url(../img/top/insta_musk.png) no-repeat top center;*/
}
#instafeed li .caption {
  width: 200px; /*168*/
  height: 180px; /*148*/
  padding: 16px;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  opacity: 0;
  overflow: hidden;
  font-size: 12px;
}
#instafeed li .caption p {
  width: 200px; /*168*/
  height: 180px; /*148*/
  overflow: hidden;
}
#instafeed li .caption:hover {
  opacity: 1;
}




/*プランRSS*/
.mini {
    width: 100%;
    padding: 0px 0px 20px;
    display: flex;
    flex-wrap: wrap;
}
.mini .plan_img {
    width: 250px;
    order: 1;
}
.mini .plan_img img{display: block; width:100%; height:auto;}
.mini .plan_text {
    width: 370px;
    text-align: left;
    order: 2;
    padding-left: 10px;
}
.mini .plan_text a{
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
}
.mini .plan_text h4{
    margin: 0 0 5px;
    font-weight: bold;
    font-style: normal;
}
.mini .plan_text p{font-size:14px;}


@media only screen and (max-width: 767px){
.mini {width:100%; padding-bottom:20px;}
.mini .plan_img {
    width: 100%;
    order: 1;
}
.mini .plan_text {
    width: 100%;
    text-align: left;
    order: 2;
    padding-left: 0px;
}
.mini .plan_img img{display: block; width:100%; height: auto;}


.mini .plan_text a{
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
}
	
.mini .plan_text h4{
	font-size:14px;
    margin: 5px 0 5px;
    font-weight: bold;
    font-style: normal;
}
.mini .plan_text p{font-size:14px;}
}


.plan_form .search_btn{
	width: 400px;
	
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */	
	
}
.plan_form{width:100%;}
.plan_form .form_box{display: flex; flex-wrap: wrap; justify-content:space-between;
padding: 10px;}
.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:5px;}
.plan_form input{position: relative;border-radius: 1px;border: 1px solid #bfbfbf; background: #ffffff; padding:5px;}
.plan_form .check_in {width:auto; text-align: center;}
.plan_form .check_in input{width:100px; cursor: pointer;}
.plan_form .undecided {width:100px; text-align: center;}
.plan_form .undecided input{margin:14px 0 0 0px;}

.plan_form .undecided input.checkd{margin:0px 0 0 0px;}
.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;}
