html {
  font-size: 62.5%;
}


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

@media screen and (max-width: 768px) {
  html {
    font-size: 62.5%;
  }
}


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

.l-container {
  margin: 0 auto;
  background-color: #fbfffd;
  color: #000;
  letter-spacing: 0;
}

.l-container img,
.l-container video {
  width: 100%;
  display: block;
}

.l-container a {
  text-decoration: none;
}

.l-container .cta-inner {
  background: url("/resource/lp/srn001p03bt/img/cta_bg.png") no-repeat center center / cover;
}

.l-container .cta-title {
  position: relative;
  z-index: 1;
}

.l-container .cta-main {
  position: relative;
}

.l-container .cta-btn {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translateX(-50%);
}

.l-container .cta-btn img {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-20%);}
	60% {transform: translateY(-10%);}
}

.hmpaSlider .slick-arrow {
  background: url("/resource/lp/srn001p03bt/img/arrow.png") no-repeat center center / cover;
  font-size: 0;
  position: absolute;
  top: 45%;
  z-index: 1;
}

.hmpaSlider .slick-arrow.slick-prev {
  transform: rotate(180deg);
}

.hmpaSlider .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hmpaSlider .slick-dots li {
  font-size: 0;
  background-color: #cecece;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hmpaSlider .slick-dots li:hover {
  background-color: #292929;
}

.hmpaSlider .slick-dots li.slick-active {
  background-color: #292929;
}

.l-container .m-auto {
  margin: 0 auto;
}

.l-container .hmpa {
  background: url("/resource/lp/srn001p03bt/img/hmpa_bg.png") no-repeat center center / cover;
}

.l-container .point {
  background: url("/resource/lp/srn001p03bt/img/point_bg.png") no-repeat center center / cover;
}

.l-container .doyouknow {
  background: url("/resource/lp/srn001p03bt/img/10.png") no-repeat center center / cover;
}

.l-container .doyouknow h2 {
  background: rgba(79, 79, 79, 0.85);
  mix-blend-mode: multiply;
}

.l-container .doyouknow p {
  position: relative;
}

.l-container .product {
  padding-bottom: 1px;
  background: url("/resource/lp/srn001p03bt/img/13.png") no-repeat center center / cover;
}

.l-container .qa {
  font-feature-settings: "palt";
}

.l-container .qa-q {
  line-height: 2;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ff6458;
  position: relative;
  cursor: pointer;
}

.l-container .qa-q::before {
  content: "";
  position: absolute;
  left: 0;
  background: url("/resource/lp/srn001p03bt/img/Q.png") no-repeat center center / cover;
}

.l-container .accordion-icon {
  position: absolute;
  right: 0;
}

.l-container .accordion-icon::before,
.l-container .accordion-icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  transition: all 0.3s ease;
}

.l-container .qa-accordion li {
  border-top: 1px solid #000;
}

.l-container li.active .accordion-icon::after {
  transform: rotate(90deg);
}

.l-container .qa-a {
  letter-spacing: 0.04em;
  line-height: calc(34 / 22);
  font-weight: 500;
  display: none;
}

/* PC */
@media screen and (min-width: 769px) {
  .l-container {
    max-width: 75rem;
  }

  .l-container .cta-inner {
    padding: 0 2.8rem;
    padding-bottom: 4.6rem;
  }

  .l-container .cta-title {
    margin-bottom: -11.5rem;
  }

  .l-container .cta-main {
    margin-bottom: 1.5rem;
  }

  .l-container .cta-btn {
    width: 61.7rem;
  }

  .hmpaSlider {
    margin-bottom: 5rem;
  }

  .hmpaSlider .slick-slide {
    padding:  0 4rem;
  }

  .hmpaSlider .slick-arrow {
    width: 6.2rem;
    height: 6.2rem;
  }

  .hmpaSlider .slick-arrow.slick-prev {
    left: 1rem;
  }

  .hmpaSlider .slick-arrow.slick-next {
    right: 1rem;
  }

  .hmpaSlider .slick-dots {
    margin-top: 3.4rem;
  }

  .hmpaSlider .slick-dots li {
    width: 2rem;
    height: 2rem;
    margin: 0 1.7rem;
  }

  .l-container .imgw01 {
    width: 60rem;
  }

  .l-container .imgw02 {
    width: 68rem;
  }

  .l-container .hmpa {
    padding-bottom: 3rem;
  }


  .l-container .voice li {
    margin-bottom: 1.5rem;
  }

  .l-container .voice-title {
    width: 60.2rem;
    margin: 0 auto 3rem;
  }

  .l-container .point {
    padding: 3rem 0 4rem;
  }

  .l-container .point-title {
    width: 47.5rem;
    margin: 0 auto 2rem;
  }

  .l-container .point li:not(:last-child) {
    margin-bottom: 2.8rem;
  }

  .l-container .doyouknow {
    padding-bottom: 4rem;
  }

  .l-container .doyouknow h2 {
    padding: 3.8rem 5.5rem 12rem;
    margin-bottom: -10rem;
  }

  .l-container .doyouknow p {
    padding: 0 2.1rem;
  }

  .l-container .metabolic {
    padding: 4.8rem 0 3rem;
  }

  .l-container .imgw03 {
    width: 57rem;
    padding: 3.8rem 0 4.2rem;
  }

  .l-container .imgw04 {
    width: 67.2rem;
    padding: 3.6rem 0 4.6rem;
  }

  .l-container .qa {
    padding: 2rem 0 2.8rem;
  }

  .l-container .qa-accordion {
    padding: 0 4rem;
    margin-top: 3.6rem;
  }

  .l-container .qa-q {
    font-size: 3rem;
    padding: 1.5rem 4rem 1.5rem 6rem;
  }

  .l-container .qa-q::before {
    top: 2.2rem;
    width: 4.4rem;
    height: 4.3rem;
  }

  .l-container .accordion-icon {
    top: 4.2rem;
    width: 1rem;
    height: .3rem;
  }

  .l-container .qa-accordion li {
    padding: 2rem 2rem 2rem 1rem;
  }

  .l-container .qa-a {
    font-size: 2.2rem;
    padding: 0 7rem 0 6rem;
  }
}

/* SP */
@media screen and (max-width: 768px) {
  .l-container {
    max-width: calc(750 / 750 * 100vw);
  }

  .l-container .cta-inner {
    padding: 0 calc(28 / 750 * 100vw);
    padding-bottom: calc(46 / 750 * 100vw);
  }

  .l-container .cta-title {
    margin-bottom: calc(-115 / 750 * 100vw);
  }

  .l-container .cta-main {
    margin-bottom: calc(15 / 750 * 100vw);
  }

  .l-container .cta-btn {
    width: calc(617 / 750 * 100vw);
  }

  .hmpaSlider {
    margin-bottom: calc(50 / 750 * 100vw);
  }

  .hmpaSlider .slick-slide {
    padding:  0 calc(40 / 750 * 100vw);
  }

  .hmpaSlider .slick-arrow {
    width: calc(62 / 750 * 100vw);
    height: calc(62 / 750 * 100vw);
  }

  .hmpaSlider .slick-arrow.slick-prev {
    left: calc(10 / 750 * 100vw);
  }

  .hmpaSlider .slick-arrow.slick-next {
    right: calc(10 / 750 * 100vw);
  }

  .hmpaSlider .slick-dots {
    margin-top: calc(34 / 750 * 100vw);
  }

  .hmpaSlider .slick-dots li {
    width: calc(20 / 750 * 100vw);
    height: calc(20 / 750 * 100vw);
    margin: 0 calc(17 / 750 * 100vw);
  }

  .l-container .imgw01 {
    width: calc(600 / 750 * 100vw);
  }

  .l-container .imgw02 {
    width: calc(680 / 750 * 100vw);
  }

  .l-container .hmpa {
    padding-bottom: calc(30 / 750 * 100vw);
  }


  .l-container .voice li {
    margin-bottom: calc(15 / 750 * 100vw);
  }

  .l-container .voice-title {
    width: calc(602 / 750 * 100vw);
    margin: 0 auto calc(30 / 750 * 100vw);
  }

  .l-container .point {
    padding: calc(30 / 750 * 100vw) 0 calc(40 / 750 * 100vw);
  }

  .l-container .point-title {
    width: calc(475 / 750 * 100vw);
    margin: 0 auto calc(20 / 750 * 100vw);
  }

  .l-container .point li:not(:last-child) {
    margin-bottom: calc(28 / 750 * 100vw);
  }

  .l-container .doyouknow {
    padding-bottom: calc(40 / 750 * 100vw);
  }

  .l-container .doyouknow h2 {
    padding: calc(38 / 750 * 100vw) calc(55 / 750 * 100vw) calc(120 / 750 * 100vw);
    margin-bottom: calc(-100 / 750 * 100vw);
  }

  .l-container .doyouknow p {
    padding: 0 calc(21 / 750 * 100vw);
  }

  .l-container .metabolic {
    padding: calc(48 / 750 * 100vw) 0 calc(30 / 750 * 100vw);
  }

  .l-container .imgw03 {
    width: calc(570 / 750 * 100vw);
    padding: calc(38 / 750 * 100vw) 0 calc(42 / 750 * 100vw);
  }

  .l-container .imgw04 {
    width: calc(672 / 750 * 100vw);
    padding: calc(36 / 750 * 100vw) 0 calc(46 / 750 * 100vw);
  }

  .l-container .qa {
    padding: calc(20 / 750 * 100vw) 0 calc(28 / 750 * 100vw);
  }

  .l-container .qa-accordion {
    padding: 0 calc(40 / 750 * 100vw);
    margin-top: calc(36 / 750 * 100vw);
  }

  .l-container .qa-q {
    font-size: calc(30 / 750 * 100vw);
    padding: calc(15 / 750 * 100vw) calc(40 / 750 * 100vw) calc(15 / 750 * 100vw) calc(60 / 750 * 100vw);
  }

  .l-container .qa-q::before {
    top: calc(22 / 750 * 100vw);
    width: calc(44 / 750 * 100vw);
    height: calc(43 / 750 * 100vw);
  }

  .l-container .accordion-icon {
    top: calc(42 / 750 * 100vw);
    width: calc(10 / 750 * 100vw);
    height: calc(3 / 750 * 100vw);
  }

  .l-container .qa-accordion li {
    padding: calc(20 / 750 * 100vw) calc(20 / 750 * 100vw) calc(20 / 750 * 100vw) calc(10 / 750 * 100vw);
  }

  .l-container .qa-a {
    font-size: calc(22 / 750 * 100vw);
    padding: 0 calc(70 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
  }
}