@charset "UTF-8";
/* 392 美容液まとめ割り */
.hdr392 h2{margin: 0; padding: 0;}

.hdr392 {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  font-family: Roboto, "Noto Sans JP", sans-serif, "Droid Sans", "游ゴシック体", "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #725757;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  background: url("../../../../../images/pages/f-static/campaign/392/392_hdr_bg.jpg") top center repeat;
	background-size: cover;}

.hdr392_2 {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  font-family: Roboto, "Noto Sans JP", sans-serif, "Droid Sans", "游ゴシック体", "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #725757;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  background: url("../../../../../images/pages/f-static/campaign/392/392_hdr_bg2.jpg") top center repeat;
	background-size: cover;}


.hdr392_in{width: 1200px; margin: auto;position: relative;height: 850px;}
.hdr392_in .ttl{position: absolute; top: 130px; left: -30px;width: 500px;}
.hdr392_in .att{position: absolute; top: 580px; left: -65px;text-align: center;}
.hdr392_in .img{position: absolute; top: 80px;right: -90px;width: 780px;}

.con01_392{height: 750px;}
.con01_392 .ttl{text-align: center; padding: 20px;margin: 50px auto 80px auto;color: #725757;font-size: 30px; letter-spacing: 0.15em; text-align: center;position: relative;}
.con01_392 h3{position: absolute;z-index: 3;  left: 50%; transform: translate(-50%, -50%);font-size: 30px;}
.con01_392 .icon{width: 170px; position: absolute; top: -110px;left: 290px;z-index: 2;}
.con01_392 ul{display: flex;}
.con01_392 ul>li{display: flex;align-items:stretch;}
.con01_392 li{ width:calc(100%/3);z-index: 1;flex-direction:column;margin-right: 50px; background-color: #ffffff;}
.con01_392 li:nth-child(3n) {margin-right: 0px;}
.con01_392 img{width: 100%;}
.con01_392 .bg{  background-image: linear-gradient(90deg, #d9cdec, #e2f5fb);height: 400px;width: 100%; position: absolute; bottom: 0px; }
.con01_392 .att{z-index: 3; position: relative;color: #000000;}


.combi_392_ttl{background-color: #e280a9;color: #ffffff;font-weight: bolder; text-align: center;padding: 15px 0 ;letter-spacing: 0.15em;font-size: 21px;line-height:1.8em;}
.combi_392{padding: 20px;background-color: #ffffff;}
.combi_392 .box{display: flex; margin-bottom: 10px;}
.combi_392 .box_in{background-color: #f6f6f6;padding: 10px 5px 5px 5px; width: 100%;font-size: 12px;}
.combi_392 .price{letter-spacing: 0.08em;line-height: 3em;position: relative;}
.combi_392 .price b{color: #e280a9;}
.combi_392 .big{font-size: 44px;}
.combi_392 .off{width: 170px; position: absolute; top: 10px; right: -5px;}

.con02_392{height: auto; padding-bottom: 200px;}
.con02_392 .ttl2{text-align: center; padding: 20px;margin: 50px auto 80px auto;color: #725757;font-size: 30px; letter-spacing: 0.15em; position: relative;}
.con02_392 h3{position: absolute;z-index: 3;  left: 50%; transform: translate(-50%, -50%);font-size: 30px;}
.con02_392 .icon{width: 170px; position: absolute; top: -110px;left: 290px;z-index: 2;}

.con02_392 ul{display: flex;justify-content:space-between;line-height: 1.5em;}
.con02_392 li{ width:calc(100%/4);z-index: 1;height: auto; flex-direction:column;margin-right: 50px;}
.con02_392 li:nth-child(4n) {margin-right: 0px;}
.con02_392 img{width: 100%;height: auto;}
.con02_392 li .ttl{font-size: 18px; font-weight: bold;margin-bottom: 5px;}	
.con02_392 .pr{position: relative;}
.con02_392 .pa{position: absolute;z-index: 3;}


@media (max-width: 768px) {
.hdr392 {
  background: url("../../../../../images/pages/f-static/campaign/392/392_hdr_bgs.jpg") top center repeat;}	
	
	
	
.hdr392_in{width: 100% ; height: auto;position: static; margin: auto !important;}
.hdr392_in .ttl{position: static; width: 95%; margin: 25px auto 0 auto; }
.hdr392_in .att{position: static; text-align: center; margin-top: 10px;line-height: 1.2em;}
.hdr392_in .img{position: static; width: 100%; margin: 20px auto 0 auto;}		
	
.con01_392{height: auto;}
.con01_392 .ttl{width: 100%; text-align: center; padding: 10px;margin: 50px auto 30px auto;line-height: 1.2em;font-size: 10px;;position: static;}
.con01_392 h3{font-size: 20px;position: static; left: 00%; transform: translate(-0%, -0%);}	
.con01_392 .icon{display: none;}	
.con01_392 ul{display:block; }
.con01_392 li{ width:100%;height: auto; margin-bottom: 50px; z-index: 2 ;position: relative;}
.combi_392 .off{width: 150px; position: absolute; top: 0px; right: -10px;}	
.con01_392 .bg{z-index: 1 ;}
	
.combi_392_ttl{font-size: 18px;line-height:1.5em;padding: 15px 0 10px 0 ;}
.combi_392 .big{font-size: 30px;}
.combi_392 .box_in{line-height: 1.5em;}	
.combi_392 .price{line-height: 2em;}	
	
.con02_392{height: auto;padding-bottom: 100px;}
.con02_392 .ttl2{width: 100%; text-align: center; padding: 10px;margin: 50px auto 30px auto;line-height: 1.2em;font-size: 10px;;position: static;}
.con02_392 h3{font-size: 20px;position: static; left: 00%; transform: translate(-0%, -0%);}	
.con02_392 .icon{display: none;}	
	
.con02_392 ul{display: flex;justify-content:space-between; flex-wrap: wrap;}	
.con02_392 li{ width:48%;height: auto;margin:0 10px 50px 0;}
.con02_392 li:nth-child(2n) {margin-right: 0px; }
.con02_392 li img{width: 100%;height: auto;}
.con02_392 li .ttl{font-size: 14px;line-height: 1.3em;}	
.con02_392 .txt{font-size: 13px; line-height: 1.3em;}	

}



/*------------------------------------------------------------
共通
------------------------------------------------------------*/
html {
  font-size: 62.5%; }

#wrapper img {
  vertical-align: bottom;
  border: none; }
#wrapper li {
  list-style: none; }

/*------------------------------------------------------------
共通クラス
------------------------------------------------------------*/
.pc_only {
  display: block; }

.sp_only {
  display: none; }

.w100{width: 100% !important;}

@media screen and (max-width: 768px) {
  .pc_only {
    display: none; }

  .sp_only {
    display: block; }
    .sp_only.dis_in {
      display: inline; } }

.price {
  line-height: 1;
  letter-spacing: 0.1em; }
  .price .num {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 3.12rem; }
  .price .en {
    font-size: 2.1rem;
    font-weight: 100; }
  .price .zei {
    padding-right: 5px;
    font-size: 1.5rem;
    font-weight: 100; }
  .price.mini .zei {
    padding-right: 5px;
    font-size: 1.6rem; }
  .price.mini .num {
    font-size: 2.6rem; }
  .price.mini .en {
    font-size: 2.0rem; }

@media screen and (max-width: 768px) {
  .price .zei {
    padding-right: 0.5333333333vw;
    font-size: 3.2vw;
    letter-spacing: 0.05em; }
  .price .num {
    font-size: 6.8vw;
    letter-spacing: 0.05em; }
  .price .en {
    font-size: 4.5333333333vw; }
  .price.mini .zei {
    padding-right: 5px;
    font-size: 2.9333333333vw; }
  .price.mini .num {
    font-size: 5.0666666667vw; }
  .price.mini .en {
    font-size: 2.0rem;
    font-size: 3.7333333333vw; } }
.btn_style {
  width: 230px;
  height: 60px;
  background: #444;
  letter-spacing: 0.15em;
  border: 1px solid #444;
  box-sizing: border-box;
  transition: all .3s 0s ease-in-out;
  text-align: center; }
  .btn_style.mini {
    width: 100%;
    height: 50px; }
    .btn_style.mini > a, .btn_style.mini > span {
      font-size: 1.5rem; }
      .btn_style.mini > a span, .btn_style.mini > span span {
        padding-left: 35px; }
  .btn_style.off {
    background: #ccc;
    border: 1px solid #ccc; }
  .btn_style:not(.btn_style.off):hover {
    background: #fff; }
    .btn_style:not(.btn_style.off):hover > a, .btn_style:not(.btn_style.off):hover > span {
      color: #444; }
  .btn_style > a, .btn_style > span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: bold;
    font-size: 14px; }
    .btn_style > a span, .btn_style > span span {
      position: relative;
      padding-left: 40px;
      text-align: center; }
      .btn_style > a span:before, .btn_style > span span:before {
        display: block;
        content: '';
        width: 23px;
        height: 17px;
        background: url("https://www.haba.co.jp/assets/images/pages/f-static/campaign/307/icon_cart.png") left top no-repeat;
        background-size: 23px 17px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate3d(0, -50%, 0); }

.btn_style:not(.btn_style.off):hover > a span:before, .btn_style:not(.btn_style.off):hover > span span:before {
  background: url("https://www.haba.co.jp/assets/images/pages/f-static/campaign/307/icon_cart_b.png") left top no-repeat;
  background-size: 23px 17px; }

@media screen and (max-width: 768px) {
  .btn_style {
    height: 14.6666666667vw;
    width: 100%; }
    .btn_style.mini {
      height: 12vw; }
      .btn_style.mini > a, .btn_style.mini > span {
        font-size: 1.3rem; }
        .btn_style.mini > a span, .btn_style.mini > span span {
          padding-left: 40px; }
    .btn_style > a, .btn_style > span {
      font-size: 1.5rem; }
      .btn_style > a span, .btn_style > span span {
        padding-left: 32px; }
        .btn_style > a span:before, .btn_style > span span:before {
          width: 20px;
          height: 15px;
          background: url("https://www.haba.co.jp/assets/images/pages/f-static/campaign/307/icon_cart.png") left top no-repeat;
          background-size: 20px 15px; }

  .btn_style:not(.btn_style.off):hover > a span:before, .btn_style:not(.btn_style.off):hover > span span:before {
    background: url("https://www.haba.co.jp/assets/images/pages/f-static/campaign/307/icon_cart_b.png") left top no-repeat;
    background-size: 20px 15px; } }
.label_limit_style {
  font-size: 1.5rem;
  border: 1px solid #cb2e60;
  line-height: 18px;
  line-height: 1;
  margin-right: 13px;
  box-sizing: border-box;
  color: #cb2e60;
  font-weight: 600;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 7px 3px 9px;
  white-space: nowrap; }



@media screen and (max-width: 768px) {
  .label_limit_style {
    border: 1px solid #cb2e60;
    font-size: 3.2vw;
    letter-spacing: 0.05em;
    padding: 4px 1.3333333333vw 3px 1.6vw;
    margin-right: 2.6666666667vw;
    margin-bottom: 2px; } }
.sub {
  font-size: 55%;
  vertical-align: top;
  position: relative;
  top: 0.3em;
  letter-spacing: 0;
  font-weight: 100; }
  .sub.big {
    font-size: 45%;
    padding-right: 3px; }
  .sub.mini {
    top: 0.1em; }

@media screen and (max-width: 768px) {
  .sub {
    padding-right: 1px; }
    .sub.big {
      top: 0.4em;
      padding-right: 2px; } }
.mini_txt_style {
  line-height: 1.5;
  font-size: 1.1rem;
  letter-spacing: 0.0em;
  font-weight: 100;
  opacity: 0.9; }

@media screen and (max-width: 768px) {
  .mini_txt_style {
    font-size: 3.2vw;
    line-height: 1.3;
    letter-spacing: 0; } }

@media screen and (max-width: 768px) { }
.l-footer {
  margin: 0 0 0 !important; }