@charset "UTF-8";
/* エッセンスボール */
#essenceball h1, #essenceball h2, #essenceball h3, #essenceball h4, #essenceball a {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0;
}
#essenceball img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
#essenceball a {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  display: inline-block;
}
#essenceball a:hover {
  -webkit-transform: translate3d(0, 3px, 0);
          transform: translate3d(0, 3px, 0);
}
#essenceball li {
  line-height: 0;
}
#essenceball {
  margin-bottom: 8%;
}
/* section.cv_area */
#essenceball section.cv_area .sub_ttl {
  padding: 0 12% 5%;
}
#essenceball section.cv_area {
  background: url("/img/usr/static/essenceball/cv_bg.jpg") no-repeat 0 0;
  background-size: 100%;
  padding: 8% 5%;
}
#essenceball section.cv_area .cv_block {
  background: #fff;
  padding: 3% 0 6%;
}
#essenceball section.cv_area .cv_item {
  padding: 5% 5% 0% 13%;
  margin-bottom: -11.5%;
}
#essenceball section.cv_area .cv_name {
  padding: 0 20% 6%;
}
#essenceball section.cv_area .cv_btn {
  padding: 0 4% 0 8%;
}
/* section.sec02 */
#essenceball section.sec02 {
  background: url("/img/usr/static/essenceball/sec02_bg.jpg") no-repeat 0 0;
  background-size: contain;
  padding: 0 0 64.5%;
  position: relative;
}
#essenceball section.sec02 .sec02_ttl {
  padding: 16.5% 5.5% 14%;
}
#essenceball section.sec02 .sec02_lead {
  padding: 0 47% 0 10%;
}
#essenceball section.sec02 .sec02_ball {
  position: absolute;
  width: 42%;
  top: -8.2%;
  right: 2%;
}
/* section.sec03 */
#essenceball section.sec03 {
  margin-top: -15%;
  position: relative;
  z-index: 1;
}
/* section.point */
#essenceball section.point {
  background: url("/img/usr/static/essenceball/point_bg.jpg") no-repeat 0 0;
  background-size: contain;
  padding-top: 10%;
  background-size: 100%;
}
#essenceball section.point .point01 h2 {
  padding: 25% 14.2% 2%;
}
#essenceball section.point .point01 .lead {
  padding: 0 16% 35%;
}
#essenceball section.point .point01 .about {
  padding: 0 6% 10% 7%;
}
#essenceball section.point .point02 h2 {
  padding: 24% 18% 6%;
}
#essenceball section.point .point02 .lead {
  padding: 0 11% 16.5%;
}
#essenceball section.point .point02 .ingre01 {
  padding: 0 1% 13.5% 2%;
}
#essenceball section.point .point02 .ingre02 {
  padding: 0 0 4.5% 9%;
}
#essenceball section.point .point02 .ingre03 {
  padding: 0 8.5% 5% 0;
}
#essenceball section.point .point02 .ingre04 {
  padding: 0 4.5% 16.5% 6%;
}
/* section.free */
#essenceball section.free {
  margin-top: -15%;
}
/* section.pack */
#essenceball section.pack {
  background: url("/img/usr/static/essenceball/pack_bg.jpg") no-repeat 0 0;
  background-size: contain;
  position: relative;
  padding: 13% 0 10% 8%;
}
#essenceball section.pack .blister {
  position: absolute;
  top: -8%;
  left: 0;
  width: 46%;
}
/* section.howto */
#essenceball section.howto {
  padding: 7% 0;
}
#essenceball section.howto h3 {
  padding: 0 8% 9.5%;
}
#essenceball section.howto .use {
  padding: 0 8% 6.5%;
}
#essenceball section.howto li {
  padding: 0 8% 3.5% 7%;
}
#essenceball section.howto li:last-of-type {
  margin-top: -3%;
  margin-bottom: 4.5%;
}
#essenceball section.howto .note {
  padding: 0 7% 1%;
}
/* section.recommend */
#essenceball section.recommend {
  background: url("/img/usr/static/essenceball/recomme_bg.jpg") no-repeat 0 0;
  background-size: 100% 100%;
  padding: 12% 4.8% 7%;
}
#essenceball section.recommend h3 {
  padding: 0 14.5% 10%;
}
#essenceball section.recommend li {
  padding: 8.5% 4.5% 5%;
  margin-bottom: 5.5%;
  position: relative;
  z-index: 1;
}
#essenceball section.recommend li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
  border-radius: 15px;
  background: linear-gradient(135deg, #83b7e0 0%, #83b7e0 35%, #ff9fb3 98%, #ff9fb3 100%);
}
#essenceball section.recommend li::after {
  content: "";
  position: absolute;
  /* ボックスのサイズから線として出したい部分の分だけ小さくする */
  /* border-size: 2px にしたいときは2*2px（上下or左右の分） */
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  top: 3px;
  left: 3px;
  z-index: -1;
  border-radius: 15px;
  background: white;
}
#essenceball section.recommend li:first-of-type {
  padding: 10.5% 4.5% 7.5%;
}
#essenceball section.recommend .recomme_btn {
  padding: 5% 15% 4.5%;
}
#essenceball section.recommend .recomme_note {
  padding: 0 2% 0 37%;
}
/* section.caution */
#essenceball section.caution {
  background: #f7f7f7;
  padding: 8% 5%;
}

@media screen and (min-width: 761px) {
  #essenceball {
    width: 100%;
  }
  #essenceball .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);
  }
  #essenceball img {
    width: 100%;
  }
}
/* 商品ページ */
.block-goods-comment1 #essenceball {
  padding-top: 10%;
}
.block-goods-comment1 #essenceball .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);
}