@charset "UTF-8";

:root {
  --font-color: #26282A;
  --bg-color: #EEEAE4;
  --bg-beige-color: #F5F3EF;
  --bg-skincere-color: #DCD9D0;
  --bg-haircare-color: #D4D1C7;
  --bg-bodycare-color: #CBC9BD;
  --main-color: #143924;
  --point-yellow_color: #FEFFE9;
  --point-green_color: #A0C188;
  --title-font: "minerva-modern", sans-serif;
}

/*--------------------------------
            CSS Animation
 --------------------------------*/

/*------------ rotation ------------*/
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

/*------------ Fade In ------------*/

#lp_contents .fadeIn {
  opacity: 0;
  transition: 2s;
}

#lp_contents .fadeIn.is-show {
  opacity: 1;
}

#lp_contents .fadeInUp {
  opacity: 0;
  transform: translate(0, 5rem);
  transition: 2s;
}

#lp_contents .fadeInUp.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


/*------------ slick ------------*/

#lp_contents .slick-track {
  display: flex;
}

#lp_contents .slick-slide {
  height: auto !important;
}

#lp_contents .slick-prev,
#lp_contents .slick-next{
  width: 2rem;
  height: 4rem;
  z-index: 10;
}

#lp_contents .slick-prev{
  left: 4rem;
}

#lp_contents .slick-next{
  right: 4rem;
}

#lp_contents .slick-prev:before,
#lp_contents .slick-next:before {
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 0;
  color: #000;
  transform: rotate(45deg);
}

#lp_contents .slick-prev:before{
  border-left: 1px solid;
  border-bottom: 1px solid;
  left: 0;
}

#lp_contents .slick-next:before{
  border-top: 1px solid;
  border-right: 1px solid;
  right: 0;
}

/*------------ accordion ------------*/

#lp_contents .accordion_wrap {
  overflow: hidden;
  max-height: 0;
  transition: all 1s;
}

#lp_contents .accordion_wrap.active {
  max-height: 100rem;
}

#lp_contents .btn_accordion {
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  text-align: center;
}

#lp_contents .btn_accordion span {
  position: relative;
  display: inline-block;
  padding-right: 1.2rem;
  font-family: var(--title-font);
  font-size: 1.3rem;
  letter-spacing: .1em;
  transition: opacity 1s;
}

#lp_contents .btn_accordion span::before {
  position: absolute;
  top: 50%;
  right: 0;
  border-right: solid var(--main-color);
  border-bottom: solid var(--main-color);
  border-width: .1rem;
  width: .5rem;
  height: .5rem;
  margin-right: -.3rem;
  content: "";
}

#lp_contents .btn_accordion .toOpen {
 display: block;
}

#lp_contents .btn_accordion .toOpen::before {
  transform: translateY(calc(-50% - .1rem)) rotate(45deg);
}

#lp_contents .btn_accordion.switch .toOpen {
  display: none;
}


/*------------ coupon-area ------------*/

#lp_contents .coupon-area {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  width: 100%;
  margin: 2rem auto 0;
  justify-content: center;
  gap: 1.5rem;
  border-top: 1px solid;
  border-bottom: 1px solid;
  color: var(--main-color);
}

#lp_contents .coupon-area dl {
  display: contents;
}

#lp_contents .coupon-area dt{
  font-family: var(--title-font);
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  padding-right: 1rem;
  border-right: 1px solid;
}

#lp_contents .coupon-area dd {
  font-family: var(--title-font);
  font-size: 2.1rem;
}

#lp_contents .copy-btn {
  background-color: initial !important;
  color: var(--main-color) !important;
  border: 1px solid var(--main-color);
  width: 7rem !important;
  height: 2.4rem !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.1em !important;
  cursor: pointer;
  transition: all 0.5s;
}

#lp_contents .copy-btn:hover{
  background-color: var(--main-color) !important;
  color: var(--point-yellow_color) !important;
}


/*------------ number ------------*/

#lp_contents .sec_number {
  opacity: 0;
  will-change: opacity;
  -webkit-transition: ease-in,opacity .2s;
  -o-transition: ease-in,opacity .2s;
  transition: ease-in,opacity .2s
}

#lp_contents.show-01 .sec_history .sec_number {
  opacity: 1
}
#lp_contents.show-02 .sec_lineup .sec_number {
  opacity: 1
}
#lp_contents.show-03 .sec_rcmd .sec_number {
  opacity: 1
}
#lp_contents.show-04 .sec_review .sec_number {
  opacity: 1
}
#lp_contents.show-05 .sec_campaign .sec_number {
  opacity: 1
}


/*--------------------------------
                共 通
 --------------------------------*/

#Wrap,.wrapBottom,.wrapTop{
  width: 100%;
}

#lp_contents *{
  box-sizing: border-box;
}

#lp_contents{
  font-feature-settings: "palt";
  letter-spacing: 0.025em;
  background-color: var(--bg-color);
  color: var(--font-color);
  position: relative;
  font-size: 1.3rem;
  /*overflow: hidden;*/
}
#lp_contents .sp_only{display: none;}
#lp_contents img{width: 100%;display: block;}
#lp_contents a{display: block;cursor: pointer;transition: all 0.5s;}
#lp_contents ul li,#LP_page ol li{list-style: none;}
#lp_contents h1,#lp_contents h2,#lp_contents h3{padding: 0;float: none;font-weight: normal;}
#lp_contents p {
  display: block;
  margin: 0;
  font-size: 1.3rem;
  line-height: 2;
  text-align: justify;
}
#lp_contents .note{
  display: inline-block;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}
#lp_contents sup{
  font-size: 50%;
  margin-top: -0.6rem;
}

#lp_contents section{
  padding: 12rem 0;
  position: relative;
}

#lp_contents .main-ttl{
  position: relative;
  font-family: var(--title-font);
  color: var(--main-color);
  font-size: 5rem;
  letter-spacing: 0.3rem;
  line-height: 1;
  text-align: center;
  margin: 0 auto 4rem;
  padding-bottom: 5rem;
}

#lp_contents .main-ttl small{
  display: block;
  font-size: 1.6rem;
  margin-top: 1.5rem;
}

#lp_contents .main-ttl:after{
  content: '';
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 100%;
  background-color: var(--point-green_color);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#lp_contents .sub-ttl{
  font-family: var(--title-font);
  color: var(--main-color);
  font-size: 4rem;
  letter-spacing: 0.3rem;
  line-height: 1.05;
  text-align: center;
  margin: 0 auto 3rem;
}

#lp_contents .sub-ttl small{
  display: block;
  font-size: 1.5rem;
  margin-top: 1rem;
}

#lp_contents .sec_number{
  position: fixed;
  width: 14rem;
  height: 14rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--title-font);
  font-size: 6rem;
  text-align: center;
  color: #4A6A53;
  top: 9rem;
  left: 3rem;
  z-index: 100;
}

#lp_contents .sec_number.number_4,
#lp_contents .sec_number.number_5{
  color: #fff;
}

#lp_contents .sec_number img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation:10s linear infinite rotation;
}

#lp_contents .lead_ttl{
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 2.5rem;
}

#lp_contents .lead_text{
  text-align: center;
  font-size: 1.6rem;
}

#lp_contents .lead_text big{
  font-size: 2rem;
  color: var(--main-color);
  font-weight: bold;
}

#lp_contents .ttl{
  font-family: var(--title-font);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: #4A6A53;
}

#lp_contents .link_btn{
  width: 50rem;
  height: 7rem;
  border-radius: 100rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: var(--title-font);
  font-size: 2.5rem;
  letter-spacing: 0.3rem;
  background-color: var(--main-color);
  color: var(--point-yellow_color);
}

#lp_contents .link_btn img{
  width: 18rem;
}


/*------------ sec_mv ------------*/

#lp_contents .sec_mv{
  padding-top: 0;
}

#lp_contents .sec_mv .news_text{
  width: 100%;
  height: 5rem;
  background-color: var(--main-color);
}

#lp_contents .sec_mv .news_text a{
  margin: auto;
  color: var(--point-yellow_color);
  text-align: center;
  font-size: 1.6rem;
  line-height: 5rem;
  cursor: pointer;
}

#lp_contents .sec_mv .news_text a span{
  display: inline-block;
  margin-left: 1.5rem;
  text-decoration: underline;
  font-family: var(--title-font);
  letter-spacing: 0.2rem;
}

#lp_contents .sec_mv .lead_text{
  margin: 6rem auto 0;
  line-height: 2.5;
}


/*------------ sec_navi ------------*/

#lp_contents .sec_navi{
  position: relative;
  background-color: var(--bg-beige-color);
  padding: 4.5rem 0 3.5rem;
}

#lp_contents .sec_navi .sub-ttl{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}

#lp_contents .sec_navi ul{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

#lp_contents .sec_navi li:not(:last-child){
  padding-right: 4rem;
  border-right: 1px solid #D6D2C9;
}

#lp_contents .sec_navi a{
  position: relative;
  text-align: center;
  font-family: var(--title-font);
  font-size: 2.5rem;
  letter-spacing: 0.2rem;
  color: var(--main-color);
  padding-bottom: 3.4rem;
}

#lp_contents .sec_navi a small{
  display: block;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  margin-top: 0.8rem;
}

#lp_contents .sec_navi a:hover{ 
  opacity: 1;
}

#lp_contents .sec_navi a:after{
  content: '';
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100%;
  background-image: url(../img/ico-arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#lp_contents .sec_navi a:hover:after{
  background-color: var(--main-color);
  background-image: url(../img/ico-arrow_white.svg);
}


/*------------ sec_history ------------*/

/*point_wrap*/
#lp_contents .sec_history .point_wrap{
  margin: 8rem auto 0;
}

#lp_contents .sec_history .point_wrap ul{
  width: 120rem;
  margin: 3rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}

#lp_contents .sec_history .point_wrap li{
  width: calc(calc(100% - 3rem) / 2);
  padding: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  background-color: var(--bg-beige-color);
  border-radius: 1rem;
}

#lp_contents .sec_history .point_wrap .img_blk{
  width: 18rem;
  height: 18rem;
  border-radius: 100%;
  overflow: hidden;
}

#lp_contents .sec_history .point_wrap .text_blk{
  width: 33rem;
}

#lp_contents .sec_history .point_wrap .text_blk .lead_ttl{
  margin-bottom: 0.8rem;
}

/*pckg_wrap*/
#lp_contents .sec_history .pckg_wrap{
  margin: 8rem auto 0;
}

#lp_contents .sec_history .pckg_wrap .pckg_blk{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6rem;
}

#lp_contents .sec_history .pckg_wrap .img_blk{
  position: relative;
}

#lp_contents .sec_history .pckg_wrap .img_blk .circle-text{
  width: 18rem;
  position: absolute;
  top: 2rem;
  left: -4rem;
  z-index: 2;
}

#lp_contents .sec_history .pckg_wrap .img_blk figure{
  width: 50rem;
  border-radius: 100rem 100rem 0 0 ;
  overflow: hidden;
}

#lp_contents .sec_history .pckg_wrap .text_blk p{
  width: 45rem;
  font-size: 1.4rem;
}


/*------------ sec_lineup ------------*/

#lp_contents .sec_lineup{
  padding-bottom: 0;
  background-color: var(--bg-skincere-color);
}

/*lineup_wrap*/
#lp_contents .sec_lineup .lineup_wrap ul{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 120rem;
  margin: auto;
}

#lp_contents .sec_lineup .lineup_wrap li,
#lp_contents .sec_lineup .lineup_wrap .img_blk{
  position: relative;
  box-sizing: content-box;
}

#lp_contents .sec_lineup .lineup_wrap .img_blk .cate{
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--main-color);
  background-color: rgba(255, 255, 255, .3);
  position: absolute;
  z-index: 1;
}

#lp_contents .sec_lineup .lineup_wrap .img_blk img{
  position: relative;
  z-index: 2;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.2));
}

#lp_contents .sec_lineup .lineup_wrap .text_blk{
  width: 29rem;
  padding: 2rem;
  border: 1px solid var(--main-color);
  position: absolute;
}

#lp_contents .sec_lineup .lineup_wrap .text_blk:before{
  content: "";
  width: 3.2rem;
  height: 3.2rem;
  background-image: url(../img/ico_line.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: -3.2rem;
  top: 0;
  bottom: 0;
  margin: auto;
}

#lp_contents .sec_lineup .lineup_wrap .text_blk p{
  line-height: 1.5;
}

#lp_contents .sec_lineup .lineup_wrap .text_blk .item_lead{
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 1rem;
}

#lp_contents .sec_lineup .lineup_wrap .text_blk .item_detail{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

#lp_contents .sec_lineup .lineup_wrap .text_blk .item_price{
  font-family: var(--title-font);
}

#lp_contents .sec_lineup .lineup_wrap .text_blk .item_price big{
  font-size: 1.6rem;
}

#lp_contents .sec_lineup .lineup_wrap .text_blk .link_btn{
  width: 7rem;
  height: 2.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

/*skincare*/
#lp_contents .sec_lineup .skincare{
  padding: 0 0 5.5rem;
}

#lp_contents .sec_lineup .skincare .item_1{
  margin-top: 3rem;
  margin-right: 5rem;
  padding-left: 27rem;
}

#lp_contents .sec_lineup .skincare .item_1 .img_blk{
  width: 22rem;
  padding-top: 7rem;
  padding-left: 7rem;
}

#lp_contents .sec_lineup .skincare .item_1 .img_blk .cate{  
  top: 0;
  left: 0;
}

#lp_contents .sec_lineup .skincare .item_1 .text_blk{
  top: 12.5rem;
  left: 0;
}

#lp_contents .sec_lineup .skincare .item_2{
  padding-right: 34rem;
}

#lp_contents .sec_lineup .skincare .item_2 .img_blk{
  width: 12rem;
  padding-bottom: 6rem;
  padding-left: 6rem;
}

#lp_contents .sec_lineup .skincare .item_2 .img_blk .cate{
  bottom: 0;
  left: 0;
}

#lp_contents .sec_lineup .skincare .item_2 .text_blk{
  top: 0;
  right: 0;
}

#lp_contents .sec_lineup .skincare .item_2 .text_blk:before{
  right: auto;
  left: -3.2rem;
  transform: rotate(180deg);
}

#lp_contents .sec_lineup .skincare .item_3{
  margin-right: 6rem;
  padding-left: 27rem;
  transform: translateY(-3rem);
}

#lp_contents .sec_lineup .skincare .item_3 .img_blk{
  width: 14rem;
  padding-left: 4rem;
  padding-bottom: 6rem;
}

#lp_contents .sec_lineup .skincare .item_3 .img_blk .cate{
  bottom: 0;
  left: 0;
}

#lp_contents .sec_lineup .skincare .item_3 .text_blk{
  top: 6rem;
  left: -3rem;
}

#lp_contents .sec_lineup .skincare .item_4{
  padding-right: 21rem;
}

#lp_contents .sec_lineup .skincare .item_4 .img_blk{
  width: 22rem;
  padding-top: 7rem;
  padding-right: 7rem;
}

#lp_contents .sec_lineup .skincare .item_4 .img_blk .cate{
  top: 0;
  right: 0;
}

#lp_contents .sec_lineup .skincare .item_4 .text_blk{
  top: 13rem;
  right: -6rem;
}

#lp_contents .sec_lineup .skincare .item_4 .text_blk:before{
  right: auto;
  left: -3.2rem;
  transform: rotate(270deg);
}

/*haircare*/
#lp_contents .sec_lineup .haircare{
  padding: 8rem 0 16rem;
  background-color: var(--bg-haircare-color);
}

#lp_contents .sec_lineup .haircare .item_1{
  margin-top: 9rem;
  margin-right: 4rem;
  padding-left: 30rem;
}

#lp_contents .sec_lineup .haircare .item_1 .img_blk{
  width: 9rem;
  padding-top: 7rem;
  padding-left: 4rem;
}

#lp_contents .sec_lineup .haircare .item_1 .img_blk .cate{  
  top: 0;
  left: 0;
}

#lp_contents .sec_lineup .haircare .item_1 .text_blk{
  top: 12rem;
  left: 0;
}

#lp_contents .sec_lineup .haircare .item_2{
  padding-right: 57rem;
}

#lp_contents .sec_lineup .haircare .item_2 .img_blk{
  width: 12rem;
  padding-top: 7rem;
  padding-left: 4rem;
}

#lp_contents .sec_lineup .haircare .item_2 .img_blk .cate{  
  top: 0;
  left: 0;
}

#lp_contents .sec_lineup .haircare .item_2 .text_blk{
  top: 0;
  right: 23rem;
}

#lp_contents .sec_lineup .haircare .item_2 .text_blk:before{
  right: auto;
  left: -3.2rem;
  transform: rotate(180deg);
}

#lp_contents .sec_lineup .haircare .item_3{
  padding-right: 34rem;
  position: absolute;
  top: 24rem;
  right: 2rem;
}

#lp_contents .sec_lineup .haircare .item_3 .img_blk{
  width: 13.5rem;
  padding-bottom: 5rem;
  padding-left: 5rem;
}

#lp_contents .sec_lineup .haircare .item_3 .img_blk .cate{  
  bottom: 0;
  left: 0;
}

#lp_contents .sec_lineup .haircare .item_3 .text_blk{
  top: 3rem;
  right: 0;
}

#lp_contents .sec_lineup .haircare .item_3 .text_blk:before{
  right: auto;
  left: -3.2rem;
  transform: rotate(180deg);
}

/*bodycare*/
#lp_contents .sec_lineup .bodycare{
  padding: 8rem 0 12rem;
  background-color: var(--bg-bodycare-color);
}

#lp_contents .sec_lineup .bodycare .item_1{
  margin-top: 5rem;
  margin-right: 15rem;
  padding-left: 28rem;
  position: relative;
  z-index: 2;
}

#lp_contents .sec_lineup .bodycare .item_1 .img_blk{
  width: 9rem;
  padding-top: 6rem;
  padding-left: 6rem;
}

#lp_contents .sec_lineup .bodycare .item_1 .img_blk .cate{  
  top: 0;
  left: 0;
}

#lp_contents .sec_lineup .bodycare .item_1 .text_blk{
  top: 24rem;
  left: 0;
}

#lp_contents .sec_lineup .bodycare .item_2{
  position: absolute;
  top: 27rem;
  left: 15rem;
  padding-left: 34rem;
}

#lp_contents .sec_lineup .bodycare .item_2 .img_blk{
  width: 9rem;
  padding-bottom: 7rem;
  padding-right: 7rem;
}

#lp_contents .sec_lineup .bodycare .item_2 .img_blk .cate{  
  bottom: 0;
  right: 0;
}

#lp_contents .sec_lineup .bodycare .item_2 .text_blk{
  top: 21rem;
  left: 0;
}

#lp_contents .sec_lineup .bodycare .item_3{
  padding-right: 34rem;
}

#lp_contents .sec_lineup .bodycare .item_3 .img_blk{
  width: 22rem;
  padding-top: 7rem;
  padding-left: 5rem;
}

#lp_contents .sec_lineup .bodycare .item_3 .img_blk .cate{  
  top: 0;
  left: 0;
}

#lp_contents .sec_lineup .bodycare .item_3 .text_blk{
  top: 4rem;
  right: 0;
}

#lp_contents .sec_lineup .bodycare .item_3 .text_blk:before{
  right: auto;
  left: -3.2rem;
  transform: rotate(180deg);
}

#lp_contents .sec_lineup .bodycare .item_4{
  position: absolute;
  padding-right: 15rem;
  padding-bottom: 19rem;
  top: 28rem;
  right: 6rem;
}

#lp_contents .sec_lineup .bodycare .item_4 .img_blk{
  width: 22rem;
  padding-top: 7rem;
  padding-right: 3rem;
}

#lp_contents .sec_lineup .bodycare .item_4 .img_blk .cate{  
  top: 0;
  right: 0;
}

#lp_contents .sec_lineup .bodycare .item_4 .text_blk{
  bottom: 0;
  right: 0;
}

#lp_contents .sec_lineup .bodycare .item_4 .text_blk:before{
  top: -3.2rem;
  bottom: auto;
  right: 11rem;
  transform: rotate(270deg);
}

#lp_contents .sec_lineup .bodycare > .link_btn{
  margin: 42rem auto 0;
}


/*------------ sec_rcmd ------------*/

/*rcmd_wrap*/
#lp_contents .sec_rcmd .rcmd_wrap{
  margin: 4rem auto 0 ;
}

#lp_contents .sec_rcmd .rcmd_wrap ul{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

#lp_contents .sec_rcmd .rcmd_wrap li{
  position: relative;
  background: linear-gradient(0, #d6d2c9 0%, #eeeae4 100%);
  width: 28.5rem;
  height: 51rem;
  padding: 6rem 0 2rem;
}

#lp_contents .sec_rcmd .rcmd_wrap li:nth-child(even){
  margin-top: 6rem;
}

#lp_contents .sec_rcmd .rcmd_wrap .img_blk{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 auto 3rem;
  height: 29.2rem;
}

#lp_contents .sec_rcmd .item_1 .img_blk img{
  width: 22rem;
}

#lp_contents .sec_rcmd .item_2 .img_blk img{
  width: 12rem;
}

#lp_contents .sec_rcmd .item_3 .img_blk img{
  width: 12rem;
}

#lp_contents .sec_rcmd .item_4 .img_blk img{
  width: 22rem;
}

#lp_contents .sec_rcmd .rcmd_wrap .img_blk .cate{
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--main-color);
  background-color: rgba(255, 255, 255, .3);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 2rem;
}

#lp_contents .sec_rcmd .rcmd_wrap .img_blk img{
  position: relative;
  z-index: 2;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.2));
}

#lp_contents .sec_rcmd .rcmd_wrap .text_blk p{
  line-height: 1.5;
  text-align: center;
}

#lp_contents .sec_rcmd .rcmd_wrap .text_blk .item_detail{
  margin-top: 1rem;
}

#lp_contents .sec_rcmd .rcmd_wrap .text_blk .item_price{
  font-family: var(--title-font);
}

#lp_contents .sec_rcmd .rcmd_wrap .text_blk .item_price big{
  font-size: 1.6rem;
}

#lp_contents .sec_rcmd .rcmd_wrap .text_blk .link_btn{
  width: 7rem;
  height: 2.4rem;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin: 1rem auto 0;
}

/*aroma_wrap*/
#lp_contents .sec_rcmd .aroma_wrap{
  margin: 8rem auto 0;
}

#lp_contents .sec_rcmd .aroma_wrap ul{
  width: 120rem;
  margin: 3rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}

#lp_contents .sec_rcmd .aroma_wrap li{
  width: calc(calc(100% - 3rem) / 2);
  padding: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  background-color: var(--bg-beige-color);
  border-radius: 1rem;
}

#lp_contents .sec_rcmd .aroma_wrap .img_blk{
  width: 18rem;
  height: 18rem;
  border-radius: 100%;
  overflow: hidden;
}

#lp_contents .sec_rcmd .aroma_wrap .text_blk{
  width: 33rem;
}

#lp_contents .sec_rcmd .aroma_wrap .text_blk .lead_ttl{
  font-size: 1.6rem;
  text-align: left;
  line-height: 1;
  margin-bottom: 1.5rem;
}

/*cmnt_wrap*/
#lp_contents .sec_rcmd .cmnt_wrap{
  width: 70rem;
  padding: 4rem 2.5rem 4rem 8rem;
  margin: 8rem auto 0;
  position: relative;
  border: 1px solid;
}

#lp_contents .sec_rcmd .cmnt_wrap .line{
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  background-color: var(--bg-color);
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 15rem;
  transform: translateY(-50%);
}

#lp_contents .sec_rcmd .cmnt_wrap .line:before{
  content: "";
  width: 2.2rem;
  height: 1px;
  transform: rotate(-45deg);
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#lp_contents .sec_rcmd .cmnt_wrap .ttl{
  transform: rotate(90deg);
  position: absolute;
  top: 0;
  bottom: 0;
  left: -11.5rem;
}

#lp_contents .sec_rcmd .cmnt_wrap .lead_ttl{
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 1rem;
}


/*------------ sec_review ------------*/

#lp_contents .sec_review{
  background-color: #3E4522;
}

#lp_contents .sec_review .main-ttl{
  color: var(--point-yellow_color);
}

#lp_contents .sec_review .ttl{
  transform: rotate(90deg);
  position: absolute;
  top: 4.5rem;
  right: 0;
}

#lp_contents .sec_review ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  width: 110rem;
  margin: auto;
}

#lp_contents .sec_review li{
  width: calc(calc(100% - 3rem) / 2);
  background-color: #F5F3EF;
  padding: 2.5rem;
  border-radius: 1rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
}

#lp_contents .sec_review figure{
  width: 12rem;
}

#lp_contents .sec_review figure img{
  width: 100%;
  height: 12rem;
  border-radius: 100%;
  margin-bottom: 1rem;
}

#lp_contents .sec_review figure p{
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
}

#lp_contents .sec_review p{
  max-width: 31.5rem;
}


/*------------ sec_campaign ------------*/

#lp_contents .sec_campaign{
  background-color: #17291D;
}

/*lead_wrap*/
#lp_contents .sec_campaign .lead_wrap .lead_text{
  font-family: var(--title-font);
  color: var(--point-yellow_color);
}

#lp_contents .sec_campaign .lead_wrap .lead_text big{
  font-size: 2.4rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  color: var(--point-yellow_color);
}

/*cmpn_wrap*/
#lp_contents .sec_campaign .main-ttl{
  color: var(--point-yellow_color);
}

#lp_contents .sec_campaign .ttl{
  transform: rotate(90deg);
  position: absolute;
  top: 6rem;
  left: -2rem;
}

#lp_contents .sec_campaign .cmpn_wrap{
  margin: 4rem auto 0;
}

#lp_contents .sec_campaign .cmpn_wrap > ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  width: 110rem;
  margin: auto;
}

#lp_contents .sec_campaign .cmpn_wrap > ul > li{
  width: calc(calc(100% - 3rem) / 2);
  background-color: #F5F3EF;
  padding: 2.5rem;
  border-radius: 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  min-height: 14rem;
}

#lp_contents .sec_campaign .cmpn_wrap > ul > li.full{
  width: 100%;
}

#lp_contents .sec_campaign .lead_text,
#lp_contents .sec_campaign .note{
  display: block;
  width: 100%;
}

#lp_contents .sec_campaign .item_list{
  display: flex;
  gap: 2.5rem;
}

#lp_contents .sec_campaign .item_list li{
  width: calc(calc(100% - 5rem) / 3);
}

#lp_contents .sec_campaign .item_list p{
  text-align: center; 
}

#lp_contents .sec_campaign .item_list .img_blk{
  position: relative;
}

#lp_contents .sec_campaign .item_list .img_blk .lead_ttl{
  font-size: 1.6rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#lp_contents .sec_campaign .item_list .lead_blk{
  background-color: #D6D2C9;
  padding: 2rem 0;
}

#lp_contents .sec_campaign .item_list .lead_blk a{
  text-decoration: underline;
}

#lp_contents .sec_campaign .item_list .text_blk {
  margin: 2rem auto 0;
}

#lp_contents .sec_campaign .item_list .text_blk .item_price{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: var(--title-font);
  line-height: 1;
}

#lp_contents .sec_campaign .item_list .text_blk .item_price strike big{
  font-size: 1.8rem;
}

#lp_contents .sec_campaign .item_list .text_blk .item_price .arrow{
  display: block;
  border-left: 1.2rem solid #A0C188;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  width: 1.2rem;
  height: 1rem;
}

#lp_contents .sec_campaign .item_list .text_blk .item_price > big{
  font-size: 2.4rem;
}

#lp_contents .sec_campaign .item_list .text_blk .item_price > small{
  font-size: 2rem;
}

#lp_contents .sec_campaign .item_list .cart_btn{
  width: 18rem;
  height: 4rem;
  font-size: 1.2rem;
  letter-spacing: 0.025em;
  line-height: 1;
  margin: 2rem auto 0;
  gap: 0.5rem;
}

#lp_contents .sec_campaign .item_list .cart_btn img{
  width: 1.8rem;
}


/*------------ viewall_wrap ------------*/

#lp_contents .viewall_wrap .bg {
  background-position: center;
  -webkit-background-size: cover;
  background-image: url(../img/bg_pc.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, auto, auto, 0);
  z-index: 1;
}

#lp_contents .viewall_wrap .link_btn{
  background-color: #fff;
  color: var(--main-color);
  filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.3));
  margin: auto;
  position: relative;
  z-index: 2;
}


/*--------------------------------
            Responsive
 --------------------------------*/

@media screen and (max-width: 1600px){
  html {
    font-size: calc(10 * (100vw / 1600));
  }
}

/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {

  html {
    font-size: calc(10 * (100vw / 430));
  }

  #footer{
    margin-top: -3rem;
  }

  #lp_contents{
    font-size: 1.4rem;
    overflow: hidden;
  }
  #lp_contents .pc_only{display: none;}
  #lp_contents .sp_only{display: block;}
  #lp_contents p {
    font-size: 1.4rem;
  }

  #lp_contents section{
    padding: 6rem 1.5rem;
  }

  #lp_contents .main-ttl{
    font-size: 4.5rem;
    margin: 0 auto 3rem;
    padding-bottom: 4.2rem;
  }

  #lp_contents .main-ttl small{
    font-size: 1.5rem;
  }

  #lp_contents .sub-ttl{
    font-size: 3.5rem;
  }

  #lp_contents .sub-ttl small{
    font-size: 1.2rem;
    margin-top: 0.5rem;
  }

  #lp_contents .sec_number{
    position: absolute;
    width: 10rem;
    height: 10rem;
    font-size: 4.5rem;
    top: 1rem;
    left: -1rem;
    z-index: 1;
    opacity: 1;
    display: flex;
  }

  #lp_contents .lead_ttl{
    margin-bottom: 1.5rem;
  }

  #lp_contents .lead_text{
    text-align: justify;
    font-size: 1.5rem;
  }

  #lp_contents .link_btn{
    width: 40rem;
    height: 6.5rem;
    gap: 1.5rem;
    font-size: 2rem;
  }

  #lp_contents .link_btn img{
    width: 14rem;
  }

  #lp_contents .number_wrap{
    display: none;
  }


  /*------------ sec_mv ------------*/

  #lp_contents .sec_mv{
    padding: 0 0 6rem;
  }

  #lp_contents .sec_mv .news_text{
    height: 4.5rem;
  }

  #lp_contents .sec_mv .news_text a{
    font-size: 1.5rem;
    line-height: 4.5rem;
  }

  #lp_contents .sec_mv .lead_text{
    margin: 5rem auto 0;
    text-align: center;
  }


  /*------------ sec_navi ------------*/

  #lp_contents .sec_navi{
    background-color: initial;
    padding: 0;
    margin: 0 auto 2rem;
  }

  #lp_contents .sec_navi .sub-ttl{
    position: static;
    transform: translateY(0);
    margin: 0 auto 2rem;
  }

  #lp_contents .sec_navi .navi_wrap{
    overflow: scroll; 
  }

  #lp_contents .sec_navi ul{
    width: fit-content;
    gap: 0.8rem;
    padding: 0 0.8rem;
  }

  #lp_contents .sec_navi li{
    background-color: var(--bg-beige-color);
    padding: 1.5rem;
  }

  #lp_contents .sec_navi li:not(:last-child){
    padding-right: 1.5rem;
    border-right: none;
  }

  #lp_contents .sec_navi a{
    font-size: 2.2rem;
    padding-bottom: 0;
    word-break: keep-all;
    width: max-content;
  }

  #lp_contents .sec_navi a small{
    font-size: 1.1rem;
    margin-top: 0.5rem;
    word-break: keep-all;
  }

  #lp_contents .sec_navi a:after{
    content: none;
  }


  /*------------ sec_history ------------*/

  /*point_wrap*/
  #lp_contents .sec_history .point_wrap{
    margin: 6rem auto 0;
  }

  #lp_contents .sec_history .point_wrap .sub-ttl{
    margin-bottom: 2rem;
  }

  #lp_contents .sec_history .point_wrap ul{
    width: 100%;
    margin-top: 2rem;
  }

  #lp_contents .sec_history .point_wrap li{
    width: 100%;
    padding: 0;
    justify-content: center;
    gap: 1rem;
    background-color: initial;
  }

  #lp_contents .sec_history .point_wrap .img_blk{
    width: 16rem;
    height: 16rem;
  }

  #lp_contents .sec_history .point_wrap .text_blk{
    width: 100%;
  }

  #lp_contents .sec_history .point_wrap .text_blk .accordion_wrap{
    display: none;
    background-color: var(--bg-beige-color);
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
  }

  #lp_contents .sec_history .point_wrap .text_blk .accordion_wrap.active{
    display: block;
  }

  #lp_contents .sec_history .point_wrap .text_blk .lead_ttl{
    margin-bottom: 1rem;
  }

  /*pckg_wrap*/
  #lp_contents .sec_history .pckg_wrap{
    margin: 6rem auto 0;
  }

  #lp_contents .sec_history .pckg_wrap .pckg_blk{
    gap: 4rem;
  }

  #lp_contents .sec_history .pckg_wrap .img_blk .circle-text{
    width: 15rem;
    top: 0;
    left: -2rem;
  }

  #lp_contents .sec_history .pckg_wrap .img_blk figure,
  #lp_contents .sec_history .pckg_wrap .text_blk p{
    width: 36rem;
  }

  #lp_contents .sec_history .pckg_wrap p.btn_accordion{
    width: fit-content;
    margin-top: 1rem;
  }


  /*------------ sec_lineup ------------*/

  #lp_contents .sec_lineup{
    padding: 6rem 0 0;
  }

  /*lineup_wrap*/
  #lp_contents .sec_lineup .lineup_wrap ul{
    display: block;
    max-width: 100%;
  }

  #lp_contents .sec_lineup .lineup_wrap li{
    position: static !important;
    margin: 0 0.75rem !important;
    padding: 0 !important;
    transform: translate(0) !important;
  }

  #lp_contents .sec_lineup .lineup_wrap .img_blk{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 2rem;
  }

  #lp_contents .sec_lineup .lineup_wrap .img_blk .cate{
    top: 0;
    left: 0;
  }

  #lp_contents .sec_lineup .lineup_wrap .text_blk{
    position: static;
    width: 100%;
  }

  #lp_contents .sec_lineup .lineup_wrap .text_blk:before{
    content: none;
  }

  #lp_contents .sec_lineup .lineup_wrap .text_blk .item_lead{
    font-size: 1.5rem;
  }

  #lp_contents .sec_lineup .lineup_wrap .text_blk .item_price big{
    font-size: 2.2rem;
  }

  #lp_contents .sec_lineup .lineup_wrap .text_blk .link_btn{
    width: 8rem;
    height: 3rem;
    font-size: 1.5rem;
  }

  /*skincare*/
  #lp_contents .sec_lineup .skincare{
    padding: 0 0 6rem;
  }

  #lp_contents .sec_lineup .skincare .item_1 .img_blk,
  #lp_contents .sec_lineup .skincare .item_2 .img_blk,
  #lp_contents .sec_lineup .skincare .item_3 .img_blk,
  #lp_contents .sec_lineup .skincare .item_4 .img_blk{
    height: 27rem;
  }

  #lp_contents .sec_lineup .skincare .item_1 .img_blk img{
    width: 18rem;
  }

  #lp_contents .sec_lineup .skincare .item_2 .img_blk img{
    width: 10rem;
  }

  #lp_contents .sec_lineup .skincare .item_3 .img_blk img{
    width: 11.4rem;
  }

  #lp_contents .sec_lineup .skincare .item_4 .img_blk img{
    width: 18rem;
  }

  /*haircare*/
  #lp_contents .sec_lineup .haircare{
    padding: 6rem 0 ;
  }

  #lp_contents .sec_lineup .haircare .item_1 .img_blk,
  #lp_contents .sec_lineup .haircare .item_2 .img_blk,
  #lp_contents .sec_lineup .haircare .item_3 .img_blk,
  #lp_contents .sec_lineup .haircare .item_4 .img_blk{
    height: 30rem;
  }

  #lp_contents .sec_lineup .haircare .text_blk{
    height: 21rem;
  }

  #lp_contents .sec_lineup .haircare .item_1 .img_blk img{
    width: 7.3rem;
  }

  #lp_contents .sec_lineup .haircare .item_2 .img_blk img{
    width: 10rem;
  }

  #lp_contents .sec_lineup .haircare .item_3 .img_blk img{
    width: 11rem;
  }

  /*bodycare*/
  #lp_contents .sec_lineup .bodycare{
    padding: 6rem 0 ;
  }

  #lp_contents .sec_lineup .bodycare .item_1 .img_blk,
  #lp_contents .sec_lineup .bodycare .item_2 .img_blk,
  #lp_contents .sec_lineup .bodycare .item_3 .img_blk,
  #lp_contents .sec_lineup .bodycare .item_4 .img_blk{
    height: 30rem;
  }

  #lp_contents .sec_lineup .bodycare .text_blk{
    height: 23rem;
  }

  #lp_contents .sec_lineup .bodycare .item_1 .img_blk img{
    width: 7.3rem;
  }

  #lp_contents .sec_lineup .bodycare .item_2 .img_blk img{
    width: 7.3rem;
  }

  #lp_contents .sec_lineup .bodycare .item_3 .img_blk img{
    width: 18rem;
  }

  #lp_contents .sec_lineup .bodycare .item_4 .img_blk img{
    width: 18rem;
  }

  #lp_contents .sec_lineup .bodycare > .link_btn{
    margin: 6rem auto 0;
  }


  /*------------ sec_rcmd ------------*/

  #lp_contents .sec_rcmd{
    padding: 6rem 0;
  }

  #lp_contents .sec_rcmd p.lead_text{
    text-align: center;
  }

  /*rcmd_wrap*/
  #lp_contents .sec_rcmd .rcmd_wrap{
    margin: 3rem auto 0 ;
  }

  #lp_contents .sec_rcmd .rcmd_wrap ul{
    display: block;
  }

  #lp_contents .sec_rcmd .rcmd_wrap li{
    width: 34rem;
    height: 45rem;
    padding: 2rem 0;
    margin: 0 0.75rem;
  }

  #lp_contents .sec_rcmd .rcmd_wrap li:nth-child(even){
    margin-top: 0;
  }

  #lp_contents .sec_rcmd .rcmd_wrap .img_blk{
    margin: 0 auto 2rem;
    height: 27rem;
  }

  #lp_contents .sec_rcmd .item_1 .img_blk img{
    width: 18rem;
  }

  #lp_contents .sec_rcmd .item_2 .img_blk img{
    width: 10rem;
  }

  #lp_contents .sec_rcmd .item_3 .img_blk img{
    width: 11.4rem;
  }

  #lp_contents .sec_rcmd .item_4 .img_blk img{
    width: 18rem;
  }

  #lp_contents .sec_rcmd .rcmd_wrap .img_blk .cate{
    left: 1rem;
  }

  #lp_contents .sec_rcmd .rcmd_wrap .text_blk .item_price big{
    font-size: 2.2rem;
  }

  #lp_contents .sec_rcmd .rcmd_wrap .text_blk .link_btn{
    width: 8rem;
    height: 3rem;
    font-size: 1.5rem;
  }

  /*aroma_wrap*/
  #lp_contents .sec_rcmd .aroma_wrap{
    margin: 6rem auto 0;
  }

  #lp_contents .sec_rcmd .aroma_wrap ul{
    width: 40rem;
  }

  #lp_contents .sec_rcmd .aroma_wrap li{
    width: 100%;
    padding: 0;
    justify-content: center;
    gap: 2rem;
    background-color: initial;
  }

  #lp_contents .sec_rcmd .aroma_wrap .img_blk{
    width: 16rem;
    height: 16rem;
  }

  #lp_contents .sec_rcmd .aroma_wrap .text_blk{
    width: 100%;
  }

  #lp_contents .sec_rcmd .aroma_wrap .text_blk .accordion_wrap{
    display: none;
    background-color: var(--bg-beige-color);
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
  }

  #lp_contents .sec_rcmd .aroma_wrap .text_blk .accordion_wrap.active{
    display: block;
  }

  #lp_contents .sec_rcmd .aroma_wrap .text_blk .lead_ttl{
    font-size: 1.7rem;
    text-align: center;
    margin-bottom: 1rem;
  }

  /*cmnt_wrap*/
  #lp_contents .sec_rcmd .cmnt_wrap{
    width: 40rem;
    padding: 2.5rem 1.5rem;
    margin: 6rem auto 0;
  }

  #lp_contents .sec_rcmd .cmnt_wrap .line{
    width: 3rem;
    height: 3rem;
    left: 0;
    right: 0;
    margin: auto;
  }

  #lp_contents .sec_rcmd .cmnt_wrap .line:before{
    width: 3rem;
  }

  #lp_contents .sec_rcmd .cmnt_wrap .ttl{
    transform: rotate(0);
    position: static;
    margin-bottom: 1rem;
    text-align: center;
    display: block;
  }

  #lp_contents .sec_rcmd .cmnt_wrap .lead_ttl{
    text-align: center;
  }


  /*------------ sec_review ------------*/

  #lp_contents .sec_review{
    padding: 6rem 0;
  }

  #lp_contents .sec_review ul{
    display: block;
    width: 100%;
  }

  #lp_contents .sec_review li{
    display: block;
    width: 34rem;
    padding: 2.5rem 1.5rem;
    margin: 0 0.75rem;
  }

  #lp_contents .sec_review figure{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  #lp_contents .sec_review figure img{
    width: 10rem;
    height: 10rem;
    margin-bottom: 0;
  }

  #lp_contents .sec_review figure p{
    text-align: left;
    font-size: 1.3rem;
    line-height: 1.5;
  }

  #lp_contents .sec_review p{
    max-width: 100%;
    width: 100%;
  }


  /*------------ sec_campaign ------------*/

  #lp_contents .sec_campaign p{
    text-align: center;
  }

  #lp_contents .sec_campaign .lead_wrap .lead_text big{
    font-size: 2rem;
  }

  /*cmpn_wrap*/
  #lp_contents .sec_campaign .ttl{
    top: 5rem;
    left: -3rem;
  }

  #lp_contents .sec_campaign .cmpn_wrap{
    margin: 3rem auto 0;
  }

  #lp_contents .sec_campaign .cmpn_wrap > ul{
    gap: 2rem;
    width: 100%;
  }

  #lp_contents .sec_campaign .cmpn_wrap > ul > li{
    width: 100%;
    padding: 2.5rem 0;
    display: block;
    min-height: auto;
  }

  #lp_contents .sec_campaign .cmpn_wrap > ul > li.full{
    width: 100%;
  }

  #lp_contents .sec_campaign .lead_text{
    font-size: 1.6rem;
  }

  #lp_contents .sec_campaign .item_list{
    display: block;
    margin: 3rem auto 0;
  }

  #lp_contents .sec_campaign .item_list li{
    width: 32rem;
    margin: 0 0.75rem;
  }

  #lp_contents .sec_campaign .slick-prev{
    left: 2rem;
    top: 30%;
  }

  #lp_contents .sec_campaign .slick-next{
    right: 2rem;
    top: 30%;
  }

  #lp_contents .sec_campaign .item_list .cart_btn{
    width: 20rem;
    font-size: 1.5rem;
  }

  #lp_contents .sec_campaign .item_list .cart_btn img{
    width: 2rem;
  }


  /*------------ viewall_wrap ------------*/

  #lp_contents .viewall_wrap .bg {
    background-image: url(../img/bg_sp.jpg);
    background-attachment: initial;
  }


}