@charset "UTF-8";

@font-face {
  font-family: "Times New Roman";
  src: url("../../Page/Lp/Make/font/times.woff") format("woff"), url("../../Page/Lp/Make/font/times.woff2") format("woff"), url("../../Page/Lp/Make/font/times.otf") format("opentype");
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

main {
  width: 100%;
  margin: 0 auto;
  padding-top: 0 !important;
}

a:hover {
  opacity: 0.7;
  animation-duration: 1;
}

.opening .opening_logo.display {
  opacity: 1;
}

.lp_2023SpringYellow.load-active {
  opacity: 1 !important;
  height: auto;
  background-color: #FCF9DB;
}

.lp_2023SpringYellow {
  font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
  font-weight: normal;
  color: #717071;
}

@font-face {
	font-family: 'Margaret';
	src: url(../font/Margaret-Bold.otf);
}

#Wrap {
  width: 100%;
}

.wrapTop {
  width: 100%;
}

.wrapBottom {
  width: 100%;
}

.lp_contents {
  padding-top: 0 !important;
}

p, dt, dd {
  text-align: unset;
}

* {
  word-break: unset;
}

/*--------------------------------
        Layout  First
--------------------------------*/
.opening {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
}

.opening img {
  width: 100%;
  height: 100%;
}

.opening .opening_img.fadeOut {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.opening .opening_img {
  opacity: 1;
}

.opening .opening_logo {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(336 * (100vw/390));
  height: calc(134 * (100vw/390));
  z-index: 20;
}

.opening.close {
  display: none !important;
  height: 0;
}

.opening.close img {
  height: 0;
}

.lp_2023SpringYellow {
  transition: opacity 3s 0.5s ease-out;
  height: 0;
}


/*--------------------------------
          S e t U p SP
--------------------------------*/
/* .contents {
  padding-top: 57px !important;
} */

header,
footer {
  display: none;
}

header.on,
footer.on {
  display: block;
}

#share {
  bottom: 10% !important;
  right: 2% !important;
  display: block;
}

.product_main_visual,
.product_img,
.product_img2,
.product_img3 {
  display: block;
}

.topic-path {
  margin: 0;
}

.lp_2023SpringYellow {
  position: relative;
  max-width: 100vw;
  width: 100%;
  overflow: hidden scroll;
}

.lp_2023SpringYellow .small_txt {
  font-size: 0.7em;
}

.lp_2023SpringYellow button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.lp_2023SpringYellow img {
  width: 100%;
}

.lp_2023SpringYellow li {
  list-style: none;
}

.lp_2023SpringYellow a {
  text-decoration: none;
}

.lp_2023SpringYellow p,
.lp_2023SpringYellow ul,
.lp_2023SpringYellow ol,
.lp_2023SpringYellow dl {
  margin: 0;
}

/*--------------------------------
            Layout  PC
--------------------------------*/
  .opening .opening_logo {
    width: 60rem;
    height: 16rem;
  }

  .lp_2023SpringYellow #background_wrap {
    margin-inline: auto;
    margin-bottom: 16rem;
    padding-bottom: 10rem;
    position: relative;
    width: 120rem;
  }

  .lp_2023SpringYellow .sec00 .en {
    font-size: 3.1rem;
    line-height: 1.26;
  }

  .lp_2023SpringYellow .sec00 .ja {
    margin-top: 0rem;
    font-size: 1.4rem;
    line-height: 1.6;
  }

  .lp_2023SpringYellow .sec00 .link_anchor p {
    transition: all 0.45s ease-out;
    left: 0rem;
    font-size: 2.4rem;
  }

  .lp_2023SpringYellow nav {
    position: fixed;
    top: 17vh;
    bottom: auto;
    left: 50%;
    margin-left: 60rem;
  }

  .lp_2023SpringYellow .nav_list {
    display: inline-block;
    padding: 2.4rem 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0 5px 5px 0;
  }

  .lp_2023SpringYellow .nav_list li {
    padding: 1.45rem 0;
    writing-mode: vertical-rl;
    font-family: "Times New Roman", serif;
    font-size: 1.7rem;
    letter-spacing: 0.05em;
  }


  /* ---- buyNow_btn Area ---- */
  .lp_contents .buyNow_btn {
    width: 30rem;
    border-radius: 4rem;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
    border: solid 0.15rem #FFBE5C;
    color: #FFBE5C;
    display: block;
    text-align: center;
    padding: 1.4rem 0;
    margin: 7rem auto 0;
  }
  .lp_contents .buyNow_btn span {
    font-family: Margaret, serif;
    font-weight: 400;
    font-size: 2.2rem;
    letter-spacing: 0.1em;
  }
  /* ---- buyNow_btn Area ---- */


  /* ---- allitem_btn Area ---- */
  .lp_contents .allitem_btn {
    width: 40rem;
    border-radius: 10rem;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
    border: solid 0.15rem #ecb3a6;
    color: #ecb3a6;
    display: block;
    text-align: center;
    padding: 1.6rem 0;
    margin: 10rem auto;
  }
  .lp_contents .allitem_btn span {
    font-family: Margaret, serif;
    font-weight: 400;
    font-size: 3rem;
    letter-spacing: 0.05em;
  }
  /* ---- allitem_btn Area ---- */



/* ---- MAINVISUAL ---- */
  .lp_contents {
    padding-top: 70px;
  }

  .lp_contents .title_logo {
    width: 59rem;
    margin: auto;
  }

  .lp_contents .mv {
    width: 100%;
  }

  .lp_contents .MV_text {
    font-size: 2rem;
    letter-spacing: 0.3em;
    line-height: 2.2;
    text-align: center;
    margin: 8rem auto;
  }

  .lp_contents .MV_main_text p {
    font-size: 2rem;
    line-height: 3;
    letter-spacing: 0.2em;
    padding: 10rem 0;
    margin: 10rem auto 0;
    background: url(../img/MV_text_bg.jpg) no-repeat;
    text-align: center;
    background-size: cover;
  }
  /* ---- MAINVISUAL ---- */


  /* ---- Look1 Area ---- */
  .lp_contents .lookArea {
    position: relative;
    width: 120rem;
    margin: 10rem auto 0;
  }

  .lp_contents .Look1_ttl {
    width: 13.8rem;
    margin: 0 0 0 1.5rem;
  }

  .lp_contents .lookArea h2 {
    font-size: 3.4rem;
    line-height: 1.7;
    letter-spacing: 0.12em;
    color: #FAD416;
    width: 44rem;
    font-weight: 500;
    margin: 4.5rem 0 0 9rem;
  }

  .lp_contents .lookArea .look1_img1 {
    position: relative;
    width: 60rem;
    margin: -30rem 0 0 55rem;
  }

  .lp_contents .lookArea .look1_img2 {
    position: relative;
    width: 55rem;
    margin: -40rem 0 0 5rem;
  }

  /*
  .lp_contents .lookArea .bg1 {
    position: absolute;
    width: 80rem;
    height: 62rem;
    top: 10rem;
    left: -10rem;
    z-index: -1;
  }

  .lp_contents .lookArea .bg2 {
    position: absolute;
    width: 70rem;
    height: 60rem;
    bottom: 4rem;
    right: -20rem;
    z-index: -1;
  }

  .lp_contents .lookArea .bg3 {
    position: absolute;
    width: 40rem;
    height: 45rem;
    bottom: -12rem;
    left: -10rem;
    z-index: -1;
  }
    */

  /* ---- Look1 Area ---- */

  /* ---- How To Use Area ---- */
  .lp_contents .howtoArea {
    width: 110rem;
    margin: 8rem auto 0;
    padding: 8rem 5rem 6.5rem;
    background-color: #fff;
    border-radius: 6rem;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%);
  }

  .lp_contents .howtoArea.__1 .fl_inner {
    flex-direction: row-reverse;
  }

  .lp_contents .howtoArea .fl_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .lp_contents .howtoArea .img_blk {
    width: 48rem;
  }

  .lp_contents .howtoArea .text_blk {
    width: 55rem;
  }

  .lp_contents .howtoArea .text_blk ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
  }

  .lp_contents .howtoArea .text_blk li {
    position: relative;
    width: 17rem;
  }

  .lp_contents .howtoArea .text_blk li::before {
    position: absolute;
    font-size: 2.5rem;
    line-height: 1;
    font-family: Margaret, serif;
    font-weight: 400;
    font-style: normal;
    top: 1rem;
    left: 2rem;
    z-index: -1;
    color: #FCB09F;
  }

  .lp_contents .howtoArea .text_blk li:nth-of-type(1)::before {
    content: "A";
  }
  .lp_contents .howtoArea .text_blk li:nth-of-type(2)::before {
    content: "B";
  }
  .lp_contents .howtoArea .text_blk li:nth-of-type(3)::before {
    content: "C";
  }
  .lp_contents .howtoArea .text_blk li:nth-of-type(4)::before {
    content: "D";
  }
  .lp_contents .howtoArea .text_blk li:nth-of-type(5)::before {
    content: "E";
  }
  .lp_contents .howtoArea .text_blk li:nth-of-type(6)::before {
    content: "F";
  }

  .lp_contents .howtoArea .text_blk li:nth-of-type(n+4) {
    margin-top: 2rem;
  }

  .lp_contents .howtoArea .item_blk p {
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
    margin-top: 0.5rem;
  }

  .lp_contents .howtoArea .text_blk .small_text {
    margin-top: 1.5rem;
  }

  .lp_contents .howtoArea .text_blk .small_text.__1 {
    margin-left: -0.5rem;
  }

  .lp_contents .howtoArea .sub_text {
    position: relative;
    margin: 9rem 0 0 7rem;
    font-size: 1.5rem;
    line-height: 1.7;
    letter-spacing: 0.15em;
  }

  .lp_contents .howtoArea .sub_text::before {
    position: absolute;
    display: block;
    content: "";
    width: 9.7rem;
    height: 7.4rem;
    background: url(../img/howto_icon.svg) no-repeat;
    background-size: 100%;
    top: -7.5rem;
    left: -7rem;
  }

  .lp_contents .howtoArea .sub_text p {
    position: relative;
  }

  .lp_contents .howtoArea .sub_text p:nth-of-type(n+2) {
    margin-top: 2rem;
  }

  .lp_contents .howtoArea .sub_text p::before {
    position: absolute;
    font-size: 1.6rem;
    line-height: 1.5;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #717071;
    margin-left: -2.5rem;
  }

  .lp_contents .howtoArea .sub_text p:nth-of-type(1)::before {
    content: "1.";
  }
  .lp_contents .howtoArea .sub_text p:nth-of-type(2)::before {
    content: "2.";
  }
  .lp_contents .howtoArea .sub_text p:nth-of-type(3)::before {
    content: "3.";
  }
  .lp_contents .howtoArea .sub_text p:nth-of-type(4)::before {
    content: "4.";
  }

  .lp_contents .howtoArea .sub_text .en {
    font-family: Margaret, serif;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.5;
    color: #FCB09F;
  }
  /* ---- How To Use Area ---- */

  /* ---- Look2 Area ---- */
  .lp_contents .lookArea.__2 {
    margin: 15rem auto 0;
  }

  .lp_contents .lookArea.__2 .Look1_ttl {
    margin: 0 38.5rem 0 auto;
  }

  .lp_contents .lookArea.__2 h2 {
    margin: 4.5rem 2rem 0 auto;
  }

  .lp_contents .lookArea.__2 .look1_img1 {
    margin: -30rem 0 0 5rem;
  }

  .lp_contents .lookArea.__2 .look1_img2 {
    margin: -40rem 5rem 0 auto;
  }

  .lp_contents .lookArea.__2 .bg1 {
    position: absolute;
    width: 80rem;
    height: 62rem;
    top: -3rem;
    left: 40rem;
    z-index: -1;
  }

  .lp_contents .lookArea.__2 .bg2 {
    position: absolute;
    width: 70rem;
    height: 60rem;
    bottom: -20rem;
    right: -20rem;
    z-index: -1;
  }

  .lp_contents .lookArea.__2 .bg3 {
    position: absolute;
    width: 60rem;
    height: 45rem;
    bottom: 6rem;
    left: -20rem;
    z-index: -1;
  }

  /* ---- Look2 Area ---- */



  /* ---- campaignArea ---- */
  .lp_contents .campaignArea {
    width: 45rem;
    margin: 0 auto 4rem;
    padding: 6.5rem 8.5rem;
    background-color: rgb(255 255 255 / 60%);
    border-radius: 4rem;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%);
    text-align: center;
  }

  .lp_contents .campaignArea h2 {
    position: relative;
    display: inline-block;
    font-size: 3.8rem;
    line-height: 1;
    font-family: Margaret, serif;
    font-weight: bold;
    font-style: normal;
    color: #F4DB64;
    margin: 0 0 2rem 0;
  }

  .lp_contents .campaignArea h2::before {
    position: absolute;
    display: block;
    content: "";
    width: 2rem;
    height: 0.1rem;
    background-color: #F4DB64;
    top: 1.6rem;
    left: -3rem;
    z-index: 1;
  }

  .lp_contents .campaignArea h2::after {
    position: absolute;
    display: block;
    content: "";
    width: 2rem;
    height: 0.1rem;
    background-color: #F4DB64;
    top: 1.6rem;
    right: -3rem;
    z-index: 1;
  }

  .lp_contents .campaignArea .date {
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    line-height: 1;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #F4DB64;
    margin-top: 2rem;
  }

  .lp_contents .campaignArea .date span {
    font-size: 1.6rem;
    padding: 0 1rem 0 0.5rem;
  }

  .lp_contents .campaignArea .img_blk {
    width: 30rem;
    margin: 3rem auto;
  }

  .lp_contents .campaignArea p:nth-of-type(1) {
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: 0.15em;
  }

  .lp_contents .campaignArea p:nth-of-type(2) {
    font-size: 1.3rem;
    line-height: 1;
    margin-top: 1.5rem;
  }
  /* ---- campaignArea ---- */



  /* ---- handcreamArea ---- */
  .lp_contents .handcreamArea {
    width: 45rem;
    margin: 0 auto 15rem;
    padding: 6.5rem 8.5rem;
    background-color: rgb(255 255 255 / 60%);
    border-radius: 4rem;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%);
    text-align: center;
  }

  .lp_contents .handcreamArea h2 {
    position: relative;
    display: inline-block;
    font-size: 3.8rem;
    line-height: 1;
    font-family: Margaret, serif;
    font-weight: bold;
    font-style: normal;
    color: #F4DB64;
    margin: 0 0 1rem 0;
  }

  .lp_contents .handcreamArea .jp {
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    line-height: 1;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 300;
    color: #F4DB64;
    margin-top: 1rem;
  }

  .lp_contents .handcreamArea .img_blk {
    width: 30rem;
    margin: 3rem auto;
  }

  .lp_contents .handcreamArea p:nth-of-type(1) {
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: 0.15em;
  }

  .lp_contents .handcreamArea p:nth-of-type(2) {
    font-size: 1.7rem;
    line-height: 1;
    margin-top: 1.5rem;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
  }

  .lp_contents .handcreamArea .buyNow_btn {
    margin: 3rem auto 0;
  }

  /* ---- handcreamArea ---- */









/* ---- popup inner ---- */
.popup_campaign.fixed {
  opacity: 1;
}
.popup_campaign {
  opacity: 0;
  transition: opacity .8s ease-in-out;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 100;
  text-align: center;
}

.popup_campaign .details_Items {
  position: relative;
  display: block;
  width: 25rem;
  margin: 0;
}
.popup_campaign .campaign_Items {
  position: relative;
  display: block;
  width: 25rem;
  margin: 0.6rem auto 0;
}

/* ---- popup inner ---- */


/* ===================
  　　　Animation
=================== */

/* -- keyframes -- */

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes tra1 {
  0% {
    opacity: 0;
    transform: translateY(100px);;
  }

  100% {
    opacity: 1;
    transform: translateY(0);;
  }
}



.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa2 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}


.ef2 {
  opacity: 0;
}

.ef2.effect {
  animation: opa2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top {
  opacity: 0;
}

.ef-top.effect {
  animation: tra1 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  opacity: 1;
}


.bg1 {
  animation: horizontal1 4.5s ease-in-out infinite alternate;
}
.bg2 {
  animation: horizontal2 3s ease-in-out infinite alternate;
}
.bg3 {
  animation: vertical 2.5s ease-in-out infinite alternate;
}


@keyframes horizontal1 {
  0% { transform:translateX( -30px); }
  50% { transform:translateY( -30px); }
100% { transform:translateX(  0px); }
}

@keyframes horizontal2 {
  0% { transform:translateX(  30px); }
  50% { transform:translateY( 20px); }
100% { transform:translateX(  0px); }
}

@keyframes vertical {
  0% { transform:translateY(-20px); }
  50% { transform:translateX( 20px); }
100% { transform:translateY(  0px); }
}

/* ===================
  　　　Animation
=================== */



/*=======================================
              Responsive
========================================*/
/* only PC */
@media screen and (min-width: 768px) {
  .sp_only {
    display: none;
  }
}

  /*====================
        tablet
=====================*/
@media only screen and (max-width: 1920px) and (min-width: 768px){
  html {
    font-size: calc(10* (100vw / 1920)) !important;
  }
}


/*=======================================
                    SP
========================================*/

/* only SP */
@media only screen and (max-width: 767px) {
  .pc_only {
    display: none;
  }

  .opening .opening_logo {
    width: calc(350 *(100vw/390));
    height: calc(96 *(100vw/390));;
  }

  .opening .opening_logo {
    top: 45%;
  }

  .lp_menu_area {
    padding: 0 calc(20 *(100vw/390));
  }

  /* ---- buyNow_btn Area ---- */
  .lp_contents .buyNow_btn {
    width: calc(260 *(100vw/390));
    border-radius: calc(40 *(100vw/390));
    font-size: calc(10 *(100vw/390));
    padding: calc(12 *(100vw/390)) 0;
    margin: calc(50 *(100vw/390)) auto 0;
    border: solid 1px #FFBE5C;
  }
  .lp_contents .buyNow_btn span {
    font-size: calc(20 *(100vw/390));
  }
  /* ---- buyNow_btn Area ---- */


  /* ---- allitem_btn Area ---- */
  .lp_contents .allitem_btn {
    width: calc(300 *(100vw/390));
    border-radius: calc(42 *(100vw/390));
    font-size: calc(11 *(100vw/390));
    padding: calc(14 *(100vw/390)) 0;
    margin: calc(65 *(100vw/390)) auto;
    border: solid 1px #ecb3a6;
  }
  .lp_contents .allitem_btn span {
    font-size: calc(22 *(100vw/390));
  }
  /* ---- allitem_btn Area ---- */



/* ---- MAINVISUAL ---- */
  .lp_contents {
    padding-top: 110px;
  }

  .lp_contents .title_logo {
    width: 59rem;
    margin: auto;
  }

  .lp_contents .mv {
    width: 100%;
    padding-top: calc(40 *(100vw/390));
  }

  .lp_contents .MV_text {
    font-size: 2rem;
    letter-spacing: 0.3em;
    line-height: 2.2;
    text-align: center;
    margin: 8rem auto;
  }

  .lp_contents .MV_main_text p {
    font-size: calc(14 *(100vw/390));
    padding: calc(40 *(100vw/390)) 0;
    margin: calc(30 *(100vw/390)) auto 0;
    background: url(../img/MV_text_bg_sp.jpg) no-repeat;
  }

  .lp_contents .MV_ttl {
    display: block;
    width: calc(300 *(100vw/390));
    margin: calc(40 *(100vw/390)) auto calc(30 *(100vw/390));
  }
  /* ---- MAINVISUAL ---- */


  /* ---- Look1 Area ---- */
  .lp_contents .lookArea {
    position: relative;
    width: calc(350 *(100vw/390));
    margin: calc(40 *(100vw/390)) auto 0;
  }

  .lp_contents .Look1_ttl {
    width: calc(80 *(100vw/390));
    margin: 0 0 0 calc(25 *(100vw/390));
  }

  .lp_contents .lookArea h2 {
    font-size: calc(18 *(100vw/390));
    font-weight: 500;
    width: calc(225 *(100vw/390));
    margin: calc(10 *(100vw/390)) 0 calc(40 *(100vw/390)) calc(70 *(100vw/390));
  }

  .lp_contents .lookArea .look1_img1 {
    position: relative;
    width: calc(310 *(100vw/390));
    margin: 0 0 0 auto;
  }

  .lp_contents .lookArea .look1_img2 {
    width: calc(265 *(100vw/390));
    margin: calc(-30 *(100vw/390)) 0 0;
  }

  /*
  .lp_contents .lookArea .bg1 {
    position: absolute;
    width: calc(500 *(100vw/390));
    height: calc(367 *(100vw/390));
    top: calc(20 *(100vw/390));
    left: calc(-100 *(100vw/390));
    z-index: -1;
}

  .lp_contents .lookArea .bg2 {
    position: absolute;
    width: calc(330 *(100vw/390));
    height: calc(318 *(100vw/390));
    bottom: calc(180 *(100vw/390));
    right: calc(-100 *(100vw/390));
    z-index: -1;
  }

  .lp_contents .lookArea .bg3 {
    position: absolute;
    width: calc(290 *(100vw/390));
    height: calc(260 *(100vw/390));
    bottom: calc(-70 *(100vw/390));
    left: calc(46 *(100vw/390));
    z-index: -1;
  }
  */

  /* ---- Look1 Area ---- */

  /* ---- How To Use Area ---- */
  .lp_contents .howtoArea {
    width: 86%;
    margin: calc(40 *(100vw/390)) auto 0;
    padding: calc(50 *(100vw/390)) calc(25 *(100vw/390));
    background-color: #fff;
    border-radius: calc(20 *(100vw/390));
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%);
  }

  .lp_contents .howtoArea.__1 .fl_inner {
    flex-direction: unset;
    flex-wrap: wrap;
  }

  .lp_contents .howtoArea .fl_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .lp_contents .howtoArea .img_blk {
    width: 48rem;
  }

  .lp_contents .howtoArea .text_blk {
    width: 55rem;
  }

  .lp_contents .howtoArea .text_blk ul {
    justify-content: unset;
    margin-top: calc(20 *(100vw/390));
  }

  .lp_contents .howtoArea .text_blk li {
    width: calc(150 *(100vw/390));
  }

  .lp_contents .howtoArea .text_blk li::before {
    position: absolute;
    font-size: calc(25 *(100vw/390));
    line-height: 1;
    font-family: Margaret, serif;
    font-weight: 400;
    font-style: normal;
    top: calc(7 *(100vw/390));
    left: calc(18 *(100vw/390));
    z-index: -1;
    color: #FCB09F;
  }

  .lp_contents .howtoArea .text_blk li:nth-of-type(n+3) {
    margin-top: calc(10 *(100vw/390));
  }

  .lp_contents .howtoArea .item_blk p {
    font-size: calc(12 *(100vw/390));
    white-space: unset;
    margin-top: calc(12 *(100vw/390));
  }

  .lp_contents .howtoArea .text_blk .small_text {
    margin-top: 1.5rem;
  }

  .lp_contents .howtoArea .text_blk .small_text.__1 {
    margin-left: -0.5rem;
  }

  .lp_contents .howtoArea .sub_text {
    margin: calc(70 *(100vw/390)) 0 0 calc(25 *(100vw/390));
    font-size: calc(13 *(100vw/390));
  }

  .lp_contents .howtoArea .sub_text::before {
    width: calc(95 *(100vw/390));
    height: calc(70 *(100vw/390));
    top: calc(-80 *(100vw/390));
    left: calc(-42 *(100vw/390));
  }

  .lp_contents .howtoArea .sub_text p {
    position: relative;
  }

  .lp_contents .howtoArea .sub_text p:nth-of-type(n+2) {
    margin-top: 2rem;
  }

  .lp_contents .howtoArea .sub_text p::before {
    font-size: calc(14 *(100vw/390));
    margin-left: calc(-20 *(100vw/390));
  }

  .lp_contents .howtoArea .sub_text .en {
    font-size: calc(15 *(100vw/390));
  }
  /* ---- How To Use Area ---- */

  /* ---- Look2 Area ---- */
  .lp_contents .lookArea.__2 {
    margin: calc(60 *(100vw/390)) auto 0;
  }

  .lp_contents .lookArea.__2 .Look1_ttl {
    margin: 0 0 0 calc(25 *(100vw/390));
  }

  .lp_contents .lookArea.__2 h2 {
    margin: calc(10 *(100vw/390)) 0 calc(40 *(100vw/390)) calc(70 *(100vw/390));
  }

  .lp_contents .lookArea.__2 .look1_img1 {
    margin: 0;
  }

  .lp_contents .lookArea.__2 .look1_img2 {
    margin: calc(-30 *(100vw/390)) 0 0 auto;
  }

  .lp_contents .lookArea.__2 .bg1 {
    position: absolute;
    width: calc(500 *(100vw/390));
    height: calc(488 *(100vw/390));
    top: calc(0 *(100vw/390));
    left: calc(-80 *(100vw/390));
    z-index: -1;
  }

  .lp_contents .lookArea.__2 .bg2 {
    position: absolute;
    width: calc(320 *(100vw/390));
    height: calc(227 *(100vw/390));
    bottom: calc(-30 *(100vw/390));
    left: calc(-30 *(100vw/390));
    z-index: -1;
  }

  .lp_contents .lookArea.__2 .bg3 {
    position: absolute;
    width: calc(342 *(100vw/390));
    height: calc(358 *(100vw/390));
    bottom: calc(120 *(100vw/390));
    left: calc(-120 *(100vw/390));
    z-index: -1;
  }

  /* ---- Look2 Area ---- */



  /* ---- campaignArea ---- */
  .lp_contents .campaignArea {
    width: 72%;
    margin: 0 auto calc(30 *(100vw/390));
    padding: calc(45 *(100vw/390)) calc(48 *(100vw/390));
    background-color: rgb(255 255 255 / 60%);
    border-radius: calc(20 *(100vw/390));
  }

  .lp_contents .campaignArea h2 {
    font-size: calc(36 *(100vw/390));
    line-height: 1.2;
    margin: 0 0 calc(15 *(100vw/390)) 0;
  }

  .lp_contents .campaignArea h2::before {
    display: none;
  }

  .lp_contents .campaignArea h2::after {
    display: none;
  }

  .lp_contents .campaignArea .date {
    font-size: calc(21 *(100vw/390));
  }

  .lp_contents .campaignArea .date span {
    font-size: calc(16 *(100vw/390));
    padding: 0 calc(10 *(100vw/390)) 0 calc(7 *(100vw/390));
  }

  .lp_contents .campaignArea .img_blk {
    width: 100%;
    margin: calc(20 *(100vw/390)) auto calc(40 *(100vw/390));
  }

  .lp_contents .campaignArea p:nth-of-type(1) {
    font-size: calc(14 *(100vw/390));
    line-height: 1.7;
  }

  .lp_contents .campaignArea p:nth-of-type(2) {
    font-size: calc(12 *(100vw/390));
    line-height: 1;
    margin-top: calc(15 *(100vw/390));
  }
  /* ---- campaignArea ---- */



  /* ---- handcreamArea ---- */
  .lp_contents .handcreamArea {
    width: 72%;
    margin: 0 auto calc(150 *(100vw/390));
    padding: calc(45 *(100vw/390)) calc(48 *(100vw/390));
    border-radius: calc(20 *(100vw/390));
  }

  .lp_contents .handcreamArea h2 {
    font-size: calc(36 *(100vw/390));
    line-height: 1.2;
    margin: 0 0 calc(2 *(100vw/390)) 0;
  }

  .lp_contents .handcreamArea .jp {
    font-size: calc(14 *(100vw/390));
  }

  .lp_contents .handcreamArea .img_blk {
    width: 100%;
    margin: calc(25 *(100vw/390)) auto calc(30 *(100vw/390));
  }

  .lp_contents .handcreamArea p:nth-of-type(1) {
    font-size: calc(14 *(100vw/390));
  }

  .lp_contents .handcreamArea p:nth-of-type(2) {
    font-size: calc(14 *(100vw/390));
    margin-top: calc(15 *(100vw/390));
  }

  .lp_contents .handcreamArea .buyNow_btn {
    margin: calc(30 *(100vw/390)) auto 0;
  }

  /* ---- handcreamArea ---- */

  * {
    word-break: unset;

  }

  #share {
    left: 85% !important;
  }

}