@charset "utf-8";

/* CSS Document */


/*----------------------------------------
	- base
-----------------------------------------*/
:root {
	/* --main_color: #005AB1; */
}

img,picture {
	vertical-align: middle;
}

.contents {
	margin-bottom: 80px;
}

@media only screen and (max-width: 767px){
	.contents {
		margin-bottom: 40px;
	}
}

.anchor {
	padding-top: 240px;
	margin-top: -240px;
}
@media only screen and (max-width: 767px){
	.anchor {
		padding-top: 100px;
		margin-top: -100px;
	}
}

/*=======================================
　共通
=======================================*/

.contents {
	background: url(../../images/estimate/bg_01.jpg) left center/cover no-repeat;
}
.inner.border {
	position: relative;
	padding: 3% 6% 5%;
	background: #fff;
	border: solid 3px #044A82;
	border-radius: 15px;
}
.inner .sttl_img{
	position: absolute;
	top: -75px;
	left: -5%;
	width: 25%;
	max-width: 282px;
}
.sttl_area {
	text-align: center;
}
.sttl_area p {
	display: inline-block;
	margin-bottom: 15px;
	font-size: 30px;
	font-weight: 700;
	color: #E85485;
	border-bottom: solid 1px #E85485;
	text-align: center;
  font-family: 'Noto Serif JP' ;
}
.sttl_area .sttl01 {
	font-size: 40px;
	font-weight: 600;
	color: #064062;
	margin-bottom: 70px;
}
.contents .flex_area {
	display: flex;
	justify-content: space-between;
}
.contents .flex_area .txt_area {
	width: 48%;
	line-height: 2;
}
.contents .flex_area .txt_area .line {
	background-color: #FFE853;
	font-weight: 500;
	line-height: 1.5;
}
.contents .flex_area .img_area {
	width: 48%;
}
.block_und .sttl_area {
	text-align: left;
}
.block_und .sttl_area .sttl02 {
	position: relative;
	padding-left: 45px;
	margin-bottom: 40px;
	font-size: 35px;
	font-weight: 500;
	color: #064062;
}
.block_und .sttl_area .sttl02::before {
	content: '';
	position: absolute;
	left: -2px;
	bottom: 10%;
	width: 39px;
	height: 39px;
	background: url(../../images/estimate/icon_glass.svg) center center/contain no-repeat;
}

@media only screen and (max-width: 767px){
.inner.border {
	padding: 10% 6%;
}
.inner .sttl_img{
	position: absolute;
	top: -40px;
	left: -5%;
	width: 46%;
	max-width: 200px;
}
.sttl_area {
	text-align: center;
}
.sttl_area p {
	font-size: 18px;
}
.sttl_area .sttl01 {
	font-size: 22px;
	margin-bottom: 30px;
}
.contents .flex_area {
	flex-direction: column;
	gap: 20px;
}
.contents .flex_area .txt_area {
	width: 100%;
}
.contents .flex_area .img_area {
	width: 100%;
}
.block_und .sttl_area .sttl02 {
	padding-left: 20px;
	margin-bottom: 25px;
	font-size: 18px;
}
.block_und .sttl_area .sttl02::before {
	left: -2px;
	top: 0.3em;
	bottom: inherit;
	width: 20px;
	height: 20px;
}
}

/*=======================================
　mv
=======================================*/
#mv_wrap {
}
#mv_wrap img {
	vertical-align: middle;
}



/*============================
#sec_check
============================*/
#sec_check {
	padding: 85px 0 140px;
}
#sec_check .inner .sttl_area {
	position: relative;
	max-width: 596px;
	margin: 0 auto 55px;
}
#sec_check .inner .sttl_area::before {
	content: '';
	position: absolute;
	left: -100px;
	bottom: 10%;
	width: 94px;
	height: 94px;
	background: url(../../images/estimate/icon_glass.svg) center center/contain no-repeat;
}
#sec_check .inner .flex_area {
	display: flex;
	justify-content: space-between;
	gap: 3.4%;
}
#sec_check .inner .flex_area .check_item{
	width: 31%;
	box-shadow: 8px 8px 0px #06406233;
}

@media only screen and (max-width: 767px){
	#sec_check {
		padding: 40px 0 100px;
	}
	#sec_check .inner .sttl_area {
		margin-bottom: 20px;
		max-width: 80%;
	}
	#sec_check .inner .sttl_area::before {
		content: '';
		position: absolute;
		left: -45px;
		bottom: 10%;
		width: 55px;
		height: 55px;
		background: url(../../images/estimate/icon_glass.svg) center center/contain no-repeat;
	}
	#sec_check .inner .flex_area {
		gap: 20px;
		flex-direction: column;
	}
	#sec_check .inner .flex_area .check_item{
		width: 100%;
	}
	
}

/*============================
.sec_01
============================*/
.sec_01{
	padding-bottom: 150px;
}
.block01 {
	padding-bottom: 50px;
	border-bottom: dotted 3px #064062;
}
.block02 {
	padding: 80px 0;
	border-bottom: dotted 3px #064062;
}
.block02 .sttl_area {
}
.block02 .sttl_area .sttl01 {
	width: 90%;
	max-width: 566px;
	margin: 0 auto 70px;

}
.block03 {
	padding: 80px 0 0;
}
.block03 .sttl_area {
}
.block03 .sttl_area .sttl01 {
	width: 90%;
	max-width: 700px;
	margin: 0 auto 70px;
}
.block03 .flex_area {
	margin-bottom: 60px;

}
.bnr_free {
	width: 102%;
	margin-left: -2%;

}
@media only screen and (max-width: 767px){
	.sec_01{
		padding-bottom: 80px;
	}
	.block01 {
		padding-bottom: 40px;
	}
	.block02 {
		padding: 50px 0;
	}
	.block02 .sttl_area {
	}
	.block02 .sttl_area .sttl01 {
		margin: 0 auto 40px;
	
	}
	.block03 {
		padding: 40px 0 0;
	}
	.block03 .sttl_area {
	}
	.block03 .sttl_area .sttl01 {
		margin: 0 auto 50px;
	}
	.block03 .flex_area {
		margin-bottom: 60px;
	
	}
	.bnr_free {
		width: 102%;
		margin-left: -2%;
	
	}
}
/*============================
.sec_02
============================*/
.sec_02 {	
	padding-bottom: 150px;
}
.sec_02 .block_und:not(:last-child)  {
	margin-bottom: 100px;
}
.sec_02 .block_und .txt_area {
	width: 100%;
	line-height: 2;
}
.sec_02 .block_und .txt_area00 {
	margin-bottom: 50px;
	line-height: 2;
}
.sec_02 .block_und .img_area {
	width: 100%;
	max-width: 744px;
	margin: 0 auto;
}

.sec_02 .block03 .txt_area {
	width: 100%;
	margin-bottom: 50px;
	line-height: 2;
}
.sec_02 .block03 .img_area {
	width: 100%;
	margin-bottom: 60px;

}
.sec_02 .block03 .sttl_area .sttl01 {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 70px;
}

@media only screen and (max-width: 767px){
	.sec_02 {	
		padding-bottom: 80px;
	}
	.sec_02 .block_und:not(:last-child)  {
		margin-bottom: 50px;
	}
	.sec_02 .block_und .txt_area00 {
		margin-bottom: 20px;
	}
	
	.sec_02 .block03 .txt_area {
		margin-bottom: 20px;
	}
	.sec_02 .block03 .img_area {
		margin-bottom: 40px;
	
	}
	.sec_02 .block03 .sttl_area .sttl01 {
		margin: 0 auto 50px;
	}
}

/*============================
.sec_03
============================*/

.sec_03 {	
	padding-bottom: 150px;
}
.sec_03 .block03 .txt_area {
	width: 100%;
	margin-bottom: 50px;
	line-height: 2;
}
.sec_03 .block03 .img_area {
	width: 100%;
	margin-bottom: 60px;

}
.sec_03 .block03 .sttl_area .sttl01 {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 70px;
}

.bnr_trick {
	margin-bottom: 50px;
}
@media only screen and (max-width: 767px){
	.sec_03 {	
		padding-bottom: 80px;
	}
	.sec_03 .block03 .txt_area {
		margin-bottom: 20px;
	}
	.sec_03 .block03 .img_area {
		margin-bottom: 40px;
	
	}
	.sec_03 .block03 .sttl_area .sttl01 {
		margin: 0 auto 50px;
	}
	.bnr_trick {
		margin-bottom: 30px;
	}
}