@charset "UTF-8";


/*============================
	e-content
============================*/
.e-content {
    padding: 100px 0 0;
}

.ec__txtwrap {
    width: 50%;
}

.ec__imgwrap {
    width: 45%;
}

.ec__box {
    background: #F5F4F0;
    height: 220px;
    margin-bottom: 30px;

}

.ec__box:last-child {
    margin-bottom: 0;
}

.ec__box--img {
    width: 30%;
}

.ec__box--img img {
    object-fit: cover;
    height: 220px;
}

.ec__box--txtwrap {
    width: 100%;
    padding: 40px 3% 0;
}

.ec__box--h4 {
    line-height: 1;
    margin-bottom: 10px;
}

.ec__box--h4 .color-ma {
    margin-right: 1em;
    position: relative;

}

.ec__box--h4.dot .color-ma::before {
    content: "";
    position: absolute;
    width: 1.5px;
    height: 750px;
    border-left: dashed 1.5px #B3A86F;
    left: 50%;
    top: .5em;
    transform: translate(-50%);
}

.ec__box--h4.nondot .color-ma::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 220px;
    background: #F5F4F0;
    left: 50%;
    top: 1.2em;
    transform: translate(-50%);
}
.ec__box.last{
    overflow: hidden;
}
.ec__box--ul {
    padding-left: 2em;
}

.ec__box--ul li .dot {
    margin-right: .5em;
    font-size: 1rem;
    vertical-align: text-bottom;
}

.ec__mvp {
    max-width: 916px;
    margin: 0 auto;
    height: 394px;
    background: #F5F4F0;

}

.ecm__img {
    width: 36%;
}

.ecm__img img {
    object-fit: cover;
    width: 100%;
    height: 394px;
}

.ecm__txtwrap {
    width: 55%;
    padding: 60px 5% 0 0;
}

.edm__h3 {
    position: relative;
    margin-bottom: 30px;

}

.edm__h3 .bgtxt {
    font-size: 10rem;
    line-height: 1;
    color: #BFB586;
    top: 30%;
    left: -.3em;
    position: absolute;
    transform: translate(0, -50%);
    opacity: .2;
}

.edm__h3 .fs-22 {
    position: relative;
    line-height: 1;
}

.edm__name {
    font-size: 3.6rem;
    color: #BFB586;
    font-weight: 500;
    line-height: 1;
    margin-bottom: .5em;
}

.edm__txt {
    font-size: 1.4rem;
}

.ec__bgimg img {
    object-fit: cover;
    height: 285px;
}

.ec__bg {
    padding: 100px 0 150px;
    background: url(./img/ec_bg_br.jpg) no-repeat center center/cover;
}

.ec__stylist {
    width: 102%;
    margin-left: -1%;
}

.ec__stylist li {
    width: 18%;
    margin: 0 1% 20px;
}

.ec__item {
    padding-top: 100px;
    margin-top: -100px;
}

@media screen and (max-width:1024px) {
    .e-content {
        padding: 80px 0 0;
    }

    .ec__txtwrap {
        width: 50%;
    }

    .ec__imgwrap {
        width: 45%;
    }

    .ec__box {
        height: 200px;
        margin-bottom: 30px;

    }


    .ec__box--img {
        width: 30%;
    }

    .ec__box--img img {
        height: 200px;
    }

    .ec__box--txtwrap {
        width: 70%;
        padding: 20px 3% 0 3%;
    }

    .ec__box--h4 {
        margin-bottom: 10px;
    }

    .ec__box--h4 .color-ma {
        margin-right: .5em;

    }

    .ec__box--ul {
        padding-left: 2em;
    }

    .ec__box--ul li {
        line-height: 1.5;
    }

    .ec__box--ul li .dot {
        margin-right: .5em;
        font-size: 1rem;
    }

    .ec__mvp {
        margin: 0 auto;
        height: 340px;
    }

    .ecm__img {
        width: 36%;
    }

    .ecm__img img {
        height: 340px;
    }

    .ecm__txtwrap {
        width: 60%;
        padding: 30px 3% 0 0;
    }

    .edm__h3 {
        margin-bottom: 20px;

    }

    .edm__h3 .bgtxt {
        font-size: 6rem;
        left: -.3em;
    }


    .edm__name {
        font-size: 2.6rem;
        margin-bottom: .5em;
    }

    .edm__txt {
        font-size: 1.4rem;
    }

    .ec__bgimg img {
        height: auto;
    }

    .ec__bg {
        padding: 80px 0 100px;
    }

    .ec__stylist {
        width: 102%;
        margin-left: -1%;
    }

    .ec__stylist li {
        width: 18%;
        margin: 0 1% 15px;
    }

}

@media screen and (max-width:767px) {
    .e-content {
        padding: 60px 0 0;
    }

    .ec__txtwrap {
        width: 100%;
        margin-bottom: 30px;
    }

    .e-content .fs-22 {
        font-size: 1.6rem;
    }

    .ec__imgwrap {
        width: 100%;
    }

    .ec__box {
        height: auto;
        margin-bottom: 30px;
        padding-bottom: 15px;
    }


    .ec__box--img {
        width: 90%;
        margin: 0 auto;
    }

    .ec__box--img img {
        height: auto;
    }

    .ec__box--txtwrap {
        width: 100%;
        padding: 20px 5%;
    }

    .ec__box--h4 {
        margin-bottom: 10px;
    }

    .ec__box--h4 .color-ma {
        margin-right: .5em;

    }

    .ec__box--ul {
        padding-left: 0;
    }

    .ec__box--ul li {
        line-height: 1.5;
        margin-bottom: .5em;
    }

    .ec__box--ul li:last-child {
        margin-bottom: 0;
    }

    .ec__box--ul li .dot {
        margin-right: .5em;
        font-size: 1rem;
    }

    .ec__mvp {
        margin: 0 auto;
        height: auto;
        padding: 20px 5%;
    }

    .ecm__img {
        width: 100%;
    }

    .ecm__img img {
        height: auto;
    }

    .ecm__txtwrap {
        width: 100%;
        padding: 20px 0 0;
    }

    .edm__h3 {
        margin-bottom: 20px;

    }

    .edm__h3 .bgtxt {
        font-size: 6rem;
        left: 0;
    }


    .edm__name {
        font-size: 2.6rem;
        margin-bottom: .5em;
    }

    .edm__txt {
        font-size: 1.4rem;
    }

    .ec__bgimg img {
        height: 120px;
    }

    .ec__bg {
        padding: 60px 0 80px;
    }

    .ec__stylist {
        display: flex;
        width: 102%;
        margin-left: -1%;
    }

    .ec__stylist li {
        width: 48%;
        margin: 0 1% 10px;
    }

    .ec__item {
        padding-top: 80px;
        margin-top: -80px;
    }
    .ec__box--h4.dot .color-ma::before {
      display: none;
    }
    
    .ec__box--h4.nondot .color-ma::before {
        display: none;
    }
}