@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; margin-bottom: 10px;}
#main .inner .block .inner .blo_ttl_wrap .blo_ttl.under_line{ background: linear-gradient(transparent 50%, #EDD3D2 50%); display: inline-block;}
#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 .gray_bg_txt{ font-size: 20px; font-weight: 700; line-height: 1.8; margin-top: 20px; background: #f0f0ee; padding: 30px 10px; box-sizing: border-box;}
#main .inner .block .inner .white_bg{ background: #f0f0ee; margin: 50px auto; padding: 50px; box-sizing: border-box; text-align: left;}
#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: 12px;}
#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 .gray_bg_txt{ font-size: 18px; padding: 20px 10px; line-height: 1.4;}
	#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 .gray_bg_txt{ text-align: left; font-size: 16px; padding: 20px;}
	#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 .pos_rel{ position: relative; max-width: 900px; margin: 0 auto 20px;}
#block_01 .pos_rel .img_wrap{ margin-bottom: 30px;}
#block_01 .pos_rel .img_wrap01,
#block_01 .pos_rel .img_wrap02{ position: absolute;}
#block_01 .pos_rel .img_wrap01{ top: 9%; right: 1%; width: 20%;}
#block_01 .pos_rel .img_wrap02{ top: 31.7%; right: 4.9%; width: 12%;}
#block_01 .flex{ display: flex; align-items: center; justify-content: center; gap: 50px; margin-bottom: 70px;}
#block_01 .flex .img_wrap{ margin-bottom: 0; max-width: 500px;}
#block_01 .flex .sub_ttl{ text-align: left;}
#block_01 .explanation_txt{ margin-top: 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{ margin-bottom: 80px; width: 100%;}
#block_02 .inner table tbody{ width: 100%;}
#block_02 .inner table tbody tr{ font-size: 16px; font-weight: 700;}
#block_02 .inner table tbody tr th{ background: #000; color: #fff; padding: 20px 0; box-sizing: border-box; text-align: center; font-weight: 700; width: calc(100% / 3); font-size: 18px;}
#block_02 .inner table tbody tr td{ padding: 20px 0; box-sizing: border-box; background: #fff; width: calc(100% / 3); font-size: 24px;}
#block_02 .inner table tbody tr td .red{ font-weight: 700;}
#block_02 .inner table tbody tr td ul{}
#block_02 .inner table tbody tr td ul li{ line-height: 1.4; text-indent: -1em; padding-left: 1em;}
#block_02 .inner table tbody tr td ul li:first-child{ margin-bottom: 10px;}
#block_02 .inner table tbody tr td p{ line-height: 1.4; text-indent: -1em; padding-left: 1em;}

#block_02 .inner table.tab2 tbody tr th{width: calc(100% / 4);}
#block_02 .inner table.tab2 tbody tr td{width: calc(100% / 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 .flex{ width: 100%; margin-bottom: 40px;}
#block_02 .inner .flex .pattern{ margin-bottom: 0; width: 220px;}
#block_02 .inner .flex .img_wrap{ width: calc(100% - 480px);}
#block_02 .inner .flex .pattern .pattern_inner .ttl{ text-align: left; font-size: 20px; font-weight: 700; margin-bottom:10px;}
#block_02 .inner .flex .pattern .pattern_inner{ margin-bottom:20px;}
#block_02 .inner .flex .pattern .pattern_inner:last-of-type{ margin-bottom:0;}
#block_02 .inner .flex .pattern .pattern_inner dl{ font-size: 18px;}
#block_02 .inner .flex .pattern .pattern_inner dl dt{ background: #000; color: #fff; padding: 10px 0; box-sizing: border-box; text-align: center; font-weight: 700; margin-bottom: 2px;}
#block_02 .inner .flex .pattern .pattern_inner dl dd{ padding: 10px 0; font-size: 16px; font-weight: 700; margin-bottom: 2px; background: #fff; box-sizing: border-box;}
#block_02 .inner > .pattern{ max-width: 600px; margin: 0 auto 80px;}
#block_02 .inner .pattern .pattern_inner .ttl{ text-align: left; font-size: 20px; font-weight: 700; margin-bottom:10px;}
#block_02 .inner .pattern table{ margin-bottom: 20px;}
#block_02 .inner .pattern table tbody tr{ font-size: 18px;}
#block_02 .inner .pattern table tbody tr th{ padding: 10px 0;}
#block_02 .inner .pattern table tbody tr td{ padding: 10px 0; font-size: 16px;}

@media screen and (max-width:999px){
	#block_02 .inner .flex{ flex-wrap: wrap; margin-bottom: 20px;}
	#block_02 .inner .flex.column_re{ flex-direction: column-reverse;}
	#block_02 .inner .flex .img_wrap{ width: 100%; max-width: 500px; margin: 0 auto;}
	#block_02 .inner .flex .pattern{ width: 100%; order: 1;}
	#block_02 .inner .flex .pattern .pattern_inner .dl_wrap{ display: flex;gap: 2px;}
	#block_02 .inner .flex .pattern .pattern_inner .dl_wrap dl{ width: calc(100% / 3);}
	#block_02 .inner > .pattern{ margin-bottom:40px;}
	#block_02 .inner .flex2 .pattern .pattern_inner .dl_wrap{ flex-wrap: wrap;}
	#block_02 .inner .flex2 .pattern .pattern_inner .dl_wrap dl{ width: calc(50% - 4px);}
}
@media screen and (max-width:767px){
	#block_02 .inner > table{ margin-bottom: 30px;}
	#block_02 .inner table tbody tr{ font-size: 12px; }
	#block_02 .inner table tbody tr th{ padding: 10px 0; font-size: 14px;}
	#block_02 .inner table tbody tr td{ padding: 10px 0;font-size: 18px;}
	#block_02 .inner .flex .pattern{ margin-bottom: 10px; width: 100%;}
	#block_02 .inner .flex .img_wrap{ width: 100%;}
	#block_02 .inner .flex .pattern .pattern_inner .ttl{ font-size: 14px; margin-bottom:5px;}
	#block_02 .inner .flex .pattern .pattern_inner .dl_wrap dl{ font-size: 14px;}
	#block_02 .inner .flex .pattern .pattern_inner .dl_wrap dl dt{ padding: 6px 0;}
	#block_02 .inner .flex .pattern .pattern_inner .dl_wrap dl dd{ padding: 6px 0; font-size: 12px;}
	#block_02 .inner .pattern .pattern_inner .ttl{ font-size: 14px; margin-bottom:5px;}
	#block_02 .inner .pattern .pattern_inner table tbody tr{ font-size: 14px;}
	#block_02 .inner .pattern .pattern_inner table tbody tr th{ padding: 6px 0;}
	#block_02 .inner .pattern .pattern_inner table tbody tr td{ padding: 6px 0; font-size: 12px;}
	#block_02 .inner .flex2 .left{ width: 100%; max-width: 500px; margin: 0 auto;}
	#block_02 .inner .flex2 .img_wrap{ width: 100%; max-width: 500px; margin: 0 auto;}
	#block_02 .inner .flex2 .left table tbody tr{ font-size: 12px;}
	#block_02 .inner .flex2 .left table tbody tr th{ padding: 10px 0; width: 100px;}
	#block_02 .inner .flex2 .left table tbody tr td{ padding: 10px 0; font-size: 12px; width: calc(100% - 100px);}
}
/*-------------------------
__#block_03
-------------------------*/
#block_03{ padding: 100px 0 50px;}
#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;}
@media screen and (max-width:999px){
	#block_03{ padding: 80px 0 40px;}
}
@media screen and (max-width:767px){
	#block_03{ padding: 50px 0 30px;}
	#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;}
}