@charset "utf-8";

/* メインエリア
------------------------------------------------------------*/
#inner_title{border-top: 1px #CCC solid;}

/* パンくず */
#pankuzu,#pankuzu > li:not(:last-child) a{
	display: flex;
	align-items: center;
}
#pankuzu{
	width: 90%;
    margin: 15px auto 0;
	justify-content: flex-end;
	flex-wrap: wrap;
}
#pankuzu > li a{color: #EF5A26;}
#pankuzu > li:not(:last-child) a::after{
	content: '';
	width: 4px;
	height: 4px;
	background-color: #EF5A26;
	border-radius: 50%;
	margin: 0 10px;
}

/* ページタイトル */
.page_title{
	padding: 80px 0 345px;
	text-align: center;
}
.page_title h2{
	font-size: clamp(28px, 2.2vw, 35px);
	letter-spacing: 0.2rem;
	margin-bottom: 5px;
}
.page_title p{letter-spacing: 0.1rem;}

/* コンテンツ
------------------------------------------------------------*/
/* 導入部分
-------------------------------------------*/
.intro_con{align-items: flex-end;}
.page_link{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.page_link > li{margin: 0.7%;}
.page_link.link_c3 > li{width: 31.9%;}
.page_link.link_c2 > li{width: 48%;}
.page_link a{
	display: block;
	font-size: clamp(14px, 1.1vw, 18px);
	font-family: 'NotoSansJP-Bold';
	font-weight: bold;
	text-align: center;
	background-color: #FFDC64;
	padding: 20px 0 25px;
	border-radius: 80px;
}
@media (any-hover: hover){
	.page_link a:hover{
		background-color: #EF5A26;
		color: #fff;
	}
}

/* 表
-------------------------------------------*/
table{width: 100%;}
.table_c2 th,.table_c2 td{width: 50%;}
.table_c3 th,.table_c3 td{width: 33.3%;}
.table_c4 th,.table_c4 td{width: 25%;}
table thead{background-color: #E6E6E6;}
table tbody{background-color: #fff;}
table th,table td{
	border: 1px #CCC solid;
	vertical-align: middle;
}
table thead th{padding: 15px;}
table tbody th,table tbody td{padding: 20px;}

/* img_box
-------------------------------------------*/
.img_box_l,.img_box_r{
	display: flex;
	align-items: center;
}
.img_box_l > img,.img_box_r > img{display: block;}
.img_box_l > div,.img_box_r > div{width: 100%;}
.img_box_l > img{margin-right: 70px;}
.img_box_r > img{margin-left: 70px;}

/* flow_vertical
-------------------------------------------*/
.flow_vertical > li{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	position: relative;
}
.flow_vertical > li:not(:last-child)::before{
	content: '';
	width: 3px;
	height: 100%;
	background: url("../images/dot_line_v_o.webp") repeat-y left top / 3px auto;
	position: absolute;
	top: 0;
	left: 35px;
}
.flow_vertical > li:not(:last-child){padding-bottom: 60px;}
.flow_vertical .flow_num{
	width: 130px;
	position: relative;
	z-index: 1;
}
.flow_vertical .flow_con{
	width: calc(100% - 130px);
	padding: 40px;
	border-radius: 20px;
}
.flow_vertical .dot_line_o::after{margin: 20px 0;}

/* メリット・デメリット
-------------------------------------------*/
.pros-cons_title h3{
	max-width: 500px;
	width: 100%;
	margin: -2px auto 60px;
	background-color: #FFDC64;
	padding: 18px 0 23px;
	border-radius: 80px;
	position: relative;
	z-index: 1;
}

/* 給湯省エネ2024事業補助金に関するよくあるご質問
-------------------------------------------*/
#faq .br50{
	border-bottom-left-radius: 0!important;
	border-bottom-right-radius: 0!important;
}

/* エコキュートの業者の選び方
-------------------------------------------*/
#cost .bg_title{padding: 10px 25px 12px;}

/* まとめ
-------------------------------------------*/
.summary_box{padding: 95px 0;}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* メインエリア
	--------------------------------------*/
	.page_title{padding: 40px 0 190px;}
	.page_title h2{font-size: 24px;}
	
	/* コンテンツ
	--------------------------------------*/
	/* 導入部分
	----------------------------*/
	.page_link a{
		font-size: 14px;
		padding: 10px 0 15px;
	}
	
	/* 表
	----------------------------*/
	table thead th{padding: 10px;}
	table tbody th,table tbody td{padding: 15px 15px;}
	
	/* img_box
	----------------------------*/
	.img_box_l > img{margin-right: 50px;}
	.img_box_r > img{margin-left: 50px;}
	img.tab_250{width: 250px;}
	img.tab_330{width: 330px;}
	
	/* flow_vertical
	----------------------------*/
	.flow_vertical > li:not(:last-child)::before{
		width: 2px;
		background-size: 2px auto;
		left: 25px;
	}
	.flow_vertical > li:not(:last-child){padding-bottom: 40px;}
	.flow_vertical .flow_num{width: 80px;}
	.flow_vertical .flow_num img{width: 50px;}
	.flow_vertical .flow_con{
		width: calc(100% - 80px);
		padding: 30px;
		border-radius: 15px;
	}

	/* メリット・デメリット
	----------------------------*/
	.pros-cons_title img{width: 80px;}
	.pros-cons_title h3{
		max-width: 250px;
		margin: -2px auto 35px;
		padding: 8px 0 13px;
	}
	
	/* エコキュートの業者の選び方
	----------------------------*/
	#cost .bg_title{padding: 8px 20px 10px;}

	/* まとめ
	----------------------------*/
	.summary_box{padding: 50px 0;}
	.summary_box .lh02{line-height: 2;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* メインエリア
	--------------------------------------*/
	#pankuzu,.page_title{margin-top: 10px;}
	#pankuzu *{font-size: 12px;}
	#pankuzu > li:not(:last-child) a::after{margin: 0 5px;}
	.page_title{
		border-top: 1px #CCC solid;
		padding-bottom: 170px;
	}
	.page_title h2{font-size: 18px;}
	.page_title p{font-size: 12px;}
	
	/* コンテンツ
	--------------------------------------*/
	/* 導入部分
	----------------------------*/
	.page_link{justify-content: space-between;}
	.page_link > li{margin: 1% 0;}
	.page_link.link_c3 > li,.page_link.link_c2 > li{width: 49%;}
	
	/* img_box
	----------------------------*/
	.img_box_l,.img_box_r{flex-wrap: wrap;}
	.img_box_l > img,.img_box_r > img{margin: 0 auto 25px;}
	.img_box_r > img{order: 1;}
	.img_box_r > div{order: 2;}
	img.tab_250{width: 200px;}
	img.tab_330{width: 280px;}
	
	/* 表
	----------------------------*/
	.table_box{overflow-x: scroll;}
	table.table_c3,table.table_c4{min-width: 780px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* メインエリア
	--------------------------------------*/
	.page_title{padding-bottom: 140px;}
	
	/* コンテンツ
	--------------------------------------*/
	/* 導入部分
	----------------------------*/
	.page_link > li{margin: 0;}
	.page_link.link_c3 > li,.page_link.link_c2 > li{width: 100%;}
	.page_link > li:not(:last-child){margin-bottom: 10px;}
	
	/* 表
	----------------------------*/
	table.table_c2{min-width: 430px;}
	
	/* flow_vertical
	----------------------------*/
	.flow_vertical > li:last-child::before{
		content: '';
		position: absolute;
	}
	.flow_vertical > li::before{
		width: 100%!important;
		height: 2px!important;
		background: url("../images/dot_line_o.webp") repeat-x left center / auto 2px!important;
		top: 20px!important;
		left: 0!important;
	}
	.flow_vertical > li:not(:last-child){padding-bottom: 30px;}
	.flow_vertical .flow_num,.flow_vertical .flow_con{width: 100%;}
	.flow_vertical .flow_num{margin-bottom: 20px;}
	.flow_vertical .flow_num img{width: 40px;}
	.flow_vertical .flow_con{padding: 27px 20px 35px;}
}