@charset "utf-8";

/* ======================================
Features
====================================== */
/* Feature Icon Common */
.features-icon {
    margin: 0 auto;
    max-width: 78px;
}
.features-icon svg {
    display: block;
    width: 100%;
    fill: #50555A;
}

/* features-overview */
.features-overview {
    background: #F4F6F6;
    text-align: center;
    padding: 4rem 0;
}
.features-overview-list {
    display: flex;
    justify-content: center;
    gap: 4%;
    margin: 1rem 0 0;
}
.features-overview-list__item {
    flex: 0 0 30%;
    text-align: center;
}
.features-overview-list .features-icon {
    max-width: 64px;
}
.features-overview-txt {
    line-height: 1.3;
    margin: 1.5rem 0 0;
    font-size: 1.5rem;
}

@media screen and (min-width : 768px) {
    .features-overview {
        margin: 0 0 3rem;
        padding: 6rem 0 4rem;
    }
    .features-overview-list {
        gap: 5rem;
        margin: 2rem 0;
    }
    .features-overview-list__item {
        flex: 0 0 160px;
    }
    .features-overview-txt {
        font-size: 1.9rem;
    }
}

.features-sec {
    padding: 5rem 0 0;
}
.features-sec-head {
    margin: 0 0 3rem;
}
.features-sec-head-txt {
    font-size: 2.4rem;
    margin: 2rem 0 0;
}
.features-sec-catchcopy {
    font-size: 2.8rem;
}
@media screen and (min-width : 768px) {
    .features-sec {
        padding: 5rem 0 0;
    }
    .features-sec-head-txt {
        font-size: 3.2rem;
    }
    .features-sec-catchcopy {
        font-size: 4.0rem;
    }
}

@media screen and (min-width : 768px) {
    .easy-installation-row__item {
        display: flex;
        flex-flow: column;
    }
    .easy-installation-row__item .ttl {
        flex: 0 1 72px;
    }
    .easy-installation-row__item .desc {
        margin: 2rem 0 2rem;
        flex: 1 1 auto;
    }
}

.features-sec-box {
    border: solid 1px #AEB0B1;
    padding: 3rem 2rem;
    margin: 2.5rem 0 1rem;
}
.features-sec-box h4 {
    text-align: center;
}
@media screen and (min-width : 768px) {
    .features-sec-box {
        padding: 4rem 7rem 6rem;
        margin: 4rem 0 2rem;
    }
}

.easy-installation__img01 {
    margin: 5rem auto 2rem;
    max-width: 1000px;
}
.easy-installation__img01 img {
    max-width: 100%;
}
.easy-installation-row__item h3 {
    margin: 2rem 0 1.5rem;
}
.easy-installation-row__item .desc {
    margin: 0 0 2rem;
}
@media screen and (min-width : 768px) {
    .easy-installation-row__item .desc {
        font-size: 1.8rem;
        margin: 0 0 1.5rem;
    }
    .easy-installation__img01 {
        margin: 6rem auto 2rem;
    }
    .easy-installation-row__item h3 {
        margin: 1.5rem 0 1.5rem;
    }
}

#e-friendly-product .features-sec-box .img {
    margin: 0 0 1.5rem;
}
@media screen and (min-width : 768px) {
    #e-friendly-product .features-sec-box {
        display: flex;
        justify-content: space-between;
        gap: 8rem;
        margin: 4rem 0 7rem;
    }
    #e-friendly-product .features-sec-box .img {
        flex: 0 1 460px;
        margin: 0;
        font-size: 0;
    }
    #e-friendly-product .features-sec-box .txt {
        text-align: left;
    }
}

.e-friendly-product__img01 {
    margin: 5rem auto 2rem;
    max-width: 1000px;
}
.e-friendly-product__leed {
    background: #F4F6F6;
    padding: 3rem 2rem;
}
.e-friendly-product__leed__row .img {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}
.e-friendly-product__leed .mark01,
.e-friendly-product__leed .mark02 {
    max-width: 100px;
}
.e-friendly-product__leed__projects {
    padding: 0 2rem;
}
.e-friendly-product__leed__projects__ttl {
    font-size: 1.8rem;
    margin: 3rem 0 2rem;
}

@media screen and (min-width : 768px) {
    .e-friendly-product__leed {
        padding: 3rem 7rem 4rem;
        margin: 5rem 0 0;
    }
    .e-friendly-product__leed * {
        text-align: left !important;
    }
    .e-friendly-product__leed__row {
        display: flex;
        justify-content: space-between;
        gap: 4rem;
    }
    .e-friendly-product__leed__row .img {
        margin: 8rem 0 0;
    }
    .e-friendly-product__leed__projects {
        padding: 0;
        display: flex;
        gap: 2rem;
    }
    .e-friendly-product__leed__projects__ttl {
        font-size: 2.4rem;
        margin: 0 0 1.5rem;
    }
    .e-friendly-product__leed__projects li {
        flex: 0 1 300px;
    }
}