@charset "utf-8";

/*
 カラバリ拡張CSS
 カラバリを4枚以上表示する際に使用
*/
.product-color-set {
  left:-15px;
  right:auto;
  bottom:0;
  z-index:-1;
}
.product-color-tip {
  position:relative;
  top:15px;
  left:250px;
}
  .last-child > .product-color-set{
    left:auto;
    right:-15px;
  }
  .product-color-set.max-colset1{
    width:330px;
  }
  .product-color-set.max-colset2{
    width:400px;
  }
  .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{
    display: none !important;
    /*left:-15px;
    right:auto;
    width:255px;*/
  }
  .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;
  }
    .last-child > .product-color-set > .product-color-tip{
      left:auto;
      left:10px;
    }
/* カラバリ拡張CSS */


/*2016.06.03.追記*/
.item .product-color-set{
  padding-right: 5px;
}
.product-color-set[class*='max-colset'] ul{
  position: static;
  float: left;
  margin-top: 15px;
  box-sizing:border-box;
}
.product-color-set[class*='max-colset'] ul li{
  width: 100%;
}
.product-color-tip{
  padding:0 0 0 5px;
}
.item .product-color-set.max-colset1{
  width: calc(100% + 25% - 5px);
}
.product-color-set.max-colset1 .tip-box{
  width: calc(20% - 8px);
  float:right;
}
.product-color-set.max-colset1 .tip-box ul{
  width: 100%;
}
.product-color-set.max-colset2{
  width: calc(100% + 50% - 5px);
}
.product-color-set.max-colset2 .tip-box{
  width: calc(33.333% - 8px);
  float:right;
}
.product-color-set.max-colset2 .tip-box ul{
  width: 50%;
}
.product-color-set.max-colset3{
  width: calc(100% + 75% - 5px);
}
.product-color-set.max-colset3 .tip-box{
  width: calc(42.857% - 8px);
  float:right;
}
.product-color-set.max-colset3 .tip-box ul{
  width: 33.333%;
}
.product-color-set.max-colset4{
  width: calc(100% + 100% - 5px);
  padding-right: 0;
}
.product-color-set.max-colset4 .tip-box{
  width: calc(50% - 8px);
  float:right;
}
.product-color-set.max-colset4 .tip-box ul{
  width: 24.5%;
}
.is-right .product-color-set{
  left: auto;
  right: 0px;
  padding-right: 0;
}
.is-right .product-color-set[class*='max-colset'] .tip-box{
  float: left;
}