@charset "utf-8";


.sub_sec-{}


/*---------------------------------
    sub_sec-
----------------------------------*/
.service_intro{
    margin: 0 6rem 8rem 6rem;
    padding: 3rem;
    display: block;
    position: relative;
    z-index: 0;
}
.service_intro::before{
    width: 100%;
    height: 100%;
    position: absolute;
        left: 0;
        top: 0;
    display: block;
    content: "";
    opacity: 0.5;
    z-index: -1;
}
    .page_s-roof .service_intro::before{    background: url(../images/parts/bg_kabe-orange.jpg) repeat; }
    .page_s-wall .service_intro::before{    background: url(../images/parts/bg_kabe-green.jpg) repeat; }
    .page_s-wood .service_intro::before{    background: url(../images/parts/bg_kabe-yellow.jpg) repeat; }
    .page_s-iron .service_intro::before{    background: url(../images/parts/bg_kabe-blue.jpg) repeat; }
    .page_s-other .service_intro::before{    background: url(../images/parts/bg_kabe-red.jpg) repeat; }
/*---------------------------------
    sub_sec-reason
----------------------------------*/
.sub_sec-service{
    overflow: hidden;
}
.sub_sec-service .sub_service_inner{
    position: relative;
    z-index: 1;
}
.service_container{
    margin-bottom: 6rem;
}

.sub_service_block {
    position: relative;
    align-items: stretch;
    z-index: 200;
}
    .sub_service_block:not(:last-of-type){
        margin-bottom: 7rem;
    }
.sub_service_block .sub_service_txt {
    width: 50%;
        padding: 0 6rem 0 6rem;
        flex: 0 0 50rem;
        margin-right: 3rem;
    position: relative;
}
.sub_service_block .sub-sec_ttl {
    padding-block: 4.5rem 0.6em;
    margin-bottom: 0.7em;
    display: inline-block;
    position: relative;
}
    .sub-sec_ttl::after {
        width: 5.6rem;
        height: 1.8rem;
        background-position: 0 0;
        background-size: 1.1rem 1.7rem;
        position: absolute;
            left: 0;
            bottom: 0;
        display: block;
        content: "";
    }
    .page_s-roof .sub-sec_ttl{ color: var(--color_orange) ;}
    .page_s-wall .sub-sec_ttl{ color: var(--color_green) ;}
    .page_s-wood .sub-sec_ttl{ color: var(--color_yellow) ;}
    .page_s-iron .sub-sec_ttl{ color: var(--color_blue) ;}
    .page_s-other .sub-sec_ttl{ color: var(--color_red) ;}

    .page_s-roof .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_orange) 0.35rem, transparent 0.35rem);}
    .page_s-wall .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_green) 0.35rem, transparent 0.35rem);}
    .page_s-wood .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_yellow) 0.35rem, transparent 0.35rem);}
    .page_s-iron .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_blue) 0.35rem, transparent 0.35rem);}
    .page_s-other .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_red) 0.35rem, transparent 0.35rem);}


    .sub_service_block .sub_service_txt p{
        margin-bottom: 5rem;
    }
.sub_service_block .sub_service_img {
    width: calc(100vw / 2);
    height: 40rem;
        flex: 1;
        margin-right: calc(50% - 50vw);
    display: block;
    position: relative;
}
.sub_service_block .sub_service_img::after {
    width: 100%;
    height: 100%;
        border: 1px solid var(--color_brown);
    position: absolute;
        right: -1rem;
        top: 1rem;
    z-index: 1;
    display: block;
    content: "";
}
/*反転*/
.sub_service_block.-reverse{
    flex-direction: row-reverse;
}
.sub_service_block.-reverse .sub_service_txt {
        margin-right: unset;
        margin-left: 3rem;
}
.sub_service_block.-reverse  .sub_service_img {
    margin-right: unset;
        margin-left: calc(50% - 50vw);
}

/*疑似要素壱*/
.page_s-roof .-af_p-h::after{
    width: 22rem;
    height: 19rem;
    bottom: -5rem;
    left: -3rem;
}
/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width:960px) and (min-width:600px){
    .service_intro{        
        margin: 0 0 8rem 0;
    }
    .sub_service_block .sub_service_txt {
        padding: 0 3rem 0 0;
        flex: 0 0 32rem;
        margin-right: 0;
        position: relative;
    }
    .sub_service_block.-reverse .sub_service_txt {
        padding: 0 0 0 3rem;
        margin-right: unset;
        margin-left: 0;
    }

}
/*-------------SP-----------------------*/
@media screen and (max-width:599px){
    
    .service_intro{        
        margin: 0 0 8rem 0;
    }
    .sub_sec-reason{        
        padding-block: 8rem 10rem;
    }
    .sub_service_block{
        flex-direction: column;
    }
        .sub_service_block:not(:last-of-type){
            margin-bottom: 5rem;
        }
    .sub_service_block .sub_service_txt {
        width: 100%;
            padding: 0 ;
            flex: unset;
            margin-right: 0;
    } 
    
.sub_service_block .sub-sec_ttl {
    padding-block: 0.5em 0.6em;
    margin-bottom: 0.2em;
}
    .sub-sec_ttl::after {
        width: 8.6rem;
        height: 1.8rem;
        background-size: 1.7rem 1.7rem;
    }

    .page_s-roof .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_orange) 0.5rem, transparent 0.35rem);}
    .page_s-wall .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_green) 0.5rem, transparent 0.35rem);}
    .page_s-wood .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_yellow) 0.5rem, transparent 0.35rem);}
    .page_s-iron .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_blue) 0.5rem, transparent 0.35rem);}
    .page_s-other .sub-sec_ttl::after{ background-image: radial-gradient(circle, var(--color_red) 0.5rem, transparent 0.35rem);}

    
        .sub_service_block .sub_service_txt p{
            margin-bottom: 5rem;
        }
    .sub_service_block .sub_service_img {
        width: 100vw;
        height: 70rem;
            flex: 1;
        display: block;
        position: relative;
    }
    .sub_service_block .sub_service_img::after {
            right: -2rem;
            top: 2rem;
    }
    /*反転*/
    .sub_service_block.-reverse{
        flex-direction: column;
    }
    .sub_service_block.-reverse .sub_service_txt {
            margin-left: 0;
    }
    .sub_service_block.-reverse  .sub_service_img {
    }

    .page_s-roof .-af_p-h::after {
        display: none;
    }
}