@charset "utf-8";

#product {
    .wrap {
        .contents {
            p {
                &.body {
                    text-align:center;
                    margin-bottom:3em;
                }
            }
            .lists {
                display:grid;
                grid-template-columns:repeat(4,1fr);
                grid-gap:50px 30px;
                li {
                    text-align:center;
                    .link {
                        display:flex;
                        justify-content:flex-end;
                        gap:5px;
                        margin-bottom:10px;
                        min-height:24px;
                        a {
                            img {
                                width:24px;
                            }
                        }
                    }
                    h2 {
                        font-size:1.8rem;
                        line-height:1.3;
                        margin:.66em 0 .33em;
                    }
                    p {
                        line-height:1;
                        font-weight:500;
                        margin-bottom:.66em;
                    }
                    .btn {
                        display:grid;
                        border:1px solid var(--color_sub2);
                        font-size:1.5rem;
                        height:2.6em;
                        border-radius:.66em;
                        grid-template-columns:1fr auto;
                        align-items:center;
                        padding:0 1em;
                        background-color:#FFFFFF;
                        &::after {
                            content:'';
                            width:.33em;
                            height:.33em;
                            border-top:2px solid var(--color_sub2);
                            border-right:2px solid var(--color_sub2);
                            transform:rotate(45deg);
                        }
                    }
                }
            }
        }
    }
}

div[id^="pdf-modal"] {
    width:90vw;
    height:90vh;
    padding:0;
}

.fixbtn {
    position:fixed;
    top:55%;
    right:0;
    z-index:10;
    background: linear-gradient(90deg, #f99c00 0%, #ff6600 100%);
    text-shadow:1px 1px 2px #ff6600;
    box-shadow:0 3px 3px rgba(0,0,0,.15);
    display:grid;
    grid-row-gap:.33em;
    padding:.66em;
    border-radius:.5em 0 0 .5em;
    color:#FFFFFF;
    font-size:2.4rem;
    font-weight:500;
    span {
        font-size:.66em;
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        grid-column-gap:.33em;
        &::after {
            content:'';
            width:.4em;
            height:.4em;
            border-top:2px solid #FFFFFF;
            border-right:2px solid #FFFFFF;
            transform:rotate(45deg);
        }
    }
}

@media (hover:hover) {
    
    #product {
        .wrap {
            .contents {
                .lists {
                    li {
                        .btn {
                            transition:.3s;
                            &::after {
                                transition:.3s;
                            }
                            &:hover {
                                background-color:var(--color_sub2);
                                color:#FFFFFF;
                                opacity:1;
                                &::after {
                                    border-color:#FFFFFF;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .fixbtn {
        transition:.3s;
        &:hover {
            right:-10px;
            opacity:1;
        }
    }
    
}


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

}

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

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

@media screen and (max-width:768px){
  
    #product {
        .wrap {
            .contents {
                .lists {
                    grid-template-columns:repeat(2,1fr);
                    grid-gap:30px 10px;
                    max-width:600px;
                    margin:0 auto;
                    li {
                        .link {
                                margin-bottom:6px;
                                min-height:22px;
                            a {
                                img {
                                    width:22px;
                                }
                            }
                        }
                        h2 {
                            font-size:1.6rem;
                        }
                        .btn {
                            font-size:min(3.5vw,1.3rem);
                            padding:0 .5em 0 0;
                        }
                    }
                }
            }
        }
    }

    .fixbtn {
        position:sticky;
        top:auto;
        bottom:0;
        right:0!important;
        box-shadow:none;
        grid-template-columns:repeat(2,auto);
        align-items:center;
        justify-content:center;
        grid-column-gap:.5em;
        padding:.6em .5em .5em;
        border-radius:0;
        font-size:min(8vw,2.4rem);
    }
    
}