/* 2026-10-02 LPO (台帳 ../decisions_20261002.md)
   見た目は本番の部品を流用する: 数字の枠 = u-price-box / u-zero、ボタン = LINE ボタン (u-line-button / lc-line-button) の形と影、
   赤 = キャンペーン枠の #d00000、矢印 = 黒ボタンの紺の矢印、4万円の章 = 費用比較が入っていた Check! パネル、
   フォーム = 見出し (lc-heading)・STEP 札 (lc-step-number)・流れのカードの枠線 (#d9d9d9) */

/* FV: 本番の「実質0円」の枠 (u-price-box) の中を 2 段に組む。上の段「自分でやるより」の左右の端を、下の段「4 万円安い」の左右の端にそろえる */
.lp-fv-eyebrow { width: auto; white-space: nowrap; }
.u-price-box.lp-fv-price { top: 108px; height: 193px; display: flex; align-items: center; justify-content: center; }
.lp-fv-lock { display: inline-flex; flex-direction: column; align-items: stretch; }
.lp-fv-row { display: flex; align-items: center; gap: 8px; }
.lp-fv-br { display: none; }
.lp-fv-lock .u-effective.lp-fv-effective { position: static; width: auto; height: auto; transform: none; margin: 0 -2px 8px 0; font-size: 31.5px; font-weight: 900; line-height: 38px; letter-spacing: 2px; white-space: nowrap; text-align: justify; text-align-last: justify; }
.lp-fv-lock .u-zero.lp-fv-zero { position: static; width: auto; height: auto; transform: none; font-size: 164px; line-height: 120px; }
.lp-fv-lock .u-yen.lp-fv-yen { position: static; width: auto; height: auto; transform: none; font-size: 57px; line-height: 60px; text-align: left; white-space: nowrap; }
/* 枠の上の 1 行: 左右の端を枠に合わせる */
.lp-fv-sub { position: absolute; left: 580px; top: 68px; width: 318.538px; margin: 0; color: #fff; font-size: 24px; font-weight: 700; line-height: 28px; white-space: nowrap; text-align: justify; text-align-last: justify; -webkit-font-smoothing: antialiased; }

/* POINT 05: スマホの画面に置く封筒のアイコン。LINE ロゴと同じ位置・大きさ */
.u-point-5 .u-point-image > .lp-point5-icon { object-fit: contain; }

/* ボタン: LINE ボタンと同じ形・影。色はオレンジ（ページの中でボタンだけに使う色。10/2 15:18 Roku） */
.u-line-button.lp-btn-cta, .lc-line-button.lp-btn-cta { background: #f26a00; box-shadow: 0 4px #b34e00; }
.lc-line-button.lp-btn-cta.lp-apply-submit { width: 100%; border: 0; font-family: inherit; cursor: pointer; }

/* FV 直下の帯: 本番の LINE 帯 (u-line-band / u-line-cta) のまま、下に注記を 1 行 */
.u-line-band.lp-cta-band { height: auto; padding-bottom: 20px; }
/* 帯のすぐ下がお悩みの章になったので、「？」の飾り (章の上へ PC 32px・スマホ 20px はみ出す) が帯に重ならないよう空ける */
.lp-cta-band + .u-worry { margin-top: 56px; }
/* キャンペーンの札が、上の章 (灰色の背景) に付かないよう空ける */
.lc-support-media + .lc-campaign { margin-top: 56px; }
/* 帯の一文とボタンの間を詰める (本番は 16px) */
.lp-cta-band .u-line-cta > p { margin-bottom: 8px; }
.lp-cta-note { display: block; margin-top: 12px; color: #fff; font-size: 12px; line-height: 1.5; text-align: center; }


/* フォーム */
.lp-apply { margin-top: 51px; padding: 64px 16px; scroll-margin-top: 64px; background-color: #154681; background-image: url("assets/upper/pattern/native-stripe-decoration.svg"); background-size: 100% 100%; background-repeat: no-repeat; }
.lp-apply .lc-heading h2 { color: #fff; text-shadow: none; }
.lc-heading > p.lp-apply-label { display: table; margin: 0 auto 12px; padding: 4px 16px; background: #fff; color: #154681; font: 700 15px/1.5 "Noto Sans JP", sans-serif; }
.lp-apply-box { width: min(560px, 100%); margin: 24px auto 0; padding: 24px 24px 28px; border-radius: 4px; background: #fff; }
.lp-apply-lead { font-size: 15px; font-weight: 700; line-height: 1.7; text-align: center; }
/* 流れの 3 ステップを囲む箱: 費用カードの内訳の箱と同じ色・角丸 */
.lp-apply-steps { margin-top: 20px; padding: 16px; border-radius: 4px; background: #eef6f7; }
.lp-apply-flow-title { color: #154681; font-size: 14px; font-weight: 700; text-align: center; }
.lp-apply-flow { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.lp-apply-flow li { display: flex; align-items: flex-start; gap: 10px; }
.lp-apply-flow .lc-step-number { flex: none; margin-top: 2px; }
.lp-apply-flow p { font-size: 13px; line-height: 1.6; }
.lp-apply-form { display: grid; gap: 18px; margin-top: 24px; }
.lp-apply-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.lp-apply-field > label, .lp-apply-field > legend { display: block; margin: 0 0 6px; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.lp-apply-field input[type="text"], .lp-apply-field input[type="email"] { display: block; width: 100%; height: 52px; padding: 0 14px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; color: #171717; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.lp-apply-field input::placeholder { color: #a3a3a3; }
.lp-apply-field input[type="text"]:focus, .lp-apply-field input[type="email"]:focus { outline: none; border-color: #154681; }
.lp-apply-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-apply-types label { position: relative; display: block; }
.lp-apply-types input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lp-apply-types span { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-left: 14px; height: 50px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; font-size: 15px; font-weight: 700; }
.lp-apply-types span::before { content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid #b5b5b5; border-radius: 50%; background: #fff; }
.lp-apply-types input:checked + span::before { border-color: #154681; background: radial-gradient(#154681 0 45%, #fff 50%); }
.lp-apply-types input:checked + span { border: 2px solid #154681; background: #eef6f7; color: #154681; }
.lp-apply-types input:focus-visible + span { outline: 2px solid #154681; outline-offset: 2px; }
.lp-apply-type-wide { grid-column: 1 / -1; }
.lp-apply-error { display: none; margin-top: 6px; color: #d9261c; font-size: 13px; font-weight: 700; }
.lp-apply-field.is-error .lp-apply-error { display: block; }
.lp-apply-field.is-error input[type="text"], .lp-apply-field.is-error input[type="email"], .lp-apply-field.is-error .lp-apply-types span { border-color: #d9261c; }
/* ボタンのすぐ上の一文: 帯の「＼ ／」と同じ書き方。ボタンとの間は詰める */
.lp-apply-cta { margin-top: 4px; }
.lp-apply-cta .lp-apply-offer { margin: 0 0 6px; color: #154681; font-size: clamp(13px, 3.9vw, 15px); font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; }
.lc-line-button.lp-apply-submit { margin-top: 0; }
.lp-apply-form .lp-apply-secure { margin-top: -10px; color: #555; font-size: 12px; line-height: 1.5; text-align: center; }
/* 送信に失敗した時の一文 (入力エラーと同じ赤)・送信中のボタン・機械の自動送信よけの欄 (画面には出さない) */
.lp-apply-form .lp-apply-senderror { margin-top: -6px; color: #d9261c; font-size: 13px; font-weight: 700; line-height: 1.5; text-align: center; }
.lp-apply-form .lp-apply-senderror[hidden] { display: none; }
.lc-line-button.lp-apply-submit:disabled { opacity: .6; cursor: default; }
.lp-apply-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lp-apply-lock { margin-right: 6px; vertical-align: -2px; }
.lp-apply-form .lp-apply-note { margin-top: -8px; color: #171717; font-size: clamp(11.5px, 3.25vw, 13px); font-weight: 700; line-height: 1.5; text-align: center; }

/* 選ばれる5つの理由の後: 専門家からの推薦コメント */
.lp-recommend { padding: 0 16px 80px; background: #fff; }
.lp-rec { width: min(800px, 100%); margin: 40px auto 0; padding-top: 40px; border-top: 4px solid #154681; }
.lp-rec-person { display: flex; align-items: center; gap: 28px; }
.lp-rec-photo { display: block; flex: 0 0 168px; width: 168px; height: 168px; border-radius: 4px; object-fit: cover; }
.lp-rec-profile { min-width: 0; }
.lp-rec-role { font-size: 14px; line-height: 1.6; font-weight: 500; color: #737373; }
.lp-rec-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 4px; font-size: 30px; line-height: 1.3; font-weight: 900; color: #171717; }
.lp-rec-name span { font: 700 13px/1 Inter, sans-serif; letter-spacing: .06em; color: #737373; }
.lp-rec-career { margin-top: 8px; font-size: 15px; line-height: 1.6; font-weight: 700; color: #737373; }
.lp-rec-body { position: relative; margin-top: 52px; }
.lp-rec-quote { position: absolute; left: -6px; top: -36px; font: 900 110px/1 Inter, sans-serif; color: #154681; opacity: .18; pointer-events: none; }
.lp-rec-lead { position: relative; font-size: 30px; line-height: 1.5; font-weight: 900; color: #154681; text-wrap: balance; }
.lp-rec-comment { margin-top: 16px; font-size: 17px; line-height: 2; text-wrap: pretty; }


@media (max-width: 767px) {
  /* スマホの枠: 上の段「自分でやるより」の左右の端を、下の段「4 万円安い」の左右の端にそろえた 2 段組み */
  .u-price-box.lp-fv-price { top: 200px; height: 141px; display: flex; align-items: center; justify-content: center; }
  .lp-fv-lock { display: inline-flex; flex-direction: column; align-items: stretch; }
  .lp-fv-row { display: flex; align-items: center; gap: 6px; }
  .lp-fv-br { display: none; }
  .lp-fv-lock .u-effective.lp-fv-effective { position: static; width: auto; height: auto; transform: none; margin: 0 -1.6px 6px 0; font-size: 23px; font-weight: 900; line-height: 28px; letter-spacing: 1.6px; white-space: nowrap; text-align: justify; text-align-last: justify; }
  .lp-fv-lock .u-zero.lp-fv-zero { position: static; width: auto; height: auto; transform: none; font-size: 120px; line-height: 88px; }
  .lp-fv-lock .u-yen.lp-fv-yen { position: static; width: auto; height: auto; transform: none; font-size: 42px; line-height: 44px; text-align: left; white-space: nowrap; }
  /* 枠の下の 1 行: 左右の端を枠（幅 233px）に合わせる */
  .lp-fv-sub { left: 16px; top: 348px; width: 233px; font-size: 17.5px; line-height: 24px; text-align: justify; text-align-last: justify; }
  .lp-cta-band + .u-worry { margin-top: 40px; }
  .lc-support-media + .lc-campaign { margin-top: 40px; }
  /* キャンペーンの枠の下の線が FAQ の章 (上に 8px 重なる指定) に隠れないようにする */
  .lc-campaign + .lc-faq { margin-top: 0; }
  /* 帯の一文: 21 文字がボタンの幅に収まる大きさ */
  .lp-cta-band .u-line-cta > p { font-size: clamp(14px, 4.3vw, 18px); }
  .u-line-button.lp-btn-cta { padding: 16px 40px 16px 14px; font-size: clamp(14px, 4.1vw, 18px); }
  .lc-line-button.lp-btn-cta { padding: 14px 40px 14px 14px; font-size: clamp(14px, 4.1vw, 18px); }
  .lc-line-button.lp-btn-cta.lp-apply-submit { padding: 14px 36px 14px 10px; font-size: clamp(13px, 3.8vw, 18px); }
  .lp-sticky-line .lc-line-button.lp-btn-cta { padding: 11px 40px 11px 12px; font-size: clamp(14px, 4.1vw, 17px); }
      .lp-apply { margin-top: 24px; padding: 48px 16px; background-image: none; }
  .lc-heading > p.lp-apply-label { font-size: 12px; padding: 3px 10px; }
  .lp-apply-box { padding: 20px 16px 24px; }
  .lp-apply-steps { margin-top: 16px; padding: 12px; }
  .lp-apply-flow p { font-size: 12px; }
  .lp-apply-lead { font-size: 13px; }
  .lp-recommend { padding: 0 16px 56px; }
  .lp-rec { margin-top: 24px; padding-top: 24px; }
  .lp-rec-person { align-items: flex-start; gap: 14px; }
  .lp-rec-photo { flex-basis: 104px; width: 104px; height: 104px; }
  .lp-rec-role { font-size: 11px; }
  .lp-rec-name { font-size: 22px; }
  .lp-rec-name span { font-size: 11px; }
  .lp-rec-career { margin-top: 6px; font-size: 12px; }
  .lp-rec-body { margin-top: 44px; }
  .lp-rec-quote { top: -30px; font-size: 72px; }
  .lp-rec-lead { font-size: 22px; }
  .lp-rec-comment { margin-top: 12px; font-size: 15px; line-height: 1.9; }
}

/* FAQ の分類: 見出しは紺の太字だけ (新しい形は足さない)。質問の行は本番の部品のまま */
.lp-faq-group { max-width: 1032px; margin: 40px auto 0; }
.lc-heading + .lp-faq-group { margin-top: 32px; }
.lp-faq-group .lp-faq-cat { margin: 0 0 8px; color: #154681; font-size: 20px; font-weight: 900; line-height: 1.5; }
.lp-faq-group .lc-faq-items { margin-top: 0; }
@media (max-width: 767px) {
  .lp-faq-group { margin-top: 32px; }
  .lc-heading + .lp-faq-group { margin-top: 24px; }
  .lp-faq-group .lp-faq-cat { margin-bottom: 6px; padding-left: 8px; font-size: 16px; }
}

/* ===== サンクスページ (thanks.html)。LP の部品をそのまま使い、足したのは配置だけ ===== */
.lp-thanks-done { padding: 48px 16px 8px; text-align: center; }
.lp-thanks-done .lc-heading > p.lp-apply-label { background: #154681; color: #fff; }
.lp-thanks-check { display: block; margin: 16px auto 12px; }
.lp-thanks-done h1 { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.5; }
.lp-thanks-done .lp-thanks-lead { width: min(560px, 100%); margin: 16px auto 0; font-size: 15px; line-height: 1.8; }
.lp-thanks-done .lp-thanks-note { margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.6; }
/* 主役: 入力シートへ進むボタン (紺の帯 + 白いカード + オレンジのボタン) */
.lp-apply.lp-thanks-now { margin-top: 32px; padding: 48px 16px 56px; }
.lp-thanks-now .lc-line-button.lp-apply-submit { margin-top: 14px; }
.lp-thanks-now .lp-thanks-text { font-size: 14px; line-height: 1.8; text-align: center; }
.lp-thanks .lp-thanks-card-text { margin-top: 8px; font-size: 14px; line-height: 1.8; }
.lp-thanks .lp-thanks-small { margin-top: 10px; color: #555; font-size: 12px; line-height: 1.6; text-align: center; }
/* 脇役の箱 3 つ (メール・LINE・電話): フォームの「流れ」の箱と同じ色・角丸 */
.lp-thanks-mail { padding: 48px 16px 0; }
.lp-thanks .lp-thanks-card { width: min(560px, 100%); margin: 12px auto 0; padding: 20px 16px; text-align: center; }
.lp-thanks-mail .lp-thanks-card { margin-top: 0; }
.lp-thanks .lp-thanks-card-title { color: #154681; font-size: 16px; font-weight: 700; line-height: 1.6; }
.lp-thanks-mail-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; }
.lp-thanks-mail-title img { flex: none; width: 32px; height: 32px; mix-blend-mode: multiply; }
.lp-thanks .lp-thanks-subject { margin-top: 10px; font-size: 14px; font-weight: 700; }
.lp-thanks-help { padding: 56px 16px 72px; }
.lp-thanks-help .lp-thanks-help-text { width: min(560px, 100%); margin: 16px auto 20px; font-size: 14px; line-height: 1.8; text-align: center; }
.lp-thanks-card .lc-line-button { width: min(400px, 100%); margin: 10px auto 0; font-size: 18px; }
.lp-thanks-tel { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: #171717; font: 700 28px/1.3 Inter, sans-serif; text-decoration: none; }
.lp-thanks .lp-thanks-card .lp-thanks-tel + .lp-thanks-small { margin-top: 2px; }
.lp-thanks-footer { padding: 24px 16px 32px; border-top: 1px solid #d9d9d9; color: #555; font-size: 12px; line-height: 1.8; text-align: center; }
@media (max-width: 767px) {
  /* スマホ: 入力シートのボタンが最初の画面 (高さ 667px の端末でも) に入るよう、受付完了の部分を詰める */
  .lp-thanks-done { padding: 20px 16px 0; }
  .lp-thanks-done .lc-heading > p.lp-apply-label { margin-bottom: 0; }
  .lp-thanks-check { width: 36px; height: 36px; margin: 10px auto 8px; }
  .lp-thanks-done h1 { font-size: 20px; line-height: 1.4; color: #0f3560; }
  .lp-thanks-done .lp-thanks-lead { margin-top: 8px; font-size: 13px; line-height: 1.7; }
  .lp-thanks-done .lp-thanks-note { margin-top: 8px; font-size: 12px; }
  .lp-thanks .lp-thanks-card-text { font-size: 13px; }
  .lp-apply.lp-thanks-now { margin-top: 16px; padding: 24px 16px 32px; }
  .lp-thanks-now .lc-heading h2 { font-size: 20px; line-height: 1.5; }
  .lp-thanks-now .lp-apply-box { margin-top: 12px; padding: 16px 16px 20px; }
  .lp-thanks-now .lc-line-button.lp-btn-cta.lp-apply-submit { padding: 14px 40px; font-size: 18px; }
  .lp-thanks-now .lp-thanks-text { font-size: 13px; }
  .lp-thanks-mail { padding-top: 32px; }
  .lp-thanks-help { padding: 40px 16px 56px; }
  .lp-thanks .lp-thanks-card-title { font-size: 15px; }
  .lp-thanks-card .lc-line-button { font-size: clamp(14px, 4.1vw, 18px); padding: 14px 40px 14px 14px; }
}