@charset "utf-8";

/* ==================================================================

    productDetails.css

=================================================================== */

/* --------------------------------
■itemDetails
-------------------------------- */ 
.secondary .contents .visual {
    @media only screen and (max-width: 767px) {
        padding-top: 82px;
        margin-bottom: 0px;
    }
}

#itemDetails{
    @media only screen and (max-width: 767px) {
        padding-top: 0px;
    }
    .container{
        align-items: stretch;
        gap:6vw 8.713355048%;

        .images{
            width: 57.328990228%;
            flex-shrink: 0;

            img{
                width: 100%;
                height: auto;
            }

            .bx-wrapper {
                margin: 0 auto 20px;
            }

            ul.itemslider li a{
                position: relative;
                display: block;
            }
            
            ul.itemslider li img{
                width: 100%;
                height: 100%;
            }

            .custom-thumb {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }
            
            .custom-thumb a{
                margin-bottom: 26px;
                box-sizing: border-box;
                width: calc(100% / 7 - 6px);
                text-align: center;
            }
            
            .custom-thumb a{
                margin-bottom: 26px;
                box-sizing: border-box;
                width: calc(100% / 7);
                text-align: center;
            }
            
            .custom-thumb a img{
                opacity: 0.3;
                box-sizing: border-box;
                transition: opacity 0.3s ease;
            }
            .custom-thumb a.active img{
                opacity: 1;
            }

        }

        .explain{

            .icon{
                margin-bottom: 14px;
                @media only screen and (max-width: 767px) {
                    margin-bottom: 10px;
                }
                > span{
                    display: inline-block;
                    font-size: 1.5rem;
                    line-height: 1.1;
                    padding: 4px;
                    font-weight: 500;
                    color: #fff;
                    background-color: #C77171;
                }
            }

            .brand{
                margin-bottom: 24px;
                @media only screen and (max-width: 767px) {
                    margin-bottom: 16px;
                }
            }

            .name{
                margin-bottom: 14px;
                @media only screen and (max-width: 767px) {
                    margin-bottom: 10px;
                }
            }
            .price{
                margin-bottom: 35px;
                @media only screen and (max-width: 767px) {
                    margin-bottom: 24px;
                }
            }
            .buttonStyle{
                margin-bottom: 35px;
                @media only screen and (max-width: 767px) {
                    margin-bottom: 24px;
                }
                a{
                    width: 100%;
                }
            }
        }
    }
}

/*
■about
-------------------------------- */ 
#about{
    @media only screen and (max-width: 767px) {
        margin-top: 0px;
    }
}
/* --------------------------------
■maintenance
-------------------------------- */ 
#maintenance{
    .details{

        > section{
            padding-bottom: 28px;
            border-bottom: 1px solid #CACACA;
            
            & + section{
                margin-top: 28px;
            }
        }

    }
}

/* --------------------------------
■return
-------------------------------- */ 
.return{
    border-top: 1px solid #A8A8A8;
    margin-top: 120px;
    padding-top: 74px;
    margin-bottom: 120px;

    @media only screen and (max-width: 767px) {
        margin-top: 8vw;
        padding-top: 5vw;
        margin-bottom: 8vw;
    }
}

.contents .tableStyle{
    width: 100%;
}