@charset "UTF-8";

/*//////////////////////////////////////////////////

Title : LP CSS

//////////////////////////////////////////////////*/


/* ========================================================
                      * Layout style *
========================================================= */
/*
html {
  font-size: 62.5%;
}*/

main {
  max-width: 100%;
}

footer {
  margin-top: 0;
}

a {
  text-decoration: none;
}

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

.topic-path {
  margin-right: 0;
  margin-left: 0;
}

#header_bottom {
  display: none !important;
}

#share {
  z-index: 200 !important;
}

#Wrap {
  padding-top: calc(88 * 56rem/750);
}

/* ===================
  LP Contents
=================== */

.lp_contents {
  margin: 0 auto;
  padding: 0;
  color: #6B6B6B;
  font-size: calc(15 * 56rem/430);
  font-family: 'futura-pt', "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
}

#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_contents ul,
.lp_contents li {
  list-style: none;
}

.lp_contents a:hover {}

.lp_contents img {
  max-width: 100%;
  /* width: auto; */
}

.lp_contents sup {
  font-size: calc(12 * 56rem/750);
}

.lp_contents a,
.lp_contents a:before,
.lp_contents a:after,
.lp_contents a img {
  transition: opacity .3s ease-in-out,
  color .3s ease-in-out,
  background-color .3s ease-in-out,
  background-image .3s ease-in-out,
  border-color .3s ease-in-out,
  text-shadow .3s ease-in-out,
  text-weight .3s ease-in-out;
}

.lp_contents h1 {
  padding: 0;
}

/* -- List -- */

.list ul {
  letter-spacing: -0.4em;
}

.list ul li {
  display: inline-block;
  letter-spacing: 0.08em;
  vertical-align: top;
}


/* -- List Dot -- */

.list_dot,
.list.list_dot {
  margin: 1em 0;
}

.list_dot .list_dot {
  margin: 0 0 .5em;
}

.list_dot ul,
.list.list_dot ul {
  margin: 0;
  padding-left: 1.5em !important;
}

.list_dot ul li {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  list-style-type: none;
  line-height: 1.8;
}

.list_dot ul li ul {
  padding-top: 2px;
  padding-left: 2.5em !important;
}

.list_dot ul li:before {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: -1em;
  margin-right: 14px;
  background: #555;
  border-radius: 100%;
  vertical-align: middle;
  content: "";
}


/* ===================
  　　 General
=================== */

.lp_contents .txt_center {
  text-align: center;
}

.lp_contents .txt_bold {
  font-weight: 500;
}

.lp_contents .txt_en {}

.lp_contents .txt_mincho {}

.section {

  position: relative;
  z-index: 2;
}

/* ===================
  　　　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(10px);
  }

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

@keyframes tra1 {
  100% {
    transform: translateX(0);
  }
}

@keyframes tra2 {
  100% {
    transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    transform: translateY(50px);
  }

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


@keyframes tra3_2 {
  0% {
    transform: translateY(60px);
  }

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

@keyframes tra4 {
  0% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra5 {
  0% {
    transform: translateX(-30%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra6 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa1 1.6s 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;
  transform: translateY(50px);
}

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

.ef-top2 {
  opacity: 0;
  transform: translateY(60px);
}

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

.ef-right {
  opacity: 0;
  transform: translateX(6%);
}

.ef-right.effect {
  animation: opa1 1.2s ease-in 0s 1 forwards, tra4 1.2s ease-in-out 0s 1 forwards;
}

.ef-left {
  opacity: 0;
}

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

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


/* ===================
  　Section Common
=================== */

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.inner {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* ===================
     Text Setting
=================== */

.txt_cont {
  text-align: center;
  line-height: 1.7;
}


/* ===================
  Button Setting
=================== */

.btn_wrap {
  text-align: center;
}

/* ===================
  　CONTENTS INNER
=================== */

.lp_contents_inner {
  width: 56rem;
  margin: auto;
  background: #009470;
}

/* ===================
  　　MAIN VISUAL
=================== */


.mv_section {
  position: relative;
  z-index: 0;
}

.mv_logo {
  background: #fff;
  padding-top: calc(25 * 56rem/430);
  padding-bottom: calc(25 * 56rem/430);
  text-align: center;
}

.mv_section .inner {
  overflow-x: hidden;
  position: relative;
  text-align: center;
  padding-bottom: 0;
}

.mv_section .mv_logo {
}

.mv_section .mv_logo img {
  width: calc(200 * 56rem/430);
  margin: auto;
  vertical-align: bottom;
}

.mv_section .mv_main {
  position: absolute;
  top: calc(60 * 56rem/430);
  left: 0;
  right: 0;
  margin: auto;
  padding-left: calc(26 * 56rem/430);
  color: #EFE86A;
  font-size: calc(33 * 56rem/430);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.mv_section .mv_video {
  margin-top: -1px;
  margin-left: -1px;
}

.mv_section .mv_video iframe {
  width: 100%;
  height: calc(1240 * 56rem/430);
}

.mv_section .mv_sub_wrap {
  position: absolute;
  top: calc(640 * 56rem/430);
  left: 0;
  right: 0;
  width: calc(367 * 56rem/430);
  margin: auto auto  calc(120 * 56rem/430);
}

.mv_section .mv_sub {
  position: absolute;
  top: 0;
  left: calc(18 * 56rem/430);
  color: #E8C0D0;
  font-size: calc(30 * 56rem/430);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  display: inline-block;
  background: linear-gradient(to right, #E8C0D0 88%, rgba(232, 192, 208, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  transition: none; /* 初期状態ではアニメーションを無効化 */
}

.mv_section .mv_sub_wrap.effect .mv_sub {
  animation: fadeIn 1.2s ease-out forwards, expandWidth 1.2s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes expandWidth {
  from { width: 0; }
  to { width: 100%; }
}

.mv_section .mv_sub span {
  display: inline-block;
  margin-right: auto;
  white-space: nowrap;
  float: left;
}

.mv_section .txt_cont {
  position: absolute;
  top: calc(840 * 56rem/430);
  left: 0;
  right: 0;
  font-size: calc(18 * 56rem/430);
  color: #fff;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
}

.mv_section .txt_cont p {
  padding-bottom: calc(18 * 56rem/430);
}



/* ===================
  　　LIMITED KIT
=================== */

.kit_section {
  position: relative;
  background: #EFE86A;
  padding-top: calc(50 * 56rem/430);
  padding-bottom: calc(100 * 56rem/430);
}

.kit_section::before {
  position: absolute;
  top: calc(-60 * 56rem/430);
  left: 0;
  width: 100%;
  height: calc(60 * 56rem/430);
  background: url(../img/wave01.svg) no-repeat;
  background-size: 100%;
  content: "";
}

.kit_section::after {
  position: absolute;
  bottom: calc(-1000 * 56rem/430);
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(2000 * 56rem/430);
  background: #EFE86A;
  content: "";
}

.ttl_section {
  display: inline-block;
  overflow: hidden;
  margin-bottom: calc(40 * 56rem/430);
  font-size: calc(48 * 56rem/430);
  letter-spacing: 0.022em;
  text-align: center;
}

.ttl_section.effect span {
  opacity: 0;
  transform: translateY(10px);
  display: inline-block;
  animation: fadeUp 0.3s ease-out forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kit_section .ttl_section {
  padding-top: calc(80 * 56rem/430);
  background: url(../img/icn_ribon.svg) no-repeat center top;
  background-size: calc(84 * 56rem/430);
  color: #009470;
  letter-spacing: 0.2em;
}

.product_caption {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(72* 56rem / 430);
  margin-bottom: calc(24 * 56rem/430);
  font-weight: 600;
  font-size: calc(24 * 56rem/430);
  line-height: 160%;
  letter-spacing: 0.1em;
  color: #6B6B6B;
}

.product_img {
  overflow: hidden;
  width: calc(343 * 56rem/430);
  margin: auto;
  border-radius: calc(20 * 56rem/430);
  margin-bottom: calc(20 * 56rem/430);
}

.product_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.product_name {
  font-style: normal;
  font-weight: 600;
  font-size: calc(17 * 56rem/430);
  line-height: 1.2;
  text-align: center;
  color: #009470;
}

.product_price {
  font-weight: 600;
  font-size: calc(38 * 56rem/430);
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.09em;
  color: #009470;
}

.product_price .txt_tax {
  margin-left: calc(-2 * 56rem/430);
  font-size: calc(20 * 56rem/430);
  font-weight: bold;
}

.product_btn {
  margin: calc(5 * 56rem/430) auto;
}

.product_btn a {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(290 * 56rem/430);
  height: calc(60 * 56rem/430);
  margin: auto;
  color: #fff;
  font-size: calc(31 * 56rem/430);
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.22em;
}

.product_btn a::before {
  transition: all 0.4s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  background: #009470;
  content: "";
}

.product_btn a:hover::before {
  top: calc(-5 * 56rem/430);
  right: calc(-15 * 56rem/430);
  left: calc(-15 * 56rem/430);
  bottom: calc(-5 * 56rem/430);
}

.product_btn span {
  display: block;
  position: relative;
  z-index: 2;
}

/* -- kit_recommend --*/

.kit_recommend {
  padding-top: calc(60 * 56rem/430);
  color: #009470;
}

.kit_recommend h3 {
  display: inline-block;
  margin-bottom: calc(28 * 56rem/430);
  padding: calc(8 * 56rem/430) calc(26 * 56rem/430) calc(6 * 56rem/430);
  background: #fff;
  border-radius: calc(13 * 56rem/430);
  font-weight: 600;
  font-size: calc(24 * 56rem/430);
  line-height: 160%;
  text-align: center;
  letter-spacing: 0.1em;
}

.kit_recommend ul {
  padding-bottom: calc(20 * 56rem/430);
}

.kit_recommend ul li {
  width: fit-content;
  margin: auto;
  padding-left: calc(25 * 56rem/430);
  padding-bottom: calc(13 * 56rem/430);
  background: url(../img/icn_check.svg) no-repeat 0 calc(5 * 56rem/430);
  background-size: calc(21 * 56rem/430);
  letter-spacing: 0.1em;
  font-size: calc(21 * 56rem/430);
  font-weight: 600;
}

.kit_recommend .btn_more {
  padding-bottom: calc(22 * 56rem/430);
  background: url(../img/icn_arw.svg) no-repeat bottom center;
  background-size: calc(34 * 56rem/430);
  font-size: calc(34 * 56rem/430);
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* ===================
  　　ACCODION
=================== */

.acc_contents_area {
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
  max-height: calc(310 * 56rem/430);
  margin-top: calc(-60 * 56rem/430);
  padding-top: calc(60 * 56rem/430);
}

.acc_contents_area.active {
  max-height: calc(10000 * 56rem/430);
}

.acc_contents_area::after {
  transition: all 0.3s ease-in-out;
  opacity: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  height: 102%;
  background: linear-gradient(0deg, rgba(232, 192, 208, 1) 0%, rgba(232, 192, 208, 0.815360576923077) 29%, rgba(232, 192, 208, 0.38766826923076925) 58%, rgba(232, 192, 208, 0) 100%);
  content: "";
}

.acc_contents_area.active::after {
  display: none;
}

.acc_contents_area .acc_more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(40* 56rem / 430);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(290* 56rem / 430);
  height: calc(60* 56rem / 430);
  background: #009470;
  margin: auto;
  color: #fff;
  font-size: calc(31* 56rem / 430);
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.22em;
  cursor: pointer;
}

.acc_contents_area .acc_more::before {
  position: absolute;
  top: 50%;
  right: calc(57 * 56rem/430);
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: calc(12 * 56rem/430) calc(8 * 56rem/430);
  border-top-color: #fff;
  border-bottom: 0;
  margin-top: calc(-5 * 56rem/430);
  transform: rotate(0);
  content: "";
}

.acc_contents_area.active .acc_more {
  display: none;
}

/* ===================
  　　ITEM
=================== */

.item_section {
  position: relative;
  background: #fff;
  padding-top: calc(50 * 56rem/430);
  padding-bottom: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFEEB 60.88%);
  color: #6B6B6B;
}

.acc_contents_area::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(60 * 56rem/430);
  background: url(../img/wave02.svg) no-repeat;
  background-size: 100%;
  content: "";
}

.item_section::after {
  position: absolute;
  bottom: calc(-1000 * 56rem/430);
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(2000 * 56rem/430);
  background: #F0E4D7;
  content: "";
}

.item_section .product_scrub .ttl_section {
  margin-bottom: calc(18 * 56rem/430);
  font-weight: 500;
  font-size: calc(40 * 56rem/430);
  line-height: 105%;
  text-align: center;
}

.item_section .product_scrub .ttl_sub {
  margin-bottom: calc(22 * 56rem/430);
  font-weight: 300;
  font-size: calc(15 * 56rem/430);
  line-height: 160%;
  text-align: center;
}

.product_cap {
  margin-bottom: calc(18 * 56rem/430);
  font-weight: 600;
  font-size: calc(23 * 56rem/430);
  line-height: 160%;
  text-align: center;
  letter-spacing: 0.05em;
}

.product_cont {
  width: fit-content;
  margin: auto;
  font-weight: 600;
  font-size: calc(18 * 56rem/430);
  line-height: 146%;
  letter-spacing: 0.09em;
  text-align: left;
}

.product_cont sup {
  font-size: calc(11 * 56rem/430);
}

.product_cont .txt_sm {
  display: block;
  padding-top: calc(10 * 56rem/430);
  line-height: 1.4;
}


/* シュガー ボディスクラブ ゴールデンハニー */

.item_section .product_scrub01 {
}

.item_section .product_scrub01 .ttl_section {
  color: #F0BF2C;
}

/* シュガー ボディスクラブ　ホットチョコレート */

.item_section .product_scrub02 {
  position: relative;
  padding-top: calc(100 * 56rem/430);
  padding-bottom: calc(240 * 56rem/430);
  background: linear-gradient(180deg, rgba(240, 228, 215, 0) 0%, #F0E4D7 21%);
}

.item_section .product_scrub02 .ttl_section {
  color: #C09067;
}

.item_section .product_scrub02 .product_cap {
  letter-spacing: 0;
}



/* ===================
  　　HOW TO
=================== */

.howto_section {
  position: relative;
  padding-bottom: calc(100 * 56rem/430);
  background: #E8C0D0;
  color: #6B6B6B;
}

.howto_section::before {
  position: absolute;
  top: calc(-170 * 56rem/430);
  left: 0;
  width: 100%;
  height: calc(300 * 56rem/430);
  background: url(../img/wave03.svg) no-repeat;
  background-size: 100%;
  content: "";
}

.howto_section::after {
  position: absolute;
  bottom: calc(-1000 * 56rem/430);
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(2000 * 56rem/430);
  background: #E8C0D0;
  content: "";
}

.howto_section .section_head {
  position: relative;
  z-index: 2;
  margin-bottom: calc(50 * 56rem/430);
  color: #009470;
}

.howto_section .ttl_section {
  margin: auto;
}

.howto_section .ttl_sub {
  font-weight: 600;
  font-size: calc(20 * 56rem/430);
  line-height: 150%;
  letter-spacing: 0.43em;
  color: #009470;
}

.howto_section .howto_img {
  width: calc(343 * 56rem/430);
  margin: 0 auto calc(58 * 56rem/430);
}

.step_list {
  padding-bottom: calc(100 * 56rem/430);
}

.step_list li {
  position: relative;
  margin-bottom: calc(20 * 56rem/430);
  padding-bottom: calc(80 * 56rem/430);
}

.step_list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.step_list li::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: calc(34 * 56rem/430) calc(25 * 56rem/430);
  border-top-color: #009470;
  border-bottom: 0;
  margin-left: calc(-20 * 56rem/430);
  content: "";
}

.step_list li:last-child::before {
  display: none;
}

.step_list dt {
  margin-bottom: calc(20 * 56rem/430);
  color: #009470;
  font-weight: 500;
  font-size: calc(44 * 56rem/430);
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.12em;
}

.step_list dt span {
  padding-left: calc(10 * 56rem/430);
  font-size: calc(54 * 56rem/430);
}

.step_list dd {
  width: calc(352 * 56rem/430);
  margin: auto;
  padding: calc(30 * 56rem/430) calc(20 * 56rem/430);
  border-radius: calc(12 * 56rem/430);
  background: #fff;
  text-align: center;
}

.step_list .step_catch {
  margin-bottom: calc(20 * 56rem/430);
  font-weight: 600;
  font-size: calc(19 * 56rem/430);
  line-height: 130%;
}

.step_list .step_cont {
  font-weight: 500;
  font-size: calc(16 * 56rem/430);
  line-height: 150%;

}


/* -- staff_review -- */

.staff_review {

}

.staff_review .ttl_section {
  margin-bottom: calc(15 * 56rem/430);
  font-weight: 500;
  font-size: calc(48 * 56rem/430);
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.06em;
  color: #009470;
}

.staff_review .review_list {
  position: relative;
  overflow: hidden;
}

.staff_review .staff_review_contents {
  width: calc(352 * 56rem/430);
  margin: auto ;
  padding: calc(15 * 56rem/430) calc(20 * 56rem/430) calc(30 * 56rem/430) ;
  border-radius: calc(12 * 56rem/430);
  background: #fff;
  text-align: center;
}

.staff_review .review_head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin-bottom: calc(20 * 56rem/430);
}

.staff_review .review_head.img_right {
  flex-direction: row-reverse;
}


.staff_review .review_head .staff_icn {
  width: calc(69 * 56rem/430);
}

.staff_review .review_head .review_catch {
  position: relative;
  width: calc(221 * 56rem/430);
  padding: calc(10 * 56rem/430) 0 calc(10 * 56rem/430) calc(14 * 56rem/430);
  font-weight: 600;
  font-size: calc(15 * 56rem/430);
  line-height: 143%;
  letter-spacing: 0.02em;
  color: #6B6B6B;
  border-radius: calc(10 * 56rem/430);
  border: 1px solid #6B6B6B;
  text-align: left;
}

.staff_review .review_head .review_catch::before {
  position: absolute;
  top: 50%;
  left: calc(-5 * 56rem/430);
  width: calc(10 * 56rem/430);
  height: calc(10 * 56rem/430);
  margin-top: calc(-5 * 56rem/430);
  background: #fff;
  content: "";
}

.staff_review .review_head .review_catch::after {
  position: absolute;
  top: 50%;
  left: calc(-15* 56rem / 430);
  width: calc(14* 56rem / 430);
  height: 1px;
  margin-top: calc(1* 56rem / 430);
  transform: rotate(20deg);
  background: #6B6B6B;
  content: "";
}

.staff_review .review_head.img_right .review_catch::before {
  right: calc(-5 * 56rem/430);
  left: auto;
}

.staff_review .review_head.img_right .review_catch::after {
  right: calc(-14* 56rem / 430);
  left: auto;
  transform: rotate(344deg);
}

.staff_review .staff_name {
  margin-bottom: calc(15 * 56rem/430);
  padding: 0 calc(12 * 56rem/430);
  background: linear-gradient(transparent 50%, rgba(232, 192, 208, 0.29) 50%);
  text-align: left;
}

.staff_review .review_cont {
  padding: 0 0 0 calc(10 * 56rem/430);
  text-align: left;
  font-size: calc(12 * 56rem/430);
}

.style_pink .staff_name {
  background: linear-gradient(transparent 50%, rgba(232, 192, 208, 0.29) 50%);
}

.style_green .staff_name {
  background: linear-gradient(transparent 50%, rgba(0, 148, 112, 0.29) 50%);
}

.style_yellow .staff_name {
  background: linear-gradient(transparent 50%, rgba(239, 232, 106, 0.29) 50%);
}

.style_yellow .review_cont {
  white-space: nowrap;
  letter-spacing: -0.02em;
}


/* ===================
  　　LINEUP
=================== */

.lineup_section {
  position: relative;
  background: url(../img/bg_scrub.jpg) no-repeat 0 0 #E8C0D0;
  background-size: 100%;
  padding-top: calc(86 * 56rem/430);
  padding-bottom: calc(280 * 56rem/430);
}

.lineup_section::after {
  position: absolute;
  bottom: calc(-5000 * 56rem/430);
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(6000 * 56rem/430);
  background: #E8C0D0;
  content: "";
}

.lineup_section .section_head {
  margin-bottom: calc(107 * 56rem/430);
  color: #fff;
}

.lineup_section .section_head .ttl_section {
  margin-bottom: calc(22 * 56rem/430);
  font-weight: 500;
  font-size: calc(48 * 56rem/430);
  line-height: 110%;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.lineup_section .section_head .ttl_sub {
  font-weight: 600;
  font-size: calc(16 * 56rem/430);
  line-height: 120%;
  text-align: center;
  letter-spacing: 0.09em;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.lineup_section .product_caption {
  margin-bottom: calc(22* 56rem / 430);
  color: #009470;
  font-size: calc(25* 56rem / 430);
  line-height: 1.4;
}

.lineup_section .product_img {
}

.lineup_section .product_name {
  font-size: calc(15* 56rem / 430);
}

.lineup_section .product_btn a,
.lineup_section .product_btn a::before {
  color: #EFE86A;
}

/* -- product_review -- */

.product_review {
  width: calc(352* 56rem / 430);
  margin: calc(15* 56rem / 430) auto calc(40* 56rem / 430);
  padding: calc(13* 56rem / 430);
  border-radius: calc(7* 56rem / 430);
  background: #fff;
  text-align: center;
}

.product_review__ttl {
  width: fit-content;
  margin: auto auto calc(12* 56rem / 430);
  padding-right: calc(36* 56rem / 430);
  background: url(../img/icn_review.svg) no-repeat right center;
  background-size: calc(26* 56rem / 430);
  font-weight: 600;
  font-size: calc(18* 56rem / 430);
  line-height: calc(24* 56rem / 430);
  display: flex;
  align-items: flex-end;
  text-align: center;
  letter-spacing: 0.12em;
  color: #6B6B6B;
}

.product_review__cont {
  position: relative;
  overflow: hidden;
  max-height: calc(35* 56rem / 430);
  padding-bottom: calc(15* 56rem / 430);
  font-weight: 300;
  font-size: calc(15* 56rem / 430);
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.product_review__cont::before {
  transition: all 0.3s ease-in-out;
  opacity: 1;
  position: absolute;
  left: 0;
  bottom: calc(-20 * 56rem/430);
  width: 100%;
  height: calc(80 * 56rem/430);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8861298076923076) 21%, rgba(255,255,255,0.40920673076923075) 81%, rgba(255,255,255,0) 100%);
  content: "";
}

.product_review.active .product_review__cont {
  max-height: calc(800* 56rem / 430);
}

.product_review.active .product_review__cont::before {
  opacity: 0;
}

.product_review .btn_more {
  position: relative;
  top: calc(-5* 56rem / 430);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(236* 56rem / 430);
  height: calc(34* 56rem / 430);
  margin: auto;
  border-radius: calc(200* 56rem / 430);
  background: #E8C0D0;
  font-weight: 500;
  font-size: calc(20* 56rem / 430);
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.2em;
  color: #009470;
  cursor: pointer;
}

.product_review .btn_more::before {
  position: absolute;
  top: 50%;
  right: calc(17 * 56rem/430);
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: calc(12 * 56rem/430) calc(8 * 56rem/430);
  border-top-color: #009470;
  border-bottom: 0;
  margin-top: calc(-5 * 56rem/430);
  content: "";
}

.product_review.active .btn_more {
  display: none;
}

/* -- product_slider -- */

.product_area_slider {
  position: relative;
  overflow: hidden;
}

.swiper-button-prev,
.swiper-button-next {
  width: calc(18 * 56rem/430);
  height: calc(30 * 56rem/430);
  background-size: 100%;
  margin-top: calc(-25 * 56rem/430);
}

.swiper-button-prev {
  left: calc(8 * 56rem/430);
}

.swiper-button-next {
  right: calc(8 * 56rem/430);
}

.swiper-button-prev {
  background-image: url(../img/icn_prev.svg);
}

.swiper-button-next {
  background-image: url(../img/icn_next.svg);
}

.product_area_slider .swiper-button-prev,
.product_area_slider .swiper-button-next {
  top: calc(280 * 56rem/430);
  margin-top: 0;
}

.swiper-button-prev::before,
.swiper-button-next::before,
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}

/* ===================
  　　GIFT
=================== */

.gift_section {
  color: #6B6B6B;
}

.gift_section::before {
  position: absolute;
  top: calc(-170 * 56rem/430);
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(300 * 56rem/430);
  background: url(../img/wave04.svg) no-repeat;
  background-size: 100%;
  content: "";
}

.gift_section .inner {
  background: #fff;
}

.gift_section .section_head {
  margin-bottom: calc(100 * 56rem/430);
  color: #009470;
}

.gift_section .ttl_section {
  margin: auto auto calc(10 * 56rem/430);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.gift_section .ttl_sub {
  font-weight: 600;
  font-size: calc(16 * 56rem/430);
  line-height: 150%;
  letter-spacing: 0.43em;
  color: #009470;
}

.gift_section .gift_img {
  overflow: hidden;
  width: calc(325 * 56rem/430);
  margin: 0 auto calc(40 * 56rem/430);
  border-radius: calc(20 * 56rem/430);
}

.gift_section .gift_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

/* -- product_gift -- */

.product_gift {
  padding-bottom: calc(180 * 56rem/430);
}

.product_gift .ttl_gift {
  position: relative;
  width: calc(322 * 56rem/430);
  margin: 0 auto calc(35 * 56rem/430);
  padding: calc(12 * 56rem/430) calc(10 * 56rem/430);

  border-radius: calc(4 * 56rem/430);
  font-weight: 600;
  font-size: calc(22.6 * 56rem/430);
  line-height: 120%;
  text-align: center;
  letter-spacing: 0.11em;
  color: #009470;
}

.product_gift .ttl_gift::before {
  position: absolute;
  right: calc(30 * 56rem/430);
  bottom: calc(-20 * 56rem/430);
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: calc(29 * 56rem/430) calc(21 * 56rem/430) calc(18 * 56rem/430) calc(0 * 56rem/430);
  border-top-color: #E8C0D0;
  border-bottom: 0;
  margin-top: calc(-5 * 56rem/430);
  transform: rotate(10deg);
  content: "";
}

.product_gift .ttl_gift.effect::after {
  opacity: 0;
  position: absolute;
  top: calc(-92 * 56rem/430);
  right: calc(0 * 56rem/430);
  width: calc(78 * 56rem/430);
  height: calc(90 * 56rem/430);
  background: url(../img/icn_present_01.svg) no-repeat;
  background-size: 100%;
  animation: gift_anime 1s ease-in-out 1 forwards;
  transform: rotate(-11deg) translate(-10px,30px);
  content: "";
}

@keyframes gift_anime {
  0% {
    opacity: 0;
    transform: rotate(-11deg) translate(-10px,30px);
  }

  100% {
    opacity: 1;
    transform: rotate(0deg) translate(0px,0px);
  }
}

.product_gift .product_caption {
  color: #009470;
  font-size: calc(27 * 56rem/430);
  line-height: 1.4;
}

/* product_gift01 */
.product_gift01 {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(246,238,243,1) 30%, rgba(246,238,243,1) 70%, rgba(252,249,248,1) 100%);}

.product_gift01 .ttl_gift {
  color: #009470;
  background-color: #E8C0D0;
}

.product_gift01 .ttl_gift::before {
  border-top-color: #E8C0D0;
}

.product_gift01 .product_btn a,
.product_gift01 .product_btn a::before,
.product_gift01 .btn_more,
.product_gift01 .btn_more::before {
  color: #009470;
  background-color: #E8C0D0;
}


/* product_gift02 */
.product_gift02 {
  background: linear-gradient(180deg, rgba(252,249,248,1) 0%, rgba(252,251,245,1) 30%, rgba(252,251,245,1) 70%, rgba(244,249,240,1) 100%);
}

.product_gift02 .ttl_gift {
  color: #009470;
  background-color: #EFE86A;
}

.product_gift02 .ttl_gift::before {
  border-top-color: #EFE86A;
}

.product_gift02 .ttl_gift.effect::after {
  top: calc(-98 * 56rem/430);
  left: calc(10 * 56rem/430);
  right: auto;
  background-image: url(../img/icn_present_02.svg);
}

.product_gift02 .product_btn a,
.product_gift02 .product_btn a::before,
.product_gift02 .btn_more,
.product_gift02 .btn_more::before {
  color: #009470;
  background-color: #EFE86A;
}

.product_gift02 .product_review__ttl {
  background-image: url(../img/icn_review_02.svg);
}

/* product_gift03 */
.product_gift03 {
  padding-bottom: calc(100 * 56rem/430);
  background: linear-gradient(180deg, rgba(244,249,240,1) 0%, #e9f5f1 30%, #ecf6f2 70%, #e8f4f1 100%);

}

.product_gift03 .ttl_gift {
  color: #EFE86A;
  background-color: #009470;
}

.product_gift03 .ttl_gift::before {
  border-top-color: #009470;
}

.product_gift03 .ttl_gift.effect::after {
  background-image: url(../img/icn_present_03.svg);
}

.product_gift03 .product_btn a,
.product_gift03 .product_btn a::before,
.product_gift03 .btn_more,
.product_gift03 .btn_more::before {
  color: #EFE86A;
  background-color: #009470;
}

.product_gift03 .product_review__ttl {
  background-image: url(../img/icn_review_03.svg);
}

/* ===================
  　　FOOT
=================== */

.foot_section {

}

.gv_link_area {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: calc(287 * 56rem/430);
  background: url(../img/bg_gv.jpg) no-repeat ;
  background-size: cover;
  text-align: center;
}

.gv_link_area .foot_logo {
  width: calc(245 * 56rem/430);
  margin: auto auto calc(43 * 56rem/430);
}

.gv_link_area .foot_btn a {
  position: relative;
  display: block;
  width: calc(236 * 56rem/430);
  margin: auto;
  padding: calc(10 * 56rem/430);
  border: 1px solid #fff;
  border-radius: calc(200 * 56rem/430);
  color: #fff;
  font-size: calc(15 * 56rem/430);
  letter-spacing: 0.12em;
}

.gv_link_area .foot_btn a::before {
  position: absolute;
  top: 50%;
  right: calc(17 * 56rem/430);
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: calc(12 * 56rem/430) calc(8 * 56rem/430);
  border-top-color: #fff;
  border-bottom: 0;
  margin-top: calc(-5 * 56rem/430);
  transform: rotate(269deg);
  content: "";
}

.profile_area {
  padding: calc(159 * 56rem/430) 0 calc(112 * 56rem/430);
  background: #C9DBFA;
  color: #000;
  text-align: center;
}

.profile_area .profile_ttl {
  margin-bottom: calc(30 * 56rem/430);
  font-size: calc(32 * 56rem/430);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #E64F25;
}

.profile_area .profile_img {
  width: calc(179 * 56rem/430);
  margin: auto auto calc(30 * 56rem/430);
}

.profile_area .profile_catch {
  margin-bottom: calc(24 * 56rem/430);
  font-size: calc(42 * 56rem/430);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.profile_area .profile_cont {
  margin-bottom: calc(100 * 56rem/430);
  font-size: calc(13* 56rem/430);
  line-height: 1.7;
}

.profile_area .sns_list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(28 * 56rem/430);
}

.profile_area .sns_list li {
  width: calc(41 * 56rem/430);
}


/* ページトップボタンのスタイル */
.btn_pagetop {
  position: fixed;
  bottom: calc(130 * 56rem/430);
  right: calc(30 * 56rem/430);
  opacity: 0; /* 初期状態は透明 */
  visibility: hidden; /* 非表示にする */
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  cursor: pointer;
  z-index: 1000;
  line-height: 1.2;
  width: calc(35 * 56rem/430);
}

.btn_pagetop img {
  width: 100%;
}

.btn_about {
  position: fixed;
  bottom: calc(15 * 56rem/430);
  right: calc(10 * 56rem/430);
  transition: opacity 0.3s, visibility 0.3s;
  width: calc(79 * 56rem/430);
  cursor: pointer;
  z-index: 1000;
  opacity: 0; /* 初期状態は透明 */
  visibility: hidden; /* 非表示にする */
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

.btn_about img {
  width: 100%;
}

/*=======================================
               Responsive
========================================*/


/* only PC */

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


/*=======================================
                    PC
========================================*/

@media screen and (min-width: 768px) {

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

  .lp_contents {
    overflow: hidden;
    background: linear-gradient(180deg, rgba(254,249,251,1) 0%, rgba(253,242,246,1) 28%, rgba(255,250,243,1) 49%, rgba(244,253,243,1) 70%, rgba(224,248,242,1) 100%);
  }

  .lp_contents_inner {
    width: 56rem;
    margin: auto;
  }

  /* ---- スクロールバー ---- */
  .main_section .swiper-scrollbar {
    width: 120.8%;
  }

  .fixed_area {
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 160rem;
    height: 100vh;
    margin: 0 auto;
  }

  .fixed_area .fixed_left,
  .fixed_area .fixed_right {
    display: grid;
    place-items: center;
    width: calc((100% - 56rem) / 2);
    max-width: calc((160rem - 56rem) / 2);
    height: 100%;
  }

  .fixed_area .main_ttl {
    width: calc(300 * 56rem/750);
  }

  .fixed_navi,
  .fixed_navi a {
    color: #009470;
  }

  .fixed_navi {
    font-weight: bold;
  }

  .fixed_navi li {
    margin-bottom: 4rem;
  }

  .fixed_navi a {
    position: relative;
    display: block;
    padding-left: 4rem;
    background-size: 1.3rem;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 110%;
    letter-spacing: 0.09em;
  }

  .fixed_navi img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 2rem;
    margin-top: -1rem;
  }

  /* ページトップボタンのスタイル */
  .btn_pagetop {
    bottom: 20rem;
    right: 6.5rem;
    width: 3rem;
  }

  .btn_about {
    position: fixed;
    bottom: 4rem;
    right: 2rem;
    width: 11rem;
  }

}


/* only tablet */

@media screen and (min-width: 768px) and (max-width: 1200px) {}


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


/* only SP */

@media only screen and (max-width: 767px) {

  #Wrap {
    padding-top: calc(90*(100vw / 586));
  }
  .pc_only {
    display: none;
  }

  .share-txt{
    margin: 0!important;
  }


  /* ===================
    LP Contents
  =================== */
  .lp_contents {
    overflow: hidden;
    letter-spacing: 0;
  }

  .lp_contents sup {
    font-size: calc(10 * (100vw / 375));

  }

  /* ===================
    　Section Common
  =================== */
  .inner{
    width: 100%;
  }

   .contents {
    padding-top: 0;
  }


  /* ===================
         ANIME
  =================== */
  @keyframes tra3 {
    0% {
      transform: translateY(30px);
    }

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


}

/*--------------------------------
   Media Queries ( ~ 768px)
 --------------------------------*/
 @media only screen and (max-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 560));
  }
}

/*--------------------------------
   Media Queries (1400px ~ 1400px)
 --------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  html {
    font-size: calc(10 * (100vw / 1600));
  }
}