.page .coverPhotos { 
    background-image: url(/wp-content/themes/katsumata-denki/img/cover/about_us_header_sp.png);
}
#primary { padding: 0;}

/* Philosophy */
.sectionExplain {
    font-weight: bold; font-size: var(--font-size-xs);
    padding: 2em 1.8em;
    line-height: 1.8;
    border: 1px solid var(--color15);
    background: white;
    box-shadow: 10px 10px 0 var(--color14);
    position: relative;
}
.sectionExplain br { display: none;}

.sectionExplain::after { content: ""; width: 100px; height: 100px; 
    position: absolute; right: -1em; bottom: -1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84.552' height='80.712' viewBox='0 0 84.552 80.712'%3E%3Cg transform='matrix(0.809, -0.588, 0.588, 0.809, -12.343, 58.868)' opacity='0.405'%3E%3Crect width='100.152' height='6' transform='translate(100.152 27) rotate(180)' fill='%23799295'/%3E%3Cpath d='M0,0H69.012V6H0Z' transform='translate(100.152 16) rotate(180)' fill='%23ddb282'/%3E%3Cpath d='M0,0H22.652V6H0Z' transform='translate(100.152 6) rotate(180)' fill='%23c4d6d8'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center / 100%;}

/* services */
#services {  }
#services .sectionTitle {  }

#servicesWrap { margin-top: 50px;}
.serviceItem{ position: relative; width: 100%;
}
.serviceItem > div{ margin-bottom: 30px;}
.serviceItem figure.sImg{
    overflow: hidden; width: max-content;
    width: 100%;height: 191px;
    margin: 0;
}
.serviceItem figure.sImg img{}
.serviceItem .sInfo{ width: 100%; z-index: 3;}
.serviceItem h4{ margin:1.3em auto 0.5em 0; padding-left: 20px; position: relative; width: max-content; height: 2em;}
.serviceItem h4::before,.serviceItem h4::after {content: ""; width: 32px; height: 32px; position: absolute; z-index: -1;}
.serviceItem h4::before{background: var(--color23); left: 0em; top: -0.5em; opacity: 0.5;}
.serviceItem h4::after {background: var(--color12);  left: 0.4em; top: -0.1em;}
.serviceItem .sDesc{margin: 0; position: relative; z-index: 0;
    font-size: var(--font-size-xs);}
.serviceItem > div:after {
    content: "";
    width: 100px;
    height: 100px;
    position: absolute;
    right: -0.5em;
    bottom: -0.5em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='134.795' height='104.191' viewBox='0 0 134.795 104.191'%3E%3Cg transform='matrix(0.999, -0.035, 0.035, 0.999, -3.188, 4.285)' opacity='0.258'%3E%3Cpath d='M0,0,152.423,4.463l.173,5.7L.173,5.7Z' transform='translate(137.234 23.847) rotate(150)' fill='%23799295'/%3E%3Cpath d='M0,0,121.8,3.567l.173,5.7L.173,5.7Z' transform='translate(131.734 14.954) rotate(150)' fill='%23ddb282'/%3E%3Cpath d='M0,0,76.212,2.232l.173,5.7L.173,5.7Z' transform='translate(126.734 6.87) rotate(150)' fill='%23c4d6d8'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center / 100%;
}
.serviceItem:last-of-type > div:after { display: none; }
.worksBtn { margin: 30px auto 50px; }

/* outline */
.outline {
    margin: 20px auto 10px;
    font-size: var(--font-size-sm);
    border-radius: 0;
    padding: 0;
    border: none;
}
.outline ul {display: list-item; margin: 0; padding: 0; list-style: none; font-weight: bold;}
.outline ul li {padding: 10px; border-bottom: 1px solid var(--color12); background: #ffffffbd;}
.outline ul li:last-of-type {border-bottom:none;}
.outline ul li h5 { margin: 1em auto 0.3em 0; display: block; color:var(--color22); font-size: var(--font-size-xs);}
.outline ul li h5::after { content: ""; display: block; 
    height: 1px; width: 50px; margin: 5px 0 ;
    background-image: linear-gradient(90deg, var(--color23) 50%, var(--color12) 50%);}

/* map */
#access { padding: 0;}
#access .sectionTitle{ padding: 0 20px;}
#mapWrap {
    margin: 30px auto; padding: 0;
    width: 100%;
}
#mapWrap>div {
    aspect-ratio: 1 / 1; 
}
#mapWrap iframe{
    width: 100%;
    height: 100%;
    
}
.mapAddress { padding: 0 20px; margin: 0 auto; letter-spacing:-0.5px;}

@media screen and (min-width: 768px) {
    .line-deco01 {width:137px; height: 100px;}
    .page .coverPhotos { 
        background-image: url(/wp-content/themes/katsumata-denki/img/cover/about_us_header_pc.png);
    }

    /*  */
    .sectionExplain {
        padding: 4em 4.7em;
        line-height: 2.2;
        max-width: 95%;
        margin: 50px auto 70px;
    }
    .sectionExplain br {
        display: initial;
    }
    .sectionExplain:after { right: 3.5em; bottom: 1.7em; 
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='134.795' height='104.191' viewBox='0 0 134.795 104.191'%3E%3Cg transform='matrix(0.999, -0.035, 0.035, 0.999, -3.188, 4.285)' opacity='0.258'%3E%3Cpath d='M0,0,152.423,4.463l.173,5.7L.173,5.7Z' transform='translate(137.234 23.847) rotate(150)' fill='%23799295'/%3E%3Cpath d='M0,0,121.8,3.567l.173,5.7L.173,5.7Z' transform='translate(131.734 14.954) rotate(150)' fill='%23ddb282'/%3E%3Cpath d='M0,0,76.212,2.232l.173,5.7L.173,5.7Z' transform='translate(126.734 6.87) rotate(150)' fill='%23c4d6d8'/%3E%3C/g%3E%3C/svg%3E%0A");
    }
    
    /* services */
    #servicesWrap{ display: flex; justify-content: start; align-items: stretch; gap: 50px 10px;}
    .serviceItem { width: 32%;}
    .serviceItem > div{ margin-bottom: 0px;}
    .serviceItem figure.sImg { width: 100%; aspect-ratio: 1 / 0.6; height: auto; }
    .serviceItem figure.sImg img { width: 100% !important; object-position: center; height: 100% !important;}
    .serviceItem .sTitle{ margin-left: auto; }
    .serviceItem .sDesc{ font-size: 14px; padding: 0 0.5em; }

    .serviceItem > div:after {
        right: -0.5em;
        bottom: -2.5em;
    }
    #s5 { width: 100%; border-top:1px dashed #ccc;}
    .worksBtn { margin-bottom: 0px; margin-right: 10px; }

    /* outline */
    .outline ul li { 
        display: flex; justify-content: start; align-items: start;
        border: 1px solid var(--color12) !important;
        margin-bottom: 5px; padding: 0.9em 1em; gap: 100px;
        background: white;
    }
    .outline ul li h5 { margin: 0; width: 190px; display: inline-flex;justify-content: space-between;align-items: center;}
    .outline ul li h5>span { display: inline-block; width: 9em;}
    .outline ul li h5::after { display: inline-block; vertical-align: middle; margin-left: 1em;}
    /*  */
    #mapWrap { padding: 0 25px; }
    #mapWrap>div {
        aspect-ratio: 1 / 0.3; 
    }
}

@media screen and (min-width: 1024px) {
    
    
}
@media screen and (min-width: 1280px) {
    
}