@charset 'utf-8';

/*----------------------------------------
https://www.aster-one.com/stfcool2507/
design.css
----------------------------------------*/

.pankuzu,
.page_ttl {
  display: none;
}

.page_body > .wrapper {
  padding: 0 0 3em;
}

.cnt {
  position: relative;
}

.cnt img {
  width: 100%;
  height: auto;
}

/* fv */
.fv1 {
  z-index: 2;
}
.fv2 {
  margin-top: -80px;/*100*/
}
.fv .fv_ttl1 {
  width: 64.53%;
  position: absolute;
  top: 9.31%;
  left: 17.6%;
}
.fv .fv_degagon {
  width: 22.53%;
  position: absolute;
  top: 29.08%;
  left: 68.27%;
}
.fv .fv_txt1 {
  width: 10.27%;
  position: absolute;
  top: 37.15%;
  left: 12.67%;
}
.fv .fv_ttl2 {
  width: 77.2%;
  position: absolute;
  top: 81.54%;
  left: 0;
  right: 0;
  margin: auto;
}
.fv .fv_txt2 {
  width: 100%;
  position: absolute;
  top: 37.5%;
  left: 0;
}
.fv .fv_txt3 {
  width: 100%;
  position: absolute;
  top: 55.75%;
  left: 0;
}
.fv .fv_txt4 {
  width: 100%;
  position: absolute;
  top: 74.45%;
  left: 0;
}

/* cnt2 */
.cnt2_1 {
  z-index: 2;
}
.cnt2_2 {
  margin-top: -80px;/*100*/
}
.cnt2_ttl {
  width: 100%;
  position: absolute;
  top: 3.47%;
  left: 0;
}
.cnt2 .box {
  width: 89.33%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: -10px 10px 10px rgba(176, 206, 233, 0.8);
}
.cnt2 .box1 {
  top: 33.08%;
}
.cnt2 .box2 {
  top: 55.76%;
}
.cnt2 .box3 {
  top: 77.68%;
}

.cnt2 .box .decagon {
  width: 22.84%;
  position: absolute;
  top: -26px;/*33*/
  left: -31px;/*40*/
}

/* cnt3 */
.cnt3 {
  height: 1305px;/*1632*/
  background: url(cnt3_bg.webp) no-repeat left top;
  background-size: 100% auto;
}

/* cart */
.cart_area {
  width: 100%;
  height: 1305px;/*1632*/
  position: absolute;
  top: 0;
  left: 0;
}
.cart_area .cart_ttl {
  position: absolute;
  top: 4.9%;
  left: 0;
}
.cart {
  width: 92%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: -10px 10px 10px rgba(176, 206, 233, 0.8);
}
.cart1 {
  top: 12.44%;
}
.cart2 {
  top: 73.1%;
}
.cart button {
  width: 88.12%;
  position: absolute;
  right: 7.23%;
  background: none;
  appearance: none;
  border: 0;
  border-radius: 0;
}
.btn_cart1 {
  top: 45.6%;
}
.btn_cart2 {
  top: 60.26%;
}
.cart1 ul {
  width: 86%;
  position: absolute;
  top: 72.36%;
  left: 7.23%;
}
.cart1 li {
  font-size: 16px;/*20*/
  line-height: 1.8;
  padding-left: 1em;
  text-indent: -1em;
  margin: 0;
}
.cart1 li a {
  color: inherit;
}

/* 成分 */
.cnt3_bottom {
  background: url(cnt3_bg_repeat.png) repeat-y left top;
  background-size: 100% auto;
  padding-bottom: 76px;/*96*/
}
.cnt_seibun {
  width: 92%;
  background: #fff;
  margin: auto;

}
.seibun_inner {
  clear: both;
  height: 160px;/*200*/
  background: #fff;
  padding: 0 5%;
  margin: auto;
  overflow: hidden;
}
.seibun_inner p {
  font-size: 22px;/*28*/
  line-height: 2;
}
.seibun_inner .midasi {
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  /*24*/
  padding: 0.7em 0 0.2em;
}
.seibun_inner p {
  font-size: 14px;/*18*/
  line-height: 1.66;
}
.txtarea {
  padding-bottom: 2em;
}
.grad {
  width: calc(100%);
  height: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.68) 40%, rgba(255, 255, 255, 1) 59%, rgba(255, 255, 255, 1) 100%);
}

.seibun_inner small {
  font-size: 80%;
}

.btn_seibun {
  height: 38px;
  /*56*/
  font-size: 18px !important;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #000;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 10%;
  z-index: 2;
  border: 2px solid;
  cursor: pointer;
}

.btn_seibun .icon {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  position: relative;
  margin-left: 0.6em;
}

.btn_seibun .icon i {
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

.btn_seibun .icon .i1 {
  transform: rotate(90deg);
}

/* cnt4 */
.cnt4 .cnt4_ttl {
  position: absolute;
  left: 0;
  top: 0.35%;
}
.cnt4 .cnt4_box1 {
  width: 89.33%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 3.23%;
}
.cnt4 .cnt4_box2 {
  width: 89.33%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 17.68%;
}
.cnt4 .cnt4_img1 {
  width: 89.33%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 36.51%;
}
.cnt4 .cnt4_box3 {
  width: 89.33%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 42.03%;
}
.cnt4 .cnt4_box4 {
  width: 89.33%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 66.59%;
}
.cnt4 .cnt4_img2 {
  width: 89.33%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 84.52%;
}

.extra_cnt {
  background: #fff;
}

@media (min-width: 768px) {
  .lp_cnt {
    width: 600px;
    margin: auto;
    padding-bottom: 60px;
  }
  .pc_bg {
    width: 100vw;
    height: 100vh;
    background: url(pc_bg.webp) no-repeat center top;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  
  .cart button:hover {
    cursor: pointer;
    opacity: 1;
    transition: 0.2s;
  }
  .cart button {
    opacity: 0.8;
    transition: 0.2s;
  }
  
  .extra_cnt {
    padding: 2px 60px;
    box-shadow: 5px 5px 20px rgba(58,110,165,0.3);
  }
}

@media (max-width: 767px) {
  .fv2 {
    margin-top: -13.33vw;
  }
  .cnt2_2 {
    margin-top: -13.33vw;
  }
  .cnt2 .box .decagon {
    top: -4.4vw;
    left: -5.33vw;
  }
  /* cnt3 */
  .cnt3,
  .cart_area {
    height: 217.6vw;
  }
  .cart1 li {
    font-size: 2.67vw;
  }
  .cnt3_bottom {
    padding-bottom: 12.8vw;
  }
  .seibun_inner {
    height: 26.67vw;
  }
  .seibun_inner p {
    font-size: 3.73vw;
  }
  .seibun_inner .midasi {
    font-size: 2.53vw;
  }
  .seibun_inner p {
    font-size: 2.4vw;
  }
  .btn_seibun {
    height: 7.47vw;
    font-size: 2.67vw !important;
  }

  .extra_cnt {
    padding: 8vw 5.3vw 1px;
  }
}