@charset "utf-8";

#service {
    .wrap {
        .contents {
            p {
                &.body {
                    font-size:1.8rem;
                    margin-bottom:5em;
                }
            }
            .contents_inner {
                background-color:var(--color_bg);
                padding:90px 60px 90px 40px;
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-column-gap:2%;
                overflow:hidden;
                .img {
                    img {
                        display:block;
                    }
                }
                .detail {
                    height:100%;
                    position:relative;
                    h3 {
                        font-size:2.4rem;
                        line-height:1.5;
                        padding-top:.66em;
                        padding-bottom:.33em;
                        padding-left:20px;
                        padding-right:50px;
                        margin-bottom:1em;
                        position:relative;
                        border-bottom:2px solid #FFFFFF;
                    }
                    p {
                        line-height:1.6;
                        padding-right:50px;
                        padding-left:20px;
                    }
                    &::before {
                        content:'';
                        display:block;
                        height:calc(100% + 90px);
                        right:0;
                        top:10px;
                        border-right:2px solid #FFFFFF;
                        position:absolute;
                    }
                    &::after {
                        content:'';
                        display:block;
                        width:calc(200% + 20px);
                        left:0;
                        bottom:-15px;
                        border-bottom:2px solid #FFFFFF;
                        position:absolute;
                    }
                }
                &:not(:last-child) {
                    margin-bottom:60px;
                }
                &:nth-child(even) {
                    padding-left:60px;
                    padding-right:40px;
                    .detail {
                        order:1;
                        h3 {
                            padding-left:50px;
                            padding-right:20px;
                        }
                        p {
                            padding-right:20px;
                            padding-left:50px;
                        }
                        &::before {
                            right:auto;
                            left:0;
                        }
                        &::after {
                            left:auto;
                            right:0;
                        }
                    }
                }
            }
            .service {
                background-color:var(--color_bg);
                padding:50px;
                dl {
                    font-size:1.8rem;
                    display:grid;
                    grid-template-columns:14em 1fr;
                    grid-column-gap:1em;
                    padding:1em 0;
                    border-bottom:1px solid #e4e4e4;
                    &:first-child {
                        padding-top:0;
                    }
                    dt {
                        font-size:1.8rem;
                        line-height:1.5;
                        font-weight:600;
                    }
                    dd {
                        font-size:1.6rem;
                        line-height:1.5;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1200px){
}

@media screen and (max-width:1024px){

    #service {
        .wrap {
            .contents {
                p {
                    &.body {
                        font-size:1.6rem;
                        margin-bottom:4em;
                    }
                }
                .contents_inner {
                    padding:60px 40px 60px 30px;
                    .detail {
                        height:100%;
                        position:relative;
                        h3 {
                            font-size:2.0rem;
                            padding-left:10px;
                            padding-right:30px;
                        }
                        p {
                            padding-right:30px;
                            padding-left:10px;
                        }
                        &::before {
                            height:calc(100% + 60px);
                        }
                    }
                    &:nth-child(even) {
                        padding-left:40px;
                        padding-right:30px;
                        .detail {
                            order:1;
                            h3 {
                                padding-left:30px;
                                padding-right:10px;
                            }
                            p {
                                padding-right:10px;
                                padding-left:30px;
                            }
                        }
                    }
                }
            }
        }
    }
        
}

@media screen and (max-width:768px){

    #service {
        .wrap {
            .contents {
                p {
                    &.body {
                        font-size:1.5rem;
                        margin-bottom:3em;
                    }
                }
                .contents_inner {
                    padding:30px;
                    grid-template-columns:1fr;
                    grid-row-gap:20px;
                    max-width:500px;
                    margin:0 auto;
                    .detail {
                        h3 {
                            font-size:1.8rem;
                            padding-top:.0;
                            padding-bottom:.33em;
                            padding-left:0;
                            border-bottom:2px solid #FFFFFF;
                            margin-bottom:.5em;
                            margin-right:-30px;
                            padding-right:30px;
                        }
                        p {
                            padding-right:0;
                            padding-left:0;
                        }
                        &::before {
                            content:none;
                        }
                        &::after {
                            content:none;
                        }
                    }
                    &:not(:last-child) {
                        margin-bottom:30px;
                    }
                    &:nth-child(even) {
                        padding-left:30px;
                        padding-right:30px;
                        .detail {
                            order:unset;
                            h3 {
                                padding-left:0;
                                padding-right:0;
                            }
                            p {
                                padding-right:0;
                                padding-left:0;
                            }
                        }
                    }
                }
                .service {
                    padding:30px;
                    dl {
                        font-size:1.6rem;
                        grid-template-columns: 1fr;
                        grid-row-gap:.66em;
                        dt {
                            font-size:1.6rem;
                        }
                        dd {
                            font-size:1.4rem;
                        }
                    }
                }
            }
        }
    }
    
}