.section-ingredients .container{
  max-width:80rem
}

@media (min-width: 768px){
  .section-ingredients .container{
    padding-left:0px;
    padding-right:0px
  }
}

@media (min-width: 1024px){
  .section-ingredients{
    padding-bottom:0px
  }
}

.ingredients-swiper{
  width:100%;
  overflow:hidden;
  padding-bottom:1rem
}

@media (min-width: 768px){
  .ingredients-swiper{
    padding-bottom:0px
  }
}

@media (min-width: 1024px){
  .ingredients-swiper .swiper-wrapper{
    justify-content:center
  }
}

.ingredients-swiper .swiper-slide{
  padding-left:1rem;
  padding-right:1rem
}

@media (min-width: 768px){
  .ingredients-swiper .swiper-slide{
    margin-bottom:1.5rem
  }
}

@media (min-width: 1024px){
  .ingredients-swiper .swiper-slide{
    padding-left:0px;
    padding-right:0px
  }
}

@media (min-width: 1024px){
  .ingredients-swiper .swiper-slide{
    margin-bottom:2.5rem
  }
}

@media (min-width: 1024px){
  .ingredients-swiper .slide-btm{
    --tw-translate-x:0;
    --tw-translate-y:0;
    --tw-rotate:0;
    --tw-skew-x:0;
    --tw-skew-y:0;
    --tw-scale-x:1;
    --tw-scale-y:1;
    transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-translate-x:-25%
  }
}

@media (min-width: 1024px){
  .ingredients-swiper .slide-btm .card{
    display:flex;
    flex-direction:row-reverse;
    flex-wrap:wrap;
    align-items:center;
    justify-items:center
  }

  .ingredients-swiper .slide-btm .card .info{
    text-align:right
  }
}

.ingredients-swiper .slide-btm .card .thumb .pic-deco{
  z-index:10;
  width:1rem;
  bottom:1px;
  left:1px;
  right:unset;
  position:absolute;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-translate-x:-50%;
  --tw-translate-y:50%
}

.ingredients-swiper .card .thumb{
  position:relative;
  margin-bottom:1rem;
  padding:2px;
  background:linear-gradient(160deg, #F1CE8D 0%, #F1CE8D 30%, #000 60%)
}

.ingredients-swiper .card .thumb .product{
  width:100%
}

.ingredients-swiper .card .thumb .pic-deco{
  z-index:10;
  width:1rem;
  bottom:1px;
  right:1px;
  position:absolute;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-translate-x:50%;
  --tw-translate-y:50%
}

.ingredients-swiper .card .info{
  text-align:left
}

@media (min-width: 768px){
  .ingredients-swiper .card .info{
    padding-left:1rem;
    padding-right:1rem
  }
}

.ingredients-swiper .card .info .title{
  font-weight:600
}

.ingredients-swiper .card .info .content{
  font-weight:300
}

@media (min-width: 1024px){
  .ingredients-swiper .card{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-items:center
  }

  .ingredients-swiper .card .thumb{
    width:40%
  }

  .ingredients-swiper .card .info{
    width:60%
  }

  .ingredients-swiper .card .info .title{
    font-size:1.25rem;
    line-height:1.75rem;
    line-height:1.375rem
  }

  .ingredients-swiper .card .info .content{
    font-size:1rem;
    line-height:1.5rem;
    line-height:1.375rem
  }
}

.section-product-intro .container{
  padding-left:0px;
  padding-right:0px
}

.section-product-intro .section-title{
  position:relative;
  padding-bottom:1rem
}

.section-product-intro .sub-title{
  line-height:1.375rem
}

.section-product-intro .sub-title .large{
  line-height:1.375rem
}

@media (min-width: 768px){
  .section-product-intro .sub-title{
    line-height:1.375rem
  }

  .section-product-intro .sub-title .large{
    line-height:1.375rem
  }
}

.section-product-intro .product-swiper{
  width:100%;
  overflow:hidden;
  padding-bottom:1rem
}

@media (min-width: 768px){
  .section-product-intro .product-swiper{
    padding-bottom:2.5rem
  }
}

@media (min-width: 768px){
  .section-product-intro .product-swiper .swiper-slide{
    transition-duration:500ms;
    transform:scale(0.8);
    transform-origin:center
  }

  .section-product-intro .product-swiper .swiper-slide .info{
    opacity:0;
    transition-duration:500ms
  }

  .section-product-intro .product-swiper .swiper-slide.swiper-slide-active{
    transform:scale(1)
  }

  .section-product-intro .product-swiper .swiper-slide.swiper-slide-active .info{
    opacity:1
  }
}

.section-product-intro .card .thumb{
  position:relative;
  margin-bottom:1rem;
  display:flex;
  width:100%;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center
}

.section-product-intro .card .thumb .product{
  width:100%
}

.section-form{
  padding-left:1.5rem;
  padding-right:1.5rem;
  padding-bottom:2.5rem;
  --tw-text-opacity:1;
  color:rgba(255, 255, 255, var(--tw-text-opacity))
}

@media (min-width: 768px){
  .section-form{
    padding-bottom:0px
  }
}

.section-form .container{
  max-width:48rem
}

.section-form .sub-title{
  line-height:1.375rem
}

.section-form .sub-title .large{
  line-height:1.375rem
}

@media (min-width: 768px){
  .section-form .sub-title{
    line-height:1.375rem
  }

  .section-form .sub-title .large{
    line-height:1.375rem
  }
}

.section-form .content{
  font-weight:700
}

.section-form .step-container{
  max-width:64rem;
  padding-bottom:1rem
}

.section-form .step-container .content{
  font-weight:300
}

.section-form .intro{
  padding-bottom:1.25rem;
  font-size:1.25rem;
  line-height:1.75rem
}

.section-form .intro h3{
  font-size:1.5rem;
  line-height:2rem
}

@media (min-width: 768px){
  .section-form .intro h3{
    font-size:1.875rem;
    line-height:2.25rem
  }
}

.section-form .intro p{
  margin-top:0.75rem;
  margin-bottom:0.75rem
}

.section-form .video-box{
  position:relative;
  width:100%
}

.section-form .video-box .video-deco{
  position:absolute;
  top:0px;
  left:0.5rem;
  height:3rem;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-translate-y:-0.5rem
}

.section-form .btn.submit{
  font-size:1.25rem;
  line-height:1.75rem
}

.section-form .content{
  margin-bottom:1.5rem
}

.video-wrapper{
  position:relative;
  margin-top:1rem;
  margin-bottom:1rem;
  width:100%
}

.video-wrapper.pc{
  display:none
}

@media (min-width: 768px){
  .video-wrapper.pc{
    display:block
  }
}

.video-wrapper.pc{
  padding-bottom:56.25%
}

@media (min-width: 768px){
  .video-wrapper.mobile{
    display:none
  }
}

.video-wrapper.mobile{
  padding-bottom:100%
}

.video-wrapper .video-box{
  position:absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%
}

.deco-product{
  bottom:0px;
  left:0px;
  width:100%;
  transform:translateY(15%)
}

@media (min-width: 1280px){
  .deco-product{
    transform:translateY(25%)
  }
}

.deco-promo-top{
  top:-1rem;
  right:0px;
  width:50%;
  max-width:48rem;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-translate-y:-50%
}

.deco-promo-btm{
  width:80%;
  bottom:0px;
  left:50%;
  max-width:64rem;
  transform:translateX(-60%)
}

.ingredients-swiper, .product-swiper, .step-swiper{
  position:relative
}

.ingredients-swiper .swiper-pagination, .product-swiper .swiper-pagination, .step-swiper .swiper-pagination{
  bottom:0px
}

.ingredients-swiper .swiper-pagination, .product-swiper .swiper-pagination, .step-swiper .swiper-pagination{
  display:flex;
  align-items:center;
  justify-content:center
}

.ingredients-swiper .swiper-pagination .swiper-pagination-bullet, .product-swiper .swiper-pagination .swiper-pagination-bullet, .step-swiper .swiper-pagination .swiper-pagination-bullet{
  width:1.5rem;
  border-radius:0px;
  --tw-bg-opacity:1;
  background-color:rgba(255, 255, 255, var(--tw-bg-opacity));
  opacity:0.75
}

.ingredients-swiper .swiper-pagination .swiper-pagination-bullet,.product-swiper .swiper-pagination .swiper-pagination-bullet,.step-swiper .swiper-pagination .swiper-pagination-bullet{
  height:4px
}

.ingredients-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .product-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .step-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  opacity:1
}

.ingredients-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,.product-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,.step-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  height:6px
}
/*# sourceMappingURL=form.css.map */