@charset "utf-8";

/*
 カラバリ拡張CSS
 カラバリを4枚以上表示する際に使用
*/
  .product-color-set.max-colset1{
    width: 320px;
  }
  .product-color-set.max-colset2{
    width: 390px;
  }
  .product-color-set.max-colset3{
    width: 470px;
  }
  .product-color-set.max-colset4{
    width: 540px;
  }
  .product-color-set.max-colset4{
    width: 610px;
  }
  .product-color-set.max-colset-none{
    left: -15px;
    right: auto;
    width: 218px;
  }
  .product-color-set.max-colset1 ul, .product-color-set.max-colset2 ul,
  .product-color-set.max-colset3 ul, .product-color-set.max-colset4 ul,
  .product-color-set.max-colset5 ul, .product-color-set.max-colset-none ul{
    display:block;
  }
.product-color-set {
  left:-15px;
  right:auto;
  bottom:0;
  z-index:-1;
}
.product-color-tip {
  position: relative;
  top: 25px;
  left: 220px;
}

ul.product-color-tip.colset1{
  border-left: 1px solid #eeeeee;
  height: 300px;
  padding-left: 16px;
}
.product-color-tip > li{
  width: 60px;
  margin-bottom: 10px;
}
  .last-child .product-color-set,
  .is_right .product-color-set{
    left: auto;
    right: -15px;
  }
    .is_right ul:last-child {
      border-left: 0;
      border-right: 1px solid #eeeeee;
      height: 300px;
      padding: 0 16px 0 5px;
    }
    .last-child .product-color-set > .product-color-tip,
    .is_right .product-color-set > .product-color-tip{
      left: auto;
      left: 5.5%;
      border-left:none;
      padding-left: 5px;
    }
@media ( max-width: 1200px ) {
  .product-color-set.max-colset1{
    width: 235px;
  }
  .product-color-tip{
    left: 180px;
  }
  .product-color-tip > li{
    width: 40px;
  }
  ul.product-color-tip.colset1{
    height: 280px;
    padding-left: 5px;
  }
  .last-child .product-color-set > .product-color-tip,
  .is_right .product-color-set > .product-color-tip{
    padding-right: 5px;
    left: 1.5%;
    height: 280px;
  }
  .product-color-set.max-colset2{
    width: 290px;
  }
}