@charset "utf-8";
/* Copyright 2023 FSFIELD All Rights Reserved. */

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

PC、タブレット、スマートフォン共通

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

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

アルルホームズだからこそできること

------------------------------------------------------------ */
.sec_features{
	padding: 0 40px 100px;
	max-width: 1280px;
	margin: 0 auto;
}

.features{
	display: flex;
	justify-content: space-between;
	margin-bottom: 60px;
}

.features:last-of-type{margin-bottom: 0;}

.features .inner{width: calc(50% - 30px);}

.features .inner h2{
	color: #AC7F71;
	border-bottom: 1px solid #AC7F71;
	padding-bottom: 15px;
	margin-bottom: 20px;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	display: flex;
}

.features .inner h2 .num{
	flex: none;
	margin-right: 10px;
}

.features .inner .txt{
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	line-height: 2;
}

.features .inner .txt p:not(:last-of-type){margin-bottom: 30px;}

.features .inner .image:not(:last-of-type){margin-bottom: 15px;}

.features .inner .image img{
	width: 100%;
	height: auto;
}

.features .inner .image img.sp{display: none;}

.features .inner .image.column{
	display: flex;
	justify-content: space-between;
}

.features .inner .image.column img{width: calc(50% - 10px);}

.features .inner table{
	width: 100%;
	background: #EFF1F3;
}

.features .inner table tr{border-bottom: 1px solid #FFF;}

.features .inner table tr:nth-of-type(1){background: #9BA8B7;}

.features .inner table tr:nth-of-type(even){background: #DEE1E6;}

.features .inner table tr:last-of-type{border-bottom: none;}

.features .inner table th,
.features .inner table td{
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	border-right: 1px solid #FFF;
	padding: 15px 10px;
}

.features .inner table tr:nth-of-type(1) th{
	color: #FFF;
	font-weight: 700;
	font-size: 1.7rem;
	letter-spacing: 0.05em;
}

.features .inner table tr:nth-of-type(1) th:nth-of-type(2),
.features .inner table tr:nth-of-type(1) th:nth-of-type(3){width: 40.701%;}


.features .inner table tr:nth-of-type(1) th:last-of-type,
.features .inner table td:last-of-type{border-right: none;}

/* 2. 建築家とのコラボレーション
---------------------------------------------- */
.sec_features:nth-of-type(2) .features:nth-of-type(2){align-items: flex-end;}

/* アルルホームズ3つのお約束
---------------------------------------------- */
.sec_promise{
	background: #EFF9FE;
	padding: 60px 40px 90px;
}

.promise{
	max-width: 1200px;
	margin: 0 auto;
}

.promise h2{
	position: relative;
	padding: 50px 0 15px;
	border-bottom: 4px solid #193661;
	margin-bottom: 55px;
	line-height: 1.2;
	font-size: 4rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-align: center;
}

.promise h2::before{
	content: "";
	display: block;
	background: #193661;
	width: 4px;
	height: 221px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: rotate(75deg);
	transform-origin: top;
	margin-left: -1px;
}

.promise h2::after{
	content: "";
	display: block;
	background: #193661;
	width: 4px;
	height: 221px;
	position: absolute;
	top: 0;
	right: 50%;
	transform: rotate(-75deg);
	transform-origin: top;
	margin-right: -1px;
}

.promise h2 span{font-weight: 900;}

.promise h2 span:nth-of-type(1){
	color: #19335F;
	font-weight: 700;
}

.promise h2 span:nth-of-type(2){
	color: #C91F3F;
	font-size: 8rem;
	display: inline-block;
	padding: 0 4px;
	vertical-align: -2px;
}

.promise ul li{
	line-height: 2;
	margin-bottom: 45px;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
}

.promise ul li:last-of-type{margin-bottom: 0;}

.promise ul li span{
	display: block;
	font-weight: 900;
	font-style: italic;
	font-size: 2.4rem;
	letter-spacing: 0.2em;
	line-height: 1.6;
	margin-bottom: 15px;
}

/* アルルホームズからのメッセージ
---------------------------------------------- */
.sec_message{
	max-width: 1280px;
	margin: 0 auto;
	padding: 100px 40px 0;
}

.sec_message h2{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.8rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	line-height: 1.6;
	margin-bottom: 45px;
}

.sec_message h2::before{
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #EBDE67;
	display: block;
	margin-right: 120px;
}

.sec_message h2::after{
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #EBDE67;
	display: block;
	margin-left: 120px;
}

.sec_message .txt{
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	line-height: 2;
}

.sec_message .txt p:not(:last-of-type){margin-bottom: 25px;}


@media only screen and (max-width:1024px){ /* 表示領域が1024px以下の場合に適用するスタイル */

	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	タブレット

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

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

	アルルホームズだからこそできること

	------------------------------------------------------------ */
	.features{
		flex-direction: column;
		margin-bottom: 30px;
	}
	
	.features:nth-of-type(even){flex-direction: column-reverse;}

	.features .inner{
		width: 100%;
		margin-bottom: 30px;
	}
	
	.features .inner:last-of-type{margin-bottom: 0;}
	
	.features:nth-of-type(even) .inner:nth-of-type(odd){margin-bottom: 0;}
	
	.features:nth-of-type(even) .inner:nth-of-type(even){margin-bottom: 15px;}
	
	.features .inner .image{
		max-width: 690px;
		margin: 0 auto;
	}
	
	/* 2. 建築家とのコラボレーション
	---------------------------------------------- */
	.sec_features:nth-of-type(2) .features:nth-of-type(2){flex-direction: column;}
	
	.sec_features:nth-of-type(2) .features:nth-of-type(2) .inner:nth-of-type(odd){margin-bottom: 15px;}
	
	.sec_features:nth-of-type(2) .features:nth-of-type(2) .inner:nth-of-type(even){margin-bottom: 0;}
	
	/* 5. 60年保証、地震保証、地盤保証、しろあり保証など第三者のお墨付き
	---------------------------------------------- */
	.sec_features:nth-of-type(5) .features{flex-direction: column-reverse;}
	
	.sec_features:nth-of-type(5) .features .inner:nth-of-type(odd){margin-bottom: 0;}
	
	.sec_features:nth-of-type(5) .features .inner:nth-of-type(even){margin-bottom: 30px;}
	
	/* 7. 将来にわたり安心の資金計画
	---------------------------------------------- */
	.sec_features:nth-of-type(7) .features{flex-direction: column-reverse;}
	
	.sec_features:nth-of-type(7) .features .inner:nth-of-type(odd){margin-bottom: 0;}
	
	.sec_features:nth-of-type(7) .features .inner:nth-of-type(even){margin-bottom: 30px;}
	
}/*--@media--*/


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

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

	アルルホームズだからこそできること

	------------------------------------------------------------ */
	.sec_features{padding: 0 15px 80px;}
	
	.features .inner h2{font-size: 1.6rem;}

	.features .inner .txt{font-size: 1.2rem;}

	.features .inner .txt p:not(:last-of-type){margin-bottom: 20px;}
	
	.features .inner .image:not(:last-of-type){margin-bottom: 10px;}
	
	.features .inner .image img.pc{display: none;}
	.features .inner .image img.sp{display: block;}
	
	.features .inner .image.column img{width: calc(50% - 7.5px);}
	
	.features .inner table th,
	.features .inner table td{
		font-size: 1.1rem;
		padding: 10px 5px;
	}

	.features .inner table tr:nth-of-type(1) th{font-size: 1.3rem;}

	.features .inner table tr:nth-of-type(1) th:nth-of-type(2),
	.features .inner table tr:nth-of-type(1) th:nth-of-type(3){width: 40.289%;}
	
	/* アルルホームズ3つのお約束
	---------------------------------------------- */
	.sec_promise{padding: 50px 15px 45px;}

	.promise h2{
		padding: 22px 0 10px;
		border-bottom: 2px solid #193661;
		margin-bottom: 40px;
		font-size: 2rem;
		font-weight: 700;
	}

	.promise h2::before{
		width: 1.5px;
		height: 107px;
	}

	.promise h2::after{
		width: 1.5px;
		height: 107px;
	}

	.promise h2 span:nth-of-type(2){
		font-size: 4rem;
		padding: 0 4px;
		vertical-align: -2px;
	}

	.promise ul li{
		margin-bottom: 30px;
		font-size: 1.2rem;
	}

	.promise ul li span{
		font-size: 1.6rem;
		margin-bottom: 10px;
	}

	/* アルルホームズからのメッセージ
	---------------------------------------------- */
	.sec_message{padding: 50px 15px 0;}

	.sec_message h2{
		font-size: 1.7rem;
		letter-spacing: 0.2em;
		margin-bottom: 25px;
	}

	.sec_message h2::before{margin-right: 10px;}

	.sec_message h2::after{margin-left: 10px;}

	.sec_message .txt{font-size: 1.2rem;}
	
	.sec_message .txt p:not(:last-of-type){margin-bottom: 20px;}
	

}/*--@media--*/