/** -------------------------------
 * headBanner 2022.2.22
 */
 .bnr_wrap {
    background-color: #fff;
    display: flex;
    justify-content: center;
    width: 100%;
}
.bnr_area {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 1280px;
    padding: .2% 3.667% 2%;
}
.bnr_img.sp {
    display: none;
}
.bnr_img.pc {
    display: block;
    width: 50%;
    margin-top: 1.8%;
}
.bnr_img.pc:nth-child(odd) {
    padding-left: 1%;
}
.bnr_img.pc:nth-child(even) {
    padding-right: 1%;
}
.bnr_img a {
    display: block;
}
.bnr_img img {
    width: 100%;
}

/** -------------------------------
 * bodyColor
 */
#bodyColor {
  clear: both;
  max-width: 1280px;
  margin: 2% auto 0;
  padding: 3.2% 3.667% 2%;
  background-color:  #faf9f7;
}
  #bodyColor > .wrap {
    display: block;
  }
    /* header */
    #bodyColor .header {
      position: relative;
      z-index: 1;
      /*padding-top: 1.4%;*/
    }
    /*#bodyColor .header:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 4.27%;
      height: 5px;
      background-color: #c3002c;
    }*/
      #bodyColor .header h1 {
        display: table;
      }
        #bodyColor .header span {
          display: table-cell;
          font-size: 3.6em;
          font-weight: normal;
          line-height: 1.1;
          vertical-align: middle;
          letter-spacing: 0.03em;
        }
      #bodyColor .header p {
        margin-top: 1.2%;
        font-size: 1.6em;
      }
    /* content */
    #bodyColor .content {
      position: relative;
      margin-top: -2.2em;
    }
      /* main */
      #bodyColor .main {
        position: relative;
        width: 76.923%;
        cursor: ew-resize;
      }
        #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: 64px;
          height: 64px;
        }
        #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 {
          position: absolute;
          left: 50%;
          bottom: 50px;
          width: 604px;
          margin-left: -302px;
        }
          #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;
              }


      /* sub */
      #bodyColor .sub {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        width: 320px;
      }
        /* grade */
        #bodyColor .grades {
          margin-left: 12px;
        }
          #bodyColor .grades .category {
            font-size: 1.8em;
            /*font-weight: bold;*/
          }
          #bodyColor .grades .grade {
            display:  table;
            width: 100%;
            margin-top: 4%;
            border: 2px solid #000;
            border-radius: 8px;
            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: 34px;
                background-color: #fff;
                border: none;
                outline: none;
                font-size: 1.4em;
              }
                #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;
                }
              _:-ms-lang(x)::-ms-backdrop,
              #bodyColor .grades .grade button[data-grade="C1"] {
                border-radius: 5px 0 0 5px;
              }
              /*_:-ms-lang(x)::-ms-backdrop,
              #bodyColor .grades .grade button[data-grade="C3"] {
                border-radius: 0 5px 5px 0;
              }*/
              _:-ms-lang(x)::-ms-backdrop,
              #bodyColor .grades.C1 .grade button[data-grade="C1"] {
                border-radius: 0;
              }
              /*_:-ms-lang(x)::-ms-backdrop,
              #bodyColor .grades.C3 .grade button[data-grade="C3"] {
                border-radius: 0;
              }*/
          /*#bodyColor .grades .model {
            display:  table;
            width: 100%;
            margin-top: 22px;
            border: 1px solid #dddddd;
          }
            #bodyColor .grades .model li {
              display:  table-cell;
              width: 33.333%;
              border: 1px 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: 34px;
                background-color: #fff;
                border: none;
                outline: none;
              }
                #bodyColor .grades .model button span {
                  font-size: 1.4em;
                }
              #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: 22px;
          }
          #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%;
              height:  34px;
              padding: 0 10px;
              background-color: #fff;
              border: 1px solid #cccccc;
              /*border-radius: 8px;*/
              outline: none;
              font-size: 1.3em;
              line-height: 1.1;
            }
            select::-ms-expand {
              display: none;
            }
            #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: 12%;
        }
          #bodyColor .colors .category {
            margin-left: 12px;
            font-size: 1.8em;
            /*font-weight: bold;*/
          }
          #bodyColor .colors .label {
            /*width: 244px;*/
            width: 308px;
            margin-left: 12px;
            margin-top: 8%;
            padding-top: 8%;
            border-top: 1px solid #ccc;
          }
          #bodyColor .colors .label.sp {
            display: none;
          }
            #bodyColor .colors .label dt {
              font-size: 1.6em;
              /*font-weight: bold;*/
            }
            #bodyColor .colors .label dd {
              font-size: 1.2em;
              /*font-weight: bold;*/
            }
          #bodyColor .colors .navi {
            /*width: 256px;*/
            width: 320px;
          }
            #bodyColor .colors .navi .item {
              width: 52px;
              height: 52px;
              margin-left: 12px;
              margin-top: 12px;
              float: left;
            }
              #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: 4px;
              border: 2px solid #000;
              border-radius: 50%;
              -moz-border-radius: 50%;
              -webkit-border-radius: 50%;
            }
        /* price */
        #bodyColor .price {
          margin-left:  12px;
          text-align: right;
        }
          /* photoCaption */
          #bodyColor .price .photoCaption {
            margin-top: 10%;
            font-size: 1.4em;
          }
          #bodyColor .price .base {
            margin-top: 4%;
          }
            #bodyColor .price .base dt {
              font-size: 1.2em;
              line-height:  1.1;
            }
            #bodyColor .price .base .value {

            }
              #bodyColor .price .base .value span {
                font-size: 2.8em;
                font-weight: bold;
              }
              #bodyColor .price .base .value em {
                font-size: 2.0em;
                font-style: normal;
              }
          #bodyColor .price .range {
            margin-top: 5.4%;
          }
            #bodyColor .price .range dt {
              font-size: 1.4em;
            }
            #bodyColor .price .range .value {

            }
              #bodyColor .price .range .value span {
                font-size: 1.8em;
                font-weight: bold;
              }
              #bodyColor .price .range .value em {
                font-size: 1.4em;
                font-style: normal;
              }
            #bodyColor .price .range .cap {
              padding-top: 2%;
              font-size: 1.1em;
            }
        #bodyColor .price sup {
          font-size: 0.9em;
        }
        @media all and (-ms-high-contrast:none) {
          #bodyColor .price sup {
            font-size: 1.1em;
            top: -0.6em;
          }
        }

    /* links */
    #bodyColor .links {
      position: relative;
      /*padding-top: 4%;*/
    }
      #bodyColor .links ul {
        display: table;
        margin-left: -10px;
      }
        #bodyColor .links li {
          display: table-cell;
          padding: 0 10px;
          vertical-align: top;
        }
          #bodyColor .links a {
            position: relative;
            display: table;
            width: 160px;
            height: 44px;
            background-color: #cbae90;
            border-radius: 22px;
            color: #000;
          }
            #bodyColor .links span {
              display: table-cell;
              /*padding: 0 40px 0 16px;*/
              padding: 0 16px;
              font-size: 1.4em;
              text-align:  center;
              vertical-align: middle;
              white-space: nowrap;
            }
              #bodyColor .links span br {
                display:  none;
              }
          /*#bodyColor .links a:after {
            content: '';
            position: absolute;
            right: 18px;
            top: 50%;
            display: block;
            width: 7px;
            height: 10px;
            margin-top: -5px;
            background-image: url(../IMAGES/arrow_white.png);
            background-repeat: no-repeat;
            background-position: right;
            background-size: auto 10px;
          }*/
          /*#bodyColor .links a:hover {
            background: #c3002c;
          }
            #bodyColor .links a:hover span {
              color:#fff;
            }*/
          #bodyColor .links .primary a {
            background-color: #000;
            color: #fff;
          }
        #bodyColor .links li.limited {
          display: none;
        }
        #bodyColor .links.limited li.limited {
          display: table-cell;
        }
        #bodyColor .links.limited li.normal {
          display: none;
        }

    /* caption */
    #bodyColor .caption {
      position: relative;
      padding-top: 2.8%;
      /*padding-top: 0;*/
    }
      #bodyColor .caption ul {

      }
        #bodyColor .caption li {
          font-size: 1.1em;
        }


/* tablet */
@media screen and (min-width: 581px) and (max-width: 1279px) {
    /* header */
    #bodyColor .header:before {
      height: 0.390625vw;
    }
        #bodyColor .header span {
          font-size: 2.968vw;
        }
      #bodyColor .header p {
        font-size: 1.25vw;
      }
    /* content */
    #bodyColor .content {
      margin-top: -1.71875vw;
    }
        /* 360°アイコン */
        #bodyColor .main .swipeIcon {
          width: 5vw;
          height: 5vw;
        }
        /* slider */
        #bodyColor .main .slider {
          bottom: 3.90625vw;
          width: 47.1875vw;
          margin-left: -23.59375vw;
        }
              #bodyColor .main .slider .point span {
                width: 1.5625vw;
                height: 1.5625vw;
                margin-left: -0.78125vw;
                margin-top: -0.78125vw;
              }


      /* sub */
      #bodyColor .sub {
        width: 25vw;
      }
        /* grade */
        #bodyColor .grades {
          margin-left: 0.9375vw;
        }
          #bodyColor .grades .category {
            font-size: 1.40625vw;
          }
          /*#bodyColor .grades .category {
            margin-left: 0.9375vw;
            font-size: 1.40625vw;
          }
          #bodyColor .grades .select {
            margin-left: 0.9375vw;
          }
          #bodyColor .grades .select:after {
            width: 0.9375vw;
            height: 0.625vw;
            margin-top: -0.3125vw;
          }
            #bodyColor .grades select {
              padding: 0.625vw;
              font-size: 1.015625vw;
            }*/
          #bodyColor .grades .grade {
            border-radius: 0.625vw;
          }
              #bodyColor .grades .grade button {
                height: 2.65625vw;
                font-size: 1.09375vw;
              }
                #bodyColor .grades .grade button span {

                }
/*          #bodyColor .grades .model {
            margin-top: 1.71875vw;
          }
              #bodyColor .grades .model button {
                height: 2.65625vw;
              }
                #bodyColor .grades .model button span {
                  font-size: 1.09375vw;
                }*/
          #bodyColor .grades .select {
            margin-top: 1.71875vw;
          }
          #bodyColor .grades .select:after {
            width: 0.9375vw;
            height: 0.625vw;
            margin-top: -0.3125vw;
          }
            #bodyColor .grades select {
              height:  2.65625vw;
              padding: 0 0.78125vw;
              font-size: 1.015625vw;
            }
        /* colors */
          #bodyColor .colors .category {
            margin-left: 0.9375vw;
            font-size: 1.40625vw;
          }
          #bodyColor .colors .label {
            width: 24.0625vw;
            margin-left: 0.9375vw;
          }
            #bodyColor .colors .label dt {
              font-size: 1.25vw;
            }
            #bodyColor .colors .label dd {
              font-size: 0.9375vw;
            }
          #bodyColor .colors .navi {
            width: 25vw;
          }
            #bodyColor .colors .navi .item {
              width: 4.0625vw;
              height: 4.0625vw;
              margin-left: 0.9375vw;
              margin-top: 0.9375vw;
            }
            #bodyColor .colors .navi .item.focus {
              padding: 0.3125vw;
              border: 0.15625vw solid #000;
            }
        /* price */
        #bodyColor .price {
          margin-left:  0.9375vw;
        }
            /* photoCaption */
            #bodyColor .price .photoCaption {
              font-size: 1.09375vw;
            }
            #bodyColor .price .base dt {
              font-size: 0.9375vw;
            }
              #bodyColor .price .base .value span {
                font-size: 2.1875vw;
              }
              #bodyColor .price .base .value em {
                font-size: 1.5625vw;
              }
            #bodyColor .price .base .cap {
              font-size: 0.9375vw;
            }
            #bodyColor .price .range dt {
              font-size: 1.09375vw;
            }
              #bodyColor .price .range .value span {
                font-size: 1.40625vw;
              }
              #bodyColor .price .range .value em {
                font-size: 1.09375vw;
              }
            #bodyColor .price .range .cap {
              font-size: 0.859375vw;
            }
        #bodyColor .price sup {
          font-size: 0.703125vw;
        }

    /* links */
      #bodyColor .links {
        margin-left: -0.78125vwvw;
      }
        #bodyColor .links li {
          padding: 0 0.78125vwvw;
        }
          #bodyColor .links a {
            width: 12.5vw;
            height: 3.4375vw;
          }
            #bodyColor .links span {
              /*padding: 0 3.125vw 0 1.25vw;*/
              padding: 0 1.25vw;
              font-size: 1.09375vw;
              font-size: 1.09375vw;
            }
          #bodyColor .links a:after {
            right: 1.40625vw;
            width: 0.546875vw;
            height: 0.78125vw;
            margin-top: -0.390625vw;
            background-size: auto 0.78125vw;
          }

    /* caption */
        #bodyColor .caption li {
          font-size: 0.859375vw;
        }
}