.section-fv{
  background-color: #FDF7F7;
  padding-bottom: clamp(2.5rem, 2.321rem + 0.89vw, 3.75rem);
}

.section-fv__container{
  width: min(var(--maxw), calc(100% - 2rem));
  margin-inline: auto;
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem);

}

.section-fv__hero{
  position: relative;
  /* border-radius: var(--radius-xl); */
  border: 1px solid var(--line);
  overflow: hidden;

  min-height: auto;
  aspect-ratio: 16 / 9;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* 背景画像（全面） */
.section-fv__media{
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;

}

.section-fv__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 読みやすさの薄いベール */
.section-fv__hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(250, 242, 244, 0.90) 0%,
    rgba(250, 242, 244, 0.55) 45%,
    rgba(250, 242, 244, 0.00) 75%
  );
}

/* テキスト（画像上） */
.section-fv__copy{
  position: relative;
  z-index: 2;
  max-width: 56ch;

}
.section-fv__lead{
  margin: 0;
  font-size: clamp(0.6rem, 0.32rem + 1.4vw, 2rem);
  color: var(--text-muted);

}
.section-fv__title{
  margin: .25em 0 0;
  font-size: clamp(0.8rem, 0.46rem + 1.7vw, 2.5rem);
  line-height: 1.25;
  font-weight: 650;
}

/* FV：CTAを画像内に重ねる */
.section-fv__hero{
  position: relative;
}
/* CTA配置（画像内・左下） */
.section-fv__cta{
  position: absolute;
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(0.1rem, -0.34rem + 2.2vw, 2.3rem);
  z-index: 3;

  display: grid;
  gap: .5rem;

  max-width: clamp(1.875rem, -2.75rem + 23.13vw, 25rem);
  margin-top: clamp(2rem, 1.8rem + 1vw, 3rem);
  justify-items: start;

}
.section-fv__cta .btn{
  /* 文字サイズ */
  font-size: clamp(.92rem, 0.55vw + .78rem, 1.02rem);

  /* 押しやすさ（高さ） */
  min-height: clamp(0.8rem, 0.771rem + 0.14vw, 1rem);

  /* 余白（見た目の“品”がここで決まる） */
  padding-block: clamp(.70em, .35vw + .62em, .85em);
  padding-inline: clamp(1.15em, .9vw + .9em, 1.6em);

  /* 枠線も連動（細い画面で太く見えがち対策） */
  border-width: clamp(1px, .12vw, 1.5px);

  /* ボタン幅は今のままでOK（必要なら後でmax幅化） */

}

/* 注釈は静かに */
.section-fv__cta-note{
  margin-top: 0;
  font-size: clamp(0.3rem, 0.16rem + 0.7vw, 1rem);
  line-height: 1.6;
  color: var(--text-muted);
  opacity: 0.9;
}


/* ~1023pxまで */
@media (max-width: 1023px){
  .section-fv__cta{
  margin-top: clamp(2rem, 1.8rem + 1vw, 3rem);
  max-width: 32ch;

  }

  /* .section-fv__cta .btn{
  padding-inline: 1.6em;

  } */

  .section-fv__cta-note{
    text-align: center;
    font-size: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
    opacity: .85;
  }
}


@media (max-width: 759px){

  /* FV全体の余白を少し整理 */
  .section-fv__hero{
    padding-bottom: clamp(1rem, 4vw, 1.5rem);
  }

  .section-fv__cta .btn--ghost{
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;


  }


}


