@charset "utf-8";

#download {
    .wrap {
        .contents {
            ul {
                display:grid;
                grid-template-columns:repeat(4,1fr);
                grid-column-gap:2%;
                grid-row-gap:50px;
                li {
                    display:grid;
                    grid-template-rows:auto 1fr auto;
                    .img {
                        border:1px solid #cccccc;
                        padding:20px;
                        img {
                            display:block;
                            width:100%;
                            aspect-ratio:1;
                            object-fit:contain;
                        }
                    }
                    p {
                        line-height:1.33;
                        text-align:center;
                        padding:1em 0;
                    }
                    .btn {
                        width:90%;
                        margin:0 auto;
                        height:3em;
                        border-radius:1.5em;
                        border:2px solid var(--color_main);
                    }
                }
            }
        }
    }
}

@media (hover:hover) {
    
    #download {
        .wrap {
            .contents {
                ul {
                    li {
                        .btn {
                            &:hover {
                                opacity:1;
                                background-color:#FFFFFF;
                                color:var(--color_main);
                            }
                        }
                    }
                }
            }
        }
    }

}

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

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

    #download {
        .wrap {
            .contents {
                ul {
                    grid-template-columns:repeat(3,1fr);
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    #download {
        .wrap {
            .contents {
                ul {
                    grid-template-columns:repeat(2,1fr);
                    grid-column-gap:5%;
                    grid-row-gap:30px;
                    li {
                        .img {
                            padding:10px;
                        }
                        p {
                            font-size:1.2rem;
                        }
                        .btn {
                            width:100%;
                            font-size:1.4rem;
                        }
                    }
                }
            }
        }
    }
    
}