@charset "utf-8";
/* CSS Document */
/* - shampoo.css - */

.product__lp {
  display: block;
  margin: 0 auto;
}


/*----------------------------------------------*/
.lp__sliderbox {
  position: relative;
  display: block;
  margin: 0 auto;
}
.mv__item {
  display: block;
  position: relative;
  --mvbtm: 30;
  --mvleft: 125;
  --mvbtmpc: 40;
  --mvleftpc: 990;
}
.mv__itemlink {
  box-sizing: border-box;
  background-color: var(--c-or);
  background-image: url(../shared/img/ic_ar_min.svg);
  background-repeat: no-repeat;
  -webkit-background-size: auto calc(19 / 24 * 1em);
  background-size: auto calc(19 / 24 * 1em);
  background-position: calc(100% - 1.5em) 50%;
  color: #fff;
  display: block;
  font-size: var(--fs-24);
  font-weight: 500;
  text-align: center;
  padding: .2em;
  position: absolute;
  bottom: calc( var(--mvbtm) / 1200 * 100%);
  left:  calc( var(--mvleft) / 750 * 100%);
  width: calc(500 / 750 * 100%);
  transition: all .5s ease;
}
.mv__itemlink:hover {
  background-color: var(--c-br);
}
.lp__sliderbox .owl-dots {
  position: absolute;
  width: 1px;
  height: 1px;
}
.mv__progressbar {
  position: relative;
  width: calc(600 / 750 * 100%);
  margin: calc(60 / 750 * 100%) auto;
  display: block;
  background: #fcf6e9;
  border-radius: 5px;
  overflow: hidden;
  height: 0;
  padding-bottom: calc(10 / 750 * 100%);
}
.mv__progressbar span {
  background: var(--c-or);
  border-radius: 5px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s ease;
  height: 100%;
  width: calc((100% / var(--dotnumtotal)) * var(--dotnum));
}
.lp__sliderbox .owl-carousel .owl-nav button.owl-prev {
  position: absolute;
  top: 50%;
  left: calc(30 / 750 * 100%);
  background-color: var(--c-green);
  background-image: url(../../shared/img/ic_arrow.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: clamp(13px,calc(25 / 750 * 100vw),25px);
  -webkit-background-size: 50% auto;
  background-size: 50% auto;
  width: clamp(30px,calc(60 / 750 * 100vw),60px);
  height: clamp(30px,calc(60 / 750 * 100vw),60px);
  transform: translate3d(0,-50%,0) rotate(180deg) scale(1);
  overflow: hidden;
  text-indent: -999px;
  transition: all .5s ease;
}
.lp__sliderbox .owl-carousel .owl-nav button.owl-prev:hover {
  transform: translate3d(0,-50%,0) rotate(180deg) scale(1.1);
}
.lp__sliderbox .owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  right: calc(30 / 750 * 100%);
  background-color: var(--c-green);
  background-image: url(../../shared/img/ic_arrow.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: clamp(13px,calc(25 / 750 * 100vw),25px);
  -webkit-background-size: 50% auto;
  background-size: 50% auto;
  width: clamp(30px,calc(60 / 750 * 100vw),60px);
  height: clamp(30px,calc(60 / 750 * 100vw),60px);
  overflow: hidden;
  transform: translate3d(0,-50%,0) rotate(0deg);
  text-indent: -999px;
  transition: all .5s ease;
}
.lp__sliderbox .owl-carousel .owl-nav button.owl-next:hover {
  transform: translate3d(0,-50%,0) rotate(0deg) scale(1.1);
}
.shampoo--05 {
  background: #fcf6e9;
  box-sizing: border-box;
  padding-bottom: calc(60 / 750 * 100%);
}
.lp__slideritem {
  width: calc(500 / 750 * 100%);
  display: block;
  margin: 0 auto;
}
/*----------------------------------------------*/
.product__dataname--shampoo {
  display: block;
  background-color: #fff;
  background-color: #ffffff;
  color: var(--c-or);
  border: 1px solid var(--c-or);
  background-image: url(../../shared/img/dot_line_or.svg);
  background-repeat: no-repeat;
  -webkit-background-size: auto 2px;
  background-size: auto 2px;
  background-position: bottom center;
  text-align: center;
  font-size: var(--fs-28);
  box-sizing: border-box;
  padding: calc(20 / 670 * 100%);
  position: relative;
  font-weight: 500;
}
.product__dataname--shampoo:after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -3px;
  left: 0;
  z-index: 3;
  background: #fff;
}

.product__btn--shampoo {
  display: block;
  margin: calc(60 / 670 * 100%) auto;
  width: calc(570 / 670 * 100%);
}
.product__btn--shampoo .btn--cart {
  padding: calc(50 / 750 * 100%);
}
.product__boxtext {
  font-size: var(--fs-22);
  line-height: calc(32 / 22 * 1em);
  margin: calc(60 / 670 * 100%) auto 0;
}
.product__boxtext .ic--sq {
  background: #fff;
}
.product__boxtext + .product__title {
  margin-top: calc(120 / 670 * 100%) ;
}

/*----------------------------------------------*/
@media screen and (min-width:1000px){
.product__lp {
  display: block;
  margin: 0 auto 120px;
}
  .product__lp div {
    max-width: 1200px;
    margin: 0 auto;
  }
  .product__lp div.biochloro--02 {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    background: url(img/biochloro_02_bg.png) repeat-x top center;
    -webkit-background-size: auto auto;
    background-size: auto auto;
    box-sizing: border-box;
    padding-bottom: 60px;
    text-align: center;
  }  
  .product__lp div.biochloro--02 img {
    display: block;
    margin: 0 auto;
  }
  .product__lp div.biochloro--03 {
    position: relative;
    z-index: 3;
    margin-top: -60px;
  }
  
 .product__lp  .shampoo--04 {
    background: url(img/shampoo_04_bg.png) repeat-x top center;
    padding-bottom: 60px;;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
  }
  .product__lp  .shampoo--04 img {
    display: block;
    margin: 0 auto;
  }
  .product__lp  .shampoo--05 {
    position: relative;
    z-index: 3;
    padding-bottom: 120px;
    margin: -60px auto 0;
  }
  .shampoo__box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-align-items: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: center;
    gap: 60px 40px;
  }
  .product__lp .shampoo__item {
    margin: 0;
    display: block;
    width: clamp(100px,calc(320 / 1200 * 100%),320px);
  }
  .product__lp .shampoo__item:nth-of-type(1) {
    margin-left: 20%;
  }
  .product__lp .shampoo__item:nth-of-type(2) {
    margin-right: 20%;
  }
  .product__lp .shampoo--06 {
    background: url(img/shampoo_06_bg.png) no-repeat;
    background-position: 50% 130px;
    width: 100%;
    max-width: 100%;
  }
  .product__lp .shampoo--06 img {
    display: block;
    margin: 0 auto;
  }  
  .product__btn--shampoo {
  display: block;
  margin: 40px auto;
  width: 380px;
}
.product__btn--shampoo .btn--cart {
  padding: 14px;
}
.product__boxtext {
  font-size: var(--fs-14);
  line-height: calc(24 / 14 * 1em);
  margin: 40px auto 0;
}
.product__boxtext + .product__title {
  margin-top: 120px ;
}
  .product__dataname--shampoo {
    font-size: var(--fs-18);
    padding: 10px;
    -webkit-background-size: auto 3px;
    background-size: auto 3px;
  }
}


/*----------------------------------------------*/
@media screen and (min-width:1000px){
}