@charset "UTF-8";

html {
  scroll-behavior: smooth;
}
body {
  color: #363636;
  font-family: "Noto Sans JP", sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  position: relative;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.l-wrapper {
  width: 430px;
  max-width: 100%;
  margin-inline: auto;
}
.l-container {
  padding-inline: 18px;
}
.l-header {
  width: 100%;
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.l-headerLogo {
  width: 137px;
}

.c-cta {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.c-cta.--floating {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5;
}
.c-ctaButton {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 112px;
  position: relative;
}
.c-ctaButton.--pink {
  background-color: #f08c8c;
}
.c-ctaButton.--blue {
  background-color: #4dbec4;
}
.c-ctaButton span {
  display: block;
}
.c-ctaButton::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 12px;
  background-image: url("../images/icon_arrow_white.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  right: 18px;
  translate: 0 -50%;
}

/* trouble */
.p-trouble {
  padding-block: 24px 55.4%;
  background-image: url("../images/bg_trouble_01.png");
  background-size: cover;
  background-position: bottom center;
  position: relative;
  z-index: 1;
}
.p-trouble::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  translate: -50% 50%;
  width: 4px;
  height: 70px;
  background-image: radial-gradient(circle, #3c3c3c 2px, transparent 2px),
    radial-gradient(circle, #3c3c3c 2px, transparent 2px),
    radial-gradient(circle, #3c3c3c 2px, transparent 2px),
    radial-gradient(circle, #3c3c3c 2px, transparent 2px),
    radial-gradient(circle, #3c3c3c 2px, transparent 2px),
    radial-gradient(circle, #3c3c3c 2px, transparent 2px),
    radial-gradient(circle, #3c3c3c 2px, transparent 2px),
    radial-gradient(circle, #3c3c3c 2px, transparent 2px);
  background-size: 4px 4px;
  background-position: 0 0, 0 11px, 0 22px, 0 33px, 0 44px, 0 55px, 0 66px,
    0 77px;
  background-repeat: no-repeat;
}
.p-troubleHeading {
  width: 79.53%;
  margin-inline: auto;
}
.p-troubleText {
  width: 90.93%;
  margin-top: -18px;
  margin-inline: auto;
}

/* solution */
.p-solution {
  padding-block: calc(42.33% + 62px) 32px;
  background-color: #f08c8b;
  margin-top: -42.33%;
  position: relative;
  z-index: 0;
}
.p-solutionHeading {
  color: #fff;
  font-size: 5.58vw;
  font-weight: 800;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}
.p-solutionHeading strong {
  color: #fef688;
  font-size: 7.91vw;
}
.p-solutionHeading::before {
  content: "";
  display: inline-block;
  width: 52px;
  height: 39px;
  background-image: url("../images/illust_heading_solution_left.png");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: -3px;
  left: 34px;
  translate: 0 -100%;
}
.p-solutionHeading::after {
  content: "";
  display: inline-block;
  width: 72px;
  height: 54px;
  background-image: url("../images/illust_heading_solution_right.png");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 0;
  right: 29px;
  translate: 0 -100%;
}
.p-solutionBalloon {
  width: 87.67%;
  margin-inline: auto;
}
.p-solutionReason {
  background-color: #fff;
  padding-top: 50px;
  width: 91.63%;
  margin-inline: auto;
  margin-top: -40px;
  border-radius: 5px;
  list-style: none;
}
.p-solutionReasonItem + .p-solutionReasonItem {
  padding-top: 30px;
}
.p-solutionReasonBody {
  padding-inline: 16px;
  padding-bottom: 30px;
}
.p-solutionReasonHeading {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}
.p-solutionReasonHeadingMain {
  font-size: 5.35vw;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.p-solutionReasonHeadingMain span {
  position: relative;
}
.p-solutionReasonHeadingMain span::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #f08c8b;
  position: absolute;
  bottom: 0;
  left: 0;
}
.p-solutionReasonText {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 430px) {
  .p-solutionHeading {
    font-size: 24px;
  }
  .p-solutionHeading strong {
    font-size: 34px;
  }
  .p-solutionReasonHeadingMain {
    font-size: 23px;
  }
}

.p-about {
  padding-block: 90px 72px;
  background-color: rgb(126 213 234 / 25%);
}
.p-aboutHeading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}
.p-aboutHeading span {
  color: #33b5bc;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.p-aboutHeading em {
  color: #fff;
  font-size: 7.44vw;
  font-style: normal;
  display: inline-block;
  background-color: #21b4bc;
  padding: 0 4px 4px;
}
.p-aboutHeading::after {
  content: "";
  width: 259px;
  height: 57px;
  background-image: url("../images/text_heading_about.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 18px;
  left: 50%;
  translate: -50% -100%;
}
.p-aboutContents {
  width: 86.98%;
  margin-inline: auto;
}
.p-aboutContents + .p-aboutContents {
  margin-top: 25px;
}
.p-aboutSmallHeading {
  color: #33b5bc;
  font-size: 23px;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.p-aboutText {
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2;
}
.p-aboutImage {
  margin-top: 10px;
}
.p-aboutRecommend {
  margin-top: 32px;
}
.p-aboutRecommendHeading {
  width: 144px;
  margin-inline: auto;
  margin-bottom: 14px;
}
.p-aboutRecommendBox {
  width: 86.98%;
  margin-inline: auto;
  border: 2px solid #363636;
  border-radius: 5px;
  overflow: hidden;
}
.p-aboutRecommendBoxTitle {
  color: #fff;
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 65px;
  background: linear-gradient(90deg, #3ab5d4 0%, #3bcece 100%);
}
.p-aboutRecommendBody {
  background-color: #fff;
  padding: 25px;
}
.p-aboutRecommendCheck {
  list-style: none;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.p-aboutRecommendCheck li {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.p-aboutRecommendCheck li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../images/icon_check.svg");
  background-size: contain;
  background-position: center;
}
.p-aboutRecommendCheck em {
  color: #3bb5d3;
  font-style: normal;
}
@media screen and (min-width: 430px) {
  .p-aboutHeading em {
    font-size: 32px;
  }
}

/* plan */
.p-plan {
  padding-block: 93px 50px;
  background-color: #1bb8d5;
}
.p-planHeading {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 13px;
  position: relative;
}
.p-planHeading::before {
  content: "";
  display: inline-block;
  width: 191px;
  height: 55px;
  background-image: url("../images/text_heading_plan.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 14px;
  left: 50%;
  translate: -50% -100%;
}
.p-planText {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
}
.p-planList {
  width: 87.21%;
  margin-inline: auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
}
.p-planNoteWrapper {
  width: 87.21%;
  margin-inline: auto;
  margin-top: 24px;
}
.p-planNote {
  color: #fff;
  font-size: 12px;
  list-style: none;
}
.p-planNote li {
  line-height: 2;
  letter-spacing: 0.04em;
  padding-left: 1.5em;
  position: relative;
}
.p-planNote li::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

/* howto */
.p-howto {
  padding-block: 98px 50px;
  background-color: #faf0f1;
}
.p-howtoHeading {
  color: #f08c8b;
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
  position: relative;
}
.p-howtoHeading::before {
  content: "";
  display: inline-block;
  width: 272px;
  height: 57px;
  background-image: url("../images/text_heading_howto.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 15px;
  left: 50%;
  translate: -50% -100%;
}
.p-howtoImage {
  width: 100%;
}
.p-howtoContents {
  width: 87.21%;
  margin-inline: auto;
  margin-top: 24px;
}
.p-howtoText {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
}
.p-howtoMovie {
  margin-top: 32px;
}
.p-howtoMovie iframe {
  width: 100%;
  aspect-ratio: 374 / 212;
}
.p-howtoStepWrapper {
  margin-top: 40px;
}
.p-howtoStepTitle {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}
.p-howtoStepTitle span {
  display: inline-block;
  background-color: #faf0f1;
  padding-inline: 30px;
  position: relative;
  z-index: 1;
}
.p-howtoStepTitle::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #363636;
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  z-index: 0;
}
.p-howtoStep {
  list-style: none;
}
.p-howtoStepItem:not(:last-child) {
  padding-bottom: 55px;
  position: relative;
}
.p-howtoStepItem:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 23px;
  height: 30px;
  background-image: url("../images/img_arrow_pink.png");
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
}
.p-howtoStepName {
  width: 100%;
  margin-bottom: 12px;
}
.p-howtoStepText {
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: center;
}
.p-efficacyBox {
  width: 87.21%;
  padding-block: 30px 24px;
  padding-inline: 32px;
  margin-top: 45px;
  margin-inline: auto;
  background-color: #fff;
  border: 3px solid #2e2e2e;
  border-radius: 5px;
  position: relative;
}
.p-efficacyBox::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 31px;
  background-color: #f08c8b;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
}
.p-efficacyBoxTitle {
  color: #f07574;
  font-size: 19px;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}
.p-efficacyItem {
  line-height: 2;
  margin-top: 15px;
}
.p-efficacyName {
  font-size: 16px;
  font-weight: bold;
}
.p-efficacyName::before {
  content: "●";
  color: #f07574;
}
.p-efficacyText {
  font-size: 14px;
  font-weight: 500;
}

/* review */
.p-review {
  padding-block: 60px 56px;
  padding-inline: 25px;
  border: 15px solid #f9eeb1;
  position: relative;
}
.p-reviewTopLeft {
  width: 65px;
  height: 177px;
  background-image: url("../images/bg_review_topleft.png");
  background-position: top left;
  background-size: contain;
  position: absolute;
  top: 67px;
  left: -15px;
}
.p-reviewTopRight {
  width: 84px;
  height: 216px;
  background-image: url("../images/bg_review_topright.png");
  background-position: top right;
  background-size: contain;
  position: absolute;
  top: -8px;
  right: -15px;
}
.p-reviewBottomLeft {
  width: 94px;
  height: 110px;
  background-image: url("../images/bg_review_bottomleft.png");
  background-position: bottom left;
  background-size: contain;
  position: absolute;
  bottom: -15px;
  left: -15px;
}
.p-reviewHeading {
  color: #38b1de;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.p-reviewVoice {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.p-reviewVoice::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 27px;
  background-image: url("../images/img_voice_bottom.svg");
  background-size: contain;
  background-position: center;
  margin-top: 10px;
}
.p-reviewListItem {
  margin-top: 30px;
}
.p-reviewListHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.p-reviewAge {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 26px;
  display: inline-block;
  padding-inline: 6px;
  background-color: #fef688;
  margin-bottom: 4px;
}
.p-reviewImage {
  width: 110px;
  flex-shrink: 0;
}
.p-reviewTitle {
  font-size: 4.19vw;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 2;
  text-decoration: underline;
  text-decoration-color: #40b4df;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.p-reviewText {
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 16px;
}
.p-reviewMovie {
  margin-block: 30px;
}
.p-reviewMovie iframe {
  width: 100%;
  aspect-ratio: 374 / 212;
}
.p-reviewNote {
  list-style: none;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}
.p-reviewNote li::before {
  content: "※";
}
@media screen and (min-width: 430px) {
  .p-reviewTitle {
    font-size: 18px;
  }
}

/* flow */
.p-flow {
  background-color: #fbbaba;
  padding-block: 86px 40px;
}
.p-flowHeading {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.p-flowHeading::before {
  content: "";
  display: inline-block;
  width: 195px;
  height: 57px;
  background-image: url("../images/text_heading_flow.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 18px;
  left: 50%;
  translate: -50% -100%;
  z-index: -1;
}
.p-stepContainer {
  width: 91.63%;
  margin-inline: auto;
}
.p-stepImage {
  max-width: 338px;
  margin-bottom: 20px;
}
.p-stepName {
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 12px;
}
.p-stepName small {
  font-size: 15px;
}
.p-stepText {
  font-size: 16px;
  text-align: center;
  line-height: 1.75;
}

/* flow */
.p-flow .splide {
  padding-bottom: 20px;
}
.p-flow .splide__pagination {
  bottom: 0;
  gap: 8px;
}
.p-flow .splide__pagination__page {
  width: 5px;
  height: 5px;
  background-color: #363636;
  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: background-color 0.3s ease;
}
.p-flow .splide__pagination__page.is-active {
  transform: scale(1);
  background-color: #65c3f5;
}

/* notice */
.p-notice {
  padding-block: 50px 35px;
}
.p-noticeHeading {
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}
.p-noticeBox {
  width: 91.63%;
  margin-inline: auto;
  padding-block: 58px 35px;
  padding-inline: 24px;
  border: 2px solid #d8d8d8;
  border-radius: 5px;
  position: relative;
}
.p-noticeBox::before {
  content: "";
  display: inline-block;
  width: 77px;
  height: 67px;
  background-image: url("../images/img_caution.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
}
.p-noticeBox::after {
  content: "";
  display: inline-block;
  width: 140px;
  height: 67px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  z-index: 0;
}
.p-noticeSmallSection {
  margin-top: 16px;
}
.p-noticeTitle {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.p-noticeTitle::before {
  content: "●";
}
.p-noticeList {
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2;
  list-style: none;
}
.p-noticeList li {
  padding-left: 1.5em;
  position: relative;
}
.p-noticeList li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}
.p-noticeText {
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2;
}

/* faq */
.p-faq {
  padding-block: 96px 45px;
  background-color: #ecfafd;
}
.p-faqHeading {
  font-size: 25px;
  letter-spacing: 0.1em;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.p-faqHeading::before {
  content: "";
  display: inline-block;
  width: 133px;
  height: 59px;
  background-image: url("../images/text_heading_faq.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 14px;
  left: 50%;
  translate: -50% -100%;
  z-index: -1;
}
.p-faqList {
  width: 91.63%;
  margin-inline: auto;
  display: grid;
  gap: 26px;
}
.p-faqListItem {
  padding-block: 16px 24px;
  padding-inline: 20px 16px;
  background-color: #fff;
  box-shadow: 5px 6px 0 #bce4f3;
}
.p-faqQuestion {
  color: #1aafd8;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 2;
  padding-left: calc(25px + 8px);
  display: flex;
  align-items: center;
  min-height: 32px;
  position: relative;
  margin-bottom: 12px;
}
.p-faqQuestion::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 32px;
  background-image: url("../images/text_q.svg");
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
}
.p-faqAnswer {
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2;
  padding-left: 10px;
}

/* push */
.p-bottomPush,
.p-bottomPush img {
  width: 100%;
}

/* cta */
.p-bottomCta {
  padding-top: 28px;
}
.p-bottomCtaIllust {
  width: 81.86%;
  margin-inline: auto;
}
.p-bottomCta .c-cta {
  margin-top: -2px;
}

/* footer */
.l-footerUpper {
  padding-block: 35px;
  background-color: #f7f8fb;
}
.p-simpleHeading {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 24px;
}
.p-simpleText {
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 2;
  width: 86.05%;
  margin-inline: auto;
}
.p-simpleText p + p {
  margin-top: 1.5em;
}
.l-footerBottom {
  padding-block: 24px 172px;
}
.l-footerLogo {
  width: 138px;
  margin-inline: auto;
  margin-bottom: 16px;
}
.l-footerCopy {
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}
.l-footerCopy small {
  font-size: inherit;
}