@charset "utf-8";
#Service .Contents_Box {
    width: 100%;
    padding-top: 0;
}
#Service .Contents_Box header {
    width: 100%;
    border-left: solid 1px #004a7a;
    margin: 0;
}
/*Service-FirstView*/
.Service-FirstView {
    border-left: solid 1px #004a7a;
    display: flex;
    flex-wrap: wrap;
}
.Service-FirstView h2 {
    font-weight: 600;
}
.Service-FirstView img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

/*Service-Menu*/
.Service-Menu {
    box-sizing: border-box;
}
.Service-Menu ul {
    display: flex;
    flex-wrap: wrap;
}
.Service-Menu ul li {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
.Service-Menu ul li h3 {
    text-align: center;
    font-weight: 500;
    margin: 1.5em 0 1em
}
.Service-Menu ul li img {
    border-radius: 12px;
}

/*Service-Works*/
.Service-Works {
    box-sizing: border-box;
}
.Service-Works h3 {
    font-weight: 600;
    color: #004a7a;
}
.Service-Works ul {
    display: flex;
    flex-wrap: wrap;
}
.Service-Works ul li {

}
.Service-Works ul li a {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    color: #222222;
}
.Service-Works ul li .Service-Works-info {
    margin: 1em;
}
.Service-Works ul li .Service-Works-info h4 {
    font-weight: 500;
}
.Service-Works ul li .Service-Works-info .metainfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.85em;
}
.Service-Works ul li .Service-Works-info .metainfo time {
    padding: 0.5em 0;
}
.Service-Works ul li .Service-Works-info .metainfo time:after {
    content: '｜';
}
.Service-Works ul li .Service-Works-info .metainfo .cat {
    line-height: 1;
    padding: 0.5em;
    border-radius: 3px;
    color: #FFFFFF;
}
.Service-Works ul li .Service-Works-info .metainfo .cat.private { background: #36bcee; }
.Service-Works ul li .Service-Works-info .metainfo .cat.public { background: #acacb9; }
.Service-Works ul li .Service-Works-info .metainfo .cat.commercial { background: #0090d9; }
.Service-Works ul li a img {
    border-radius: 12px;
}
body.WorksDetail {
    background: #FFFFFF;
}
#WorksDetail {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
}
#WorksDetail h1 {
    margin: 0;
    font-size: 1.5rem;
}
#WorksDetail figure {
    width: 100%;
}
#WorksDetail figure img {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
}

/* -------------------------------------------
MediaQuery
------------------------------------------- */
/*SmartPhone*/
@media screen and (max-width:767px) {    
    #Service .Contents_Box {
    }
    #Service .Contents_Box header {
        padding: 64px 0 32px 7.5%;

    }
    /*Service-FirstView*/
    .Service-FirstView {
        width: 100%;
        padding-left: 7.5%;
        flex-direction: column-reverse;
    }
    .Service-FirstView h2 {
        margin: 3rem 0 2rem;
    }
    /*Service-Menu*/
    .Service-Menu  {
        width: 100%;
        padding-top: 2rem;
        padding-right: 7.5%;
    }
    .Service-Menu ul {
        margin: 4rem 2rem;
    }
    .Service-Menu ul li {
        margin-bottom: 3rem;
    }
    .Service-Menu ul li:nth-last-of-type(1){
        margin-bottom: 0;
    }
    /*Service-Works*/
    .Service-Works  {
        width: 100%;
        padding-top: 2rem;
        padding-right: 0;
    }
    .Service-Works ul {
        margin: 2rem 0 0;
    }
    .Service-Works ul li a figure {
        width: 100%;
        height: 150px;
        overflow: hidden;
    }
    .Service-Works ul li a img {
        width: 1020px;
        height: 150px;
        object-fit: cover;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .Service-Works ul li {
        margin-bottom: 2rem;
    }
    .Service-Works ul li:nth-last-of-type(1){
        margin-bottom: 0;
    }
    #WorksDetail figure img {
        aspect-ratio: 1 / 1;
    }

}

@media screen and (min-width:768px) and (max-width:1024px) {
    #Service .Contents_Box {
    }
    #Service .Contents_Box header {
        padding: 64px 0 64px 7.5%;

    }
    /*Service-FirstView*/
    .Service-FirstView {
        width: 100%;
        padding-left: 0%;
        flex-direction: row;
        padding-bottom: 4rem;
    }
    .Service-FirstView h2 {
        writing-mode: vertical-rl;
        width: 42%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
    }
    .Service-FirstView figure {
        width: 58%;
    }
    /*Service-Menu*/
    .Service-Menu  {
        box-sizing: border-box;
        width: 92.5%;
        padding-right: 7.5%;
        margin-top: 4rem;
    }
    .Service-Menu ul {
        margin: 4rem 2rem;
    }
    .Service-Menu ul li {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 3rem;
    }
    .Service-Menu ul li .List-contents {
        width: 65%;
    }
    .Service-Menu ul li .List-picuture {
        width: 28%;
    }
    .Service-Menu ul li .List-contents h3 {
        margin: 0;
        text-align: left;
        margin-bottom: 0.5em;
    }
    .Service-Menu ul li:nth-last-of-type(1){
        margin-bottom: 0;
    }
    /*Service-Works*/
    .Service-Works {
        width: 92.5%;
        padding-right: 7.5%;
        padding-bottom: 8rem;
    }
    .Service-Works ul {
        margin: 3rem 0 0 2rem;
        flex-direction: row;
        justify-content: space-between;
    }
    .Service-Works ul li {
        width: 46%;
        margin-bottom: 5%;
    }
    .Service-Works ul li:nth-last-of-type(1){
    }

}
/*Tablet*/
@media screen and (max-width:1024px) {

}

/*Desktop*/
@media screen and (min-width:768px) {
    
}

@media screen and (min-width:1025px) {
    #Service .Contents_Box {
        margin-left: 0;
    }
    #Service .Contents_Box header {
        padding: 96px 0 96px 5%;

    }
    /*Service-FirstView*/
    .Service-FirstView {
        width: 100%;
        padding-left: 0%;
        flex-direction: row;
        padding-bottom: 4rem;
    }
    .Service-FirstView h2 {
        writing-mode: vertical-rl;
        width: 42%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
    }
    .Service-FirstView figure {
        width: 58%;
    }
    /*Service-Menu*/
    .Service-Menu  {
        box-sizing: border-box;
        width: 85%;
        padding-right: 7.5%;
        margin-top: 4rem;
        margin-left: 5%;
    }
    .Service-Menu ul {
        margin: 4rem 0 0;
        justify-content: space-between;
    }
    .Service-Menu ul li {
        margin-bottom: 0;
        width: 28%;
    }
    /*Service-Works*/
    .Service-Works {
        box-sizing: border-box;
        width: 85%;
        padding-right: 7.5%;
        margin-top: 8rem;
        margin-left: 5%;
    }
    .Service-Works h3 {
        font-size: 1.5rem;
    }
    .Service-Works ul {
        margin: 4rem 2% 0 2%;
        flex-direction: row;
    }
    .Service-Works ul li {
        width: 22%;
        margin-right: 4%;
        margin-bottom: 4%;
    }
    .Service-Works ul li:nth-of-type(4n){
        margin-right: 0%;
    }
}

@media screen and (min-width:1368px) {

}