/*!
共有パーツ--------------------------------------------------
 */

 body{
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	background-color: #F3F3F3;
	background-image: url(../img/bg.png);
	background-repeat: repeat;
 }

 
a{
	color: #00CCFF;
	color: #696969;
	text-decoration: none;
	}
	
a:hover{
	color: #999999;
	}
 
.img{
	max-width:100%;
	height:auto;
	border:solid 1px #ccc;
	padding:2px;

	 
 }
 
.img_noborder{
	max-width:100%;
	height:auto;
	padding:2px;

	 
 }

.u_line {
    position: relative;
    padding: 0.5rem 0 0.8rem;
    margin-bottom: 0.5rem;
    font-weight: bold;

    background-image: linear-gradient(90deg, rgba(0,0,0,0) 0% 40%, blue 40% 60%, rgba(0,0,0,0) 60%);
    background-repeat: no-repeat;
    background-size: 100% 0.3rem;
    background-position: bottom;
}

.submit {
	border: 1px solid #000;  /* 枠線 */
	border-radius: 5px;   /* 角丸 */
	padding: 8px;          /* 内側の余白量 */
	background-color: #FFF;             /* 横幅 */
	height: 2.5em;           /* 高さ */
	         /* 文字サイズ */
	line-height: 1.2em;        /* 行の高さ */
	color: #000;
}
 
 
ol {
margin: 0;
padding: 0;
}
ol li {
margin-left: 0.5em;
padding: 0;
}


.btn_arrow{
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;

  width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.btn_arrow:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.btn_arrow p {
  margin: 0;
  padding: 0;
}

.kakumaru{
	border-radius: 10px;
	background-color:#9C9;
}


.margin_bottom{
	margin-bottom:0.7em;
}
 
 @media screen and (min-width:1024px) { /*　pc　*/

 .bg-color-head{
	background-color: #000;
	background-color: #FFF;
	

	position: sticky;/*固定する*/
    position: -webkit-sticky;/*Safari用ベンダープレフィックス*/
    top: 0;/*ブラウザの上からの距離はゼロ*/
	   

	z-index:9999;
	}
	
	.bg-color-foot{
	background-color: #000ff;
 }
 }
 
 @media screen and (max-width:1023px) { /*　700px　*/
  .bg-color-head{
	background-color: #000;
	background-color: #FFF;
	}
 }
 
  .bg-color-foot{
	background-color: #0000ff;

 }
 
 .bg-color2{
	background-color: #FFF;
	
	
 }
 
 /* youtube レスポンシブ　*/
 .movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 
@media screen and (min-width:1024px) { /*　pc　*/

 .show_phone{
width: none;
}

}
@media screen and (max-width:1023px) { /*　phone　*/

 .show_pc{
display:none;
}

}
 .en:before {
  content: url(../img/en.png);
  display: inline-block;
  margin-right:3px;
  width: 20px;
  height: 12px;
}
 .en:hover:before {
  content: url(../img/jp.png);

}


.flex-column {
	display:flex;
	flex-direction: column;
}

.flex {
	display:flex;
	flex-direction: row;
	justify-content: flex-start;

}

.flex-between {
	display:flex;

	justify-content: space-between;

}

.flex-wrap {
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
}

.flex-wrap-between {
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: space-between;
}

.flex-wrap-between-noclume {
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: space-between;
}

@media screen and (max-width:1023px) { /*　700px　*/
.flex,.flex-between,.flex-wrap,.flex-wrap-between{
	flex-direction: column;
	}
	

}

.w20-100{
width: 19%;
}

.w25-100{
width: 24%;
}

.w30-100{
width: 29%;
}

.w40-100{
width: 39%;
}

.w45-100{
width: 44%;
}


.w50-100{
width: 50%;
}

.w60-100{
width: 59%;
}

.w70-100{
width: 69%;
}

.w75-100{
width: 74%;
}

.w80-100{
width: 79%;
}


.w20-50{
width: 24%;
}

.w25-50{
width: 25%;
}

.w30-50{
width: 30%;
}

.w45-50{
width: 45%;
}

.w50-50{
width: 50%;
}

.w60-50{
width: 60%;
}

.w70-50{
width: 70%;
}

.w80-50{
width: 80%;
}

.w100-100{
	width:100%;
}

.text-center{
text-align: center;
}

.text-center-left{
text-align: center;
}

.text-left{
text-align: left;
}


.img-cover {
  position: relative;
  height: 100vh;
}
.img-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: inherit;
}
ol{margin-left:1em;}

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}


@media screen and (max-width:1023px) { /*　700px　*/

	
.w20-100,.w25-100,.w30-100,.w40-100,.w45-100,.w50-100,.w60-100,.w70-100,.w75-100,.w80-100{
width: 100%;
}

.w20-50,.w25-50,.w30-50,.w45-50,.w50-50,.w60-50,.w70-50,.w80-50{
width: 49%;
}
.text-center-left{
text-align: left;
}
}/*　480end　*/


.margein-height{
	margin:1em 0;
}

.block{
	display:block;
}

.border {
  border-bottom: solid 3px #ffc778;
  position: relative;
}
.border:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px skyblue;
  bottom: -3px;
  width: 50%;
}

.bg_01{
	background-color: #0000FF;
	/*background-image: url(../img/bg-sub.png);*/
	background-size: cover;
	opacity: 0.98;
	text-align: center;	/* ---background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4), rgba(17, 66, 99, 0.6));-- グラデーションオーバーレイ ----- */
}

h1 {
	text-align: center;
	font-size: 2.2em;
	color: #C90;
	color: #696969;
}


h1.sub_title{
	background-color:#;
	padding:1em 0;
	margin: 0;
	color: #FFFFFF;
	font-weight: normal;
	font-size: 2em;
	display: inline-block;
}

h1.sub_title i{


	font-weight: normal;
	font-size:1em;

}

h2{
	margin:2em 0 1em 0;
}

/*font*/
.font-ss{
	font-size:0.5em;
}
.font-s{
	font-size:0.7em;
}
.font-ms{
	font-size:0.9em;
}
.font-m{
	font-size:1em;
}
.font-ls{
	font-size:1.2em;
}
.font-l{
	font-size:1.5em;
}
.font-lp{/*　ipadpro　*/
	font-size:1.5em;
}
.font-xs{
	font-size:2em;
}
.font-x{
	font-size:2.5em;
}

.font-logo{
	font-family:font-family: 'Urbanist', sans-serif;
	font-size: 2.5em;
	font-weight: 200;
	text-decoration: none;
	color: #EAEADF;
	color: #333333;
	
}

.font-logo > i{
	color: #CCC;
}

.font-logo:first-child::before {

	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 54px;/*画像の幅*/
  height: 40px;/*画像の高さ*/
  background-image: url(../img/logo2.png);
  background-size: contain;
  vertical-align: middle;


  }


@media screen and (max-width:1024px) { /*　ipadpro　*/
.font-lp{

	display: none;

}
}

@media screen and (max-width:1023px) { /*　700px　*/
.font-ms,.font-m,.font-ls,.font-l,.font-xs,.font-x,.font-logo{
	font-size:1em;
	}

.font-logo:first-child::before {

	  width: 47px;/*画像の幅*/
	  height: 35px;/*画像の高さ*/
	
  }
	
.font-ss,.font-s{
	font-size:0.8em;
	}
	
.header > .font-logo{
	font-size:1.5em;
	}

h1 {
	text-align: center;
	font-size:1.2em;

}


h1.sub_title{
	background-color:#;
	padding: 0.7em 0;
	margin: 0;
	color: #FFFFFF;
	font-weight: normal;
	font-size: 1.4em;
	display: inline-block;
}

h1.sub_title i{


	font-weight: normal;
	font-size:1em;

}

h2{
	margin:2em 0 1em 0;
	font-size:1.4em;
}


}/*　480end　*/


table th,
table td {
  padding: 1em 10px 1em 1em;
  border-right: 1px solid #bbb;
}
table tr:nth-child(even){
  background-color: #eee;
}

table td:last-child {
  border-right: none;
}
@media screen and (max-width:1023px) { /*　700px　*/
.blocktable td,.blocktable th{
	display:block;
	 padding: 0.5em 0 0.5em 0;
  border-right: none;
  text-align:center;
	}
.blocktable th{
	padding: 0.5em 0 0.05em 0;
  border-bottom:dotted 1px #c0c0c0;
	}


}

@media screen and (max-width: 700px) {/*　700px　table スクロール*/
  .scroll {
    overflow-x: auto;
  }
}







hr {
	margin: 4em 0 3.3em 0;
	background-color: #fff;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #DCD9C0;
}

strong {
  
}

h1{
	margin:1.5em 0 0.5em 0;
}

main.h1{
	margin:1.5em 0 0.5em 0;
}







@media screen and (max-width: 700px) {/*　700px　*/


}


/*!
構造--------------------------------------------------
 */
 

 
.container{
	width: 80%;
	max-width: 1160px;
	width: 1160px;
	margin: 0 auto;
 
}
 
 
@media screen and (max-width:1024px) { /*　700px　*/
.container{
	 width:100%;
	 	
	}
}/*　480end　*/

 
.flex-head{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: #09F;
	width: 1160px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 0;
}


@media screen and (max-width:1024px) { /*　700px　*/
.flex-head{
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	padding-bottom: 0px;

	}
}/*　480end　*/


.header {
	display: block;
	padding: 0.3em 0;
	margin: 0;
	text-align: center;
	



}

.headernew {
	display: block;
	padding: 0.1em 0;
	margin: 0;
	text-align: center;
	



}



@media screen and (max-width:1023px) { /*　700px　*/
.header{

	margin-left:0.5em;
	padding: 0.3em 0 0 0;


	

	}
}/*　480end　*/

main{

}
@media screen and (max-width:1023px) { /*　700px　*/
main{
	width:95%;
	 margin:0 auto;
}
}/*　480end　*/

footer{
	color: #FFFFFF;
	text-align: center;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	margin-top: 4em;
	padding-top: 40px;
	padding-right: 0;
	padding-bottom: 40px;
	padding-left: 0;
}

/*!
index.html--------------------------------------------------
 */
 .flex-video{
	 position: relative;
	 display:block;
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 width:100%;
	 height:430px;
	 margin:0;
	 background-color: #CC99ff;
	 overflow: hidden;
	  background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4), rgba(17, 66, 99, 0.6));/* ----- グラデーションオーバーレイ ----- */

 }
 
 .flex-video h2 {
  color: #fff;
  font-size: 400%;
  margin:0.2em 0;
  z-index: 1;
}
 
 .flex-video p {         
  color: #fff;
  font-size: 200%;

  z-index: 1;
}


@media screen and (max-width:1023px) { /*　700px　*/
 .flex-video{
	 position: relative;
	 display:block;
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 width:100%;
	 height:150px;
	 margin:0;
	 background-color: #CC99ff;
	 overflow: hidden;
	  background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4), rgba(17, 66, 99, 0.6));/* ----- グラデーションオーバーレイ ----- */

	}
.flex-video h2 {       
  color: #fff;
  font-size: 100%;

  z-index: 1;
	}
 
 .flex-video p {        
  color: #fff;
  font-size: 100%;

  z-index: 1;
	}

}/*　480end　*/
 

 /* -- 背景用の動画ファイル -- */
.flex-video video{
 position: fixed;
position: absolute;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 z-index: -1;
 background: url('poster.jpg') no-repeat;
 background-size: cover;
}

 /* ----- 人数別客室 ----- */
.flex-rooms{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	align-items: center;
	align-items: flex-start;
	/*justify-content: space-between;*/
}
.rooms{
	display:block;
flex-basis:33%;
	height:auto;
	margin-top:1em;
	

	 
 }
 
 .rooms25{

flex-basis:25%;
	 
 }
 

 
 @media screen and (max-width:1023px) { /*　700px　*/
.rooms,.rooms25{
	display:block;
flex-basis:100%;
	height:auto;
	margin-top:1em;
	font-size:0.8em;
	

	 
 }
}/*　480end　*/

.rooms img{
	width:100%;
	height:auto;
	border:solid 1px #ccc;
	padding:2px;

	 
 }
 
.rooms li {
  border-bottom: dotted 1px #cecccd;
  padding: 3px 5px;
  list-style: none;

}

.rooms li:first-child {
	background-color: #3399FF;
	background-color: #FFF;
	border-bottom: solid 1px #cecccd;
	font-size: 1.2em;
	color: #FFF;
	color: #696969;
	}
	
.rooms li:first-child a{
	color: #FFFFFF;
	color: #696969;
	text-decoration: none;
	font-weight: bold;
	}
	
.rooms li:first-child a:hover{
	color: #999999;
	}

li .border_none {
  border: none;
}
 
.room-type1{
	color:#9D8D65;
	height: 1.8em;
	display: block;
	font-size: 1.6em;
	margin: 0 1px 8px 1px;
	padding-top: 0;
	padding-right: 8px;
	padding-bottom: 0;
	padding-left: 8px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #9D8D65;
	box-shadow: 0px 2px 0px #E4E4E4;

 }
 
.room-type2{
	height: 1.8em;
	display: block;

	font-size: 1.6em;
	padding: 0 8px;
	margin: 0 1px 8px 1px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	box-shadow: 0px 2px 0px #E4E4E4;	 
 }
 
.room-inner{
	padding: 10px;
	background-color: #F9F9F9;
	margin: 3px;
	border-radius: 3px;
	box-shadow: 2px 2px 3px #E4E4E4;
 }
 
  .room-type-non{
	height: 1.8em;
	display: block;
	font-size: 1.6em;
	padding: 0 8px;
	margin: 0 1px 8px 1px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #EBEBEB;
	box-shadow: 0px 2px 0px #F8F8F8;
 }
 
 .room-inner-non{
	margin: 3px;
	text-align: center;
	padding-top: 12em;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	color: #D8D8D8;
 }
.room-inner-non i{
	font-size: 4em;	
 }
 
  @media screen and (max-width:1023px) { /*　700px　*/
.room-type1{
	height: 1.8em;
	display: block;
	font-size: 1.1em;
	margin: 0 1px 8px 1px;
	padding-top: 0;
	padding-right: 8px;
	padding-bottom: 0;
	padding-left: 8px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #9D8D65;
	box-shadow: 0px 2px 0px #E4E4E4;

 }
 
.room-type2{
	height: 1.8em;
	display: block;

	font-size: 1.1em;
	padding: 0 8px;
	margin: 0 1px 8px 1px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	box-shadow: 0px 2px 0px #E4E4E4;	 
 }
}/*　480end　*/
 

/* ルームボタンのCSS　*/
.btn-icon {
	display: block;
	max-width: 150px;
	text-align: center;
	background-color: #99CC33;
	background-color: #FFF;
	font-size: 16px;
	color: #FFF;
	color: #696969;
	text-decoration: none;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 5px;
	position: relative;
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
}

.btn-icon:hover {
  opacity: 0.8;
}

.btn-icon-w {
	display: block;
	max-width: 250px;
	text-align: center;
	background-color: #;
	font-size: 16px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 5px;
	position: relative;
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #FFF;
}

.btn-icon-w:hover {
  opacity: 0.8;
}


.btn-icon-i {
	display: block;
	max-width: 450px;
	text-align: center;
	
	background-color: #993333;
	background-color: #333333;
	font-size: 28px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 5px;
	position: relative;
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	letter-spacing: 5px;
}

.btn-icon-i:hover {
  opacity: 0.8;
}
  @media screen and (max-width:1023px) { /*　700px　*/
.btn-icon-i {
	display: block;
	max-width: 450px;
	text-align: center;
	
	background-color: #993333;
	background-color: #333333;
	font-size: 1.4em;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 5px;
	position: relative;
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	letter-spacing: 5px;
}

.btn-icon-i:hover {
  opacity: 0.8;
}
}/*　480end　*/
 
/*----coupon.html----------------*/
.coupon-box {
	font-size: 1.7em;
	margin: 2em auto;
	padding: 1.2em;
	color: #555555; /* 文字色 */
	background-color: #fff;
	border: 4px double #999999; /* 枠線の太さ・色 */
	box-shadow: 2px 2px 2px #ccc;/* 影の色 */
}

.input50{
  width:50%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.input100{
  width:100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width : 768px){
.input50{
  width:100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
}