/* ================================================================================
   共通
================================================================================ */

/* 基本設定
-------------------------------------------------------------------- */
:root {
  --primary: #0a5bb5; /* メインブルー：電話CTA・見出しアクセント・アイコン枠 */
  --primary-dark: #073463; /* 濃紺：見出し文字・FVスクリム・フッター・強調帯 */
  --teal: #1aa1b8; /* ティール：セカンダリアクセント（強調ワード・アイコン等） */
  --teal-strong: #0b7080; /* ティール濃：白背景に乗せる強調ワード用（可読性確保） */
  --teal-line: #bfe3e8; /* ティール淡：枠線 */
  --teal-tint: #d7eef1; /* ティール極淡：二重枠・区切り */
  --accent-bg: #eef5fc; /* 薄ブルー背景：交互セクション・CTA枠 */
  --icon-bg: #d8e9fa; /* アイコン円の背景 */
  --cta: #f5821f; /* アクセント（見出し下線・0円・▼・FAQ・＼／等） */
  --cta-dark: #d96d0c;
  --cta-strong: #b35a00; /* 白文字を乗せるオレンジ用（コントラスト確保） */
  --cta-text: #d97314; /* 白背景の強調テキスト用オレンジ（大きい太字で90％3:1） */
  --form: #d62f19; /* フォームCTA専用：他と被らない目立つ色（白文字4.9:1） */
  --form-dark: #b0240e;
  --tel: #17a44e; /* 電話CTA＝青と別の目立つ色 */
  --tel-dark: #0f7d39;
  --req: #e8470f; /* 強調・注意 */
  --white: #fff;
  --ink: #1f2733;
  --sub: #252f3b;
  --line: #cfd8e3;
}
* {
  box-sizing: border-box;
}

/* 約物半角（YakuHanJP）：記号は「地の文字より少し細め」に見せると馴染むため、本文=Light／見出し=Medium／FV見出し=Bold の3段階で使い分ける。
   各ファミリーは1ファイルを全ウェイト帯に割り当て、合成ボールドで意図せず太らないようにしている。外部CDN依存を避けるため fonts/ にセルフホスティング（各約3～4KBの極小ファイル）。 */
@font-face {
  font-family: "YakuHanJP-Light";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/YakuHanJP-Light.woff2") format("woff2");
}
@font-face {
  font-family: "YakuHanJP-Md";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/YakuHanJP-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "YakuHanJP-Bold";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/YakuHanJP-Bold.woff2") format("woff2");
}
body {
  /* 本文は約物だけ細い YakuHanJP-Light を当て、残りはベースの日本語スタック */
  font-family:
    "YakuHanJP-Light", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: #dde4ed;
  line-height: 1.7;
  font-size: 16px;
}
.page {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  box-shadow: 0 3px 10px rgba(7, 52, 99, 0.08);
}

/* 見出し・CTA など太字テキストの約物：本文Lightより一段太い Medium で、太字に馴染ませる（.fv-title は極太のため個別にBold指定） */
.fv-eyebrow, .fv-sub,
.sec-heading, .genre-lead, .solve,
.cta-lead, .cta-open, .btn-cta-form, .btn-cta-tel,
.tel-cta-pc-label, .sticky-pc-label,
.point-num, .point-title,
.secret-chip, .secret-text, .secret-note,
.stat-num, .stat-label, .voice-name, .flow-title, .faq-q,
.form-wrap > h2, .send-wrap > h2, .balloon > div,
.bar_title, .form-horizontal .col-form-label {
  font-family:
    "YakuHanJP-Md", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
    Meiryo, sans-serif;
}
img {
  max-width: 100%;
  display: block;
}
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .page {
    max-width: 760px;
  }
}

/* プレースホルダー（未確定＝中立色で残置）
-------------------------------------------------------------------- */
.placeholder {
  border: 2px dashed #ccc;
  background: #eef1f5;
  padding: 40px 20px;
  text-align: center;
  color: #8090a3;
  font-size: 13px;
  border-radius: 8px;
}
.placeholder-dim {
  display: block;
  font-size: 12px;
  color: #8090a3;
  margin-top: 6px;
}

/* セクション共通
-------------------------------------------------------------------- */
section {
  padding: 30px 15px;
  border-bottom: 1px solid #e3e8ef;
}
section:last-of-type {
  border-bottom: none;
}
/* セクション系ユーティリティ（インライン置換） */
.sec-flush {
  padding: 0;
}
.sec-tint {
  background: var(--accent-bg);
}
.fv-cta-pad {
  padding: 24px 18px 30px;
  background: var(--primary-dark);
}
.copyright {
  margin-top: 10px;
}
.sticky-tel-flush {
  margin-bottom: 0;
}
.lead {
  font-size: 16px;
  color: var(--sub);
  text-align: center;
  margin-bottom: 14px;
}
@media (min-width: 768px) {
  .lead {
    font-size: 18px;
  }
}

/* セクション見出し
-------------------------------------------------------------------- */
.sec-sub {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 12px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 5px 14px;
  border-radius: 999px;
}
.sec-heading {
  position: relative;
  font-size: 23px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 24px;
  padding-bottom: 14px;
  line-height: 1.45;
  color: var(--primary-dark);
}
.sec-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 52px;
  height: 4px;
  background: var(--cta);
  border-radius: 2px;
}
@media (min-width: 768px) {
  .sec-heading {
    font-size: 31px;
  }
  .sec-sub {
    font-size: 13px;
  }
}

/* レスポンシブ 表示ユーティリティ
-------------------------------------------------------------------- */
.l-sp {
  display: block;
} /* PCでは非表示 */
.l-pc {
  display: none;
} /* SPでは表示 */
@media (min-width: 768px) {
  .l-sp {
    display: none;
  } /* SPでは表示 */
  .l-pc {
    display: block;
  } /* PCでは非表示 */
}

/* 本文テキスト（左寄せ複数行の右端揃え）
-------------------------------------------------------------------- */
.point-body,
.voice-body,
.why-text,
.flow-desc,
.pain-list li,
.faq-text {
  text-align: justify;
  word-break: break-all;
  letter-spacing: -1px;
}
.faq-text {
  flex: 1;
  min-width: 0;
}

/* CTA（共通パーツ）
-------------------------------------------------------------------- */

/* ---- CTAブロック ---- */
.cta-block {
  border: 1px solid var(--line);
  padding: 18px;
  margin: 14px 0;
  background: var(--accent-bg);
  border-radius: 14px;
}
.btn-cta-tel,
.btn-cta-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  padding: 14px 0;
  min-height: 60px;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 10px;
  transition: 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.btn-cta-form {
  background: var(--form);
  color: #fff;
  box-shadow: 0 4px 0 var(--form-dark);
  font-size: 17px;
}
.btn-cta-form:hover {
  background: var(--form-dark);
  box-shadow: 0 2px 0 var(--form-dark);
  transform: translateY(2px);
}
.btn-cta-tel {
  background: var(--tel);
  color: #fff;
  font-size: 21px;
  box-shadow: 0 4px 0 var(--tel-dark);
}
.btn-cta-tel:hover {
  background: var(--tel-dark);
  box-shadow: 0 2px 0 var(--tel-dark);
  transform: translateY(2px);
}
.cta-block .subnote {
  text-align: center;
  font-size: 14px;
  color: var(--sub);
  margin-top: 6px;
}
.cta-block .subnote strong {
  color: var(--primary-dark);
}
.subnote-assure {
  display: inline-block;
  color: var(--tel-dark);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.subnote-assure::before {
  content: "\2713";
  color: #fff;
  background: var(--tel);
  font-size: 12px;
  font-weight: 900;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.cta-open {
  text-align: center;
  margin-top: 10px;
  color: var(--tel-dark);
  font-weight: 800;
  font-size: 19px;
}
.cta-open::before {
  content: "\2713";
  color: #fff;
  background: var(--tel);
  font-size: 12px;
  font-weight: 900;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.subnote-out {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 12px;
}
.subnote strong,
.subnote-out strong {
  font-weight: 800;
  font-size: 17px;
}
.subnote-out .subnote-assure {
  color: #fff;
}
.subnote-out strong {
  color: #fff;
}
/* アイコン（CTA/ヘッダー共用） */
.cta-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mail-ico {
  width: 15px;
  height: 15px;
}
@media (min-width: 768px) {
  .btn-cta-form {
    font-size: 20px;
  }
  .cta-block .subnote {
    font-size: 18px;
  }
  .subnote-assure {
    font-size: 19px;
  }
  .cta-open {
    font-size: 22px;
  }
  .subnote-out {
    font-size: 16px;
  }
  .subnote strong,
  .subnote-out strong {
    font-size: 20px;
  }
  .tel-cta-pc-label {
    font-size: 18px;
  }
}

/* ---- 電話番号（PC表示） ---- */
/* CTA電話：PCはテキスト表示（押下不可がわかる見た目） */
.tel-cta-pc {
  display: none;
  text-align: center;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 10px;
}
.tel-cta-pc-label {
  display: block;
  font-size: 16px;
  color: var(--sub);
  font-weight: 700;
  margin-bottom: 2px;
}
.tel-cta-pc-num {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.tel-cta-pc-sub {
  display: block;
  font-size: 13px;
  color: var(--sub);
}
a.tel-cta-pc-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 31px;
  font-weight: 800;
  color: var(--tel-dark);
  letter-spacing: 0.02em;
  line-height: 1.3;
  pointer-events: none;
  cursor: default;
} /* PCはテキスト表示のみ（押下不可）。アイコンは::beforeでmask描画→.text()でも消えない */
.tel-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--primary);
}
.tel-cta-sp::before,
a.tel-cta-pc-num::before,
.tap_tel-hdr::before,
.sticky-pc-num::before,
.sticky-sp::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E")
    center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E")
    center/contain no-repeat;
}
.tap_tel-hdr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tel-dark);
  font-weight: 800;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
} /* ヘッダーPC番号はテキスト表示のみ（押下不可） */
@media (min-width: 768px) {
  .tel-cta-sp {
    display: none;
  }
  .tel-cta-pc {
    display: block;
  }
}

/* ---- CTAリード（＼ ／ で強調） ---- */
.cta-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 12px;
  line-height: 1;
}
.cta-lead > span {
  text-align: center;
  line-height: 1.45;
  white-space: nowrap;
}
.cta-lead .l-sp {
  display: inline;
}
.cta-lead::before {
  content: "＼";
  color: var(--cta);
  font-size: 24px;
  align-self: center;
}
.cta-lead::after {
  content: "／";
  color: var(--cta);
  font-size: 24px;
  align-self: center;
}
.cta-lead--2line::before,
.cta-lead--2line::after {
  font-size: 38px;
} /* SP=2行の高さをカバー */
@media (min-width: 768px) {
  .cta-lead {
    font-size: 24px;
  }
  .cta-lead .l-sp {
    display: none;
  } /* PC=1行にする */
  .cta-lead::before,
  .cta-lead::after {
    font-size: 30px;
    align-self: center;
  }
  .cta-lead--2line::before,
  .cta-lead--2line::after {
    font-size: 30px;
  } /* PC=1行なので揃える */
}

/* ---- CTA帯テーマ（band / final） ---- */
.cta-final {
  background: var(--primary-dark);
}
.cta-final .tel-cta-pc {
  background: #f1faf5;
}
.cta-final .sec-heading {
  color: #fff;
  margin-bottom: 18px;
}
.cta-final .cta-block {
  background: #fff;
}
/* 全CTA共通：紺帯＋白カード＋薄緑チップ */
.cta-band {
  background: var(--primary-dark);
}
.cta-band .cta-lead {
  color: #fff;
}
.cta-band .cta-block,
.fv-cta-pad .cta-block {
  background: #fff;
}
.cta-band .tel-cta-pc,
.fv-cta-pad .tel-cta-pc {
  background: #f1faf5;
}
.fv-cta-pad .cta-lead {
  color: #fff;
}

/* ================================================================================
   ヘッダー
================================================================================ */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 8px;
  background: var(--white);
  border-bottom: 2px solid var(--primary);
  min-height: 58px;
}
.header-logo .placeholder {
  padding: 8px 16px;
  font-size: 12px;
}
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hdr-logo {
  height: 34px;
  width: auto;
  display: block;
}
.hdr-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.btn-outline {
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  background: var(--white);
  transition: 0.2s;
  cursor: pointer;
  text-decoration: none;
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}
.tel-pc {
  display: none;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--primary-dark);
  font-size: 18px;
  white-space: nowrap;
  text-decoration: none;
}
.tel-pc small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--sub);
  text-align: right;
}
.tel-pc-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  padding-top: 3px;
}
/* SPヘッダー：アイコンのみ＋拡大（折り返し回避） */
.header .btn-label {
  display: none;
}
.header .btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
}
.header .mail-ico,
.header .hdr-ico {
  width: 24px;
  height: 24px;
}
.hdr-mail {
  background: var(--form);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 0 var(--form-dark);
}
.hdr-mail:hover {
  background: var(--form-dark);
  box-shadow: 0 2px 0 var(--form-dark);
  transform: translateY(2px);
}
.header .tel-sp:hover {
  background: var(--tel-dark);
  box-shadow: 0 2px 0 var(--tel-dark);
  transform: translateY(2px);
}
.header .tel-sp {
  background: var(--tel);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 0 var(--tel-dark);
}
@media (min-width: 768px) {
  .header {
    padding: 5px 16px 8px;
    min-height: 64px;
  }
  .header .tel-sp {
    display: none;
  }
  .header .tel-pc {
    display: flex;
  }
  .hdr-logo {
    height: 34px;
  }
  .tel-pc {
    font-size: 20px;
  }
  .header .btn-label {
    display: inline;
  }
  .header .btn-icon {
    width: auto;
    height: auto;
    padding: 9px 14px;
  }
  .header .mail-ico,
  .header .hdr-ico {
    width: 15px;
    height: 15px;
  }
}

/* ================================================================================
   フッター
================================================================================ */

/* フッター
-------------------------------------------------------------------- */
footer {
  background: var(--primary-dark);
  padding: 26px 18px;
  font-size: 13px;
  color: #c4d2e4;
  text-align: center;
}
footer .footer-logo {
  margin-bottom: 8px;
  text-align: center;
}
footer .footer-logo img {
  height: 34px;
  width: auto;
  display: inline-block;
} /* 元サイズ316×68 の1/2 */
.footer-links {
  margin-top: 6px;
}
footer a {
  color: #fff;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ext-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.footer-sep {
  color: #5b78a0;
  margin: 0 8px;
}

/* フッター固定CTA
-------------------------------------------------------------------- */
.footer-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 760px;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 7px 14px 11px;
  display: flex;
  gap: 10px;
  box-shadow: 0 -3px 12px rgba(7, 52, 99, 0.12);
  z-index: 50;
  transform: translateX(-50%) translateY(115%);
  transition: transform 0.35s ease;
  will-change: transform;
}
.footer-sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
}
.footer-sticky-cta .btn-cta-tel,
.footer-sticky-cta .btn-cta-form {
  flex: 1;
  margin-bottom: 0;
  min-height: 0;
  font-size: 15px;
  padding: 14px 0;
}
.footer-sticky-cta .btn-cta-form {
  box-shadow: 0 4px 0 var(--form-dark);
}
.footer-sticky-cta .btn-cta-tel {
  box-shadow: 0 4px 0 var(--tel-dark);
}
.footer-sticky-cta .sticky-sp::before {
  width: 22px;
  height: 22px;
} /* 電話アイコンをフォームのcta-ico(22px)に合わせる */
.sticky-pc {
  display: none;
}
@media (min-width: 768px) {
  .footer-sticky-cta {
    padding: 10px 14px;
  }
  .sticky-sp {
    display: none;
  }
  .sticky-pc {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: none;
    border-radius: 10px;
    padding: 8px 0 4px;
    background: #f1faf5;
    line-height: 1.3;
  }
  .sticky-pc-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--sub);
  }
  .sticky-pc-num {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 27px;
    font-weight: 800;
    color: var(--tel-dark);
    letter-spacing: 0.02em;
    pointer-events: none;
    cursor: default;
  } /* PCはテキスト表示のみ（押下不可） */
  .footer-sticky-cta .btn-cta-form {
    font-size: 19px;
    min-height: 66px;
  }
}

/* ================================================================================
   ページ固有（セクション毎）
================================================================================ */

/* FV（imgオーバーレイ型）
-------------------------------------------------------------------- */

/* ---- FVビジュアル・見出し ---- */
.fv-visual {
  position: relative;
  min-height: 400px;
  background: var(--accent-bg);
  overflow: hidden;
}
.fv-visual::before {
  content: "［ FVメイン：PC=fv-main-pc.jpg(横長 例1600×800) ／ SP=fv-main-sp.jpg(縦寄り 例800×900) ］";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: #7d93ad;
  font-size: 12px;
}
.fv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.fv-pic {
  display: contents;
}
.fv-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(7, 52, 99, 0.3) 0%,
    rgba(7, 52, 99, 0.34) 45%,
    rgba(7, 52, 99, 0.42) 100%
  );
}
.fv-overlay {
  position: relative;
  z-index: 3;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 36px 18px;
  color: #fff;
}
.fv-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  background: var(--primary);
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(7, 52, 99, 0.35);
}
.fv-title {
  /* FV は極太900のため、記号は Bold 相当の YakuHanJP-Bold を当てて存在感を保つ。それ以外は Zen Kaku Gothic New */
  font-family:
    "YakuHanJP-Bold", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.fv-title .accent {
  color: #ffd24d;
}
.fv-sub {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
@media (min-width: 768px) {
  .fv-eyebrow {
    font-size: 15px;
  }
  .fv-title {
    font-size: 62px;
  }
  .fv-sub {
    font-size: 23px;
  }
}

/* ---- ゼログリッド（3訴求） ---- */
.zero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 420px;
}
.zero-item {
  background: rgba(255, 255, 255, 0.96);
  text-align: center;
  padding: 14px 4px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.zero-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  color: #e0700f;
  line-height: 1;
}
.zero-big {
  font-size: 38px;
  line-height: 1;
}
.zero-big--text {
  font-size: clamp(20px, 6.2vw, 30px);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.zero-unit {
  font-size: 18px;
}
.zero-label {
  font-size: 14px;
  color: var(--sub);
  font-weight: 700;
  margin-top: 0;
  line-height: 1;
}
@media (min-width: 768px) {
  .zero-grid {
    max-width: 560px;
    gap: 14px;
  }
  .zero-item {
    padding: 16px 6px;
    border-radius: 14px;
  }
  .zero-big {
    font-size: 56px;
  }
  .zero-big--text {
    font-size: 34px;
  }
  .zero-unit {
    font-size: 24px;
  }
  .zero-label {
    font-size: 18px;
  }
}

/* 実績
-------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stat-item {
  border: 1px solid var(--line);
  text-align: center;
  padding: 14px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(7, 52, 99, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.stat-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.15;
}
.stat-unit {
  font-size: 14px;
}
.stat-label {
  font-size: 13px;
  color: var(--sub);
  margin-top: 4px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 実績→業種一覧つなぎ
-------------------------------------------------------------------- */
.results-sec {
  border-bottom: none;
  padding-bottom: 8px;
}
.bridge-arrow {
  display: block;
  width: 160px;
  margin: 24px auto 0;
}
.genre-sec {
  padding-top: 16px;
}
.genre-lead {
  text-align: center;
  margin: 0 auto 18px;
  max-width: 560px;
  font-size: 20px;
  font-weight: 900;
  color: #073463;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.genre-lead .accent-blue {
  color: var(--cta-text);
  font-size: 1.2em;
}

/* 業種グリッド
-------------------------------------------------------------------- */
.genre-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.genre-item {
  border: 1px solid var(--line);
  text-align: center;
  padding: 14px 4px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  font-feature-settings: "palt";
  background: #fff;
}
.genre-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 8px;
}
.genre-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .genre-item {
    font-size: 16px;
  }
  .genre-icon {
    width: 64px;
    height: 64px;
  }
}

/* 悩み
-------------------------------------------------------------------- */
section.pain-sec {
  background: #f0f2f6;
}
.pain-visual {
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
}
.pain-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.pain-list li {
  padding: 15px 14px 15px 44px;
  border: 1px solid var(--line);
  margin-bottom: 9px;
  border-radius: 10px;
  position: relative;
  font-size: 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(7, 52, 99, 0.06);
}
.pain-list li::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.pain-arrow {
  text-align: center;
  font-size: 26px;
  margin: 14px 0;
  color: var(--cta);
}
.solve {
  font-size: 23px;
  font-weight: 800;
  text-align: center;
  line-height: 1.45;
  color: var(--primary-dark);
}
.solve em {
  font-style: normal;
  color: var(--primary);
}
.pain-sec .pain-list li {
  background: #fff;
  border: 1px solid #dce2ea;
  color: #3a4453;
}
.pain-sec .solve {
  background: #fff;
  border-radius: 14px;
  padding: 20px 16px;
  box-shadow: 0 6px 18px rgba(10, 91, 181, 0.14);
}
.pain-sec .solve em {
  color: var(--cta);
}
@media (min-width: 768px) {
  .solve {
    font-size: 30px;
  }
  .pain-list li {
    font-size: 18px;
  }
}

/* WHY
-------------------------------------------------------------------- */
.why-text {
  margin: 16px 0;
  font-size: 16px;
  color: var(--ink);
}
.why-visual {
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
}
.why-visual img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .why-text {
    font-size: 18px;
  }
}

/* ポイント
-------------------------------------------------------------------- */
.point-item {
  border: 1px solid var(--line);
  border-left: 5px solid var(--primary);
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(7, 52, 99, 0.08);
}
.point-num {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  background: var(--primary);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
}
.point-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--primary-dark);
}
.point-body {
  font-size: 16px;
  color: var(--sub);
}
@media (min-width: 768px) {
  .point-title {
    font-size: 21px;
  }
  .point-num {
    font-size: 13px;
  }
  .point-body {
    font-size: 18px;
  }
}
/* ---- ポイント内ハイライト ---- */
.point-highlights {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.point-highlights li {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eef5fc;
  border-left: 4px solid var(--teal);
  border-radius: 4px;
  padding: 9px 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary-dark);
}
.point-highlights .check-ico {
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .point-highlights li {
    line-height: 1.7;
  }
}
/* ---- ここだけの話（スタッフ画像＋二重枠） ---- */
.secret {
  position: relative;
  margin-top: 30px;
  background: #fff;
  border: 1px solid var(--teal-line);
  border-radius: 14px;
  padding: 32px 20px;
  min-height: 276px;
  box-shadow: 0 3px 10px rgba(7, 52, 99, 0.08);
}
.secret::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--teal-tint);
  border-radius: 10px;
  pointer-events: none;
}
.secret-body {
  position: relative;
  z-index: 1;
  padding-right: 12%;
}
.secret-chip {
  position: relative;
  display: inline-block;
  background: var(--primary-dark);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.secret-chip::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--primary-dark);
}
.secret-flash {
  position: absolute;
  right: -22px;
  top: -22px;
  width: 26px;
  height: 26px;
}
.secret-text {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1.45;
  margin: 0;
  letter-spacing: 0.01em;
}
.secret-text .em {
  color: var(--teal);
}
.secret-divider {
  height: 4px;
  margin: 18px 0;
  background-image: radial-gradient(#8fd0da 1.8px, transparent 2px);
  background-size: 11px 4px;
  background-repeat: repeat-x;
  background-position: left center;
}
.secret-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
}
.secret-lock {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.secret-lock svg {
  width: 19px;
  height: 19px;
}
.secret-img {
  position: absolute;
  right: -24px;
  bottom: 0;
  z-index: 1;
  width: clamp(101px, 28vw, 140px);
  height: auto;
  transform: translateZ(0);
}
@media (min-width: 768px) {
  .secret {
    padding: 30px 40px;
    min-height: 356px;
    overflow: hidden;
  }
  .secret-body {
    padding-right: 250px;
  }
  .secret-text {
    font-size: 34px;
  }
  .secret-note {
    font-size: 22px;
  }
  .secret-img {
    bottom: -30px;
    width: 202px;
    right: 34px;
  }
}

/* サービス仕組み図（三者関係）
-------------------------------------------------------------------- */
.mech {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}
.mech-node {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 3px 10px rgba(7, 52, 99, 0.08);
}
.mech-hub {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  color: #fff;
  box-shadow: 0 8px 20px rgba(10, 91, 181, 0.3);
}
.mech-ico {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mech-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
.mech-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.mech-title {
  font-weight: 800;
  font-size: 17px;
  color: var(--primary-dark);
  line-height: 1.4;
}
.mech-hub .mech-title {
  color: #fff;
}
.mech-desc {
  font-size: 15px;
  color: var(--sub);
  margin-top: 3px;
  line-height: 1.6;
}
.mech-hub .mech-desc {
  color: #fff;
}
.mech-conn {
  text-align: center;
  padding: 8px 0 4px;
}
.mech-conn-label {
  display: inline-block;
  background: var(--cta);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(245, 130, 31, 0.3);
}
.mech-conn::after {
  content: "▼";
  display: block;
  color: var(--primary);
  font-size: 15px;
  line-height: 1;
  margin-top: 5px;
}
@media (min-width: 768px) {
  .mech-title {
    font-size: 20px;
  }
  .mech-desc {
    font-size: 16px;
  }
  .mech-ico {
    width: 64px;
    height: 64px;
  }
  .mech-conn-label {
    font-size: 16px;
  }
}

/* セクション折り返し防止（選ばれる理由ラッパー）
-------------------------------------------------------------------- */
.sec-reason {
  overflow: hidden;
}

/* 口コミ（左：丸アイコン／右：見出し＋本文）
-------------------------------------------------------------------- */
.voice-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(7, 52, 99, 0.08);
}
.voice-avatar {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--teal-line);
  background: var(--icon-bg);
  overflow: hidden;
}
.voice-avatar::after {
  content: "IMG";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #7d93ad;
  letter-spacing: 0.05em;
}
.voice-avatar img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice-main {
  flex: 1;
  min-width: 0;
}
.voice-name {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--primary-dark);
  line-height: 1.4;
}
.voice-attr {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sub);
  margin-top: 2px;
  line-height: 1.5;
}
.voice-body {
  font-size: 16px;
  color: var(--sub);
}
@media (min-width: 768px) {
  .voice-name {
    font-size: 22px;
  }
  .voice-attr {
    font-size: 15px;
  }
  .voice-body {
    font-size: 18px;
  }
  .voice-avatar {
    width: 92px;
    height: 92px;
  }
}

/* 流れ
-------------------------------------------------------------------- */
.flow-wrap {
  position: relative;
  text-align: center;
}
.flow-list {
  display: inline-block;
  text-align: left;
}
.flow-item {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0 0 38px;
}
.flow-item:last-child {
  padding-bottom: 0;
}
.flow-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 54px;
  bottom: 2px;
  width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(var(--primary), var(--icon-bg));
  z-index: 0;
}
.flow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  bottom: 0px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid var(--primary);
  z-index: 1;
}
.flow-step {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.1;
  box-shadow: 0 3px 8px rgba(7, 52, 99, 0.28);
}
.flow-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--primary-dark);
}
.flow-desc {
  font-size: 16px;
  color: var(--sub);
}
@media (min-width: 768px) {
  .flow-title {
    font-size: 21px;
  }
  .flow-desc {
    font-size: 18px;
  }
  .flow-step {
    font-size: 15px;
  }
  .flow-item {
    padding-bottom: 44px;
  }
}

/* FAQ
-------------------------------------------------------------------- */
.faq-item {
  border: 1px solid var(--line);
  margin-bottom: 9px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.faq-q {
  padding: 15px 16px;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.faq-q-icon {
  color: #fff;
  background: var(--teal);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
.faq-a {
  padding: 15px 16px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #f6faff;
}
.faq-a-icon {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background: var(--cta);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}
@media (min-width: 768px) {
  .faq-q,
  .faq-a {
    font-size: 18px;
  }
}