@charset "UTF-8";
/*日本語*/

.contents201808 *{
}

.contents201808 br{line-height:1;}

.clearfix:after{
	content:"";
	display:block;
	clear:both;
	overflow: hidden; /* Firefoxで、下マージン設定しているのに上にもアキができるバグ対策。追加 */
}
.serif{
	font-family:"ヒラギノ明朝 Pro W6","HiraMinPro-W6",YuMincho,"Yu Mincho","游明朝",serif;
}



@media screen and (max-width:767px){

}

/*--------------------------------------------------------------------------

出し分け

--------------------------------------------------------------------------*/
.isSP{
	display:none;
}
.sp_br{
	display:none;
}
@media screen and (max-width:767px){
	.contents201808 .section-content{
		width:94% !important;
		margin-left:auto !important;
		margin-right:auto !important;
	}
	.isPC{
		display:none;
	}
	.isSP{
		display:inline;
	}
	.pc_br{
		display:none;
	}
	.sp_br{
		display:block;
	}
}


/*--------------------------------------------------------------------------

既存スタイルの上書き

--------------------------------------------------------------------------*/
.features.f-index .section-kv.kv201808{
	background:url(/hebel-rooms/features/img/kv201808_pc.jpg) no-repeat center top
}

.kv201808 .ttl{
	width:351px;
	height:180px;
}

@media screen and (max-width:767px){
	.features.f-index .section-kv.kv201808{
		width:100%;
		height:calc(114vw - 45px);
		min-width:0;
		background:url(/hebel-rooms/features/img/kv201808_sp.jpg) no-repeat center 45px !important;
		background-size:100% auto !important;
	}

}



/*--------------------------------------------------------------------------



--------------------------------------------------------------------------*/
.section_annotation{
	font-size:11px !important;
	margin-top:-15px !important;
}
.feature_image_list{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.feature_image_item{
	width:500px;
	font-size:12px;
	margin-bottom:25px;
}
.feature_image_item img{
	max-width:100%;
	margin-bottom:10px;
}

@media screen and (max-width:767px){
	.section_annotation{
		font-size:3vw !important;
		margin-top:-1vw !important;
	}
	.feature_image_item{
		width:48%;
		margin-bottom:4vw;
	}


}
/*--------------------------------------------------------------------------

アンカー

--------------------------------------------------------------------------*/
.anchor_band{
	width:100%;
	background:#fff;
	min-width:1040px;
	padding:30px 0;
}
.anchor_band_list{
	width:650px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}
.anchor_band_item{
	width:296px;
	border:2px solid #e4e5f0;
}
.anchor_band_item a{
	display:flex;
	width:100%;
	background:#e4e5f0;
	height:76px;
	align-items: center;
	justify-content:center;
	font-size:18px;
	color:#000;
	transition:background ease 0.4s;
	position:relative;
}
.anchor_band_item a:after{
	content:"";
	position: absolute;
	top: 43%;
	right: 50px;
	width: 14px;
	height: 14px;
	border-right: 2px solid #adadad;
	border-bottom: 2px solid #adadad;
	transform: rotate(45deg) translateY(-2px);
	transform-origin: right 50% 0;
}
.anchor_band_item a:hover{
	background:#fff;
	text-decoration:none;
}

.anchor_band_item:nth-child(2) a{
	background:#fff;
}
.anchor_band_item:nth-child(2) a:hover{
	background:#e4e5f0;
}


@media screen and (max-width:767px){
	.anchor_band{
		min-width:0;
		padding:5vw 0;
	}
	.anchor_band_list{
		width:94%;
	}
	.anchor_band_item{
		width:48%;
	}

	.anchor_band_item a{
		height:auto;
		padding:5vw 0 8vw 0;
		font-size:4vw;
	}

	.anchor_band_item a:after{
		content:"";
		position: absolute;
		top: 75%;
		right: auto;
		left:calc(50% - 8px);
		width: 3.3vw;
		height: 3.3vw;
	}

}


/*--------------------------------------------------------------------------

ハード面／ソフト面

--------------------------------------------------------------------------*/
.feature_hard,
.feature_soft{
	width:100%;
	min-width:1040px;
	padding-top:90px;
}
.feature_headline{
	width:500px;
	margin:0 auto;
	margin-bottom:55px;
	padding:13px 140px 10px 0;
	text-align:right;
	font-size:18px;
	font-weight:bold;
	position:relative;
	border:1px solid #e4e5f0;
}
.feature_soft .feature_headline{
	border:1px solid #e4e5f0;
}
.feature_headline:after{
	content:"feature";
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:240px;
	height:calc(100% - 16px);
	background:#e4e5f0;
	padding-top:16px;
	color:#b5a6b0;
	font-weight:bold;
	font-size:14px;
	text-align:center;
}
.feature_soft .feature_headline:after{
	background:#e4e5f0;
	color:#b5a6b0;
}
.feature_lead{
	width:1040px;
	margin:0 auto;
	line-height:1.6;
}
.feature_headline+.feature_lead{
	margin-top:-20px;
	padding-bottom:55px;
}

.features_list{
	width:100%;
	min-width:1040px;
}
.features_list_item{
	float:none;
	padding:45px 0;
}
.feature_hard .features_list_item:nth-child(2n+1){
	background:#f3f3f3;
}
.feature_soft .features_list_item:nth-child(2n+1){
	background:#fff;
}
.features_list_inner{
	width:1040px;
	margin:0 auto;
}

.feature_hard {
	background: #f3f3f3;
}


.feature_hard_headline,
.feature_soft_headline{
	text-align:center;
	font-size:20px;
	font-weight:bold;
	position:relative;
	padding-bottom:20px;
	line-height:1.6;
}
.feature_hard_headline small,
.feature_soft_headline small{
	display:block;
	font-size:16px;
	line-height:1.6;
}
.feature_hard_headline:after,
.feature_soft_headline:after{
	content:"";
	display:block;
	position:absolute;
	left:calc(50% - 320px);
	top:100%;
	width:640px;
	height:0;
}
.feature_hard_headline:after{
	border-bottom:1px solid #1c2c7b;
}
.feature_soft_headline:after{
	border-bottom:1px solid #1c2c7b;
}



.feature_subhead{
	padding-top:20px;
	text-align:center;
	font-size:18px;
	font-weight:bold;
}
.feature_text_box{
	padding-top:30px;
	line-height:1.6;
}
.feature_image{
	padding-top:30px;
}

.feature_btn_annotation{
	text-align:center;
	padding-top:25px;
	margin-bottom:-15px;
}

.feature_detail_link{
	width:150px;
	margin:0 auto;
	padding-top:25px;
}
.feature_detail_link a{
	display:block;
	width:100%;
	padding:10px 0;
	background:#1E2380;
	color:#fff;
	font-size:16px;
	line-height:1.4;
	text-align:center;
	transition:background ease 0.4s;
}
.feature_detail_link a:hover{
	background:#5155a2;
	color:#fff;
	text-decoration:none;
}

.feature_insurance_list{
	width:100%;
	display:flex;
	justify-content:space-between;
	margin-top:35px;
}
.feature_insurance_list li{
	float:none;
	width:245px;
	text-align:center;
	font-size:14px;
}
.feature_insurance_list li img{
	margin-bottom:15px;
}


@media screen and (max-width:767px){
	.feature_hard,
	.feature_soft{
		min-width:0;
		padding-top:12vw;
	}
	.feature_headline{
		width:80%;
		margin:0 auto;
		margin-bottom:9vw;
		padding:15vw 0 4vw 0;
		text-align:center;
		font-size:5vw;
	}
	.feature_headline:after{
		width:100%;
		height:8vw;
		padding-top:3vw;
		font-size:4vw;
	}


	.feature_lead{
		width:94%;
	}
	.feature_headline+.feature_lead{
		margin-top:-4vw;
		padding-bottom:6vw;
	}

	.features_list{
		min-width:0;
	}
	.features_list_item{
		float:none;
		padding:5vw 0;
	}
	.features_list_inner{
		width:94%;
	}

	.feature_hard_headline,
	.feature_soft_headline{
		font-size:4.2vw;
		padding-bottom:4vw;
	}
	.feature_hard_headline small,
	.feature_soft_headline small{
		font-size:3vw;
	}
	.feature_hard_headline:after,
	.feature_soft_headline:after{
		left:3%;
		width:94%;
	}


	.feature_subhead{
		padding-top:6vw;
		font-size:4vw;
	}
	.feature_text_box{
		padding-top:8vw;
	}
	.feature_image{
		padding-top:5vw;
	}


	.feature_detail_link{
		width:45%;
		padding-top:5vw;
	}
	.feature_detail_link a{
		padding:2.5vw 0;
		font-size:4vw;
	}

	.feature_insurance_list{
		width:90%;
		margin:0 auto;
		margin-top:4vw;
	}
	.feature_insurance_list li{
		float:none;
		width:23%;
		font-size:3.3vw;
	}
	.feature_insurance_list li img{
		max-width:100%;
		margin-bottom:1vw;
	}


}


/*--------------------------------------------------------------------------



--------------------------------------------------------------------------*/
.feature_gallery{
	width:100%;
	min-width:1040px;
}
.feature_gallery_headline{
	padding:45px 0;
	text-align:center;
	font-size:20px;
	font-weight:bold;
}
.feature_gallery_headline small{
	display:block;
	font-size:16px;
}
.feature_gallery_box{
	background:url(/hebel-rooms/features/img/feature_galleryBG_pc.jpg) no-repeat center top;
	width:100%;
	height:320px;
}

.feature_gallery_subhead{
	text-align:center;
	padding-top:115px;
}

.feature_gallery_list{
	padding-top:30px;
}
.feature_gallery_list li{
	width:420px;
	margin:0 auto;
	margin-bottom:30px;
	float:none;
}
.feature_gallery_list li a{
	width:100%;
	display:block;
	background:#1E2380;
	padding:15px 0;
	color:#fff;
	font-size:16px;
	line-height:1.4;
	text-align:center;
	transition:background ease 0.4s;
}
.feature_gallery_list li a:hover{
	background:#5155a2;
	color:#fff;
	text-decoration:none;
}



@media screen and (max-width:767px){
	.feature_gallery{
		min-width:0;
	}
	.feature_gallery_headline{
		padding:6vw 0;
		font-size:4.2vw;
	}
	.feature_gallery_headline small{
		font-size:3vw;
	}
	.feature_gallery_box{
		background:url(/hebel-rooms/features/img/feature_galleryBG_sp.jpg) no-repeat center top;
		background-size:100% auto;
		width:100%;
		height:37.5vw;
	}

	.feature_gallery_subhead{
		padding-top:10vw;
	}

	.feature_gallery_subhead img{
		width:36%;
		margin:0 auto;
	}

	.feature_gallery_list{
		padding-top:5vw;
	}
	.feature_gallery_list li{
		width:94%;
		margin-bottom:3vw;
	}
	.feature_gallery_list li a{
		padding:3vw 0;
		color:#fff;
		font-size:4vw;
	}
}

/* 2022.09 add */
.feature_headline_lead {
	line-height: 1.6;
	margin-bottom: 55px;
}
@media screen and (max-width:767px){
	.feature_headline_lead {
		margin-bottom: 6vw;
	}
}