@charset "utf-8";

/* =================================
メインイメージ
================================= */
.main_img{
	position:relative;
	background-size:100% auto;
	margin-bottom:calc( 68 / 996 * 100%);
}
.slid_box{
	background:center center url(../images/bg_main.jpg) no-repeat;
	background-size:cover;
}
.top_text{
	width:56.72690793052209%;
	width:calc( 565 / 996 * 100%);
	margin:0 0 0 calc( 110 / 996 * 100%);
	position:absolute;
	top:50%;
	transform:translateY(-70%);
	max-width:565px;
}

.scroll_btn{
	position:absolute;
	bottom:15%;
	left:50%;
	text-align:center;
	transform:translateX(-50%);
}
.scroll_btn a{
	display:inline-block;
	width:60px;
}

/* Gallery Rental Room共通
---------------------------------------------------------- */
[class$="_guide"]{
	width:100%;
	padding:calc( 15 / 996 * 100%) calc( 68 / 996 * 100%) ;
}
[class$="_guide"] .inner{
	/* flex */
	display:flex;
	justify-content:space-between;
}

[class$="_guide"] figure{
	width:47.09302325581395%;
	width:calc( 405 / 860 * 100%);
}

[class$="_guide"] [class$="_detail"]{
	width:46.86046511627907%;
	width:calc( 403 / 860 * 100%);
}

[class$="_detail"] dt{
	margin:11.16625310173697% 0 0;
	margin:calc( 45 / 403 * 100%) 0 0;
}

[class$="_detail"] dd{
	margin:3.722084367245658% 0 0;
	margin:calc( 15 / 403 * 100%) 0 0;
	font-size:16px;
}

[class$="_detail"] [class$="_line"]{
	margin-top:5%;
}

[class$="_detail"] [class$="_line"] a{
	display:block;
	padding:5px 0;
}

[class$="_detail"] [class$="_line"] span{
	display:flex;
	align-items:center;
	justify-content:center;
}

[class$="_detail"] [class$="_line"] span img{
	width:5%;
	margin-left:8%;
}

[class$="_detail"] dd span{font-size:1.125rem;}



.btn a{
	position:relative;
	margin-top:20px;
	padding:14px 0;
	display:block;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	transition:all 0.2s ease;
}
.btn a::before{
	content:'';
	display:block;
	position:absolute;
	top:50%;
	right:8%;
	width:10px;
	height:10px;
	background:transparent;
	border-right:3px solid #000;
	border-top:3px solid #000;
	transform:rotate(45deg) translateY(-60%);
	transition:all 0.2s ease;
}

.brown_line a{
	color:#6a552d;
	border:1px solid #6a552d;
}
.brown_line a::before{border-color:#6a552d;}
.brown_line a:hover{
	color:#fff;
	background:#6a552d;
}
.brown_line a:hover::before{border-color:#fff;}

.white_line a{
	color:#fff;
	border:1px solid #fff;
	border:1px solid #fff;
}
.white_line a::before{border-color:#fff;}
.white_line a:hover{
	color:#6a552d;
	background:#fff;
}
.white_line a:hover::before{border-color:#6a552d;}



/* Gallery
---------------------------------------------------------- */
.gallery_detail dt{
	width:66.74937965260546%;
	width:calc( 269 / 403 * 100%);
}

/* Rental Room
---------------------------------------------------------- */
.rental_room_guide{
	background:url(../images/bg_rental_room.gif)
}

.rental_room_detail dt{
	width:88.58560794044665%;
	width:calc( 357 / 403 * 100%);
}

.rental_room_detail dd p{
	color:#FFF;
}


.content_footer_text{
	padding:calc( 26 / 996 * 100%) 0 calc( 66 / 996 * 100%);
	background:url(../images/bg_index_img.jpg) 0 0 no-repeat;
	background-size:100% auto;
}

.content_footer_text .inner{
	padding:0 calc( 210 / 996 * 100%) 0 0;
	box-sizing:border-box;
}

.content_footer_text p{
	margin-top:calc( 40 / 996 * 100%);
}

/* New Infomation
---------------------------------------------------------- */
.section_info{
	width:calc( 860 / 996 * 100%);
	margin:calc( 66 / 996 * 100%) auto 0;
}
.section_info h2{
	width:calc( 271 / 860 * 100%);
	margin:0 auto;
}

.box_info{
	margin-top:calc( 30 / 860 * 100%);
	padding-top:calc( 52 / 860 * 100%);
	border-top:1px solid #857761;
	/* flex */
	display:flex;
	justify-content:space-between;
}
.box_info a{
	width:calc(251 / 860 * 100%);
	color:#323333;
}
.box_info dd{
	margin-top:calc( 20 / 251 * 100%);
}
.box_info dt img{width:100%;}


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

　SPデザイン用CSS

===================================================================================================================================================================== */
@media screen and (max-width:768px){
	.main{
		font-size:0.7777777778rem;
	}

	.main_img{
		margin:0 auto;
		margin-bottom:calc( 43 / 996 * 100%);
		position:relative;
	}
	.slid_box{
		height:50vh!important;
	}
	.top_text{
		width:56.72690793052209%;
		width:calc( 565 / 996 * 100%);
		margin:0 0 0 11.04417670682731%;
		margin:0 0 0 calc( 110 / 996 * 100%);
		padding:0;
		top:60px;
		transform:none;
		min-width:250px;
	}

	.scroll_btn{
		bottom:10%;
	}

/* ギャラリー案内・多目的ルーム
---------------------------------------------------------- */
	[class$="_guide"]{
		margin:0 auto;
		padding:calc( 80 / 1000 * 100% ) calc( 160 / 1000 * 100%);
	}
	[class$="_guide"] .inner{
		display:block;
		justify-content:;
	}

	[class$="_guide"] figure{
		width:100%;
	}

	[class$="_guide"] [class$="_detail"]{
		width:100%;
	}

	[class$="_detail"] [class$="_line"]{
		margin-top:calc( 60 / 760 * 100% );
	}

	.gallery_detail dt{
		width:calc( 420 / 690 * 100%);
		margin:calc( 45 / 403 * 100%) auto 0;
	}

	.content_footer_text{
		padding:calc( 26 / 996 * 100%) 0 calc( 66 / 996 * 100%) 0;
		background:url(../images/bg_sp_index_img.jpg) 0 0 no-repeat;
		background-size:100% auto;
	}
	.content_footer_text .inner{
		padding:0;
	}

	.content_footer_text p{
		width:calc( 630 / 1000 * 100%);
		margin:0 auto;
		padding-top:calc( 40 / 996 * 100%);
	}

/* New Infomation
---------------------------------------------------------- */
	.section_info{
		width:calc( 690 / 1000 * 100%);
		margin:calc( 66 / 996 * 100%) auto 0;
	}
	.section_info h2{width:60%;}

	.box_info{
		display:block;
		padding-top:calc( 20 / 690 * 100%);
	}

	.box_info a{width:100%;}

	.box_info a dl{
		width:100%;
		display:flex;
		justify-content:space-between;
		align-items:center;
		padding-top:calc( 40 / 690 * 100% );
	}
	.box_info a dt{width:calc( 250 / 690 * 100% );}
	.box_info a dd{
		width:calc( 410 / 690 * 100% );
		margin:0;
	}

}