/* フェイスCPHシートパックEX */
@charset "UTF-8";
#cphpack h1, #cphpack h2, #cphpack h3, #cphpack h4, #cphpack a {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0;
}
#cphpack img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
#cphpack a {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  display: inline-block;
}
#cphpack a:hover {
  -webkit-transform: translate3d(0, 3px, 0);
          transform: translate3d(0, 3px, 0);
}
#cphpack li {
  line-height: 0;
}

#cphpack {
  margin-bottom: 8%;
}
/* cv_area */
#cphpack section.cv_area {
  background: url("/img/usr/static/cphpack/cv_bg.jpg") 0 0 no-repeat #d3eefa;
  background-size: contain;
  padding: 100% 14% 9%;
}
#cphpack section.cv_area h2 {
  padding: 0 12% 11.5%;
}
#cphpack section.cv_area .cv_name {
  padding: 0 2% 10.5%;
}
/* gelpack */
#cphpack section.gelpack {
  background: url("/img/usr/static/cphpack/gel_bg.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  padding: 10% 0 9.2%;
}
#cphpack section.gelpack h3 {
  padding: 0 8.5% 64% 11%;
}
#cphpack section.gelpack .gel_txt {
  padding: 0 5% 0 6%;
}
/* recommend */
#cphpack section.recomme {
  background: url("/img/usr/static/cphpack/recomme_bg.png") 0 0 no-repeat;
  background-size: contain;
  padding: 10% 0 24%;
  position: relative;
}
#cphpack section.recomme h5 {
  padding: 0 20%;
}
#cphpack section.recomme .recomme_ex {
  margin-top: -9%;
}
/* point */
#cphpack section.point {
  background: url("/img/usr/static/cphpack/point_bg.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  margin-top: -16%;
  padding-top: 19%;
  padding-bottom: 1.9%;
}
/* point01 */
#cphpack section.point .point01 {
  background: url("/img/usr/static/cphpack/point01_bg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  margin: 0 5%;
  position: relative;
  padding: 28% 5.2% 6.5%;
  margin-bottom: 10%;
}
#cphpack section.point .point01 .p01_pack {
  width: 55.5%;
  position: absolute;
  left: -5.5%;
  top: -12%;
}
#cphpack section.point .point01 h5 {
  margin: 0 auto;
  width: 35%;
  position: absolute;
  top: -3%;
  left: 0;
  right: 0;
}
#cphpack section.point .point01 h2 {
  padding: 0 0 8%;
}
#cphpack section.point .point01 .lead {
  padding: 0 5% 9%;
}
#cphpack section.point .point01 li {
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  opacity: 0.902;
  -webkit-box-shadow: 14.142px 14.142px 42.75px 2.25px rgba(61, 186, 216, 0.24);
          box-shadow: 14.142px 14.142px 42.75px 2.25px rgba(61, 186, 216, 0.24);
  padding: 6.5% 7.5%;
  margin-bottom: 3%;
}
#cphpack section.point .point01 .p01_note {
  width: 39%;
  margin: -1% 0 0 auto;
}
/* point02 */
#cphpack section.point .point02 {
  background: url("/img/usr/static/cphpack/point02_bg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  margin: 0 5%;
  position: relative;
  padding: 28.5% 0 12.7%;
  margin-bottom: 11.5%;
}
#cphpack section.point .point02 h5 {
  margin: auto;
  width: 35%;
  position: absolute;
  top: -3%;
  right: 0;
  left: 0;
}
#cphpack section.point .point02 h2 {
  padding: 0 21.5% 5%;
}
#cphpack section.point .point02 .lead {
  padding: 0 26.5%;
}
#cphpack section.point .point02 ul {
  position: relative;
  padding-bottom: 140%;
}
#cphpack section.point .point02 li {
  position: absolute;
}
#cphpack section.point .point02 li.p02_c {
  width: 58.3%;
  right: -5.5%;
  top: 2.5%;
}
#cphpack section.point .point02 li.p02_p {
  width: 64%;
  left: -4.5%;
  top: 9%;
}
#cphpack section.point .point02 li.p02_h {
  width: 54.6%;
  width: 61%;
  left: -5.5%;
  top: 45.5%;
}
#cphpack section.point .point02 li.p02_w {
  width: 75.7%;
  width: 83.7%;
  right: -5.5%;
  top: 35%;
}
/* point03 */
#cphpack section.point .point03 {
  background: url("/img/usr/static/cphpack/point03_bg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  margin: 0 5%;
  position: relative;
  padding: 28% 0 7%;
  margin-bottom: 11.5%;
}
#cphpack section.point .point03 h5 {
  margin: auto;
  width: 35%;
  position: absolute;
  top: -5%;
  right: 0;
  left: 0;
}
#cphpack section.point .point03 h2 {
  padding: 0 22.5% 6%;
}
#cphpack section.point .point03 .lead {
  padding: 0 5.3% 8%;
}
#cphpack section.point .point03 li {
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  opacity: 0.902;
  -webkit-box-shadow: 14.142px 14.142px 42.75px 2.25px rgba(61, 186, 216, 0.24);
          box-shadow: 14.142px 14.142px 42.75px 2.25px rgba(61, 186, 216, 0.24);
  padding: 5%;
  margin: 0 5.5% 3%;
}
#cphpack section.point .point03 .p03_note {
  width: 13%;
  margin: -2% 6% 0 auto;
}
/* point04 */
#cphpack section.point .point04 {
  background: url("/img/usr/static/cphpack/point04_bg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  margin: 0 5%;
  position: relative;
  padding: 28% 0 7%;
  margin-bottom: 10%;
}
#cphpack section.point .point04 h5 {
  margin: auto;
  width: 35%;
  position: absolute;
  top: -5%;
  right: 0;
  left: 0;
}
#cphpack section.point .point04 h2 {
  padding: 0 8.5% 5.5%;
}
#cphpack section.point .point04 .lead {
  padding: 0 12% 7%;
}
#cphpack section.point .point04 .skincare {
  margin: 0 -1.5% 0 2%;
}
#cphpack section.point .point04 .p04_note {
  width: 63%;
  margin: -4% 5.5% 0 auto;
}
/* herb */
#cphpack section.herb {
  background: #fffef5;
  padding: 10% 8%;
}
#cphpack section.herb .lead {
  padding: 6.5% 0% 0 9.5%;
}
/* howto */
#cphpack section.howto {
  background: url("/img/usr/static/cphpack/howto_bg.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  padding: 9% 5% 12%;
}
#cphpack section.howto .howto_inner {
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  opacity: 0.902;
  -webkit-box-shadow: 0px 0px 40px 0px rgba(61, 186, 216, 0.3);
          box-shadow: 0px 0px 40px 0px rgba(61, 186, 216, 0.3);
  padding: 8% 5% 1%;
}
#cphpack section.howto .howto_inner h3 {
  padding: 0 4% 7.5%;
}
#cphpack section.howto .howto_inner .howto_hc {
  margin: 10% -1.5% 0;
}
/* plus */
#cphpack section.plus {
  background: #ffedf6;
  padding: 10% 6.5% 6%;
}
#cphpack section.plus h5 {
  padding: 0 8% 9%;
}
#cphpack section.plus .block {
  background: #fffdfe;
  padding: 9% 5%;
  margin-bottom: 5%;
}
#cphpack section.plus .block h4 {
  padding: 0 8% 8%;
}
#cphpack section.plus .block .plus_btn {
  padding: 10% 12% 0;
}

@media screen and (min-width: 761px) {
  #cphpack {
    width: 100%;
  }
  #cphpack .inner_content {
    width: min(100%, 760px);
    margin: auto;
    background: #fff;
    -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
  }
}
/* 商品ページ */
.block-goods-comment1 #cphpack .inner_content {
  width: min(100%, 680px);
  -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
}
