@font-face {
  font-family: "Gen Jyuu Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font/GenJyuuGothic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Gen Jyuu Gothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("font/GenJyuuGothic-Bold.woff2") format("woff2");
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5fbfe;
  color: #3e3a39;
  font-family: "Gen Jyuu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.lp-container {
  width: 100%;
  max-width: 750px;
  margin-inline: auto;
  container-type: inline-size;
}
.lp-skin .lp-container {
  background-color: #FFFCF7;
}
.lp-hair .lp-container {
  background-color: #F5FBFE;
}
.lp-diet .lp-container {
  background-color: #FFF6F8;
}

.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4cqw 0 4cqw 4cqw;
}
.lp-header__logo {
  display: block;
  width: 45.2cqw;
  height: auto;
}
.lp-header__logo-image {
  display: block;
  width: 100%;
  height: auto;
}
.lp-header__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50cqw;
  aspect-ratio: 375/80;
  border-radius: 999px 0 0 999px;
}
.lp-header__badge--hair {
  gap: 2.6666666667cqw;
  background-color: #82a4d2;
}
.lp-header__badge--hair .lp-header__icon {
  width: 5.5029333333cqw;
}
.lp-header__badge--skin {
  gap: 2.6666666667cqw;
  background-color: #df9459;
}
.lp-header__badge--skin .lp-header__icon {
  width: 5.4636cqw;
}
.lp-header__badge--body {
  gap: 0.6666666667cqw;
  background-color: #dd91b0;
}
.lp-header__badge--body .lp-header__icon {
  width: 5.0281333333cqw;
}
.lp-header__icon {
  display: block;
  height: auto;
}
.lp-header__text {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.55px;
  line-height: 1.1;
}

.lp-images__link {
  display: block;
  width: 100%;
}
.lp-images__link--narrow {
  width: 95.7333333333cqw;
  margin-inline: auto;
}
.lp-images__image {
  display: block;
  width: 100%;
  height: auto;
}

.lp-medicine {
  padding: 10.6666666667cqw 6.6666666667cqw 12cqw;
}
.lp-medicine__image {
  display: block;
  width: 100%;
  height: auto;
}
.lp-medicine__image + .lp-medicine__image {
  margin-top: 5.3333333333cqw;
}

.lp-faq {
  padding: 0 6.6666666667cqw 10.6666666667cqw;
}
.lp-faq__heading {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1.56px;
  line-height: 1.4;
  text-align: left;
}
.lp-hair .lp-faq__heading {
  color: #4563ad;
}
.lp-skin .lp-faq__heading {
  color: #df9459;
}
.lp-diet .lp-faq__heading {
  color: #dc7484;
}
.lp-faq__list {
  margin-top: 5.3333333333cqw;
}
.lp-faq__item + .lp-faq__item {
  margin-top: 5.3333333333cqw;
}
.lp-faq__row {
  display: flex;
  align-items: flex-start;
  gap: 2.1333333333cqw;
}
.lp-faq__answer-row, .lp-faq__divider {
  margin-top: 2.6666666667cqw;
}
.lp-faq__label, .lp-faq__question, .lp-faq__answer {
  font-size: 13px;
  letter-spacing: 0.52px;
  line-height: 1.8;
}
.lp-faq__label {
  flex: 0 0 auto;
  font-weight: 700;
}
.lp-faq__label--question {
  color: #4563ad;
}
.lp-faq__label--answer {
  color: #dc7484;
}
.lp-faq__question, .lp-faq__answer {
  flex: 1;
  color: #3e3a39;
}
.lp-faq__question {
  font-weight: 700;
}
.lp-faq__answer {
  font-weight: 400;
}
.lp-faq__divider {
  width: 100%;
  height: 1px;
  background-color: #d4d4d4;
}

@media (min-width: 768px) {
  .lp-faq__heading {
    font-size: 44px;
    letter-spacing: 2.64px;
    line-height: 66px;
  }
  .lp-faq__label {
    font-size: 26px;
    letter-spacing: 1.04px;
  }
  .lp-faq__question {
    font-size: 21px;
    letter-spacing: 0.84px;
  }
  .lp-faq__answer {
    font-size: 18px;
    letter-spacing: 0.72px;
  }
}
.lp-contact {
  padding: 10.6666666667cqw 6.6666666667cqw 12cqw;
  background-color: #fff;
}
.lp-contact__box {
  padding: 4cqw 5.3333333333cqw;
  border: 1px solid #4563ad;
  border-radius: 2.6666666667cqw;
}
.lp-contact__title {
  color: #4563ad;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.64px;
  line-height: 1.8;
  text-align: center;
}
.lp-contact__text {
  margin-top: 2.6666666667cqw;
  color: #3e3a39;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.52px;
  line-height: 1.8;
  text-align: left;
}
.lp-contact__note {
  margin-top: 2.6666666667cqw;
  color: #3e3a39;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.48px;
  line-height: 1.8;
  text-align: center;
}

.lp-footer {
  padding: 13.3333333333cqw 8cqw 8cqw;
  background-color: #81a4d3;
  color: #fff;
}
.lp-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-footer__link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.04px;
  line-height: 3.6;
  text-align: center;
}
.lp-footer__copyright {
  margin-top: 10.6666666667cqw;
  padding-block: 2.6666666667cqw;
  border-top: 1px solid #fff;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.8px;
  line-height: 1.4;
  text-align: center;
}
.lp-footer__copyright small {
  font-size: inherit;
}