/** -------------------------------
 * bodyColor
 */
#bodyColor {
    clear: both;
    margin-top: 12vw;
    background-color:  #fff;
}
    #bodyColor > .wrap {
        display: block;
    }

/* header */
#bodyColor .header {
    position: relative;
    z-index: 1;
    padding: 0 4%;
}
#bodyColor .header:before {
    content: '';
    position: absolute;
    left: 4%;
    top: 0;
    display: block;
    width: 13.33%;
    height: 4px;
    border-top: 3.99px solid #c3002c;
}
    #bodyColor .header h1 {
        display: table;
        width: 100%;
    }
        #bodyColor .header span {
            display: table-cell;
            padding: 3.0% 0 0.6%;
            font-size: 7.46vw;
            font-weight: normal;
            vertical-align: middle;
        }
    #bodyColor .header p {
        font-size: 3.2vw;
    }

/* content */
#bodyColor .content {
    /*margin-top: 2.4%;*/
    margin-top:  -12%;
}

/* main */
#bodyColor .main {
    position: relative;
    margin-top: 2vw;
}
    #bodyColor .main > .wrap {
        position: relative;
        padding-top: 56.25%;
        overflow: hidden;
    }
        #bodyColor .main .item {
        position: absolute;
        left: 0;
        top: 60px;
        right: 0;
        bottom: 0;
        display: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transform: scale(1.2) translateX(2%);
        }
        /* visible */
        #bodyColor .main.image001 .item01 { display: block; }
        #bodyColor .main.image002 .item02 { display: block; }
        #bodyColor .main.image003 .item03 { display: block; }
        #bodyColor .main.image004 .item04 { display: block; }
        #bodyColor .main.image005 .item05 { display: block; }
        #bodyColor .main.image006 .item06 { display: block; }
        #bodyColor .main.image007 .item07 { display: block; }
        #bodyColor .main.image008 .item08 { display: block; }
        #bodyColor .main.image009 .item09 { display: block; }
        #bodyColor .main.image010 .item10 { display: block; }
        #bodyColor .main.image011 .item11 { display: block; }
        #bodyColor .main.image012 .item12 { display: block; }
        #bodyColor .main.image013 .item13 { display: block; }
        /* 360°アイコン */
        /*#bodyColor .main .swipeIcon {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 10vw;
            height: 10vw;
        }
        #bodyColor .main .swipeIcon.show {
            display: table;
        }
            #bodyColor .main .swipeIcon span {
                display: table-cell;
                background-image: url(../IMAGES/bodyColor/icon_360.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }*/
    /* loader */
    #bodyColor .main .loader {
        position: absolute;
        left: 0;
        top: 0;
    }
        /* slider */
        #bodyColor .main .slider {
            width: 65.06vw;
            height: 20px;
            margin: 0 auto;
            margin-top: -2vw;
        }
            #bodyColor .main .slider > .wrap {
                position: relative;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            #bodyColor .main .slider .point {
              position: absolute;
              top: 0;
            }
            #bodyColor .main .slider .point.point0 {
                left: 0;
            }
            #bodyColor .main .slider .point.point1 {
                left: calc(100% / 12 * 1);
            }
            #bodyColor .main .slider .point.point2 {
                left: calc(100% / 12 * 2);
            }
            #bodyColor .main .slider .point.point3 {
                left: calc(100% / 12 * 3);
            }
            #bodyColor .main .slider .point.point4 {
                left: calc(100% / 12 * 4);
            }
            #bodyColor .main .slider .point.point5 {
                left: calc(100% / 12 * 5);
            }
            #bodyColor .main .slider .point.point6 {
                left: calc(100% / 12 * 6);
            }
            #bodyColor .main .slider .point.point7 {
                left: calc(100% / 12 * 7);
            }
            #bodyColor .main .slider .point.point8 {
                left: calc(100% / 12 * 8);
            }
            #bodyColor .main .slider .point.point9 {
                left: calc(100% / 12 * 9);
            }
            #bodyColor .main .slider .point.point10 {
                left: calc(100% / 12 * 10);
            }
            #bodyColor .main .slider .point.point11 {
                left: calc(100% / 12 * 11);
            }
            #bodyColor .main .slider .point.point12 {
                left: calc(100% / 12 * 12);
            }
                #bodyColor .main .slider .point span {
                    display: block;
                    width: 20px;
                    height: 20px;
                    margin-left: -10px;
                    margin-top: -10px;
                    border: 1px solid #8e8e8e;
                    border-radius: 50%;
                    background-color: #fff;
                }
    /* photoCaption */
    #bodyColor .main .photoCaption {
        margin-top: 2vw;
        text-align:  center;
        font-size: 3.2vw;
    }

/* sub */
#bodyColor .sub {
    position: relative;
    z-index: 1;
    margin-top: -4vw;
}

/* grade */
#bodyColor .grades {
    position: relative;
    margin: 0 4vw;
    margin-top: 6vw;
}
    #bodyColor .grades .category {
        position: absolute;
        top: 2.2vw;
        right: 11vw;
        font-size: 3.2vw;
        color: #888;
        pointer-events: none;
    }
    #bodyColor .grades .select {
        position: relative;
        margin-top: 1%;
    }
    #bodyColor .grades .select:after {
        content: '';
        position: absolute;
        right: 5%;
        top: 50%;
        display: block;
        width: 12px;
        height: 8px;
        margin-top: -4px;
        background-image: url(../IMAGES/down_red.png);
        background-repeat: no-repeat;
        background-size: contain;
    }
        #bodyColor .grades select {
            position: relative;
            z-index: 1;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            width: 100%;
            padding: 8px;
            background-color: rgba(0,0,0,0);
            border: .99px solid #cccccc;
            border-radius: 0;
            outline: none;
            font-size: 4.267vw;
            /*transform: scaleY(0.9);*/
            line-height: 1.1;
        }

/* colors */
#bodyColor .colors {
    margin-top: 1.6vw;
    padding-bottom: 1vw;
}
    /* #bodyColor .colors .category {
        margin: 0 4vw;
        font-size: 3.2vw;
    } */
    #bodyColor .colors .category {
        display: none;
    }
    #bodyColor .colors .navi {
        padding: 0 4vw;
        overflow-y: hidden;
        overflow-x: auto;
    }
        #bodyColor .colors .navi > .wrap {
            display: flex;
            padding: 2vw 0;
            padding-right: 4vw;
        }
            #bodyColor .colors .navi .item {
                flex-shrink: 0;
                padding-right: 3.6vw;
            }
                #bodyColor .colors .navi .item > .wrap {
                    position: relative;
                }
                    #bodyColor .colors .navi .item span {
                        position: relative;
                        display: block;
                        width: 11.4vw;
                        height: 11.4vw;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    #bodyColor .sub .navi .item span.half:after {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 50%;
                        bottom: 0;
                        display: block;
                        width: 100%;
                        height: 100%;
                        margin-top: 50%;
                    }
                #bodyColor .colors .navi .item.focus > .wrap:before {
                    box-sizing: border-box;
                    content: '';
                    position: absolute;
                    left: -.2vw;
                    top: -.2vw;
                    z-index: 1;
                    display: block;
                    width: 11.8vw;
                    height: 11.8vw;
                    background-image: url(../IMAGES/bodyColor/icon_check.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    border: 2px solid #d8d8d8;
                    border-radius: 50%;
                }

/* label */
#bodyColor .colors .label {
    margin: 2.6vw 4vw 0;
}
    #bodyColor .colors .label dt {
        font-size: 4.2vw;
    }
    #bodyColor .colors .label dd {
        font-size: 2.666vw;
    }

/* price */
#bodyColor .price {
    margin-top: 4.6vw;
    padding: 0 4vw;
}
    /* photoCaption */
    #bodyColor .price .photoCaption {
        font-size:  3.2vw;
    }
    #bodyColor .price .base {
        margin-top: 0.8vw;
    }
        #bodyColor .price .base dt {
            font-size: 2.66vw;
            color: #666;
        }
        #bodyColor .price .base .value {

        }
            #bodyColor .price .base .value span {
                font-size: 5.2vw;
                letter-spacing: .06em;
            }
            #bodyColor .price .base .value em {
                margin-left: .4vw;
                font-size: 3.2vw;
                font-style: normal;
            }
    #bodyColor .price .range,
    #bodyColor .price .range.show {
        display: none;
        /* margin-top: 2.4vw; */
    }
        /* #bodyColor .price .range dt {
            margin-left: -0.5em;
            font-size: 2.66vw;
        }
        #bodyColor .price .range .value {
            margin-top:  0.6vw;
        }
            #bodyColor .price .range .value span {
                font-size: 3.73vw;
            }
            #bodyColor .price .range .value em {
                font-size: 2.66vw;
                font-style: normal;
            }
        #bodyColor .price .range .cap {
            margin-top: 0.4vw;
            font-size: 2.66vw;
        } */

/* links */
#bodyColor .links {
    position: relative;
    padding: 2vw 3.733vw 0;
}
    #bodyColor .links ul {
        display:  table;
        width: 100%;
    }
        #bodyColor .links li {
            display:  table-cell;
            width: 33.33%;
        }
            #bodyColor .links a {
                position: relative;
                display: table;
                width: 100%;
                height: 11.73vw;
                background-color:#c3002c;
                color: #fff;
            }
            #bodyColor .links li:nth-child(2) a,
            #bodyColor .links li:nth-child(3) a {
                border-left:  1px solid #fff;
            }
                #bodyColor .links span {
                    display: table-cell;
                    padding: 0 0 0 2.6vw;
                    font-size: 2.66vw;
                    vertical-align: middle;
                    white-space: nowrap;
                }
            #bodyColor .links a:after {
                content: '';
                position: absolute;
                right: 2.6vw;
                top: 50%;
                display: block;
                width: 1.6vw;
                height: 2.4vw;
                margin-top: -1.2vw;
                background-image: url(../IMAGES/arrow_white.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 2.4vw;
            }

/* caption */
#bodyColor .caption {
    position: relative;
    padding: 4.8vw 3.733vw 0;
}
    #bodyColor .caption ul {

    }
    #bodyColor .caption li {
        font-size: 2.666vw;
    }