@charset "utf-8";
/* ========== FV ========== */
.area-lp .area-fv {
  --fv-green: #04570e;
  --fv-red: #c00;
  --fv-orange: #e08701;
  --fv-yellow: #ffd000;
  background: url(../../img/fv/fv-bg.webp) center bottom / cover no-repeat;
  padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(32 * var(--u));
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0;
  line-height: 1.5;
}
.area-lp .area-fv__inner {
  max-width: calc(1318 * var(--u));
  margin: 0 auto;
}

/* 見出し */
.area-lp .area-fv__head {
  text-align: center;
  color: var(--fv-green);
  font-weight: 700;
}
.area-lp .area-fv__lead {
  margin: 0;
  font-size: calc(15 * var(--u));
  line-height: 1.8;
}
.area-lp .area-fv__lead-tag {
  display: inline-block;
  margin: 0 calc(3 * var(--u));
  padding: calc(2 * var(--u)) calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--fv-green);
  color: #fff;
  font-size: calc(22 * var(--u));
  line-height: 1.1;
}
.area-lp .area-fv__title {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.5;
}
.area-lp .area-fv__title-l { font-size: calc(28 * var(--u)); }

/* 本体 */
.area-lp .area-fv__body {
  margin-top: calc(16 * var(--u));
}
.area-lp .area-fv__box {
  padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(209, 231, 214, 0.62);
  color: #333;
}

/* 初回90分無料 */
.area-lp .area-fv__free {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  color: var(--fv-green);
  font-weight: 700;
  line-height: 1;
  position: relative;
  isolation: isolate;
}
/* 黄色の下線（文字の後ろに敷く） */
.area-lp .area-fv__free::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(6 * var(--u));
  z-index: -1;
  width: 63%;
  height: calc(9 * var(--u));
  background: var(--fv-yellow);
}
.area-lp .area-fv__free-first {
  width: 1em;
  font-size: calc(32 * var(--u));
  line-height: 1;
}
.area-lp .area-fv__free-num {
  font-family: "Inter", sans-serif;
  font-size: calc(80 * var(--u));
  letter-spacing: -0.05em;
  margin-bottom: -0.1em; /* 数字の下の余白（ディセンダー分）を詰めて、初回・分の下端に揃える */
}
.area-lp .area-fv__free-unit {
  font-size: calc(40 * var(--u));
  padding-bottom: calc(4 * var(--u));
}
.area-lp .area-fv__free-badge {
  align-self: center;
  margin-left: calc(8 * var(--u));
  padding: 0 calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--fv-red);
  color: #fff;
  font-size: calc(52 * var(--u));
}
.area-lp .area-fv__text {
  margin: calc(16 * var(--u)) 0 0;
  font-size: calc(15 * var(--u));
  line-height: 1.6;
}

/* 実績・特徴 */
.area-lp .area-fv__points {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: calc(12 * var(--u));
}
.area-lp .area-fv__record {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}
.area-lp .area-fv__laurel {
  width: calc(30 * var(--u));
  height: auto;
}
.area-lp .area-fv__record p {
  margin: 0;
  font-weight: 700;
}
.area-lp .area-fv__record-label {
  font-size: calc(17 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}
.area-lp .area-fv__record-num {
  font-size: calc(17 * var(--u));
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(var(--fv-yellow), var(--fv-yellow)) left 0 bottom calc(2 * var(--u)) / 74% calc(8 * var(--u)) no-repeat;
}
.area-lp .area-fv__record-num span {
  font-family: "Inter", sans-serif;
  font-size: calc(52 * var(--u));
  font-style: italic;
}
.area-lp .area-fv__tags {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: calc(4 * var(--u)) calc(8 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.area-lp .area-fv__tags li {
  padding: calc(2 * var(--u)) calc(10 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.area-lp .area-fv__tags li:first-child {
  grid-column: 1 / -1;
  justify-self: center;
}
.area-lp .area-fv__tags em {
  color: var(--fv-red);
  font-size: 1.25em;
  font-style: normal;
}

/* CTA */
.area-lp .area-fv__cta {
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  margin-top: calc(28 * var(--u));
}
.area-lp .area-fv__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(98 * var(--u));
  padding: calc(20 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  color: #fff;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  text-align: center;
  text-decoration: none;
  transition: opacity .3s;
}
.area-lp .area-fv__btn:hover { opacity: .8; }
.area-lp .area-fv__btn--tel { background: var(--fv-green); }
.area-lp .area-fv__btn--mail { background: var(--fv-orange); }
.area-lp .area-fv__btn-label {
  position: absolute;
  top: calc(-16 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(210 * var(--u));
  border: calc(1 * var(--u)) solid currentColor;
  border-radius: calc(100 * var(--u));
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: calc(28 * var(--u));
}
.area-lp .area-fv__btn--tel .area-fv__btn-label { color: var(--fv-green); }
.area-lp .area-fv__btn--mail .area-fv__btn-label { color: var(--fv-orange); }
.area-lp .area-fv__btn-main {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  white-space: nowrap;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1.3;
}
.area-lp .area-fv__btn--tel .area-fv__btn-main { font-size: calc(30 * var(--u)); }
.area-lp .area-fv__btn-main img {
  width: calc(17 * var(--u));
  height: calc(25 * var(--u));
}
.area-lp .area-fv__btn-sub {
  margin-top: calc(4 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.area-lp .area-fv__btn--tel .area-fv__btn-sub {
  text-align: right;
}

/* 写真 */
.area-lp .area-fv__photo {
  display: flex;
  align-items: flex-start;
  margin-top: calc(16 * var(--u));
}
/* 画面幅が変わっても写真の縦横比は固定（PCデザインの比率） */
.area-lp .area-fv__photo img {
  width: 50%;
  height: auto;
  aspect-ratio: 4 / 7;
  object-fit: cover;
  object-position: center top;
}
.area-lp .area-fv__photo img:first-child { border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u)); }
.area-lp .area-fv__photo img:last-child { border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0; }

/* タブレット：箱を中央に */
@media (min-width: 992px) {
  .area-lp .area-fv {
    padding: calc(52 * var(--u)) calc(24 * var(--u)) calc(43 * var(--u));
  }
  .area-lp .area-fv__lead { font-size: calc(20 * var(--u)); }
  .area-lp .area-fv__lead-tag {
    margin: 0 calc(3 * var(--u));
    padding: calc(4 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u));
    font-size: calc(34 * var(--u));
    line-height: 1;
  }
  .area-lp .area-fv__title {
    margin-top: 0;
    font-size: calc(40 * var(--u));
  }
  .area-lp .area-fv__title-l { font-size: calc(54 * var(--u)); }

  .area-lp .area-fv__box {
    padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(29 * var(--u));
  }
  .area-lp .area-fv__free {
    justify-content: flex-start;
    padding-left: calc(48 * var(--u));
  }
  .area-lp .area-fv__free::before {
    left: calc(48 * var(--u));
    bottom: calc(-10 * var(--u));
    width: calc(333 * var(--u));
    height: calc(16 * var(--u));
  }
  .area-lp .area-fv__free-first { font-size: calc(61.5 * var(--u)); }
  .area-lp .area-fv__free-num { font-size: calc(154 * var(--u)); }
  .area-lp .area-fv__free-unit { font-size: calc(77 * var(--u)); padding-bottom: calc(6 * var(--u)); }
  .area-lp .area-fv__free-badge {
    margin-left: calc(16 * var(--u));
    padding: calc(8 * var(--u)) calc(10 * var(--u));
    border-radius: calc(5 * var(--u));
    font-size: calc(102 * var(--u));
  }
  .area-lp .area-fv__text {
    margin-top: calc(14 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: 1.5;
  }

  .area-lp .area-fv__points {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(14 * var(--u));
    padding: 0 calc(4 * var(--u)) 0 0;
  }
  .area-lp .area-fv__record {
    gap: 0;
    margin-left: calc(-6 * var(--u));
  }
  .area-lp .area-fv__record-label { margin-left: calc(-8 * var(--u)); }
  .area-lp .area-fv__record-num { margin-left: calc(8 * var(--u)); }
  .area-lp .area-fv__tags { flex-shrink: 0; }
  .area-lp .area-fv__laurel { width: calc(38 * var(--u)); }
  .area-lp .area-fv__record-label { font-size: calc(22 * var(--u)); }
  .area-lp .area-fv__record-num { font-size: calc(22 * var(--u)); }
  .area-lp .area-fv__record-num span { font-size: calc(68 * var(--u)); }
  .area-lp .area-fv__tags li { font-size: calc(20 * var(--u)); }

  .area-lp .area-fv__cta {
    flex-direction: row;
    gap: calc(15 * var(--u));
    margin-top: calc(36 * var(--u));
    padding: 0 0 0 calc(5 * var(--u));
  }
  .area-lp .area-fv__btn { flex: 1; }
  .area-lp .area-fv__btn-main { font-size: calc(26 * var(--u)); }
  .area-lp .area-fv__btn-sub { font-size: calc(16 * var(--u)); }
}

/* PC：箱と写真を横並び */
@media (min-width: 992px) {
  .area-lp .area-fv__body {
    display: flex;
    gap: calc(26 * var(--u));
    margin-top: calc(36 * var(--u));
  }
  .area-lp .area-fv__box {
    flex: 0 0 calc(741 * var(--u));
    margin: 0;
  }
  .area-lp .area-fv__photo {
    flex: 1;
    max-width: none;
    margin: 0;
  }
}