@charset "utf-8";

#page_link {
    .wrap {
        padding-bottom:60px;
        .contents {
            ul {
                display:flex;
                flex-wrap:wrap;
                column-gap:2%;
                row-gap:.5em;
                li {
                    flex-grow:1;
                    a {
                        border:1px solid #707070;
                        display:grid;
                        grid-template-columns:1fr 1em;
                        align-items:center;
                        height:3em;
                        grid-column-gap:.5em;
                        text-align:center;
                        padding:.5em 1em;
                        font-size:min(1.6vw,1.6rem);
                    }
                }
            }
        }
    }
}

#products {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:1fr 42%;
                align-items:center;
                grid-column-gap:5%;
                &:not(:last-child) {
                    margin-bottom:90px;
                }
                .img {
                    display:grid;
                    grid-template-columns:repeat(2,1fr);
                    grid-column-gap:10px;
                }
                .detail {
                    .btn {
                        grid-template-columns:1fr 1em;
                        grid-column-gap:1em;
                        font-size:1.4rem;
                        height:3.6em;
                        width:200px;
                        margin-top:1.5em;
                    }
                }
            }
        }
    }
}

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

}

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

}

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

    #page_link {
        .wrap {
            padding-bottom:45px;
            .contents {
                ul {
                    li {
                        a {
                            font-size:min(3.4vw,1.6rem);
                        }
                    }
                }
            }
        }
    }
    
    #products {
        .wrap {
            .contents {
                h2 {
                    font-size:2.0rem;
                }
                .contents_inner {
                    grid-template-columns:1fr;
                    &:not(:last-child) {
                        margin-bottom:60px;
                    }
                    .img {
                        margin-top:20px;
                    }
                    .detail {
                        display:contents;
                        .btn {
                            order:2;
                            margin:1.5em auto 0;
                        }
                    }
                }
            }
        }
    }

}