@charset "utf-8";
/*==============================================================

	index

================================================================*/
.rescueTop {
  position: relative;
}


.rescueTop sup {
  vertical-align: super;
  font-size: 12px;
}

/*  FV
---------------------------------------------*/
.secFv {
  position: relative;
}

.secFv img {
  width: 100%;
}

.secFv__logo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 22%;
  margin: 0 auto;
}

.secFv__wrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.secFv__block {
  width: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 16px solid #f5f4f2;
  border-left: 16px solid #f5f4f2;
  border-right: 16px solid #f5f4f2;
}

.secFv__block img {
  width: 100%;
}

.secFv__block.-right {
  border-top: 16px solid #d9bf79;
  border-left: 16px solid #d9bf79;
  border-right: 16px solid #d9bf79;  
}

.secFv__mobile {
  display: none;
}

.secFv .bgCloud {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

@media screen and (max-width:768px){
  .secFv {
    position: relative;
    padding: 16px 16px 0;
    background:linear-gradient(90deg,#f5f4f2 0%,#f5f4f2 50%,#d9bf79 50%,#d9bf79 100%);
  }
  .secFv__mobile {
    display: block;
  }
}

@media screen and (max-width:480px){
  .secFv {
    padding: 8px 8px 0;
  }
}

/*  コンテンツ背景
---------------------------------------------*/
.contentWrap {
  position: relative;
  background:linear-gradient(90deg,#f5f4f2 0%,#f5f4f2 50%,#d9bf79 50%,#d9bf79 100%); 
  padding: 60px 0;
}

.contentWrap::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 50%;
  height: 100%;
  background-image: url(/images/rescue/common/bg-star_pc.png);
  background-position: top center;
  background-size: 100% auto; 
  background-repeat: repeat-y:
}

/*  animations
---------------------------------------------*/
.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.8s;	
	-webkit-animation-duration: 1.8s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(8%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(8%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

.hatch{
	animation-name: hatch;
	-webkit-animation-name: hatch;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 

	visibility: visible !important;		
}

@keyframes hatch {
	0% {
		transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		transform: rotate(2deg) scaleY(1);
	}
	50% {
		transform: rotate(-2deg);
	}	
	65% {
		transform: rotate(1deg);
	}	
	80% {
		transform: rotate(-1deg);
	}		
	100% {
		transform: rotate(0deg);
	}									
}

@-webkit-keyframes hatch {
	0% {
		-webkit-transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		-webkit-transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		-webkit-transform: rotate(2deg) scaleY(1);
	}
	50% {
		-webkit-transform: rotate(-2deg);
	}	
	65% {
		-webkit-transform: rotate(1deg);
	}	
	80% {
		-webkit-transform: rotate(-1deg);
	}		
	100% {
		-webkit-transform: rotate(0deg);
	}		
}

.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;	

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);	
	}						
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);	
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);	
	}				
}

.tossing2{
	animation-name: tossing2;
	-webkit-animation-name: tossing2;	

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing2 {
	0% {
		transform: rotate(4deg);	
	}
	50% {
		transform: rotate(-4deg);
	}
	100% {
		transform: rotate(4deg);	
	}						
}

@-webkit-keyframes tossing2 {
	0% {
		-webkit-transform: rotate(4deg);	
	}
	50% {
		-webkit-transform: rotate(-4deg);
	}
	100% {
		-webkit-transform: rotate(4deg);	
	}				
}

/*  ポイント
---------------------------------------------*/
#index #section02 {
  background: none;
  height: auto;
  padding-bottom: 2%;
  margin: -4% 0 0;
}

.sec_point {
  position: relative;
  width: 965px;
  min-height: 760px;
  margin: 0 auto;
  background-image: url(/images/rescue/top/bg-ani_pc.png);
  background-size: 100% auto;
  background-position: top center;
}

.box_balloon {
  width: 650px;
  margin: 0 auto;
  padding: 100px 0 0;
}

.box_anime {
  position: absolute;
  top: 37.5%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);   
  width: 354px;
  margin: 0 auto;
}

.sec_point__text {
  max-width: 514px;
  margin: 60px auto 0;
}

@media screen and (max-width:768px){
  #index #section02 {
    background: none;
    height: auto;
    padding-bottom: 14%;
    margin: -8% 0 0;
  }

  .sec_point {
    position: relative;
    width: 100%;
    min-height: 740px;
    margin: 0 auto;
    background-image: url(/images/rescue/top/bg-ani_tb.png);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  .box_balloon {  
    width: 70%;
    margin: 0 auto 0;
    padding:  10% 0 0;
  }

  .box_anime {
    position: absolute;
    top: 40%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);   
    width: 40%;
    margin: 0 auto;
  }

  .sec_point__text {
    max-width: 514px;
    margin: 7% auto 0;
  }  
}

@media screen and (max-width:480px){
  #index #section02 {
    background: none;
    height: auto;
    padding-bottom: 14%;
    margin: -14% 0 0%;
  }

  .sec_point {
    position: relative;
    width: 100%;
    min-height: inherit;
    margin: 0 auto;
    background-image: url(/images/rescue/top/bg-ani_tb.png);
    background-size: 108% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }

  .box_balloon {  
    width: 90%;
    margin: 0 auto 0;
    padding:  6% 0 0;
  }

  .box_anime {
    position: absolute;
    top: 28%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);   
    width: 40%;
    margin: 0 auto;
  }

  .sec_point__text {
    max-width: 270px;
    margin: 7% auto 0;
  }  
}

/*  保湿
---------------------------------------------*/
.sec_hoshitsu {
  position: relative;
}

.sec_hoshitsu figure img {
  width: 100%;
}

.sec_hoshitsu__title {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  width: 160px;
  margin: 0 auto 0;
}

.sec_hoshitsu__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);   
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  min-width: 900px;
  max-width: 1025px;
}

.sec_hoshitsu__img {
  position: relative;
  width: 45%;
}

.sec_hoshitsu__img .drop01 {
  position: absolute;
  top: 0;
  width: 168px;
}

.sec_hoshitsu__img .drop02 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 108px;
}

.sec_hoshitsu__img img {
  width: 100%;
}

.sec_hoshitsu__text {
  width: 50%;
}

.sec_hoshitsu__float {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  padding-top: 5%;
}

.sec_hoshitsu__float .float__text {
  width: 78%;
  padding-top: 7%;
}

.sec_hoshitsu__float .float__text {
	animation: translate1 1s ease-in-out 0s infinite alternate none running;
}
@keyframes translate1 {
	0% {
		transform: translateY(-3px);
	}
	100% {
		transform: translateY(3px);
	}
}

.sec_hoshitsu__float .float__img {
  position: relative;
  width: 20%;
}

.sec_hoshitsu__text02 {
  padding-left: 5%;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  font-size: 24px;
}

.sec_hoshitsu__text03 {
  padding-top: 12%;
  max-width: 503px;
}

@media screen and (max-width:768px){
  .sec_hoshitsu {
    position: relative;
  }

  .sec_hoshitsu figure img {
    width: 100%;
  }

  .sec_hoshitsu__title {
    position: absolute;
    top: -5%;
    left: 0;
    right: 0;
    width: 160px;
    margin: 0 auto 0;
  }

  .sec_hoshitsu__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);   
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
    min-width: inherit;
    max-width: 70%;
    width: 70%;
    margin: 0 auto;
  }

  .sec_hoshitsu__img {
    width: 75%;
    margin: 12% auto 0;
  }

  .sec_hoshitsu__img img {
    width: 100%;
  }
  
  
  .sec_hoshitsu__img .drop01 {
    position: absolute;
    top: 0;
    width: 35%;
    max-width: 153px;
  }

  .sec_hoshitsu__img .drop02 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    max-width: 98px;
  }  

  .sec_hoshitsu__text {
    width: 100%;
  }

  .sec_hoshitsu__float {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    padding-top: 5%;
  }

  .sec_hoshitsu__float .float__text {
    width: 78%;
    padding-top: 7%;
  }

  .sec_hoshitsu__float .float__img {
    position: relative;
    width: 20%;
  }

  .sec_hoshitsu__text02 {
    padding-left: 5%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    font-size: 24px;
  }

  .sec_hoshitsu__text03 {
    padding-top: 12%;
    max-width: 503px;
  }  
}

@media screen and (max-width:480px){
  .sec_hoshitsu {
    position: relative;
  }

  .sec_hoshitsu figure img {
    width: 100%;
  }

  .sec_hoshitsu__title {
    position: absolute;
    top: -7%;
    left: 0;
    right: 0;
    width: 140px;
    margin: 0 auto 0;
  }

  .sec_hoshitsu__inner {
    position: absolute;
    top: 52%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);   
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
    min-width: inherit;
    max-width: 85%;
    width: 85%;
    margin: 0 auto;
  }

  .sec_hoshitsu__img {
    width: 90%;
    margin: 12% auto 0;
  }  

  .sec_hoshitsu__img img {
    width: 100%;
  }
  
  .sec_hoshitsu__img .drop01 {
    position: absolute;
    top: 0;
    width: 35%;
    max-width: 150px;
  }

  .sec_hoshitsu__img .drop02 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    max-width: 72px;
  }   

  .sec_hoshitsu__text {
    width: 100%;
  }

  .sec_hoshitsu__float {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    padding-top: 5%;
  }

  .sec_hoshitsu__float .float__text {
    width: 79%;
    padding-top: 7%;
  }

  .sec_hoshitsu__float .float__img {
    position: relative;
    width: 20%;
  }

  .sec_hoshitsu__text02 {
    padding-left: 0%;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    font-size: 18px;
  }

  .sec_hoshitsu__text03 {
    padding-top: 15%;
    max-width: 503px;
  }   
}

/*  ラインナップ
---------------------------------------------*/
.sec_lineup {
  position: relative;
  max-width: 680px;
  margin: 100px auto 0;
}

.sec_lineup__title {
  max-width: 424px;
  margin: 0 auto;
}

.sec_lineup__left {
  position: absolute;
  top: 20%;
  left: 0;
}

.sec_lineup__right {
  position: absolute;
  top: 20%;
  right: 0;
}

.sec_lineup__inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.sec_lineup__item {
  padding: 0 0 0 8%;
}

.sec_lineup__item:last-child {
  padding: 0 8% 0 0;
}

@media screen and (max-width:480px){
  .sec_lineup {
    position: relative;
    max-width: 100%;
    margin: 60px auto 0;
    padding: 0 4%;
  }

  .sec_lineup__title {
    max-width: 310px;
    margin: 0 auto;
  }

  .sec_lineup__left {
    position: absolute;
    top: 44%;
    left: 5%;
    max-width: 52px;
  }

  .sec_lineup__right {
    position: absolute;
    top: 44%;
    right: 5%;
    max-width: 52px;
  }

  .sec_lineup__inner {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin: 4% auto 0;
  }

  .sec_lineup__item {
    padding: 0 0 0 8%;
  }

  .sec_lineup__item:last-child {
    padding: 0 8% 0 0;
  }  
}


/*  商品一覧
---------------------------------------------*/
.bgCloudProduct {
  position: relative;
  z-index: 10;
}

.bgCloudProduct figure img {
  width: 100%;
}

.bgCloudTop {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 11.1273792vw;
  background-image: url(/images/rescue/common/bg-footer-cloud_pc.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;
}

.sec_product {
  position: relative;
  z-index: 1;
  margin: -10% 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 16px solid #f5f4f2;
  border-right: 16px solid #d9bf79;
}

.sec_product__block {
  position: relative;
}

.sec_product__title {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  max-width: 556px;
  margin: 0 auto;
}

.sec_product__inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.sec_product__item {
  width: 33.333%;
  min-height: 1020px;
  padding: 400px 0 0;
  background: #e61869;
  text-align: center;
}

.sec_product__inner.-otona .sec_product__item {
  min-height: 1170px;
}

.sec_product__item.-vitamin {
  background-image: url(/images/rescue/top/bg-prodauct-vitamin_pc.jpg);
  background-size: cover;
}

.sec_product__item.-off {
  background-image: url(/images/rescue/top/bg-prodauct-off_pc.jpg);
  background-size: cover;
}

.sec_product__item.-otonahoshitsu {
  background-image: url(/images/rescue/top/bg-prodauct-otonahoshitsu_pc.jpg);
  background-size: cover;
}

.sec_product__item.-otonahari {
  background-image: url(/images/rescue/top/bg-prodauct-otonahari_pc.jpg);
  background-size: cover;
}

.sec_product__item.-otonaoff {
  background-image: url(/images/rescue/top/bg-prodauct-otonaoff_pc.jpg);
  background-size: cover;
}

.sec_product__item img {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.item__head img {
  width: 69.5%;
  min-width: 225px;
  max-width: 650px;
}

.item__content {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  margin-top: 17px;
}

.item__productimg img {
  width: 58%;
  min-width: 170px;
  max-width: 230px;
}

.item__producttxt {
  margin: 14px 0 35px;
  text-align: center;
}

.product__name {
  width: 52.055%;
  min-width: 155px;
  max-width: 190px;
}

.item__producttxt a {
  display: block;
}

.product__detail img,
.product__buy img {
  width: 63.195%;
  min-width: 155px;
  max-width: 180px;
}

.product__detail {
  margin-top: 11px;
  margin-bottom: 13px;
}

.sec_product__sp {
  display: none;
}

@media screen and (max-width:768px){
  .sec_product {
    margin: -14% 0 -14%;
  }

  .sec_product__item {
    min-height: 890px;
  }

  .sec_product__inner.-otona .sec_product__item {
    min-height: 1000px;
  }

  .sec_product__item.-vitamin {
    background-image: url(/images/rescue/top/bg-prodauct-vitamin_tb.jpg);
  }

  .sec_product__item.-off {
    background-image: url(/images/rescue/top/bg-prodauct-off_tb.jpg);
  }

  .sec_product__item.-otonahoshitsu {
    background-image: url(/images/rescue/top/bg-prodauct-otonahoshitsu_tb.jpg);
  }

  .sec_product__item.-otonahari {
    background-image: url(/images/rescue/top/bg-prodauct-otonahari_tb.jpg);
  }

  .sec_product__item.-otonaoff {
    background-image: url(/images/rescue/top/bg-prodauct-otonaoff_tb.jpg);
  }  
}

@media screen and (max-width:480px){
  .sec_product {
    position: relative;
    z-index: 1;
    margin: -13% 0 -19%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 6px solid #f5f4f2;
    border-right: 6px solid #d9bf79;
  }
  .sec_product__pctb {
    display: none;
  }
  .sec_product__sp {
    display: block;
  }

  .sp_product__title {
    position: relative;
    z-index: 10;
    margin-bottom: -5%;
  }

  .sec_product__inner {
    flex-direction: column;
  }

  .sec_product__item {
    width: 100%;
    min-height: auto;
    padding: 50px 34px;
  }

  .sec_product__inner.-otona .sec_product__item {
    min-height: auto;
  }

  .sec_product__item.-vitamin {
    background-image: url(/images/rescue/top/bg-prodauct-vitamin_sp.jpg);
  }

  .sec_product__item.-off {
    background-image: url(/images/rescue/top/bg-prodauct-off_sp.jpg);
  }

  .sec_product__item.-otonahoshitsu {
    background-image: url(/images/rescue/top/bg-prodauct-otonahoshitsu_sp.jpg);
  }

  .sec_product__item.-otonahari {
    background-image: url(/images/rescue/top/bg-prodauct-otonahari_sp.jpg);
  }

  .sec_product__item.-otonaoff {
    background-image: url(/images/rescue/top/bg-prodauct-otonaoff_sp.jpg);
    padding: 50px 34px 100px;
  }

  .item__head img {
    width: 87.5%;
    max-width: 280px;
  }

  .item__content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }

  .sec_product__inner.-otona .item__content {
    margin-top: 30px;
  }

  .item__productimg {
    width: 50%;
    max-width: 150px;
  }

  .item__productimg img {
    width: 100%;
    min-width: auto;
    max-width: none;
  }

  .item__producttxt,
  .product__detail img,
  .product__buy img {
    width: 150px;
  }
  .item__producttxt {
    margin: 0;
    margin-left: 15px;
  }
  .product__name {
    width: 100%;
    min-width: auto;
    max-width: none;
  }
  .product__detail {
    margin-top: 13px;
    margin-bottom: 13px;
  }
}