@charset "utf-8";


/* ////////////////////////////////////////////////// ページ ////////////////////////////////////////////////// */
/* --------------------------------------------------
ファーストビュー
-------------------------------------------------- */
.energy_fv{
	height: 56rem;
	background: url( ../../../../image/energy/fv.jpg ) no-repeat center / cover;
	display: flex;
	justify-content: center;
	align-items: center;
}
.energy_fv_inner{
	width: min( 100%, 76.8rem );
	position: relative;
	top: -4%;
}
.energy_fv_txt{
	width: 100%;
}
.energy_fv_txt img{
	width: 100%;
}



/* --------------------------------------------------
アカリエが省エネ設計の家をおすすめする理由
-------------------------------------------------- */
.concept{
	width: 100%;
	padding: 8rem 0 10rem 0;
	background: #E6F7FF;
}
.concept_content{
	width: min( 90%, 97rem );
	margin: 0 auto;
	border-radius: 2rem;
	background: #fff;
}
.concept_content_inner{
	padding: 4rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.concept_content_left{
	width: min( 45%, 40rem );
}
.concept_content_left p{
	margin: 0 0 6rem 0;
}
.concept_content_left p.concept_content_left_img{
	aspect-ratio: 400 / 280;
}
.concept_content_left p.concept_content_left_illust{
	margin: 0;
}
.concept_content_left p img{
	width: 100%;
}
.concept_content_left p.concept_content_left_img img{
	width: 100%;
	height: 100%;
	border-radius: 2rem;
	object-fit: cover;
	object-position: center;
}
.concept_content_right{
	width: min( 55%, 45rem );
	padding-left: 4rem;
	text-align: left;
}
.concept_content_right h4{
	margin-bottom: 4rem;
	color: #0087CB;
	font-size: 3.6rem;
	font-weight: 600;
	line-height: 4.8rem;
	word-break: keep-all;
}
.concept_content_right p{
	margin: 0;
	font-size: 1.7rem;
	line-height: 3.4rem
}


/* --------------------------------------------------
アカリエの5つのこだわり標準仕様
-------------------------------------------------- */
.point{
	background: #E6F7FF;
}
.point_inner{
	padding: 14rem 0 15rem 0;
	background: #fff;
	clip-path: polygon( 50% 0%, 100% 18rem, 100% 100%, 0 100%, 0% 18rem );
}
.point-first_content{
	width: min( 90%, 97rem );
	margin: 4rem auto;
	border-radius: 2rem;
	background: #E6F7FF;
}
.point-first_content_inner{
	padding: 4rem;
}

.point_ttl{
	margin-bottom: 2rem;
	display: flex;
	justify-content: left;
	align-items: center;
}
.point_ttl p.font_osw{
	width: 8rem;
	aspect-ratio: 1 / 1;
	margin: 0 2rem 0 0;
	color: #fff;
	font-size: 4.8rem;
	line-height: 4.8rem;
	font-weight: 500;
	border-radius: 50%;
	background: #0087CB;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.point_ttl p.font_osw::before{
	content: '';
	width: 5.1rem;
	aspect-ratio: 51 / 22;
	background: url( ../../../../image/energy/point_txt.svg ) no-repeat center / contain;
	position: absolute;
	left: 50%;
	top: -5%;
	transform: translateX( -50% );
}
.point_ttl h4{
	width: calc( 100% - 8rem );
	color: #0087CB;
	font-size: 3rem;
	font-weight: 600;
	line-height: 4rem;
	text-align: left;
}

.point-first_content_top{
	margin-bottom: 4rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.point-first_content_top_img{
    width: min( 45%, 40rem );
	aspect-ratio: 400 / 280;
}
.point-first_content_top_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 2rem;
}
.point-first_content_top_txt{
	width: min( 55%, 45rem );
    padding-left: 4rem;
    text-align: left;
}
.point-first_content_top_txt p{
	margin: 0;
	font-size: 1.7rem;
	line-height: 3.4rem;
}
.point-first_content_cost{
	border: solid .5rem #0087CB;
	border-radius: 2rem;
	overflow: hidden;
}
.point-first_content_cost h5{
	padding: 1rem 0;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 3.4rem;
	background: #0087CB;
}
.point-first_content_cost ul{
	margin: 0;
	padding: 3rem 3rem 2rem 3rem;
	background: #fff;
	display: flex;
	justify-content: space-between;
}
.point-first_content_cost ul li{
	width: calc( ( 100% - 3rem ) / 2 );
	padding-bottom: 3rem;
	list-style: none;
	border-radius: 2rem;
	background: #F2F2F2;
}
.point-first_content_cost_ttl{
	margin-bottom: 2rem;
	display: flex;
	justify-content: left;
	align-items: center;
}
.point-first_content_cost_ttl p:nth-of-type(1){
	margin: 0 2rem 0 0;
	padding: 1rem 3rem;
	color: #fff;
	font-size: 2rem;
	font-weight: 600;
	line-height: 2rem;
	border-radius: 2rem 0 2rem 0;
	background: #0087CB;
}
.point-first_content_cost_ttl p:nth-of-type(2){
	margin: 0;
	color: #0087CB;
	font-size: 2rem;
	font-weight: 600;
	line-height: 3rem;
}
.point-first_content_cost_img{
	width: calc( 100% - 5.5rem );
	aspect-ratio: 340 / 240;
	margin: 0 auto 2rem auto;
}
.point-first_content_cost_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 2rem;
}
.point-first_content_cost ul li dl{
	width: calc( 100% - 5.5rem );
	margin: 0 auto;
	padding: 1.5rem 0 .8rem 0;
	border-bottom: solid .1rem #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.point-first_content_cost ul li dl:nth-of-type(1){
	width: calc( 100% - 7.5rem );
	padding: 1.5rem 1rem .8rem 1rem;
	border: solid .1rem #000;
	border-radius: 1rem;
}
.point-first_content_cost ul li dl dt{
	font-size: 2rem;
	font-weight: 600;
	line-height: 2rem;
}
.point-first_content_cost ul li dl dd{
	font-size: 2rem;
	font-weight: 600;
	line-height: 2rem;
}
.point-first_content_cost ul li dl dd span.font_osw{
	font-size: 3rem;
	font-weight: 700;
}
.point-first_content_cost ul li dl:last-of-type{
	margin-top: auto;
	padding: 3rem 0 0 0;
	color: #0087CB;
	border-bottom: none;
}
.point-first_content_cost ul li:nth-of-type(2) dl:last-of-type{
	padding: 7.9rem 0 0 0;	
}
.point-first_content_cost ul li dl:last-of-type dd span.font_osw{
	font-size: 4rem;
}
.point-first_content_cost_annotation{
	padding: 0 3rem 2rem 3rem;
	font-size: 1.7rem;
	line-height: 2.8rem;
	text-align: left;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: left;
}
.point-first_content_cost_annotation p{
	margin: 0;
}

.point_content_wrapper{
	width: min( 90%, 97rem );
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.point_content{
	width: calc( ( 100% - 4rem ) / 2 );
	text-align: left;
	background: #E6F7FF;
	border-radius: 2rem;
}
.point_content:nth-of-type( 1 ),
.point_content:nth-of-type( 2 ){
	margin-bottom: 4rem;
}
.point_content_inner{
	padding: 4rem;
}
.point_content_img{
	width: 100%;
	aspect-ratio: 385 / 265;
	margin-bottom: 2rem;
}
.point_content_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 2rem;
}
.point_content_txt p{
	font-size: 1.7rem;
	line-height: 3.4rem;
}



/* --------------------------------------------------
アカリエが選ばれる3つの理由
-------------------------------------------------- */
.reason{
	padding-bottom: 10rem;
	background: #E6F7FF;
}

.reason .energy_ttl{
	margin-top: -5.5rem;
}
.reason .energy_ttl h3{
	color: #0087CB;
}

.reason_content{
	width: min( 90%, 97rem );
	margin: 0 auto 4rem auto;
	background: #fff;
	border: solid .5rem #0087CB;
	border-radius: 2rem;
	overflow: hidden;
}
.reason_content01{
	margin-top: 6rem;
}
.reason_content03{
	margin-bottom: 0;
}
.reason_content_ttl{
	display: flex;
	justify-content: left;
	align-items: center;
}
.reason_content_ttl p{
	margin: 0 2rem 0 0;
	padding: 2rem 3rem;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.7rem;
	border-radius: 0 0 2rem 0;
	display: flex;
	align-items: center;
	background: #0087CB;
}
.reason_content_ttl p span{
	margin-left: 1rem;
	font-size: 4.8rem;
	font-weight: normal;
	line-height: 4.8rem;
}
.reason_content_ttl h4{
	color: #0087CB;
	font-size: 3rem;
	font-weight: 600;
	line-height: 4rem;
}
.reason_content_inside{
	padding: 4rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.reason_content03 .reason_content_inside{
	display: block;
}
.reason_content_inside_left{
	width: calc( 100% - 29rem );
}
.reason_content_inside_right{
	width: 25rem;
}
.reason_content_inside_right img{
	width: 100%;
}
.reason_content01 .reason_content_inside_right img{
	border-radius: 2rem;
}
.reason_content02 .reason_content_inside_right img{
	border: solid .1rem #BFBFBF;
}
.reason_content_inside_left_txt{
	margin-bottom: 3rem;
	text-align: left;
}
.reason_content_inside_left_txt p{
	margin: 0;
	font-size: 1.7rem;
	line-height: 3.4rem;
}
.reason_content_inside_left_txt p:nth-of-type(1){
	margin-bottom: 2rem;
}
.reason_content_inside_left_saving{
	padding: 1rem 2rem;
	background: #E6F7FF;
	border-radius: 2rem;
}
.reason_content_inside_left_saving p{
	margin: 0;
	color: #0087CB;
	font-size: 2.3rem;
	font-weight: 600;
	line-height: 4rem;
}
.reason_content_inside_left_saving p span.underline{
	position: relative;
	z-index: 1;
}
.reason_content_inside_left_saving p span.underline::before {
    content: '';
    width: 100%;
    height: 1rem;
    background: #FFE100;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
	z-index: -1;
}
.reason_content_inside_left_saving p span.font_osw{
	font-size: 3rem;
	font-weight: normal;
	line-height: 4rem;
}
.reason_content_inside_left_tax{
	border: solid .2rem #0087CB;
	border-radius: 1rem;
}
.reason_content_inside_left_tax h5{
	padding: 1rem;
	color: #0087CB;
	font-size: 3rem;
	font-weight: 600;
	line-height: 3rem;
}
.reason_content_inside_left_tax p{
	margin: 0;
	padding: 1rem;
	color: #fff;
	font-size: 3rem;
	font-weight: 600;
	line-height: 4rem;
	background: #0087CB;
}

.reason_content_inside_left_tax p span.font_osw{
	font-size: 3.6rem;
	font-weight: normal;
}
.reason_content_inside_left_tax p span.underline{
	position: relative;
	z-index: 1;
}
.reason_content_inside_left_tax p span.underline::before {
    content: '';
    width: 100%;
    height: .6rem;
    background: #FFE100;
    position: absolute;
    bottom: .6rem;
    left: 0;
    right: 0;
	z-index: -1;
}
.reason_content_inside_left_tax_condition{
	padding: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.reason_content_inside_left_tax_condition span{
	width: 5.5rem;
	aspect-ratio: 1 / 1;
	font-size: 1.7rem;
	line-height: 2.4rem;
	border: solid .1rem #000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.reason_content_inside_left_tax_condition ul{
	width: calc( 100% - 6rem );
	margin: 0;
	display: flex;
	justify-content: left;
	align-items: center;
	flex-wrap: wrap;
}
.reason_content_inside_left_tax_condition ul li{
	list-style: none;
	font-size: 1.7rem;
	line-height: 2.8rem;
}
.reason_content_inside_txt{
	margin-bottom: 3rem;
	font-size: 1.7rem;
	line-height: 3.4rem;
	text-align: left;
}
.reason_content_inside_li{
	margin: 0;
}
.reason_content_inside_li li{
	margin-bottom: 2rem;
	list-style: none;
	border-radius: 4rem;
	background: #E6F7FF;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.reason_content_inside_li li:last-of-type{
	margin-bottom: 0;
}
.reason_content_inside_li li span{
	width: 8rem;
	aspect-ratio: 1 / 1;
	color: #0087CB;
	font-size: 3rem;
	font-weight: 600;
	line-height: 3rem;
	border: solid .3rem #0087CB;
	border-radius: 50%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.reason_content_inside_li li p{
	width: calc( 100% - 8rem );
	margin: 0;
	padding-left: 2rem;
	font-size: 1.7rem;
	line-height: 3.4rem;
	text-align: left;
}



/* --------------------------------------------------
省エネ住宅に関するお問い合わせはこちら
-------------------------------------------------- */
.contact{
	background: #E6F7FF;
}
.contact_inner{
	padding: 14rem 0 10rem 0;
	background: #fff;
	clip-path: polygon( 50% 0%, 100% 18rem, 100% 100%, 0 100%, 0% 18rem );
}

.contact .energy_ttl h3{
	color: #0087CB;
	font-size: 4rem;
	line-height: 5rem;
}

.contact_inside{
	width: min( 90%, 97rem );
	margin: 0 auto;
	position: relative;
}
.contact_inside::before{
	content: '';
	width: 22.783%;
	aspect-ratio: 221 / 240;
	background: url( ../../../../image/energy/contact_illust.png ) no-repeat center / contain;
	position: absolute;
	top: -37%;
    right: -5%;
}
.contact_inside a.font_osw{
	font-size: 8rem;
	line-height: 8rem;
	margin-top: 3rem;
	color: #0087CB;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.contact_inside a.font_osw::before{
	content: '';
	width: 11.2rem;
	aspect-ratio: 112 / 64;
	margin-right: 1rem;
	background: url( ../../../../image/energy/contact_icon.svg ) no-repeat center / contain;
	position: relative;
	top: .5rem;
}
.contact_inside p{
	margin: 2rem 0 4rem 0;
	font-size: 1.7rem;
	line-height: 1.7rem;
}
a.contact_inside_btn{
	width: min( 100%, 52rem );
	aspect-ratio: 520 / 72;
	margin: 0 auto;
	color: #fff !important;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 2.4rem;
	border-radius: 4rem;
	background: #0087CB;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: .3s;
}
a.contact_inside_btn:hover{
	opacity: .7;
	transform: .3s;
}
a.contact_inside_btn::before{
	content: '';
	width: 3.8rem;
	aspect-ratio: 38 / 30;
	background: url( ../../../../image/energy/contact_icon_mail.svg ) no-repeat center / contain;
	position: absolute;
	top: 50%;
	left: 3rem;
	transform: translateY( -50% );
}
a.contact_inside_btn::after{
	content: '';
	width: .6rem;
	aspect-ratio: 6 / 12;
	background: url( ../../../../image/energy/contact_icon_arrow.svg ) no-repeat center / contain;
	position: absolute;
	top: 50%;
	right: 3rem;
	transform: translateY( -50% );
}





/* ////////////////////////////////////////////////// 共通 ////////////////////////////////////////////////// */
/* --------------------------------------------------
html, body
-------------------------------------------------- */
html{
	font-size: 62.5%;
}
body{
	font-family: 'Noto Sans JP', sans-serif !important;
}



/* --------------------------------------------------
ページタイトル
-------------------------------------------------- */
.page-ttl{
	font-size: 3rem;
	font-weight: 700;
	line-height: 100%;
	padding: 2rem 0;
	background: #ce0100;
	color: #fff;
}



/* --------------------------------------------------
セクションタイトル
-------------------------------------------------- */
.energy_ttl{
	width: min( 90%, 97rem );
	margin: 0 auto;
}
.energy_ttl p.energy_ttl_subttl{
	font-size: 3rem;
	font-weight: 600;
	line-height: 3rem;
	position: relative;
	display: inline-block;
}
.energy_ttl p.energy_ttl_subttl::before{
	content: '';
	width: .1rem;
	height: 5rem;
	background: #000;
	position: absolute;
	left: -2rem;
	bottom: -1rem;
	transform: rotate( -25deg );
}
.energy_ttl p.energy_ttl_subttl::after{
	content: '';
	width: .1rem;
	height: 5rem;
	background: #000;
	position: absolute;
	right: -2rem;
	bottom: -1rem;
	transform: rotate( -155deg );
}
.energy_ttl p.energy_ttl_comment{
	width: 100%;
	aspect-ratio: 970 / 100;
	margin: 0 auto 5rem auto;
	border: solid .5rem #000;
	border-radius: 5rem;
	font-size: 3rem;
	font-weight: 600;
	line-height: 4rem;
	word-break: keep-all;
	background: #fff;
	box-sizing: content-box;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.energy_ttl p.energy_ttl_comment span{
	position: relative;
	top: .2rem;
}
.energy_ttl p.energy_ttl_comment::before{
	content: '';
	width: 3.8rem;
	aspect-ratio: 38 / 40;
	background: #000;
	clip-path: polygon( 50% 100%, 0 0, 100% 0 );
	position: absolute;
	left: 50%;
	bottom: -4rem;
	transform: translateX( -50% );
}
.energy_ttl p.energy_ttl_comment::after{
	content: '';
	width: 3.8rem;
	aspect-ratio: 38 / 40;
	background: #fff;
	clip-path: polygon( 50% 100%, 0 0, 100% 0 );
	position: absolute;
	left: 50%;
	bottom: -2.9rem;
	transform: translateX( -50% );
}
.energy_ttl h3{
	color: #0087CB;
	font-size: 4.8rem;
	font-weight: 600;
	line-height: 4.8rem;
}
.energy_ttl h3 span.underline{
	position: relative;
	z-index: 1;
}
.energy_ttl h3 span.underline::before {
    content: '';
    width: 100%;
    height: 1rem;
    background: #FFE100;
    position: absolute;
    bottom: .5rem;
    left: 0;
    right: 0;
	z-index: -1;
}
.energy_ttl h3 span.font_osw{
	font-size: 6.4rem;
}



/* --------------------------------------------------
フォント
-------------------------------------------------- */
.font_seg{
	font-family: 'segoe-print-bold';
}
@font-face {
	font-family: 'segoe-print-bold';
	src: url( '../font/segoe-print-bold.ttf' ) format( 'truetype' );
}

.font_osw{
	font-family: 'Oswald-VariableFont_wght';
}
@font-face {
	font-family: 'Oswald-VariableFont_wght';
	src: url( '../font/Oswald-VariableFont_wght.ttf' ) format( 'truetype' );
}