@charset "utf-8";
/* CSS Document */

/*ヘアカラー見本　修正*/
.varlist-colorlist{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 54px;
}
@media only screen and (max-width: 767px){
  .varlist-colorlist{
    margin-bottom: 20px;
  }
}
.sec-cariation .varlist-area{
  padding: 70px 84px 60px 97px;
  background: #F8F4ED;
  color: #523B4B;
}
@media only screen and (max-width: 1100px){
  .sec-cariation .varlist-area{
    padding: 35px;
  }
}
@media only screen and (max-width: 900px){
  .sec-cariation .varlist-area{
    padding: 25px;
  }
}
@media only screen and (max-width: 767px){
  .sec-cariation .varlist-area{
    padding: 20px 15px 15px 15px;
  }
}
.sec-cariation .varlist-area .content-swatch{
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.varlist-area__ttl{
  font-size: 2.6rem;
  margin-bottom: .3em;
}
@media only screen and (max-width: 767px){
  .varlist-area__ttl{
    font-size: 2rem;
  }
}
.varlist-area__txt{
  font-size: 1.8rem;
}
@media only screen and (max-width: 900px){
  .varlist-area__txt{
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 767px){
  .varlist-area__txt{
    margin-bottom: 10px;
  }
}
.varlist-area__note{
  font-size: 90%;
  max-width: max-content;
  margin: 2em 0 0 auto;
}
@media only screen and (min-width: 768px){
  .sec-cariation .varlist-area .slider-swatch02 .slick-track{
    margin-left: 0;    
  }
}