@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 .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 .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_ttl{ margin-bottom: 40px!important; font-size: 24px!important;}
#block_01 .inner .bg_ttl{ background: #a3211d; padding: 14px 25px; display: inline-block; margin-bottom: 20px; font-size: 21px; color: #fff; font-weight: 700;}

#block_01 .inner .flex{ display: flex; align-items: center; justify-content: center; gap: 30px; margin-bottom: 70px;}
#block_01 .inner .flex .sub_ttl{ text-align: left; font-size: 18px!important;}
#block_01 .inner .flex .flex{ width: 50%; gap: 20px; margin-bottom: 0;}
#block_01 .inner .flex .flex .img_wrap{ margin-bottom: 0; max-width: 240px;}
#block_01 .inner .flex .explanation_txt{ margin-top: 10px;}
#block_01 .inner .flex .flex .left table tbody tr{ display: flex; flex-wrap: wrap;}
#block_01 .inner .flex .flex .left table tbody tr th{ width: 100%;}
#block_01 .inner .flex .flex .left table tbody tr td{ width: 100%; font-size: 20px;}

#block_01 .inner table{ width: 100%;}
#block_01 .inner table tbody{ width: 100%;}
#block_01 .inner table tbody tr{ font-size: 16px; font-weight: 700;}
#block_01 .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_01 .inner table tbody tr td{ padding: 20px 0; box-sizing: border-box; background: #f0f0ee; width: calc(100% / 3); font-size: 24px;}
#block_01 .inner table tbody tr td .red{ font-weight: 700;}

@media screen and (max-width:999px){
	#block_01{ padding: 0 0 40px;}
	#block_01 .inner .bg_ttl{ padding: 10px 20px; font-size: 16px;}
	#block_01 .inner .flex{ flex-wrap: wrap; gap: 10px; margin-bottom: 20px;}
	#block_01 .inner .flex .flex{ width: 100%; flex-wrap: nowrap; margin-bottom: 0;}
	#block_01 .inner .flex .flex .img_wrap{ max-width: 380px;}
}
@media screen and (max-width:767px){
	#block_01{ padding: 0 0 30px;}
	#block_01 .inner .sub_ttl{ margin-bottom: 20px!important; font-size: 18px!important; text-align: left;}
	#block_01 .inner .sub_ttl br{ display: none;}
	#block_01 .flex .img_wrap{ max-width: initial; width: 100%;}
	#block_01 .flex .sub_ttl br{ display: none;}
	#block_01 .inner .flex .flex .left table tbody tr td{ font-size:16px;}
	#block_01 .inner table tbody tr{ font-size: 12px;}
	#block_01 .inner table tbody tr th{ padding: 10px 0; font-size: 14px;}
	#block_01 .inner table tbody tr td{ padding: 10px 0; font-size: 14px;}
}
/*-------------------------
__#block_02
-------------------------*/

#block_02 {background: #f0f0ee;}


#block_02 .inner .bg_red{ background: #a3211d; color: #fff; padding: 10px 20px; font-size: 28px; font-weight: 700; display: inline-block; margin: 40px auto;}
#block_02 .inner .sub_ttl{ font-size: 24px!important; margin-bottom: 0!important; display: inline-block;}
#block_02 .inner .sub_ttl .kome{ font-size: 14px!important; display: block;}

@media screen and (max-width:999px){
	#block_02 .inner .bg_red{ font-size: 20px; margin: 30px auto;}
	#block_02 .inner .sub_ttl{ font-size: 18px!important;}
}
@media screen and (max-width:767px){
	#block_02 .inner .bg_red{ font-size: 16px; margin: 20px auto; line-height: 1.6;}
	#block_02 .inner .bg_red span{ display: inline-block;}
	#block_02 .inner .sub_ttl{ font-size: 14px!important;}
}
/*-------------------------
__#block_03
-------------------------*/
#block_03{ padding: 100px 0 50px;}
#block_03 .inner .blo_ttl_wrap .blo_ttl{ margin-bottom: 30px!important;}
#block_03 .inner .blo_ttl_wrap .blo_ttl .blue{ background: #2E3192; width: 50px; height: 50px; border-radius: 50%; display: inline-block; color: #fff; padding: 2px 0 0; box-sizing: border-box; margin: 0 5px;}
#block_03 .inner .blo_ttl_wrap .blo_ttl .red{ background: #a3211d; width: 50px; height: 50px; border-radius: 50%;display: inline-block; color: #fff; padding: 2px 0 0; box-sizing: border-box; margin: 0 5px;}
#block_03 .inner .item_wrap{ display: flex; justify-content: center; gap: 40px; margin-bottom: 60px;}
#block_03 .inner .item_wrap .item{ width: calc((100% - 80px) / 3);}
#block_03 .inner .item_wrap .item .item_txt{ font-size: 16px; margin-bottom: 10px; line-height: 1.4; font-weight: 700;}
#block_03 .inner .item_wrap .item .img_wrap{ position: relative;}
#block_03 .inner .item_wrap .item:first-child .img_wrap::after,
#block_03 .inner .item_wrap .item:nth-child(2) .img_wrap::after{ position: absolute; content: ""; bottom: 20%; right: -30px; width: 20px; height: 20px; border-top: 5px solid #a3211d; border-right: 5px solid #a3211d; transform: rotate(45deg);}
#block_03 .inner .flex{ display: flex; gap:20px; margin: 0 auto; align-items: center; justify-content: center;}
#block_03 .inner .flex .right{ width: 45%;}
#block_03 .inner .flex .left{ background: #f0f0ee; padding: 30px 20px; text-align: left;}
#block_03 .inner .flex .left .ttl{ margin-bottom: 20px; font-size: 21px; font-weight: 700;}
#block_03 .inner .example{ margin-bottom: 20px; padding: 10px 15px; border: 1px solid #000; font-weight: 700; font-size: 18px; display: flex; width: 42px; justify-content: center;}
@media screen and (max-width:999px){
	#block_03{ padding: 80px 0 40px;}
	#block_03 .inner .blo_ttl_wrap .blo_ttl .blue{ width: 40px; height: 40px;}
	#block_03 .inner .blo_ttl_wrap .blo_ttl .red{ width: 40px; height: 40px;}
	#block_03 .inner .flex{ flex-direction: column; gap:20px;}
	#block_03 .inner .flex .right{ width: 100%; max-width: 360px;}
}
@media screen and (max-width:767px){
	#block_03{ padding: 50px 0 30px;}
	#block_03 .inner .blo_ttl_wrap .blo_ttl .blue{ width: 34px; height: 34px;}
	#block_03 .inner .blo_ttl_wrap .blo_ttl .red{ width: 34px; height: 34px;}
	#block_03 .inner .item_wrap{ flex-wrap: wrap; gap: 50px; justify-content: center; align-items: center;}
	#block_03 .inner .item_wrap .item{ width: 100%;}
	#block_03 .inner .item_wrap .item .img_wrap{ max-width: 240px; margin: 0 auto;}
	#block_03 .inner .item_wrap .item:first-child .img_wrap::after,
	#block_03 .inner .item_wrap .item:nth-child(2) .img_wrap::after{ position: absolute; content: ""; top: auto; bottom: -30px; right: 42%; transform: translateX(-50%) rotate(135deg);}
}