@charset "UTF-8";

/*-------------------------
__#main_style
-------------------------*/
#main{ margin-bottom: 60px;position: relative;}
#main > .inner{ width: 100%; max-width: initial; position: relative; padding: 0;}
#main .inner .mv {height: 240px; padding: 100px 40px 0; max-width: 1200px; margin: 0 auto; box-sizing: border-box;}
#main .inner .mv .flex{ display: flex; justify-content: center; gap: 50px; align-items: center; position: relative; max-width: 500px; margin: 0 auto;}
#main .inner .mv .flex::before,
#main .inner .mv .flex::after{position: absolute;content: "";background: url("images/ttl_decoration@2x.png")no-repeat;background-size: 100%; width: 60px;height: 60px;}
#main .inner .mv .flex::before{left: 0;top: -10px;}
#main .inner .mv .flex::after{bottom: -10px;right: 0;transform: rotate(180deg);}

#main .inner .mv .flex .icon{ width: auto;height: 120px;}
#main .inner .mv .flex .icon img{ height: 100%;}
#main .inner .mv .flex .main_ttl { font-size: 48px; font-weight: 700;}
#main .inner .mv .flex .en { font-size: 21px; font-weight: 700; margin-top: 24px; color: #773437;}
#header .com_logo{filter:invert(24%) sepia(22%) saturate(1237%) hue-rotate(308deg) brightness(105%) contrast(100%);}
#header #toggle_btn span {background-color: #000;}
#header .header_right .contact_btn a{color: #000;}
#header .header_right .contact_btn a::before{filter: invert(0%) sepia(8%) saturate(7500%) hue-rotate(300deg) brightness(103%) contrast(110%);}

.tab_on{ display: none;}

@media screen and (max-width:999px){
	#main .inner .mv { height: 210px; padding: 90px 40px 0;}
	#main .inner .mv .flex { gap: 40px; max-width: 390px;}
	#main .inner .mv .flex .icon{ width: auto;height: 100px;}
	#main .inner .mv .flex .main_ttl { font-size: 36px;}
	#main .inner .mv .flex .en { font-size: 16px; margin-top: 20px;}
	.tab_on{ display: block;}
}
@media screen and (max-width:767px){
	#main{ margin-bottom: 0;}
	#main .inner .mv { height: 180px; padding: 90px 20px 0;}
	#main .inner .mv .flex { gap: 30px; max-width: 270px;}
	#main .inner .mv .flex .icon{ width: auto;height: 80px;}
	#main .inner .mv .flex .main_ttl { font-size: 24px;}
	#main .inner .mv .flex .en { font-size: 14px; margin-top: 16px;}
	#main .inner .mv .flex::before,
	#main .inner .mv .flex::after{background: url("images/ttl_decoration_sph@2x.png")no-repeat; width: 30px;height: 30px;background-size: 100%;}
}

/*-------------------------
__断熱　気密　省エネ　共通
-------------------------*/
#main .inner .block .inner .blo_ttl_wrap{ margin-bottom: 20px; line-height: 1.4;}
#main .inner .block .inner .blo_ttl_wrap .blo_ttl{ font-size: 32px; font-weight: 700;}
#main .inner .block .inner .blo_ttl_wrap .blo_ttl.under_line{ background: linear-gradient(transparent 50%, #EDD3D2 50%); display: inline;}
#main .inner .block .inner .blo_ttl_wrap .blo_txt{ font-size: 24px; font-weight: 700;}
#main .inner .block .inner .explanation_ttl{ font-size: 20px; font-weight: 700; margin-bottom: 10px;}
#main .inner .block .inner .explanation_txt{ font-size: 16px; font-weight: 700; line-height: 1.8; margin-bottom: 20px;}
#main .inner .block .inner .white_bg_wrap{ margin: 0 auto 80px; max-width: 870px;}
#main .inner .block .inner .white_bg{ background: #f0f0ee; margin: 30px auto; padding: 50px; box-sizing: border-box;}
#main .inner .block .inner .sub_ttl{ font-size: 18px; margin-bottom: 10px; font-weight: 700; line-height: 1.4;}
#main .inner .block .inner .sub_txt{ font-size: 16px; line-height: 1.4;}
#main .inner .block .inner .kome{ margin-top: 10px; text-align: right; font-size: 16px;}
#main .inner .block .inner .red{ color: #a3211d;}
@media screen and (max-width:999px){
	#main .inner .block .inner .blo_ttl_wrap .blo_ttl{ font-size: 24px; margin-bottom: 10px;}
	#main .inner .block .inner .blo_ttl_wrap .blo_txt{ font-size: 20px;}
	#main .inner .block .inner .explanation_ttl{ font-size: 18px; margin-bottom: 10px;}
	#main .inner .block .inner .explanation_txt{ font-size: 14px;}
	#main .inner .block .inner .white_bg{ margin: 20px auto; padding: 30px;}
	#main .inner .block .inner .sub_ttl{ font-size: 16px;}
	#main .inner .block .inner .sub_txt{ font-size: 14px;}
}
@media screen and (max-width:767px){
	#main .inner .block .inner .blo_ttl_wrap{ margin-bottom: 14px;}
	#main .inner .block .inner .blo_ttl_wrap .blo_ttl{ font-size: 21px;}
	#main .inner .block .inner .blo_ttl_wrap .blo_txt{ font-size: 18px;}
	#main .inner .block .inner .explanation_ttl{ font-size: 16px;}
	#main .inner .block .inner .explanation_txt{ text-align: left;}
	#main .inner .block .inner .explanation_txt br{ display: none;}
	#main .inner .block .inner .white_bg{ padding: 20px;}
	#main .inner .block .inner .sub_txt{ text-align: left;}
	#main .inner .block .inner .sub_txt br{ display: none;}
}
/*-------------------------
__#block_01
-------------------------*/
#block_01{padding: 0 0 100px;}
#block_01 .inner .sub_txt{ margin: 20px auto 30px;}

@media screen and (max-width:999px){
	#block_01{ padding: 0 0 40px;}
	#block_01 .flex{ gap: 30px;}
	#block_01 .flex .img_wrap{ max-width: 380px;}
}
@media screen and (max-width:767px){
	#block_01{ padding: 0 0 30px;}
	#block_01 .flex{ flex-wrap: wrap; gap: 20px; margin-bottom: 50px;}
	#block_01 .flex .img_wrap{ max-width: initial; width: 100%;}
	#block_01 .flex .sub_ttl br{ display: none;}
}
/*-------------------------
__#block_02
-------------------------*/

#block_02 {background: #f0f0ee;}
#block_02 .inner .table_wrap{ overflow-x: scroll; max-width: 868px; margin: 0 auto;}
#block_02 .inner .table_wrap table{ white-space: nowrap;}
#block_02 .inner .table_wrap table tbody tr{ font-size: 16px; font-weight: 700;}
#block_02 .inner .table_wrap table tbody tr th{ background: #000; color: #fff; padding: 20px 10px; box-sizing: border-box; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.4;}
#block_02 .inner .table_wrap table tbody tr th.bg_gray{ background: #777; color: #fff;}
#block_02 .inner .table_wrap table tbody tr th .small{ font-size: 12px;}
#block_02 .inner .table_wrap table tbody tr td{ padding: 20px 10px; box-sizing: border-box; background: #fff; font-size: 16px; line-height: 1.4;}

#block_02 .inner .flex{ display: flex; justify-content: space-between; gap:20px;align-items: center;}
#block_02 .inner .flex .img_wrap{ width: 450px;}
#block_02 .inner .flex .img_wrap img{ width: 100%; height: auto;}
#block_02 .inner .flex{}
#block_02 .inner{ width: 100%;}
#block_02 .inner .kome{ text-align: center!important;}

@media screen and (max-width:999px){
}
@media screen and (max-width:767px){
	#block_02 .inner .table_wrap table tbody tr th{ padding: 10px; font-size: 14px;}
	#block_02 .inner .table_wrap table tbody tr td{ padding: 10px; font-size: 14px;}
}
/*-------------------------
__#block_03
-------------------------*/
#block_03{ padding: 100px 0 50px;}
#block_03 .inner .white_bg{ position: relative; z-index: -9;}
#block_03 .inner .white_bg::before{ position: absolute; content: ""; background-size: 100%; background-repeat: no-repeat; top: 50%; right: 40px; transform: translateY(-50%); z-index: -9;}
#block_03 .inner .white_bg:first-child::before{ background-image: url("/energy_saving/images/merit01.png"); width: 140px; height: 100px;}
#block_03 .inner .white_bg:nth-child(2)::before{ background-image: url("/energy_saving/images/merit02.png"); width: 140px; height: 110px;}
#block_03 .inner .white_bg:last-child::before{ background-image: url("/energy_saving/images/merit03.png"); width: 120px; height: 120px;}

#block_03 .inner .white_bg > ul{ text-indent: -1em; padding-left: 1em;}
#block_03 .inner .white_bg > ul:first-of-type{ margin-bottom: 30px;}
#block_03 .inner .white_bg > ul li{ margin-bottom: 10px;}
#block_03 .inner .white_bg > ul li:last-child{ margin-bottom: 0;}
#block_03 .inner table{ margin-bottom: 20px; width: 100%;}
#block_03 .inner table tbody{ width: 100%;}
#block_03 .inner table tbody tr{ font-size: 16px; font-weight: 700;}
#block_03 .inner table tbody tr th{ background: #000; color: #fff; padding: 20px; box-sizing: border-box; text-align: center; font-weight: 700; font-size: 18px;}

#block_03 .inner table tbody tr td{ padding: 20px; box-sizing: border-box; background: #fff; text-align: left;}
#block_03 .inner table tbody tr td .red{ font-weight: 700;}
#block_03 .inner table tbody tr td ul{}
#block_03 .inner table tbody tr td ul li{ line-height: 1.4; text-indent: -1em; padding-left: 1em;}
#block_03 .inner table tbody tr td ul li{ margin-bottom: 10px;}
#block_03 .inner table tbody tr td ul li:last-child{ margin-bottom: 0;}
#block_03 .inner table tbody tr td p{ line-height: 1.4; text-indent: -1em; padding-left: 1em;}


#block_03 .inner .flex{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 50px;}
#block_03 .inner .flex .item{ width: calc((100% - 20px) / 3); padding: 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; flex-direction: column;}
#block_03 .inner .flex .item:first-child{ background: #fadeea;}
#block_03 .inner .flex .item:nth-child(2){ background: #e1d4e8;}
#block_03 .inner .flex .item:nth-child(3){ background: #cceafa;}
#block_03 .inner .flex .item:nth-child(4){ background: #fbd49e;}
#block_03 .inner .flex .item:last-child{ background: #c6dfd3;}
#block_03 .inner .flex .item .sub_ttl{}
#block_03 .inner .flex .item .sub_txt{}
#block_03 .inner .flex .item .img_wrap{ max-width: 120px; margin: 0 auto 10px;}






@media screen and (max-width:999px){
	#block_03{ padding: 80px 0 40px;}
	#block_03 .inner .flex .item{ width: calc((100% - 10px) / 2);}
}
@media screen and (max-width:767px){
	#block_03{ padding: 50px 0 30px;}
	#block_03 .inner .white_bg::before{ right: 10px;}
	#block_03 .inner .white_bg:first-child::before{ width: 100px; height: 75px;}
	#block_03 .inner .white_bg:nth-child(2)::before{ width: 100px; height: 75px;}
	#block_03 .inner .white_bg:last-child::before{ width: 80px; height: 80px;}
	#block_03 .inner table tbody tr{ font-size: 12px;}
	#block_03 .inner table tbody tr th{ font-size: 14px;}
	#block_03 .inner table tbody tr th:first-child{ width: calc(100% - 100px);}
	#block_03 .inner table tbody tr th:last-child{ width: 100px;}
	#block_03 .inner table tbody tr td{ padding: 10px;}
}
@media screen and (max-width:499px){
	#block_03 .inner .flex .item{ width: 100%;}
}