@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* mainimage */
.mainvisual{position: relative;overflow: hidden;width: 100%;}
.mainvisual h2{position: absolute;z-index: 2;display: flex;}
#mv h2{width: 65%;bottom: 0;right: 14%;opacity: 0.8;}
.mainimage{width: 100%;}
.mainimage figcaption.cap_w{font-size: 12px;position: absolute;bottom: 10px;right: 20px;z-index: 2;}

@media screen and (max-width: 767px){
.mainimage{width: 100%;}
}

/* 共通 */
section{overflow: hidden;}
.contents_imgbg{background: url("../../common/img/layer_bk.webp") top center/contain;}
.outer{max-width: 1300px;margin: 0 auto;}
.inner{max-width: 1000px;margin: 0 auto;width: 90%;padding: 100px 0;}
.bottom_note .inner{padding: 0;}
.contents_tit{font-size: 32px;text-align: center;line-height: 1.2;}
.contents_tit span{letter-spacing: 0.1em;display: inline-block;color: #5e6d57;border-top: 1px solid #5e6d57;border-bottom: 1px solid #5e6d57;padding: 0.7em 0.5em 0.6em 0.5em;}
.item{margin-top: 80px;}
.contents_tit + .item{margin-top: 60px;}
.item_tit{font-size: 24px;letter-spacing: 0.15em;font-weight: 500;text-align: center;line-height: 1.7;color: #5e6d57;}
.item_tit + *{margin-top: 40px;}
.lead{font-size: 18px;line-height: 1.9;text-align: center;margin-top: 2em;}
.item_tit + .lead{margin-top: 1.5em;}
.element_tit{font-size: 19px;color: #5e6d57;}
.element_tit + *{margin-top: 20px;}
.element_tit + p{font-size: 15px;margin-top: 0.7em;line-height: 1.6;}
figure + .element_tit{margin-top: 0.7em;}
.note{font-size: 10px;margin-top: 0.9em;text-align: justify;}
.note.tx_r{text-align: right;}
.cap_b{text-shadow: 0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff;}
.cap_w{text-shadow: 0 0 0.1em #000,0 0 0.1em #000,0 0 0.1em #000,0 0 0.1em #000;}
.bottom_note ul li::before{content: "※";}
[data-ruby] {position: relative;}
[data-ruby]::before {content: attr(data-ruby);position: absolute;bottom: -1.3em;left: 0;right: 0;margin: auto;font-size: 0.45em;letter-spacing: 0;color: #000;}
sup{font-size: 0.6em;vertical-align: 0.5em;}
sub{font-size: 0.6em;}

@media screen and (max-width: 767px){
.cap_l,
.cap_r{font-size: 10px;}
.inner{padding: 50px 0;}
.bottom_note .inner{padding: 0;}
.contents_tit{font-size: 24px;}
.contents_tit span{padding: 0.5em 0.5em 0.4em 0.5em;}
.item{margin-top: 40px;}
.contents_tit + .item{margin-top: 30px;}
.item_tit{font-size: 19px;}
.item_tit + *{margin-top: 20px;}
.lead{font-size: 15px;margin-top: 1.8em;text-align: left;line-height: 1.7;}
.item_tit + .lead{margin-top: 1.2em;}
.element_tit{font-size: 17px;}
.element_tit + *{margin-top: 12px;}
.element_tit + p{font-size: 13px;line-height: 1.4;}
.note{font-size: 9px;}
.simplebar-track.simplebar-horizontal{height: 8px!important;background: #B5B5B5;border-radius: 5px;max-width: 700px;margin: 0 auto;}
.simplebar-scrollbar{height: 8px;background: #41485B;border-radius: 5px;top: 0;}
}

.anchor{display: flex;justify-content: center;gap: 30px;padding-top: 150px;}
.anchor > a{border: 1px solid #5e6d57;border-left-width: 10px; color: #5e6d57;padding: 0.5em;width: 320px;text-align: center;text-decoration: none;position: relative;background: linear-gradient(45deg,#fff,#f1f1eb);transition: 0.3s all;}
.anchor > a::after{content: "";position: absolute;clip-path: polygon(100% 0, 100% 100%, 0 100%);background: #5e6d57;width: 18px;height: 18px;bottom: -1px;right: -1px;}
.anchor > a span{display: block;font-size: 1.1em;letter-spacing: 0.1em;}

@media screen and (min-width: 768px){
.anchor > a:hover{opacity: 0.6;}
}

@media screen and (max-width: 767px){
.anchor{gap: 10px;padding-top: 100px;width: 90%;margin-inline: auto;}
.anchor > a{font-size: 14px;}
}

/* リード文 */
#quality{background-position: center 20%;padding: 80px 0 100px;}
.intro_tit{font-size: 32px;text-align: center;color: #5e6d57;letter-spacing: 0.15em;font-weight: 600;padding-left: 0.15em;}
.intro_tit + p{text-align: center;letter-spacing: 0.05em;line-height: 1.8;font-size: 18px;margin-top: 2em;}

@media screen and (max-width: 767px){
#quality{padding: 50px 0 50px;}
.intro_tit{font-size: 20px;}
.intro_tit + p{font-size: 15px;}
}

/* ZEH-M Oriented */
#zeh-m{background: #fff;}
#new_standard figure{text-align: center;margin-top: 40px;}
.three_merit_item{margin: 50px auto 0!important;display: flex;justify-content: space-between;max-width: 700px;}
.three_merit_item > *{width: 31%;padding: 30px;}
.three_merit_item > *:nth-of-type(1){background: #867756;}
.three_merit_item > *:nth-of-type(2){background: #5c6e72;}
.three_merit_item > *:nth-of-type(3){background: #865b4c;}
.three_merit_item > * p{font-size: 20px;text-align: center;color: #fff;}
.three_merit_item > * figure{margin: 20px auto 0;width: 70%;}
#comfort .item_tit{color: #867756;}
.comfort_list{margin: 50px auto 0!important;display: flex;justify-content: space-between;flex-wrap: wrap;gap: 35px 0;}
.comfort_list > *{width: 31%;}
.comfort_list > *:nth-of-type(-n+2){width: 46%;}
.comfort_list > * .element_tit{color: #000;}
.comfort_list > * p{text-align: justify;}
#year_cost .item_tit{color: #5c6e72;}
.year_cost_fig{margin: 50px auto 0;max-width: 550px;}
#high_efficiency .item_tit{color: #5c6e72;}
.high_efficiency_item{display: flex;justify-content: space-between;margin-inline: auto;max-width: 800px;}
.high_efficiency_item > *{width: 120px;height: 120px;display: flex;justify-content: center;align-items: center;background: #5c6e72;color: #fff;font-size: 19px;text-align: center;border-radius: 50%;line-height: 1.2;}
#eco .item_tit{color: #865b4c;}
.eco_item{display: flex;justify-content: space-between;flex-wrap: wrap;border: 1px solid #333;padding: 30px;}
.eco_item > dt{width: 55%;}
.eco_item > dd{width: 40%;}

@media screen and (max-width: 767px){
#new_standard figure{margin: 20px auto 0;max-width: 200px;}
.three_merit_item{margin: 25px auto 0!important;}
.three_merit_item > *{width: 33%;padding: 20px 0;}
.three_merit_item > * p{font-size: 16px;}
.three_merit_item > * figure{margin: 15px auto 0;width: 70%;}
.comfort_img{overflow-x: auto;}
.comfort_img img{max-width: none;width: 700px;}
.comfort_img .cap_r{right: auto;left: 10px;}
.comfort_list{margin: 30px auto 0!important;gap: 20px 0;}
.comfort_list > *{width: 48%;order: 10;}
.comfort_list > * .element_tit{font-size: 16px;}
.year_cost_fig{margin: 30px auto 0;max-width: 550px;}
.high_efficiency_item{flex-wrap: wrap;gap: 12px 12px;justify-content: center;}
.high_efficiency_item > *{width: 90px;height: 90px;font-size: 16px;}
}

/* ウルトラファインバブル熱源機 */
#ultra_fine_bubble{background: #eff8fe;}
.wet_clean_item{display: grid;justify-content: space-between;grid-template-columns: 30% 15.8% 22.4% 26.9%;}
.wet_clean_item > figure:nth-of-type(1){grid-row: 1/3;}
.wet_clean_item > .lead{text-align: left;margin: 0 0 0.5em 1em;grid-column: 2/5;}
.bubble_item{display: flex;justify-content: space-between;margin-top: 50px;}
.bubble_item > *{width: 31%;}
.bubble_item > * .element_tit{font-family: "Public Sans","Noto Sans", sans-serif;font-weight: 600;}
.bubble_item > * .element_tit + p{margin-top: 0.3em;text-align: justify;}
.bubble_item > * figure{margin-top: 15px;}
.bubble_item > * figure + span{display: block;}
.bubble_item > * figure + span p{font-size: 16px;margin-top: 0.5em;}
.bubble_item > * figure + span p i{font-size: 0.7em;display: inline-block;margin: 0 0.3em;vertical-align: 0.1em;}
.bubble_item > * figure + span div{margin-top: 0.5em;font-size: 17px;text-align: center;color: #fff;padding: 0.2em;}
.bubble_item > dt .element_tit{color: #004259;}
.bubble_item > dt figure + span p i{color: #50637c;}
.bubble_item > dt figure + span div{background: #5e6d57;}
.bubble_item > dd .element_tit{color: #231815;}
.bubble_item > dd figure + span p i{color: #b7b8b8;}
.bubble_item > dd figure + span div{background: #b7b8b8;}
.bubble_item + .lead{margin-top: 3em;}
.ultrafinebubble_fig{margin-top: 30px;}
.ultrafinebubble_fig_copy{padding: 0 20px 15px 20px;background: #c2c9d1;}
.ultrafinebubble_fig_copy .note{text-align: right;margin-top: 0;}
.ultrafinebubble_fig_copy div{text-align: center;font-size: 18px;background: #03351d;letter-spacing: 0.1em;padding: 0.3em 0 0.4em;margin-top: 0.3em;color: #fff;font-family: "Public Sans","Noto Sans", sans-serif;}
.cleaning_effect_item{display: flex;flex-wrap: wrap;margin-top: 50px;}
.cleaning_effect_item > li:nth-of-type(odd){width: 48%;}
.cleaning_effect_item > li:nth-of-type(even){border-left: 1px solid #231815;width: 52%;}
.cleaning_effect_item > li:nth-of-type(n+3){border-top: 1px solid #231815;}
.cleaning_effect_item > li:nth-of-type(1){padding: 0 30px 30px 0;}
.cleaning_effect_item > li:nth-of-type(2){padding: 0 0 30px 30px;}
.cleaning_effect_item > li:nth-of-type(3){padding: 30px 30px 0 0;}
.cleaning_effect_item > li:nth-of-type(4){padding: 30px 0 0 30px;}
.cleaning_effect_item .element_tit + figure{margin-top: -20px;}
.cleaning_effect_item .element_tit + figure + .note{text-align: justify;}
.cleaning_movie{margin: 80px auto 0;max-width: 700px;}
.youtube {position: relative;width: 100%;padding-top: 56.25%;}
.youtube iframe {position: absolute;top: 0;right: 0;width: 100%;height: 100%;}
.video video {width: 100%;}

@media screen and (max-width: 767px){
.wet_clean_item{grid-template-columns: 70% 29%;}
.wet_clean_item > figure:nth-of-type(1){grid-row: 1/4;}
.wet_clean_item > figure img{width: 100%;}
.wet_clean_item > .lead{margin: 0.8em 0 0 0;grid-column: 1/3;text-align: justify;}
.bubble_item{flex-wrap: wrap;margin-top: 30px;gap: 15px 0;}
.bubble_item > *{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;}
.bubble_item > * .element_tit{width: 100%;}
.bubble_item > * .element_tit + p{width: 100%;}
.bubble_item > * figure{width: 52%;margin-top: 10px;}
.bubble_item > * figure + span{width: 46%;margin-top: 10px;}
.bubble_item > * figure + span p{font-size: 14px;margin-top: 0;}
.bubble_item > * figure + span div{margin-top: 0.5em;font-size: 14px;}
.bubble_item + .lead{margin-top: 3em;}
.ultrafinebubble_fig{margin-top: 20px;overflow-x: auto;}
.ultrafinebubble_fig .cap_r{right: auto;left: 10px;}
.ultrafinebubble_fig img{width: 700px;max-width: none;}
.ultrafinebubble_fig_copy{padding: 10px;}
.ultrafinebubble_fig_copy div{font-size: 14px;}
.cleaning_effect_item{display: flex;flex-wrap: wrap;margin-top: 30px;}
.cleaning_effect_item > li:nth-of-type(odd){width: 100%;}
.cleaning_effect_item > li:nth-of-type(even){border-left: none;width: 100%;}
.cleaning_effect_item > li:nth-of-type(n+2){border-top: 1px solid #231815;}
.cleaning_effect_item > li:nth-of-type(1){padding: 0 0 15px 0;}
.cleaning_effect_item > li:nth-of-type(2){padding: 15px 0 15px 0;}
.cleaning_effect_item > li:nth-of-type(3){padding: 15px 0 15px 0;}
.cleaning_effect_item > li:nth-of-type(4){padding: 15px 0 0 0;}
.cleaning_movie{max-width: 100%;margin: 40px auto 0;}
.video video {width: 100%;}
}

/* タッチレス蛇口一体型浄水器 */
#water_purifier{background: #fff;}
.operability_item{display: flex;align-items: flex-end;justify-content: space-between;}
.operability_item > figure{width: 66%;}
.operability_item > .lead{width: 31%;text-align: justify;}
.operability_list{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 50px;gap: 35px 0;}
.operability_list > li{width: 47%;}
.operability_list > li figure{display: flex;justify-content: center;align-items: center;}
.operability_list > li figure + p{font-size: 15px;margin-top: 1em;line-height: 1.6;text-align: justify;}

@media screen and (max-width: 767px){
.operability_item{flex-wrap: wrap;}
.operability_item > figure{width: 100%;}
.operability_item > .lead{width: 100%;margin-top: 0.7em;}
.operability_list{margin-top: 50px;gap: 20px 0;}
.operability_list > li{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;}
.operability_list > li .element_tit{width: 100%;}
.operability_list > li figure{display: flex;justify-content: center;align-items: center;width: 58%;}
.operability_list > li figure + p{font-size: 13px;margin-top: 1em;line-height: 1.6;text-align: justify;width: 40%;}
.operability_list > li:nth-of-type(4) figure{width: 100%;}
.operability_list > li:nth-of-type(4) figure + p{width: 100%;}
}

/* 洗面用水栓「キレイスト」 */
#kireist{background: #eff8fe;}
.kireist_item{display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 850px;margin-inline: auto;}
.kireist_item > .kireist_img01{width: 35.3%;}
.kireist_item > .kireist_lead{width: 62%;position: relative;}
.kireist_item > .kireist_lead .lead{text-align: justify;margin-top: 0;}
.kireist_item > .kireist_lead .kireist_logo{position: absolute;right: 0;bottom: 0;}
.kireist_item > .kireist_img02{width: 34.24%;margin-top: 50px;}
.kireist_item  .element_tit{margin-bottom: 0.3em;}
.kireist_item > .kireist_img03{width: 58.24%;margin-top: 50px;}
.kireist_item figure + p{margin-top: 1em;line-height: 1.6;text-align: justify;}

@media screen and (max-width: 767px){
.kireist_item > .kireist_img02{width: 100%;margin-top: 30px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.kireist_item > .kireist_img02 .element_tit{width: 100%;}
.kireist_item > .kireist_img02 figure{width: 48%;}
.kireist_item > .kireist_img02 figure + p{margin-top: 0.5em;width: 48%;font-size: 13px;}
.kireist_item > .kireist_img03{width: 100%;margin-top: 30px;}
.kireist_item figure + p{font-size: 13px;}
}

/* 戸別専用宅配ボックス */
#delivery_box{}
#delivery_box .inner{padding-bottom: 40px;}
.all_homes_item{display: flex;justify-content: space-between;max-width: 600px;margin-inline: auto;margin-top: 50px;}
.all_homes_item > li:nth-of-type(1){width: 16%;text-align: center;}
.all_homes_item > li:nth-of-type(2){width: 76.9%;}
.all_homes_item > li p{text-align: center;width: 100%;margin-top: 1em;font-size: 12px;}

@media screen and (max-width: 767px){
#delivery_box .inner{padding-bottom: 30px;}
.all_homes_item{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 30px;}
.all_homes_item > li:nth-of-type(1){width: 15%;}
.all_homes_item > li:nth-of-type(2){width: 80%;}
}

/* EV充電器 */
#ev_charger{}
.car_life_item{max-width: 850px;margin-inline: auto;display: flex;justify-content: space-between;align-items: flex-end;flex-wrap: wrap;}
.car_life_item > figure{width: 65.9%;}
.car_life_item > .lead{width: 31%;text-align: justify;}
.car_life_item > .note{width: 100%;}

@media screen and (max-width: 767px){
.car_life_item > figure{width: 100%;}
.car_life_item > .lead{width: 100%;margin-top: 0.7em;}
.car_life_item > .note{width: 100%;}
}


/* Structure */
#structure h2{width: 66.7%;bottom: -2%;left: 15%;}
#structure .outer{background: #fff;}
.structure_list{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 50px;gap: 35px 0;}
.structure_list > *{width: 47%;}
.structure_list > * .element_tit{color: #fff;background: #5e6d57;padding: 0.3em 0 0.4em 0.5em;}
.structure_list > li figure{display: flex;justify-content: center;align-items: center;min-height: 200px;padding-bottom: 20px;}
.structure_list > li figure .cap_r{right: 0;bottom: 0;}
.structure_list > * figure + p{font-size: 15px;line-height: 1.6;margin-top: 1em;text-align: justify;}
.structure_list > li .taishindoor_fig{padding-bottom: 0;}
.structure_list > li .taishindoor_fig .cap_r{bottom: 7%;right: 70%;white-space: nowrap;}
.structure_list > li .quality_fig{padding-bottom: 0;min-height: auto;}
#not_deteriorate{margin-top: 50px;}
.not_deteriorate_item{display: flex;justify-content: space-between;align-items: center;border: 1px solid #333;padding: 20px 30px;}
.not_deteriorate_item > dt{width: 51%;}
.not_deteriorate_item > dd{width: 47%;}
.not_deteriorate_item > dd h5{font-family: "Public Sans","Noto Sans", sans-serif;font-weight: 600;font-size: 15px;}
.not_deteriorate_item > dd table{font-size: 20px;}
.not_deteriorate_item > dd table th,.not_deteriorate_item > dd table td{border: 1px solid #333;vertical-align: middle;}
.not_deteriorate_item > dd table th{font-family: "Public Sans","Noto Sans", sans-serif;text-align: center;width: 13%;padding: 3px;}
.not_deteriorate_item > dd table th big{font-size: 2.5em;line-height: 0.8;}
.not_deteriorate_item > dd table tr:nth-of-type(1) th{font-size: 0.8em;font-weight: 700;color: #fff;background: #9e9061;}
.not_deteriorate_item > dd table tr:nth-of-type(1) th big{font-weight: 700;}
.not_deteriorate_item > dd table tr:nth-of-type(2) th{font-size: 0.75em;font-weight: 500;}
.not_deteriorate_item > dd table tr:nth-of-type(2) th big{font-weight: 500;}
.not_deteriorate_item > dd table tr:nth-of-type(3) th{font-size: 0.6em;}
.not_deteriorate_item > dd table tr:nth-of-type(3) th big{vertical-align: -0.15em;}
.not_deteriorate_item > dd table td{padding: 3px 10px;}
.not_deteriorate_item > dd table td h6{font-family: "Public Sans","Noto Sans", sans-serif;font-weight: 500;font-size: 0.7em;border-bottom: 2px dotted;padding-bottom: 0em;margin-bottom: 0.2em;}
.not_deteriorate_item > dd table td p{font-size: 0.6em;line-height: 1.3;text-align: justify;}
.not_deteriorate_item > dd table tr:nth-of-type(1) td{color: #fff;background: #9e9061;}
.not_deteriorate_item > dd table tr:nth-of-type(1) td h6{border-color: #fff;}
.not_deteriorate_item > dd table tr:nth-of-type(2) > *{background: #ebebec;}
.not_deteriorate_item > dd table + p{font-size: 0.8em;}
.not_deteriorate_item + p{font-size: 15px;margin-top: 1em;line-height: 1.6;text-align: justify;}
#casbee{margin-top: 50px;width: 100%;/* height: 400px; */}
#casbee figure{text-align: center;}
#casbee figure img{width: 50%;}
#musashinodaichi{margin-top: 50px;background: #5e6d57;color: #fff;padding: 40px 30px;}
#musashinodaichi .element_tit{color: #fff;text-align: center;}
#musashinodaichi .element_tit + p{text-align: center;font-size: 15px;line-height: 1.6;}
#musashinodaichi figure{margin-top: 30px;}

@media screen and (max-width: 767px){
#structure .inner{padding-bottom: 0;}
.structure_list{margin-top: 30px;gap: 20px 0;}
.structure_list > *{width: 100%;}
.structure_list > li figure{min-height: auto;padding-bottom: 20px;}
.structure_list > * figure + p{font-size: 13px;line-height: 1.5;margin-top: 1em;}
#not_deteriorate{margin-top: 30px;}
.not_deteriorate_item{flex-wrap: wrap;padding: 15px;}
.not_deteriorate_item > dt{width: 100%;}
.not_deteriorate_item > dd{width: 100%;margin-top: 15px;}
.not_deteriorate_item > dd h5{font-size: 14px;}
.not_deteriorate_item > dd table{font-size: 18px;}
.not_deteriorate_item + p{font-size: 13px;line-height: 1.5;}
#casbee{margin-top: 30px;}
#casbee figure img{width: 80%;}
#musashinodaichi{margin-top: 30px;padding: 20px 15px;}
#musashinodaichi .element_tit + p{text-align: justify;font-size: 13px;line-height: 1.5;}
#musashinodaichi figure{margin-top: 15px;}
}

.entryaction{padding: 90px 0 1px;}
.entryaction .inner{ padding: 0;}
@media screen and (max-width: 767px){
.entryaction{padding: 10px 0 1px;}
}