@charset "UTF-8";
/* 269  スキンケアミニセットプレゼント */
.fv_269{background: linear-gradient(90deg, #e1efef 0%, #e1efef 50%, #d3e6e1 50%, #d3e6e1 100%);}
.fv_269_in{position: relative;width: 1700px;height: auto; margin: auto;}
.fv_269_in .fv_ttl{position: absolute; top: 5%;left: 8%;}
.fv_269_in .fv_att{position: absolute; top: 72%;left: 17%;}
.fv_269s{}

.con_269{overflow: hidden;  background-size: cover; background-position: center center; background-image: url(https://www.haba.co.jp/assets/images/pages/f-static/campaign/269_con01_bg.jpg);width: 100%; height: auto;}
.con_269_in{margin: 100px auto;}
.con_269_bg{background-color: #ffffff;}
.con_269 .txt_box{margin: 50px 60px 60px 10px;}
.con_269 .gray_box{background-color: #f6f6f6; padding: 40px 30px 1px 30px;}
.con_269 .gray_img{margin:0 auto 10px auto;text-align: center;}
.con_269 .gray_img img{width: 75%;}

.step_269{background-color: #ecf5f5;position: relative;}
.step_269_in{padding: 100px 0;}
.step_269 .camp_bnr{position: absolute; top: 5%;  left: 50%; transform: translate(-50%, -50%);}
.step_269 .camp_bnr img{width: 900px;}

.cleansing_269{background: linear-gradient(180deg, #ffffff 0%, #ffffff 90%, #6db3e5 10%, #6db3e5 100%);display: flex; margin-top: 100px;}
.cleansing_269_in{background-color: #f6f6f6; margin: 100px 0 0 0;background-image: url(https://www.haba.co.jp/assets/images/pages/f-static/campaign/269_step1_img01.jpg);width: 100%;padding: 100px 100px 50px 100px;position: relative;}
.cleansing_269_ttl{position: absolute;top: -50px;left: -40px;width: 350px;}
.cleansing_269_txt{padding: 15px 25px;color: #5297c8;}

.lotion_269{background: linear-gradient(180deg, #ffffff 0%, #ffffff 90%, #d8d04e 10%, #d8d04e 100%);display: flex; margin-top: 100px;}
.lotion_269_in{background-color: #f6f6f6; margin: 100px 0 0 0;background-image: url(https://www.haba.co.jp/assets/images/pages/f-static/campaign/269_step2_img01.jpg);width: 100%;padding: 100px 100px 50px 100px;position: relative;}
.lotion_269_ttl{position: absolute;top: -50px;left: -40px;width: 350px;}
.lotion_269_txt{padding: 15px 60px;color: #a8a021;}

.sq_269{background: linear-gradient(180deg, #ffffff 0%, #ffffff 90%, #7dd1cf 10%, #7dd1cf 100%);display: flex; margin-top: 100px;}
.sq_269_in{background-color: #f6f6f6; margin: 100px 0 0 0;background-image: url(https://www.haba.co.jp/assets/images/pages/f-static/campaign/269_step3_img01.jpg);width: 100%;padding: 100px 100px 50px 100px;position: relative;}
.sq_269_ttl{position: absolute;top: -50px;left: -40px;width: 350px;}
.sq_269_txt{padding: 15px 40px;color: #5bbab8;}

.campaign-wrap02{background-color: #ffffff;}

.hr_269{width: 90%;margin:20px auto 0 auto;}

h3.three-h3 {
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.15em;
}
p.sub-txt,
span.sub-txt,
div.sub-txt {
    font-size: 16px;	
  line-height: 2;
}

/* 3step用 */

.use-wrap {
  margin:0 auto 20px auto;
  counter-reset: inc;
}
.use-wrap__item {
  position: relative;
  /*display: flex;*/
	display: block;
  justify-content: space-between;
  counter-increment: inc;
}
.use-wrap__item__img {
	width: 100%;
  /*width: 80%;*/
  text-align: center;
}
.use-wrap__item__img img {
  width: 70%;
}
.use-wrap__item__txt {
	width: 100%;	
  /*width: 80%;*/
  font-size: 14px;
  line-height: 2;
  text-align: left;
}
.use-wrap__item__txt .underline {
  display: inline-block;
  border-bottom: 1px solid #444;
}
/*.use-wrap__item::before {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 9;
  width: 30px;
  height: 30px;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  content: counter(inc);
  background: #444;
  border-radius: 50%;
}*/
.use-wrap .use-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42%;
  height: 30px;
  padding-bottom: 0;
}
.use-wrap .use-arrow img {
  -webkit-transform: rotate(90deg) translateX(-13px);
          transform: rotate(90deg) translateX(-13px);
}

/* lineup用 */
.bg-section {
  padding: 40px 0;
  background: #f6f6f6;
}

.products-list {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 25px);
}
.products-list__item {
  position: relative;
  width: calc(50% - 25px);
  margin-right: 25px;
}
.products-list__item img {
  width: 100%;
}
.products-list__item .tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-size: 7.5px;
  font-weight:500;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  background: #70cccc;
  border-radius: 50%;
}
.products-list__txt {
  padding: 25px 0 10px;
}
.products-list__txt .label {
  display: inline-block;
  padding: 5px;
  margin-bottom: 11px;
  font-size: 12px;
  background: #fff;
  border: 1px solid #ddd;
}
.products-list__txt .label:not(:last-child) {
  margin-right: 5px;
}
.products-list__txt .label .kome {
  position: relative;
  top: -5px;
  left: 3px;
  font-size: 10px;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.products-list__txt .name {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 700;
}
.products-list__txt .price {
  font-size: 12px;
  line-height: 2;
  color: #888;
}



/*サイズ・位置調節*/
.w20{ width: 20%; }
.w40{ width: 40%; }
.w80{ width: 80%; }
.w100{ width: 100%; }
.ctrt{ text-align: center; }
.ctrm{ margin: auto;}
.ctr{text-align: center!important;}
.w90pc{width: 90%; margin-left: 5%}


/* バナーエリア */
.bnr__link a{
}
.bnr__link a:hover {
}




/* ここにPC向けのCSS指定 */
@media (min-width: 768px) {
.fv_269s{display: none;}
	
.campaign-wrap02__txt{padding:30px;}	

  h3.three-h3 {
    font-size: 26px;
  }
  p.sub-txt,
span.sub-txt,
div.sub-txt {
    text-align: center;
  }	
	
/* 3step用 */	
  .use-wrap {
    display: flex;
    margin-bottom: 50px;
  }
  .use-wrap__item {
    display: block;
    width: 340px;
  }
  .use-wrap__item__img {
    width: 100%;
  }
  .use-wrap__item__txt {
    width: 100%;
    padding: 15px 0;
    font-size: 15px;
    text-align: center;
  }
  .use-wrap__item::before {
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
  }
  .use-wrap .use-arrow {
    width: 80px;
    height: auto;
    padding-bottom: 90px;
  }
  .use-wrap .use-arrow img {
    -webkit-transform: rotate(0) translateX(0);
            transform: rotate(0) translateX(0);
  }	
	
	
/* lineup用 */	
  .bg-section {
    padding: 80px 0;
  }
  .products-list {
    width: calc(100% + 40px);
  }
  .products-list__item {
    width: calc(25% - 40px);
    margin-right: 40px;
  }
  .products-list__item .tag {
    top: 15px;
    left: 15px;
    width: 60px;
    height: 60px;
    font-size: 12px;
	font-weight: bold;
  }
  .products-list__txt .label {
    padding: 5px 8px;
    font-size: 12px;
  }
  .products-list__txt .name {
    font-size: 18px;
  }
  .products-list__txt .price {
    font-size: 13px;
  }	
	

/* バナーエリア */
.bnr__link a{
 transition: 0.5s;	
}
.bnr__link a:hover {
  opacity:0.5;
  transition: 0.5s;	
}		
	
}





/* ここにSP向けのCSS指定 */
@media (max-width: 768.98px) {
	

.fv_269	{display: none;}
.fv_269s{display: block;vertical-align: bottom;width: 100%;background-color: #e1efef; padding-bottom: 0px;}
.fv_269s img{width: 100%;}
.fv_269s_bnr{bottom: 0;width: 100%;margin: auto;border: 1px solid;background-color: #ffffff; }		
.fv_269s_att{padding:10px 30px 30px 30px;}

.step_269_in{padding: 100px 10px;}
	
.use-wrap .use-arrow {
  /*display: flex;*/
	margin-top: 30px;
	display: block;
	text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  padding-bottom: 0;
}	
	
.con_269_in{margin: 100px auto;}	
.con_269 .txt_box{margin: 20px 15px 30px 15px;}	
.con_269_in .campaign-wrap__img{width: 100%;margin-right: 0!important;padding-right: 0!important;}	
.con_269 .gray_box{padding: 20px 15px 15px 15px;}
.con_269_bg{padding-bottom: 1px;}	

.cleansing_269{margin-top: 100px;}	
.cleansing_269_in{margin:  0;background-image: none;width: 100%;padding: 10px;position: relative;}		
.cleansing_269_ttl{display: none;}
	
.lotion_269{margin-top: 100px;}	
.lotion_269_in{margin:  0;background-image: none;width: 100%;padding: 10px;position: relative;}		
.lotion_269_ttl{display: none;}	

.sq_269{margin-top: 100px;}	
.sq_269_in{margin:  0;background-image: none;width: 100%;padding: 10px;position: relative;}		
.sq_269_ttl{display: none;}		
	
.campaign-wrap02__img img{margin: 0;}
.campaign-wrap02__txt{padding:15px 15px 30px 15px;}	

.products-list__item .tag {  top: 3px; left: 3px;font-size: 11px !important;  width: 55px;height: 55px; }	
	
 /*サイズ調節	*/	   

.w100{width: 100%;}
	.w100sp{width: 90%;}
	.w70sp{width: 50%; margin-left: 25%!important;}	

	}