/* =====================
  common setting
===================== */
:root {
  /* Safari resize fix */
  min-height: 0vw;
}

h1, h2 {
  font-weight: 700;
}

a {
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s;
}

html {
  width: min(100%, 780px);
  background: #fff;
  margin: 0 auto;
  overflow-x: hidden;
}
@media screen and (max-width: 780px) {
  html {
    height: 100%;
  }
}

img {
  width: 100%;
}

body {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  color: #000;
  font-size: 15px;
  overflow-x: hidden;
}

.fv {
  position: relative;
}
.fv-component {
  width: min(31.92vw, 249px);
  position: absolute;
  top: 53%;
  right: 0;
}
.fv-point {
  position: absolute;
  left: 0;
  bottom: min(6.41vw, 50px);
}

.check {
  position: relative;
}
.check-list {
  width: min(83.3333333333vw, 650px);
  position: absolute;
  left: min(8.9743589744vw, 70px);
  bottom: min(28.2051282051vw, 220px);
  text-align: center;
}
.check-list p {
  display: inline-block;
  background: #890404;
  border-radius: 35px 35px 35px 0;
  margin-bottom: min(4.4871794872vw, 35px);
  padding: min(1.9230769231vw, 15px) min(7.31vw, 57px);
  font-size: min(4.49vw, 35px);
  color: #FFF;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: min(2.5641025641vw, 20px);
  font-size: min(4.8717948718vw, 38px);
  background-image: linear-gradient(to right, #919191 2px, transparent 2px);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  background-position: right bottom;
  padding-bottom: min(2.3076923077vw, 18px);
}
.check-list li:not(:last-child) {
  margin-bottom: min(2.3076923077vw, 18px);
}
.check-list li::before {
  content: "";
  display: inline-block;
  width: min(5.7692307692vw, 45px);
  height: min(5.7692307692vw, 45px);
  background: url("../../lp/images/qmelip2024r/check-icon.png") no-repeat;
  background-size: 100%;
}

.ba {
  background: url("../../lp/images/qmelip2024r/ba-bg.jpg") no-repeat top;
  background-size: cover;
  padding: min(10.2564102564vw, 80px) 0;
}

.notice {
  position: relative;
}
.notice-pic {
  width: 100%;
  position: absolute;
  left: 0;
  top: min(50vw, 390px);
}

.type {
  margin-top: min(44.8717948718vw, 350px);
}
.type-title {
  width: min(75.64vw,590px);
  margin: 0 auto min(8.97vw,70px);
}
.type-details {
  margin-bottom: min(5.77vw,45px);
  padding: 0 min(5.1282051282vw, 40px);
}
.type-details img:nth-child(1) {
  margin-bottom: min(4.49vw,35px);
}
.type-item {
  position: relative;
}
.type-item ul {
  width: 100%;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: min(14.1025641026vw, 110px);
}
.type-item li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.type-item li.visible {
  opacity: 1;
  transform: translateY(0);
}

.howto {
  padding-top: min(11.5384615385vw, 90px);
  position: relative;
  background: #fff;
  z-index: 1;
}
.howto::before {
  content: "";
  width: min(91.5384615385vw, 714px);
  height: min(137.1794871795vw, 1070px);
  background: url("../../lp/images/qmelip2024r/howto-bg.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
.howto-title {
  padding-bottom: min(5.1282051282vw, 40px);
  font-size: min(7.6923076923vw, 60px);
  text-align: center;
  position: relative;
}
.howto-title::before {
  content: "";
  width: min(5.3846153846vw, 42px);
  height: min(2.5641025641vw, 20px);
  background: url("../../lp/images/qmelip2024r/icon-rip.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.howto-item01 {
  margin-top: min(3.8461538462vw, 30px);
}
.howto-item02 {
  margin-top: min(11.5384615385vw, 90px);
}
.howto-item03 {
  margin-top: min(7.6923076923vw, 60px);
}

.cta {
  background: #fff6f4;
  position: relative;
  padding: min(17.3076923077vw, 135px) 0 min(16.6666666667vw, 130px);
  z-index: 1;
}
.cta::before {
  content: "";
  width: 100%;
  height: min(66.6666666667vw, 520px);
  background: url("../../lp/images/qmelip2024r/cta-bg.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.cta-inner {
  padding: 0 min(5.1282051282vw, 40px);
}
.cta-title {
  margin-bottom: min(11.5384615385vw, 90px);
}
.cta-item {
  background: #FFF;
  box-shadow: 0px 0px 21px 6px rgba(231, 62, 62, 0.13);
  border-radius: min(10.2564102564vw, 80px) 0 min(10.2564102564vw, 80px) 0;
  position: relative;
  padding: min(11.5384615385vw, 90px) min(3.8461538462vw, 30px) min(12.5641025641vw, 80px);
}
.cta-item:nth-child(odd) {
  margin-top: min(6.4102564103vw, 50px);
  border-radius: 0 min(10.2564102564vw, 80px) 0 min(10.2564102564vw, 80px);
}
.cta-item-text {
  position: absolute;
  left: 0;
}
.cta-item-text.neutral {
  width: min(28.8461538462vw, 225px);
  top: min(2.5641025641vw, 20px);
}
.cta-item-text.spicy {
  width: min(15vw, 117px);
  top: min(10.2564102564vw, 80px);
}

.subscription {
  width: 100%;
  background: url("../../lp/images/qmelip2024r/subscription-bg.jpg") no-repeat;
  background-size: cover;
  padding: min(10.2564102564vw, 80px) 0 min(16.6666666667vw, 130px);
}
.subscription-inner {
  padding: 0 min(5.1282051282vw, 40px);
}
.subscription-point {
  display: flex;
  gap: min(1.2820512821vw, 10px);
}
.subscription-point li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.subscription-point li.visible {
  opacity: 1;
  transform: translateY(0);
}
.subscription-item {
  margin-top: min(10.2564102564vw, 80px);
  background: #FFF;
  box-shadow: 0px 0px 21px 6px rgba(231, 62, 62, 0.13);
  border-radius: min(10.2564102564vw, 80px) 0 min(10.2564102564vw, 80px) 0;
  position: relative;
  padding: min(11.5384615385vw, 90px) min(3.8461538462vw, 30px) min(12.5641025641vw, 80px);
}
.subscription-item-text {
  position: absolute;
  left: 0;
  width: min(28.8461538462vw, 225px);
  top: min(2.5641025641vw, 20px);
}
.subscription p {
  margin-top: 20px;
  font-size: min(3.33vw,27px);
}

.secret-content {
  width: 100%;
  height: 100%;
  background: url("../../lp/images/qmelip2024r/secret-bg.jpg") no-repeat bottom;
  background-size: 100%;
  padding-top: min(10.2564102564vw, 80px);
}
.secret-title {
  position: relative;
  z-index: 10;
}
.secret-item {
  width: min(94.8717948718vw, 740px);
  background: #fff;
  box-shadow: 0 0px 15px -4px rgba(0, 0, 0, 0.1);
  position: relative;
  padding: min(11.5384615385vw, 90px) min(3.8461538462vw, 30px) min(6.4102564103vw, 50px);
}
.secret-item::before {
  content: "";
  position: absolute;
  top: min(-3.8461538462vw, -30px);
  left: min(1.2820512821vw, 10px);
}
.secret-item.item01 {
  margin-top: min(-3.8461538462vw, -30px);
}
.secret-item.item01::after {
  content: "";
  width: min(17.1794871795vw, 134px);
  height: min(35.641025641vw, 178px);
  background: url("../../lp/images/qmelip2024r/bubble01.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: -40px;
  right: -40px;
}
@media screen and (max-width: 780px) {
  .secret-item.item01::after {
    top: -5.1282051282vw;
    right: -5.1282051282vw;
  }
}
.secret-item.item01::before {
  width: min(10.2564102564vw, 80px);
  height: min(18.5897435897vw, 145px);
  background: url("../../lp/images/qmelip2024r/secret-no1.png") no-repeat;
  background-size: 100%;
}
.secret-item.item02 {
  margin-top: min(12.8205128205vw, 100px);
  margin-left: auto;
}
.secret-item.item02::before {
  width: min(12.8205128205vw, 100px);
  height: min(18.5897435897vw, 145px);
  background: url("../../lp/images/qmelip2024r/secret-no2.png") no-repeat;
  background-size: 100%;
}
.secret-item.item02 span {
  display: block;
  text-align: right;
  font-size: min(2.5641025641vw, 20px);
}
.secret-item-title {
  position: relative;
  margin-bottom: min(5.7692307692vw, 45px);
}
.secret-also {
  width: min(75.641025641vw, 590px);
  margin: min(11.5384615385vw, 90px) auto 0;
}
.secret .item03 {
  position: relative;
}
.secret .item03::before {
  content: "";
  position: absolute;
  top: min(-3.8461538462vw, -30px);
  left: min(3.8461538462vw, 30px);
  width: min(13.8461538462vw, 108px);
  height: min(18.5897435897vw, 145px);
  background: url("../../lp/images/qmelip2024r/secret-no3.png") no-repeat;
  background-size: 100%;
}
.secret-ba {
  margin-top: min(7.6923076923vw, 60px);
}

.series {
  margin-top: min(7.6923076923vw, 60px);
}

.user {
  padding: min(8.9743589744vw, 70px) 0;
  background: url("../../lp/images/qmelip2024r/user-bg.jpg") no-repeat;
  background-size: cover;
}
.user-title {
  width: min(82.0512820513vw, 640px);
  margin: 0 auto min(9.6153846154vw, 75px);
}
.user .slick-dots li button:before {
  font-size: 12px;
  color: #FFF;
  opacity: 1;
}
.user .slick-dots li.slick-active button:before {
  opacity: 1;
  color: #890404;
}
.user span {
  display: block;
  margin-top: min(6.4102564103vw, 50px);
  margin-right: min(5.1282051282vw, 40px);
  text-align: right;
  font-size: min(2.5641025641vw, 20px);
}

.care {
  position: relative;
}
.care-title {
  width: min(84.6153846154vw, 660px);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}
@media screen and (max-width: 780px) {
  .care-title {
    top: -3.8461538462vw;
  }
}
.care-effect {
  padding-top: min(15.3846153846vw, 120px);
  padding-bottom: min(39.7435897436vw, 310px);
  background: url("../../lp/images/qmelip2024r/care-effect-bg.jpg") no-repeat top;
}
.care-effect-title {
  padding: 0 min(5.1282051282vw, 40px);
}
.care-effect-point {
  display: flex;
}
.care-effect-point li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.care-effect-point li.visible {
  opacity: 1;
  transform: translateY(0);
}
.care-effect-copy {
  width: min(75.641025641vw, 590px);
  margin: 0 auto;
}
.care-merit {
  margin-top: -257px;
}
@media screen and (max-width: 780px) {
  .care-merit {
    margin-top: -32.9487179487vw;
  }
}

.faq {
  overflow-x: hidden;
}
.faq-arrow {
  width: min(1.9230769231vw, 15px);
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 780px) {
  .faq-arrow {
    top: -5.1282051282vw;
  }
}
.faq-content {
  background: url("../../lp/images/qmelip2024r/faq-bg.jpg") no-repeat top;
  background-size: cover;
  padding: min(16.0256410256vw, 125px) 0;
  position: relative;
}
.faq-content li {
  width: min(94.8717948718vw, 740px);
  background: #ffffff;
  box-shadow: 0px 0px 21px 6px rgba(231, 62, 62, 0.13);
  padding: min(7.6923076923vw, 60px) min(5.1282051282vw, 40px);
}
.faq-content li:nth-child(odd) {
  border-radius: 0 min(6.4102564103vw, 50px) min(6.4102564103vw, 50px) 0;
}
.faq-content li:nth-child(even) {
  margin-left: auto;
  border-radius: min(6.4102564103vw, 50px) 0 0 min(6.4102564103vw, 50px);
}
.faq-content li:not(:last-child) {
  margin-bottom: min(6.4102564103vw, 50px);
}
.faq-content li div {
  display: flex;
  align-items: flex-start;
  gap: min(2.5641025641vw, 20px);
}
.faq-content li div span {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: min(6.4102564103vw, 50px);
  letter-spacing: 6px;
}
.faq-content-q {
  margin-bottom: min(5.1282051282vw, 40px);
}
.faq-content-q span {
  line-height: 88%;
}
.faq-content-q p {
  font-weight: 500;
  font-size: min(4.8717948718vw, 38px);
}
.faq-content-a span {
  color: #890405;
}
.faq-content-a p {
  font-size: min(4.1025641026vw, 32px);
  line-height: 155%;
}
.faq-content-a p small {
  display: block;
}

.component {
  padding: min(14.1025641026vw, 110px) 0;
  background: url("../../lp/images/qmelip2024r/component-bg.jpg") no-repeat;
}
.component-text {
  margin-bottom: min(7.6923076923vw, 60px);
  text-align: center;
}
.component-text p {
  margin-bottom: min(2.5641025641vw, 20px);
  font-size: min(5.1282051282vw, 40px);
}
.component-text span {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-size: min(3.8461538462vw, 30px);
  letter-spacing: 2.5px;
}
.component-title {
  width: min(73.7179487179vw, 575px);
  margin: 0 auto min(5.1282051282vw, 40px);
}
.component-list {
  padding: 0 min(2.5641025641vw, 20px);
  position: relative;
}
.component-list::after {
  content: "";
  width: min(27.5641025641vw, 215px);
  height: min(29.4871794872vw, 230px);
  background: url("../../lp/images/qmelip2024r/component-deco.png") no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  bottom: -140px;
}
@media screen and (max-width: 780px) {
  .component-list::after {
    bottom: -17.9487179487vw;
  }
}
.component-plumb {
  margin-top: min(5.1282051282vw, 40px);
}
.component-plumb-title {
  padding: 0 min(3.8461538462vw, 30px);
}
.component-plumb-list {
  margin: min(3.8461538462vw, 30px) 0;
}
.component-copy {
  margin-top: -40px;
}
@media screen and (max-width: 780px) {
  .component-copy {
    margin-top: -5.1282051282vw;
  }
}
.component-copy-text {
  width: min(75.641025641vw, 590px);
  margin: 0 auto;
}

.recommendHowto {
  background: url("../../lp/images/qmelip2024r/recommendHowto-bg.jpg") no-repeat;
  background-size: cover;
  padding: min(12.8205128205vw, 100px) 0;
}
.recommendHowto-title {
  width: min(87.8205128205vw, 658px);
  margin-left: min(5.1282051282vw, 40px);
  margin-bottom: min(7.6923076923vw, 60px);
}
.recommendHowto-list li {
  width: min(89.7435897436vw, 700px);
  margin: 0 auto;
  background: #FFF;
  box-shadow: 0px 0px 21px 6px rgba(231, 62, 62, 0.13);
  padding: min(5.1282051282vw, 40px) min(3.8461538462vw, 30px);
}
.recommendHowto-list li:not(:last-child) {
  margin-bottom: min(6.4102564103vw, 50px);
}
.recommendHowto-list li:nth-child(1) .recommendHowto-list-title::before {
  content: "01";
}
.recommendHowto-list li:nth-child(2) .recommendHowto-list-title::before {
  content: "02";
}
.recommendHowto-list li:nth-child(3) .recommendHowto-list-title::before {
  content: "03";
}
.recommendHowto-list li:nth-child(4) .recommendHowto-list-text {
  align-items: flex-start;
}
.recommendHowto-list li:nth-child(4) .recommendHowto-list-text span {
  margin-top: min(10.2564102564vw, 80px);
}
.recommendHowto-list li:nth-child(4) .recommendHowto-list-title::before {
  content: "04";
}
.recommendHowto-list-title {
  margin-bottom: min(4.4871794872vw, 35px);
  padding-left: min(7.6923076923vw, 60px);
  position: relative;
  font-weight: 500;
  color: #8a0404;
  font-size: min(5.1282051282vw, 40px);
}
.recommendHowto-list-title::before {
  width: min(16.0256410256vw, 125px);
  background: #8a0404;
  color: #FFF;
  font-size: min(5.1282051282vw, 40px);
  position: absolute;
  left: -70px;
  text-align: right;
  border-radius: 0 50px 50px 0;
  padding-right: min(2.4358974359vw, 19px);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
}
@media screen and (max-width: 780px) {
  .recommendHowto-list-title::before {
    left: -8.9743589744vw;
  }
}
.recommendHowto-list-text {
  display: flex;
  align-items: center;
}
.recommendHowto-list-text p {
  font-size: min(4.2307692308vw, 33px);
  line-height: 150%;
  flex: 1;
}
.recommendHowto-list-text p small {
  display: block;
  font-size: min(3.5897435897vw, 28px);
  line-height: 140%;
}
.recommendHowto-list-text span {
  width: min(19.2307692308vw, 150px);
}

.up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.up.visible {
  opacity: 1;
  transform: translateY(0);
}

.right {
  transform: translateX(50px);
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.right.visible {
  opacity: 1;
  transform: translateX(0);
}

.left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.left.visible {
  opacity: 1;
  transform: translateX(0);
}/*# sourceMappingURL=style.css.map */