/** -------------------------------
 * bodyColor
 */
#bodyColor {
  clear: both;
  margin-top: 2vw;
  padding-top: 10vw;
  /*margin-bottom: -8vw;*/
  /*padding-bottom: 4vw;*/
  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: 28px;
          font-size: 7.46vw;
          font-weight: normal;
          vertical-align: middle;
        }
      #bodyColor .header p {
        font-size: 12px;
        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%;
        }
          #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;
          }
          /* 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: 12px;
          font-size: 3.2vw;
        }

      /* sub */
      #bodyColor .sub {
        position: relative;
        z-index: 1;
        margin-top: -4vw;
      }
        /* grade */
        #bodyColor .grades {
          margin: 0 4vw;
          margin-top: 6vw;
        }
          #bodyColor .grades .category {
            padding-bottom: 1vw;
            font-size: 12px;
            font-size: 3.2vw;
            font-weight: bold;
          }
          #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: 16px;
              font-size: 4.267vw;
              /*transform: scaleY(0.9);*/
              line-height: 1.1;
            }
        /* colors */
        #bodyColor .colors {
          margin-top: 3.6vw;
          padding-bottom: 1vw;
        }
          #bodyColor .colors .category {
            margin: 0 4vw;
            font-size: 12px;
            font-size: 3.2vw;
            font-weight: bold;
          }
          #bodyColor .colors .navi {
            padding: 0 1.8vw;
            margin-top: -1.6vw;
          }
            #bodyColor .colors .navi .item {
              width: 6.4vw;
              height: 6.4vw;
              margin-left: 5vw;
              margin-top: 4.4vw;
              float: left;
            }
            #bodyColor .colors .navi .item.margin {
              margin-left: 10.6vw;
            }
              #bodyColor .colors .navi .item > .wrap {

              }
                #bodyColor .colors .navi .item span {
                  position: relative;
                  display: block;
                  padding-top: 100%;
                  border-radius: 50%;
                  -moz-border-radius: 50%;
                  -webkit-border-radius: 50%;
                }
                #bodyColor .sub .navi .item span.half {
                  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 {
              padding: 0.53vw;
              border: 1px solid #000;
              border-radius: 50%;
              -moz-border-radius: 50%;
              -webkit-border-radius: 50%;
            }
          #bodyColor .colors .label {
            margin: 4vw 4vw 0;
          }
          /*#bodyColor .colors .label.pc {
            display: none;
          }*/
            #bodyColor .colors .label dt {
              font-size: 12px;
              font-size: 3.2vw;
            }
            #bodyColor .colors .label dd {
              font-size: 10px;
              font-size: 2.666vw;
            }
        /* price */
        #bodyColor .price {
          margin-top: 4.6vw;
          padding: 0 4vw;
        }
          /* photoCaption */
          #bodyColor .price .photoCaption {
            font-size: 12px;
            font-size:  3.2vw;
          }
          #bodyColor .price .base {
            display:  table;
            margin-top: 0.8vw;
          }
            #bodyColor .price .base dt {
              display:  table-cell;
              vertical-align:  baseline;
              font-size: 10px;
              font-size: 2.66vw;
            }
            #bodyColor .price .base .value {
              display:  table-cell;
              padding-left: 2.8vw;
              vertical-align:  baseline;
            }
              #bodyColor .price .base .value span {
                font-size: 17px;
                font-size: 4.53vw;
                font-weight: bold;
              }
              #bodyColor .price .base .value em {
                font-size: 12px;
                font-size: 3.2vw;
                font-style: normal;
              }
          #bodyColor .price .range {
            margin-top: 2.4vw;
          }
            #bodyColor .price .range dt {
              margin-left: -0.5em;
              font-size: 10px;
              font-size: 2.66vw;
            }
            #bodyColor .price .range .value {
              margin-top:  0.6vw;
            }
              #bodyColor .price .range .value span {
                font-size: 14px;
                font-size: 3.73vw;
                font-weight: bold;
              }
              #bodyColor .price .range .value em {
                font-size: 10px;
                font-size: 2.66vw;
                font-style: normal;
              }
            #bodyColor .price .range .cap {
              margin-top: 0.4vw;
              font-size: 10px;
              font-size: 2.66vw;
            }

    /* links */
    #bodyColor .links {
      position: relative;
      padding: 4.6vw 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: 10px;
          font-size: 2.666vw;
        }