/** -------------------------------
 * headBanner 2022.2.17
 */
.bnr_area {
  background-color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  padding: 4% 4% 2%;
}
.bnr_img {
  margin: 0 auto 2%;
}
.bnr_img.sp {
  display: block;
}
.bnr_img.pc {
  display: none;
}
.bnr_img a {
  display: block;
}
.bnr_img img {
  width: 100%;
}

/** -------------------------------
 * bodyColor
 */
#bodyColor {
  clear: both;
  margin-top: 12vw;
  background-color:  #faf9f7;
}
  #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%;*/
          padding: 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:  -8%;
    }
      /* 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: 0;
            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 {
            font-size: 12px;
            font-size: 3.2vw;
            /*font-weight: bold;*/
          }
          #bodyColor .grades .grade {
            display:  table;
            width: 100%;
            margin-top: 2vw;
            border: 2px solid #000;
            border-radius: 2.13vw;
            overflow: hidden;
          }
            #bodyColor .grades .grade li {
              display:  table-cell;
              /*width: 33.33%;*/
              vertical-align: top;
            }
            #bodyColor .grades .grade li:nth-child(1) {
              width: 48%;
              border-right: 2px solid #000;
            }
            #bodyColor .grades .grade li:nth-child(2) {
              width: 48%;
              /*border-right: 2px solid #000;*/
            }
            /*#bodyColor .grades .grade li:nth-child(3) { width: 38%; }*/
              #bodyColor .grades .grade button {
                width: 100%;
                height: 9.6vw;
                background-color: #fff;
                border: none;
                outline: none;
                font-size: 3.73vw;
              }
                #bodyColor .grades .grade button span {
                  color: #000;
                }
              #bodyColor .grades.C1 .grade button[data-grade="C1"],
              #bodyColor .grades.C2 .grade button[data-grade="C2"]{
                background-color: #000;
              }
                #bodyColor .grades.C1 .grade button[data-grade="C1"] span,
                #bodyColor .grades.C2 .grade button[data-grade="C2"] span{
                  color: #fff;
                }
          /*#bodyColor .grades .model {
            display:  table;
            width: 100%;
            margin-top: 3.733vw;
            border: .99px solid #dddddd;
          }
            #bodyColor .grades .model li {
              display:  table-cell;
              width: 33.333%;
              border: .99px solid #dddddd;
              vertical-align: top;
            }
            #bodyColor .grades.C1 .model li[data-grade="C2"] { display: none; }
            #bodyColor .grades.C2 .model li[data-grade="C1"] { display: none; }
              #bodyColor .grades .model button {
                width: 100%;
                height: 9.6vw;
                background-color: #fff;
                border: none;
                outline: none;
              }
                #bodyColor .grades .model button span {
                  font-size: 3.2vw;
                }
              #bodyColor .grades.M1 .model button[data-id="M1"],
              #bodyColor .grades.M2 .model button[data-id="M2"],
              #bodyColor .grades.M3 .model button[data-id="M3"],
              #bodyColor .grades.M4 .model button[data-id="M4"],
              #bodyColor .grades.M5 .model button[data-id="M5"] {
                background-color: #dddddd;
              }*/
          #bodyColor .grades .select {
            position: relative;
            margin-top: 3.733vw;
          }
          #bodyColor .grades .select:after {
            content: '';
            position: absolute;
            right: 5%;
            top: 50%;
            z-index: 1;
            display: block;
            width: 12px;
            height: 8px;
            margin-top: -4px;
            background-image: url(../IMAGES/down_black.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: #fff;
              border: .99px solid #cccccc;
              /*border-radius: 2.13vw;*/
              outline: none;
              font-size: 16px;
              font-size: 4.267vw;
              line-height: 1.1;
            }
            #bodyColor .grades.C1 .select select[data-grade="C2"] { display: none; }
            /*#bodyColor .grades.C1 .select select[data-grade="C3"] { display: none; }*/
            #bodyColor .grades.C2 .select select[data-grade="C1"] { display: none; }
            /*#bodyColor .grades.C2 .select select[data-grade="C3"] { display: none; }*/
            /*#bodyColor .grades.C3 .select select[data-grade="C1"] { display: none; }*/
            /*#bodyColor .grades.C3 .select select[data-grade="C2"] { display: none; }*/

        /* 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 .sub.M1 .colors .navi .item[data-id="KH3"],
            #bodyColor .sub.M2 .colors .navi .item[data-id="NBF"],
            #bodyColor .sub.M4 .colors .navi .item[data-id="KH3"] {
              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 {
        width: 100%;
      }
        #bodyColor .links li {
          display: block;
          width: 50%;
          margin-top: 4%;
          padding-right: 1px;
          float:  left;
        }
        #bodyColor .links li:nth-child(odd) {
          padding-right: 4px;
        }
        #bodyColor .links li:nth-child(even) {
          padding-left: 4px;
        }
        #bodyColor .links li:nth-child(1),
        #bodyColor .links li:nth-child(2) {
          margin-top: 0;
        }
          #bodyColor .links a {
            position: relative;
            display: table;
            width: 100%;
            height: 11.73vw;
            background-color: #cbae90;
            border-radius: 5.865vw;
            color: #000;
          }
            #bodyColor .links span {
              display: table-cell;
              /*padding: 0 0 0 2.6vw;*/
              font-size: 2.66vw;
              text-align:  center;
              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;
          }*/
        #bodyColor .links li.primary {

        }
          #bodyColor .links .primary a {
            background-color: #000;
            color: #fff;
          }
        #bodyColor .links li.limited {
          display: none;
        }
        #bodyColor .links.limited li.limited {
          display: block;
        }
        #bodyColor .links.limited li.normal {
          display: none;
        }

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

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