@charset "utf-8";

#service {
    .wrap {
        .contents {
            max-width:640px;
            display:grid;
            p {
                padding:0 1em;
                &:not(:last-child) {
                    margin-bottom:1em;
                }
            }
        }
    }
}

#technology {
    .wrap {
        .contents {
            p {
                &.body {
                    text-align:center;
                    margin-bottom:3em;
                }
            }
            .contents_inner {
                &:not(:last-child) {
                    margin-bottom:90px;
                }
                &:nth-child(even) {
                    grid-template-columns:1fr 33%;
                    h3 {
                        order:1;
                    }
                }
                display:grid;
                grid-template-columns:33% 1fr;
                align-items:center;
                grid-column-gap:4%;
                h3 {
                    font-size:1.6rem;
                    line-height:1.5;
                    font-weight:500;
                    width:100%;
                    aspect-ratio:1;
                    border:1px solid #707070;
                    border-radius:50%;
                    display:grid;
                    align-items:center;
                    justify-content:center;
                    text-align:center;
                }
                .detail {
                    p {
                        &:not(:last-child) {
                            margin-bottom:1em;
                        }
                    }
                }
            }
        }
    }
}

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

}

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

@media screen and (max-width:768px){
    
    #service {
        .wrap {
            .contents {
                p {
                    padding:0;
                }
            }
        }
    }
    
    #technology {
        .wrap {
            .contents {
                p {
                    &.body {
                        text-align:left;
                    }
                }
                .contents_inner {
                    &:not(:last-child) {
                        margin-bottom:45px;
                    }
                    &:nth-child(even) {
                        grid-template-columns:1fr;
                        h3 {
                            order:unset;
                        }
                    }
                    grid-template-columns:1fr;
                    grid-row-gap:30px;
                    h3 {
                        font-size:1.4rem;
                        max-width:20em;
                        justify-self:center;
                    }
                }
            }
        }
    }
    
}