/** ************************

added 20250826

************************ **/

#Contents section.overview > .overview-title.-workable .sub-text span{
color: #55A541;
}
.workableFigure01{
max-width: 854px;
margin-left: auto;
margin-right: auto;
}

@media screen and (min-width: 1305px){
.OptionWideRWD #Contents .workableFigure01 img{
max-width: 854px;
height: auto;
}
}

#figuare_01svg .speechbubble,
#figuare_01spsvg .speechbubble{
fill: #737373;
}

/*sec0 svg text*/
.workable_text1{
font-size: 16px;
font-weight: 700;
fill: #4D4D4D;
}
.workable_text2{
font-size: 14px;
font-weight: 700;
fill: #FFFFFF;
}
.workable_text3{
font-size: 20px;
font-weight: 700;
fill: #E61B1C;
}

/*sec0 svg sp text*/
.workable_text1sp{
font-size: 16px;
font-weight: 700;
fill: #4D4D4D;
}
.workable_text2sp{
font-size: 20px;
font-weight: 700;
fill: #E61B1C;
}
.workable_text3sp{
font-size: 16.8px;
font-weight: 700;
fill: #FFFFFF;
}

/*sec1 svg text*/
.speechBubble01{
fill: #fff;
stroke: #4d4d4d;
stroke-miterlimit: 10;
stroke-width: 2px;
}
.workable_text4{
font-size: 22px;
font-weight: 700;
fill: #4D4D4D;
}
.workable_text5{
font-size: 22px;
font-weight: 700;
fill: #55A541;
}
.workable_text6{
font-size: 20px;
font-weight: 700;
fill: #4D4D4D;
}
.workable_text7{
font-size: 22px;
font-weight: 700;
fill: #FFFFFF;
}
.workable_text8sp{
font-size: 20px;
font-weight: 700;
fill: #55A541;
}
.workable_text9sp{
font-size: 20.5px;
font-weight: 700;
fill: #4D4D4D;
}
.workable_text10sp{
font-size: 20px;
font-weight: 700;
fill: #4D4D4D;
}
.workable_text11sp{
font-size: 33px;
font-weight: 700;
fill: #FFFFFF;
}
.workable_text12sp{
font-size: 33px;
font-weight: 700;
fill: #4D4D4D;
}
.sec04_02box{
fill: #55A541;
}

/** workable section **/
.workableSectionSet{
background-color: #f4f4f4;
/*padding: 60px 137px;*/
padding: 60px clamp(78px, calc(8.2585vw + 20.5745px), 137px) 0;
}
.section01ColumSet,
.workableSectionColumSet{
display: flex;
gap: 10%;
margin-bottom: 2em;
flex-direction: column;
}
.sec01Column{
/*max-width: 454px;*/
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.workableColumnHeader{
margin-bottom: 15px;
display: flex;
color: #4D4D4D;
/*font-size: 26px;*/
font-size: clamp(16px, calc(1.0772vw + 7.727px), 30px);
font-weight: 600;
align-items: flex-start;
line-height: 1.0;
}
.workableColumnHeader sup{
margin: 0;
}
.section01Text{
color: #4D4D4D;
font-size: clamp(13px, calc(1.6158vw + 0.591px), 22px);
font-weight: 400;
margin-bottom: 2em;
text-indent: -1em;
padding-left: 1em;
}
.section01Text div {
line-height: 1.35em;
margin-bottom: 0.7em;
}
.workableImage01{
position: relative;
width: 100%;
}

/*#sec01_01svg,*/
#figuare_01svg,
#sec01_01svg,
#sec02_01svg,
#sec03_01svg,
#sec04_02svg{
display:block;
width:100%;
height:auto;
overflow:visible;
}
#figuare_01svg,
#sec01_01svg
#sec01_01spsvg,
#sec02_01svg,
#sec02_01spsvg,
#sec03_01svg,
#sec03_01spsvg,
#sec04_04svg,
#sec04_04spsvg{
width:100%;
height:auto;
overflow:visible;
}

@media screen and (max-width: 767px) {
.JS #figuare_01svg.HideRWD,
.JS #sec01_01svg.HideRWD,
.JS #sec02_01svg.HideRWD,
.JS #sec03_01svg.HideRWD,
.JS #sec04_02svg.HideRWD{
display: none;
}
.workableSectionSet {
padding: 27px;
}
.workableColumnHeader {
justify-content: center;
}
#RemoteControl .workableSectionSet,
#FloodProtection .workableSectionSet {
padding-bottom: 0;
}
.section01ColumSet, .workableSectionColumSet{
margin-bottom: 0;
}
}

/** section 03 **/
.workableSection03Set{
background-color: #f4f4f4;
/*padding: 60px 137px;*/
padding: 60px clamp(78px, calc(8.2585vw + 20.5745px), 137px);
}
.section03ColumSet{
display: flex;
gap: 2%;
flex-direction: row;
}
.sec03Column{
max-width: 454px;
width:100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}

@media screen and (max-width: 767px) {
.workableSection03Set{
padding: 27px;
}
.section03ColumSet{
margin-bottom: 0;
flex-direction: column;
}
.sec03Column{
max-width: none;
width: 100%;
}
.sec03Column .section01Text {
margin-bottom: 0;
}
}

/** section 04 **/
.workableSection04Set{
background-color: #f4f4f4;
padding: 60px clamp(78px, calc(8.2585vw + 20.5745px), 137px);
}
.section04ColumSet{
display: flex;
gap: 1.5%;
}
.sec04Column01{
width: 40%;
}
.sec04Column02{
width: 58.5%;
}
.sec4Box{
fill: #549e42;
}
.sec04_01_Image{
margin: 0.5em auto 2em;
max-width: 175px;
}
.sec04Column01 .section01Text {
text-indent: 0;
padding-left: 0;
}

@media screen and (max-width: 767px) {
.workableSection04Set{
padding: 27px;
}
.section04ColumSet{
margin-bottom: 0;
flex-direction: column;
}
.sec04Column01{
width: 100%;
}
.sec04Column02{
width: 100%;
}
.sec4Box{
fill: #549e42;
}
}

p.txt.function-other-txt{
margin-bottom: 2em;
}

@media screen and (min-width: 1305px) {
.OptionWideRWD #Contents .section01BWThumb img,
.OptionWideRWD #Contents .sec04_02_Image img,
.OptionWideRWD #Contents .sec04_01_Image img{
max-width: none;
width: 100%;
height: auto;
}
}

@media screen and (max-width: 767px) {
.function-new{
display: flex;
}
.function-new::before{
font-size: 11px;
padding: 4px 4px;
margin-right: 5px;
}
.function-column{
padding: 15px 15px 0;
width: 100%;
}
.function-list{
gap: 20px;
flex-direction: column;
}
.function-wrapper{
padding: 6px 12.5px 0;
}
.function-list .lead{
font-size: 16.5px;
}
.function-list .title{
font-size: 24px;
margin-bottom: 5px;
}
.function-list .txt{
font-size: 14.5px;
}
.function-list .img img{
width: 75%;
}
.function-other-txt{
margin-top: 20px;
}
.categoryList{
justify-content: center;
align-items: center;
}
.function-other-column{
width: 70%;
background-color: #F4F4F4;
}
.function-other-wrapper{
padding: 10.5px 12px;
}
.function-other-column .title{
border-left-width: 3px;
}
.function-other-column .title a{
padding: 4px 20px 4px 8px;
}
.function-other-column .title a{
font-size: 13px;
line-height: 1.3em;
}
.function-other-column .title a::before{
right: 0;
width: 11px;
height: 11px;
background-size: 11px;
}
.function-other-column .title a .subTitle{
font-size: 11px;
}
.u-modal-cap.item15img01{
text-align: center;
margin-top: 1em;
}
.u-modal-cap.item15img01 img{
margin: 0 auto;
width: 60%;
}
}

.modal-card__header::before{
background-color: #55A541;
}