@charset "utf-8";

body {
  margin: 0;
  padding: 0;
}

#itemlp_wrapper .lp-content *,
#itemlp_wrapper .lp-content *:before,
#itemlp_wrapper .lp-content *:after {
  box-sizing: border-box;
}
#itemlp_wrapper .lp-content ol, #itemlp_wrapper .lp-content ul {
  list-style: none;
}

#itemlp_wrapper .lp-content h1, #itemlp_wrapper .lp-content h2, #itemlp_wrapper .lp-content h3, #itemlp_wrapper .lp-content p, #itemlp_wrapper .lp-content dl, #itemlp_wrapper .lp-content dt, #itemlp_wrapper .lp-content dd, #itemlp_wrapper .lp-content ul, #itemlp_wrapper .lp-content li, ol,dl ,dt ,dd {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

/*============================
#layout
margin、paddingなどは親コンテナの幅を基準に％指定
30pxなら30/640*100=4.69%、通常4.69%に設定
画像は左右paddingとmax-widthでコントロール
============================*/

#itemlp_wrapper {
  max-width: 750px;
  margin: 0 auto;
  font-family:YakuHanJP , "Sawarabi Mincho" , "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
#itemlp_wrapper .mainCont {
  position: relative;
  max-width: 750px; /* デザインデータ幅を最大幅に設定 */
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
#itemlp_wrapper img {
  max-width: 100%;
  vertical-align: bottom;
  display: block;
}

/* position:absolute使用時のコンテナに */
#itemlp_wrapper .btnCont {
  position: relative;
  text-align: center;
}

#itemlp_wrapper a {
  transition: all 0.3s ease;
}

#itemlp_wrapper a:hover {
  opacity: .8;
}

#itemlp_wrapper .p-box {
  position: relative;
}

#itemlp_wrapper img{
  width: 100%;
}

/*============================
slide
============================*/

#itemlp_wrapper .slick-slide{
  width: min(calc(630/750*100vw), 630px);
}

#itemlp_wrapper .slick-dotted.slick-slider{
  z-index: 100;
}
#itemlp_wrapper .slick-arrow{
  font-size: 0!important;
}

/* uv */
#itemlp_wrapper .uv .slick-next,
#itemlp_wrapper .uv .slick-prev{
  top: 50%;
  content: "";
  display: block;
  font-size: 0 !important;
  width: calc(36/630*100%);
  height: calc(75/630*100%);
  left: calc(-36/630*100%);
  transition: all ease 0.5s;
  background-image: url('../img/uv-slide-arrow.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(180deg) translateY(-50%);
  transform-origin: top center;
}
#itemlp_wrapper .uv .slick-next {
  left: auto;
  right: calc(-36/630*100%);
  transform: rotate(0deg) translateY(-50%);
}

#itemlp_wrapper .uv .slick-dots {
  bottom: -8%;
}


/* ingredient */
#itemlp_wrapper .ingredient .slick-next,
#itemlp_wrapper .ingredient .slick-prev{
  top: 50%;
  content: "";
  display: block;
  font-size: 0 !important;
  width: calc(50/750*100%);
  padding-top: calc(50/750*100%);
  left: calc(36/750*100%);
  transition: all ease 0.5s;
  background-image: url('../img/common-slide-arrow.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(180deg) translateY(-50%);
  transform-origin: top center;
  position: absolute;
  z-index: 1;
}
#itemlp_wrapper .ingredient .slick-next {
  left: auto;
  right: calc(36/750*100%);
  transform: rotate(0deg) translateY(-50%);
}

#itemlp_wrapper .ingredient .slick-dots {
  bottom: -5%;
}


#itemlp_wrapper .slick-next,
#itemlp_wrapper .slick-prev{
  top: 50%;
  content: "";
  display: block;
  font-size: 0 !important;
  width: calc(50/630*100%);
  padding-top: calc(50/630*100%);
  left: calc(-25/630*100%);
  transition: all ease 0.5s;
  background-image: url('../img/common-slide-arrow.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(180deg) translateY(-50%);
  transform-origin: top center;
  z-index: 1;
}
#itemlp_wrapper .slick-next {
  left: auto;
  right: calc(-25/630*100%);
  transform: rotate(0deg) translateY(-50%);
}

#itemlp_wrapper .slick-disabled{
  display: none!important;
}

#itemlp_wrapper .slick-next:hover,
#itemlp_wrapper .slick-prev:hover{
  opacity: 0.7;
}

#itemlp_wrapper .slick-next::before,
#itemlp_wrapper .slick-prev::before {
  display: none;
}

#itemlp_wrapper .slick-dots{
  bottom: -6%;
}

#itemlp_wrapper .slick-dots li{
  margin: 0 1.5%;
}

#itemlp_wrapper .slick-dots li button:before{
  border-radius: 100%;
  font-size: 0;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  opacity: 1;
  box-sizing: border-box;
  left: 0;
  top:0;
  border: 1px solid #000;
  background-color: #fff;
}

#itemlp_wrapper .slick-dots li.slick-active button:before{
  background-color: #000;
}

@media (max-width:750px){
.slick-dots li{
    width: calc(20/750*100vw);
    height: calc(20/750*100vw);
}
  #itemlp_wrapper .slick-dots li button:before{
    width: calc(20/750*100vw);
    height: calc(20/750*100vw);
  }
}


/*============================
fv
============================*/
#itemlp_wrapper .fv {
  position: relative;
}

#itemlp_wrapper .fv .fv-video {
  width: 100%;
  position: absolute;
  top: 25.2%;
  left: 0;
}

#itemlp_wrapper .fv .fv-pouch-image {
  width: calc(687/750*100%);
  position: absolute;
  top: 22.2%;
  left: 4.6%;
}

/*============================
uv
============================*/
#itemlp_wrapper .uv {
  position: relative;
}

#itemlp_wrapper .uv-slider-wrapper {
  width: calc(630/750*100%);
  position: absolute;
  top: 27.8%;
  left: 50%;
  transform: translateX(-50%);
}

/*============================
ingredient
============================*/
#itemlp_wrapper .ingredient {
  position: relative;
}

#itemlp_wrapper .ingredient-slider-wrapper {
  width: 100%;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

#itemlp_wrapper .ingredient-slider-wrapper .slick-slide {
  width: min(calc(750/750*100vw), 750px);
  position: relative;
  padding: 0 min(calc(60/750*100vw), 60px);
  margin: 0 auto;
}

#itemlp_wrapper .ingredient-slider-wrapper .slick-slide::before {
  content: '';
  position: absolute;
  top: 4.6%;
  display: block;
  width: 51px;
  height: 1px;
  background-color: #000;
  transform: translateX(-50%);
}


/*============================
howto
============================*/
#itemlp_wrapper .howto {
  position: relative;
}

#itemlp_wrapper .howto-slider-wrapper {
  width: calc(630/750*100%);
  position: absolute;
  top: 30.8%;
  left: 50%;
  transform: translateX(-50%);
}


/*============================
cv-01
============================*/
.cv-link button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

#itemlp_wrapper .cv-01 .p-box .cv-link {
  position: absolute;
  width: calc(631/750*100%);
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}

/*============================
cv-02, cv-03, cv-04
============================*/
#itemlp_wrapper .cv-02 .p-box .cv-link, #itemlp_wrapper .cv-03 .p-box .cv-link, #itemlp_wrapper .cv-04 .p-box .cv-link {
  position: absolute;
  width: calc(631/750*100%);
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
}

/*============================
cv-04
============================*/
#itemlp_wrapper .cv-04.has-padding-top {
  background-color: #cbc7c4;
  padding-top: calc(21/750*100%);
}


/*============================
faq
============================*/

#itemlp_wrapper .faq .faq-list{
  padding: 0 calc(30/750*100%);
}

#itemlp_wrapper .faq .faq-list dl,
#itemlp_wrapper .faq .faq-list .faq-dl {
  margin-bottom: calc(15/750*100%);
}

#itemlp_wrapper .faq .faq-list dl:last-of-type,
#itemlp_wrapper .faq .faq-list .faq-dl:last-of-type {
  margin-bottom: calc(60/750*100%);
}

#itemlp_wrapper .faq .faq-list dt,
#itemlp_wrapper .faq .faq-list .faq-dt {
  position: relative;
  cursor: pointer;
}

#itemlp_wrapper .faq .faq-list dt:before,
#itemlp_wrapper .faq .faq-list .faq-dt:before {
  content: '';
  display: block;
  width: calc(20/690*100%);
  height: calc(13/90*100%);
  background-image: url(../img/faq-arrow.png);
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  right: calc(40/750*100%);
  transform: translateY(-50%);
}

#itemlp_wrapper .faq .faq-list dt.selected:before
#itemlp_wrapper .faq .faq-list d.faq-t.selected:before {
  transform: translateY(-50%) rotate(180deg);
}

#itemlp_wrapper .faq .faq-list dd,
#itemlp_wrapper .faq .faq-list .faq-dd {
  display: none;
}


/*============================
追従ボタン
============================*/
#itemlp_wrapper #fixdBtn {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all ease 0.3s;
  width: min(100%, 750px);
  opacity: 1;
  z-index: 100;
  visibility: visible;
}

#itemlp_wrapper #fixdBtn.is-bnrHide {
  opacity: 0;
  visibility: hidden;
}

#itemlp_wrapper #fixdBtn .fixed_inner {
  width: calc(631/750*100%);
  margin: calc(10/750*100%) auto;
}

.item_slider_scroll {
  padding: 10px 0;
}
.item_slider_scroll .slick-slide {
  padding: 0 6px;
}
#itemlp_wrapper #fixedBnr {
  position: fixed;
  z-index: 100;
  bottom: 3%;
  right: 3%;
  max-width: 350px;
}
@media screen and (max-width: 767px) {
  #itemlp_wrapper #fixedBnr {
    max-width: 65%;
  }
}
#itemlp_wrapper #fixedBnr .bnrWrapper {
  display: flex;
}
.c-detail-product__comment-box #itemlp_wrapper br {
 display: none;
}
@media (max-width: 750px) {
  .c-detail-product__comment-box #itemlp_wrapper {
    width: 100vw;
    margin: 0 -20px;
  }
}