/* ============================================================
   BIMOTTO BPO サービスLP  style.css
   Phase3b本番実装（2026-07-13）
   Claude Design確定デザイン（C案:図解主導）をDESIGN.mdトークンで本番化
   コピー方針: 見出し=Claude Design版 / 本文=Phase1 v4確定稿
   ============================================================ */

/* ---- リセット・ベース ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  color: #242424;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.7;
}
a { color: #3d348c; text-decoration: none; }
a:hover { color: #30286f; }
img { max-width: 100%; display: block; }

.num-font {
  /* 2026-07-14 千賀さん指示: 数字もNoto Sans JPに統一（Archivo廃止） */
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "tnum";
  letter-spacing: -.01em;
}

/* ---- レイアウトコンテナ ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.sec-pad { padding-top: 96px; padding-bottom: 96px; }

/* ---- スクロールフェードイン ---- */
@keyframes dcFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
[data-reveal] { opacity: 0; }
[data-reveal].reveal-on { opacity: 1; animation: dcFadeUp .45s ease-out; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; }
  [data-reveal].reveal-on { animation: none; }
}

/* ---- ボタン共通 ---- */
.btn { display: inline-block; font-size: 16px; font-weight: 700; border-radius: 8px; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.btn:focus-visible { outline: 2px solid #3d348c; outline-offset: 2px; }
.btn-primary { background: #4b3aae; color: #fff; padding: 16px 36px; }
.btn-primary:hover { background: #30286f; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(61,52,140,.25); }
.btn-primary:active { transform: scale(.98); }
.btn-outline { color: #3d348c; border: 2px solid #3d348c; padding: 14px 30px; }
.btn-outline:hover { transform: translateY(-2px); }
.btn-ondark { background: #fff; color: #3d348c; padding: 15px 34px; }
.btn-ondark:hover { color: #30286f; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.btn-sm { padding: 15px 34px; }
.btn-outline.btn-sm { padding: 13px 32px; }
.btn-ondark-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); padding: 13px 32px; }
.btn-ondark-outline:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.btn-pair { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- ① ヘッダー ---- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #e5e2ec; }
.hdr-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.logo { display: flex; align-items: center; }
.logo-img { height: 40px; width: auto; display: block; }
.logo-img-ftr { height: 46px; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a { font-size: 14px; color: #555; font-weight: 500; }
.nav a:hover { color: #3d348c; }
.nav .nav-cta { font-weight: 700; color: #fff; background: #3d348c; border-radius: 6px; padding: 10px 20px; }
.nav .nav-cta:hover { color: #fff; background: #30286f; }

/* ---- ② ヒーロー ---- */
.hero { background: linear-gradient(180deg, #fff, #faf9fd); }
.hero-inner { display: grid; grid-template-columns: 1.28fr .72fr; gap: 48px; align-items: start; padding-top: 48px; padding-bottom: 72px; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #3d348c; background: #e8e3f6; padding: 6px 14px; border-radius: 4px; margin-bottom: 24px; }
.hero h1 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.2; font-weight: 900; letter-spacing: -.02em; margin-bottom: 28px; }
.hero-sub { font-size: 17px; line-height: 1.75; color: #555; max-width: 36em; margin-bottom: 34px; }
.hero-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-note { font-size: 13px; line-height: 1.6; color: #555; margin-top: 18px; }

/* ヒーロー右カード（案B：実績プレート＋対応領域台帳） */
.hero-card { background: #fff; border: 1px solid #e0d9f2; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(36,36,36,.06); }
.plate { background: #3d348c; padding: 26px 32px 22px; }
.plate .lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: #c9c0ee; margin-bottom: 8px; display: block; }
.plate .row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.plate .big { font-size: 60px; font-weight: 800; color: #fff; line-height: .85; }
.plate .unit { font-size: 22px; font-weight: 700; color: #fff; }
.plate .desc { font-size: 13.5px; line-height: 1.75; color: #e3ddf3; }
.plate .desc b { color: #fff; font-weight: 700; }
.ledger { background: #fff; padding: 20px 32px 16px; }
.ledger .kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #3d348c; margin-bottom: 6px; display: block; }
.ledger .statement { font-size: 16.5px; font-weight: 800; color: #242424; margin-bottom: 14px; line-height: 1.5; }
.led-list { display: flex; flex-direction: column; }
.led-row { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid #e5e2ec; }
.led-row:last-child { border-bottom: none; padding-bottom: 2px; }
.led-row .n { font-size: 13px; font-weight: 800; color: #b8aedc; width: 20px; flex-shrink: 0; }
.led-row .t { font-size: 15px; font-weight: 700; color: #242424; }
.card-foot { background: #f8f6fc; padding: 12px 32px 14px; border-top: 1px solid #e5e2ec; }
.card-foot p { font-size: 12.5px; line-height: 1.6; color: #555; }
.card-foot b { color: #3d348c; font-weight: 700; }

/* ---- 見出し共通 ---- */
.h2 { font-size: clamp(24px, 2.7vw, 32px); line-height: 1.4; font-weight: 700; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #3d348c; margin-bottom: 14px; }

/* ---- ③ 課題提示 ---- */
.issues { background: #f7f7fa; }
.issues .h2 { margin-bottom: 36px; }
.issue-lead { background: #fff; border: 1px solid #e5e2ec; border-left: 4px solid #3d348c; border-radius: 8px; padding: 26px 32px; margin-bottom: 32px; display: flex; align-items: center; gap: 24px; }
.issue-lead .n { font-size: 34px; font-weight: 800; color: #b8aedc; line-height: 1; }
.issue-lead p { font-size: 17px; line-height: 1.65; font-weight: 700; color: #242424; }
.issue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.issue-card { background: #fff; border: 1px solid #e5e2ec; border-radius: 8px; padding: 28px 30px; display: flex; gap: 20px; }
.issue-card .n { font-size: 26px; font-weight: 800; color: #b8aedc; }
.issue-card p { font-size: 16px; line-height: 1.7; }
.issue-note { font-size: 15px; line-height: 1.8; color: #555; margin-top: 28px; }

/* ---- ④ 不安整理 ---- */
.reassure { background: #fff; }
.reassure .h2 { margin-bottom: 20px; max-width: 24em; }
.reassure-lead { font-size: 16px; line-height: 1.8; color: #555; max-width: 46em; margin-bottom: 40px; }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-bottom: 44px; }
.compare-box { border-radius: 10px; padding: 26px 28px; }
.compare-box.before { background: #f7f7fa; border: 1px solid #e5e2ec; }
.compare-box.after { background: #f3f0fa; border: 1px solid #b8aedc; }
.compare-box .cap { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.compare-box.before .cap { color: #555; }
.compare-box.after .cap { color: #3d348c; }
.compare-box .ttl { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.compare-box p { font-size: 14px; line-height: 1.6; color: #555; }
.compare-mid { text-align: center; }
.compare-mid .l { font-size: 12px; color: #3d348c; font-weight: 700; margin-bottom: 4px; }
.compare-mid .a { color: #3d348c; font-size: 24px; }
.checks3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.check-item { background: #f7f7fa; border-radius: 8px; padding: 24px 28px; display: flex; gap: 18px; }
.check-item .c { color: #3d348c; font-weight: 900; font-size: 18px; }
.check-item p { font-size: 15px; line-height: 1.7; }

/* ---- ⑤ アプローチ ---- */
.approach { background: #f7f7fa; }
.approach-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding-top: 116px; padding-bottom: 116px; }
.approach h2 { font-size: clamp(25px, 2.9vw, 34px); line-height: 1.45; font-weight: 700; margin-bottom: 28px; }
.approach .kicker { margin-bottom: 20px; }
.approach p { font-size: 17px; line-height: 1.9; color: #555; margin-bottom: 16px; }
.approach p:last-child { margin-bottom: 0; }
.approach-visual { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: #ece8f5; display: flex; align-items: center; justify-content: center; }
.approach-visual img { width: 100%; height: 100%; object-fit: cover; }
.approach-visual .ph { font-size: 13px; color: #8f8aa8; text-align: center; padding: 20px; }

/* ---- ⑥ サービス内容 ---- */
.service { background: #fff; }
.service .h2 { margin-bottom: 44px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-card { background: #fff; border: 1px solid #e5e2ec; border-radius: 10px; padding: 36px 34px; box-shadow: 0 1px 4px rgba(36,36,36,.05); transition: transform .15s ease, box-shadow .15s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(36,36,36,.10); }
.service-card .head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.service-card .n { font-size: 40px; font-weight: 800; color: #3d348c; line-height: .9; }
.service-card h3 { font-size: 19px; line-height: 1.45; font-weight: 700; }
.service-card p { font-size: 15px; line-height: 1.8; color: #555; }

/* ---- ⑦ 対応範囲 ---- */
.scope { background: #f7f7fa; }
.scope .h2 { margin-bottom: 36px; }
.scope-table { background: #fff; border: 1px solid #e5e2ec; border-radius: 10px; overflow: hidden; }
.scope-thead { display: grid; grid-template-columns: 168px 1fr 1fr; background: #242424; }
.scope-thead > div { padding: 16px 24px; font-size: 13px; font-weight: 700; color: #fff; }
.scope-row { display: grid; grid-template-columns: 168px 1fr 1fr; border-bottom: 1px solid #e5e2ec; }
.scope-row:last-child { border-bottom: none; }
.scope-row .ph { padding: 22px 24px; font-size: 15px; font-weight: 700; color: #3d348c; background: #f3f0fa; }
.scope-row .ex { padding: 22px 24px; font-size: 15px; line-height: 1.7; }
.scope-row .rem { padding: 22px 24px; font-size: 14px; line-height: 1.7; color: #555; }
.scope-note { font-size: 14px; line-height: 1.75; color: #555; margin-top: 22px; }
.scope-note + .scope-note { margin-top: 10px; }

/* ---- ⑧ 選ばれる理由 ---- */
.why { background: #fff; }
.why .h2 { margin-bottom: 40px; }
.why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: start; }
.why-list { display: flex; flex-direction: column; gap: 14px; }
.why-item { background: #fff; border: 1px solid #e5e2ec; border-radius: 8px; padding: 22px 26px; display: flex; gap: 16px; }
.why-item .c { color: #3d348c; font-weight: 900; }
.why-item p { font-size: 16px; line-height: 1.65; }
.why-box { background: #f3f0fa; border: 1px solid #e0d9f2; border-radius: 10px; padding: 32px 30px; }
.why-box .l { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #3d348c; margin-bottom: 16px; }
.why-box p { font-size: 15px; line-height: 1.85; color: #242424; }
.cta-band { margin-top: 44px; background: #f3f0fa; border-radius: 10px; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band p { font-size: 17px; font-weight: 700; color: #242424; }

/* ---- ⑨ 実績（唯一の濃色面） ---- */
.proof { background: #242424; color: #fff; }
.proof-inner { padding-top: 120px; padding-bottom: 120px; }
.proof .h2 { max-width: 26em; margin-bottom: 64px; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.45; }
.proof-main { display: grid; grid-template-columns: auto 1fr; gap: 72px; align-items: center; margin-bottom: 56px; }
.proof-num .l { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: #b8aedc; margin-bottom: 8px; }
.proof-num .row { display: flex; align-items: baseline; gap: 14px; }
.proof-num .big { font-size: clamp(96px, 13vw, 180px); font-weight: 800; line-height: .82; color: #fff; }
.proof-num .unit { font-size: 40px; font-weight: 700; }
.proof-num .src { font-size: 12px; color: #8f8aa8; margin-top: 14px; }
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.logo-cell { background: #fff; border-radius: 8px; padding: 18px 20px; display: flex; align-items: center; justify-content: center; min-height: 76px; }
.logo-cell img { max-height: 34px; max-width: 100%; object-fit: contain; }
.proof-note { font-size: 14px; line-height: 1.75; color: #b8aedc; max-width: 46em; margin-bottom: 44px; }
.proof-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.proof-cta p { font-size: 17px; font-weight: 700; }

/* ---- ⑩ 依頼の流れ ---- */
.flow { background: #fff; }
.flow .h2 { margin-bottom: 48px; }
.flow-row { display: flex; align-items: stretch; gap: 0; }
.flow-step { flex: 1; border-radius: 10px; padding: 26px 20px; }
.flow-step.first { background: #f3f0fa; border: 1px solid #b8aedc; }
.flow-step.rest { background: #f7f7fa; border: 1px solid #e5e2ec; }
.flow-step .n { font-size: 36px; font-weight: 800; line-height: .9; }
.flow-step.first .n { color: #3d348c; }
.flow-step.rest .n { color: #b8aedc; }
.flow-step p { font-size: 15px; line-height: 1.55; font-weight: 700; margin-top: 14px; }
.flow-arrow { display: flex; align-items: center; color: #b8aedc; font-size: 22px; padding: 0 8px; }

/* ---- ⑪ FAQ ---- */
.faq { background: #f7f7fa; }
.faq-inner { max-width: 840px; margin: 0 auto; }
.faq .h2 { margin-bottom: 36px; }
.faq-list { background: #fff; border: 1px solid #e5e2ec; border-radius: 10px; overflow: hidden; }
.faq-item { border-top: 1px solid #e5e2ec; }
.faq-item:first-child { border-top: none; }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-q span.q { font-size: 16px; font-weight: 700; color: #242424; line-height: 1.5; }
.faq-q span.sign { font-size: 22px; font-weight: 700; color: #3d348c; flex-shrink: 0; }
.faq-a { padding: 0 26px; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; }
.faq-item.open .faq-a { padding: 0 26px 24px; max-height: 400px; }
.faq-a p { font-size: 15px; line-height: 1.8; color: #555; }

/* ---- ⑫ 最終CTA・フォーム ---- */
.contact { background: #f3f0fa; }
.contact-inner { max-width: 920px; margin: 0 auto; padding-top: 104px; padding-bottom: 104px; }
.contact-head { text-align: center; margin-bottom: 44px; }
.contact-head h2 { font-size: clamp(24px, 2.9vw, 34px); line-height: 1.4; font-weight: 700; margin-bottom: 22px; }
.contact-head p { font-size: 16px; line-height: 1.85; color: #555; max-width: 40em; margin: 0 auto; }
.form { background: #fff; border: 1px solid #e0d9f2; border-radius: 12px; padding: 44px; display: flex; flex-direction: column; gap: 22px; }
.form label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.form label .opt { font-weight: 400; color: #555; font-size: 12px; margin-left: 6px; }
.form input, .form textarea { width: 100%; font-family: inherit; font-size: 16px; padding: 13px 15px; border: 1px solid #e5e2ec; border-radius: 6px; background: #fff; }
.form input:focus, .form textarea:focus { outline: 2px solid #3d348c; outline-offset: 1px; border-color: #3d348c; }
.form textarea { line-height: 1.7; resize: vertical; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form .err { color: #c0392b; font-size: 12px; margin-top: 6px; display: none; }
.form .field.invalid .err { display: block; }
.form .field.invalid input { border-color: #c0392b; }
.form-submit { align-self: center; font-size: 16px; font-weight: 700; background: #4b3aae; color: #fff; border: none; padding: 16px 44px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.form-submit:hover { background: #30286f; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(61,52,140,.25); }
.form-submit:active { transform: scale(.98); }
.form-privacy { font-size: 12px; line-height: 1.6; color: #555; margin-top: -8px; text-align: center; }

/* ---- ⑬ フッター ---- */
.ftr { background: #fff; border-top: 1px solid #e5e2ec; }
.ftr-inner { padding-top: 56px; padding-bottom: 56px; }
.ftr-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 36px; }
.ftr-brand .logo { margin-bottom: 12px; }
.ftr-brand p { font-size: 13px; line-height: 1.8; color: #555; }
.ftr-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.ftr-col .ttl { font-size: 12px; font-weight: 700; color: #242424; margin-bottom: 14px; }
.ftr-col .links { display: flex; flex-direction: column; gap: 10px; }
.ftr-col .links a { font-size: 13px; color: #555; }
.ftr-col .links a:hover { color: #3d348c; }
.ftr-copy { border-top: 1px solid #e5e2ec; padding-top: 24px; font-size: 12px; color: #555; }

/* ============================================================
   レスポンシブ（ブレイクポイント 760px）
   ============================================================ */
@media (max-width: 760px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .sec-pad { padding-top: 64px; padding-bottom: 64px; }
  .hdr-inner { padding: 12px 4px; }
  .logo-img { height: 27px; }
  .logo-img-ftr { height: 32px; }
  .nav { gap: 16px; }
  .nav a:not(.nav-cta) { display: none; }

  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 64px; }

  .issue-grid { grid-template-columns: 1fr; }
  .issues .h2 { white-space: normal; }

  .compare { grid-template-columns: 1fr; }
  .compare-mid .a { transform: rotate(90deg); display: inline-block; }
  .checks3 { grid-template-columns: 1fr; }
  .reassure-lead, .approach p { font-size: 14px; line-height: 1.7; }

  .approach-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
  .service-grid { grid-template-columns: 1fr; }

  .scope-thead { display: none; }
  .scope-row { grid-template-columns: 1fr; }
  .scope-row > div { border-left: none; padding: 10px 20px; }
  .scope-row .ph { padding-top: 20px; }
  /* 備考は列としては消すが、注釈として各行下に残す（申請代行の線引きを消さない） */
  .scope-row .ex { padding-bottom: 4px; }
  .scope-row .rem { padding-top: 0; padding-bottom: 18px; font-size: 12px; color: #8a8698; }
  .scope-row .rem::before { content: "※ "; }

  .why-grid { grid-template-columns: 1fr; gap: 28px; }
  .why .h2 { white-space: normal; }

  .proof-inner { padding-top: 72px; padding-bottom: 72px; }
  .proof-main { grid-template-columns: 1fr; gap: 36px; }
  .logos { grid-template-columns: 1fr 1fr; }

  .flow-row { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); justify-content: center; padding: 6px 0; }

  .form { padding: 28px 22px; }
  .form-2col { grid-template-columns: 1fr; }
}