@charset "UTF-8";
/* CSS Document */

/* ---------- COMMON ---------- */
/* content title */
.content_title {
    background: url("../img/renovation/renovo_shop_bg.jpg") no-repeat center top;
}

.content_title figure{
    text-align: center;
}

.title_body{
    background: rgba(0,0,0,0.30);
    color: #ffffff;
    margin-left: auto;
    margin-right: auto;
}

.content_title h1{
    font-weight: 500;
    line-height: 1.5em;
    text-align: center;
}

.content_title p{
    font-weight: 400;
    line-height: 1.7em;
}

/* content */
article section:not(.content_title){
    margin-left: auto;
    margin-right: auto;
}

section h2{
    color: #3e3a39;
    text-align: center;
}

/* feature */
.feature {
    margin-bottom: 40px;
}

.feature ol li{
    list-style: none;
    margin-bottom: 30px;
}

.feature ol li:first-of-type{
    background: url("../img/renovation/point_no1.svg") no-repeat left center;
}

.feature ol li:nth-of-type(2){
    background: url("../img/renovation/point_no2.svg") no-repeat left center;
}

.feature ol li:last-of-type{
    background: url("../img/renovation/point_no3.svg") no-repeat left center;
}

/* work-flow */
.work-flow{
    background: #f1f1f1;
}

.flow-items:not(:last-of-type){
    background-image: url("../img/renovation/chart_arrow_down.svg");
    background-repeat: no-repeat;
    background-size: 14px;
}

.item_headline{
    background: #ffffff;
}

.item_headline dt img{
    position: absolute;
}

.flow-items details{
    background: #ffffff;
    cursor: pointer;
}

ul.action{
    font-weight: 400;
    list-style: none;
}

.flow-items details{
    font-size: 85%;
    line-height: 1.5em;
}

.flow-items summary {
    list-style: none;
}

.flow-items details summary::-webkit-details-marker {
    display:none;
}

.flow-items details summary{
    border-top:dashed 1px #989898;
    text-align: right;
}

.flow-items details summary span{
    background: url("../img/common/icon_list.svg") no-repeat left center;
    display: inline-block;
}

/* to_consultation */
.to_consultation ul{
    margin-left: auto;
    margin-right: auto;
}

.to_consultation ul li{
    list-style: none;
}

.to_consultation ul li a{
    border: solid 1px #3e3a39;
    border-radius: 5px;
    color: #3e3a39;
    cursor: pointer;
    display: block;
    font-weight: 500;
    padding: 10px 10px 10px 0;
    text-align: center;
}

.to_consultation li a span{
    background: aqua;
    background: url("../img/common/arrow_right_bk.svg") no-repeat left center;
    background-size: 14px;
    padding-left: 18px;
}

.to_consultation li a:hover{
    background-color: #3e3a39;
    color:#ffffff;
}

.to_consultation li a:hover span{
    background: url("../img/common/arrow_right_wh.svg") no-repeat left center;
    background-size: 14px;
}

.to_consultation figure{
    margin-bottom: 40px;
    text-align: center;
}

/* ---------- Mobile ---------- */
@media(max-width:737px) {
/* content title */
    .content_title {
        height: 550px;
        margin-bottom: 40px;
        padding-top: 30px;
    }

    .content_title figure{
        margin-bottom: 15px;
    }

    .content_title figure img{
        width: 120px;
    }

    .title_body{
        margin-right: 1.5em;
        margin-left: 1.5em;
        padding: 25px 10px 20px 10px;
    }

    .content_title h1{
        font-size: 150%;
        margin-bottom: 10px;
    }

/* content */
    .feature,
    .to_consultation{
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    section h2{
        font-size: 130%;
        margin-bottom: 20px;
    }

/* feature */
    .feature ol li{
        padding-left: 70px;
    }

    .feature ol li:first-of-type,
    .feature ol li:nth-of-type(2),
    .feature ol li:last-of-type{
        background-size: 50px;
    }

/* work-flow */
    .work-flow{
        padding: 30px 1.5em;
    }

    .flow-items{
        margin-bottom: 15px;
        padding-bottom: 20px;
    }

    .flow-items:not(:last-of-type){
        background-position: left 15px bottom;
    }

    .item_headline dt{
        padding:10px;
    }

    .item_headline dt img{
        width: 30px;
    }

    .flow-items h3{
        font-size: 110%;
        padding: 6px 0 0 40px;
        height: 24px;
    }

    figure.action{
        display: none;
    }

    ul.action{
        padding-left: 50px;
        padding-bottom:10px;
    }

    .flow-items details{
        padding: 0 10px;
    }

    .flow-items details summary{
        padding:10px 0;
    }

    .flow-items details summary span{
        background-size: 12px;
        padding-left: 15px;
    }

    .notes{
        padding-bottom: 10px;
    }

    .notes p{
        margin-bottom: 10px;
    }

    .notes dl{
        margin-bottom: 10px;
    }

/* to_consultation */
    .to_consultation ul{
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .to_consultation figure img{
            max-width: 100%;
    }

}

/* ---------- Portlate ---------- */
@media(max-width:567px) {}

/* ---------- landscape ---------- */
@media(max-width:767px) and (min-width: 568px){}

/* ---------- Tablet / PC ---------- */
@media (min-width: 737px) {

/* content title */
    .content_title {
        height: 550px;
        margin-bottom: 60px;
        padding-top: 65px;
        width: 100%;
    }

    .content_title figure{
        margin-bottom: 25px;
    }

    .title_body{
        padding: 25px 10px 20px 10px;
        width: 667px;
    }

    .content_title h1{
        font-size: 225%;
        margin-bottom: 20px;
    }

/* content */
    .feature,
    .to_consultation{
        width: 720px;
    }

    section h2{
        font-size: 155%;
        margin-bottom: 30px;
    }

/* feature */
    .feature {
        margin-bottom: 40px;
    }

    .feature ol li{
        list-style: none;
        padding-left: 90px;
    }

/* work-flow */
    .work-flow{
        padding-bottom: 40px;
    }
    .work-flow h2{
        padding-top: 40px;
    }

    .flow-items{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        padding-bottom: 18px;
        width: 720px;
    }

    .flow-items:not(:last-of-type){
        background-position: left 42px bottom;
    }

    .item_headline{
        display: table;
        width: 100%;
    }

    .item_headline dt,
    .item_headline dd{
        display: table-cell;
        vertical-align: top;
    }

    .item_headline dt{
        padding-top: 20px;
        padding-left: 20px;
        width: 380px;
    }

    .flow-items dt img{
        width: 60px;
    }

    .flow-items h3{
        font-size: 120%;
        min-height: 60px;
        padding-top: 16px;
        padding-left: 80px;
    }

    .item_headline dd{
        padding: 20px 0;
    }

    .action{
        border-left: solid 1px #808080;
        min-height: 60px;
        padding-left: 35px;
        padding-right: 10px;
    }

    .flow-items details{
        padding: 0 15px 0 95px;
    }

    .flow-items details summary{
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .flow-items details summary span{
        padding-left: 20px;
    }

    .notes{
        padding-bottom: 18px;
    }

    .notes p{
        margin-bottom: 10px;
    }

    .notes dl{
        display: table;
        margin-bottom: 10px;
    }

    .notes dl dt,
    .notes dl dd{
        display: table-cell;
    }
    .notes dl dt{
        white-space: nowrap;
        padding-right: 0.5em;
    }

/* to_consultation */
    .to_consultation ul{
        margin-top: 55px;
        margin-bottom: 50px;
        width: 540px;
    }

}

/* ---------- Tablet ---------- */
@media(max-width:1023px) and (min-width: 737px){}

/* ---------- PC ---------- */
@media(min-width:1024px){}