/**
 * 共通FV（page-reason.php / page-cost-yane.php / page-cost-amamori.php）
 * TOP FV に寄せた完全修正版
 */

/* --- Hero：写真 + 見出し（オーバーレイなし） --- */
.page-reason .reason-page-hero,
.page-cost-yane .reason-page-hero,
.page-cost-amamori .reason-page-hero {
  position: relative;
  min-height: clamp(200px, 36vw, 320px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  margin-bottom: 0;
  border-top: 3px solid #5fb3d4;
  background: #e8f4f9;
}

/* 背景画像 */
.page-reason .reason-page-hero_bg,
.page-cost-yane .reason-page-hero_bg,
.page-cost-amamori .reason-page-hero_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-reason .reason-page-hero_bg_img,
.page-cost-yane .reason-page-hero_bg_img,
.page-cost-amamori .reason-page-hero_bg_img {
  width: 200%;
  height: 210%;
  object-fit: cover;
  object-position: 90% center;
}

/* 内側 */
.page-reason .reason-page-hero_inner,
.page-cost-yane .reason-page-hero_inner,
.page-cost-amamori .reason-page-hero_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem)
    clamp(1.5rem, 4vw, 2.75rem);
  text-align: left;
  display: flex;
  align-items: center;
}

/* タイトル（SP） */
.page-reason .reason-page-hero_title,
.page-cost-yane .reason-page-hero_title,
.page-cost-amamori .reason-page-hero_title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  align-items: flex-start;
  max-width: min(100%, 52ch);
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.02em;
  color: #4BADCC;
}

.page-reason .reason-page-hero_title-pre,
.page-cost-yane .reason-page-hero_title-pre,
.page-cost-amamori .reason-page-hero_title-pre {
  font-size: 30px;
}

.page-reason .reason-page-hero_title-main,
.page-cost-yane .reason-page-hero_title-main,
.page-cost-amamori .reason-page-hero_title-main {
  font-size: 30px;
}

/* ================================
   PC版：TOP FV に寄せた見やすいデザイン
   ================================ */
@media (min-width: 768px) {

  /* 黒オーバーレイ追加（読みやすさUP） */
  .page-reason .reason-page-hero::before,
  .page-cost-yane .reason-page-hero::before,
  .page-cost-amamori .reason-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35); /* ← 35%黒 */
    z-index: 0;
  }

  .page-reason .reason-page-hero_inner,
  .page-cost-yane .reason-page-hero_inner,
  .page-cost-amamori .reason-page-hero_inner {
    position: relative;
    z-index: 1;
    padding-left: clamp(1.5rem, 6vw, 4rem);
    padding-right: 1.25rem;
  }

  /* 背景画像位置調整 */
  .page-reason .reason-page-hero_bg_img,
  .page-cost-yane .reason-page-hero_bg_img,
  .page-cost-amamori .reason-page-hero_bg_img {
    object-position: 78% 45%;
  }

  /* タイトル全体：白文字 + 大きめ + 太め */
  .page-reason .reason-page-hero_title,
  .page-cost-yane .reason-page-hero_title,
  .page-cost-amamori .reason-page-hero_title {
    color: #fff;
    gap: 0.78em;
  }

  /* プレタイトル（上の小見出し） */
  .page-reason .reason-page-hero_title-pre,
  .page-cost-yane .reason-page-hero_title-pre,
  .page-cost-amamori .reason-page-hero_title-pre {
    font-size: 55px;
    color: #fff;
    margin-left: 100px;
  }

  /* メインタイトル（大見出し） */
  .page-reason .reason-page-hero_title-main,
  .page-cost-yane .reason-page-hero_title-main,
  .page-cost-amamori .reason-page-hero_title-main {
    font-size: 40px; 
    color: #fff;
    margin-left: 100px;
  }
}