/* CSS Document */

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

　Premium Rooms

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

/*メインビジュアル　タイトル
-------------------------------------------------- */
.mv_title{
	background-image: url(images/mv_img.jpg);
}
.mv_title img{
	width: 800px;
}
@media screen and (max-width:736px){
	.mv_title img{
		width: 275px;
	}
}

/*前書き
-------------------------------------------------- */
.main_intoro_wrap{
	background-color: #36354D;
	background-image: url("images/intr_bg_bl.png"),url("images/intr_bg_tr.png");
	background-position: bottom left,top right;
	background-size: 443px auto,443px auto;
	background-repeat: no-repeat,no-repeat;
	color: #fff;
}

.main_intoro_copy{
	background-image: url("images/main_intoro_copy_bg.png");
}
.main_intoro_copy img{
	height: 182px;
}
.main_intoro_text {
    width: 800px;
    margin: 0 auto;
}
.main_intoro_text p{
	text-align: center;
}
.main_intoro_movie {
	position: relative;
	width: 100%;
	max-width: 800px;
	aspect-ratio: 803 / 460; /* 元の縦横比を維持 */
  	margin: 0 auto;
	margin-top: 1.5em;
}
.main_intoro_movie iframe{
    position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  border: none;
}
.local_nav li a{
	color: #fff;
}
@media screen and (max-width:736px){
	.main_intoro_wrap{
		background-size: 40% auto,40% auto;
	}
	.main_intoro_copy img{
		height: 91px;
	}
	.main_intoro_text {
		width: 90%;
		margin: 0 auto;
	}
	.main_intoro_text p{
		text-align: left;
	}
}


/*コンテンツ（メイン）とコンテンツ（サブ）交互レイアウト設定 辻褄が合わない時
-------------------------------------------------- */
@media screen and (min-width:737px),print{
/*
	#MAIN_CONTENTS_WRAP > .main_content#typeb .content,
	#MAIN_CONTENTS_WRAP > .main_content#breakfast .content{
		float: right;
		border-radius: 5px 0 0 0;
		background-position: left 650px top 150px;
	}
	#MAIN_CONTENTS_WRAP > .main_content#typeb .sub_content,
	#MAIN_CONTENTS_WRAP > .main_content#breakfast .sub_content{
		float: left;
	}
	#MAIN_CONTENTS_WRAP > .main_content#typeb .content_inner,
	#MAIN_CONTENTS_WRAP > .main_content#breakfast .content_inner{
		float: left;
		padding: 0 15px 0 80px;
	}
*/
	#MAIN_CONTENTS_WRAP > .main_content#high .content{
		float: left;
		border-radius: 0 5px 0 0;
		background-position: right 650px top 150px;
	}
	#MAIN_CONTENTS_WRAP > .main_content#high .sub_content{
		float: right;
	}
	#MAIN_CONTENTS_WRAP > .main_content#high .content_inner{
		float: right;
		padding: 0 80px 0 15px;
	}
}

/*====================================================
　共通
====================================================*/
.content_gray h6{
	font-size: 1.1em;
	margin: 2em 0 .5em;
	padding: 0 0 .5em;
	border-bottom: #C3C3C3 solid 1px;
}
.content_gray .atention{
	text-indent: -1em;
	padding: 0 0 0 1em;
}

/*====================================================
　タイトル（客室）
====================================================*/
.title_content{
	background-image: url("images/sec_title_bg.png");
	background-color: #6B6984;
	background-size: 147px auto;
	border-top: 5px solid #B1A04C;
	text-align: center;
	padding: 70px 20px;
	color: #fff;
}
.title_content_text{
	color: #FFF1AD;
	font-size: 1.6em;
	line-height: 2em;
	letter-spacing: .1em;
	margin: 0;
	padding: 0;
}
.title_content_title{
	margin: 0 0 30px;
	padding: 0;
}
#room .title_content_title img{
	height: 100px;
	width: auto;
}
@media screen and (max-width:736px){
	.title_content{
		background-size: 73px auto;
		border-top: 3px solid #B1A04C;
		text-align: center;
		padding: 40px 20px;
	}
	.title_content_text{
		color: #FFF1AD;
		font-size: 1em;
	}
	.title_content_title{
		margin: 0 0 20px;
	}
	#room .title_content_title img{
		height: 50px;
	}
}

/*====================================================
　コラム的な
====================================================*/
.bg_photo{
	background-color: #000;
	color: #fff;
	background-size: cover;
	background-position: center center;
}
.column_intr_wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 100px 20px 0;
}
.column_intr_wrap .column_text{
	width: 44%;
}
.column_intr_wrap .column_img{
	width: 52%;
}
.bg_photo .column_intr_wrap .column_text{order: 2}
.bg_photo .column_intr_wrap .column_img{order: 1}
.column_img img{
	width: 100%;
	height: auto;
}
.column_title{
	margin: 0;
	padding: 0 0 40px;
}
.column_title img{
	max-width: 100%;
	height: auto;
}
.column_text p{
	line-height: 2em;
	font-size: 1.1em;
	margin: 0;
	padding: 0;
}
.column_img_wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 40px 20px 100px;
}
.column_img_wrap .column_img{
	width: 32%;
}
.bg_photo .column_img{
	border: 1px solid rgba(255,255,255,.5)
}
.column_img_cap{
	font-size: 1.2em;
	margin: 0;
	padding: 1em 0;
	text-align: center;
}
.column_title img{
	width: 444px;
}
#service.bg_purple{
	margin-bottom: 0;
}
#BAR.bg_photo{
	background-image: url("images/BAR_bg.jpg");
	background-position: bottom;
	border-top: 5px solid #B1A04C;
}
.column_img_wrap p{
	width: 100%;
	text-align: right;
}
.column_img_wrap p span{
	font-size: 0.9em;
}
@media screen and (max-width:736px){
	.column_intr_wrap{
		display: block;
		padding: 50px 0 0;
	}
	.column_intr_wrap .column_text{
		width: 100%;
	}
	.column_intr_wrap .column_img{
		width: 100%;
		margin-top: 20px;
	}
	.column_title{
		padding: 0 0 20px;
	}
	.bg_photo .column_intr_wrap .column_text{order: 1}
	.bg_photo .column_intr_wrap .column_img{order: 2}
	.column_title img{
		width: 222px;
	}
	/*.column_img_wrap{
		display: block;
		padding: 20px 0 50px;
	}
	.column_img_wrap .column_img{
		width: 70%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}*/
	.column_img_wrap{
		padding: 20px 0 50px;
	}
	.column_img_wrap .column_img{
		width: 49%;
		margin-bottom: 10px;
	}
	.column_img_wrap .column_img:nth-child(3){
		margin: 0 auto;
	}
	.column_img_cap{
		font-size: .9em;
	}
	#service.bg_purple{
		margin-bottom: 0;
	}
	#BAR.bg_photo{
		border-top: 3px solid #B1A04C;
	}
}


/*====================================================
　高層階レイクビューツイン
====================================================*/
/*メインビジュアル
-------------------------------------------------- */
#high .main_content_mv{
	background-image: url("images/room_mv.jpg");
}
#high .content{
	background-image: url(images/high_bg.png);
	background-size: 443px auto;
    background-position: left top !important;
    background-repeat: no-repeat;
}
#high .content_title img{
	min-height: 48px;
	height: auto;
	width: 100%;
}
@media screen and (max-width:736px){
	#high .content_title img{
		min-height: 24px;
	}
	#high .content{
		background-image: none;
		background-color: transparent;
	}
	#high .content_wrap{
		background-image: url(images/high_bg.png);
		background-size: 40% auto;
		background-position: left top !important;
		background-repeat: no-repeat;
	}
}