@charset "utf-8";

#installation {
    .wrap {
        .contents {
            p {
                &.body {
                    margin-bottom:2em;
                }
            }
            .imgwrap {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-column-gap:3%;
                margin-bottom:90px;
            }
            .contents_inner {
                &:not(:last-child) {
                    margin-bottom:90px;
                }
                &.column {
                    display:grid;
                    grid-template-columns:1fr 30%;
                    grid-column-gap:5%;
                }
            }
            .btnwrap {
                max-width:700px;
                margin:0 auto;
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-column-gap:4%;
                margin-top:30px;
                &.btn-1 {
                    grid-template-columns:1fr;
                    max-width:340px;
                }
                li {
                    a {
                        display:grid;
                        grid-template-columns:1fr auto;
                        align-items:center;
                        justify-content:center;
                        height:3em;
                        border:1px solid #707070;
                        font-size:1.8rem;
                        padding:0 1em;
                        text-align:center;
                        &::after {
                            content:'';
                            width:.4em;
                            height:.4em;
                            border-top:2px solid #333333;
                            border-right:2px solid #333333;
                            transform:rotate(45deg);
                        }
                    }
                }
            }
            ol {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-gap:20px;
                li {
                    border:1px solid #707070;
                    font-size:1.6rem;
                    line-height:1.66;
                    display:grid;
                    min-height:6em;
                    align-items:center;
                    text-align:center;
                    padding:1em 1.5em;
                }
            }
        }
    }
}

@media (hover:hover) {
    
    #installation {
        .wrap {
            .contents {
                .btnwrap {
                    li {
                        a {
                            transition:.3s;
                            &::after {
                                transition:.3s;
                            }
                            &:hover {
                                background-color:#000000;
                                color:#FFFFFF;
                                &::after {
                                    border-color:#FFFFFF;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

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

}

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

@media screen and (max-width:768px){
    
    #installation {
        .wrap {
            .contents {
                .imgwrap {
                    grid-template-columns:1fr;
                    grid-row-gap:20px;
                    margin-bottom:60px;
                }
                .contents_inner {
                    &:not(:last-child) {
                        margin-bottom:45px;
                    }
                    &.column {
                        grid-template-columns:1fr;
                        p {
                            order:1;
                            margin-top:1em;
                        }
                    }
                }
                .btnwrap {
                    max-width:400px;
                    grid-template-columns:1fr;
                    grid-row-gap:10px;
                    &.btn-1 {
                        max-width:400px;
                    }
                    li {
                        a {
                            font-size:1.6rem;
                        }
                    }
                }
                ol {
                    grid-template-columns:1fr;
                    grid-row-gap:10px;
                    li {
                        font-size:1.5rem;
                    }
                }
            }
        }
    }
    
}