@charset "utf-8";



/*---------------------------------------------------------------------------*/
/*各ボックスの設定（共通）*/
.room-category-list {
	float: left;	/*左に回り込み*/
	width: 31.5%;		/*幅 4つの時*/
	overflow: hidden;
	background: #FFFFFF;	/*背景色*/
	margin-left: 1.5%;	/*ボックス同士の左右間の余白*/
	margin-bottom: 20px;	/*ボックス同士の上下間の余白*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	/*border-radius: 6px;		角丸のサイズ。この行削除すれば通常の長方形になる。*/

    height: auto;
    -ms-overflow-style: none;    /* スクロールバー非表示　IE, Edge 対応 */
	line-height: 1.4;
	overflow-y:hidden;
	position: relative;
}
.room-category-list a {
	display: block;
	overflow: auto;
	text-decoration: none;

    height: auto;
	transition: 1.0s;
}

.room-category-list a:hover {
	background: #f4f4f4;	/*マウスオン時の背景色*/
}

/*画像の設定*/
.room-category-list img.img {
	width: 100%;	/*画像の幅*/
	/*height: 140px;	画像の高さ（CMS専用）高さを固定させたくないならこの１行だけ削除する。*/
	/*height: auto;	画像の高さ*/
	/*padding-bottom: 10px;	画像下に空ける余白*/
}
/*右側のテキスト欄*/
.room-category-list .text {

}
/*h4見出しタグの設定*/
.room-category-list h4 {
	text-align: left;
	padding-left: 1%;
	padding-bottom: 0;
	font-size: 1.3em;
	color: #000000;
}
/*pタグの設定*/
.room-category-list p {
	text-align: left;
	padding-left: 1%;
	font-size: 0.8em;
	color: #000000;
}
/*３カラムタイプのボックス設定*/
.room-category-list.c3 {
	width: 31%;	/*ボックスの幅*/
	margin: 0 1% 20px;	/*上、左右、下へのボックスの外側にとる余白*/
	float: left;
	height: auto;	/*高さ。下の「.list.c3 a」のheightと合わせる。*/
	text-align: right;	/*文字をセンタリング*/
}

/*h4見出しタグの設定*/
.room-category-list.c3 h4 {
	/*font-size: 1em;*/
	text-align: right;
}

.room-category-list.c3 a {
	height: auto;
}
/*３カラムタイプの画像設定*/
.room-category-list.c3 img.img {
	float: none;
	width: 100%;
}
.room-category-list.c3 .text {
	padding: 2% 1% 2% 1%;	/*上、右、下、左への余白*/
	margin-left: 0;
}

.room-category-list.c3 .text h4 {
	font-size: 0.8em;
}

/*ボックスにリンク指定がされた場合に出る「→」マーク*/
.room-category-list a::before {

}
/*マウスオン時の「→」マーク*/
.room-category-list a:hover::before {
	/*background: #416d42;	背景色*/
	/*width: 40px;		幅*/
	/*line-height: 40px;	高さ*/
}
/*１カラムでページを表示時の３カラムボックスの高さ*/
.c1 .room-category-list.c3,
.c1 .room-category-list.c3 a {
	/*height: 400px;*/
}


@media screen and (max-width:767px){
    .room-category-list {
		width: 97%;
		margin-left: 1.5%;	/*ボックス同士の左右間の余白*/	
		margin-right: 1.5%;	/*ボックス同士の左右間の余白*/
    }
	.room-category-list.c3,.room-category-list.c3 a {
		width: 97%;
		margin-left: 1.5%;	/*ボックス同士の左右間の余白*/	
		margin-right: 1.5%;	/*ボックス同士の左右間の余白*/
	}
}



/*画面幅1200px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1200px){

/*SERVICEページ
---------------------------------------------------------------------------*/
/*３カラムタイプのボックスの高さ*/
.room-category-list.c3,
.room-category-list.c3 a {
	/*height: 360px;*/
}
/*１カラムでページを表示時の３カラムボックスの幅*/
.c1 .room-category-list.c3 {
	width: 23%;
}

/*h4見出しタグの設定*/
.room-category-list.c3 h4 {
	font-size: 1.2em;
}

}



/*画面幅1600px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1600px){

/*SERVICEページ
---------------------------------------------------------------------------*/
/*３カラムタイプのボックスの高さ*/
.room-category-list.c3,
.room-category-list.c3 a {
	/*height: 360px;*/
}
/*１カラムでページを表示時の３カラムボックスの幅*/
.c1 .room-category-list.c3 {
	width: 20%;
}
/*共通*/
.room-category-list.c3,
.c1 .room-category-list.c3 {
	/*max-width: 400px;	この幅以上には広がらないようにする*/
}

}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px){

/*SERVICEページ
---------------------------------------------------------------------------*/
/*画像の設定*/
.room-category-list img.img {
	float: none;
	width: 100%;
}
/*右側のテキスト欄*/
.room-category-list .text {
	/*padding: 2%;*/
	padding: 2% 70px 2% 2%;
	margin-left: 0;
}
/*３カラムタイプのボックス設定*/
.room-category-list.c3 {
	width: auto;
	margin: 0 0 20px;
	float: none;
	/*height: auto;*/
}
.room-category-list.c3 a {
	height: auto;
}



}


/*---------------------------------------------------------------------------*/
/* 写真スライド関係(宿泊) */


.photoslide {
	max-width: 1200px;
	width: 100%;
	margin:0 auto;
}

.photoslide img {
	max-width: 1200px;
	width: 100%;
	margin-bottom: 20px;
}

.bx-wrapper .bx-viewport {
	box-shadow: none;
	border: none;
	left: 0;
}


/*---------------------------------------------------------------------------*/
/* スペック関係 */

.room_comment {
	width: 100%;
	font-size: 1.2em;
	margin-bottom: 10px;   
}

.room_info_suite dl,.room_info dl {
	padding: 15px 0;
	border-bottom: 1px solid #ccc;
}

.room_info_suite dt,.room_info dt {
	padding-bottom: 5px;
}

@media screen and (min-width: 1200px) {
	.room_info_suite dt,.room_info dt {
		clear: left;
		float: left;
		width: 35%;
	}
	.room_info_suite dd,.room_info dd {
		margin-left: 11%;
	}
}

.room_info_suite {
    width: 30%;
	float: left;
	margin-top: 10px;
}
.room_info {
    width: 35%;
	float: left;
	margin-top: 10px;
}

.room_layout_suite {
    width: 40%;
	float: left;
	margin-top: 10px;
	margin-left: 5%;
}
.room_layout {
    width: 30%;
	float: left;
	margin-top: 10px;
	margin-left: 5%;
}
.room_layout_suite img,.room_layout img {
    width: 100%;
}

.room_spec_suite {
	width: 20%;
	float: left;
	margin-top: 10px;
	margin-left: 5%;
	line-height: 1.1em;	
}
.room_spec {
	width: 25%;
	float: left;
	margin-top: 10px;
	margin-left: 5%;
	line-height: 1.1em;	
}

/*---------------------------------------------------------------------------*/
/* スペックアイコン関係 */

ul.room_facilities li {
	display: inline;

}

ul.room_facilities {
	padding: 0px 30px 0px 30px;

}

@media screen and (max-width: 768px) {
	ul.room_facilities img{
		width: 20%;
	}
}


/*---------------------------------------------------------------------------*/
/* ギフトカード関係 */

.giftcardcomment {
	float: left;
	width: 50%;
	margin-left: 40px;
}

.giftcardcomment dl {
	padding: 15px 0;
	border-bottom: 1px solid #ccc;
}

.giftcardcomment dt {
	padding-bottom: 5px;
}

@media screen and (min-width: 900px) {
	.giftcardcomment dt {
		clear: left;
		float: left;
		width: 35%;
	}
	.giftcardcomment dd {
		margin-left: 11%;
	}
}

.giftcardphoto {
	float: right;
	width: 40%;
}
.giftcardphoto img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	.giftcardcomment {
		width: 100%;
		margin-left: 10px;
	}	
	.giftcardphoto {
		width: 100%;
		margin: 20px 0px 10px 20px;
	}
	
	.giftcardcomment dt {
		clear: left;
		float: left;
		width: 35%;
	}
	.giftcardcomment dd {
		margin-left: 11%;
	}
}