@charset "utf-8";
/* ===================================================================
CSS information

 file name  :zzz.css
 author     :Ability Consultant
style info  :設定　ハックは最下部に記述
=================================================================== */

/* -----------------------------------------------------------
	共通
----------------------------------------------------------- */

/* ページタイトル画像 */
#header .unav_wrap {
	background: url(../rooms/images/bg_title.jpg) no-repeat center;
	}

/* -----------------------------------------------------------
	各ページ専用指定
----------------------------------------------------------- */

/* 	.con_top 
----------------------------------------------------------- */
#main .con_top {
	background: url(../rooms/images/bg_top.jpg) no-repeat top left;
	height: 269px;
	margin-bottom: 40px;
	margin-top: 60px;
	}
#main .con_top h3 {
	padding: 20px 0 0 21px;
	}
#main .con_top p {
	width: 317px;
	margin: 50px 0 0 21px;
	}
#main .con_top .txt_info{
	background: #fff;
	border: solid 2px #972525;
	padding:  10px 5px;
	margin-top: 25px;
}
#main .con_top .txt_info span{
	color: #972525;
	font-weight: bold;
}


/* 	.con_roo 
----------------------------------------------------------- */
/*和室*/
#main .con_roo {
	background: url(../rooms/images/bg_mid.png) repeat-y;
	margin-bottom: 30px;
	}
#main #type_wa .con_roo_wrap {
	background: url(../rooms/images/bg_wa_top.png) no-repeat top left;
	}
#main #type_you .con_roo_wrap {
	background: url(../rooms/images/bg_wa_top.png) no-repeat top;
	}
#main .con_roo h3 {
	padding: 39px 0 0 54px;
	}
#main .con_roo .box_roo {
	margin: 20px auto;
	width: 898px;
	overflow: hidden;
	}
#main .con_roo .box_roo .photoarea {
	float: left;
	width: 620px;
	}
#main .con_roo .box_roo .textarea {
	float: right;
	width: 266px;
	}
#main .con_roo .box_roo .textarea .con_det_roo {
	overflow: hidden;
	margin-bottom: 20px;
	}
#main .con_roo .box_roo .textarea .tbl_basic {
	width: 104px;
	margin-bottom: 10px;
	}
/*スライダー*/
#main .bx-pager {
	overflow: hidden;
	margin-top: 10px;
	}	
#main .bx-pager .bx-pager-item {
	float: left;
	margin-right: 15px;
	}
#main .bx-pager .bx-pager-item img{
	border:3px solid #ccc;
	width: 24px;
	}
#main .bx-pager .active img{
	border:3px solid #270707;
	}


/*各種ご予約*/
#main .con_res {
	background: #2b0504;
	padding: 0 0 10px 0;
	}
#main .con_res .box_res {
	width: 195px;
	margin: 8px auto 0;
	}
#main .con_res .box_res a {
	color: #fff;
	}
#main .con_res .box_res ul {
	margin-top: 10px;
	}
#main .con_res .box_res ul li {
	line-height: 2;
	}
#main .con_res .box_res .rakuten {
	background: url(../images/header/gnav_res_raku.png) no-repeat left;
	padding-left: 50px;
	}
#main .con_res .box_res .jaran {
	background: url(../images/header/gnav_res_jaran.png) no-repeat left;
	padding-left: 50px;
	}
#main .con_res .box_res .rurubu {
	background: url(../images/header/gnav_res_rurubu.png) no-repeat left;
	padding-left: 50px;
	}

/* 	.con_gui 
----------------------------------------------------------- */

#main .con_gui {
	width:950px;
	clear:both;
}
#main .con_gui .tbl_basic {
	width: 100%;
	margin-bottom: 70px;
	}
#main .con_gui .tbl_basic th{
	width: 20%;
	padding: 5px 0;
	}
/* 	.con_res
----------------------------------------------------------- */
#main .con_rul {
	width:950px;
	background:url(../rooms/images/bg_rule.gif) no-repeat top left;
	padding:21px 0 0 21px;
	margin-bottom:70px;
}
#main .con_rul dl {
	margin-top:30px;
}
#main .con_rul dl dt {
	margin-bottom:8px;
}
	


/*スライドショー1*/
/*=== 画像の表示エリア ================================= */
.slide-show_room01 {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 620px;
  height     : 360px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide-show_room01 img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 8s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide-show_room01 img:nth-of-type(1) { animation-delay: 0s }
.slide-show_room01 img:nth-of-type(2) { animation-delay: 4s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   25% { opacity: 1 }
  50% { opacity: 1 }
  75% { opacity: 0 }
 100% { opacity: 0 }
}
/*スライドショー2*/
/*=== 画像の表示エリア ================================= */
.slide-show_room02 {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 620px;
  height     : 360px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide-show_room02 img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 8s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide-show_room02 img:nth-of-type(1) { animation-delay: 0s }
.slide-show_room02 img:nth-of-type(2) { animation-delay: 4s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   25% { opacity: 1 }
  50% { opacity: 1 }
  75% { opacity: 0 }
 100% { opacity: 0 }
}

/*きた岡用*/

.container {overflow: hidden; width: 930px; margin-left: 10px;}
:root {
  --numOfListA: 9;
  --imgW: 380px;
  --imgH: 229px;
  --mBetweenImg: 50px;
}
.slider-container {
  display: flex;
  font-size: 0;
  animation: slideshow 25s linear infinite;
}
.slider-img {
  width: var(--imgW);
  height:  var(--imgH);
}
.slider-img + .slider-img {margin-left: var(--mBetweenImg);}
@keyframes slideshow {100% {transform: translateX(calc((var(--numOfListA) * var(--imgW) + var(--mBetweenImg) * var(--numOfListA)) * -1));}}






/*======================================

	hack - 各種cssハック - for IE7

=======================================*/
*:first-child+html {}


/*======================================

	hack - 各種cssハック - for IE6

=======================================*/
* html {}