@charset "utf-8";

/*
 カラバリ拡張CSS
 カラバリを4枚以上表示する際に使用
*/
.product-color-set {
  width: 114% !important;
  top: 0;
  left:15px;
  right:auto;
  bottom:0;
  z-index:-1;
  margin: -1px;
  background-color: #ffffff;
  border: 1px solid #000;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}
.product-color-tip {
  width: 15%;
  max-width: 60px;
  position:relative;
  top:10px;
  left:auto;
  right: -83.0%;
}
.product-color-set.max-colset2 {
  width: 132% !important;
}
.product-color-set.max-colset2 > .product-color-tip {
  right: -73.5%;
}
.product-color-set.max-colset3 >  .product-color-tip {
  right: -65%;
  }
.product-color-tip > li {
  width: 100%;
  margin-bottom: 10px;
}
.product-color-tip > li img {
  width: 100%;
}
  .last-child > .product-color-set{
    left:auto;
    right:15px;
  }
  /*.product-color-set.max-colset1{
    width:425px;
  }*/
  .product-color-set.max-colset3{
    width: 150% !important;
  }
  .product-color-set.max-colset4{
    width:540px;
  }
  .product-color-set.max-colset4{
    width:610px;
  }
  .product-color-set.max-colset-none{
    display: none !important;
  }
  .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:2.5%;
    }
    @media(max-width: 1800px){
  .product-color-set.max-colset2 {
    width: 135% !important;
  }
  .product-color-set.max-colset2 > .product-color-tip {
    right: -69.5%;
  }
  .product-color-set.max-colset3 {
    width: 165% !important;
  }
  .product-color-set.max-colset3 >  .product-color-tip {
    right: -60%;
  }
}
@media ( max-width: 1600px ) {
  .product-color-set.max-colset2 {
    width: 134% !important;
  }
  .product-color-set.max-colset2 > .product-color-tip {
    right: -69.5%;
  }
  .product-color-set.max-colset3 > .product-color-tip {
    right: -55%;
  }
  .product-color-set.max-colset3 > .product-color-tip > li{
    margin-bottom: 7px;
    width: 92%;
  }
}
@media ( max-width: 1200px ) {
  .product-color-set {
    left: 10px;
  }
  .last-child > .product-color-set {
    right: 10px;
  }
}
/* カラバリ拡張CSS */