@charset "UTF-8";

/* 読み込みは header.php の <link> に移した（@import のネストによる直列読込を解消するため）。
   このファイルを単体で開いても他のCSSは読み込まれない。 */
/* font-family: 'FontAwesome';
font-family: 'Abel', sans-serif; */


/* ---------------------------------------------------------------------------------------- トップページ */
.main{
	width:100%;
	height:729px;
	/*background:url(../images/teaser/main01.jpg) no-repeat center center;*/
	background-size:cover;
	position:relative;
}

.main h2{
	width:483px;
	height:483px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-241.5px;
	margin-top:-241.5px;
	z-index:999;
}
.main h2 a{ display:block; }




#bgFade div {
	position: absolute;
}
.slide01 {
	background:url(../images/teaser/main01.jpg) no-repeat center center;
	background-size:cover;
	width:100%;
	height:729px;
}
.slide02 {
	background:url(../images/teaser/main02.jpg) no-repeat center center;
	background-size:cover;
	width:100%;
	height:729px;
}
.slide03 {
	background:url(../images/teaser/main03.jpg) no-repeat center center;
	background-size:cover;
	width:100%;
	height:729px;
}
.slide04 {
	background:url(../images/teaser/main04.jpg) no-repeat center center;
	background-size:cover;
	width:100%;
	height:729px;
}





.idx-reservation{	background:#BFAD54; }
		.idx-reservation:after{ content: ""; clear: both;	height: 0; display: block; visibility: hidden; }


.idx-reservation h2{ font-size:31px; }
.idx-reservation h2 span{	display:block; font-size: 14px; }


.idx-reservation-heading{
	box-sizing:border-box;
	background:#202935;
	color:#FFF;
	padding:30px 30px 100px 100px;
	width:30%;
	float:left;
	position:relative;
	top:-20px;
}

.idx-reservation-box{
	box-sizing:border-box;
	padding:20px 50px;
	width:70%;
	float:left;
}
.idx-reservation-box form{
	box-sizing:border-box;
	display:block;
	width:85%;
	padding-right:180px;
	margin-bottom:15px;
	position:relative;
}
.idx-reservation-box form:after{ content: ""; clear: both;	height: 0; display: block; visibility: hidden; }

.idx-reservation-box .date .dynDate {
  background: #FFF;
  padding: 3px 0 3px 10px;
  margin: 0;
  height: 28px;
  line-height: 28px;
  margin-bottom: 5px;
  float: left;
  margin-right: 5px;
	position:relative;
	top:2px;
}
.idx-reservation-box .date .dynDate input[type=text]{ border:none; }
.idx-reservation-box .date .dynDate input[type=text]:after{ content:"/"; display:inline-block; }

.bookingDate{
	float:left;
}

.bookingDate .cmbNights,
.bookingDate .cmbRooms{
    background: #FFF;
    border: none;
    border-radius:0;
    margin-bottom: 3px;
    height:  35px;
    line-height: 35px;
    text-align: left;
    text-indent: 5px;
    vertical-align: middle;
    width: 45px;
}

.cmbPerson0{
	background: #FFF;
  border: none;
  border-radius:0;
	margin-right:5px !important;
  height:  35px;
  line-height: 35px;
  text-align: left;
  text-indent: 5px;
  vertical-align: middle;
  width: 45px;
}


.dynPersons{
	width:100px;
	float:left;
}

.dynDispunit{
	display:block;
	clear:both;
}

.dispPlanRoot, .dispRoomRoot, .dispCaldRoot{
	float:left;
}

.buttonSubmit{
	box-sizing:border-box;
	border:none;
	display:block;
	width:150px !important;
	height:73px;
	font-size:16px;
	background:#1F2834;
	color:#FFF;
	cursor:pointer;
	position:absolute;
	right:0;
	bottom:0;
}

.buttonCancel{
	box-sizing:border-box;
	border:none;
	display:block;
	width:150px !important;
	height:33px;
	font-size:11px;
	background:#908338;
	color:#FFF !important;
	cursor:pointer;
	position:absolute;
	right:0;
	bottom:-40px;
}



/* ラベルのスタイル　*/
.bookingDate label {
	padding-left:25px;			/* ラベルの位置 */
	display:		block;
	cursor:			pointer;
	position:		relative;
}

/* ボックスのスタイル */
.bookingDate label:before {
	content:		'';
	width:			20px;			/* ボックスの横幅 */
	height:			20px;			/* ボックスの縦幅 */
	display:		inline-block;
	position:		absolute;
	left:			0;
	background-color:	#fff;
}
/* 元のチェックボックスを表示しない */
.bookingDate input.style_chkymd[type=checkbox] {
	display:block;
}
/* チェックした時のスタイル */
.bookingDate label:before:checked{
	font-family: 'FontAwesome';
	content:'\f00c';		/* チェックの文字 */
	color:#000;			/* チェックの色 */
}

.idx-about{	padding:65px 0; }
.idx-about-inner{ max-width:1142px; margin:0 auto;}
.idx-about h2{ font-size:31px; text-align:center; margin-bottom:60px; }
.idx-about h2 span{ display:block; font-size: 14px; }
.idx-about-box{
	box-sizing:border-box;
	padding:0 15px 15px;
	float:left;
	text-align:center;
}
.idx-about .idx-about-box h3{
	font-weight:bold;
	margin:15px 0;
}
.idx-about .idx-about-box p{
	margin:0 auto 20px;
	text-align:left;
	line-height:1.75;
}

.idx-about-box img{ width:100%; height:auto; }


.idx-plan img{ vertical-align:middle; }
.idx-plan .idx-plan-info{
	box-sizing:border-box;
	padding:3%;
	color:#FFF;
}
.idx-plan .heading{
	padding:10px 0 30px;
	margin-bottom:30px;
	border-top:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
}
.idx-plan .heading h2{ font-size:24px; }
.idx-plan p{
	margin-bottom:15px;
}

.price{	float:right; font-size:14px;padding-top: 10px; }
.plan-no{ color:#C5B364; letter-spacing:1px; }


.plan-info{ box-sizing:border-box; margin-bottom:15px; padding:10px; background:#1A212B; }
		.plan-info:after{ content: ""; clear: both;	height: 0; display: block; visibility: hidden; }


.plan-info dt{
	box-sizing:border-box;
	width:100px;
	padding:5px 0 3px;
	color: #C5B364;
	float:left;
}

.plan-info dd{
	padding:5px 0 3px 100px;

}




.idx-photogallery{ padding:65px 0; text-align:center; }

.idx-photogallery h2{ font-size:31px; text-align:center; margin-bottom:60px; }
.idx-photogallery h2 span{ display:block; font-size: 14px; }

/* min-width:1142px と max-width:90% が矛盾しており（min-width が勝つ）、
   960〜1141px の画面幅でページからはみ出して横スクロールが出ていた。
   PC用CSSは 960px 以上で適用されるので、その幅でも収まるようにする。 */
.idx-photogallery ul{
	 width:90%;
	 max-width:1142px;
	 margin:0 auto 75px;
}

.idx-photogallery ul:after{ content: ""; clear: both;	height: 0; display: block; visibility: hidden; }

.idx-photogallery ul li{
	width:20%;
	height:20%;
	float:left;
}

.idx-photogallery ul li a{
	display:block;
	width:100%;
	height:228px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size: cover;
}

.idx-photogallery ul li a:hover{ opacity:.7;}

.idx-photogallery ul li a img{ display:none; }




.idx-info-wrap{
	border-bottom:#DDDDDD solid 1px;
}

.idx-info-wrap h2{
	margin-bottom:40px;
	font-size:32px;
}

.idx-info-wrap h2 span{ font-size:16px;}

.idx-info-wrap .col-md-6{
	box-sizing:border-box;
	padding:3%;
}


.facility-info dt{
	width:24%;
	float:left;
	padding:7px 0 5px 0;
}

.facility-info dd{
	padding:7px 0 5px 26%;
	position:relative;
}

.facility-info dd:before{
	content:":";
	position:absolute;
	left:24%;
	top:7px;
}

.idx-info-contact{
	padding:3%;
	color:#FFF;
}
.idx-info-contact dl{ padding:72px 0 102px;}
.idx-info-contact dt{
	text-align:center;
	font-size:50px;
}
.idx-info-contact dt span{
	margin-right:10px;
}

.idx-info-contact dd{
	text-align:center;
	font-size:32px;
}

.idx-access{
	padding-top:30px;
}

.idx-access h2{
	margin-bottom:40px;
	font-size:32px;
	padding:0 5%;
}

.idx-access h2 span{ font-size:16px;}

/* #google-map{
	width:100%;
	height:300px;
} */

#map{
  width: 100%!important;
  height: 350px;
  overflow: hidden;
}

#map iframe {
  width: 100%!important;
  height: 350px;
}



/* ---------------------------------------------------------------------------------------- SPA */
.spa-about{
	position:relative;
}
		.spa-about:after{ content: ""; clear: both;	height: 0; display: block; visibility: hidden; }


.spa-about .thumb{
	float:right;
}

.spa-about .thumb img{ max-width:100%; }

.spa-about-read{
	width:380px;
	padding:30px;
	background-color:rgba(255,255,255,.8);
	position:absolute;
	left:0;
	top:105px;
}

.spa-data .col-md-6.left{
	box-sizing:border-box;
	padding-right:2px;
}

.spa-data .col-md-6.right{
	box-sizing:border-box;
	padding:0 50px;
}

.spa-data dl { margin-bottom:15px; }
.spa-data dl dt{
	border-bottom:#DDDDDD solid 1px;
	padding-bottom:10px;
	margin-bottom:15px;
	font-size:16px;
	color:#908431;
}
.spa-data dl dd{
	position:relative;
	padding:10px 0 10px 100px;
	font-size:16px;
}

.item{
	font-weight:bold;
	position:absolute;
	left:0;
	top:10px;
}


/* ---------------------------------------------------------------------------------------- Amabe */
.intoro-copy{
	text-align:center;
}

.intoro-copy p{
	margin:7px 0;
}

.open-time{
	position:relative;
	top:-40px;
	font-size:16px;
	text-align:center;
}

.open-time p{ margin-bottom:10px; }

.menu-wrap .col-md-6,
.menu-wrap .col-md-4{
	box-sizing:border-box;
	padding:20px 10px;
}

.menu-thumb{ margin-bottom:7px; }

.menu-wrap dl{ text-align:center; }

.menu-wrap h4,
.menu-wrap dt{
	font-size:20px;
	font-weight:bold;
}

.menu-wrap h4 span,
.menu-wrap dd{ font-size:18px; display:block; margin-top:7px; }

.margin_b30 {
  margin: 0 0 30px 0;
}

.margin_tb20 {
  margin: 20px 0;
}

/* ---------------------------------------------------------------------------------------- Access */
#access-map{
  width: 100%!important;
  height: 500px;
  overflow: hidden;
}

#access-map iframe {
	width:100%!important;
  height: calc(100% + 500px);
  margin-top: -150px;
}


/* ---------------------------------------------------------------------------------------- Room */
.room-box{
	height:420px;
	margin-bottom:100px;
	position:relative;
	overflow:hidden;
}
		.spa-about:after{ content: ""; clear: both;	height: 0; display: block; visibility: hidden; }


.room-box thumb.left{ float:left; }
.room-box thumb.right{ float:left; }

.room-box .thumb img{ max-width:100%; }

.room-data{
	box-sizing:border-box;
	height:250px;
}

.room-data.left{
	width:380px;
	padding:30px;
	background-color:rgba(255,255,255,1);
	position:absolute;
	left:0;
	top:50%;
	margin-top:-125px;
}

.room-data.right{
	width:380px;
	padding:30px;
	background-color:rgba(255,255,255,1);
	position:absolute;
	right:0;
	top:50%;
	margin-top:-125px;
}




.room-data .headline2{
	font-weight: bold;
  text-transform: uppercase;
	border-bottom:none;
  font-size: 36px;
  font-family: 'Montserrat';
	color:#000;
}

.room-data .headline2 span{
	font-size:18px;
	margin-bottom:15px;
	display:block;
}

.room-data p{
	line-height:1.75;
}


.facility-wrap .col-md-4{
	box-sizing:border-box;
	padding:5px;
}

.facility-wrap .col-md-4 h4{
	font-size:16px;
	font-weight:bold;
	margin-top:7px;
}