/* ==========================================================================
   BPS サービスサイト  site.css  v4
   変数は tokens.css。部品の形は BPS の製品画面とロゴから決めている。
   - ボタン: 角丸 8px の長方形。資料請求＝ライムの塗りに NAVY の文字、お問い合わせ＝白地に BLUE の線（青地の上では白 60% の線）。
     大きいボタンは中を2行にして、2行目に小さな補足を入れる。影は付けず、ホバーは色だけ変える
   - 線: ロゴの「線端の丸い線」と「中抜きの丸（ノード）」。見出しの下は BLUE と TEAL の短い線
   - 画面の画像: 角丸 8 と 1px の線だけの枠に入れる（上のバーや色の帯は付けない）
   KAWAI さんの「AIっぽいデザインにしない禁止24項目」を、飾りを足さないための基準として使う
   ========================================================================== */

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 8px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 860px) { html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }
body {
  margin: 0;
  padding-top: var(--hdr-h);
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  /* 改行: HTML の文節の切れ目に <wbr> を入れてあり、keep-all でその位置と句読点・空白だけで折り返す
     （Chrome と Safari で同じ位置になる）。行頭の禁則は strict。入りきらないときだけ anywhere で折る。
     文章を足したり直したりしたら、_qa/tools で `node wbr.js ../../index.html ../../thanks.html` を実行する */
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-autospace: no-autospace;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-inline-size: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; }
small { font-size: inherit; }
em { font-style: normal; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
input, textarea { word-break: normal; }
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
}
.on-dark h1, .on-dark h2, .on-dark h3, .fv h1 { color: var(--on-dark); }
p, li, dd, td, dt { text-wrap: pretty; }                       /* 最後の行に1語だけ残さない */
h1, h2, h3, .sec-head__lead { text-wrap: balance; }            /* 見出しとリードは行の長さをそろえる */
::selection { background: var(--fb-soft); color: var(--navy); }
.nb { display: inline-block; }
.pn { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.on-dark :focus-visible, .fv :focus-visible, .band :focus-visible, .ftr__sub :focus-visible { outline-color: var(--focus-on-dark); }
.br-sp { display: none; }
@media (max-width: 680px) { .br-wide { display: none; } .br-sp { display: inline; } }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.ico { width: 1em; height: 1em; flex: none; }
.note { font-size: var(--fs-note); line-height: 1.8; color: var(--mute); }
.img-note { font-size: var(--fs-note); line-height: 1.6; color: var(--mute); }
.img-note--end { margin-top: 24px; }

.skip { position: fixed; left: 12px; top: -80px; z-index: var(--z-skip); background: var(--navy); color: var(--on-dark); padding: 10px 16px; text-decoration: none; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }

/* 見出しだけスクロールでふわっと表示（JS が無いときと、動きを減らす設定のときは最初から見える） */
.js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }
@media print { .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* チェックの箇条（製品カード・料金の「主な機能」） */
.checks { display: grid; gap: 6px; }
.checks li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.7; color: var(--ink); }
.checks li::before { content: ""; position: absolute; left: 3px; top: calc(.85em - 7px); width: 13px; height: 7px; border: solid var(--navy); border-width: 0 0 2.5px 2.5px; border-radius: 1px; transform: rotate(-45deg); }

/* 製品画面の枠（角丸 8・1px の線だけ。上のバーや色の帯は付けない）。画面の画像を入れる */
.win { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.win img { width: 100%; }

/* --------------------------------------------------------------------------
   ボタン（製品画面のボタンと同じ系統: 角丸 8px の長方形、影なし、ホバーは色だけ）
   - 資料請求  .btn--primary  ライム #C6F03A（白地も青地も同じ）。文字は NAVY。ホバーは少し暗くする
                （地の明るさで2段に分ける理由と数値は tokens.css の「押せるもの」）
   - お問い合わせ  .btn--line  白地に BLUE 2px の線と BLUE の文字。ホバーは淡い青の地
                  .btn--line-light  青地の上。白 60% の 2px の線と白の文字。ホバーは白 14% を重ねた地
                  （白 100% の線だと青地で主ボタンの塗りより縁が強くなり、主と副の順番が逆に見えていた）
   - .btn--duo  中を2行にする（1行目 18px/700、2行目に補足 14px/400）。文字は左寄せで、右に矢印
   - .btn--sm   ヘッダー用の高さ 44（押せる範囲の基準 44px）
   - ホバーの色は、マウスで指せる端末だけに付ける（タッチの端末で押したあとに色が残らないように）
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 24px;
  border: 2px solid transparent; border-radius: var(--r-md);
  font-size: 17px; font-weight: var(--fw-bold); line-height: 1.3;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.btn .ico { display: none; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--cta); color: var(--on-cta); }
.btn--line { background: var(--paper); border-color: var(--blue); color: var(--blue); }
/* .btn--secondary は送信エラーのページ（api/contact.js が返す HTML。青い地）の「入力画面へ戻る」。青地の上の線のボタンと同じ見た目にする */
.btn--line-light, .btn--secondary { background: transparent; border-color: var(--line-on-blue); color: var(--on-dark); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--cta-hover); }
  .btn--line:hover { background: var(--blue-50); }
  .btn--line-light:hover, .btn--secondary:hover { background: var(--on-blue-hover); }
}
.btn[disabled], .btn[disabled]:hover { opacity: .6; cursor: progress; }

.btn--duo { justify-content: space-between; min-height: 64px; padding: 8px 18px 8px 22px; text-align: left; white-space: normal; }
.btn__text { display: grid; gap: 1px; }
.btn__text > wbr { display: none; }   /* wbr.js が2行の間に入れる <wbr> を行として数えない */
.btn__main { font-size: 18px; font-weight: var(--fw-bold); line-height: 1.35; white-space: nowrap; }
.btn__sub { font-size: 14px; font-weight: var(--fw-regular); line-height: 1.45; white-space: nowrap; }
.btn--duo .ico { display: block; width: 20px; height: 20px; }

.btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }

/* ボタンを並べる段（資料請求が先＝左・縦に並ぶときは上） */
.btns { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.btns .btn--duo { flex: 1 1 228px; max-width: 300px; }

/* 文字のリンク（BLUE の文字の右に、線端の丸い線で描いた矢印。ホバーは下線） */
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; font-weight: var(--fw-bold); color: var(--blue); text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link__arrow { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { .text-link:hover { text-decoration-line: underline; } }
.text-link--on-dark { color: var(--on-dark); }

/* セクションの終わりのボタン2つ（中央） */
.pair { justify-content: center; margin-top: 56px; }
.pair .btn--duo { flex-basis: 280px; }
@media (max-width: 680px) {
  .pair { flex-direction: column; align-items: stretch; margin-top: 40px; max-width: 400px; margin-inline: auto; }
  .pair .btn--duo { flex-basis: auto; max-width: none; }
}

/* 青地の上の資料請求の色（今は白地と同じライム。地ごとに変えるときは tokens.css の --cta-on-blue を直す） */
.fv, .band, .done { --cta: var(--cta-on-blue); --cta-hover: var(--cta-on-blue-hover); }

/* --------------------------------------------------------------------------
   ヘッダー（1段 72px。ロゴ・ナビ・ログイン・お問い合わせ・資料請求を横に並べる。
   ロゴの左端を本文の左端にそろえる。下端はスクロールしたら影で区切る）
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--hdr-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-slow) var(--ease);
}
.hdr.is-scrolled { box-shadow: var(--shadow-hdr); border-bottom-color: transparent; }
.hdr__in { height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: center; }
.hdr__logo { flex: none; display: flex; align-items: center; height: 100%; }   /* 上下に 16px 以上＝シンボルの高さの 1/2 */
.hdr__logo img { height: var(--logo-h); width: auto; }
.hdr__nav { height: 100%; margin-left: 48px; }
.hdr__nav ul { height: 100%; display: flex; gap: 28px; }
.hdr__nav a { height: 100%; min-width: 44px; display: flex; align-items: center; justify-content: center; padding: 0 2px; font-size: 15px; font-weight: var(--fw-medium); text-decoration: none; color: var(--ink); text-underline-offset: 6px; text-decoration-thickness: 2px; transition: color var(--t-base) var(--ease); }
@media (hover: hover) { .hdr__nav a:hover { color: var(--blue); text-decoration-line: underline; } }
.hdr__nav a:focus-visible { outline-offset: -4px; }
.hdr__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hdr__login { display: inline-flex; align-items: center; min-height: 44px; margin-right: 12px; font-size: 14px; font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; text-underline-offset: 4px; }
@media (hover: hover) { .hdr__login:hover { color: var(--blue); text-decoration: underline; } }

.hdr__menu { display: none; flex: none; width: 48px; height: 48px; margin-left: 8px; margin-right: -8px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; color: var(--navy); }
.hdr__menu:focus-visible { outline-offset: -4px; }
.hdr__menu span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease), top var(--t-slow) var(--ease); }
.hdr__menu span:nth-child(1) { top: 16px; }
.hdr__menu span:nth-child(2) { top: 23px; }
.hdr__menu span:nth-child(3) { top: 30px; }
.hdr__menu[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.hdr__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__menu[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .hdr__nav { margin-left: 36px; }
  .hdr__nav ul { gap: 22px; }
}

/* 1024px 以下: ロゴ／小さな資料請求のボタン／メニュー */
@media (max-width: 1024px) {
  .hdr__nav, .hdr__login, .hdr__contact { display: none; }
  .hdr__menu { display: block; }
  html:not(.js) .hdr__menu { display: none; }   /* JS が無いと開けないので出さない（資料請求のボタンは残る） */
}

/* メニュー（1024px 以下） */
.drawer {
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: var(--z-drawer);
  background: var(--paper);
  padding: 8px var(--pad) calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.drawer.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html.is-menu-open { overflow: hidden; }
.drawer > * { max-width: 560px; margin-inline: auto; }
.drawer__nav a { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: var(--fw-bold); color: var(--ink); text-decoration: none; }
.drawer__nav .ico { width: 16px; height: 16px; color: var(--blue); }
.drawer__cta { display: grid; gap: 12px; margin-top: 28px; }
.drawer__sub { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 20px; }
.drawer__sub a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: var(--fw-bold); color: var(--blue); text-decoration: none; }
.drawer__sub .ico { width: 16px; height: 16px; }
@media (min-width: 1025px) { .drawer { display: none; } }

/* --------------------------------------------------------------------------
   ① ファーストビュー（地は BLUE。左の列に言葉とボタン、右に製品画面の画像。
   ボタンとログインのリンクは左の列のリードの下に左寄せで置く。
   画像は FINANCIAL BOARD のダッシュボードの窓に、BOARD AI のスマホを右下で重ねたもの）
   -------------------------------------------------------------------------- */
.fv { position: relative; background: var(--blue); color: var(--on-dark); overflow: hidden; }
.fv__body {
  max-width: var(--maxw); margin-inline: auto;
  padding: 56px var(--pad) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
}
/* 正式名称（先方の依頼で FV の最初の行に置く）。ロゴと同じ大文字で、ロゴの字間の広い文字に合わせて少し空ける。リードと見出しより小さくして主役を取らない */
.fv__name { margin-bottom: 16px; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: .12em; color: var(--on-dark-mute); }
.fv__lead { font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: 1.6; color: var(--on-dark); }
.fv__title { margin-top: 12px; font-size: var(--fs-hero); line-height: var(--lh-hero); }
/* 「ゼロ」だけ大きくして斜めに起こす（引用符は付けない）。斜めにした分だけ右の「に」との間を空ける */
.fv__title .zero { display: inline-block; font-size: 1.36em; line-height: 1; transform: skewX(-12deg); margin-right: .06em; }
.fv__note { margin-top: 20px; max-width: 34em; font-size: 16px; line-height: 1.8; color: var(--on-dark); }
.fv__ctas { margin-top: 32px; }
.fv__login { margin-top: 12px; }
.fv__visual { margin: 0; }
.fv__visual img { width: 100%; max-width: 576px; margin-left: auto; }
.fv__visual .img-note { margin-top: 4px; text-align: right; line-height: 1.4; color: var(--on-dark); }

/* 画面の高さが低いノートPC（1280×720 など）でもボタンが最初の画面に入るように、上下の余白を詰める */
@media (min-width: 861px) and (max-height: 760px) {
  .fv__body { padding-top: 32px; padding-bottom: 40px; }
}
@media (max-width: 1100px) {
  .fv__body { gap: 32px; }
}
/* 860px 以下: 言葉 → ボタン → 画像を縦に。すべて左寄せ */
@media (max-width: 860px) {
  .fv__body { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; padding-bottom: 40px; }
  .fv__text, .fv__visual { max-width: 560px; width: 100%; margin-inline: auto; }
  .fv__visual img { margin-inline: auto; }
}
@media (max-width: 680px) {
  .fv__title { font-size: 30px; }
  .fv__lead { font-size: 18px; }
  .fv__note { font-size: 15px; }
  .fv__ctas { flex-direction: column; margin-top: 28px; }
  .fv__ctas .btn--duo { flex-basis: auto; max-width: none; }
}

/* --------------------------------------------------------------------------
   セクション共通（見出しは中央。下にロゴの色と線から作った短い線: BLUE 28px と TEAL 8px、太さ 4・両端が丸い。
   線はセクションの見出しだけ。青地・資料請求の帯・フォームの見出しには付けない）
   -------------------------------------------------------------------------- */
.sec { padding-block: var(--sec-y); }
.sec--tint { background: var(--tint); }
.sec--blue { background: var(--blue); color: var(--on-dark); }
.sec-head { text-align: center; margin-bottom: var(--head-gap); }
.sec-head__label { margin-bottom: 8px; font-size: 16px; font-weight: var(--fw-bold); color: var(--mute); }
.sec-head__title { position: relative; padding-bottom: 16px; font-size: var(--fs-h2); line-height: 1.4; }
.sec-head__title::before, .sec-head__title::after { content: ""; position: absolute; bottom: 0; height: 4px; border-radius: 2px; }
.sec-head__title::before { left: calc(50% - 20px); width: 28px; background: var(--blue); }
.sec-head__title::after { left: calc(50% + 12px); width: 8px; background: var(--teal); }
.sec-head__lead { margin: 20px auto 0; max-width: var(--lead-max); font-size: 16px; line-height: 1.8; color: var(--text); }   /* 中央にそろえるのは2行まで。3行になる長さの文は置かない */
@media (max-width: 680px) {
  .sec-head__lead { margin-top: 16px; text-align: left; }
  .sec-head:has(.sec-head__lead) { margin-bottom: 28px; }
}

/* 小見出し（セクションの中の2つ目以降のまとまり） */
.sub-title { font-size: var(--fs-h3); line-height: 1.45; text-align: center; }
.sub-lead { margin: 16px auto 0; max-width: var(--lead-max); font-size: 16px; line-height: 1.8; }

/* --------------------------------------------------------------------------
   ② BPSで実現できること（悩みと解決を1行ずつ対にする。悩みは地を付けず、
   解決とはロゴの線（中抜きの丸から出る線）でつなぐ。線の色は解決する製品の色）
   -------------------------------------------------------------------------- */
.solve { display: grid; gap: 20px; max-width: 1040px; margin-inline: auto; }
.solve__row { display: grid; grid-template-columns: minmax(0, 380fr) 80px minmax(0, 576fr); align-items: center; }
.solve__pain { padding-right: 8px; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.7; color: var(--ink); }
.solve__wire { justify-self: center; width: 64px; height: 24px; color: var(--blue); overflow: visible; }
.solve__wire--ai { color: var(--ai-ink); }
.solve__ans { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 24px; padding: 14px 24px 14px 14px; border-radius: var(--r-card); }
.solve__ans--fb { background: var(--fb-soft); }
.solve__ans--ai { background: var(--ai-soft); }
.solve__img { width: 160px; border-radius: var(--r-sm); }
.solve__title { font-size: 20px; line-height: 1.5; }
.solve__more { margin-top: 2px; }
@media (max-width: 860px) {
  .solve { gap: 32px; max-width: 560px; }
  .solve__row { grid-template-columns: 1fr; justify-items: start; }
  .solve__pain { padding-right: 0; font-size: 16px; }
  .solve__wire { justify-self: start; margin: 10px 0 10px 4px; transform: rotate(90deg); transform-origin: 12px 12px; width: 40px; height: 24px; }
  .solve__ans { width: 100%; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px 16px 12px 12px; }
  .solve__img { width: 112px; }
  .solve__title { font-size: 18px; }
}
@media (max-width: 680px) {
  .solve__ans { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .solve__img { width: 96px; }
}

/* --------------------------------------------------------------------------
   ③ BPSの2つのサービス（カードの上の面にロゴと、窓の枠に入れた画面。下に説明と機能。
   2枚はロゴと同じ「線＋中抜きの丸」でつなぐ（BLUE → TEAL）。間の文字は「基本企業情報と／財務データを連携」の2行に固定。
   ロゴは幅 200px、周りに高さの 1/2 以上をあける＝FINANCIAL BOARD 44px・BOARD AI 53px → 左 56px・面の高さ 216px）
   -------------------------------------------------------------------------- */
.lineup { display: grid; grid-template-columns: minmax(0, 1fr) 136px minmax(0, 1fr); row-gap: 24px; }   /* 間の列は「財務データを連携」（14px×8字）が1行に入る幅 */
.svc { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--paper); overflow: hidden; }
.svc__top { position: relative; height: 216px; background: var(--fb-soft); }
.svc--ai .svc__top { background: var(--ai-soft); }
.svc__logo { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); width: 200px; }
.svc__logo img { width: 200px; height: auto; }
.svc__win { position: absolute; right: 0; bottom: 0; width: calc(100% - 312px); max-width: 240px; height: 176px; border-right: 0; border-bottom: 0; border-radius: var(--r-md) 0 0 0; }   /* 右と下はカードの端で切る。ロゴとの間は 56px 以上 */
.svc__win img { height: 100%; object-fit: cover; object-position: left top; }
.svc--fb .svc__win img { width: 154.8%; max-width: none; height: auto; }   /* 画面の左から 310px（売上高の列と売上総利益の列の間）で切る＝480÷310 */
.svc__body { flex: 1; display: flex; flex-direction: column; padding: 28px 32px 24px; }
.svc__tag { align-self: flex-start; padding: 2px 8px; border-radius: var(--r-sm); background: var(--fb-soft); font-size: 14px; font-weight: var(--fw-bold); line-height: 1.6; color: var(--navy); }
.svc--ai .svc__tag { background: var(--ai-soft); color: var(--ai-ink); }
.svc__text { margin-top: 12px; font-size: 17px; line-height: 1.8; color: var(--ink); }
.svc__body .checks { margin-top: 16px; }
.svc__more { margin-top: auto; padding-top: 16px; }
.lineup__link { display: grid; justify-items: center; align-content: start; gap: 12px; padding-top: 96px; text-align: center; }
.lineup__wire { width: 112px; height: 24px; overflow: visible; }
.lineup__wire--v { display: none; }
.lineup__label { padding-inline: 4px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.lineup__base { grid-column: 1 / -1; padding: 16px 24px; border-radius: var(--r-card); background: var(--blue-100); font-size: 18px; font-weight: var(--fw-bold); line-height: 1.5; color: var(--navy); text-align: center; }
@media (max-width: 1100px) {
  .lineup { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; row-gap: 0; }
  .lineup__link { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; padding: 0 0 0 44px; }
  .lineup__wire--h { display: none; }
  .lineup__wire--v { display: block; width: 24px; height: 56px; }
  .lineup__label br { display: none; }
  .lineup__base { margin-top: 24px; }
}
@media (max-width: 680px) {
  .svc__top { height: auto; }
  .svc__logo { position: static; transform: none; margin: 53px auto; }
  .svc__win { display: none; }   /* 幅が足りずロゴの余白が取れないので、スマホは画面を出さない */
  .svc__body { padding: 24px 20px 20px; }
  .svc__text { font-size: 16px; }
  .lineup__link { padding-left: 32px; }
}

/* --------------------------------------------------------------------------
   途中の資料請求の帯（BLUE の地。PC は左に見出しと1文、右にボタン2つ。スマホは縦に積む）
   -------------------------------------------------------------------------- */
.band { background: var(--blue); color: var(--on-dark); padding-block: 48px; }
.band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; gap: 24px 48px; }
.band__title { font-size: 28px; line-height: 1.45; color: var(--on-dark); }
.band__text { max-width: var(--text-max); margin-top: 12px; font-size: 16px; line-height: 1.8; color: var(--on-dark); }
.band__btns { justify-content: flex-end; }
.band__btns .btn--duo { flex-basis: 248px; max-width: 272px; }
@media (max-width: 1000px) {
  .band__in { grid-template-columns: 1fr; }
  .band__btns { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .band { padding-block: 40px; }
  .band__title { font-size: 22px; }
  .band__btns { flex-direction: column; }
  .band__btns .btn--duo { flex-basis: auto; max-width: none; }
}

/* --------------------------------------------------------------------------
   ④ FINANCIAL BOARD の機能
   -------------------------------------------------------------------------- */
/* 入力 → 出力の図（入力の2つは「＋」、出力へは矢印。入力は面なし、出力だけ製品の淡い面） */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px 300px; align-items: center; gap: 24px; max-width: 1080px; margin: 0 auto 80px; }
.flow__in { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1.3fr); align-items: center; gap: 16px; }
.flow__title { font-size: 18px; line-height: 1.5; }
.flow__item p { margin-top: 4px; font-size: 16px; line-height: 1.7; color: var(--text); }
.flow__plus { font-size: 28px; font-weight: var(--fw-bold); line-height: 1; color: var(--navy); text-align: center; }
.flow__arrow { width: 32px; height: 32px; color: var(--navy); }
.flow__out { padding: 24px; border-radius: var(--r-card); background: var(--fb-soft); font-size: 18px; font-weight: var(--fw-bold); line-height: 1.6; color: var(--ink); text-align: center; }
@media (max-width: 1000px) {
  .flow { grid-template-columns: 1fr; justify-items: center; gap: 12px; max-width: 560px; margin-bottom: 56px; }
  .flow__in { grid-template-columns: 1fr; gap: 8px; justify-items: center; text-align: center; }
  .flow__arrow { transform: rotate(90deg); }
  .flow__out { width: 100%; }
}

/* 特長（文と画面を左右に置き、偶数行は入れ替える。文の列は画面の上端にそろえる。
   番号は BLUE の数字だけ。機能の名前は画面の画像に重ねず、札も付けない（同じ言葉は本文にある）） */
.points { display: grid; gap: 72px; }
.point {
  display: grid; column-gap: 56px;
  grid-template-columns: minmax(0, 520fr) minmax(0, 584fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "head fig" "body fig" ". fig";
}
.point:nth-child(even) { grid-template-columns: minmax(0, 584fr) minmax(0, 520fr); grid-template-areas: "fig head" "fig body" "fig ."; }
.point__head { grid-area: head; padding-top: 20px; }
.point__fig { grid-area: fig; margin: 0; }
.point__body { grid-area: body; }
.point__num { font-size: 20px; font-weight: var(--fw-bold); line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.point__title { margin-top: 10px; font-size: var(--fs-h3); line-height: 1.45; }
.point__body p { margin-top: 16px; max-width: 30em; font-size: 16px; line-height: 1.8; }
@media (max-width: 860px) {
  .points { gap: 56px; max-width: 580px; margin-inline: auto; }
  .point, .point:nth-child(even) { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "head" "fig" "body"; }
  .point__head { padding-top: 0; }
  .point__fig { margin-top: 20px; }
  .point__body p { max-width: none; }
}

/* --------------------------------------------------------------------------
   ⑤ BOARD AI の機能
   -------------------------------------------------------------------------- */
.ai-hero { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 552fr); gap: 56px; align-items: center; margin-bottom: 72px; }
.ai-hero__fig { margin: 0; }
.ai-hero__title { font-size: var(--fs-h3); line-height: 1.45; }
.ai-hero__who { margin-top: 16px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.8; color: var(--ink); }
.ai-hero__body { margin-top: 16px; max-width: 30em; font-size: 16px; line-height: 1.8; }

/* 3つの機能（面は付けない。AIサポートを左の広い列、トリアージと専門家紹介を右に重ねる） */
.ai-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; align-items: start; }
.ai-feat--main { grid-row: span 2; }
.ai-feat__fig { margin: 0; }
.ai-feat__title { margin-top: 20px; font-size: 22px; line-height: 1.45; }
.ai-feat__text { margin-top: 8px; font-size: 16px; line-height: 1.8; }
.ai-feat__ex-title { margin-top: 16px; font-size: 16px; font-weight: var(--fw-bold); color: var(--ink); }
.ai-feat__ex { margin-top: 4px; display: grid; gap: 2px; }
.ai-feat__ex li { padding-left: 1em; text-indent: -1em; font-size: 16px; line-height: 1.8; color: var(--text); }
@media (max-width: 860px) {
  .ai-hero { grid-template-columns: 1fr; gap: 24px; max-width: 580px; margin-inline: auto; margin-bottom: 56px; }
  .ai-feats { grid-template-columns: 1fr; max-width: 580px; margin-inline: auto; gap: 48px; }
  .ai-feat--main { grid-row: auto; }
}
@media (max-width: 680px) {
  .ai-feat__title { font-size: 20px; }
  /* 相談相手の名前が長いので、スマホでは少し小さくして行数を抑える（上の見出しより重く見せない） */
  .ai-hero__who { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   ⑥ 選ばれる理由
   -------------------------------------------------------------------------- */
/* メリット（淡い青の地に白いカード。角丸 8・影なし・padding 28px 24px。
   図は BPS のロゴの線で描いた 360×220（幅いっぱい・最大 320px）。6点とも線を含めて 280×150 の中に収め、大きさと線の量をそろえている。
   その下に見出し 20px を左寄せ。
   PC は3列のうち左の1列に FINANCIAL BOARD の2枚、右の2列に BOARD AI の4枚（2×2）を置く。
   2つの製品の間だけ 32px あけて、どこまでがどちらの製品のメリットか分かるようにする） */
.reasons { display: grid; grid-template-columns: calc((100% - 52px) / 3) minmax(0, 1fr); gap: 40px 32px; }   /* 左の列の幅＝右のカード1枚の幅（間 32＋20） */
.reasons__name { font-size: 20px; line-height: 1.4; text-align: left; }
.reasons__list { display: grid; gap: 20px; margin-top: 16px; }
.reasons__group--ai .reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reason { display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--r-card); background: var(--paper); }
.reason__fig { width: 100%; max-width: 320px; height: auto; margin-inline: auto; }
.reason__title { margin-top: 20px; font-size: 20px; line-height: 1.5; }
/* 3列で図が窮屈になる幅（1180px 未満）は2列: FINANCIAL BOARD の2枚を横に、その下に BOARD AI の4枚を 2×2 */
@media (max-width: 1179px) {
  .reasons { grid-template-columns: minmax(0, 1fr); }
  .reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .reasons { row-gap: 32px; }
  .reasons__list, .reasons__group--ai .reasons__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .reason { padding: 20px; }
  .reason__title { margin-top: 12px; font-size: 18px; }
}

.compare-block { margin-top: 96px; }
.compare-head { text-align: center; }
.compare-head .sub-lead { text-align: left; }

/* 専門家と個別に契約した場合の目安（面は付けず、足し算の式だけ。スマホは1行に1項目） */
.cost { margin-top: 36px; display: grid; justify-items: center; gap: 12px; }
.cost__label { font-size: 16px; font-weight: var(--fw-bold); color: var(--ink); }
.cost__list { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 0; }
.cost__list li { display: flex; align-items: baseline; gap: 8px; font-size: 16px; color: var(--text); }
.cost__op { min-width: 0; margin: 0 14px; font-size: 20px; font-weight: var(--fw-bold); color: var(--navy); }
.cost__list li:first-child .cost__op { display: none; }
.cost__list b { font-size: 22px; font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
.cost__sum b { font-size: 26px; }
@media (max-width: 680px) {
  .cost { justify-items: start; }
  .cost__list { display: grid; gap: 4px; }
  .cost__list li { display: grid; grid-template-columns: 1.6em 5em auto; align-items: baseline; gap: 0; }
  .cost__op { margin: 0; }
  .cost__list li:first-child .cost__op { display: block; }
  .cost__list b { text-align: right; }
  .cost__sum { margin-top: 4px; }
}

/* 比較表（横の罫だけ。BOARD AI の列は淡い TEAL の地で分ける） */
.compare-wrap { margin-top: 36px; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare col.c-label { width: 16%; }
.compare th, .compare td { padding: 18px 20px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; line-height: 1.6; }
.compare thead th { padding-block: 16px; font-size: 16px; font-weight: var(--fw-bold); color: var(--ink); border-bottom: 2px solid var(--navy); }
.compare thead .is-pick { color: var(--ai-ink); }
.compare__corner { border-bottom: 2px solid var(--navy) !important; }
.compare tbody th { font-size: 16px; font-weight: var(--fw-bold); color: var(--ink); text-align: left; }
.compare .is-pick { background: var(--ai-soft); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare .num { font-size: 18px; font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compare .mark { font-size: 22px; line-height: 1.2; font-weight: var(--fw-bold); color: var(--ink); }
.compare__sum th { vertical-align: top; }
.compare__sum td { text-align: left; vertical-align: top; font-size: 16px; line-height: 1.8; }
.compare-sums { display: none; }
.compare__note { margin-top: 12px; }
/* 860px 以下: 総括の行を表の外に出し、表は4行だけにする（iPad の縦も含む） */
@media (max-width: 860px) {
  .compare th, .compare td { padding: 14px 8px; }
  .compare col.c-label { width: 20%; }
  .compare__sum { display: none; }
  .compare tbody tr:nth-last-child(2) > * { border-bottom: 0; }
  .compare-sums { display: grid; gap: 20px; margin-top: 28px; }
  .compare-sums dt { font-size: 16px; font-weight: var(--fw-bold); color: var(--ink); }
  .compare-sums dd { margin-top: 4px; font-size: 16px; line-height: 1.8; }
  .compare-sums .is-pick { padding: 16px 18px; border-radius: var(--r-md); background: var(--ai-soft); }
}
@media (max-width: 680px) {
  .compare-head { text-align: left; }
  .compare-head .sub-title { text-align: left; }
  .compare th, .compare td { padding: 12px 3px; }
  .compare col.c-label { width: 19.5%; }
  .compare thead th { font-size: 14px; line-height: 1.5; }
  .compare tbody th { font-size: 14px; padding-left: 0; }
  .compare .num { font-size: 14px; }
  .compare .mark { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   ⑦ 料金（白いカードに、製品名・種別、金額、ボタン、主な機能を左寄せで並べる。
   間は余白だけで区切る。製品の色は金額の数字だけで示し、色の帯や下線は付けない）
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin-inline: auto; }
.plan { display: flex; flex-direction: column; padding: 32px 36px 36px; border-radius: var(--r-card); background: var(--paper); }
.plan__head { padding-bottom: 0; }
.plan__name { font-size: 26px; line-height: 1.3; }
.plan__kind { margin-top: 4px; font-size: 16px; font-weight: var(--fw-bold); line-height: 1.5; color: var(--mute); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 24px; color: var(--ink); white-space: nowrap; }
.plan__per { margin-right: 10px; font-size: 18px; font-weight: var(--fw-bold); }
.plan__num { font-size: clamp(52px, 40px + 2vw, 64px); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan--fb .plan__num { color: var(--blue); }
.plan--ai .plan__num { color: var(--ai-ink); }
.plan__yen { margin-left: 4px; font-size: 22px; font-weight: var(--fw-bold); }
.plan__tax { margin-left: 4px; font-size: 16px; color: var(--mute); }
.plan .btn { margin-top: 24px; }
.plan__feat-title { margin-top: 32px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.5; color: var(--ink); }
.plan .checks { margin-top: 10px; }
.plans__note { margin-top: 20px; text-align: center; }
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; max-width: 480px; gap: 24px; }
}
@media (max-width: 680px) {
  .plan { padding: 28px 20px 32px; }
  .plan__name { font-size: 22px; }
  .plan__num { font-size: 48px; }
  .plan__per { margin-right: 6px; font-size: 16px; }
  .plan__yen { font-size: 20px; }
  .plans__note { text-align: left; }
}
/* 375px 未満: BOARD AI の「（税別）」が次の行に落ちないように、金額を少し小さくする */
@media (max-width: 374px) {
  .plan__num { font-size: 44px; }
}

/* --------------------------------------------------------------------------
   ⑧ よくある質問（全問を開いたまま。問と問の間は余白だけで分け、線や帯は付けない。「Q.」は BLUE の文字）
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 40px; max-width: 960px; margin-inline: auto; }
.faq dt { position: relative; padding-left: 40px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.6; color: var(--ink); }
.faq__q { position: absolute; left: 0; top: -1px; font-size: 20px; font-weight: var(--fw-bold); line-height: 1.5; color: var(--blue); }
.faq dd { max-width: calc(var(--text-max) + 40px); padding: 10px 0 0 40px; font-size: 16px; line-height: 1.8; }
@media (max-width: 680px) {
  .faq { gap: 32px; }
  .faq dt { padding-left: 32px; font-size: 16px; }
  .faq__q { font-size: 18px; top: -2px; }
  .faq dd { padding: 8px 0 0 32px; }
}

/* --------------------------------------------------------------------------
   ⑨ 資料請求・お問い合わせ（BLUE の面に白いフォーム。
   送信ボタンはフォームの中の主ボタンなので、どちらの用件でも資料請求の色。フォームは白いカードなので白地の値）
   -------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.contact__title { font-size: var(--fs-h2); line-height: 1.4; }
.contact__lead { margin-top: 20px; font-size: 16px; line-height: 1.8; color: var(--on-dark); }
.contact__kinds { margin-top: 28px; display: grid; gap: 16px; }
.contact__kinds dt { font-size: 16px; font-weight: var(--fw-bold); }
.contact__kinds dd { font-size: 16px; color: var(--on-dark); line-height: 1.7; }
.contact__login { margin-top: 20px; }

.form-card { padding: 36px 40px; border-radius: var(--r-card); background: var(--paper); color: var(--text); --focus: var(--navy); }
.form-card :focus-visible { outline-color: var(--navy); }
.seg__legend { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0; font-size: 16px; font-weight: var(--fw-bold); color: var(--ink); }
/* ご用件の切り替え（角丸 8 の切り替え）: 選んだ方を NAVY の地に白の文字で示す（チェックボックスの印と同じ「選択中」の色）。
   資料請求の色は送信ボタンだけに使い、同じ色がフォームの中に2つ並ばないようにする */
.seg__opts { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: var(--r-md); background: var(--gray); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label > span { display: flex; align-items: center; justify-content: center; height: 44px; border: 2px solid transparent; border-radius: 6px; font-size: 16px; font-weight: var(--fw-bold); color: var(--text); transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.seg input:checked + span { background: var(--selected); border-color: var(--selected); color: var(--on-dark); }
.seg input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.field { display: grid; align-content: start; gap: 6px; margin-top: 20px; }   /* 隣の欄にエラーが出て行が高くなっても、見出しの位置を上にそろえる */
.field__label { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: var(--fw-bold); color: var(--ink); }
.req, .opt { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 14px; font-weight: var(--fw-bold); line-height: 1.6; }
.req { background: var(--negative); color: var(--on-dark); }
.opt { background: var(--gray); color: var(--mute); }
.input { width: 100%; height: var(--ctl-h); padding: 0 14px; border: 1px solid var(--line-control); border-radius: var(--r-sm); background: var(--paper); font-size: 16px; color: var(--ink); transition: border-color var(--t-fast) var(--ease); -webkit-appearance: none; appearance: none; }
textarea.input { height: auto; min-height: 132px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
.input::placeholder { color: var(--mute); opacity: 1; }
@media (hover: hover) { .input:hover { border-color: var(--text); } }
.input:focus-visible { border-color: var(--navy); outline: 2px solid var(--navy); outline-offset: -2px; }
.input[aria-invalid="true"] { border-color: var(--negative); background: var(--negative-soft); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: var(--fw-bold); color: var(--negative); line-height: 1.5; word-break: auto-phrase; text-wrap: pretty; }   /* 文は form.js が入れるので <wbr> がない。文節で折り返す（Chrome・Edge。Safari は通常の折り返し） */
.field__error[hidden] { display: none; }
.field__error::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--negative); color: var(--on-dark); font-size: 11px; line-height: 1; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field--check { margin-top: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-block: 8px; font-size: 16px; line-height: 1.6; cursor: pointer; }
.check > span { display: block; }
.check .req { margin-left: 8px; vertical-align: 1px; }
.check input { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--line-control); border-radius: var(--r-sm); background: var(--paper); display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--navy); border-color: var(--navy); }
.check input:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--on-dark); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.check input[aria-invalid="true"] { border-color: var(--negative); background: var(--negative-soft); }
.check a { color: var(--link); text-underline-offset: 3px; font-weight: var(--fw-bold); padding-block: 12px; margin-block: -12px; }   /* 見た目は変えずに、押せる範囲だけ上下に広げる */
.form-card__submit { margin-top: 20px; min-height: 60px; font-size: 18px; }
.form-card__status { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--negative-soft); color: var(--negative); font-size: 14px; font-weight: var(--fw-bold); line-height: 1.7; }
.form-card__status:empty { display: none; }
.form-card__note { margin-top: 12px; font-size: 14px; color: var(--mute); text-align: center; line-height: 1.7; }
@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; gap: 32px; max-width: 640px; margin-inline: auto; }
  .contact__kinds { display: none; }   /* フォームの切り替え（ご用件）が最初の画面に入るように */
}
@media (max-width: 680px) {
  .form-card { padding: 28px 20px; }
  .check { font-size: 15px; }   /* 390px で「プライバシーポリシーに同意する 必須」を1行に収める */
  .row2 { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------------------------
   ⑩ フッター（上は淡いグレーの地にロゴと項目、下は NAVY の地に規約のリンクと ©）
   ロゴは明るい地の上だけに置く。幅 200px のとき高さ 75px → 周りに 38px 以上
   -------------------------------------------------------------------------- */
.ftr__main { background: #F4F5F8; padding-block: 48px 56px; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.ftr__logo { display: inline-block; padding: 0; }
.ftr__logo img { width: 200px; }
.ftr__catch { margin-top: 40px; font-size: 14px; color: var(--mute); }   /* ロゴの高さ 75px の 1/2 以上あける */
.ftr__nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }   /* 運営会社の列は社名を1行で収めるため少し広く */
.ftr__col-title { font-size: 14px; color: var(--mute); }
.ftr__col ul { margin-top: 8px; }
.ftr__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 15px; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .ftr__col a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; } }
.ftr__company-name { margin-top: 12px; font-size: 15px; font-weight: var(--fw-bold); color: var(--ink); }
.ftr__address { margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--text); }
.ftr__sub { background: var(--navy); color: var(--on-dark); padding-block: 24px 28px; }
.ftr__sub-in { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ftr__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 32px; }
.ftr__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: var(--on-dark); text-decoration: none; }
@media (hover: hover) { .ftr__links a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.ftr__links .ico { width: 14px; height: 14px; }
.ftr__copy { font-size: 14px; color: var(--on-dark-mute); }
@media (max-width: 860px) {
  .ftr__grid { grid-template-columns: 1fr; gap: 32px; }
  .ftr__brand { text-align: center; }   /* ロゴの左右にも高さの 1/2（38px）以上をあける */
  .ftr__logo img { margin-inline: auto; }
  .ftr__nav { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .ftr__col--company { grid-column: 1 / -1; }
  .ftr__links { justify-content: flex-start; gap: 0 24px; }
  .ftr__sub-in { justify-items: start; text-align: left; }
  .has-sp-cta .ftr__sub { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }   /* 画面下の資料請求ボタンの分 */
}

/* --------------------------------------------------------------------------
   スマホの画面下の資料請求ボタン（860px 以下。FV・途中の帯・セクションの終わりのボタン2つ・料金カードのボタン・フォームが見えている間は隠す。
   横向きなど高さが 500px 以下の画面では出さない。ボタンは角丸 8・縁なし・影なしの1行）
   -------------------------------------------------------------------------- */
.sp-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sp-cta);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.sp-cta.is-show { transform: none; visibility: visible; transition-delay: 0s; }
.sp-cta .btn { min-height: 56px; font-size: 18px; max-width: 480px; margin-inline: auto; }
@media (max-width: 860px) and (min-height: 501px) { .sp-cta { display: block; } }
@media (max-height: 500px) { .has-sp-cta .ftr__sub { padding-bottom: 28px; } }

/* --------------------------------------------------------------------------
   送信完了ページ
   -------------------------------------------------------------------------- */
.done { background: var(--blue); color: var(--on-dark); padding-block: clamp(64px, 8vw, 112px); }
.done__in { max-width: 720px; margin-inline: auto; text-align: center; }
.done__mark { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 50%; background: var(--paper); color: var(--blue); }
.done__mark svg { width: 34px; height: 34px; }
.done__title { font-size: var(--fs-h2); line-height: 1.4; }
.done__text { margin-top: 24px; font-size: 16px; line-height: 1.9; color: var(--on-dark); text-align: left; }
.done__text p + p { margin-top: 8px; }
.done__text strong { color: var(--on-dark); font-weight: var(--fw-bold); }
.done__actions { margin-top: 36px; display: grid; justify-items: center; gap: 12px; }
.done__actions .btn { min-width: 280px; }
@media (min-width: 681px) { .done__text { text-align: center; } }

/* 320px 程度のとても狭い画面: 解決の行の小さな画面を外し、見出しを1行に収める */
@media (max-width: 359px) {
  .solve__ans { grid-template-columns: minmax(0, 1fr); }
  .solve__img { display: none; }
}