@charset "UTF-8";
/* ============================================================
   subsidy.css — 補助金・助成金サポート /service/subsidy/ 専用

   renewal.css は SCSS からのコンパイル成果物で、原本の scss/ が
   このテーマに入っていない。再コンパイルで消えないよう、
   ここに閉じ込めて renewal.css の後ろに読み込む。

   .p-lp-fv 系はこのページでしか使っていないので、
   ページ限定の読み込みで上書きしても他ページに影響しない。

   配色の考え方:
   FV の見出しとリードは訴求優先で白文字（依頼による）。地色 #F3815E に対し
   2.6:1 なので WCAG AA は満たさない。読み落としを防ぐため、主張点の「着金」は
   黄 #FFD84D の面にネイビーを載せて 10:1 を確保し、そこだけは確実に読ませる。
   FV 以外の本文はネイビー #192c40（5.4:1）が基本。
   白面に載せるオレンジは #C9481F まで暗くして 4.7:1 を確保する。
   ============================================================ */
:root {
  --fs-coral: #f3815e;
  --fs-navy: #192c40;
  --fs-coral-ink: #c9481f; /* 白地に載せても AA を満たすオレンジ */
  --fs-gray-ink: #667585;
  /* コーラル地から一番強く抜ける差し色。ネイビー文字を載せて 10:1 出る。
     サイト既存のマーカー #ffe898 より彩度を上げ、地色に負けないようにした。 */
  --fs-hl: #ffd84d;
}

/* ------------------------------------------------------------
   FV — 地色をコーラルに振り替える
   ------------------------------------------------------------ */
.p-lp-fv {
  background: var(--fs-coral);
}

/* ハートの装飾は元が青。地色と喧嘩するので白の透かしにする。 */
.p-lp-fv__deco img {
  opacity: 0.12;
  filter: brightness(0) invert(1);
}

.p-lp-fv .c-breadcrumb ol,
.p-lp-fv .c-breadcrumb a {
  color: var(--fs-navy);
}

/* 角丸のピルは「押せそう」に見えてしまう。ここはラベルなので直角にする。 */
.p-lp-fv__eyebrow {
  border-radius: 0;
  background: #ffffff;
  letter-spacing: 0.02em;
  color: var(--fs-navy);
}

/* 見出しは 3 段階の大きさで読ませる。
   助走「その補助金、」→ 本文サイズ → 「着金」が最大。
   写真を 1.5 倍にして本文カラムが狭くなるため、幅に追従する clamp にした。 */
.p-lp-fv__title {
  font-size: 26px;
  line-height: 1.4;
  color: #ffffff;
}

@media (min-width: 1024px) {
  .p-lp-fv__title {
    font-size: clamp(32px, 3vw, 44px);
  }
}
/* 助走部分。ここを落とすことで次の「着金」が跳ねて見える。 */
.p-lp-fv__title .lead-in {
  font-size: 0.7em;
}

/* 「着金」はこのページの主張点。地色から最も強く抜ける黄でハイライトし、
   一段大きくする。マーカー由来の表現なのでボタンには見えない。 */
.p-lp-fv__title .is-blue {
  padding: 0.04em 0.14em 0.1em;
  border-radius: 4px;
  background: var(--fs-hl);
  font-size: 1.22em;
  color: var(--fs-navy);
}

/* 「本当に／辿り着けますか？」は文節の切れ目。SP の狭い本文カラムでは
   ブラウザ任せだと「本当に辿り着けま／すか？」と語中で割れるので、
   ここだけ明示的に折る。PC・タブレットは 1 行に入るので効かせない。 */
.p-lp-fv__title .u-br-sp {
  display: none;
}

/* 切り抜き写真なので、宙で切れないよう FV の下端に接地させる。
   .p-lp-fv 側が overflow:hidden なので、はみ出しはきれいに切れる。

   サイズは従来比 1.5 倍（340→510 / 440→660）。そのぶん右へ負のマージンで
   逃がし、見出しが折り返す本文カラムの幅を削らないようにしている。 */
.p-lp-fv__visual {
  max-width: 380px;
  margin-bottom: -40px;
}

@media (min-width: 1024px) {
  .p-lp-fv__visual {
    flex: 0 0 510px;
    max-width: 510px;
    align-self: flex-end;
    margin-right: -40px;
  }
}
@media (min-width: 1280px) {
  .p-lp-fv__visual {
    flex: 0 0 660px;
    max-width: 660px;
    margin-right: -40px;
    margin-bottom: -56px;
  }
}
/* l-container が 1260px で頭打ちになるため、これより広い画面でしか
   右へさらに逃がす余裕が無い。ここを詰めると写真に焼き込まれた
   縦書きのアンバサダー表記が画面外で切れる。 */
@media (min-width: 1400px) {
  .p-lp-fv__visual {
    margin-right: -80px;
  }
}
.p-lp-fv__cta-note,
.p-lp-fv__annotation {
  color: var(--fs-navy);
}

.p-lp-fv__lead {
  font-weight: 700;
  color: #ffffff;
}

/* 地色に白は 2.6:1 しか出ず薄くできないので、強弱は文字サイズで付ける。
   見出しを主役にするぶんリードは一段落とす。 */
@media (min-width: 1024px) {
  .p-lp-fv__lead {
    margin-top: 16px;
    font-size: 16px;
  }
}
.p-lp-fv__badge {
  border-radius: 6px;
}

/* 「業界初」だけ黄に振って、ネイビーの帯の中に主張点を作る。 */
.p-lp-fv__badge .hl {
  color: var(--fs-hl);
}

/* ------------------------------------------------------------
   実績3指標 — 白タイルにして「3つある」ことを一目で伝える
   ------------------------------------------------------------ */
.p-lp-fv__stats {
  gap: 8px;
  margin-top: 28px;
}

@media (min-width: 1024px) {
  .p-lp-fv__stats {
    gap: 14px;
    max-width: 560px;
  }
}
.p-lp-fv__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px 14px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 24px -16px rgba(25, 44, 64, 0.55);
  text-align: center;
}

@media (min-width: 1024px) {
  .p-lp-fv__stat {
    padding: 16px 12px 18px;
  }
}
.p-lp-fv__stat .label {
  font-size: 10.5px;
  color: var(--fs-gray-ink);
}

@media (min-width: 1024px) {
  .p-lp-fv__stat .label {
    font-size: 13px;
  }
}
.p-lp-fv__stat .num {
  margin-top: 0;
  color: var(--fs-navy);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .p-lp-fv__stat .num {
    font-size: 44px;
  }
}
.p-lp-fv__stat .num .unit {
  margin-left: 1px;
  color: var(--fs-coral-ink);
  font-size: 12px;
}

@media (min-width: 1024px) {
  .p-lp-fv__stat .num .unit {
    font-size: 19px;
  }
}
/* ------------------------------------------------------------
   お悩みリスト — びっくりマークに色を入れ、本文を太字にする
   ------------------------------------------------------------ */
.p-lp-worry__item {
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #f4d8cd;
  box-shadow: 0 10px 22px -18px rgba(25, 44, 64, 0.6);
  font-weight: 700;
  color: var(--fs-navy);
}

@media (min-width: 1024px) {
  .p-lp-worry__item {
    padding: 18px 22px;
    font-size: 17px;
  }
}
.p-lp-worry__item::before {
  width: 22px;
  height: 22px;
  margin-top: 0;
  background-image: url("../img/renewal/icon_excl_alert.svg");
}

@media (min-width: 1024px) {
  .p-lp-worry__item::before {
    width: 24px;
    height: 24px;
  }
}
/* ------------------------------------------------------------
   監修者ポートレート
   枠は renewal.css 側で aspect-ratio 300/360 と角丸を持っているので、
   はみ出しを止めて写真を敷き込むだけでよい。
   ------------------------------------------------------------ */
.p-lp-expert__photo {
  overflow: hidden;
}

.p-lp-expert__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* お客様の声：掲載は2件。3カラムのままだと右が空くので2カラムで中央に置く。
   写真枠はプレースホルダの背景色ではなく実画像を敷く。 */
.p-lp-voice__photo {
  overflow: hidden;
}

.p-lp-voice__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .p-lp-voice__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 860px;
    margin-inline: auto;
  }
}
/* --- SP の FV が縦に長すぎるのを詰める ------------------------------
   SP では 1,108px あり、スマホの 1.4 画面ぶんを FV だけで使っていた。
   内訳は 上パディング 88 ／ テキスト塊 603 ／ すきま 28 ／ 写真 343。
   テキストはどれも必要な要素なので、要素間の余白と写真の大きさで縮める。

   このファイルの他の指定と同じ詳細度なので、後勝ちさせるため末尾に置く。 */
@media (max-width: 1023px) {
  .p-lp-fv {
    /* ヘッダーは fixed 64px。76px なら 12px の抜けが残る */
    padding-top: 76px;
  }
  .p-lp-fv__inner {
    gap: 16px;
  }
  .p-lp-fv__lead {
    margin-top: 14px;
    line-height: 1.75;
  }
  .p-lp-fv__stats {
    margin-top: 18px;
  }
  .p-lp-fv__badge {
    margin-top: 14px;
  }
  .p-lp-fv__cta {
    margin-top: 18px;
    gap: 10px;
  }
  .p-lp-fv__annotation {
    margin-top: 10px;
  }
  /* 写真は幅の上限で縦を抑える。高さを固定して切り抜くと、幅の広い
     タブレット（768px 等）で顔だけの帯になるため使えない。
     接地は margin-bottom: -40px が担う。 */
  .p-lp-fv__visual {
    max-width: 240px;
  }
}
/* --- SP は写真を見出しの右へ ---------------------------------------
   写真が本文の下に積まれるぶん FV が縦に伸びていた。見出しの横に置いて詰める。

   写真は .p-lp-fv__body の兄弟なので、横に並べる手段は絶対配置しかない
   （DOM を body の中へ移すと PC の行レイアウト・下端接地・右へのはみ出しが壊れる）。

   絶対配置だと後続のリードが写真の下へ潜り込むため、見出しに写真ぶんの
   min-height を持たせて場所を確保する。写真の縦横比は 835/778 = 1.073。

   ラベル（eyebrow）も同じ幅に収める。狭い幅では 2 行に折れるが、
   写真の上を空けずに済むぶん FV 全体は短くなる。 */
@media (max-width: 767px) {
  .p-lp-fv__inner {
    position: relative;
  }
  .p-lp-fv__visual {
    position: absolute;
    /* ラベルも左のカラムへ収めたので、写真は上端から使える */
    top: 0;
    /* 容器の余白ぶん右へ逃がし、画面端まで使う。見出しの幅を削らずに写真を稼ぐ */
    right: -20px;
    width: 53%;
    max-width: none;
    margin: 0;
  }
  /* ラベルと見出しは同じ右端で揃える。写真の左端はコンテナ座標で
     47% + 20px（はみ出しぶん）なので、47% + 12px でどの幅でも 8px の間隔が残る。
     割合どうしで指定すると、コンテナが広いほど不足して重なる。 */
  .p-lp-fv__eyebrow,
  .p-lp-fv__title {
    max-width: calc(47% + 12px);
  }
  /* このカラム幅では 12px だと 3 行に折れ、ラベルだけで 66px を食う。
     左右の余白も詰めて 2 行に収める。 */
  .p-lp-fv__eyebrow {
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.5;
  }
  .p-lp-fv__title {
    /* 写真ぶんの場所を確保する。写真の高さ 53% × (100vw - 40px) × 1.073 から
       ラベル 1 行（27px）＋その下の余白（12px）を引く。
       ラベルが 2 行に折れる狭い幅では余分に空くだけで、
       写真が下のリード文へ潜り込むことはない。 */
    min-height: calc(56.9vw - 62px);
    /* 「辿り着けますか？」8 文字がカラムに収まる最大の大きさ。
       カラム幅は 47vw - 6.8px なので 1 文字あたり 5.8vw - 1px まで。
       固定 22px にすると 360px 幅で「辿り着けま／すか？」と割れる。 */
    font-size: min(24px, 5.8vw - 1px);
    /* 1.4 では 4 行が詰まって塊に見える。行を離して読みやすくする */
    line-height: 1.6;
  }
  /* 主張点なので行をまたいで割らない */
  .p-lp-fv__title .is-blue {
    white-space: nowrap;
  }
}
/* --- タブレット〜小型ノート（768〜1023px）は写真を見出しの右へ ----------
   行レイアウトへの切替が 1024px だったため、900px 級の画面では写真が本文の
   下に中央寄せで置かれ、左右に地色が大きく余っていた。この帯域も行にする。

   写真は PC の 510px では本文が潰れるので 300px。768px なら
   コンテナ 728 − 写真 300 − gap 32 = 本文 396px が残る。

   上の SP 用の詰め（max-width: 1023px）と帯域が重なるので、後勝ちさせるため
   こちらを後ろに置く。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .p-lp-fv__inner {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }
  .p-lp-fv__body {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* 接地は基底の margin-bottom: -40px が担う。右は容器の余白ぶんだけ逃がす */
  .p-lp-fv__visual {
    flex: 0 0 300px;
    max-width: 300px;
    align-self: flex-end;
    margin-inline: 0;
    margin-right: -20px;
  }
  /* 本文カラムに収まるので、実績の並びは幅の上限を外す */
  .p-lp-fv__stats {
    max-width: none;
  }
}
/* ============================================================
   SP の改行位置

   日本語は既定（word-break: normal）だと文字単位で折り返すため、
   「わか／ります」「強引な営業／は一切ありません」のように
   文節の途中で切れて読みにくい。auto-phrase は文節を解析して
   自然な位置で折り返す。
   対応: Chrome / Edge 119+、Safari 26+。未対応環境は従来どおり
   文字単位で折り返すだけなので、崩れる方向の副作用は無い。
   PC は 1 行あたりの文字数が多く不自然な切れ方をしないので当てない。
   ============================================================ */
@media (max-width: 1023px) {
  main :is(h1, h2, h3, h4, p, dt, dd, li, figcaption, .c-flow__title) {
    word-break: auto-phrase;
  }
}
/* --- 見出しの改行を固定する帯域 --------------------------------------
   「本当に辿り着けますか？」11 文字が本文カラムに収まるのは 576px から
   （見出し 24px × 11 = 264px ≦ カラム 47vw - 6.8px）。それより狭いと
   どこかで折れるので、位置を「本当に辿り／着けますか？」に固定する
   （依頼による指定）。576px 以上では 1 行に入るので効かせない。 */
@media (max-width: 575px) {
  .p-lp-fv__title .u-br-sp {
    display: inline;
  }
}