@charset "utf-8";
/* ===================================================================

 file name  :reform.css
 style info :ビーバーハウスにお住まいの方のリフォーム

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

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

	overwrite

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

#pageheader{
	padding-bottom: 25px;
	background: #fefdf8 url("../images/reform/bg_homes.svg") repeat-x center bottom / auto 100px;
}
#pageheader .sec-inner-1100{
	text-align: center;
}
#pageheader h1 {
	position: relative;
	padding: 90px 0 0;
	margin-bottom: 0.3em;
	line-height: 1.3;
	font-size: 2.5rem;
	font-weight: 700;
}
#pageheader h1::before{
	content: '';
	background: url(../images/reform/ico_reform.svg) no-repeat center center / contain;
	width: 35px;
	height: 35px;
	position: absolute;
	top: 45px;
	left: calc(50% - 17px);
}
#pageheader p{
	margin: 0.4em 0 20px;
	padding: 0 0.3em;
	display: inline-block;
	background: #e4a59b;
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
}
@media screen and (max-width: 374px){
	#pageheader h1 {
		font-size: 2.2rem;
	}
}
@media screen and (min-width: 768px){
	#pageheader{
		padding-bottom: 0;
		background: #fefdf8 url("../images/reform/bg_homes.svg") repeat-x center bottom / auto 132px;
	}
	#pageheader .sec-inner-1100{
		position: relative;
	}
	#pageheader h1 {
		padding: 140px 0 0;
		font-size: 4rem;
	}
	#pageheader h1::before{
		width: 56px;
		height: 56px;
		top: 80px;
		left: calc(50% - 28px);
	}
	#pageheader p{
		margin: 0.4em 0 94px;
		font-size: 2rem;
	}
}


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

#main .mv{
	margin: 0 0 10px;
}
#main .mv figure{
	position: relative;
	z-index: 1;
}
#main .mv .mv-lead{
	background: #fff;
	margin: -40px 0 0;
	padding: 30px 20px;
	position: relative;
	z-index: 10;
}




@media screen and (min-width: 768px){
	#main .mv{
		margin: 0 0 80px;
	}
	#main .mv figure{
		text-align: center;
		overflow: hidden;
	}
	#main .mv figure img{
		margin: -7% 0 -12%;
	}
	#main .mv .mv-lead{
		max-width: 925px;
		margin: -80px auto 0;
		padding: 50px 80px;
	}

}

/*
	#merit
--------------------------------------*/
#merit{
	margin: 0 0 45px;
	padding: 40px 0;
}

#merit h2{
	margin: 0 0 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 1.9rem;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}
#merit h2::before,
#merit h2::after{
	content: "";
	display: inline-block;
	width: 1px;
	height: 72px;
	background: #fff;
}
#merit h2::before{
	transform: rotate(-15deg);
	margin: 0 0.8em 0 0;
}
#merit h2::after{
	transform: rotate(15deg);
	margin: 0 0 0 0.8em;
}

#merit ol li{
	margin: 0 0 15px;
	padding: 15px;
	background: #fff;
	border-radius: 5px;
}
#merit ol li h3{
	margin: 0 0 15px;
	padding: 0 0 15px 54px;
	line-height: 1.3;
	border-bottom: solid 1px #e4a59b;
	position: relative;
}
#merit ol li h3 .num{
	display: block;
	width: 40px;
	height: 40px;
	padding: 7px 0 0;
	background: url("../images/reform/bg_fuki.svg") no-repeat 50% 50% / 100% auto;
	font-size: 1rem;
	line-height: 1;
	font-weight: 700;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}
#merit ol li h3 .num span{
	display: block;
	font-size: 1.4rem;
}
#merit ol li h3 .ttl-txt{
	display: block;
	color: #d3594a;
	font-weight: 700;
	font-size: 1.7rem;
}
#merit ol li .f-block{
	display: flex;
	justify-content: space-between;
}
#merit ol li .f-block .txt-block{
	width: 52%;
}
#merit ol li .f-block figure{
	width: 45%;
}

#merit ol li:nth-child(2) .bdr{
	margin: 15px 0 10px;
	padding: 18px;
	border: solid 2px #e4a59b;
	background: #fef6f6;
	border-radius: 5px;
}
#merit ol li:nth-child(2) .bdr h4{
	margin: 0 0 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.5;
}
#merit ol li:nth-child(2) .bdr h4 img{
	width: 33px;
}
#merit ol li:nth-child(2) .bdr h4 span{
	margin: 0 0 0 10px;
	font-size: 1.2rem;
	font-weight: 700;
}




@media screen and (min-width: 768px){
	#merit{
		margin: 0 0 120px;
		padding: 120px 0;
	}
	#merit h2{
		margin: 0 0 30px;
		font-size: 3.6rem;
	}
	#merit h2::before,
	#merit h2::after{
		height: 80px;
	}
	#merit h2::before{
		margin: 0 2em 0 0;
	}
	#merit h2::after{
		margin: 0 0 0 2em;
	}

	#merit ol{
		max-width: 925px;
		margin: 0 auto;
	}
	#merit ol li{
		margin: 0 0 15px;
		padding: 30px 50px 50px;
		border-radius: 10px;
		position: relative;
	}
	#merit ol li h3{
		min-height: 78px;
		margin: 0 0 30px;
		padding: 0 0 20px 100px;
		line-height: 1.3;
	}
	#merit ol li h3 .num{
		width: 70px;
		height: 70px;
		padding: 15px 0 0;
		line-height: 1.2;
		font-size: 1.4rem;
	}
	#merit ol li h3 .num span{
		font-size: 2rem;
	}
	#merit ol li h3 .ttl-txt{
		padding: 18px 0 0;
		font-size: 2.4rem;
	}
	#merit ol li .f-block figure{
		text-align: center;
	}


	#merit ol li:nth-child(2) .f-block figure{
		position: absolute;
		top: 250px;
		right: 30px;
	}
	#merit ol li:nth-child(2) .bdr{
		width: 420px;
		margin: 50px 0 10px;
		padding: 30px;
		border: solid 4px #e4a59b;
		border-radius: 10px;
		text-align: center;
	}
	#merit ol li:nth-child(2) .bdr h4{
		margin: 0 0 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1.5;
	}
	#merit ol li:nth-child(2) .bdr h4 img{
		width: 50px;
	}
	#merit ol li:nth-child(2) .bdr h4 span{
		margin: 0 0 0 10px;
		font-size: 1.6rem;
		font-weight: 700;
	}

}