/* font-family: 'Caveat', cursive; */

@charset "UTF-8";
/*  common
--------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.08em;
  color: #4C4C4C;
  opacity: 0;
  background-color: #FFFBCD;
  letter-spacing: 0.2em;
  line-height: 1.4;
}
.cursive {
  font-family: "Oooh Baby", cursive;
  font-weight: 400;
  font-style: normal;
}
.ttl_number {
  font-size: 140%;
}
a {
  text-decoration: none;
  display: block;
  transition-duration: 0.6s;
  color: #4C4C4C;
}
img {
  vertical-align: bottom;
  width: 100%;
}
a:hover, .close:hover {
  scale: 0.95;
  opacity: 0.6;
}
.inner {
  width: 95%;
  max-width: 1080px;
  margin: 0 auto;
}
.ttl {
  width: 100%;
  text-align: center;
  position: relative;
}
.ttl h1 {
  letter-spacing: 0.3em;
  background-color: #FFFCE1;
  display: inline-block;
  padding: min(16px, 1vw) min(30px, 1.9vw);
  font-size: min(1.8vw, 28px);
  letter-spacing: 0.2em;
  opacity: 0;
}
.ttl .cursive {
  font-size: min(130px, 8.6vw);
  color: #FFE270;
}
.sp {
  display: none;
}
.worry_area.sp {
  display: none;
}
.in_animation {
  opacity: 0;
}

/* 初期状態 */
.faq_q p, .faq_a p {
  opacity: 0;
}

/* アニメーション定義（左から） */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* アニメーション定義（右から） */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 質問用 */
.faq_q p.fade {
  animation: fadeInLeft 0.6s ease forwards;
}
.faq_modal .faq_q p.fade {
  animation: fadeInLeft 0.6s 1s ease forwards;
}

/* 回答用（遅延あり） */
.faq_a p.fade {
  animation: fadeInRight 0.6s ease 1s forwards;
}
.faq_modal .faq_a p.fade {
  animation: fadeInRight 0.6s ease 2s forwards;
}


/* animation */
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade_in {
  animation-name: fade;
  animation-duration: 0.3s;
  animation-delay: 0.3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes illust_in {
  0% {
    opacity: 0;
    scale: 0.9;
    translate: 0 5%;
  }
  100% {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}
.illust_in {
  opacity: 0;
  animation: illust_in 0.4s 0.3s ease-in 1 forwards;
}

@keyframes fv_illust_yura01 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-5deg);
  }
}
.fv_illust_yura01 {
  opacity: 0;
  animation: illust_in 0.4s 0.9s ease-in 1 forwards, fv_illust_yura01 2s 1.2s ease-in-out infinite alternate-reverse;
}

@keyframes fv_illust_yura02 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
.fv_illust_yura02 {
  opacity: 0;
  animation: illust_in 0.4s 1.2s ease-in 1 forwards, fv_illust_yura02 2s 1.5s ease-in-out infinite alternate-reverse;
}
@keyframes illust_yura01 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}
.illust_yura01 {
  opacity: 0;
  animation: illust_in 0.4s 0.3s ease-in 1 forwards, illust_yura01 2s 0.9s ease-in-out infinite alternate-reverse;
}
@keyframes illust_yura02 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
.illust_yura02 {
  opacity: 0;
  animation: illust_in 0.4s 0.6s ease-in 1 forwards, illust_yura02 2s 1.3s ease-in-out infinite alternate-reverse;
}

@keyframes deco_illust_fuwa {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(20%);
  }
}
.deco_illust_fuwa {
  opacity: 0;
  animation: illust_in 0.4s 0.6s ease-in 1 forwards, deco_illust_fuwa 1.4s 0s ease-in-out infinite alternate-reverse;
}

@keyframes ttl_in {
  0% {
    width: 0px;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: min(620px, 41vw);
  }
}
.ttl_in {
  animation: ttl_in 1s 0s ease-in 1 forwards;
}

@keyframes ttl_in_uruoi {
  0% {
    width: 0px;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: min(580px, 55.4vw);
  }
}
.uruoi_ttl_in {
  animation: ttl_in_uruoi 1s 0s ease-in 1 forwards;
}

@keyframes ttl_in_ingredient {
  0% {
    width: 0px;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: min(660px, 41.8vw);
  }
}
.ttl_in_ingredient {
  animation: ttl_in_ingredient 1s 0s ease-in 1 forwards;
}

@keyframes ttl_in_products {
  0% {
    width: 0px;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    width: min(700px, 46vw);
  }
}
.ttl_in_products {
  animation: ttl_in_products 1s 0s ease-in 1 forwards;
}

@keyframes ttl_in_faqmodal {
  0% {
    width: 0px;
  }
  100% {
    width: 494px;
  }
}
.ttl_in_faqmodal {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  animation: ttl_in_faqmodal 1s 0s ease-in 1 forwards;
}

@keyframes worry_rotate01 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.worry_rotate01 {
  animation: worry_rotate01 6s 0s linear infinite;
}
@keyframes worry_rotate02 {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(540deg);
  }
}
.worry_rotate02 {
  animation: worry_rotate02 6s 0s linear infinite;
}
@keyframes worry_rotate03 {
  0% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(585deg);
  }
}
.worry_rotate03 {
  animation: worry_rotate03 6s 0s linear infinite;
}
@keyframes arrow_up {
  0% {
    transform: translateY(5%);
  }
  100% {
    transform: translateY(-10%);
  }
}
.arrow_up {
  animation: arrow_up 0.6s 0s ease-in-out infinite alternate-reverse;
}


@keyframes illust_fuwa {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10%);
  }
}
.illust_fuwa {
  animation: illust_fuwa 2s 0s ease-in-out infinite alternate-reverse;
}

@keyframes products_all {
  0% {
    scale: 0.8;
    opacity: 0;
    z-index: -1;
    transform: translate(150%, 150%) rotate(45deg);
  }
  50% {
    opacity: 0.6;
    z-index: -1;
  }
  100% {
    scale: 1;
    z-index: 0;
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes scale {
  0% {
    scale: 0.9;
  }
  100% {
    scale: 1;
  }
}
.products_all {
  animation: illust_in 0.4s 0.6s ease-in 1 forwards, scale 1s 1s ease-in-out infinite alternate-reverse;
}

@keyframes products_bubun01 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20%);
  }
}
@keyframes products_bubun02 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(30%);
  }
}
.products_bubun {
  animation: illust_in 0.4s 0.6s ease-in 1 forwards;
}
.products .howto .sheet_bubun:nth-of-type(2).products_bubun {
  animation: illust_in 0.4s 0.6s ease-in 1 forwards, products_bubun01 1.3s 0.6s ease-in-out infinite alternate-reverse;
}
.products .howto .sheet_bubun:nth-of-type(3).products_bubun {
  animation: illust_in 0.4s 0.6s ease-in 1 forwards, products_bubun02 1.3s 0.6s ease-in-out infinite alternate-reverse;
}


 /* ---- loding ----- */
.loading{
  width: 100vw;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url(../img/bg_concept.png) no-repeat center;
  background-size: cover;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* animation: loading_fade_out 0.6s ease-in 2.6s forwards; */
  opacity: 1;
}
/* @keyframes loading_fade_out {
  to {
    opacity: 0;
    visibility: hidden;
  }
} */
.loading .loading_wrap {
  display: flex;
  justify-content: center;
  align-items: end;
  width: 95%;
  max-width: 1080px;
}
.loading_girl {
  width: 30%;
  margin-right: max(-60px, -3.9vw);
}
.loading_logo {
  width: 50%;
  padding: 10%;
  background-color: #fff;
  border-radius: 50%;
  margin-bottom: 20%;
  position: relative;
  opacity: 0;
}
.loading_logo::after {
  content: '';
  position: absolute;
  bottom: min(59px, 5.2vw);
  left: min(2.2vw, 30px);
  margin-top: -13px;
  border: 13px solid transparent;
  border-left: 26px solid #fff;
  z-index: 0;
  -webkit-transform: rotate(133deg);
  transform: rotate(133deg);
}


/* header------ */
.fv_wrapper {
  background: url(../img/bg_fv.png) no-repeat center bottom;
  background-size: cover;
}
header {
  padding: 24px 0 60px;
}
header h2 {
  font-size: clamp(18px, 2.5vw, 38px);
  padding-left: 30px;
}
header h3 {
  /* display: inline-block; */
  /* text-align: center; */
  font-size: clamp(16px, 1.9vw, 30px);
  padding-left: 30px;
  margin-bottom: 20px;
  position: relative;
  /* border-bottom: dashed 2px #FCFBDF; */
}
/* header h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -13px;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #FFDB31, #FFDB31 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #FFDB31, #FFDB31 2px, #fff 2px, #fff 4px);
} */
header p {
  text-align: center;
}
.seibun_area {
  width: 95%;
  max-width: 750px;
  margin: 0 auto;
}
.point_seibun {
  display: flex;
  justify-content: space-between;
  margin: 50px auto 0;
  gap: 1vw;
}
.point_seibun li {
  width: 20%;
  min-width: 230px;
  background-color: #FFE270;
  border-radius: 10px;
  overflow: hidden;
  font-size: clamp(14px, 1vw, 16px);
  opacity: 0;
}
.point_seibun li:nth-of-type(2) {
  animation-delay: 0.4s;
}
.point_seibun li:nth-of-type(3) {
  animation-delay: 0.6s;
}
.point_seibun li figure {
  width: 100%;
}
.point_seibun li p {
  text-align: center;
  margin: 10px 0;
  font-size: clamp(16px, 18px, 1.1vw);
}
.point_seibun li span a {
  display: inline;
  text-decoration: underline;
}
.point_seibun li span {
  font-size: clamp(11px, 0.85vw, 13px);
}
.uruoi {
  display: block;
  text-align: right;
  margin-top: 10px;
  font-size: clamp(11px, 0.85vw, 13px);
}
strong {
  display: inline-block;
  font-size: clamp(30px, 40px, 2.6vw);
  text-align: center;
  color: #04A75F;
  margin-top: 20px;
  padding: min(16px, 1vw) min(30px, 1.9vw);
  background-color: #FFFCE1;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}


/* story------ */
.story {
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  padding: min(9.25vw, 140px) 0;
}
.story h1{
  width: min(26.8vw, 406px);
  margin: 0 auto;
  filter: drop-shadow(0px 4px 20px rgba(254, 249, 201, 0.8));
}
.story p {
  text-align: center;
  font-size: clamp(14px, 1.3vw, 20px);
  margin: 30px 0;
}
.story .pc_right {
  font-size: clamp(14px, 1.58vw, 24px);
  text-align: center;
  margin-left: min(5vw, 76px);
}
.story .pc_right .cursive {
  font-size: clamp(18px, 3.3vw, 50px);
}
.number10 {
  letter-spacing: 0.12em;
}
.fv_illust {
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.fv_illust figure.illust:nth-of-type(1){
  width: min(13.4vw, 203px);
  margin-right: max(-0.5vw, -8px);
}
.fv_illust figure.illust:nth-of-type(2){
  width: min(12.7vw, 192px);
}
.fv_illust figure.illust:nth-of-type(3){
  width: min(14.2vw, 215px);
}

/* .story animation------ */
.story .pc_right p.illust_in {
  animation-delay: 0.6s;
}
.fv_illust figure.illust.illust_yura01 {
  animation: illust_in 0.6s 0.8s ease-in 1 forwards, illust_yura01 2s 1.4s ease-in-out infinite alternate-reverse;
}
.fv_illust figure.illust.illust_in {
  animation-delay: 1.4s;
}
.fv_illust figure.illust.illust_yura02 {
  animation: illust_in 0.6s 1.2s ease-in 1 forwards, illust_yura02 2s 1.8s ease-in-out infinite alternate-reverse;
}
.btn_sample a{
  width: 100px;
  height: 160px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  background: linear-gradient(-45deg, #F9D01A, #F8C434);
  position: fixed;
  bottom: 20px;
  right: 0;
  border-radius: 16px 0 0 16px;
  padding: 18px 0;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
  z-index: 99;
}
.btn_sample a:hover {
  scale: 1;
}
.btn_sample figure {
  width: 40%;
  margin: 0 auto 20px;
}
.btn_sample.cart a{
  position: fixed;
  bottom: 200px;
  background: linear-gradient(-45deg, #01A661, #38B54A);
}
.btn_sample.cart figure{
  width: 50%;
}

/* concept------ */
.concept {
  width: 100%;
  margin: 0 auto;
}
.story .btn_concept a {
  width: min(31vw, 470px);
  max-width: 390px;
  height: min(6.6vw, 100px);
  padding: min(1.3vw, 20px);
  background-color: rgba(255, 255, 255, 0.6);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #04A75F;
  border-radius: 60px;
  color: #04A75F;
  position: relative;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}
.story .btn_concept a::after {
  content: '';
  width: min(40px, 2.6vw);
  height: min(40px, 2.6vw);
  background: url(../img/btn_arrow_g.png);
  background-size: contain;
  position: absolute;
  right: min(20px, 1.3vw);
  top: min(30px, 1.9vw);
}
.concept .ttl h1.ttl_in {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.story .btn_concept figure {
  width: min(7vw, 106px);
  margin-right: 8px;
}
.illust_area {
  width: 100%;
  position: relative;
}
.concept .illust {
  width: min(130px, 8.5vw);
  position: absolute;
}
.concept .illust:nth-of-type(1) {
  left: min(166px, 10.1vw);
}
.concept .illust:nth-of-type(2) {
  top: min(156px, 10vw);
  right: min(166px, 10.1vw);
}
.concept_deco figure {
  width: min(300px, 18vw);
  position: absolute;
}
.concept_deco figure:nth-of-type(4), .concept_deco figure:nth-of-type(8) {
  width: min(160px, 10.6vw);
}
.concept_deco figure:nth-of-type(6), .concept_deco figure:nth-of-type(7) {
  width: min(310px, 20.5vw);
}
.concept_deco figure:nth-of-type(2) {
  top: min(62px, 4.1vw);
  left: min(257px, 17vw);
  animation-delay: 0.3s;
}
.concept_deco figure:nth-of-type(3) {
  top: min(155px, 10vw);
  left: min(16px, 1vw);
  animation-delay: 0.6s;
}
.concept_deco figure:nth-of-type(4) {
  top: min(320px, 21.6vw);
  left: 0;
  animation-delay: 0.9s;
}
.concept_deco figure:nth-of-type(5) {
  right: 0;
}
.concept_deco figure:nth-of-type(6) {
  top: min(24px, 1.6vw);
  right: min(376px, 24.8vw);
  animation-delay: 0.3s;
}
.concept_deco figure:nth-of-type(7) {
  top: min(116px, 7.6vw);
  right: min(70px, 4.6vw);
  animation-delay: 0.6s;
}
.concept_deco figure:nth-of-type(8) {
  top: min(184px, 12vw);
  right: 0;
  animation-delay: 0.9s;
}
.concept .inner {
  padding-top: min(120px, 7.9vw);
}
.concept .concept_block {
  width: 90%;
  max-width: 600px;
  margin: min(60px, 3.9vw) auto 0;
}
.concept .concept_box figure {
  width: 100%;
} 
.concept_box p {
  font-size: clamp(14px, 20px, 1.5vw);
  text-align: center;
  margin-top: 10px;
}
.concept_box h2 {
  font-size: min(70px, 4.6vw);
  text-align: right;
  margin-top: min(-10px, -0.66vw);
  color: #fff;
}
/*  youtube
--------------------------------*/
.youtube_wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.youtube_wrap .youtube {
  width: 100%;
  margin: 0 auto;
}
.youtube_wrap .youtube .player {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_wrap .youtube .player iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* faq_area------ */
.faq_area {
  padding-bottom: min(100px, 6.6vw);
}
.faq_area h1 {
  text-align: center;
  margin-bottom: 40px;
  font-size: min(28px, 1.85vw);
  font-weight: 700;
  line-height: 1;
  background-color: unset;
  position: absolute;
  top: min(20px, 1.3vw);
  left:0;
  right:0;
  margin:0 auto;
}
.faq_area h1 span {
  font-size: min(70px, 4.6vw);
  letter-spacing: 0.22em;
}
.faq_area h1 span.and {
  font-size: min(50px, 3.3vw);
}
.faq_area .ttl {
  width: 60%;
  max-width: 1080px;
  margin: min(100px, 6.6vw) auto min(40px, 2.6vw);
}
.faq_area .ttl .illust:nth-of-type(1) {
  width: min(100px, 6.5vw);
  position: absolute;
  bottom: 0;
}
.faq_area .ttl .illust:nth-of-type(2) {
  width: min(140px, 9.5vw);
  position: absolute;
  bottom: 0;
  right: 0;
}
.faq_area ul {
  display: none;
  margin-top: min(9.2vw, 140px);
}
.faq_area ul li a, .faq_modal h2 {
  width: 95%;
  max-width: 1080px;
  height: 80px;
  background-color: #FFD345;
  margin-bottom: 16px;
  border-radius: 60px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}
.faq_area ul li a {
  margin: 0 auto 16px;
  position: relative;
}
.faq_area ul li a::after {
  content: '';
  width: 39px;
  height: 39px;
  background: url(../img/btn_arrow_gray.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 21px;
  right: min(36px, 2.38vw);
}
.faq_area ul li:nth-of-type(2n) a {
  background-color: #FFEC84;
}
.faq_area ul li a span{
  font-size: 32px;
  margin-right: 24px;
  margin-bottom: 6px;
}
.faq_talk {
  width: 95%;
  max-width: 1080px;
  margin: 0 auto;
} 
.faq_talk div figure {
  width: min(130px, 8.5vw);
}
.faq_talk div {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
}
.faq_talk p{
  width: 70%;
  max-width: 800px;
  background-color: #FFD345;
  display: flex;
  align-items: center;
  padding: 0 min(30px, 7.6vw);
  font-weight: 500;
  line-height: 1.4;
  border-radius: 30px;
  font-size: clamp(14px, 1vw, 16px);
  position: relative;
}
/* .js_modal .faq_talk p {
  opacity: 1;
} */
.faq_talk .faq_q p:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 10px;
  margin-top: -13px;
  border: 13px solid transparent;
  border-left: 26px solid #FFCF34;
  z-index: -1;
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}
.faq_talk .faq_a p {
  padding: min(30px, 7.6vw);
}
.faq_talk .faq_a p:before {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 10px;
  margin-top: -13px;
  border: 13px solid transparent;
  border-left: 26px solid #FFEC84;
  z-index: 0;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.faq_talk .faq_q {
  margin-bottom: max(-100px, -6.6vw);
}
.faq_q p {
  height: 60px;
}
.faq_a {
  justify-content: end;
  align-items: end;
}
.faq_talk .faq_a p {
  background-color: #FFEC84;
  line-height: 1.6;
}
.faq_talk div.faq_q figure {
  margin-top: 50px;
}
.faq_talk div.faq_a figure {
  margin-bottom: max(-7.9vw, -120px);
}
.faq_btn a{
  width: 90%;
  max-width: 320px;
  height: 70px;
  font-size: clamp(18px, 24px, 1.6vw);
  border-radius: 60px;
  background: linear-gradient(-45deg, #F8C434, #F9D01A);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;
  margin: 0 auto;
  margin-bottom: min(20px, 1.3vw);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
  color: #fff;
  margin-top: min(7.9vw, 120px);
}

/* .ingredient------ */
.wrapper {
  background: url(../img/wave_bottom.png) no-repeat top center, url(../img/wave_top.png) no-repeat bottom center, url(../img/bg_ingredient.png) no-repeat top center;
  background-size: contain, contain, cover;
  position: relative;
  padding-bottom: min(360px, 23.8vw);
}
.ingredient .ttl {
  padding-top: min(268px, 17.7vw);
  position: relative;
  margin-bottom: min(80px, 5.2vw);
}
.ingredient .ttl .cursive {
  color: #FFFBCD;
  margin-bottom: max(-60px, -4.3vw);
}
.ingredient .ttl h1 {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 0.2em;
  position: relative;
}
.ingredient .ttl h1 span:last-of-type{
  font-size: 120%;
}
.ingredient .cat {
  display: inline-block;
  width: min(880px, 55.2vw);
  height: min(40px, 2.6vw);
  position: relative;
}
.ingredient .cat.in_animation {
  animation-delay: 1s;
}
.ingredient .cat::after.illust_yura02 {
  animation-delay: 1s;
}
.ingredient .cat::after {
  content: '';
  display: block;
  width: min(163px, 10.7vw);
  height: min(72px, 4.7vw);
  background: url(../img/ingredient_cat01.png) no-repeat center;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
}


/* .worry_area------ */
.worry_wrapper {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: min(16px, 1vw);
  border: 8px solid #EC632F;
  margin-top: min(40px, 2.6vw);
  padding: min(1.9vw, 30px) 0 min(1.9vw, 30px);
  position: relative;
}
.worry_wrapper:before {
  content: "";
  width: 122px;
  height: min(61px, 9.9vw);
  background: url(../img/lipo_arrow01.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 100%;
  left: 43%;
}
.worry_area {
  display: flex;
  justify-content: center;
  gap: min(27px, 17.8vw);
  margin-top: min(1.3vw, 20px);
}
.worry_block.illust_in:nth-of-type(2){
  animation-delay: 0.6s;
}
.worry_block.illust_in:nth-of-type(3){
  animation-delay: 0.9s;
}
.worry_area .worry {
  position: relative;
  text-align: center;
}
.worry_area .worry p span.worry_small {
  font-size: 53%;
  letter-spacing: 0.1em;
  display: block;
}
.worry_area .worry figure{
  width: min(109px, 13.2vw);
  margin: 0 auto;
}
.worry_area .worry_block:nth-of-type(1) .worry .worry_icon{
  width: min(77px, 6.4vw);
  height: min(127px, 8.3vw);
  position: absolute;
  bottom: 0;
  right: min(94px, 9.9vw);
}
.worry_area .worry_block:nth-of-type(1) .worry .worry_icon.worry_icon_keana{
  width: min(77px, 6.4vw);
  height: min(127px, 8.3vw);
  position: absolute;
  bottom: 19px;
  right: min(125px, 13.9vw);
}
.worry_area .worry_block:last-of-type .worry .worry_icon{
  width: min(77px, 6.4vw);
  height: min(127px, 8.3vw);
  position: absolute;
  bottom: 0;
  left: min(94px, 9.9vw);
}
.worry_area .worry_block:last-of-type .worry .worry_icon.worry_icon_kusumi {
  width: min(77px, 6.4vw);
  height: min(127px, 8.3vw);
  position: absolute;
  bottom: 19px;
  left: min(125px, 13.9vw);
}
.worry_area:last-of-type .worry_block:nth-of-type(1) .worry .worry_icon{
  width: min(77px, 6.4vw);
  height: min(127px, 8.3vw);
  position: absolute;
  bottom: 36px;
  right: min(135px, 11.9vw);
}
.worry_area:last-of-type .worry_block:last-of-type .worry .worry_icon{
  width: min(77px, 6.4vw);
  height: min(127px, 8.3vw);
  position: absolute;
  bottom: 36px;
  left: min(135px, 11.9vw);
}
.worry_area .worry p {
  font-size: clamp(16px, 22px, 1.45vw);
  position: absolute;
  top:50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 1;
}
.worry_area .arrow_up figure {
  width: min(40px, 2.6vw);
  margin: 0 auto 0;
}
.worry_box {
  width: min(282px, 27.2vw);
  background-color: #EFA645;
  /* border: min(3px, 0.3vw) solid #ff9c04; */
  text-align: center;
  border-radius: min(20px, 1.3vw);
  overflow: hidden;
  padding: min(30px, 1.9vw) min(10px, 0.6vw);
  margin-top: max(-30px, -1.9vw);
  z-index: 20;
}
.worry_box p {
  font-size: clamp(13px, 14px, 1vw);
  color: #fff;
}
.worry_box p span.big {
  font-size: 110%;
  font-weight: 700;
}
sup {
  font-size: 50%;
}
.worry_box p span.seibun_small {
  font-size: 70%;
  letter-spacing: 0.1em;
}
.worry_box small {
  font-size: 90%;
}
.worry_box small a {
  color: #FFFBCD;
  display: inline;
}
.seibun_uruoi {
  text-align: right;
  font-size: 63%;
  color: #EC632F;
  margin: 6px 10px 0;
}
.seibun_uruoi_asupara {
  text-align: right;
  font-size: 63%;
  color: #4c4c4c;
  margin: 6px 10px 0;
}

/* .ingredient02------ */
.ingredient_block {
  background-color: #FCFBDF;
  border-radius: min(16px, 1vw);
  padding: min(40px, 2.6vw);
  margin-bottom: min(50px, 3.3vw);
}
.ingredient_block:nth-of-type(1) {
  background-color: unset;
  padding-top: 0;
}
.ingredient_block:last-of-type {
  margin-bottom: 0;
}
.ingredient_block:last-of-type::before {
  content: 'SDGs';
  font-size: min(90px, 6.9vw);
  font-family: "Oooh Baby", cursive;
  color: #FFCF34;
  position: absolute;
  top: min(20px, 1.3vw);
  left: min(20px, 2.6vw);
  text-align: center;
  letter-spacing: 0.1em;
  z-index: -1;
}
.ingredient_block:last-of-type::after {
  content: "";
  width: 56px;
  height: min(90px, 6.9vw);
  background: url(../img/lipo_arrow02.png) no-repeat center;
  background-size: contain;
  position: absolute;
  bottom: 100%;
  left: 24%;
}

.ingredient_block h2 {
  font-size: clamp(18px, 26px, 1.7vw);
  margin-bottom: min(30px, 1.9vw);
}
.ingredient_box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
}
.ingredient_box p {
  font-size: clamp(13px, 18px, 1.2vw);
  text-align: left;
}
.ingredient_box p span {
  font-size: 75%;
  letter-spacing: 0.1em;
}
.ingredient_box p b {
  font-weight: 700;
}
.ingredient_box p span.big {
  font-size: 120%;
}
.ingredient_block .ingredient_box figure {
  width: 35%;
}
.ingredient_block:last-of-type .ingredient_box figure {
  width: 20%;
}
.ingredient_block:nth-of-type(2) {
  position: relative;
}
.ingredient_block .cat02 {
  width: min(12.7vw, 192px);
  height: min(72px, 4.7vw);
  position: absolute;
  left: 0;
  bottom: max(-30px, -1.9vw);
}
.point_number {
  display: flex;
  justify-content: center;
}
.point {
  text-align: center;
  font-size: 20px;
  line-height: 1;
  padding: 14px 18px;
  background-color: #FFFBCD;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 20px;
}
.point span {
  font-size: 34px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
}
.point_ttl {
  font-size: clamp(16px, 1.3vw, 20px);
  text-align: center;
}
.point_box {
  margin: min(100px, 6.6vw) 0;
}
.point_box .point_ttl {
  margin-bottom: min(40px, 2.6vw);
}

/* .free------ */
.free_area {
  margin-bottom: min(100px, 6.6vw);
}
.free_block {
  width: 90%;
  max-width: 1080px;
  display: flex;
  justify-content: space-between;
  gap: min(27px, 17.8vw);
  margin: min(40px, 2.6vw) auto min(27px, 17.8vw);
}
.free_block .worry_box {
  width: 50%;
  background-color: #FFFBCD;
  border: min(5px, 0.3vw) solid #FFE270;
}
.free_block .worry_box p {
  font-size: clamp(18px, 16px, 1.3vw);
  color: #4C4C4C;
}
.free_block:nth-of-type(1) .worry_box {
  width: 100%;
}
.free_block:nth-of-type(1) .worry_box {
  width: 100%;
}

/* .products------ */
.wrapper .ingredient_illust_top {
  width: min(200px, 13.2vw);
  position: absolute;
  top: 0;
  right: min(112px, 7.4vw);
}
.products .illust_area figure{
  width: min(31px, 2vw);
  position: absolute;
}
.products .illust_area figure:nth-of-type(1){
  top: min(237px, 15.6vw);
  left: min(12px, 0.7vw);
}
.products .illust_area figure:nth-of-type(2){
  top: min(86px, 5.6vw);
  left: min(26px, 1.7vw);
  animation-delay: 0.3s;
}
.products .illust_area figure:nth-of-type(3){
  top: 0;
  left: min(98px, 6.4vw);
  animation-delay: 0.6s;
}
.products .illust_area figure:nth-of-type(4){
  top: min(106px, 7vw);
  left: min(98px, 6.4vw);
  animation-delay: 0.9s;
}
.products .illust_area figure:nth-of-type(5){
  top: min(120px, 7.9vw);
  left: min(214px, 14.1vw);
  animation-delay: 1.2s;
}
.products .illust_area figure:nth-of-type(6){
  top: min(26px, 1.7vw);
  left: min(230px, 15.2vw);
  animation-delay: 1.5s;
}
.products .illust_area figure:nth-of-type(7){
  top: min(85px, 5.6vw);
  left: min(327px, 21.6vw);
  animation-delay: 1.8s;
}
.products .illust_area figure:nth-of-type(8){
  top: min(32px, 2.1vw);
  left: min(415px, 27.4vw);
}
.products .illust_area figure:nth-of-type(9){
  top: min(237px, 15.6vw);
  right: min(12px, 0.7vw);
}
.products .illust_area figure:nth-of-type(10){
  top: min(86px, 5.6vw);
  right: min(26px, 1.7vw);
  animation-delay: 0.3s;
}
.products .illust_area figure:nth-of-type(11){
  top: 0;
  right: min(98px, 6.4vw);
  animation-delay: 0.6s;
}
.products .illust_area figure:nth-of-type(12){
  top: min(106px, 7vw);
  right: min(98px, 6.4vw);
  animation-delay: 0.9s;
}
.products .illust_area figure:nth-of-type(13){
  top: min(120px, 7.9vw);
  right: min(214px, 14.1vw);
  animation-delay: 1.2s;
}
.products .illust_area figure:nth-of-type(14){
  top: min(26px, 1.7vw);
  right: min(230px, 15.2vw);
  animation-delay: 1.5s;
}
.products .illust_area figure:nth-of-type(15){
  top: min(85px, 5.6vw);
  right: min(327px, 21.6vw);
}
.products .illust_area figure:nth-of-type(16){
  top: min(32px, 2.1vw);
  right: min(415px, 27.4vw);
  animation-delay: 1.8s;
}
.products .ttl {
  padding-top: min(118px, 7.8vw);
}
.products .ttl .cursive {
  color: #FFFBCD;
  margin-bottom: max(-60px, -4.3vw);
}
.products .ttl h1 {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.products .inner {
  display: flex;
  justify-content: center;
  gap: 3%;
  margin-top: min(60px, 3.9vw);
}
.products .products_block {
  width: 50%;
}
.products .products_block .package {
  text-align: center;
  position: relative;
}
.products .products_block .package > figure:nth-of-type(1) {
  width: 90%;
  margin: 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}
.products .products_block .package h2, .howto h3{
  font-size: min(28px, 1.8vw);
  text-align: center;
  background-color: #FFFBCD;
  padding: min(14px, 0.9vw) min(24px, 1.6vw);
  display: inline-block;
  margin: 0 auto min(16px, 1vw);
}
.products .products_block .package h2 {
  font-size: min(30px, 1.9vw);
  border: 6px solid #fff;
  background-color: #ffc721;
  color: #fff;
}
.howto .ttl {
  position: relative;
  margin-top: min(40px, 2.6vw);
  padding-top: min(40px, 2.6vw);
}
.sheet {
  opacity: 0;
}
.howto_txt {
  width: 90%;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  margin-bottom: min(20px, 1.3vw);
}
.howto_txt li {
  display: flex;
}
.products .howto .sheet_all {
  width: min(154px, 10vw);
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.products .howto .sheet_bubun:nth-of-type(1) {
  width: min(126px, 8.3vw);
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.products .howto .sheet_bubun:nth-of-type(2) {
  width: min(126px, 8.3vw);
  position: absolute;
  top: min(46px, 3vw);
  right: 0;
  z-index: -1;
}
.products .howto .sheet_bubun:nth-of-type(3) {
  width: min(126px, 8.3vw);
  position: absolute;
  top: min(70px, 4.6vw);
  right: 0;
  z-index: -1;
}
.howto h3 {
  font-size: clamp(14px, 20px, 1.3vw);
  margin-bottom: min(20px, 1.3vw);
}
.howto .ttl .cursive {
  font-size: min(60px, 3.9vw);
  margin-bottom: max(-30px, -1.9vw);
}
.howto_box {
  margin-bottom: min(100px, 6.6vw);
}
.howto_box figure{
  width: 70%;
  margin: 0 auto;
}
.howto_box p{
  width: 60%;
  font-size: clamp(13px, 16px, 1vw);
}
.spec {
  width: 90%;
  margin: 0 auto;
  font-size: clamp(13px, 16px, 1vw);
}
.spec dl {
  margin-bottom: min(20px, 1.3vw);
}
.spec dl dt::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #4C4C4C;
  margin: 4px 0;
}
.more dt {
  position: relative;
  transition-duration: 0.3s;
}
.more dt:hover {
  opacity: 0.6;
}
.more dt::before {
  content: '＋';
  position: absolute;
  top: 0;
  right: 0;
}
.more dt.open::before {
  content: '−';
}
.more dd {
  display: none;
}
.cta .product_btn a{
  width: 90%;
  height: 70px;
  font-size: clamp(16px, 20px, 1.3vw);
  border-radius: 60px;
  background: linear-gradient(-45deg, #F8C434, #F9D01A);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  position: relative;
  margin: 0 auto;
  margin-bottom: min(20px, 1.3vw);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}
.cta .product_btn a .seibun_uruoi {
 font-size: 75%;
}
.cta {
  margin-bottom: min(38px, 2.5vw);
}
.cta .product_btn a::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  background: url(../img/btn_arrow_w.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 16px;
  right: min(26px, 1.7vw);
}
/* .cta .product_btn.amazon a {
  pointer-events: none
} */
.cta .product_btn.rakuten a {
  background: linear-gradient(-45deg, #01A661, #38B54A);
}
.product_illust_bottom {
  width: min(269px, 18vw);
  position: absolute;
  bottom: min(83px, 5.4vw);
  left: 0;
}
.top_btn {
  padding-top: min(360px, 23.8vw);
}
.top_btn a{
  width: 90%;
  min-width: 400px;
  max-width: 600px;
  height: 70px;
  font-size: clamp(16px, 20px, 1.3vw);
  border-radius: 60px;
  background: linear-gradient(-45deg, #01A661, #38B54A);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  position: relative;
  margin: 0 auto min(100px, 6.6vw);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}
.voice_btn a{
  width: 90%;
  min-width: 400px;
  max-width: 600px;
  height: 70px;
  font-size: clamp(16px, 20px, 1.3vw);
  border-radius: 60px;
  background: linear-gradient(-45deg, #01A661, #38B54A);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  position: relative;
  margin: 0 auto min(100px, 6.6vw);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}


/* .sns------ */
.sns h1 {
  text-align: center;
  margin-bottom: 40px;
  font-size: min(70px, 4.6vw);
  font-weight: 700;
  line-height: 1;
  background-color: unset;
  position: absolute;
  top: min(30px, 2.3vw);
  left:0;
  right:0;
  margin:0 auto;
  opacity: 1;
}
.sns .ttl {
  width: 95%;
  max-width: 1080px;
  margin: min(100px, 6.6vw) auto min(100px, 6.6vw);
}
.sns .illust:nth-of-type(1) {
  width: min(174px, 11.5vw);
  position: absolute;
  top: min(20px, 1.3vw);
  left: min(130px, 8.5vw);
}
.sns .illust:nth-of-type(2) {
  width: min(174px, 11.5vw);
  position: absolute;
  top: 0;
  right: min(170px, 11.2vw);
}
.sns_deco_top .deco {
  width: min(124px, 8.2vw);
  position: absolute;
}
.sns_deco_top .deco:nth-of-type(1) {
  top: min(185px, 12.2vw);
  left: min(14px, 0.9vw);
}
.sns_deco_top .deco:nth-of-type(2) {
  top: min(40px, 2.6vw);
  left: min(110px, 7.2vw);
  animation-delay: 0.3s;
}
.sns_deco_top .deco:nth-of-type(3) {
  width: min(96px, 6.3vw);
  top: min(65px, 4.2vw);
  left: min(320px, 21.1vw);
  animation-delay: 0.6s;
}
.sns_deco_top .deco:nth-of-type(4) {
  width: min(96px, 6.3vw);
  top: min(115px, 7.6vw);
  right: min(400px, 26.4vw);
}
.sns_deco_top .deco:nth-of-type(5) {
  top: min(60px, 3.9vw);
  right: min(186px, 12.3vw);
  animation-delay: 0.6s;
}
.sns_deco_top .deco:nth-of-type(6) {
  width: min(96px, 6.3vw);
  top: min(160px, 10.5vw);
  right: min(90px, 5.9vw);
  animation-delay: 0.9s;
}
.sns_deco_top .deco:nth-of-type(7) {
  width: min(96px, 6.3vw);
  top: min(26px, 1.7vw);
  right: min(12px, 0.8vw);
  animation-delay: 1.2s;
}
.sns_deco_side .deco {
  width: min(116px, 7.6vw);
}
.sns_block {
  margin-bottom: 60px;
  max-width: 780px;
  margin: 0 auto 60px;
}
.sns_block .sns_ttl {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.sns_block .sns_ttl figure {
  width: 45px;
  margin-right: 20px;
}
.sns_block .sns_ttl h2 {
  font-size: 30px;
}
.instagram_area {
  width: 100%;
  height: 400px;
  background-color: #D9D9D9;
}
.btn_x a {
  max-width: 600px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(-45deg, #F8C434, #F9D01A);
  border-radius: 60px;
  color: #fff;
  position: relative;
}
.btn_x a::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  background: url(../img/btn_arrow_w.png) no-repeat center;
  background-size: contain;
  position: absolute;
  top: 10px;
  right: 26px;
}

/* .footer------ */
footer {
  padding-top: min(263px, 17.3vw);
  background: url(../img/wave_bottom.png) no-repeat top center, url(../img/bg_concept.png) no-repeat top center;
  background-size: cover;
  position: relative;
}
footer p {
  text-align: center;
  font-size: 14px;
}
footer p a {
  display: inline-block;
  text-decoration: underline;
}
footer p.copyright {
  font-size: 12px;
  margin-top: 10px;
  padding-bottom: 20px;
  letter-spacing: 0.02em;
}
footer figure {
  width: min(316px, 20vw);
  position: absolute;
  top: min(10px, 0.6vw);
  left: min(120px, 7.9vw);
}


/* .overlay------ */

.overlay {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  display: none;
  opacity: 0;
  z-index: 100;
}
.overlay.active {
  display: flex;
}
.overlay section.active {
  display: block;
}
.overlay section {
  width: 90%;
  max-width: 1180px;
  height: 90vh;
  margin: 0 auto;
  padding: min(160px, 10.5vw) 5% min(60px, 3.9vw);
  background-color: #FFFBCD;
  display: none;
  cursor: auto;
  border-radius: 20px;
  position: relative;
}
.overlay section .scroll {
  overflow-y: scroll;
  height: 100%;
}
.overlay .title {
  margin: 0 auto 60px auto;
}
.overlay h1 {
  font-size: 28px;
  margin-bottom: 32px;
  line-height: 1.3;
}
/* .overlay h1::after {
  content: "";
  width: 50px;
  height: 2px;
  margin-top: 8px;
  display: block;
  background-color: #fff;
} */
.center_ttl {
  text-align: center;
}
.center_ttl::after {
  margin: 8px auto 0 auto;
}
.faq_modal {
  position: relative;
}
.faq_modal::before {
  content: 'Beautiful Quiz';
  font-size: min(150px, 9.9vw);
  font-family: "Oooh Baby", cursive;
  color: #FFE270;
  position: absolute;
  top: min(40px, 2.6vw);
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1em;
  z-index: -1;
}
.overlay section .close {
  width: clamp(60px, 70px, 4.6vw);
  position: absolute;
  top: 4%;
  right: 4%;
  cursor: pointer;
  z-index: 14;
  transition-duration: 0.6s;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.2));
}
.close img {
  width: 100%;
}
.faq_modal .faq_modal, .modal_concept{
  position: relative;
}
.faq_modal .illust:nth-of-type(1) {
  width: min(96px, 6.3vw);
  position: absolute;
  left: 4%;
  top: 4%;
}
.faq_modal .illust:nth-of-type(2) {
  width: min(160px, 10vw);
  position: absolute;
  top: 16%;
  right: 4%;
}
/* .faq_modal .title {
  display: flex;
  justify-content: center;
} */
/* .faq_modal h2 {
  width: 494px;
  border-radius: 0;
  margin: 0 auto;
  padding-right: 0;
} */
.modal_concept p {
  font-size: 20px;
  font-weight: 400;
}
.faq_modal p.illust_in {
  animation-delay: 1s;
}
.faq_modal p.answer {
  font-size: 70px;
  color: #FFE450;
  line-height: 1;
  margin-bottom: 24px;
  font-weight: 500;
}
.modal_concept p span.green {
  color: #04A75F; 
}
.modal_concept::before {
  content: 'What’s 1st step';
  font-size: min(150px, 9.9vw);
  font-family: "Oooh Baby", cursive;
  color: #FFE270;
  position: absolute;
  top: min(40px, 2.6vw);
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1em;
  z-index: -1;
}
.modal_concept.contact::before {
  content: 'Contact';
  font-size: min(150px, 9.9vw);
  font-family: "Oooh Baby", cursive;
  color: #FFE270;
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1em;
  z-index: -1;
}
.modal_concept h1 {
  width: 189px;
  margin: 0 auto;
}
.modal_concept {
  text-align: center;
}
.modal_concept p {
  line-height: 1.9;
}
.modal_concept .modal_concept_block {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0;
  position: relative;
}
.modal_concept .modal_concept_block figure {
  width: min(120px, 7.9vw);
  position: absolute;
}
.modal_concept .modal_concept_block figure:nth-of-type(1){
  width: min(120px, 7.9vw);
  top: 0;
  left: 0;
}
.modal_concept .modal_concept_block figure:nth-of-type(2){
  width: min(120px, 7.9vw);
  bottom: 0;
  right: 0;
}
.modal_concept_txt {
  padding-bottom: 40px;
}
.modal_concept_txt p {
  text-align-last: left;
  padding-top: 0;
  line-height: 2;
}
.modal_concept_txt p span {
  padding: 6px 20px;
  background-color: #FFE450;
}
.modal_concept_txt p {
  margin-bottom: 30px;
}
.modal_voice::before {
  content: 'Real Voice';
  font-size: min(150px, 9.9vw);
  font-family: "Oooh Baby", cursive;
  color: #FFE270;
  position: absolute;
  top: min(40px, 2.6vw);
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1em;
  z-index: -1;
}
.modal_voice h3 {
  font-size: clamp(20px, 24px, 1.5vw);
  margin-bottom: 10px;
}
.voice_box {
  display: flex;
  justify-content: space-between;
  gap: 3%;
  margin-top: 16px;
  margin-bottom: 40px;
}
.voice_box.voice_box_mg {
  margin-bottom: 0;
}
.modal_voice small {
  display: block;
  font-size: 13px;
  text-align: right;
  margin-top: 10px;
  margin-bottom: 40px;
}
.voice_box.interview {
  justify-content: left;
}
.voice_box.interview figure {
  width: 48%;
}
.snsadress ul {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.snsadress ul li, .modal_concept.contact .contact_box .contact_icon {
  width: 30px;
}
.modal_concept.contact .contact_box .contact_icon {
  display: block;
  position: unset;
  top: unset;
  left: unset;
  margin: 0 auto;
}
.modal_concept.contact .contact_box {
  margin-bottom: 40px;
}

@media screen and (max-width: 760px) {
  body {
    font-size: min(13px, 3.3vw);
  }
  .ttl h1 {
    padding: min(10px, 2.5vw) min(14px, 3.5vw);
    font-size: min(18px, 4.1vw);
  }
  .ttl .cursive {
    font-size: min(56px, 14.3vw);
    color: #FFE270;
  }
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }

  /* animation------ */
  @keyframes deco_illust_fuwa {
    0% {
      transform: translateY(-10%);
    }
    100% {
      transform: translateY(30%);
    }
  }
  
  @keyframes ttl_in {
    0% {
      width: 0px;
    }
    40% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      width: 80%;
      max-width: 300px;
    }
  }
  
  @keyframes ttl_in_ingredient {
    0% {
      width: 0px;
    }
    40% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      width: 72%;
      max-width: 300px;
    }
  }
  
  @keyframes ttl_in_products {
    0% {
      width: 0px;
    }
    40% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      width: 63%;
      max-width: 280px;
    }
  }
  
  @keyframes ttl_in_faqmodal {
    0% {
      width: 0px;
    }
    100% {
      width: 494px;
    }
  }


  /* .loading------ */
  .loading .loading_wrap {
    display: block;
    width: 90%;
  }
  .loading_girl {
    width: 50%;
    margin-left: max(-30px, -7.6vw);
  }
  .loading_logo {
    width: 80%;
    padding: 20%;
    margin: 0 0 0 auto;
  }
  .loading_logo::after {
    bottom: 0;
    left: unset;
    right: 70%;
    margin-top: -13px;
    border: 13px solid transparent;
    border-left: 26px solid #fff;
    z-index: 0;
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
  }

  /* .fv------ */
  header {
    padding-bottom: 0;
    padding-top: min(16px, 4.1vw);
  }
  header h2 {
    font-size: min(22px, 5.6vw);
  }
  header h3 {
    font-size: min(14px, 3.5vw);
    margin-bottom: min(10px, 2.5vw);
  }
  header h2, header h3 {
    padding-left: 3%;
  }
  .point_ttl {
    font-size: min(16px, 4.1vw);
  }
  .seibun_area {
    width: 100%;
  }
  .point_seibun li {
   width: 100%;
   min-width: unset;
   margin: 0 auto;
  }
  .point_seibun li p {
    font-size:  min(13px, 3.3vw);
    letter-spacing: 0.06em;
  }
  .point_seibun li span {
    letter-spacing: 0;
    font-size: min(10px, 2.5vw);
  }
  .point_seibun li figure {
   width: 100%;
  }
  @keyframes ttl_in_uruoi {
    0% {
      width: 0px;
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      width: min(387px, 100%);
    }
  }
  strong {
    font-size: min(26px, 6.6vw);
  }
  
  /* .story------ */
  .story {
    display: block;
    padding: min(100px, 25.6vw) 0 min(60px, 15.3vw);
  }
  .story h1{
    width: 58%;
    margin: 0 auto min(50px, 12.8vw);
  }
  .story .pc_right {
    font-size: min(18px, 4.6vw);
    margin-left: 0;
  }
  .story .pc_right .cursive {
    font-size: min(40px, 10.2vw);
  }
  .fv_illust figure.illust:nth-of-type(1){
    width: 27%;
  }
  .fv_illust figure.illust:nth-of-type(2){
    width: 26%;
  }
  .fv_illust figure.illust:nth-of-type(3){
    width: 29%;
  }
  .btn_sample a{
    width: 76px;
    height: 130px;
    font-size: 13px;
    text-align: center;
    letter-spacing: normal;
    padding: 18px 0;
  }
  .btn_sample.cart a{
    bottom: 170px;
  }
  .btn_sample figure {
    margin: 0 auto 10px;
  }

  /* concept------ */
  .story .btn_concept a {
    width:  95%;
    height: 78px;
    padding: 17px 0;
    font-size: 20px;
  }
  .story .btn_concept a::after {
    content: '';
    width: 31px;
    height: 31px;
    right: 24px;
    top: 23px;
  }
  .story .btn_concept figure {
    width: 84px;
    margin-right: 8px;
  }
  .illust_area {
    margin-top: min(50px, 12.8vw);
  }
  .concept .illust {
    width: min(50px, 12.8vw);
  }
  .concept .illust:nth-of-type(1) {
    left: min(10px, 2.5vw);
  }
  .concept .illust:nth-of-type(2) {
    top: min(100px, 25.6vw);
    right: min(10px, 2.5vw);
  }
  .concept .concept_block {
    display: block;
    margin-top: min(60px, 3.9vw);
    width: 100%;
  }
  .concept .concept_box figure {
    width: 100%;
    margin: min(30px, 7.6vw) auto 0;
  } 
  .concept_box p {
    font-size: min(16px, 4.1vw);
    margin-top: 10px;
  }
  .concept_box h2 {
    font-size: min(40px, 10vw);
    margin-top: max(-20px, -1.3vw);
  }


  /* .faq_area------ */
  .faq_area {
    padding-bottom: min(40px, 10vw);
  }
  .faq_area h1 {
    font-size: min(5.3vw, 21px);
    background-color: unset;
  }
  .faq_area h1 span {
    font-size: min(50px, 12.8vw);
  }
  .faq_area h1 span.and {
    font-size: min(36px, 9.2vw);
  }
  .faq_talk {
    /* margin-top: min(30px, 7.6vw); */
    width: 100%;
  }
  .faq_talk .faq_q {
    margin-bottom: 0;
  }
  .faq_talk .faq_q figure {
    width: 20%;
    margin-right: -5.1vw;
  }
  .faq_talk p {
    width: 76%;
    font-size: min(13px, 3.3vw);
  }
  .faq_talk .faq_a figure {
    width: 20%;
  }
  .faq_talk div.faq_a figure {
    margin-bottom: -15.9vw;
    margin-left: -5.1vw;
  }
  .faq_talk .faq_a p {
    width: 76%;
  }
  .faq_btn a {
    margin-top: 17.9vw;
  }
  .faq_area ul {
    margin-top: max(60px, 15.4vw);
  }
  .faq_area ul li a, .faq_modal h2 {
    height: 60px;
    border-radius: 60px;
    padding: 0 34px 0 22px;
    font-size: clamp(13px, 14px, 3.5vw);
    line-height: 1.4;
  }
  .faq_area ul li a span, .faq_modal h2 span {
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 2px;
  }
  .faq_modal .title {
    margin-bottom: 30px;
  }
  /* .faq_modal h2 {
    width: 100%;
    border-radius: 0;
    padding-right: 0;
    padding-left: 4%;
  }
  .faq_modal p {
    font-size: 16px;
    line-height: 1.6;
  }
  .faq_modal p.answer {
    font-size: 40px;
    margin-bottom: 12px;
  } */
  .faq_area .ttl {
    width: 95%;
    margin-top: min(60px, 15.3vw);
    margin-bottom: 20px;
  }
  .faq_area .ttl .illust:nth-of-type(1) {
    width: min(70px, 15.4vw);
  }
  .faq_area .ttl .illust:nth-of-type(2) {
    width: min(100px, 23.4vw);
  }
  .faq_area ul li a::after {
    width: 22px;
    height: 22px;
    top: 19px;
    right: 20px;
  }

  /* .ingredient------ */
  .wrapper {
    background: url(../img/wave_bottom.png) no-repeat top center, url(../img/wave_top.png) no-repeat bottom center, url(../img/bg_ingredient.png) no-repeat top center;
    background-size: contain, contain, cover;
  }
  .wrapper .ingredient_illust_top {
    width: 16%;
  }
  .ingredient .ttl {
    padding-top: min(100px, 25.6vw);
    margin-bottom: min(80px, 5.2vw);
  }
  .ingredient .ttl .cursive {
    margin-bottom: max(-28px, -7.6vw);
  }
  .ingredient .cat {
    width: min(320px, 82vw);
    height: min(17px, 4.3vw);
  }
  .ingredient .cat::after {
    width: min(78px, 20vw);
    height: min(34px, 8.7vw);
  }

  /* .worry_area------ */
  .worry_wrapper {
    border-radius: min(16px, 4.1vw);
    padding: 0;
    border: 4px solid #EC632F;
  }
  .worry_area {
    gap: 3px;
    width: 98%;
    margin: 0 auto;
    margin-top: min(8px, 2vw);
  }
  .worry_block {
    width: 50%;
  }
  .worry_block.illust_in:nth-of-type(2){
    animation-delay: 0.3s;
  }
  .worry_block.illust_in:nth-of-type(3){
    animation-delay: 0.3s;
  }
  .worry_area .worry figure{
    width: 57%;
    max-width: 114px;
  }
  .worry_area .worry_block:nth-of-type(1) .worry .worry_icon{
    width: min(40px, 10vw);
    height: unset;
    bottom: min(30px, 7vw);
    right: min(222px, 33.6vw);
  }
  .worry_area .worry_block:nth-of-type(2) .worry .worry_icon{
    width: min(40px, 10vw);
    height: unset;
    position: absolute;
    bottom: min(30px, 7vw);
    left: min(222px, 33.6vw);
  }
  .worry_area .worry_block:nth-of-type(3) .worry .worry_icon{
    width: min(40px, 10vw);
    height: unset;
    bottom: min(38px, 9.7vw);
    left: unset;
    right: min(222px, 33.6vw);
  }
  .worry_area .worry_block:nth-of-type(1) .worry .worry_icon.worry_icon_keana {
    width: min(40px, 10vw);
    height: unset;
    bottom: min(50px, 11.7vw);
    right: min(222px, 33.6vw);
  }
  .worry_area:last-of-type .worry_block:last-of-type .worry .worry_icon.worry_icon_kusumi {
    width: min(40px, 10vw);
    height: unset;
    bottom: min(44px, 10.7vw);
    right: min(404px, 56vw);
    left: unset;
  }
  .worry_area .worry p {
    width: 100%;
    font-size: min(18px, 4.6vw);
  }
  .worry_area .worry p span.worry_small {
    font-size: 50%;
  }
  .worry_area .arrow_up {
    margin-top: -16px;
  }
  .worry_area .arrow_up figure {
    width: min(30px, 7.6vw);
  }
  .worry_area.sp {
    display: flex;
    justify-content: right;
    margin-bottom: min(8px, 2vw);
  }
  .worry_box {
    width: 100%;
    margin: 0 auto;
    border-radius: min(20px, 5.1vw);
    padding: min(16px, 4.1vw) min(8px, 2vw);
    margin-top: -16px;
  }
  .worry_box p {
    font-size: min(11px, 2.8vw);
  }
  .worry_box small {
    font-size: min(12px, 3vw);
  }
  .worry_wrapper:before {
    left: 29%;
    z-index: 10;
    background: url(../img/lipo_arrow01_sp.png) no-repeat center;
    background-size: contain;
  }
  .worry_area.sp .worry_block {
    width: 100%;
  }
  .worry_area.sp .worry_block .worry figure {
    width: 30%;
  }

  /* .ingredient02------ */
  .ingredient_block {
    border-radius: min(16px, 4.1vw);
    padding: min(40px, 10vw) min(16px, 4.1vw);
    margin-bottom: min(20px, 5.1vw);
  }
  .ingredient_block h2 {
    text-align: center;
    font-size: min(22px, 5.6vw);
    margin-bottom: min(20px, 5.1vw);
  }
  .ingredient_block:nth-of-type(1) .ingredient_box {
    display: flex;
  }
  .ingredient_box p {
    font-size: min(12px, 3vw);
  }
  .ingredient_block .ingredient_box figure {
    width: 50%;
    /* margin: 0 auto min(30px, 7.6vw); */
  }
  .ingredient_block:nth-of-type(1) .ingredient_box p {
    width: 54%;
    text-align: left;
  }
  .ingredient_block:nth-of-type(1) {
    padding: 0;
  }
  .ingredient_block:nth-of-type(1) .ingredient_box figure {
    margin-bottom: 0;
  }
  .ingredient_block .cat02 {
    width: min(25.6vw, 100px);
    height: unset;
    bottom: max(-20px, -5.1vw);
  }
  .ingredient_block:last-of-type::after {
    z-index: 10;
    left: 9%;
  }
  .ingredient_block:last-of-type::before {
    font-size: min(60px, 15vw);
  }
  .point_box {
    margin: min(60px, 15.3vw) 0;
  }
  .ingredient_block:last-of-type .ingredient_box figure {
    width: 30%;
  }

  /* .free------ */
  .free_block {
    width: 95%;
    margin: 0 auto;
    gap: 3px;
  }
  .free_block .worry_box {
    margin: 3px auto;
    padding: min(16px, 4.1vw) min(4px, 1vw);
  }
  .free_block .worry_box p {
    font-size: min(13px, 3.3vw);
  }

  /* .products------ */
  .top_btn a, .voice_btn a{
    min-width: unset;
    font-size: min(16px, 4.1vw);
  }
  .products .ttl {
    padding-top: min(60px, 15.3vw);
    margin-top: min(30px, 7.6vw);
  }
  .products .ttl .cursive {
    margin-bottom: max(-28px, -7.6vw);
  }
  .products .inner {
    display: block;
    margin-top: min(60px, 15.3vw);
  }
  .products .products_block {
    width: 100%;
  }
  .howto_txt {
    width: 100%;
    font-size: min(13px, 3.3vw);
    margin-bottom: min(20px, 5.1vw);
    letter-spacing: 0.14em;
  }
  .howto_txt li.pc {
    display: none;
  }
  .products .products_block .package h2, .howto h3{
    font-size: min(20px, 5.1vw);
    padding: min(10px, 2.56vw) min(30px, 7.6vw);
    margin: 0 auto min(16px, 4.1vw);
  }
  .products .products_block:nth-of-type(2) .package h2 {
    background-color: unset;
    border: 6px solid #6F6E6F;
    color: #6F6E6F;
  }
  .products .howto .sheet_all {
    width: min(110px, 28.2vw);
  }
  .products .howto .sheet_bubun:nth-of-type(1) {
    width: min(90px, 23vw);
  }
  .products .howto .sheet_bubun:nth-of-type(2) {
    width: min(90px, 23vw);
    top: min(34px, 8.7vw);
    right: 0;
  }
  .products .howto .sheet_bubun:nth-of-type(3) {
    width: min(90px, 23vw);
    top: min(52px, 13.3vw);
    right: 0;
  }
  .howto h3 {
    font-size: min(16px, 4.2vw);
    margin-bottom: min(23px, 5.8vw);
  }
  .howto .ttl .cursive {
    font-size: min(50px, 12.8vw);
    margin-bottom: max(-24px, -5.9vw);
  }
  .howto_box {
    margin-bottom: min(50px, 12.8vw);
  }
  .howto_box p{
    width: 60%;
    font-size: min(13px, 3.3vw);
  }
  .spec {
    font-size: clamp(13px, 14px, 3.5vw);
    width: 100%;
  }
  .spec dl {
    margin-bottom: min(20px, 5.1vw);
  }
  .cta .product_btn a{
    width: 100%;
    height: 60px;
    font-size: min(18px, 4.6vw);
    margin-bottom: min(16px, 4.1vw);
  }
  .cta {
    margin-bottom: min(46px, 11.7vw);
  }
  .cta .product_btn a::after {
    width: 28px;
    height: 28px;
    top: 15px;
    right: min(23px, 3.8vw);
  }
  .product_illust_bottom {
    width: min(115px, 29.4vw);
    bottom: min(18px, 4.6vw);
    left: 0;
  }
  .product_bubun {
    margin-top: min(60px, 15.4vw);
  }

  /* .sns------ */
  .sns h1 {
    margin-bottom: 40px;
    font-size: min(50px, 12.8vw);
    line-height: 1;
    top: min(30px, 2.3vw);
    left:0;
    right:0;
    background: unset;
  }
  .sns .ttl {
    width: 95%;
    margin: min(40px, 10vw) auto min(20px, 5.10vw);
  }
  .sns .illust:nth-of-type(1) {
    width: min(64px, 17.3vw);
    position: absolute;
    top: min(20px, 1.3vw);
    left: min(130px, 8.5vw);
  }
  .sns .illust:nth-of-type(2) {
    width: min(64px, 17.3vw);
    position: absolute;
    top: min(40px, 10vw);
    right: min(170px, 11.2vw);
  }
  .sns_block .sns_ttl figure {
    width: 23px;
    margin-right: 16px;
  }
  .sns_block .sns_ttl figure img {
    width: 23px;
    margin-right: 16px;
    vertical-align: unset;
  }
  .sns_block .sns_ttl h2 {
    font-size: 20px;
  }
  .instagram_area {
    width: 100%;
    height: 400px;
    background-color: #D9D9D9;
  }
  .btn_x a {
    font-size: 18px;
  }
  .btn_x a::after {
    width: 28px;
    height: 28px;
    top: 15px;
    right: 23px;
  }

  /* .footer------ */
  footer {
    padding-top: min(80px, 20vw);
    background: url(../img/wave_bottom.png) no-repeat top center, url(../img/bg_concept.png) no-repeat top center;
    background-size: contain, cover;
  }
  footer p {
    font-size: min(13px, 3.3vw);
  }
  footer p.copyright {
    font-size: 10px;
    margin-top: 10px;
    padding-bottom: 20px;
  }
  footer figure {
    width: min(123px, 31.5vw);
    top: max(-30px, -7.6vw);
    left: min(30px, 7.6vw);
  }

  /* .overlay------ */
  .overlay section {
    width: 95%;
    padding: 100px 3% 78px;
    cursor: auto;
  }
  .overlay section.faq_modal {
    padding: 100px 3% 20px;
  }
  .overlay h1 {
    font-size: 22px;
  }
  .overlay section .close {
    width: 50px;
    top: 2%;
    right: 2%;
  }
  /* .faq_modal .illust:nth-of-type(1) {
    width: 50px;
    left: 2%;
    top: unset;
    bottom: 2%;
  }
  .faq_modal .illust:nth-of-type(2) {
    width: 82px;
    right: 2%;
    left: unset;
    top: unset;
    bottom: 2%;
  } */
 .modal_concept p {
    font-size: min(16px, 4.1vw);
  }
  /* .faq_modal p.answer {
    font-size: 40px;
  } */
  .faq_modal::before {
    font-size: 48px;
    top: 55px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    letter-spacing: 0.1em;
    z-index: -1;
  }
  .modal_concept::before {
    content: "What's \A 1st step";
    white-space: pre;
    font-size: min(60px, 15.3vw);
    top: 60px;
    line-height: 0.9;
  }
  .modal_concept h1 {
    width: min(148px, 37.9vw);
    margin: 0 auto;
  }
  .modal_concept {
    text-align: center;
  }
  .modal_concept p {
    line-height: 1.9;
  }
  .modal_concept .modal_concept_block {
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
    position: relative;
  }
  .modal_concept .modal_concept_block figure {
    position: absolute;
  }
  .modal_concept .modal_concept_block figure:nth-of-type(1){
    width: min(100px, 16.8vw);
  }
  .modal_concept .modal_concept_block figure:nth-of-type(2){
    width: min(100px, 18.8vw);
  }
  .modal_voice h3 {
    font-size: min(18px, 4.6vw);
  }
  .voice_box {
    display: block;
  }
  .voice_box figure:nth-of-type(1) {
    margin-bottom: 10px;
  }
  .voice_box.interview figure {
    width: 100%;
  }
  .modal_voice small {
    font-size: 11px;
    text-align: left;
  }
  .modal_concept.contact {
    padding-top: 80px;
  }
  .modal_concept.contact h1 {
    width: unset;
  }
  .modal_concept.contact::before {
    font-size: 60px;
  }
  .modal_concept.contact .contact_box p {
    line-height: 1.4em;
    font-size: min(18px, 4.6vw);
  }
}

@media (min-width: 1440px) {
  .worry_wrapper:before {
    background: url(../img/lipo_arrow01_pc.png) no-repeat center;
    background-size: contain;
  }
}