/* ===========================================================================
   トップページのファーストビュー。
   右に写真、左にコピーと導線を置く。写真は右端まで裁ち落として、
   左側は白へ溶かして文字が読めるようにする。
   .render-canvas 直下は line-height:1 / font-family:sans-serif / color:#333 に
   リセットされるため、文字まわりはすべて明示する。
   =========================================================================== */
.render-canvas .lp-hero {
  /* 色・余白のトークンは lp_sections.css でまとめて定義している。 */
  background: #fff;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* ---- 背景の写真 ---- */
.render-canvas .lp-hero__media {
  background-image: url(/lp/hero.webp);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  /* 写真の位置は画面幅ではなく、中央のコンテンツ（最大 1180px）を基準に決める。
     % 指定だと、画面が広くなるほど人物がどんどん右へ逃げてしまうため。
     左端は中央から 300px 手前、右端は中央から 760px までで止める。 */
  left: calc(50% - 300px);
  position: absolute;
  right: max(0px, calc(50% - 620px));
  top: 0;
}

/* 画面が広くて写真が右端まで届かないときに、切れ目が目立たないようぼかす。 */
.render-canvas .lp-hero__media::before {
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 170px);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

/* 写真の左端を白へ溶かして、コピーと重なっても読めるようにする。 */
.render-canvas .lp-hero__media::after {
  background: linear-gradient(
    to right,
    #fff 0%,
    rgba(255, 255, 255, 0.94) 13%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0) 48%
  );
  content: "";
  inset: 0;
  position: absolute;
}

/* ---- コピーと導線 ---- */
.render-canvas .lp-hero__inner {
  margin: 0 auto;
  max-width: 1180px;
  padding: var(--lp-sec-pad) 40px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.render-canvas .lp-hero__body {
  max-width: 600px;
}

/* 実績の一行。見出しの前に置く「信用の一行」。
   枠で囲わず、メダルのアイコンと細い下線だけで見せる。 */
.render-canvas .lp-hero__proof {
  align-items: center;
  border-bottom: 1px solid rgba(18, 58, 99, 0.18);
  display: inline-flex;
  gap: 8px;
  padding-bottom: 8px;
}

.render-canvas .lp-hero__proof-icon {
  color: var(--lp-navy);
  display: block;
  flex: none;
  height: 22px;
  width: 22px;
}

.render-canvas .lp-hero__proof-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.render-canvas .lp-hero__proof-text {
  color: var(--lp-ink);
  font-family: var(--s-font-d3829e7a), sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.render-canvas .lp-hero__proof-text strong {
  color: var(--lp-navy);
  font-family: var(--s-font-c498460f), "Zen Kaku Gothic New", sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin-right: 3px;
}

.render-canvas .lp-hero__title {
  color: var(--lp-navy);
  font-family: var(--s-font-c498460f), "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.42;
  margin-top: 14px;
}

.render-canvas .lp-hero__lead {
  color: var(--lp-ink);
  font-family: var(--s-font-d3829e7a), sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.9;
  margin-top: 20px;
}

/* ---- 3 つの提供内容（丸バッジ）---- */
.render-canvas .lp-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.render-canvas .lp-hero__point {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(18, 58, 99, 0.18), 0 0 0 1px rgba(18, 58, 99, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  width: 126px;
}

.render-canvas .lp-hero__point-icon {
  color: var(--lp-navy);
  display: block;
  height: 38px;
  width: 38px;
}

.render-canvas .lp-hero__point-icon svg {
  display: block;
  height: 100%;
  width: 100%;
}

.render-canvas .lp-hero__point-label {
  color: var(--lp-navy);
  font-family: var(--s-font-d3829e7a), sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: center;
}

/* ---- ボタン ---- */
.render-canvas .lp-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.render-canvas .lp-hero__cta {
  align-items: center;
  background: linear-gradient(180deg, #14da68 0%, var(--lp-green) 100%);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(6, 199, 85, 0.3);
  color: #fff;
  display: inline-flex;
  font-family: var(--s-font-c498460f), "Zen Kaku Gothic New", sans-serif;
  font-size: 17px;
  font-weight: 700;
  gap: 12px;
  justify-content: center;
  flex: 1 1 0;
  letter-spacing: 0.02em;
  line-height: 1;
  min-width: 0;
  padding: 20px 24px;
}

.render-canvas .lp-hero__cta:hover {
  box-shadow: 0 14px 26px rgba(6, 199, 85, 0.38);
  transform: translateY(-2px);
}

/* メールの導線。LINE を主役にしたいので、枠線だけの控えめな見た目にする。 */
.render-canvas .lp-hero__cta-sub {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(28, 79, 134, 0.35);
  border-radius: 999px;
  color: var(--lp-navy);
  display: inline-flex;
  font-family: var(--s-font-c498460f), "Zen Kaku Gothic New", sans-serif;
  flex: 1 1 0;
  font-size: 17px;
  font-weight: 700;
  gap: 12px;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  min-width: 0;
  padding: 20px 24px;
}

.render-canvas .lp-hero__cta-sub:hover {
  background: rgba(28, 79, 134, 0.05);
  border-color: var(--lp-navy);
}

.render-canvas .lp-hero__cta-sub .lp-hero__cta-arrow {
  color: var(--lp-navy);
  font-size: 22px;
}

/* リセットで span に color:#333 が直接当たるため、白を明示する。 */
.render-canvas .lp-hero__cta-arrow {
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.render-canvas .lp-hero__caution {
  color: #78858f;
  font-family: var(--s-font-d3829e7a), sans-serif;
  font-size: 12px;
  letter-spacing: 0.01em;
  line-height: 1.7;
  margin-top: 12px;
}

/* ===========================================================================
   画面が狭いとき
   =========================================================================== */
@media screen and (max-width: 1080px) {
  .render-canvas .lp-hero__media {
    left: calc(50% - 230px);
  }
}

/* 写真を上に、コピーを下に積む。 */
@media screen and (max-width: 860px) {
  .render-canvas .lp-hero__media {
    background-image: url(/lp/hero-sp.webp);
    background-position: center 26%;
    bottom: auto;
    height: 380px;
    left: 0;
    position: relative;
    right: 0;
  }
  .render-canvas .lp-hero__media::before {
    display: none;
  }
  /* 写真の下端を白へ溶かし、その上にコピーを重ねて境目を作らない。 */
  .render-canvas .lp-hero__media::after {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 56%,
      rgba(255, 255, 255, 0.5) 76%,
      rgba(255, 255, 255, 0.9) 91%,
      #fff 100%
    );
  }
  .render-canvas .lp-hero__inner {
    margin-top: -54px;
    padding: 0 16px var(--lp-sec-pad);
  }
  .render-canvas .lp-hero__body {
    max-width: none;
  }
  .render-canvas .lp-hero__proof {
    gap: 7px;
    padding-bottom: 7px;
  }
  .render-canvas .lp-hero__proof-text {
    font-size: 13px;
  }
  .render-canvas .lp-hero__proof-text strong {
    font-size: 16px;
  }
  .render-canvas .lp-hero__title {
    font-size: 27px;
    line-height: 1.5;
  }
  .render-canvas .lp-hero__lead {
    font-size: 14.5px;
    margin-top: 16px;
  }
  .render-canvas .lp-hero__points {
    gap: 10px;
    justify-content: space-between;
    margin-top: 22px;
  }
  .render-canvas .lp-hero__point {
    width: min(122px, 31%);
  }
  .render-canvas .lp-hero__actions {
    gap: 10px;
    margin-top: 22px;
  }
  .render-canvas .lp-hero__cta {
    flex: none;
    font-size: 17px;
    padding: 19px 24px;
    width: 100%;
  }
  .render-canvas .lp-hero__cta-sub {
    flex: none;
    font-size: 17px;
    padding: 19px 24px;
    width: 100%;
  }
}