@charset "UTF-8";
/* =================================================================
   トラストゲートウェイ LP  style.css
   -----------------------------------------------------------------
   ★ 見た目の調整は、いちばん上の :root の中だけで行えます。
     値の右に日本語で「何の値か」を書いてあります。
     それより下は :root の値を使って組んでいる部分です（触らない）。
   ★ コンセプト：伝票の3色（罫線＝水色／印字＝紺／捺印＝朱）で組む帳票
   ★ スマホを基準に書き、画面が広くなるほど段組みを足しています（モバイルファースト）
   ================================================================= */

:root {
  /* ---------- 色 ---------- */
  --c-paper: #F3F7FA;          /* ページの地の色（青みの帳票用紙） */
  --c-sheet: #FFFFFF;          /* 記入欄・シート・ヘッダーの白（ロゴはこの白の上にしか置かない） */
  --c-ink: #13213C;            /* 本文の文字色 */
  --c-ink-muted: #3A4860;      /* 注記・補助の文字色（白の上で 9:1 以上） */
  --c-placeholder: #55647D;    /* 入力欄の例文（プレースホルダ）の色（白の上で 6:1） */
  --c-navy: #002A77;           /* ブランド濃紺：見出し・太い罫・FVとシミュレーターの面 */
  --c-navy-hover: #013E8B;     /* 濃紺のボタンにマウスを乗せたとき */
  --c-navy-deep: #001C5C;      /* 濃紺のボタンを押したとき */
  --c-cyan: #01B2ED;           /* ブランドシアン：紺の面の上の小見出し・罫線 */
  --c-rule: #98D1EC;           /* 表・帳票の罫線（伝票の刷り色） */
  --c-field-line: #507FA7;     /* 入力欄の枠線 */
  --c-tint: #E2EDF8;           /* 淡い紺：項目欄の地・選んだラジオの地・自社列の地 */
  --c-accent: #CD3B00;         /* 朱（入金済の印）：申込ボタンと、強調したい数字だけに使う */
  --c-accent-press: #B02C00;   /* 朱：マウスを乗せた／押したとき */
  --c-accent-on-navy: #FF814C; /* 紺の面の上で強調する数字の朱（紺の上で 5.3:1。白地では使わない） */
  --c-error: #AF1B37;          /* 入力エラーの文字 */
  --c-error-tint: #FFEDED;     /* 入力エラーの欄の地 */
  --c-on-navy: #F3F7FA;        /* 紺の面の上の文字 */
  --c-on-navy-muted: #CFE0F6;  /* 紺の面の上の補助の文字（紺の上で 9.8:1） */
  --c-shape-navy: #003984;     /* 紺の面に敷く図形（ロゴの斜めの帯） */
  --c-shape-navy-2: #00488F;   /* 紺の面に敷く図形（細い帯） */
  --c-shape-paper: #DFF2FD;    /* 用紙の地に敷く図形（ロゴの斜めの帯） */
  --c-disabled: #C9D3E0;       /* 押せないボタンの面 */
  --c-disabled-ink: #3A4860;   /* 押せないボタンの文字 */
  --c-selection: #CDEFFC;      /* 文字を選択したときの地 */

  /* ---------- 書体 ---------- */
  /* 和文：各OSの標準ゴシック（iPhone/Mac＝ヒラギノ、Windows＝BIZ UDPゴシック、Android＝端末標準） */
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif;
  /* 数字：各OSの標準DIN（iPhone/Mac＝DIN Alternate、Windows＝Bahnschrift、Android＝Roboto Condensed） */
  --font-num: "DIN Alternate", "Bahnschrift", "Roboto Condensed", "sans-serif-condensed", var(--font-ja);

  /* ---------- 文字の大きさ（左＝スマホ、右＝PCの上限） ---------- */
  --fs-note: 0.8125rem;                                   /* 注記（※1 など）13px */
  --fs-ph: 0.6875rem;                                     /* 画像の仮枠の中のラベル 11px（画像が揃えば消える） */
  --fs-small: 0.9375rem;                                  /* 小さい文字・項目名 15px */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);    /* 本文 16→17px */
  --fs-input: 1.0625rem;                                  /* 入力欄の文字 17px（16px未満にするとiPhoneで拡大される） */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* リード文 17→20px */
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);    /* 小見出し 19→22px */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);        /* セクション見出し 24→36px */
  --fs-display: clamp(1.75rem, 0.95rem + 4.4vw, 4rem);    /* FVの大見出し 28(狭いスマホ)→32(375px)→64px */
  --fs-num-m: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);   /* 数字・中 26→36px */
  --fs-num-l: clamp(1.75rem, 0.9rem + 3.6vw, 3.5rem);     /* 数字・大（FVの24時間と手数料）28→56px */
  --fs-num-xl: clamp(5.5rem, 2.6rem + 12vw, 10.5rem);     /* 数字・特大（シミュレーター結果）88→168px */

  --lh-body: 1.85;       /* 本文の行間 */
  --lh-small: 1.7;       /* 小さい文字の行間 */
  --lh-compact: 1.5;     /* FVの実績・注記など、詰めて組む小さい文字の行間 */
  --lh-heading: 1.4;     /* 見出しの行間 */
  --lh-display: 1.18;    /* FV大見出しの行間 */
  --lh-num: 1;           /* 数字の行間 */
  --ls-body: 0.04em;     /* 本文の字間 */
  --ls-small: 0.05em;    /* 小さい文字の字間 */
  --ls-heading: 0.02em;  /* 見出しの字間 */
  --ls-display: 0.01em;  /* FV大見出しの字間 */
  --ls-button: 0.08em;   /* ボタンの字間 */
  --fw-regular: 400;     /* 本文の太さ */
  --fw-bold: 700;        /* 見出し・強調の太さ */
  --fw-heavy: 800;       /* FV大見出しの太さ */
  --measure: 38em;       /* 本文1行の最大幅（約36字） */
  --measure-lead: 46em;  /* リード文1行の最大幅（PCで不自然に折り返さない長さ） */

  /* ---------- 余白（4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128px） ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --space-section: clamp(4rem, 2.6rem + 6vw, 8rem);  /* セクションとセクションの間 64→128px */
  --page-margin: clamp(1rem, 0.4rem + 3vw, 2.5rem);  /* 画面の左右の余白 16→40px */
  --gutter: clamp(1rem, 0.7rem + 1vw, 1.5rem);        /* 段と段の間 16→24px */
  --container: 70rem;                                 /* 中身の最大幅 1120px */
  --container-narrow: 60rem;                          /* 表など狭めの最大幅 960px */

  /* ---------- 形 ---------- */
  --radius-0: 0;               /* 紙（帳票・表・シート・コマ枠）の角：切りっぱなし */
  --radius-field: 3px;         /* 入力欄・ラジオの角 */
  --radius-voice: 24px;        /* 吹き出しの角（人の声だけが丸い） */
  --radius-round: 50%;         /* 丸（声の業種アイコン・リストの印） */
  --slant: -12deg;             /* ロゴの縦画の傾き。ボタン・STEP札・背景の帯に使う */
  --slant-inset: 0.1063;       /* 上の傾きで面がはみ出さないための係数（tan12° ÷ 2） */
  --rule: 1px;                 /* 細い罫線の太さ */
  --rule-heavy: 2px;           /* 太い罫線の太さ（合計・見出し帯） */
  --rule-double: 6px;          /* 締切線（二重線）の全体の太さ */
  --focus-width: 3px;          /* キーボード操作時のフォーカス枠の太さ */
  --focus-offset: 3px;         /* フォーカス枠と部品のすき間 */
  --underline-offset: 0.22em;  /* リンクの下線と文字のすき間 */
  --shadow-sheet: 0 1px 2px rgb(0 42 119 / 0.10), 0 12px 32px rgb(0 42 119 / 0.08);  /* 申込書の紙の影 */
  --shadow-slip: 0 2px 4px rgb(0 18 64 / 0.30), 0 24px 48px rgb(0 18 64 / 0.35);     /* 紺の面の上の白い紙の影（明細票・FVの3つの箱） */

  /* ---------- アイコン（自作のSVG一式。線の太さをそろえる） ---------- */
  --icon: 1.25em;              /* ボタン・見出しのアイコンの大きさ（文字に対する比） */
  --icon-stroke: 1.75;         /* アイコンの線の太さ（24マス基準） */
  --icon-shift: -0.18em;       /* 文字の中に置くアイコンの上下位置（光学調整） */

  /* ---------- 部品の寸法 ---------- */
  --tap: 44px;                 /* 指で押せる最小の大きさ */
  --field-h: 52px;             /* 入力欄・ラジオの高さ */
  --btn-h: 52px;               /* 普通のボタンの高さ */
  --btn-h-xl: 60px;            /* 大きいボタン（入力内容を確認する など）の高さ */
  --btn-h-s: 40px;             /* ヘッダーの小さいボタンの高さ */
  --check: 22px;               /* ラジオ・チェックの丸／四角の大きさ */
  --check-dot: 5px;            /* 選んだラジオの丸の中の、白いすき間の太さ */
  --check-icon: 80%;           /* チェックの印の大きさ（四角に対する比） */
  --bullet: 20px;              /* 書類リストの印（紺の丸）の大きさ */
  --bullet-top: 0.85em;        /* 書類リストの印の中心の高さ（1行目の文字の中心に合わせる光学調整） */
  --bullet-check-w: 5px;       /* 書類リストの印の中のチェックの幅 */
  --bullet-check-h: 9px;       /* 書類リストの印の中のチェックの高さ */
  --mark-turn: 45deg;          /* L字を回して作る印（書類リストのチェック、開閉・選択欄の矢印）の回転角 */
  --logo-h: clamp(26px, calc((100vw - 205px) * 0.185), 34px);  /* ヘッダーのロゴの高さ（スマホ）。2026-10-12 約1.3倍に：横幅に入る範囲で最大34px（390px以上で34px、375pxで約31px） */
  --logo-h-narrow: clamp(20px, calc((100vw - 195px) * 0.185), 26px);  /* ヘッダーのロゴの高さ（幅360px未満の小さいスマホ）。2026-10-12 約1.3倍に：横幅に入る範囲で最大26px（340px以上で26px） */
  --logo-h-pc: 52px;           /* ヘッダーのロゴの高さ（PC）。2026-10-12 約1.3倍に（40px→52px） */
  --header-h: 52px;            /* ヘッダーの高さ（スマホ） */
  --header-h-pc: 72px;         /* ヘッダーの高さ（PC） */
  --fv-art-sp: clamp(3.5rem, 100vw - 17.9375rem, 5.5rem);  /* スマホのFV挿絵の大きさ：375px以上で88px。それより狭い画面では画面幅と同じだけ小さくし、見出しの列幅を保つ（大見出しを2行のままにする） */
  --fv-art-tab: 160px;         /* タブレットのFV挿絵の大きさ */
  --fv-art-max: 300px;         /* PCのFV挿絵の最大の大きさ */
  --point-skew-inset: 8px;     /* FVの3つの箱（平行四辺形）の左右の縮め幅（傾きで隣の箱にぶつからないように） */
  --point-num-fit: calc(42cqi - 2rem);    /* FVの箱の数字の上限：画面幅ではなく「箱の中の幅」から決める。375px以上では --fs-num-l がそのまま効き、それより狭い2列の箱でだけ小さくなって ※1 まで台の中に収まる */
  --sec-art-sp: 96px;          /* スマホのセクション挿絵（リードの横）の大きさ */
  --sec-art-narrow: 72px;      /* 幅360px未満のスマホのセクション挿絵の大きさ */
  --sec-art-pc: 240px;         /* PCのセクション挿絵（見出しの横）の大きさ */
  --cta-art-sp: 80px;          /* スマホのCTA帯の挿絵の大きさ */
  --cta-art-pc: 160px;         /* PCのCTA帯の挿絵の大きさ */
  --panel-art-sp: 112px;       /* スマホの3コマの中の挿絵の大きさ */
  --panel-art-w: 15rem;        /* PCの3コマの中の挿絵の最大幅 */
  --connector: 12px;           /* 3コマの間の矢印の大きさ */
  --privacy-h: 18rem;          /* 個人情報保護方針パネルの高さ（中はスクロール） */
  --legend-w: 10rem;           /* PCの申込書の項目欄（左の列）の幅 */
  --tail: 18px;                /* 吹き出しのしっぽの大きさ */
  --voice-icon: 44px;          /* 声の業種アイコンの丸の大きさ */
  --voice-glyph: 24px;         /* 声の業種アイコンの絵の大きさ */
  --carousel-btn-w: 56px;      /* 声の送りボタンの幅 */
  --faq-mark: 2rem;            /* よくある質問の Q / A の幅 */
  --zip-w: 9.5em;              /* 郵便番号の入力欄の幅 */
  --amount-w: 11em;            /* 調達希望額の入力欄の幅 */
  --btn-min-w: 60%;            /* PCで中央に置くボタンの最小幅（シートに対する比） */
  --thanks-art-w: 12rem;       /* 完了画面の挿絵の最大幅 */
  --compare-th-w: 22%;         /* 比較表：項目名の列の幅（PC） */
  --compare-us-w: 42%;         /* 比較表：トラストゲートウェイの列の幅（PC） */

  /* ---------- 背景の帯（ロゴの斜めの帯を大きく敷いたもの） ---------- */
  --band-w: 40%;               /* 用紙の地の帯の幅 */
  --band-h: 70%;               /* 用紙の地の帯の高さ */
  --band-right: -6%;           /* 用紙の地の帯の右端の位置（マイナスで画面の外へ） */
  --fv-band-w: 44%;            /* FVの太い帯の幅 */
  --fv-band-right: -12%;       /* FVの太い帯の右端の位置 */
  --fv-band2-w: 6%;            /* FVの細い帯の幅 */
  --fv-band2-right: 36%;       /* FVの細い帯の右端の位置 */

  /* ---------- 段組み ---------- */
  --cols-fv: minmax(0, 8fr) minmax(0, 4fr);           /* FV：文字 8 ／ 挿絵 4 */
  --cols-apply: minmax(0, 8fr) minmax(0, 4fr);        /* 申込：申込書 8 ／ 書類と電話 4 */
  --cols-sim: minmax(0, 5fr) minmax(0, 7fr);          /* シミュレーター：選択 5 ／ 明細票 7 */
  --cols-reasons: minmax(0, 7fr) minmax(0, 5fr);      /* 選ばれる理由：主 7 ／ 副 5 */
  --cols-faq: minmax(0, 4fr) minmax(0, 8fr);          /* よくある質問：見出し 4 ／ 問答 8 */
  --voice-col: 86%;                                   /* 声のカード1枚の幅（スマホ：次のカードが少し見える） */
  --voice-col-tab: calc((100% - var(--gutter)) / 2);  /* 声のカード1枚の幅（タブレット：2枚） */
  --voice-col-pc: calc((100% - var(--gutter) * 2) / 3); /* 声のカード1枚の幅（PC：3枚） */

  /* ---------- 動き ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* 出てくる・開く動き */
  --dur-micro: 140ms;          /* ホバー・押下 */
  --dur-ui: 240ms;             /* 開閉・締切線 */

  /* ---------- 重なり順 ---------- */
  --z-header: 10;
  --z-skip: 30;
}

/* 画面幅による切り替え点（CSSの仕様上、ここだけは :root の値を使えません）
   360px＝小さいスマホ、600px＝大きめのスマホ／タブレット縦、900px＝PCの段組み、1200px／1280px＝広いPC */

/* =================================================================
   1. 土台
   ================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;               /* 横スクロールを明示的に防ぐ（clip は固定ヘッダーを壊さない） */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-3));   /* 固定ヘッダーの下にアンカー先を出す */
}
@media (min-width: 900px) {
  html { scroll-padding-top: calc(var(--header-h-pc) + var(--sp-4)); }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  line-break: strict;
  overflow-wrap: break-word;
  font-kerning: normal;
}

h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
table { border-collapse: collapse; }
em { font-style: normal; }

a {
  color: var(--c-navy);
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule);
  text-underline-offset: var(--underline-offset);
}
a:hover { text-decoration-thickness: var(--rule-heavy); }

::selection { background: var(--c-selection); color: var(--c-ink); }

:focus-visible {
  outline: var(--focus-width) solid var(--c-navy);
  outline-offset: var(--focus-offset);
}

/* 画面には出さず、読み上げには残す（1px は定番の手法の値） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-navy);
  color: var(--c-on-navy);
  font-weight: var(--fw-bold);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.wrap {
  width: min(100% - var(--page-margin) * 2, var(--container));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--page-margin) * 2, var(--container-narrow)); }

.section { padding-block: var(--space-section); }

/* アイコン（自作のSVG一式） */
.icon-sprite { display: none; }
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon);
  height: var(--icon);
  vertical-align: var(--icon-shift);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 数字（DIN） */
.num {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}
.nowrap { white-space: nowrap; }

/* 文節改行：<wbr> を入れた短い文は、その位置でだけ改行する（iPhoneのSafariでも同じ結果になる方法）。
   1つの文節が入りきらないときだけ、文字の途中で折り返す（横スクロールを出さない） */
.sec-title, .page-title, .receipt__note, .fv__title, .fv__sub, .point__desc, .compare th, .compare td, .apply__legend,
.docs__title, .docs__lead, .docs__foot, .checklist li, .faq__qtext, .lane-step__old, .lane-step__new,
.slip__note, .note, .reason-main__title, .reason-sub__title, .cta-band__text, .consent__text, .fv__kicker,
.sec-lead--phrase, .company__row dd {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 行の長さをそろえる見出し（text-wrap: balance）は、anywhere だと文字の途中まで改行候補にしてしまうため break-word にする */
.sec-title, .page-title, .reason-main__title, .reason-sub__title { overflow-wrap: break-word; }

/* 見出しの組版 */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 段組みの列は中身より狭くなってよい（狭い画面で横にはみ出さない） */
  gap: var(--sp-4);
  margin-block-end: var(--sp-7);
}
.sec-title {
  color: var(--c-navy);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: "palt";
  text-wrap: balance;
}
.sec-lead {
  max-width: var(--measure-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  text-wrap: pretty;          /* 長い文は通常の改行（禁則処理つき）に任せ、最後の行が短くなりすぎないようにする */
}
/* 見出しの横に挿絵を置く見出し（スマホはリードの右、PCは見出しの右） */
.sec-head--art {
  grid-template-columns: minmax(0, 1fr) var(--sec-art-sp);
  grid-template-areas:
    "title title"
    "lead art";
  column-gap: var(--sp-3);
  align-items: start;
}
.sec-head--art .sec-title { grid-area: title; }
.sec-head--art .sec-lead { grid-area: lead; }
.sec-head--art .sec-art { grid-area: art; }
@media (max-width: 359px) {
  .sec-head--art { grid-template-columns: minmax(0, 1fr) var(--sec-art-narrow); }
}
@media (min-width: 900px) {
  .sec-head--art {
    grid-template-columns: minmax(0, 1fr) var(--sec-art-pc);
    grid-template-areas:
      "title art"
      "lead art";
    column-gap: var(--sp-7);
    align-items: center;
  }
}

.prose { max-width: var(--measure); text-wrap: pretty; }
.prose > * + * { margin-block-start: var(--sp-4); }
.note {
  color: var(--c-ink-muted);
  font-size: var(--fs-note);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-heading);
}

/* 背景の帯（ロゴの横画の傾きを大きく敷く。内容の後ろに置き、はみ出しは切る） */
.has-band { position: relative; isolation: isolate; overflow: clip; }
.has-band::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--band-right);
  z-index: -1;
  width: var(--band-w);
  height: var(--band-h);
  background: var(--c-shape-paper);
  transform: skewX(var(--slant));
  transform-origin: top right;
}

/* =================================================================
   2. ボタン（面だけをロゴの傾きで平行四辺形にし、文字は立てる）
   ================================================================= */
.btn {
  --btn-bg: var(--c-accent);
  --btn-bg-hover: var(--c-accent-press);
  --btn-ink: var(--c-sheet);
  --btn-line: transparent;
  --btn-height: var(--btn-h);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-height);
  padding: var(--sp-2) var(--sp-6);
  border: 0;
  background: transparent;
  color: var(--btn-ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-button);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;        /* ボタンの文言は折り返さない */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--btn-height) * var(--slant-inset));
  z-index: -1;
  background: var(--btn-bg);
  border: var(--rule-heavy) solid var(--btn-line);
  transform: skewX(var(--slant));
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:hover::before { background: var(--btn-bg-hover); }
.btn:active::before { transform: skewX(var(--slant)) translateY(var(--rule)); }
/* フォーカス枠はボタンの形（平行四辺形）に沿って描く */
.btn:focus-visible { outline: none; }
.btn:focus-visible::before {
  outline: var(--focus-width) solid var(--c-navy);
  outline-offset: var(--focus-offset);
}
.btn:disabled,
.btn[aria-disabled="true"] { cursor: not-allowed; --btn-ink: var(--c-disabled-ink); }
.btn:disabled::before,
.btn[aria-disabled="true"]::before { background: var(--c-disabled); border-color: transparent; transform: skewX(var(--slant)); }

.btn--xl { --btn-height: var(--btn-h-xl); font-size: var(--fs-lead); }
.btn--s { --btn-height: var(--btn-h-s); padding-inline: var(--sp-3); font-size: var(--fs-small); letter-spacing: var(--ls-small); white-space: nowrap; }
.btn--block { display: flex; width: 100%; }

/* 紺の枠だけのボタン（電話・修正する・声の送り） */
.btn--line {
  --btn-bg: var(--c-sheet);
  --btn-bg-hover: var(--c-tint);
  --btn-ink: var(--c-navy);
  --btn-line: var(--c-navy);
}
.btn--line:disabled { --btn-ink: var(--c-field-line); }
.btn--line:disabled::before { background: var(--c-sheet); border-color: var(--c-rule); }
/* 紺の面の上の白いボタン */
.btn--light {
  --btn-bg: var(--c-sheet);
  --btn-bg-hover: var(--c-tint);
  --btn-ink: var(--c-navy);
}
.btn--light:focus-visible::before { outline-color: var(--c-cyan); }
.btn--light:disabled::before { background: var(--c-navy-hover); }
.btn--light:disabled { --btn-ink: var(--c-on-navy-muted); }

.btn__icon { width: var(--icon); height: var(--icon); vertical-align: baseline; }
.btn__sub {
  display: block;
  font-size: var(--fs-note);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-small);
}
.btn__stack { display: grid; justify-items: center; }

/* 電話：スマホ（指で操作する端末）だけ発信リンク、PCは番号の表示だけ */
.tel-link { display: none; }
.tel-text { display: inline-flex; }
@media (hover: none) and (pointer: coarse) {
  .tel-link { display: inline-flex; }
  .tel-text { display: none; }
}
.tel-number {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* =================================================================
   3. ヘッダー（全画面幅で上部に固定）
   ================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-sheet);
  border-bottom: var(--rule) solid var(--c-rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--header-h);
}
.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: auto; height: var(--logo-h); }
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.header-call {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--c-navy);
  line-height: var(--lh-num);
  text-decoration: none;
}
.header-call.tel-link { min-width: var(--tap); min-height: var(--tap); font-size: var(--fs-note); font-weight: var(--fw-bold); }
.header-call__icon { width: var(--icon); height: var(--icon); margin-block-end: var(--sp-1); vertical-align: baseline; }
.header-call__num { font-size: var(--fs-h3); }
.header-call__hours { margin-block-start: var(--sp-1); color: var(--c-ink-muted); font-size: var(--fs-note); font-weight: var(--fw-regular); }
@media (max-width: 599px) {
  /* 2026-10-12 ロゴを大きくした分、スマホのヘッダーは間隔と申込ボタンを少し詰める */
  .site-header__inner { gap: var(--sp-2); }
  .site-header__actions { gap: var(--sp-1); }
  .site-header .btn--s { font-size: 0.875rem; letter-spacing: 0; padding-inline: var(--sp-2); }
}
@media (max-width: 899px) {
  /* スマホ幅：発信リンクは「アイコン＋電話」だけ。指で操作しない端末は番号だけ */
  .header-call.tel-link .header-call__num,
  .header-call.tel-link .header-call__hours,
  .header-call.tel-text .header-call__hours { display: none; }
  .header-call.tel-text .header-call__num { font-size: var(--fs-body); }
}
@media (max-width: 359px) {
  /* 小さいスマホ：ロゴとボタンの文字を縮めて1行に収める */
  .site-header__logo img { height: var(--logo-h-narrow); }
  .site-header .btn--s { font-size: var(--fs-note); padding-inline: var(--sp-2); }
}
@media (max-width: 319px) {
  /* 折りたたみスマホの外画面など：ヘッダーの申込ボタンは隠す（フォームはFVのすぐ下にある） */
  .site-header .btn--s { display: none; }
}
@media (min-width: 900px) {
  .site-header__inner { min-height: var(--header-h-pc); }
  .site-header__logo img { height: var(--logo-h-pc); }
  .site-header__actions { gap: var(--sp-6); }
  .header-call { align-items: flex-end; }
  .header-call__icon,
  .header-call__label { display: none; }
}

/* =================================================================
   4. ファーストビュー（紺の面＋ロゴの斜めの帯）
   ================================================================= */
.fv {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--sp-4);
  background: var(--c-navy);
  color: var(--c-on-navy);
}
.fv::before,
.fv::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: -1;
  transform: skewX(var(--slant));
}
.fv::before { right: var(--fv-band-right); width: var(--fv-band-w); background: var(--c-shape-navy); }
.fv::after { right: var(--fv-band2-right); width: var(--fv-band2-w); background: var(--c-shape-navy-2); }

.fv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fv-art-sp);
  grid-template-areas:
    "head art"
    "sub sub"
    "proof proof"
    "points points"
    "note note";
  column-gap: var(--sp-3);
  align-items: start;
}
.fv__head { grid-area: head; display: grid; gap: var(--sp-1); }
/* 2026-10-12 白文字＋白い線の枠に変更（ご依頼 No.2）。文字は 15px→17〜20px */
.fv__kicker {
  display: block;
  justify-self: start;
  padding: var(--sp-1) var(--sp-3);
  border: var(--rule-heavy) solid var(--c-sheet);
  color: var(--c-sheet);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: "palt";
}
.fv__title {
  display: block;
  color: var(--c-sheet);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-feature-settings: "palt";
}
/* 挿絵（2026-10-12 ご支給の画像に差し替え。画像に青い地があるため、後ろの白い平行四辺形の台はやめた） */
.fv__art { grid-area: art; position: relative; isolation: isolate; }
.fv__sub {
  grid-area: sub;
  margin-block-start: var(--sp-2);
  color: var(--c-sheet);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  font-feature-settings: "palt";
}
.fv__proof {
  grid-area: proof;
  margin-block-start: var(--sp-1);
  color: var(--c-on-navy-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-compact);
  font-feature-settings: "palt";
}
.fv__proof > span { display: block; }
.fv__em { color: var(--c-accent-on-navy); font-weight: var(--fw-bold); }
.fv__em .num { font-size: var(--fs-lead); }

.points { grid-area: points; margin-block-start: var(--sp-2); }
.points__caption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-on-navy-muted);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-small);
}
.points__caption::after {
  content: "";
  flex: 1;
  border-top: var(--rule) solid var(--c-shape-navy-2);
}
/* 3つの箱：同じ形・中身は中央揃え。数字（24時間・手数料）は同じ大きさの朱 */
.points__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-2);
  margin-block-start: var(--sp-2);
}
.point {
  position: relative;
  isolation: isolate;
  container-type: inline-size;   /* 中の数字の大きさを、この箱の幅から決める */
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-navy);
  text-align: center;
}
/* 箱の面はロゴの傾きの平行四辺形（文字は立てたまま）。CTA・挿絵の台と同じ形 */
.point::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: var(--point-skew-inset);
  z-index: -1;
  background: var(--c-sheet);
  box-shadow: var(--shadow-slip);
  transform: skewX(var(--slant));
}
.point--text { grid-column: 1 / -1; }
.point__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  font-feature-settings: "palt";
}
.point__label .icon { vertical-align: baseline; }
.point__label--strong { font-size: var(--fs-lead); word-break: keep-all; }   /* 入りきらない幅では、全角スペースの位置でだけ折り返す */
.point__value {
  color: var(--c-accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-num);
  font-feature-settings: "palt";
  white-space: nowrap;
}
.point__value .num { font-size: min(var(--fs-num-l), var(--point-num-fit)); }
.point__ref { margin-inline-start: var(--sp-1); color: inherit; font-size: var(--fs-note); text-decoration: none; vertical-align: super; }
.point__desc { color: var(--c-ink); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-heading); }
.fv__note {
  grid-area: note;
  margin-block-start: var(--sp-2);
  color: var(--c-on-navy-muted);
  line-height: var(--lh-compact);
  letter-spacing: 0;
  font-feature-settings: "palt";
}

@media (max-width: 359px) {
  .points__list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) {
  .fv__grid {
    grid-template-columns: minmax(0, 1fr) var(--fv-art-tab);
    grid-template-rows: 1fr auto auto auto 1fr auto auto;
    grid-template-areas:
      ". art"
      "head art"
      "sub art"
      "proof art"
      ". art"
      "points points"
      "note note";
  }
  .points__list { gap: var(--sp-3); }
  .point { padding: var(--sp-4) var(--sp-3); }
}
@media (min-width: 900px) {
  .fv { padding-block: var(--sp-7) var(--sp-8); }
  .fv__grid { grid-template-columns: var(--cols-fv); column-gap: var(--gutter); }
  .fv__head { gap: var(--sp-2); }
  .fv__art { align-self: center; justify-self: end; width: 100%; max-width: var(--fv-art-max); }
  .fv__sub { margin-block-start: var(--sp-4); }
  .fv__proof > span { display: inline; }
  .fv__proof > span + span { margin-inline-start: var(--sp-4); }
  .points { margin-block-start: var(--sp-6); }
  .points__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }   /* 3列は、1つの箱が十分に広くなるPCから */
  .point--text { grid-column: auto; }
  .point { padding: var(--sp-5) var(--sp-4); gap: var(--sp-2); }
}

/* =================================================================
   5. 申込フォーム
   ================================================================= */
.apply { padding-block: var(--sp-4) var(--space-section); }
.apply__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-4);
  margin-block-end: var(--sp-2);
}
.apply__title {
  color: var(--c-navy);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.apply__sub { color: var(--c-ink-muted); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.apply__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }

.sheet {
  background: var(--c-sheet);
  border-top: var(--rule-heavy) solid var(--c-navy);
  box-shadow: var(--shadow-sheet);
}
.apply__errors {
  padding: var(--sp-4);
  border-bottom: var(--rule) solid var(--c-rule);
  background: var(--c-error-tint);
  color: var(--c-error);
  font-weight: var(--fw-bold);
}
.apply__block + .apply__block { border-top: var(--rule) solid var(--c-rule); }
.apply__legend {
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-tint);
  color: var(--c-navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-small);
}
.apply__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
}

.field {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
/* fieldset の legend は grid の間隔（gap）を受けないため、同じ間隔を下の余白で付ける */
.field > legend.field__label { margin-block-end: var(--sp-2); }
.field__sublabel { color: var(--c-ink-muted); font-size: var(--fs-note); font-weight: var(--fw-bold); }
.badge {
  display: inline-block;
  padding-inline: var(--sp-1);
  border: var(--rule) solid var(--c-navy);
  color: var(--c-navy);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  white-space: nowrap;
}
.badge--optional { border-color: var(--c-ink-muted); color: var(--c-ink-muted); }
.field__hint { color: var(--c-ink-muted); font-size: var(--fs-note); line-height: var(--lh-small); }

.field__input {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--sp-3) var(--sp-4);
  border: var(--rule) solid var(--c-field-line);
  border-radius: var(--radius-field);
  background: var(--c-sheet);
  color: var(--c-ink);
  font-size: var(--fs-input);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  appearance: none;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.field__input::placeholder { color: var(--c-placeholder); opacity: 1; }
.field__input:hover { border-color: var(--c-navy); }
.field__input:focus-visible { outline: var(--rule-heavy) solid var(--c-navy); outline-offset: 0; border-color: var(--c-navy); }
.field__input[aria-invalid="true"] { border-color: var(--c-error); background: var(--c-error-tint); }
textarea.field__input { min-height: calc(var(--field-h) * 2.5); resize: vertical; line-height: var(--lh-body); }

.field__unit { display: flex; align-items: center; gap: var(--sp-2); }
.field__unit .field__input { max-width: var(--amount-w); }
.field__suffix, .field__prefix { flex: none; font-weight: var(--fw-bold); }
.field__zip { display: flex; align-items: center; gap: var(--sp-2); }
.field__zip .field__input { max-width: var(--zip-w); }
.field__stack { display: grid; gap: var(--sp-1); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  color: var(--c-error);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-small);
}
.field__error[hidden] { display: none; }
.field__error::before {
  content: "";
  flex: none;
  width: var(--icon);
  height: var(--icon);
  margin-block-start: var(--sp-1);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5 19 18H1z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 7.5v5M10 14.5v1.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%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 20 20'%3E%3Cpath d='M10 1.5 19 18H1z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 7.5v5M10 14.5v1.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ラジオ・チェック（タイル型） */
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.choice__item { position: relative; display: block; }
.choice__item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__face {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--field-h);
  padding: var(--sp-2) var(--sp-3);
  border: var(--rule) solid var(--c-field-line);
  border-radius: var(--radius-field);
  background: var(--c-sheet);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.choice__face::before {
  content: "";
  flex: none;
  width: var(--check);
  height: var(--check);
  border: var(--rule-heavy) solid var(--c-field-line);
  border-radius: var(--radius-round);
  background: var(--c-sheet);
}
.choice__item .choice__face { white-space: nowrap; }
.choice__item input:hover + .choice__face { border-color: var(--c-navy); }
.choice__item input:checked + .choice__face {
  border-color: var(--c-navy);
  background: var(--c-tint);
  color: var(--c-navy);
}
.choice__item input:checked + .choice__face::before {
  border-color: var(--c-navy);
  background: var(--c-navy);
  box-shadow: inset 0 0 0 var(--check-dot) var(--c-sheet);
}
.choice__item input:focus-visible + .choice__face { outline: var(--focus-width) solid var(--c-navy); outline-offset: var(--rule-heavy); }
.field[aria-invalid="true"] .choice__face { border-color: var(--c-error); }

.consent { position: relative; display: block; }
.consent input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.consent .choice__face::before { border-radius: var(--radius-field); }
.consent input:checked + .choice__face::before {
  border-color: var(--c-navy);
  background: var(--c-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / var(--check-icon) no-repeat;
}
.consent input:checked + .choice__face { border-color: var(--c-navy); background: var(--c-tint); color: var(--c-navy); }
.consent input:focus-visible + .choice__face { outline: var(--focus-width) solid var(--c-navy); outline-offset: var(--rule-heavy); }
.consent input[aria-invalid="true"] + .choice__face { border-color: var(--c-error); background: var(--c-error-tint); }
.consent .choice__face { font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0; font-feature-settings: "palt"; }
.consent__text .badge { margin-inline-end: var(--sp-2); }

/* スパム対策の見えない欄（人には見えない） */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.apply__submit {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  border-top: var(--rule-heavy) solid var(--c-navy);
}
.apply__submit .btn { width: 100%; }
.apply__submit .note { text-align: center; }

/* 書類リスト（押せるチェック欄に見えないよう、紺の丸にチェックの印） */
.aside-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.docs {
  padding: var(--sp-5);
  border-top: var(--rule-heavy) solid var(--c-navy);
  background: var(--c-sheet);
}
.docs__title {
  color: var(--c-navy);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.docs__lead { margin-block-start: var(--sp-2); color: var(--c-ink-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.checklist { list-style: none; margin-block-start: var(--sp-3); }
.checklist li {
  position: relative;
  padding-block: var(--sp-2);
  padding-inline-start: calc(var(--bullet) + var(--sp-3));
  border-top: var(--rule) solid var(--c-rule);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.checklist li::before,
.checklist li::after { content: ""; position: absolute; }
.checklist li::before {
  top: calc(var(--sp-2) + var(--bullet-top) - var(--bullet) / 2);
  left: 0;
  width: var(--bullet);
  height: var(--bullet);
  border-radius: var(--radius-round);
  background: var(--c-navy);
}
.checklist li::after {
  top: calc(var(--sp-2) + var(--bullet-top) - var(--bullet-check-h) / 2 - var(--rule));
  left: calc(var(--bullet) / 2 - var(--bullet-check-w) / 2);
  width: var(--bullet-check-w);
  height: var(--bullet-check-h);
  border: solid var(--c-sheet);
  border-width: 0 var(--rule-heavy) var(--rule-heavy) 0;
  transform: rotate(var(--mark-turn));
}
.docs__foot { margin-block-start: var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-small); }

/* 電話の箱：中身は左揃えのまま、箱の中央に置く */
.callbox {
  padding: var(--sp-5);
  border: var(--rule) solid var(--c-rule);
  background: var(--c-sheet);
}
.callbox__inner {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.callbox__title { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.callbox__num { align-items: center; gap: var(--sp-2); color: var(--c-navy); font-size: var(--fs-num-m); line-height: var(--lh-num); }
.callbox__num .icon { width: var(--icon); height: var(--icon); vertical-align: baseline; }
.callbox__hours { color: var(--c-ink-muted); font-size: var(--fs-note); }

@media (min-width: 600px) {
  .apply__fields { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
  .apply__fields--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .field--full { grid-column: 1 / -1; }
  .apply__submit { padding-inline: var(--sp-6); }
  .apply__submit .btn { width: auto; min-width: var(--btn-min-w); }
}
@media (min-width: 900px) {
  .apply { padding-block-start: var(--sp-7); }
  .apply__layout { grid-template-columns: var(--cols-apply); gap: var(--gutter); }
  .apply__block { display: grid; grid-template-columns: var(--legend-w) minmax(0, 1fr); }
  .apply__legend { padding: var(--sp-5) var(--sp-4); border-right: var(--rule) solid var(--c-rule); }
  .aside-box { position: sticky; top: calc(var(--header-h-pc) + var(--sp-4)); }
}

/* ファクタリングとは？（2026-10-12 追加。スマホ：申込ボタンの下・書類の上／PC：申込書の下。図はご支給） */
.whatis {
  padding: var(--sp-5);
  border-top: var(--rule-heavy) solid var(--c-navy);
  background: var(--c-sheet);
  box-shadow: var(--shadow-sheet);
}
.whatis__title {
  color: var(--c-navy);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.whatis__text { margin-block-start: var(--sp-3); }
.whatis__fig { margin: var(--sp-4) calc(var(--sp-5) * -1) 0; }   /* スマホは図の文字を読みやすく：箱の左右の余白まで広げる（図の地は白） */
.whatis__fig img { display: block; width: 100%; height: auto; }
@media (min-width: 600px) {
  .whatis { padding: var(--sp-6); }
  .whatis__fig { margin-inline: 0; }
}
@media (min-width: 900px) {
  .apply__layout--whatis .apply__form { grid-column: 1; grid-row: 1; }
  .apply__layout--whatis .whatis { grid-column: 1; grid-row: 2; }
  .apply__layout--whatis .aside-box { grid-column: 2; grid-row: 1 / span 2; }
}

/* 個人情報保護方針のパネル */
.privacy { border: var(--rule) solid var(--c-rule); background: var(--c-paper); }
.privacy__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  color: var(--c-navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}
.privacy__toggle::-webkit-details-marker { display: none; }
.privacy__toggle::after {
  content: "";
  flex: none;
  width: var(--sp-3);
  height: var(--sp-3);
  border-right: var(--rule-heavy) solid currentColor;
  border-bottom: var(--rule-heavy) solid currentColor;
  transform: translateY(-25%) rotate(var(--mark-turn)); /* 光学調整：矢印の見た目の中心を文字の中心に合わせる */
  transition: transform var(--dur-ui) var(--ease-out);
}
.privacy[open] .privacy__toggle::after { transform: translateY(25%) rotate(-135deg); /* 光学調整 */ }
.privacy__toggle:hover { background: var(--c-tint); }
.privacy__body {
  max-height: var(--privacy-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
  border-top: var(--rule) solid var(--c-rule);
  background: var(--c-sheet);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.privacy__body:focus-visible { outline-offset: calc(var(--focus-width) * -1); }
.privacy__title { color: var(--c-navy); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.privacy__body h5 {
  margin-block: var(--sp-5) var(--sp-2);
  color: var(--c-navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.privacy__body p + p,
.privacy__body p + ul,
.privacy__body ul + p { margin-block-start: var(--sp-2); }
.privacy__body ul { padding-inline-start: var(--sp-5); }
.privacy__body li + li { margin-block-start: var(--sp-1); }
.privacy__body .privacy__date { margin-block-start: var(--sp-5); color: var(--c-ink-muted); }
/* 正式本文（2026-09-27）の小見出し・強調。元ページの構成に合わせて追加 */
.privacy__body h6 {
  margin-block: var(--sp-4) var(--sp-1);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}
.privacy__body h5 + p,
.privacy__body h6 + p { margin-block-start: 0; }
.privacy__body strong { color: var(--c-navy); font-weight: var(--fw-bold); }

/* =================================================================
   6. 他社比較（いまの契約と見比べる表）
   ================================================================= */
.compare-sec .sec-head { margin-block-end: var(--sp-6); }
.compare { width: 100%; background: var(--c-sheet); border-top: var(--rule-heavy) solid var(--c-navy); border-bottom: var(--rule-heavy) solid var(--c-navy); }
.compare caption { text-align: left; }
.compare th,
.compare td { padding: var(--sp-3); text-align: left; vertical-align: top; font-weight: var(--fw-regular); }
.compare thead th {
  color: var(--c-navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  border-bottom: var(--rule) solid var(--c-rule);
}
.compare thead .compare__them { color: var(--c-ink-muted); }
.compare tbody th {
  color: var(--c-navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.compare tbody th .icon { margin-inline-end: var(--sp-2); }
.compare tbody tr + tr { border-top: var(--rule) solid var(--c-rule); }
.compare__us { background: var(--c-tint); }
.compare td.compare__us { color: var(--c-ink); font-weight: var(--fw-bold); line-height: var(--lh-small); }
.compare td.compare__them { color: var(--c-ink-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.compare .num { color: var(--c-navy); font-size: var(--fs-h3); }
.compare__detail { display: block; margin-block-start: var(--sp-1); font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--c-ink-muted); }
.compare-foot { margin-block-start: var(--sp-4); display: grid; gap: var(--sp-2); }

/* スマホ：各行を「項目名」「トラストゲートウェイ」「いまの会社は？」の縦3段に組み替える（表の意味は role で保つ） */
@media (max-width: 599px) {
  .compare,
  .compare thead,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; }
  .compare thead { display: none; }
  .compare tbody tr { padding-block: var(--sp-4); }
  .compare tbody th { padding: 0 var(--sp-3) var(--sp-2); font-size: var(--fs-body); }
  .compare td.compare__us { padding: var(--sp-3) var(--sp-4); }
  .compare td.compare__them { padding: var(--sp-3) var(--sp-4) 0; }
  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-block-end: var(--sp-1);
    font-size: var(--fs-note);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-small);
  }
  .compare td.compare__us::before { color: var(--c-navy); }
  .compare td.compare__them::before { color: var(--c-ink-muted); }
}
@media (min-width: 600px) {
  .compare thead td { width: var(--compare-th-w); }
  .compare thead .compare__us { width: var(--compare-us-w); }
  .compare th,
  .compare td { padding: var(--sp-4) var(--sp-5); }
}

/* =================================================================
   7. シミュレーター（紺の面＋白い明細票）
   ================================================================= */
.sim { background: var(--c-navy); color: var(--c-on-navy); }
.sim .sec-title { color: var(--c-on-navy); }
.sim .sec-lead { color: var(--c-on-navy-muted); }
.sim__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.sim__example {
  color: var(--c-on-navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.sim__example .num { color: var(--c-cyan); font-size: var(--fs-h3); }
.sim__form { display: grid; gap: var(--sp-5); }
.sim__fields { display: grid; gap: var(--sp-4); }
.sim__field { display: grid; gap: var(--sp-2); }
.sim__field label { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.select {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--sp-2) var(--sp-7) var(--sp-2) var(--sp-4);
  border: 0;
  border-radius: var(--radius-field);
  background: var(--c-sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23002A77' stroke-width='2'/%3E%3C/svg%3E") right var(--sp-4) center / var(--sp-4) no-repeat;
  color: var(--c-ink);
  font-size: var(--fs-input);
  appearance: none;
  cursor: pointer;
}
.select:focus-visible { outline-color: var(--c-cyan); }
.sim__form .btn { justify-self: stretch; }

.slip {
  background: var(--c-sheet);
  color: var(--c-ink);
  box-shadow: var(--shadow-slip);
  padding: var(--sp-5);
}
.slip__title {
  padding-block-end: var(--sp-2);
  border-bottom: var(--rule-heavy) solid var(--c-navy);
  color: var(--c-navy);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-small);
}
.slip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-bottom: var(--rule) solid var(--c-rule);
  font-size: var(--fs-small);
}
.slip__row dd { color: var(--c-navy); font-weight: var(--fw-bold); }
.slip__row .num { font-size: var(--fs-h3); }
.slip__total { display: grid; padding-block-start: var(--sp-4); }
.slip__total-label { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.slip__total-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--sp-2);
  color: var(--c-navy);
  line-height: var(--lh-num);
}
.slip__total-value .num { font-size: var(--fs-num-xl); line-height: var(--lh-num); }
.slip__unit { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
/* 締切線：計算が終わった瞬間に左から引く二重線 */
.slip__close {
  position: relative;
  height: var(--rule-double);
  margin-block: var(--sp-2) var(--sp-4);
  border-top: var(--rule) dashed var(--c-rule);
}
.slip__close::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: var(--rule-double) double var(--c-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-ui) var(--ease-out);
}
.slip.is-done .slip__close { border-top-color: transparent; }
.slip.is-done .slip__close::after { transform: scaleX(1); }
.slip__note { color: var(--c-ink-muted); font-size: var(--fs-note); line-height: var(--lh-small); }
.slip__cta { margin-block-start: var(--sp-5); }
.slip__cta[hidden] { display: none; }

@media (min-width: 600px) {
  .sim__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slip { padding: var(--sp-6) var(--sp-7); }
}
@media (min-width: 900px) {
  .sim__grid { grid-template-columns: var(--cols-sim); gap: var(--sp-8); }
  .sim__fields { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .sim__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =================================================================
   8. 選ばれる理由（主の段＋副の段）
   ================================================================= */
.reasons__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.reasons__grid .sec-head { margin-block-end: 0; }
.reason-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sec-art-sp);
  grid-template-areas:
    "title title"
    "prose art";
  column-gap: var(--sp-3);
  row-gap: var(--sp-5);
  align-items: start;
}
.reason-main__title {
  grid-area: title;
  color: var(--c-navy);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: "palt";
  text-wrap: balance;
}
.reason-main__title .icon,
.reason-sub__title .icon,
.security__title .icon { margin-inline-end: var(--sp-2); }
.reason-main__art { grid-area: art; }
.reason-main .prose { grid-area: prose; font-size: var(--fs-lead); }
.reason-subs { display: grid; align-content: start; border-top: var(--rule-heavy) solid var(--c-navy); }
.reason-sub { display: grid; gap: var(--sp-3); padding-block: var(--sp-5); }
.reason-sub + .reason-sub { border-top: var(--rule-heavy) solid var(--c-navy); }
.reason-sub__title {
  color: var(--c-navy);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  font-feature-settings: "palt";
  text-wrap: balance;
}

@media (min-width: 900px) {
  .reasons__grid { grid-template-columns: var(--cols-reasons); column-gap: var(--sp-8); }
  .reasons__grid .sec-head { grid-column: 1 / -1; }
  .reason-main {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas: "title title" "art prose";
    column-gap: var(--sp-6);
  }
}

/* =================================================================
   9. クラウド契約（2本のレーン）
   ================================================================= */
.cloud { background: var(--c-sheet); border-block: var(--rule) solid var(--c-rule); }
.lanes { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.lane-step { display: grid; gap: var(--sp-2); padding-inline-start: var(--sp-5); border-left: var(--rule-heavy) solid var(--c-navy); }
.lane-step__name { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-navy); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: var(--ls-small); }
.lane-step__name .icon { vertical-align: baseline; }
.lane-step__old { color: var(--c-ink-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.lane-step__new { font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.lane-step__new small { display: block; margin-block-start: var(--sp-1); color: var(--c-ink-muted); font-size: var(--fs-note); font-weight: var(--fw-regular); }
.lane-step__tag { display: block; margin-block-end: var(--sp-1); font-size: var(--fs-note); font-weight: var(--fw-bold); letter-spacing: var(--ls-small); }
.lane-step__tag--new { color: var(--c-navy); }
.lane-step--total .lane-step__new { color: var(--c-navy); }
.security {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-top: var(--rule) solid var(--c-rule);
  display: grid;
  gap: var(--sp-3);
}
.security__title { color: var(--c-navy); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.security__list { margin-block-start: 0; }
.security__list li { color: var(--c-navy); font-weight: var(--fw-bold); }

@media (min-width: 600px) {
  .security__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5); }
}
@media (min-width: 900px) {
  .lanes { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0; }
  .lane-step { grid-row: span 3; grid-template-rows: subgrid; gap: 0; padding: 0; border-left: 0; }
  .lane-step__name { padding: 0 var(--sp-4) var(--sp-3); border-bottom: var(--rule) solid var(--c-rule); }
  .lane-step__old,
  .lane-step__new { padding: var(--sp-4); }
  /* 線路：従来型は細い点線、トラストゲートウェイは紺の太線 */
  .lane-step__old { border-bottom: var(--rule) dashed var(--c-field-line); }
  .lane-step__new { border-bottom: var(--rule-double) solid var(--c-navy); }
  .lane-step + .lane-step .lane-step__name,
  .lane-step + .lane-step .lane-step__old,
  .lane-step + .lane-step .lane-step__new { border-left: var(--rule) solid var(--c-rule); }
  .lane-step--total .lane-step__new { background: var(--c-tint); }
}

/* =================================================================
   10. CTA帯
   ================================================================= */
.cta-band { padding-block: var(--sp-7); border-block: var(--rule-heavy) solid var(--c-navy); background: var(--c-paper); }
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cta-art-sp);
  grid-template-areas:
    "text art"
    "pair pair";
  gap: var(--sp-5) var(--sp-3);
  align-items: center;
}
.cta-band__art { grid-area: art; }
.cta-band__text { grid-area: text; color: var(--c-navy); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); font-feature-settings: "palt"; }
.cta-band__text small { display: block; margin-block-start: var(--sp-2); color: var(--c-ink-muted); font-size: var(--fs-small); font-weight: var(--fw-regular); }
.cta-band .cta-pair { grid-area: pair; }
.cta-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.cta-pair .btn { width: 100%; }
.cta-tel-static {
  display: grid;
  justify-items: center;
  align-content: center;
  color: var(--c-navy);
  line-height: var(--lh-num);
}
.cta-tel-static .tel-number { font-size: var(--fs-num-m); }
.cta-tel-static small { margin-block-start: var(--sp-1); color: var(--c-ink-muted); font-size: var(--fs-note); }
.cta-tel-static.tel-text { display: grid; }
@media (hover: none) and (pointer: coarse) {
  .cta-tel-static.tel-text { display: none; }
}
@media (min-width: 600px) {
  .cta-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
}
@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: var(--cta-art-pc) minmax(0, 1fr) auto;
    grid-template-areas: "art text pair";
    gap: var(--sp-7);
  }
  .cta-band .cta-pair { grid-template-columns: auto auto; column-gap: var(--sp-6); }
}

/* =================================================================
   11. 申込から入金まで（同じ大きさの3コマ＋コマの間の矢印）
   ================================================================= */
.flow__steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-art-sp);
  grid-template-areas:
    "step art"
    "title art"
    "text text"
    "meter meter";
  align-content: start;
  column-gap: var(--sp-3);
  row-gap: var(--sp-2);
  padding: var(--sp-4);
  border: var(--rule-heavy) solid var(--c-navy);
  background: var(--c-sheet);
}
/* コマとコマの間の矢印（時間の順序）。スマホは下向き、PCは右向き */
.panel:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--rule-heavy) + (var(--sp-6) - var(--connector)) / 2);
  left: calc(50% - var(--connector));
  width: calc(var(--connector) * 2);
  height: var(--connector);
  background: var(--c-navy);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.panel__step {
  grid-area: step;
  align-self: start;
  justify-self: start;
  --btn-height: var(--btn-h-s);
  position: relative;
  isolation: isolate;
  padding: var(--sp-1) var(--sp-4);
  color: var(--c-on-navy);
  font-family: var(--font-num);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-button);
  line-height: var(--lh-heading);
}
.panel__step::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--btn-height) * var(--slant-inset) / 2);
  z-index: -1;
  background: var(--c-navy);
  transform: skewX(var(--slant));
}
.panel__art { grid-area: art; width: 100%; }
.panel__title { grid-area: title; align-self: start; color: var(--c-navy); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.panel__text { grid-area: text; font-size: var(--fs-body); text-wrap: pretty; }
.panel__meter { grid-area: meter; display: grid; gap: var(--sp-1); margin-block-start: var(--sp-2); padding-block-start: var(--sp-3); border-top: var(--rule) solid var(--c-rule); font-size: var(--fs-small); }
.panel__meter dt { color: var(--c-ink-muted); font-size: var(--fs-note); font-weight: var(--fw-bold); }
.panel__meter dd { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-weight: var(--fw-bold); }
.panel__meter .num { color: var(--c-navy); font-size: var(--fs-h3); }
.docs--wide { margin-block-start: var(--sp-6); border: var(--rule-heavy) solid var(--c-navy); }
.docs--wide .checklist li { font-size: var(--fs-body); }

@media (min-width: 900px) {
  .flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "step" "art" "title" "text" "meter";
    row-gap: var(--sp-3);
    padding: var(--sp-5);
  }
  .panel:not(:last-child)::after {
    top: calc(50% - var(--connector));
    left: calc(100% + var(--rule-heavy) + (var(--sp-6) - var(--connector)) / 2);
    width: var(--connector);
    height: calc(var(--connector) * 2);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .panel__art { width: min(100%, var(--panel-art-w)); justify-self: center; }
  .docs--wide { padding: var(--sp-6); }
  .docs--wide .checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-6); }
}

/* =================================================================
   12. ご利用者様の声（同じ大きさの吹き出しを横に送るカルーセル）
   ================================================================= */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--voice-col);
  gap: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--sp-1);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: var(--rule-heavy); }
.voice {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  scroll-snap-align: start;
}
.voice__balloon {
  position: relative;
  flex: 1;
  margin-block-end: var(--tail);
  padding: var(--sp-5);
  border: var(--rule-heavy) solid var(--c-navy);
  border-radius: var(--radius-voice);
  background: var(--c-sheet);
}
/* しっぽ（話している人＝下の札に向ける） */
.voice__balloon::before,
.voice__balloon::after {
  content: "";
  position: absolute;
  left: var(--sp-7);
  width: var(--tail);
  height: var(--tail);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.voice__balloon::before { top: calc(100% + var(--rule-heavy)); left: calc(var(--sp-7) - var(--rule-heavy)); width: calc(var(--tail) + var(--rule-heavy) * 3); height: calc(var(--tail) + var(--rule-heavy) * 3); margin-block-start: calc(var(--rule-heavy) * -1); background: var(--c-navy); }
.voice__balloon::after { top: 100%; background: var(--c-sheet); }
.voice__text { font-size: var(--fs-body); text-wrap: pretty; }
.voice__text p + p { margin-block-start: var(--sp-2); }
.voice__who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-small);
}
.voice__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--voice-icon);
  height: var(--voice-icon);
  border: var(--rule-heavy) solid var(--c-navy);
  border-radius: var(--radius-round);
  background: var(--c-sheet);
  color: var(--c-navy);
}
.voice__icon .icon { width: var(--voice-glyph); height: var(--voice-glyph); vertical-align: baseline; }
.voice__meta { display: grid; line-height: var(--lh-heading); }
.voice__job { color: var(--c-navy); font-weight: var(--fw-bold); }
.voice__amount .num { color: var(--c-navy); font-size: var(--fs-h3); }
.carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  margin-block-start: var(--sp-5);
}
.carousel__nav[hidden] { display: none; }
.carousel__btn { --btn-height: var(--tap); min-width: var(--carousel-btn-w); padding: 0; }
.carousel__status { color: var(--c-navy); font-size: var(--fs-h3); line-height: var(--lh-num); }
.carousel__sep { margin-inline: var(--sp-1); color: var(--c-field-line); }
.voices .note { margin-block-start: var(--sp-5); }

@media (min-width: 600px) {
  .carousel__track { grid-auto-columns: var(--voice-col-tab); }
}
@media (min-width: 1200px) {
  .carousel__track { grid-auto-columns: var(--voice-col-pc); }
}
@media (min-width: 1280px) {
  /* 広いPC：送りボタンを吹き出しの列の左右に置く */
  .carousel__btn {
    position: absolute;
    top: calc(50% - var(--tap));
  }
  .carousel__btn--prev { right: calc(100% + var(--sp-4)); }
  .carousel__btn--next { left: calc(100% + var(--sp-4)); }
}

/* =================================================================
   13. よくある質問
   ================================================================= */
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.faq__list { border-top: var(--rule-heavy) solid var(--c-navy); }
.faq__item { border-bottom: var(--rule) solid var(--c-rule); }
.faq__q {
  display: grid;
  grid-template-columns: var(--faq-mark) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover .faq__qtext { text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: var(--underline-offset); }
.faq__mark { color: var(--c-navy); font-family: var(--font-num); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.faq__qtext { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-heading); font-feature-settings: "palt"; }
.faq__q::after {
  content: "";
  width: var(--sp-3);
  height: var(--sp-3);
  margin: var(--sp-2) var(--sp-2) 0;
  border-right: var(--rule-heavy) solid var(--c-navy);
  border-bottom: var(--rule-heavy) solid var(--c-navy);
  transform: rotate(var(--mark-turn));
  transition: transform var(--dur-ui) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: translateY(50%) rotate(-135deg); /* 光学調整：開いたときの矢印の位置 */ }
.faq__a {
  display: grid;
  grid-template-columns: var(--faq-mark) minmax(0, 1fr);
  gap: var(--sp-2);
  padding-block-end: var(--sp-5);
}
.faq__a .faq__mark { color: var(--c-ink-muted); }
.faq__a p { max-width: var(--measure); text-wrap: pretty; }
.faq__aside { display: grid; gap: var(--sp-3); align-content: start; }

@media (min-width: 900px) {
  .faq__grid { grid-template-columns: var(--cols-faq); column-gap: var(--sp-8); }
  .faq__aside { position: sticky; top: calc(var(--header-h-pc) + var(--sp-6)); }
  .faq__aside .sec-head { margin-block-end: var(--sp-4); }
}

/* =================================================================
   14. 会社概要
   ================================================================= */
.company { background: var(--c-sheet); border-top: var(--rule) solid var(--c-rule); }
.company__list { border-top: var(--rule-heavy) solid var(--c-navy); }
.company__row { display: grid; gap: var(--sp-1); padding-block: var(--sp-4); border-bottom: var(--rule) solid var(--c-rule); }
.company__row dt { color: var(--c-navy); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.company__row ol { list-style: none; }
.company__cta { margin-block-start: var(--sp-7); display: grid; gap: var(--sp-4); }
.company__cta-title { color: var(--c-navy); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
@media (min-width: 600px) {
  .company__row { grid-template-columns: var(--legend-w) minmax(0, 1fr); gap: var(--sp-5); }
}

/* =================================================================
   15. フッター
   ================================================================= */
.site-footer { padding-block: var(--sp-7); background: var(--c-sheet); border-top: var(--rule) solid var(--c-rule); }
.site-footer__inner { display: grid; gap: var(--sp-5); }
.site-footer__logo img { width: auto; height: var(--logo-h-pc); }
.site-footer__tel { color: var(--c-navy); }
.site-footer__tel .tel-number { font-size: var(--fs-h3); }
.site-footer__tel small { display: block; color: var(--c-ink-muted); font-size: var(--fs-note); }
.site-footer__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-small); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer__copy { color: var(--c-ink-muted); font-size: var(--fs-note); }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-7); }
  .site-footer__copy { grid-column: 1 / -1; }
}

/* =================================================================
   16. 確認画面・修正画面・完了画面（form.php / thanks.php）
   ================================================================= */
.page-head { padding-block: var(--sp-6) var(--sp-5); }
.page-title {
  color: var(--c-navy);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-feature-settings: "palt";
  text-wrap: balance;
}
.page-lead { margin-block-start: var(--sp-3); max-width: var(--measure-lead); }
.page-body { padding-block-end: var(--space-section); }
.confirm-list { display: grid; }
.confirm-row { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); }
.confirm-row + .confirm-row { border-top: var(--rule) solid var(--c-rule); }
.confirm-row dt { color: var(--c-ink-muted); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.confirm-row dd { font-size: var(--fs-input); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.confirm-row dd.is-long { font-weight: var(--fw-regular); white-space: pre-wrap; }
.confirm-privacy { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.confirm-privacy .confirm-row { padding-inline: 0; }
.confirm-actions { display: grid; gap: var(--sp-4); justify-items: center; padding: var(--sp-5) var(--sp-4) var(--sp-6); border-top: var(--rule-heavy) solid var(--c-navy); }
.confirm-actions form { display: grid; justify-items: center; gap: var(--sp-3); width: 100%; }
.confirm-actions .btn { width: 100%; }
.recaptcha { display: grid; justify-items: center; gap: var(--sp-2); }
.recaptcha__error { color: var(--c-error); font-size: var(--fs-small); font-weight: var(--fw-bold); }
@media (min-width: 600px) {
  .confirm-row { grid-template-columns: var(--legend-w) minmax(0, 1fr); gap: var(--sp-5); padding-inline: var(--sp-6); }
  .confirm-privacy { padding-inline: var(--sp-6); }
  .confirm-actions .btn { width: auto; min-width: var(--btn-min-w); }
}

.receipt { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); text-align: center; }
.receipt__label { color: var(--c-ink-muted); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.receipt__no { color: var(--c-navy); font-size: var(--fs-num-m); overflow-wrap: anywhere; }
.receipt__note { color: var(--c-ink-muted); font-size: var(--fs-note); }
.next-steps { display: grid; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4) var(--sp-6); border-top: var(--rule) solid var(--c-rule); }
.next-steps__title { color: var(--c-navy); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.next-steps > ol { list-style: none; display: grid; gap: var(--sp-4); counter-reset: step; }
.next-steps > ol > li { display: grid; grid-template-columns: var(--faq-mark) minmax(0, 1fr); gap: var(--sp-2); counter-increment: step; }
.next-steps > ol > li::before { content: counter(step); color: var(--c-navy); font-family: var(--font-num); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.next-steps__art { width: min(100%, var(--thanks-art-w)); }
.back-link { display: flex; justify-content: flex-start; padding-block-start: var(--sp-6); }
.message-box { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4) var(--sp-6); }
@media (min-width: 600px) {
  .next-steps, .message-box { padding-inline: var(--sp-6); }
}

/* =================================================================
   17. 動きを減らす設定の人には、動きを止める
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0s;
    animation-duration: 0s;
    scroll-behavior: auto;
  }
}