/* 受発注業務の自動化（バックオフィスDXソリューション）の LP。2026-11-09 第3版（第2版は _archive/v2/、第1版は _archive/v1/）
   第2版の節の並び（バクラクの実測）を残し、部品を当社の物に置き換えた。型は ../lp-kata/LP-KATA.md
   - HP（helath.co.jp）の部品：左寄せの見出し・四角いボタン（角 4px）と矢印・細い罫の一覧・コーラルの差し色（押す所と注目の印）
   - サービス資料（バックオフィスDXソリューション）の部品：番号つきの章の札・実画面に番号の印と説明・業務の流れの順の表（矢羽根）・当社とお客様の表
   - 色：製品の面は青 #2257B8、見出しは紺 #13264D、押す所と印はコーラル #C8423F（白い文字で 4.8:1）。資料作成AI（赤の面）・SHIRITAI（橙）と分ける
   - 使わない物：斜めの面・白い札・添え書きつきの丸いボタン・色を分けたパネル・アイコン・影・グラデーション・左の色線・英字の札
   - ほかの LP と部品を持ち回らない（クラス名は oa- で始める） */

:root {
  --ink: #1b2638;      /* 本文 */
  --navy: #13264d;     /* 見出し・帯 */
  --ink-2: #4f5d71;    /* 補足 */
  --ink-3: #7e8ca3;
  --blue: #2257b8;     /* 製品の面・番号・数字 */
  --blue-d: #183f8a;
  --blue-3: #7b9ee3;
  --coral: #c8423f;    /* 押す所・印（当社のコーラルの濃い側） */
  --coral-d: #a9332f;
  --coral-l: #fbecea;
  --pale: #f4f7fc;     /* 淡い節 */
  --pale-2: #eaf0fa;   /* 実画面の台・表の見出し */
  --line: #d5dce6;
  --line-2: #e4e9f1;
  --input: #b3c1cf;
  --white: #fff;
  --f: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-num: "Inter", "Noto Sans JP", sans-serif;
  --w: 1130px;
  --gut: 24px;
  --hd: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 500 16px/1.85 var(--f); letter-spacing: .03em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.oa-in { width: 100%; max-width: calc(var(--w) + var(--gut) * 2); margin: 0 auto; padding-inline: var(--gut); }
.oa-num { font-family: var(--f-num); font-style: normal; font-weight: 700; letter-spacing: 0; }
.oa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 日本語は文節で折る（build.py が文節の境目に印を入れ、つながる文字を h-nb にまとめる）。収まらない時だけ語の途中で折る。
   文に text-wrap:pretty を使わない（WebKit 26.4 が文節の印の入った文でページごと落ちる。資料作成AIの LP の記録） */
body { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
h-nb { white-space: nowrap; }

/* ---------- ボタン（HP と同じ四角いボタン・右に矢印） ---------- */
.oa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 0 26px; border: 1px solid transparent; border-radius: 4px; font: 700 16px/1.4 var(--f); letter-spacing: .05em; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.oa-btn::after { content: "→"; font: 600 16px/1 var(--f-num); transition: transform .15s; }
.oa-btn:hover::after { transform: translateX(3px); }
.oa-btn--s { gap: 10px; min-height: 40px; padding: 0 16px; font-size: 14px; }
.oa-btn--s::after { font-size: 14px; }
.oa-btn--coral { background: var(--coral); color: var(--white); }
.oa-btn--coral:hover { background: var(--coral-d); }
.oa-btn--white { background: var(--white); color: var(--navy); }
.oa-btn--white:hover { background: var(--pale-2); }
.oa-btn--ghost { border-color: rgba(255, 255, 255, .7); color: var(--white); }
.oa-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); }
.oa-btn--line, .oa-btn--outline { background: var(--white); border-color: var(--coral); color: var(--coral); }
.oa-btn--line:hover, .oa-btn--outline:hover { background: var(--coral-l); }
.oa-btn:focus-visible, .oa-hd a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue-3); outline-offset: 3px; }

/* ---------- ヘッダー（HP と同じ白・ロゴと製品名、中に資料と同じ番号つきの章の札） ---------- */
.oa-hd { position: sticky; top: 0; z-index: 30; background: var(--white); border-bottom: 1px solid var(--line-2); }
.oa-hd__in { display: flex; align-items: center; gap: 24px; max-width: 1440px; height: var(--hd); margin: 0 auto; padding: 0 40px; }
.oa-hd__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.oa-hd__logo img { width: 112px; }
.oa-hd__logo span { padding-left: 14px; border-left: 1px solid var(--line); color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; white-space: nowrap; }
.oa-hd__nav { display: flex; gap: 2px; margin-left: auto; }
.oa-hd__nav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 9999px; color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.oa-hd__nav i { font: 700 12px/1 var(--f-num); color: var(--blue); }
.oa-hd__nav a:hover { color: var(--navy); background: var(--pale); }
.oa-hd__nav a.is-on { background: var(--blue); color: var(--white); }
.oa-hd__nav a.is-on i { color: var(--white); }
.oa-hd__btns { display: flex; gap: 10px; }

/* ---------- 最初の画面（製品の青の面・左に見出しと事実の数字・右に注文書と読み取りの結果） ---------- */
.oa-hero { background: var(--blue); color: var(--white); }
.oa-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; max-width: calc(var(--w) + var(--gut) * 2); margin: 0 auto; padding: 72px var(--gut) 80px; }
.oa-hero__name { font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; opacity: .85; }
.oa-hero__h { margin-top: 14px; font-size: clamp(36px, 3.4vw, 50px); font-weight: 700; line-height: 1.45; letter-spacing: .02em; }
.oa-hero__lead { max-width: 34em; margin-top: 20px; font-size: 17px; line-height: 1.9; opacity: .92; }
.oa-hero__facts { display: flex; margin-top: 28px; }
.oa-hero__facts > div { padding-right: 32px; margin-right: 32px; border-right: 1px solid rgba(255, 255, 255, .35); }
.oa-hero__facts > div:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.oa-hero__facts dt { font-size: 14px; font-weight: 700; line-height: 1.5; opacity: .85; }
.oa-hero__facts dd { margin-top: 4px; font-size: 22px; font-weight: 700; line-height: 1; }
.oa-hero__facts dd i { margin-right: 4px; font-size: 48px; }
.oa-hero__btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.oa-hero__btns .oa-btn { min-height: 60px; padding: 0 28px; font-size: 17px; }
/* 右：注文書（紙）と、読み取りの結果・受信の知らせ（当社の受信箱の画面の項目どおり） */
.oa-hero__board { position: relative; aspect-ratio: 1 / 1; container-type: inline-size; color: var(--ink); }
.oa-hero__paper { position: absolute; left: 4%; top: 4%; width: 64%; background: var(--white); }
.oa-hero__read { position: absolute; right: 0; top: 30%; width: 68%; padding: 3.4cqw 3.8cqw 2.6cqw; border-radius: 6px; background: var(--white); }
.oa-hero__read-h { display: flex; align-items: baseline; gap: 2cqw; font-size: 3.4cqw; font-weight: 700; line-height: 1.4; }
.oa-hero__read-h span { font-size: 2.8cqw; font-weight: 500; color: var(--ink-2); }
.oa-hero__read table { width: 100%; margin-top: 1.6cqw; border-collapse: collapse; }
.oa-hero__read th { padding: 1cqw 0; font-size: 2.4cqw; font-weight: 600; color: var(--ink-2); text-align: left; border-bottom: 1px solid var(--line-2); }
.oa-hero__read td { padding: 1.6cqw 1cqw 1.6cqw 0; font-size: 2.8cqw; line-height: 1.4; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.oa-hero__read tr:last-child td { border-bottom: 0; }
.oa-hero__read td:nth-child(2) { font-family: var(--f-num); font-weight: 600; }
.oa-tag { display: inline-block; padding: .5cqw 1.4cqw; border-radius: 4px; font-size: 2.4cqw; font-weight: 700; line-height: 1.5; }
.oa-tag--ok { background: #e1f3e7; color: #1d6f41; }
.oa-tag--warn { background: #fff1c9; color: #7a5600; }
.oa-hero__note { position: absolute; left: 0; bottom: 2%; width: 76%; padding: 2.8cqw 3.8cqw; border-radius: 6px; background: var(--white); font-size: 2.8cqw; line-height: 1.6; }
.oa-hero__note p:first-child { display: flex; justify-content: space-between; font-size: 3.2cqw; }
.oa-hero__note p:first-child span { font-family: var(--f-num); font-weight: 600; color: var(--ink-2); }

/* ---------- 節の共通（左寄せの見出し。上に資料と同じ番号つきの章の札） ---------- */
.oa-sec { padding: 112px 0; }
.oa-sec--pale { background: var(--pale); }
.oa-head { margin-bottom: 56px; }
.oa-chap { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 16px 0 5px; border-radius: 9999px; background: var(--blue); color: var(--white); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .08em; }
.oa-chap i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--white); color: var(--blue); font: 700 11px/1 var(--f-num); letter-spacing: 0; }
.oa-chap--plain { padding: 0 16px; }
.oa-h2 { margin-top: 20px; color: var(--navy); font-size: 38px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.oa-lead { max-width: 44em; margin-top: 16px; color: var(--ink-2); font-size: 17px; line-height: 1.9; }

/* ---------- 01 仕組み：手順ごとに、文と番号の説明・実画面に番号の印（資料の画面のページと同じ読み方） ---------- */
.oa-steps { border-top: 1px solid var(--line); }
.oa-step { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 64px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line); }
.oa-step__no { display: flex; align-items: baseline; gap: 10px; color: var(--navy); }
.oa-step__no span { font-size: 15px; font-weight: 700; letter-spacing: .1em; }
.oa-step__no i { color: var(--blue); font-size: 44px; line-height: 1; }
.oa-step__h { margin-top: 16px; color: var(--navy); font-size: 28px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.oa-step__txt > p:not(.oa-step__no) { margin-top: 16px; font-size: 16px; line-height: 1.85; }
.oa-keys { display: grid; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-2); counter-reset: key; }
.oa-keys li { position: relative; padding-left: 40px; color: var(--ink-2); font-size: 14px; line-height: 1.6; counter-increment: key; }
.oa-keys li::before { content: counter(key); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: var(--white); font: 700 13px/1 var(--f-num); }
.oa-keys b { display: block; color: var(--navy); font-size: 15px; font-weight: 700; line-height: 1.5; }
.oa-shot { padding: 28px; border-radius: 6px; background: var(--pale-2); }
.oa-shot__in { position: relative; }
.oa-shot img { width: 100%; border: 1px solid #cbd5e3; border-radius: 4px; background: var(--white); }
.oa-mk { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--white); border-radius: 50%; background: var(--coral); color: var(--white); font: 700 14px/1 var(--f-num); transform: translate(-50%, -50%); }

/* ---------- 02 特長：事実の数字3つ（資料の数字の並び）と、安心して使うための仕組み ---------- */
.oa-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.oa-nums > div { padding: 32px 32px 30px; border-radius: 6px; background: var(--white); }
.oa-nums dt { color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.5; }
.oa-nums dd { margin-top: 14px; color: var(--blue); font-size: 26px; font-weight: 700; line-height: 1; white-space: nowrap; }
.oa-nums dd i { margin-right: 4px; font-size: 64px; }
.oa-nums dd:not(:has(i)) { font-size: 44px; line-height: 64px; letter-spacing: .02em; }
.oa-nums p { margin-top: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.oa-safe { margin-top: 64px; }
.oa-safe__h { color: var(--navy); font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.oa-safe__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 20px; }
.oa-safe__list li { padding-top: 16px; border-top: 1px solid var(--line); }
.oa-safe__list b { display: block; color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.5; }
.oa-safe__list span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.8; }

/* ---------- 案内の帯（紺の面。資料の結論の帯と同じ色） ---------- */
.oa-band { background: var(--navy); color: var(--white); }
.oa-band__in { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.oa-band__h { font-size: 26px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }
.oa-band__btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.oa-band__doc { position: relative; height: 240px; }
.oa-band__doc img { position: absolute; width: 290px; border: 1px solid rgba(255, 255, 255, .25); background: var(--white); }
.oa-band__doc img:first-child { right: 0; top: 0; }
.oa-band__doc img:last-child { right: 64px; top: 52px; }

/* ---------- 03 機能：受注 → 帳票 → 納期・入荷 → 請求・会計の順（資料の矢羽根）と、全体の管理 ---------- */
.oa-fflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.oa-fcol__h { padding: 14px 24px 14px 30px; background: var(--blue); color: var(--white); font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.oa-fcol:first-child .oa-fcol__h { padding-left: 20px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.oa-fcol dl, .oa-fbase dl { margin-top: 6px; }
.oa-fcol dl > div { padding: 18px 8px 18px 0; border-bottom: 1px solid var(--line-2); }
.oa-fcol dt, .oa-fbase dt { color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.5; }
.oa-fcol dd, .oa-fbase dd { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.75; }
.oa-fbase { margin-top: 40px; }
.oa-fbase__h { padding: 12px 20px; background: #6b7080; color: var(--white); font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; }
.oa-fbase dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.oa-fbase dl > div { padding: 18px 0; border-bottom: 1px solid var(--line-2); }

/* ---------- 04 1日の変化：前と後の積み上げの棒 ---------- */
.oa-point { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 64px; align-items: center; }
.oa-point .oa-h2 { font-size: 34px; }
.oa-chart__rows { display: grid; gap: 28px; }
.oa-chart__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
.oa-chart__lab { padding-top: 30px; color: var(--navy); font-size: 16px; font-weight: 700; line-height: 24px; }
.oa-chart__call { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.oa-chart__call::before { content: ""; width: 12px; height: 12px; border-radius: 2px; background: var(--navy); }
.oa-chart__call b { color: var(--navy); font-weight: 700; }
.oa-chart__call i { font-family: var(--f-num); font-style: normal; font-weight: 600; }
.oa-chart__bar { display: flex; gap: 2px; height: 84px; border-radius: 4px; overflow: hidden; }
.oa-chart__seg { flex: var(--w) 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0; overflow: hidden; color: var(--white); white-space: nowrap; }
/* 棒の幅は時間の比のまま（余白は中の文字にだけ付ける。段に余白を付けると、短い段が実際より太く見える） */
.oa-chart__seg b, .oa-chart__seg i { padding: 0 14px; }
.oa-chart__seg b { font-size: 15px; font-weight: 700; line-height: 1.4; }
.oa-chart__seg i { font-family: var(--f-num); font-style: normal; font-size: 15px; font-weight: 600; line-height: 1.4; }
.oa-chart__seg--1 { background: var(--navy); }
.oa-chart__seg--2 { background: var(--blue); }
.oa-chart__seg--3 { background: var(--blue-3); }
.oa-chart__seg--free { border: 1px solid var(--line); border-radius: 0 4px 4px 0; background: var(--white); color: var(--navy); }
.oa-chart__axis { position: relative; height: 20px; margin: 12px 0 0 72px; font-family: var(--f-num); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.oa-chart__axis span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); white-space: nowrap; }
.oa-chart__axis span:first-child { transform: none; }
.oa-chart__axis span:last-child { transform: translateX(-100%); }

/* ---------- 05 進め方と費用：期間ごとに当社とお客様（資料の取り組み方の表） ---------- */
.oa-plan { display: grid; grid-template-columns: 88px repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; grid-auto-flow: column; column-gap: 4px; }
.oa-plan__labels, .oa-plan__ph { display: contents; }
.oa-plan__labels b { display: flex; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 700; }
.oa-plan__h { padding: 16px 20px; background: var(--pale-2); color: var(--navy); font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.oa-plan__h small { display: block; margin-bottom: 4px; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.oa-plan__c { padding: 20px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.oa-plan__c--you { color: var(--ink-2); }
.oa-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; margin-top: 56px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.oa-price__h { color: var(--navy); font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.oa-price__txt p { margin-top: 8px; font-size: 15px; line-height: 1.85; }

/* ---------- 06 よくあるご質問（HP と同じ細い罫の一覧。Q はコーラル・A は青） ---------- */
.oa-faq__list { border-top: 1px solid var(--line); }
.oa-faq__list details { border-bottom: 1px solid var(--line); }
.oa-faq__list summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 16px; padding: 24px 0 24px 44px; color: var(--navy); font-size: 17px; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; }
.oa-faq__list summary::-webkit-details-marker { display: none; }
.oa-faq__list summary::before { content: "Q"; position: absolute; left: 4px; top: 22px; color: var(--coral); font: 700 22px/1.3 var(--f-num); }
.oa-pm { position: relative; width: 30px; height: 30px; border: 1px solid var(--coral); border-radius: 50%; }
.oa-pm::before, .oa-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--coral); transform: translate(-50%, -50%); transition: transform .2s; }
.oa-pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.oa-faq__list details[open] .oa-pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.oa-faq__list details p { position: relative; padding: 0 46px 26px 44px; font-size: 16px; line-height: 1.85; }
.oa-faq__list details p::before { content: "A"; position: absolute; left: 4px; top: -2px; color: var(--blue); font: 700 22px/1.3 var(--f-num); }

/* ---------- お問い合わせ（左に見出しと資料、右に白いフォーム。線は1px・角 4〜6px） ---------- */
.oa-contact { padding: 112px 0; }
.oa-contact__in { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: start; }
.oa-contact .oa-h2 { font-size: 34px; }
.oa-docs { margin-top: 36px; }
.oa-docs__t { color: var(--navy); font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.oa-docs__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.oa-docs__imgs img { width: 100%; border: 1px solid var(--line); background: var(--white); }
.oa-docs__main { grid-column: 1 / -1; }
.oa-docs__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 18px; border-top: 1px solid var(--line); }
.oa-docs__list li { padding: 10px 0 10px 18px; border-bottom: 1px solid var(--line-2); color: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.5; position: relative; }
.oa-docs__list li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.oa-form { padding: 40px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); }
.oa-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.oa-form legend { padding: 0; color: var(--navy); font-size: 14px; font-weight: 700; }
.oa-form__type { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oa-form__type legend { grid-column: 1 / -1; margin-bottom: 8px; }
.oa-form__type label { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid var(--input); border-radius: 4px; font-size: 15px; font-weight: 700; cursor: pointer; }
.oa-form__type label:has(input:checked) { border-color: var(--blue); background: var(--pale-2); color: var(--navy); }
.oa-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oa-form__f { display: block; margin-top: 20px; }
.oa-form__f > span { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 14px; font-weight: 700; }
.oa-form__f em { color: var(--coral); font-size: 12px; font-style: normal; font-weight: 700; }
.oa-form input[type="text"], .oa-form input[type="email"], .oa-form input[type="tel"], .oa-form textarea { width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--input); border-radius: 4px; background: var(--white); color: var(--ink); font: 500 16px/1.5 var(--f); }
.oa-form textarea { resize: vertical; }
.oa-form input:focus, .oa-form textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.oa-form input::placeholder, .oa-form textarea::placeholder { color: #9aa6b8; }
.oa-form input, .oa-form textarea { word-break: normal; line-break: auto; overflow-wrap: break-word; }
.oa-form__kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 24px !important; }
.oa-form__kinds legend { grid-column: 1 / -1; margin-bottom: 8px; }
.oa-form__kinds label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.6; cursor: pointer; }
.oa-form input[type="radio"], .oa-form input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.oa-form__type input[type="radio"] { margin: 0; }
.oa-form__pp { margin-top: 20px; color: var(--ink-2); font-size: 13px; }
.oa-form__pp a { color: var(--blue); }
.oa-form__submit { display: flex; width: 100%; min-height: 60px; margin-top: 16px; font-size: 17px; }
.oa-form__submit:disabled { opacity: .6; cursor: default; }
.oa-form__status { margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 1.6; }
.oa-form__status:empty { display: none; }
.oa-form__status.ok { color: #1d6f41; }
.oa-form__status.err { color: #b42318; }

/* ---------- フッター ---------- */
.oa-ft { padding: 48px 0 56px; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; line-height: 1.8; }
.oa-ft__in { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
.oa-ft__logo img { width: 112px; }
.oa-ft__tag { margin-top: 12px; color: var(--navy); font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.oa-ft__links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 6px; }
.oa-ft__links a { text-decoration: none; }
.oa-ft__links a:hover { color: var(--coral); }
.oa-ft__c { margin-top: 6px; font-family: var(--f-num); font-size: 12px; }

/* ---------- 出てくる動き ---------- */
.js .oa-rise { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .oa-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .oa-rise { opacity: 1; transform: none; transition: none; } }

/* ================= 幅ごと ================= */
@media (max-width: 1199px) {
  :root { --gut: 32px; }
  .oa-hd__nav { display: none; }
  .oa-hd__btns { margin-left: auto; }
  .oa-hero__in { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; }
  .oa-step { grid-template-columns: 360px minmax(0, 1fr); gap: 48px; }
  .oa-point { grid-template-columns: 380px minmax(0, 1fr); gap: 48px; }
  .oa-contact__in { grid-template-columns: minmax(0, 1fr) 520px; gap: 48px; }
}
/* タブレット（834 など） */
@media (max-width: 1023px) {
  .oa-hd__in { padding: 0 32px; }
  .oa-hero__in { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 56px; padding-bottom: 64px; }
  .oa-hero__h { font-size: 44px; }
  .oa-hero__fig { width: min(520px, 100%); margin: 0 auto; }
  .oa-sec, .oa-contact { padding: 88px 0; }
  .oa-h2 { font-size: 32px; }
  .oa-step { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0; }
  .oa-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .oa-nums > div { padding: 24px 22px; }
  .oa-nums dd { font-size: 20px; }
  .oa-nums dd i { font-size: 44px; }
  .oa-nums dd:not(:has(i)) { font-size: 28px; line-height: 44px; }
  .oa-safe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oa-band__in { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .oa-band__doc img { width: 220px; }
  .oa-band__doc img:last-child { right: 48px; top: 44px; }
  .oa-fflow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .oa-fcol .oa-fcol__h, .oa-fcol:first-child .oa-fcol__h { padding-left: 20px; clip-path: none; }
  .oa-point { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .oa-plan__c { padding: 16px 14px; font-size: 14px; }
  .oa-plan__h { padding: 14px; font-size: 16px; }
  .oa-contact__in { grid-template-columns: minmax(0, 1fr); }
  .oa-docs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .oa-docs__t { grid-column: 1 / -1; }
  .oa-docs__list { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
}
/* スマホ（390・375・360） */
@media (max-width: 767px) {
  :root { --gut: 24px; --hd: 60px; }
  .oa-hd__in { gap: 12px; padding: 0 16px; }
  .oa-hd__logo { gap: 10px; }
  .oa-hd__logo img { width: 84px; }
  .oa-hd__logo span { padding-left: 10px; font-size: 13px; letter-spacing: .03em; }
  .oa-hd__btns .oa-btn--line { display: none; }
  .oa-hd__btns .oa-btn--s { min-height: 36px; padding: 0 12px; font-size: 13px; gap: 8px; }
  .oa-hero__in { gap: 36px; padding-top: 40px; padding-bottom: 48px; }
  .oa-hero__name { font-size: 13px; }
  .oa-hero__h { margin-top: 10px; font-size: clamp(24px, 7vw, 28px); line-height: 1.5; }
  .oa-hero__lead { margin-top: 14px; font-size: 15px; line-height: 1.85; }
  .oa-hero__facts { margin-top: 22px; }
  .oa-hero__facts > div { padding-right: 22px; margin-right: 22px; }
  .oa-hero__facts dt { font-size: 12px; }
  .oa-hero__facts dd { font-size: 17px; }
  .oa-hero__facts dd i { font-size: 36px; }
  .oa-hero__btns { flex-direction: column; gap: 12px; margin-top: 28px; }
  .oa-hero__btns .oa-btn { width: 100%; min-height: 56px; font-size: 16px; }
  .oa-sec, .oa-contact { padding: 72px 0; }
  .oa-head { margin-bottom: 36px; }
  .oa-chap { height: 28px; padding-right: 14px; font-size: 13px; }
  .oa-chap i { width: 20px; height: 20px; }
  .oa-h2, .oa-point .oa-h2, .oa-contact .oa-h2 { margin-top: 16px; font-size: clamp(21px, 6.2vw, 24px); letter-spacing: .03em; }
  .oa-lead { font-size: 15px; line-height: 1.85; }
  .oa-step { padding: 40px 0; gap: 24px; }
  .oa-step__no i { font-size: 36px; }
  .oa-step__h { margin-top: 12px; font-size: 22px; letter-spacing: .03em; }
  .oa-step__txt > p:not(.oa-step__no) { font-size: 15px; }
  .oa-keys { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .oa-shot { padding: 14px; }
  .oa-mk { width: 24px; height: 24px; font-size: 12px; }
  .oa-nums { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .oa-nums dd { font-size: 22px; }
  .oa-nums dd i { font-size: 52px; }
  .oa-nums dd:not(:has(i)) { font-size: 38px; line-height: 52px; }
  .oa-safe { margin-top: 48px; }
  .oa-safe__h { font-size: 19px; }
  .oa-safe__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .oa-band__in { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 48px; padding-bottom: 0; }
  .oa-band__h { font-size: 19px; }
  .oa-band__btns { flex-direction: column; gap: 12px; margin-top: 22px; }
  .oa-band__btns .oa-btn { width: 100%; }
  .oa-band__doc { height: 170px; overflow: hidden; }
  .oa-band__doc img { width: 220px; }
  .oa-band__doc img:first-child { right: auto; left: calc(50% - 80px); top: 0; }
  .oa-band__doc img:last-child { right: auto; left: calc(50% - 130px); top: 40px; }
  .oa-fflow { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .oa-fbase dl { grid-template-columns: minmax(0, 1fr); }
  .oa-chart__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .oa-chart__lab { font-size: 14px; }
  .oa-chart__bar { height: 72px; }
  .oa-chart__seg b, .oa-chart__seg i { padding: 0 8px; }
  .oa-chart__seg b, .oa-chart__seg i { font-size: 12px; }
  .oa-chart__axis { margin-left: 0; }
  .oa-chart__lab { padding-top: 0; }
  .oa-chart__call { font-size: 13px; }
  .oa-plan { display: block; }
  .oa-plan__labels { display: none; }
  .oa-plan__ph { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .oa-plan__ph + .oa-plan__ph { margin-top: 12px; }
  .oa-plan__h { padding: 14px 16px; }
  .oa-plan__c { padding: 12px 16px 14px; border-bottom: 0; border-top: 1px solid var(--line-2); font-size: 14px; }
  .oa-plan__c::before { content: attr(data-label); display: block; color: var(--blue); font-size: 12px; font-weight: 700; }
  .oa-price { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; padding: 28px 0; }
  .oa-price__h { font-size: 19px; }
  .oa-price .oa-btn { width: 100%; }
  .oa-faq__list summary { grid-template-columns: minmax(0, 1fr) 26px; gap: 12px; padding: 20px 0 20px 34px; font-size: 15.5px; }
  .oa-faq__list summary::before { left: 2px; top: 18px; font-size: 19px; }
  .oa-pm { width: 26px; height: 26px; }
  .oa-pm::before, .oa-pm::after { width: 10px; }
  .oa-faq__list details p { padding: 0 0 22px 34px; font-size: 15px; }
  .oa-faq__list details p::before { left: 2px; font-size: 19px; }
  .oa-contact__in { gap: 32px; }
  .oa-docs { display: block; margin-top: 28px; }
  .oa-docs__imgs { gap: 8px; }
  .oa-docs__list { grid-template-columns: minmax(0, 1fr); }
  .oa-form { padding: 24px 20px; }
  .oa-form__row, .oa-form__kinds, .oa-form__type { grid-template-columns: minmax(0, 1fr); }
  .oa-form__row { gap: 0; }
  .oa-form__type { gap: 8px; }
  .oa-form__type label { min-height: 48px; padding: 0 14px; }
  .oa-ft__in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}