/* LP刷新モック共通スタイル (9/13)。基調色 = frontend globals.css の --primary (teal-500,
   oklch(0.71 0.144 191) ≒ #14b8a6) とロゴの明るい緑を全面に (9/6 山本FB⑦)。
   余白広め・写真+実画面・番号付きセクション・非対称レイアウト。本番は lp-ai-crostyle.css に統合。 */
:root {
  --ink: #0d211f;         /* deep green-ink (本文・見出し) */
  --ink-2: #2f4a45;
  --gray: #5c7570;
  --line: #d8ece7;
  --teal: #14b8a6;        /* brand primary (frontend --primary / teal-500) */
  --teal-dark: #0e8f82;
  --teal-deep: #0a5f57;   /* 濃い緑 (見出し帯・強調) */
  --teal-bright: #37d6c1; /* ロゴの明るい緑 (アクセント) */
  --mint: #5fe0cf;        /* ロゴ最明部のミント */
  --paper: #ffffff;
  --paper-2: #eef8f5;     /* 淡い緑ウォッシュ (旧グレー面を置換) */
  --paper-3: #e2f4ef;
  --navy-bg: #0a3b37;     /* 濃緑バンド (旧ネイビー面を置換) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Noto Sans JP", sans-serif; color: var(--ink); background: #fff; line-height: 2; font-size: 18.5px; letter-spacing: .02em; word-break: auto-phrase; line-break: strict; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.wrap-n { max-width: 960px; margin: 0 auto; padding: 0 28px; }

/* ---------- header ---------- */
.gh { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.gh .wrap { max-width: none; padding: 0 44px; }
.gh-in { display: flex; align-items: center; gap: 34px; height: 80px; }
.logo { font-weight: 900; font-size: 22px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 12px; flex: none; }
.logo b { color: var(--teal-dark); }
.logo img { height: 52px; width: auto; display: block; }
.logo small { font-weight: 800; color: var(--teal-deep); font-size: 16.5px; border-left: 2px solid var(--teal-bright); padding-left: 12px; line-height: 1.35; letter-spacing: .02em; white-space: nowrap; flex: none; }
footer .logo img { height: 52px; }
.gh nav { margin-left: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
.gh nav > a { font-size: 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.gh nav > a:hover { color: var(--teal-dark); }
/* 業種別 ホバードロップダウン */
.gh nav .has-drop { position: relative; display: flex; align-items: center; }
.gh nav .has-drop > a { font-size: 16px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.gh nav .has-drop:hover > a { color: var(--teal-dark); }
.gh nav .has-drop > a::after { content: "▾"; font-size: 12.5px; margin-left: 5px; color: var(--gray); }
.gh nav .drop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px;
  opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 60; }
.gh nav .has-drop:hover .drop { opacity: 1; visibility: visible; }
.gh nav .drop-inner { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(10,59,55,.16);
  padding: 8px; min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.gh nav .drop a { font-size: 16.5px; font-weight: 500; color: var(--ink-2); padding: 10px 14px; border-radius: 7px; white-space: nowrap; }
.gh nav .drop a:hover { background: var(--paper-2); color: var(--teal-dark); }
.gh nav .drop a.active { color: var(--teal-deep); font-weight: 800; background: var(--paper-3); }
.gh nav .drop a.active::before { content: "●"; color: var(--teal); font-size: .7em; margin-right: 7px; vertical-align: 2px; }
.gh-cta { display: flex; gap: 12px; align-items: center; flex: none; }
.gh-cta .btn { flex: none; }
/* ハンバーガー (モバイルのみ表示) */
.gh-burger { display: none; width: 42px; height: 42px; border: none; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.gh-burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.gh.menu-open .gh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gh.menu-open .gh-burger span:nth-child(2) { opacity: 0; }
.gh.menu-open .gh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn { display: inline-block; font-weight: 700; font-size: 18.5px; padding: 15px 36px; border-radius: 4px; transition: .15s; text-align: center; white-space: nowrap; }
.btn-fill { background: var(--teal); color: #fff; box-shadow: 0 6px 18px rgba(20,184,166,.3); }
.btn-fill:hover { background: var(--teal-dark); }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--teal-dark); color: var(--teal-dark); }
.btn-ghost-w { border: 1.5px solid rgba(255,255,255,.7); color: #fff; }
.btn-sm { padding: 14px 30px; font-size: 18.5px; }
.arrow-link { font-size: 17.5px; font-weight: 700; color: var(--teal-dark); }
.arrow-link::after { content: "\00a0→"; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background:
  linear-gradient(110deg, #ffffff 0%, #ffffff 44%, #ddf4ee 44.2%, #bfeee2 100%); }
.hero-in { display: grid; grid-template-columns: 0.9fr 1.25fr; gap: 40px; align-items: center; align-content: center; min-height: calc(100vh - 84px); padding-top: 28px; padding-bottom: 28px; }
.hero-visual { position: relative; }
/* FVは左右の余白を詰めて広く使い、画像を大きく (下のセクションより広い) */
.hero > .wrap { max-width: 1440px; padding: 0 40px; }
/* トップFV: 動く画面(GIF)をさらに大きく (10/5 FB) */
.hero:not(.cat-hero) > .wrap { max-width: 1640px; }
.hero:not(.cat-hero) .hero-in { grid-template-columns: 0.8fr 1.4fr; gap: 44px; }
.hero:not(.cat-hero) h1 { font-size: 41px; line-height: 1.5; }
.hero:not(.cat-hero) h1 .nw { white-space: nowrap; }
.hero .eyebrow { display: block; margin-bottom: 16px; }
.hero h1 { font-size: 50.5px; line-height: 1.42; font-weight: 900; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--teal-deep); background: linear-gradient(transparent 66%, rgba(55,214,193,.45) 66%); }
.hero-tag { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); background: #fff; border-radius: 3px; padding: 6px 14px; margin-bottom: 22px; }
.hero-tag i { width: 8px; height: 8px; background: var(--teal); border-radius: 50%; display: inline-block; }
.hero-sub { margin-top: 22px; font-size: 20px; font-weight: 700; color: var(--ink-2); }
.hero-desc { margin-top: 10px; font-size: 18px; color: var(--gray); line-height: 2.1; }
.hero-btns { margin-top: 34px; display: flex; gap: 14px; }
.hero-note { margin-top: 14px; font-size: 16.5px; color: var(--gray); }

/* ---------- photo / screenshot placeholders ---------- */
.ph { position: relative; border-radius: 6px; overflow: hidden; background:
  linear-gradient(145deg, #14544d 0%, #0e433d 55%, #0a302c 100%); min-height: 240px;
  display: flex; align-items: flex-end; box-shadow: 0 18px 44px rgba(10,59,55,.22); }
.ph::before { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(255,255,255,.28); border-radius: 4px; }
.ph span { position: relative; color: rgba(255,255,255,.75); font-size: 16.5px; padding: 14px 20px; line-height: 1.7; }
.ph.lite { background: linear-gradient(145deg, #f2f5f7, #e2e9ee); box-shadow: 0 12px 30px rgba(14,27,44,.10); }
.ph.lite::before { border-color: rgba(14,27,44,.2); }
.ph.lite span { color: var(--gray); }
/* 実画像/イラストを差し込むプレースホルダ (ダッシュ枠・ダミー背景なし) */
.ph.shot { position: relative; background: #fff; min-height: 0; align-items: stretch; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(10,59,55,.12); cursor: pointer; }
.ph.shot img { width: 100%; height: auto; display: block; transition: transform .3s ease; }
.ph.shot:hover img { transform: scale(1.03); }
/* ホバー時: 暗転オーバーレイ + 「クリックで拡大」ヒント */
.ph.shot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(7,34,31,0); transition: background .2s; pointer-events: none; }
.ph.shot:hover::before { background: rgba(7,34,31,.22); }
.ph.shot::after { content: "⤢ クリックで拡大"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.94); z-index: 2;
  background: rgba(255,255,255,.96); color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: .02em;
  padding: 11px 20px; border-radius: 26px; box-shadow: 0 10px 26px rgba(0,0,0,.24); white-space: nowrap;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.ph.shot:hover::after { opacity: 1; transform: translate(-50%,-50%) scale(1); }
/* 拡大しない画像 (.nozoom: 写真・イメージ画像) はホバー演出なし */
.ph.shot:has(img.nozoom), .ph.shot.nozoom { cursor: default; }
.ph.shot:has(img.nozoom):hover img, .ph.shot.nozoom:hover img { transform: none; }
.ph.shot:has(img.nozoom)::before, .ph.shot:has(img.nozoom)::after, .ph.shot.nozoom::before, .ph.shot.nozoom::after { content: none; }

/* ---------- trust metrics strip ---------- */
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust-in { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-item { text-align: center; padding: 36px 20px; border-left: 1px solid var(--line); }
.trust-item:first-child { border-left: none; }
.trust-item .v { font-size: 53px; font-weight: 900; color: var(--ink); line-height: 1.2; }
.trust-item .v small { font-size: 20px; font-weight: 700; margin-left: 2px; }
.trust-item .v .unit-top { font-size: 16.5px; font-weight: 700; color: var(--teal-dark); display: block; letter-spacing: .1em; margin-bottom: 2px; }
.trust-item .k { font-size: 16.5px; color: var(--gray); margin-top: 4px; }

/* ---------- sections ---------- */
section { padding: 92px 0; }
.sec-tint { background: var(--paper-2); }
.eyebrow { font-size: 16px; font-weight: 800; letter-spacing: .22em; color: var(--teal-dark); text-transform: uppercase; }
.sec-title { font-size: 37.5px; font-weight: 900; line-height: 1.6; margin-top: 10px; }
.sec-lead { margin-top: 16px; font-size: 18.5px; color: var(--gray); max-width: 760px; }
.center { text-align: center; }
.center .sec-lead { margin-left: auto; margin-right: auto; }

/* problem cards */
.prob { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.prob-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--teal); padding: 32px 28px; }
.prob-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.prob-card p { font-size: 17.5px; color: var(--gray); }

/* numbered feature rows (asymmetric) */
.frow { display: flex; align-items: center; gap: 56px; padding: 58px 0; border-bottom: 1px solid var(--line); }
.frow:last-of-type { border-bottom: none; }
.frow.rev { flex-direction: row-reverse; }
.frow > div { flex: 1; }
.frow > div:has(.ph) { flex: 1.35; }   /* 画像側を一回り大きく */
.fnum { font-size: 70.5px; font-weight: 900; color: transparent; -webkit-text-stroke: 1.5px #b9cfcb; line-height: 1; letter-spacing: .04em; }
.frow h3 { font-size: 25.5px; font-weight: 900; margin: 12px 0 10px; line-height: 1.6; }
.frow p { font-size: 18px; color: var(--ink-2); }
.frow .sub { font-size: 16.5px; color: var(--gray); margin-top: 10px; }
/* 10/23: 03 の「社宅代行会社のシステムへの自動入力」を目立たせる枠 */
.frow .sub-hl { margin-top: 18px; padding: 16px 20px; background: #fff; border: 1px solid rgba(20,184,166,.35); border-left: 5px solid var(--teal-bright); border-radius: 6px; }
.frow .sub-hl b { display: block; font-size: 18.5px; font-weight: 800; color: var(--teal-deep); line-height: 1.6; }
.frow .sub-hl p { margin-top: 6px; font-size: 16px; color: var(--ink-2); line-height: 1.8; }
.frow .sub-hl .arrow-link { margin-left: 6px; white-space: nowrap; }
.frow .ph { min-height: 230px; }

/* checklist */
.checks { list-style: none; margin-top: 12px; }
.checks li { position: relative; padding-left: 26px; margin: 8px 0; font-size: 17.5px; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 6px; border-left: 2.5px solid var(--teal-dark); border-bottom: 2.5px solid var(--teal-dark); transform: rotate(-45deg); }

/* tags */
.tag { display: inline-block; font-size: 15.5px; font-weight: 700; border-radius: 3px; padding: 2px 10px; vertical-align: 2px; margin-left: 6px; }
.tag-dev { color: #7a5d00; background: #faf0cc; border: 1px solid #e7d391; }
.tag-cus { color: #1f4e8c; background: #e3edf9; border: 1px solid #b9cfe8; }

/* philosophy / deep-green band */
.band { background: linear-gradient(120deg, #0a3b37 0%, #0d514a 100%); color: #fff; padding: 88px 0; position: relative; }
.band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--teal-bright), var(--mint)); }
.band .eyebrow { color: var(--mint); }
.band blockquote { font-size: 29.5px; font-weight: 800; line-height: 2.1; margin-top: 18px; }
.band .sub { margin-top: 18px; font-size: 17px; color: rgba(255,255,255,.7); }

/* industry nav */
.ind { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.ind-card { position: relative; display: flex; background: #fff; border: 1px solid var(--line); transition: .15s; }
.ind-card:hover { border-color: var(--teal); box-shadow: 0 10px 28px rgba(14,27,44,.08); }
.ind-card .ph { min-height: 160px; width: 190px; border-radius: 0; box-shadow: none; flex: none; }
/* 業種カードの画像 (cover表示・カードはリンクなので拡大ヒントなし) */
.ind-card .ph.shot { width: 190px; min-height: 160px; border: none; box-shadow: none; border-radius: 0; cursor: inherit; overflow: hidden; }
.ind-card .ph.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ind-card:hover .ph.shot img { transform: scale(1.05); }
.ind-card .ph.shot::before, .ind-card .ph.shot::after { content: none; display: none; }
.ind-body { padding: 26px 28px; }
.ind-body h3 { font-size: 21.5px; font-weight: 900; }
.ind-body p { font-size: 17px; color: var(--gray); margin: 6px 0 10px; }

/* find-by-issue cards */
.kadai { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.kadai-card { background: #fff; border: 1px solid var(--line); padding: 32px 32px 28px; position: relative; }
.kadai-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--teal); }
.kadai-card h3 { font-size: 20.5px; font-weight: 800; line-height: 1.7; }
.kadai-q { display: inline-block; font-size: 14.5px; font-weight: 800; color: #fff; background: var(--ink); border-radius: 3px; padding: 2px 10px; margin-right: 10px; vertical-align: 3px; letter-spacing: .1em; }
.kadai-card p { font-size: 17px; color: var(--gray); margin: 8px 0 14px; }
.kadai-links { display: flex; flex-direction: column; gap: 6px; }
.kadai-links .arrow-link { font-size: 17px; }

/* comparison table */
table.cmp { width: 100%; border-collapse: collapse; margin-top: 40px; background: #fff; font-size: 17.5px; }
.cmp th, .cmp td { border: 1px solid var(--line); padding: 15px 18px; text-align: center; }
.cmp th { font-size: 17.5px; background: var(--paper-2); }
.cmp th.us { background: var(--ink); color: #fff; }
.cmp td.l { text-align: left; font-weight: 500; }
.cmp td.yes { color: var(--teal-dark); font-weight: 900; }
.cmp td.no { color: #b6c2cd; }

/* before / after */
.ba { width: 100%; border-collapse: separate; border-spacing: 0 14px; margin-top: 30px; font-size: 21px; }
.ba th, .ba td { padding: 22px 26px; text-align: left; vertical-align: middle; border: none; }
.ba th { font-size: 19px; font-weight: 900; text-align: center; padding: 10px 26px 0; letter-spacing: .08em; color: var(--gray); }
.ba th:last-child { color: var(--teal-deep); }
.ba td.arrow { text-align: center; width: 64px; padding: 0; font-size: 0; }
.ba td.arrow::before { content: "→"; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 24px; font-weight: 900; box-shadow: 0 6px 14px rgba(245,158,11,.35); }
.ba td.before { color: #5b6876; background: #eef1f4; border-radius: 12px; font-weight: 600; }
.ba td.after { font-weight: 900; color: #fff; font-size: 22.5px; line-height: 1.6; border-radius: 12px; background: linear-gradient(110deg, #0a5f57 0%, #14b8a6 100%); box-shadow: 0 10px 24px rgba(10,95,87,.22); }
.ba td.after b { color: #fde68a; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 44px; counter-reset: st; }
.step { position: relative; padding: 28px 20px 24px; background: #fff; border: 1px solid var(--line); border-left: none; }
.step:first-child { border-left: 1px solid var(--line); }
.step::before { counter-increment: st; content: "STEP " counter(st, decimal-leading-zero); font-size: 14.5px; font-weight: 800; letter-spacing: .15em; color: var(--teal-dark); }
.step h4 { font-size: 18.5px; font-weight: 800; margin: 6px 0 4px; }
.step p { font-size: 16.5px; color: var(--gray); line-height: 1.9; }

/* message (CEO) */
.msg { display: flex; gap: 52px; align-items: center; margin-top: 44px; }
.msg .ph { width: 300px; min-height: 340px; flex: none; }
.msg blockquote { font-size: 24px; font-weight: 800; line-height: 2.1; }
.msg .who { margin-top: 16px; font-size: 17px; color: var(--gray); }
.msg .body { font-size: 18px; color: var(--ink-2); margin-top: 14px; }

/* security */
.sec3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.sec3 .card { background: #fff; border: 1px solid var(--line); padding: 32px 28px; }
.sec3 h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.sec3 p { font-size: 17px; color: var(--gray); }

/* pricing */
.price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.price .card { background: #fff; border: 1px solid var(--line); padding: 36px 28px; text-align: center; }
.price .card.hot { border: 2px solid var(--teal-dark); }
.price h3 { font-size: 18.5px; font-weight: 800; }
.price .p { font-size: 37.5px; font-weight: 900; color: var(--ink); margin: 10px 0 4px; }
.price .p small { font-size: 18.5px; font-weight: 700; }
.price p.d { font-size: 16.5px; color: var(--gray); }

/* faq */
.faq { margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line); padding: 22px 6px; font-size: 18.5px; }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 34px; }
.faq summary::before { content: "Q."; color: var(--teal-dark); font-weight: 900; margin-right: 10px; }
.faq summary::after { content: "+"; position: absolute; right: 8px; color: var(--gray); font-weight: 400; font-size: 24px; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 10px; color: var(--ink-2); font-size: 17.5px; padding-left: 30px; }

/* final CTA */
.final { background: linear-gradient(120deg, #0a5f57 0%, #14b8a6 100%); color: #fff; text-align: center; padding: 88px 0; }
.final h2 { font-size: 33px; font-weight: 900; line-height: 1.8; }
.final p { margin-top: 12px; font-size: 17.5px; color: rgba(255,255,255,.75); }
.final .btns { margin-top: 30px; display: flex; gap: 16px; justify-content: center; }
.final .btn-fill { background: #fff; color: var(--ink); }

/* footer */
footer { background: #072a27; color: #a7c6bf; padding: 54px 0 40px; font-size: 16.5px; border-top: 3px solid var(--teal); }
.foot-in { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
footer .logo { color: #fff; }
footer .foot-tel { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: .02em; }
footer .foot-tel small { display: block; font-size: 14px; font-weight: 600; color: #7fb3aa; letter-spacing: .1em; margin-top: 2px; }
footer a { color: #a7c6bf; margin-right: 18px; line-height: 2.4; }
footer a:hover { color: var(--mint); }
.foot-note { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 15.5px; color: #5f8078; }

/* category page hero variant — 基調色(teal)グラデ背景 */
.cat-hero { background: linear-gradient(120deg, #0a5f57 0%, #14b8a6 100%); color: #fff; }
.cat-hero .hero-in { padding-top: 64px; padding-bottom: 64px; min-height: 0; align-content: normal; }
.cat-hero h1 { color: #fff; }
.cat-hero h1 em { color: #fff; background: linear-gradient(transparent 66%, rgba(95,224,207,.65) 66%); }
.cat-hero .hero-desc { color: rgba(255,255,255,.72); }
.cat-hero .hero-tag { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #d7e3ef; }

/* case */
.case { display: flex; gap: 40px; align-items: stretch; background: #fff; border: 1px solid var(--line); margin-top: 44px; }
.case .ph { width: 340px; min-height: 240px; border-radius: 0; box-shadow: none; flex: none; }
.case-body { padding: 34px 38px; }
.case-metric { font-size: 42px; font-weight: 900; color: var(--ink); }
.case-metric b { color: var(--teal-dark); font-size: 53px; }
.case-body h3 { font-size: 20px; font-weight: 800; margin-top: 6px; }
.case-body p { font-size: 17.5px; color: var(--gray); margin-top: 10px; }

/* production notes (collapsed, discreet) */
.wf-memo { background: #fbf8ec; border-top: 1px solid #e5dcae; font-size: 14.5px; color: #7a6a20; }
.wf-memo summary { cursor: pointer; padding: 12px 28px; font-weight: 700; list-style: none; }
.wf-memo ul { padding: 0 28px 16px 48px; }
.wf-memo li { margin: 3px 0; line-height: 1.8; }

/* ---------- credentials (国交省 / エクセレント企業) ---------- */
.cred-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cred { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--teal-deep); background: #fff; border: 1px solid var(--teal-bright); border-radius: 30px; padding: 6px 15px; box-shadow: 0 3px 10px rgba(10,59,55,.06); }
.cred .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; }
.cred img { height: 20px; width: auto; display: block; }
/* エクセレント企業ロゴ = ヒーロー右上に掲載枠 (スマートリサーチ・有料) */
.hero-visual { position: relative; }
/* メダル+受賞名と、ゴールドのバナーを横並び (SP だけ縦積み。現行 LP と同じ) */
.award-stack { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 0 0 18px auto; text-decoration: none; }
.award-badge { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px 8px 10px; box-shadow: 0 10px 26px rgba(10,59,55,.16); }
.award-stack:hover .award-badge { border-color: var(--teal-bright); }
.award-stack .aw-banner { display: block; width: 220px; max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 26px rgba(10,59,55,.16); }
.award-badge .aw-medal { width: 48px; height: auto; flex: none; display: block; }
.award-badge .aw-txt { display: flex; flex-direction: column; text-align: left; }
.award-badge .aw-k { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: var(--teal-dark); white-space: nowrap; }
.award-badge .aw-v { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.4; white-space: nowrap; }
footer .foot-award { margin-top: 26px; font-size: 13px; line-height: 1.8; color: #5f8078; }

/* ---------- 対応書類ストリップ (6種+α をトップへ) ---------- */
.doctypes { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 22px 0; }
.doctypes-in { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; }
.doctypes .lead { font-weight: 800; color: var(--teal-deep); font-size: 18px; }
.dt-chip { font-size: 16px; font-weight: 700; color: var(--ink-2); background: #fff; border: 1px solid var(--teal-bright); border-radius: 20px; padding: 5px 14px; }
.dt-plus { font-size: 16px; font-weight: 800; color: var(--teal-dark); }

/* ---------- お客様の声 ---------- */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.voice { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px 24px 20px; position: relative; overflow: hidden; }
.voice::before { content: "\201C"; position: absolute; top: 2px; right: 16px; font-size: 61.5px; color: var(--paper-3); font-weight: 900; line-height: 1; }
.voice .vtag { display: inline-block; font-size: 14px; font-weight: 800; color: var(--teal-deep); background: var(--paper-3); border-radius: 20px; padding: 3px 12px; margin-bottom: 12px; }
.voice .vq { font-size: 17.5px; font-weight: 700; color: var(--ink); line-height: 1.95; position: relative; z-index: 1; }
.voice .va { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 15.5px; color: var(--gray); }
.voice .va .fx { color: var(--teal-dark); font-weight: 800; }
.voices-bridge { margin-top: 30px; text-align: center; font-size: 21px; font-weight: 900; color: var(--teal-deep); line-height: 1.9; }
.voices-bridge em { font-style: normal; background: linear-gradient(transparent 66%, rgba(55,214,193,.4) 66%); }
/* 実名インタビュー枠 (契約後に取得。掲載スペースだけ先行確保) */
.vslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.vslot { border: 1.5px dashed var(--teal); border-radius: 8px; padding: 24px 20px; text-align: center; background: rgba(94,224,207,.06); }
.vslot .vs-face { width: 60px; height: 60px; border-radius: 50%; background: var(--paper-3); margin: 0 auto 12px; }
.vslot b { display: block; color: var(--ink); font-size: 17px; }
.vslot span { font-size: 15.5px; color: var(--gray); }
.vslot .soon { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 800; letter-spacing: .1em; color: var(--teal-dark); }

/* ---------- お客様の声 カルーセル (Review) ---------- */
#voice > .wrap { max-width: 1120px; }   /* 他セクションと同幅 (サイドメニューと重ならない幅) */
.reviews { position: relative; margin-top: 44px; }
/* 両脇に前後カードのスリバーを覗かせ、端はフェードでぼかす (peek carousel) */
.reviews-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 8px 56px 22px; scroll-padding-inline: 56px; -webkit-overflow-scrolling: touch;
  --fade: 96px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); }
.reviews-track::-webkit-scrollbar { height: 8px; }
.reviews-track::-webkit-scrollbar-track { background: transparent; }
.reviews-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.rv-card { scroll-snap-align: center; flex: 0 0 clamp(320px, 30%, 400px); background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 32px 30px; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(10,59,55,.05); }
.rv-title { font-size: 21px; font-weight: 900; line-height: 1.6; min-height: 61px; }
.rv-stars { color: var(--teal); font-size: 20px; letter-spacing: 4px; margin: 14px 0 16px; }
.rv-stars .off { color: #cfe6e0; }
.rv-divider { border-top: 1px solid var(--line); margin: 0 0 18px; }
.rv-body { font-size: 17px; color: var(--ink-2); line-height: 2; flex: 1; }
.rv-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rv-name { font-size: 17.5px; font-weight: 800; color: var(--ink); }
.rv-badge { display: inline-block; font-size: 14px; font-weight: 800; color: #fff; background: var(--teal-dark);
  border-radius: 4px; padding: 3px 10px; margin-left: 8px; vertical-align: 2px; }
.rv-org { font-size: 15.5px; color: var(--gray); margin-top: 6px; }
.rv-card.pending { border-style: dashed; border-color: var(--teal); background: rgba(94,224,207,.06);
  align-items: center; justify-content: center; text-align: center; }
.rv-card.pending .vs-face { width: 60px; height: 60px; border-radius: 50%; background: var(--paper-3); margin-bottom: 14px; }
.rv-card.pending .soon { display: inline-block; margin: 8px 0 12px; font-size: 13.5px; font-weight: 800; letter-spacing: .1em; color: var(--teal-dark); }
.rv-arrow { position: absolute; top: 44%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--teal-dark); color: #fff; font-size: 26.5px; line-height: 1;
  box-shadow: 0 8px 22px rgba(10,59,55,.3); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.rv-arrow:hover { background: var(--teal-deep); }
.rv-prev { left: -14px; }
.rv-next { right: -14px; }

/* ---------- 料金表ページ ---------- */
.ptable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 40px; }
.ptable { width: 100%; border-collapse: collapse; background: #fff; font-size: 17px; }
.ptable th, .ptable td { border: 1px solid var(--line); padding: 16px 18px; text-align: center; vertical-align: middle; }
.ptable thead th { background: var(--teal-deep); color: #fff; font-size: 17.5px; }
.ptable thead th.rec { background: var(--teal-dark); }
.ptable thead th .yen { font-size: 24px; font-weight: 900; display: block; margin-top: 4px; }
.ptable thead th small { font-weight: 600; opacity: .85; }
.ptable th.rowh { text-align: left; background: var(--paper-2); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.ptable td.rec { background: rgba(94,224,207,.09); font-weight: 700; }
.ptable td.yes { color: var(--teal-dark); font-weight: 900; }
.ptable td.no { color: #bcd0cb; }
.ptable sup { font-size: 11.5px; font-weight: 700; }
.ptable td.feat { text-align: left; font-weight: 500; color: var(--ink-2); }
.ptable td small { display: inline-block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--gray); line-height: 1.5; }
.price-credit { margin-top: 24px; font-size: 17px; color: var(--ink-2); line-height: 1.95; }
.price-credit b { color: var(--ink); }
.price-credit .arrow-link, .faq .arrow-link { margin-left: 8px; font-size: inherit; white-space: nowrap; }
.price-notes { font-size: 14.5px; color: var(--gray); line-height: 1.8; margin-top: 20px; }
.price-notes p { margin: 6px 0 0; padding-left: 2.2em; text-indent: -2.2em; }
.price-more { margin-top: 26px; font-size: 17.5px; color: var(--ink-2); line-height: 2; }
.price-more .arrow-link { margin-left: 6px; white-space: nowrap; }
.credit-box { background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 6px; padding: 26px 30px; margin-top: 40px; }
.credit-box h3 { font-size: 18.5px; font-weight: 800; margin-bottom: 8px; }
.credit-box p { font-size: 17px; color: var(--ink-2); }

/* ---------- 資料DLフォームページ ---------- */
.dlform { max-width: 660px; margin: 40px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 38px 44px; box-shadow: 0 14px 34px rgba(10,59,55,.08); }
.dlrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dlform label { display: block; font-weight: 700; font-size: 16.5px; margin: 16px 0 6px; }
.dlform .req { color: #e13c3c; font-size: 14px; font-weight: 800; margin-left: 6px; }
.dlform input, .dlform select, .dlform textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; font-size: 17.5px; font-family: inherit; background: #fff; }
.dlform input:focus, .dlform select:focus, .dlform textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
.dlform .consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; font-size: 16px; color: var(--gray); line-height: 1.8; }
.dlform .consent input { width: auto; margin-top: 5px; }
.dlform .submit { margin-top: 26px; }
.dlform .submit .btn { width: 100%; }
.dl-aside { max-width: 660px; margin: 22px auto 0; text-align: center; font-size: 16px; color: var(--gray); }
/* 資料DL 2カラム (左=資料プレビュー / 右=フォーム) */
.dl-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 8px; }
.dl-layout .dlform { max-width: none; margin: 0; }
.dl-doc-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px; box-shadow: 0 10px 30px rgba(10,59,55,.06); }
.dl-cover { position: relative; border-radius: 8px; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: linear-gradient(150deg, #0a5f57 0%, #14b8a6 100%); color: #fff; padding: 30px; }
.dl-cover .dl-eyebrow { display: inline-block; font-size: 14.5px; font-weight: 800; letter-spacing: .08em; background: rgba(255,255,255,.18); border-radius: 20px; padding: 5px 16px; }
.dl-cover h3 { font-size: 28.5px; font-weight: 900; line-height: 1.5; margin: 16px 0 6px; }
.dl-cover p { font-size: 16.5px; opacity: .9; }
.dl-cover .dl-logo { margin-top: 20px; font-weight: 900; font-size: 20px; letter-spacing: .02em; }
.dl-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.dl-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dl-dots span.on { background: var(--teal); }
.dl-thumbs { display: flex; gap: 10px; margin-top: 16px; }
.dl-thumb { flex: 1; height: 78px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2);
  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--teal-deep); padding: 6px; }
.dl-stat { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; font-size: 16.5px; font-weight: 800; color: var(--teal-deep); }
.dl-radios { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 8px; }
.dl-radios label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16.5px; font-weight: 500; }
.dl-radios input { width: auto; }

/* ---------- floating contact (スクロールで右下に追従) ---------- */
.floatcta { position: fixed; right: 24px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .25s, transform .25s; }
.floatcta.show { opacity: 1; transform: none; pointer-events: auto; }
.fc-group { position: relative; }
.fc-close { position: absolute; top: -14px; right: -12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); font-size: 18.5px; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(10,59,55,.22); }
.fc-close:hover { background: var(--paper-2); color: var(--ink); }
.fc-top { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; border: none; cursor: pointer;
  font-size: 16.5px; font-weight: 800; letter-spacing: .04em; padding: 11px 20px; border-radius: 24px; box-shadow: 0 8px 20px rgba(10,59,55,.28); }
.fc-main { display: flex; align-items: stretch; gap: 12px; }
.fc-tel { display: flex; flex-direction: column; justify-content: center; text-align: center; color: #fff; border-radius: 14px; padding: 16px 32px;
  background: linear-gradient(135deg, var(--teal-dark), var(--teal-deep)); box-shadow: 0 14px 36px rgba(10,59,55,.36); }
.fc-tel .fc-k { font-size: 15.5px; font-weight: 700; opacity: .92; letter-spacing: .04em; }
.fc-tel .fc-num { font-size: 33px; font-weight: 900; letter-spacing: .02em; line-height: 1.3; }
.fc-tel .fc-sub { font-size: 15.5px; opacity: .85; }
.fc-btns { display: flex; flex-direction: column; gap: 10px; }
.fc-btn { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; padding: 0 28px; border-radius: 11px; white-space: nowrap; box-shadow: 0 8px 20px rgba(10,59,55,.2); }
.fc-shiryo { background: #fff; color: var(--teal-deep); border: 1px solid var(--teal-bright); }
.fc-soudan { background: var(--teal); color: #fff; }
.fc-soudan:hover { background: var(--teal-dark); }

/* ---------- FV スライドショー ---------- */
.fvslide { position: relative; overflow: hidden; }
.fvslide .ph.shot { box-shadow: none; }   /* FVスライダーは影なし */
.fvs-track { display: flex; transition: transform .5s ease; }
.fvs-item { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; }
.fvs-cap { margin-top: 12px; font-size: 16.5px; font-weight: 600; color: var(--ink-2); line-height: 1.75; text-align: left; }
.fvs-cap b { color: var(--teal-deep); }
.fvs-dots { display: flex; gap: 9px; justify-content: center; margin-top: 16px; }
.fvs-dots button { position: relative; overflow: hidden; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--teal-dark); background: #fff; cursor: pointer; padding: 0; transition: width .25s, border-radius .25s; }
.fvs-dots button:hover { border-color: var(--teal); }
.fvs-dots button.on { width: 32px; border-radius: 6px; background: #d3efe9; }
.fvs-gauge { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--teal-dark); }
/* 左右ナビ矢印 (画像の縦中央あたり) */
.fvs-arrow { position: absolute; top: calc(50% - 46px); transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--teal-deep); font-size: 22px; line-height: 1;
  box-shadow: 0 6px 18px rgba(10,59,55,.2); display: flex; align-items: center; justify-content: center; transition: .15s; }
.fvs-arrow:hover { background: #fff; color: var(--teal-dark); box-shadow: 0 8px 22px rgba(10,59,55,.28); }
.fvs-prev { left: 10px; }
.fvs-next { right: 10px; }

/* ---------- トップページ: デモ利用ゲート (第2CTA) ---------- */
.demo-cta-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; margin-top: 40px; }
@media (max-width: 900px) { .demo-cta-grid { grid-template-columns: 1fr; } }

/* ---------- image lightbox (画像クリックで拡大モーダル) ---------- */
.ph.shot img, img.zoomable { cursor: pointer; }
.ph.shot img.nozoom, .ph.nozoom img { cursor: default; }
.lb-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(7,34,31,.82); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; padding: 40px 40px 26px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.lb-overlay.open { opacity: 1; pointer-events: auto; }
.lb-overlay img.lb-movie { width: 96vw; height: calc(100vh - 110px); max-height: none; max-width: none; object-fit: contain; background: transparent; box-shadow: none; }
.lb-overlay img { max-width: 94vw; max-height: calc(100vh - 150px); border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.5); cursor: default; background: #fff; }
.lb-cap { position: static; text-align: center; color: rgba(255,255,255,.9); font-size: 15.5px; padding: 0 24px; }
.lb-close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border: none; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; }
.lb-close:hover { background: var(--paper-2); }

/* ---------- responsive (tablet) ---------- */
@media (max-width: 1340px) {
  .gh nav { gap: 11px; }
  .gh nav > a { font-size: 15px; }
  .gh-cta .btn { font-size: 14.5px; padding: 9px 14px; }
}
@media (max-width: 1120px) and (min-width: 761px) {
  /* 中間幅では主要項目のみ表示 */
  .gh nav a[href="#reason"], .gh nav a[href="#effect"], .gh nav a[href="#trial"] { display: none; }
}
@media (max-width: 1000px) {
  .gh-in { gap: 16px; }
  .logo small { display: none; }
  .hero h1 { font-size: 40.5px; }
  .prob, .sec3, .price { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step:nth-child(4) { border-left: 1px solid var(--line); }
}

/* ---------- responsive (mobile) ---------- */
@media (max-width: 760px) {
  body { font-size: 17.5px; line-height: 1.95; }
  .wrap, .wrap-n { padding: 0 20px; }

  /* header: ロゴ + ハンバーガー。メニューは画面を覆うオーバーレイ */
  .gh .wrap { padding: 0 20px; }
  .gh-in { height: 60px; column-gap: 12px; }
  .logo img { height: 34px; }
  .logo small { display: none; }
  .gh-tel { display: none; }
  .gh-burger { display: flex; margin-left: auto; }
  /* nav = フルスクリーンのオーバーレイ (ヘッダー下〜画面下端) */
  .gh nav { display: none; }
  .gh.menu-open nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 55;
    background: #fff; padding: 8px 20px 160px; overflow-y: auto; }
  .gh nav > a { padding: 15px 4px; font-size: 18px; border-bottom: 1px solid var(--line); }
  .gh nav .has-drop { display: block; }
  .gh nav .has-drop > a { display: block; padding: 15px 4px; border-bottom: 1px solid var(--line); }
  .gh nav .has-drop > a::after { content: ""; margin: 0; }
  .gh nav .drop { position: static; opacity: 1; visibility: visible; transform: none; padding-top: 0; }
  .gh nav .drop-inner { box-shadow: none; border: none; background: transparent; padding: 2px 0 6px 14px; min-width: 0; }
  .gh nav .drop a { padding: 12px 4px; font-size: 17.5px; }
  .gh nav .drop a.active { background: transparent; }
  /* CTAはオーバーレイ下部に固定 */
  .gh-cta { display: none; }
  .gh.menu-open .gh-cta {
    display: flex; flex-direction: column; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
    background: #fff; border-top: 1px solid var(--line); padding: 14px 20px; margin: 0; }
  .gh-cta .btn { width: 100%; padding: 14px 20px; font-size: 17px; }
  .gh-cta .btn-line { display: block; }

  /* hero: 縦積み。斜め背景は単色に (cat-heroの緑グラデは維持) */
  .hero:not(.cat-hero) { background: #f2f8f7; }
  .hero-in { display: block; padding-top: 48px; padding-bottom: 52px; min-height: 0; }
  .hero h1 { font-size: 33px; line-height: 1.6; }
  .hero-tag { margin-bottom: 18px; }
  .hero-sub { font-size: 18.5px; margin-top: 18px; }
  .hero-sub br, .hero-desc br { display: none; }
  .hero-btns { flex-direction: column; gap: 12px; margin-top: 28px; }
  .hero-btns .btn { width: 100%; padding: 17px 20px; }
  .hero-note { text-align: center; }
  .hero-in > div + div { margin-top: 32px; }
  .ph { min-height: 190px; }
  .hero-visual { margin-bottom: 30px; }   /* スライダー(ゲージ)下の余白 */
  .cred-row { margin-top: 6px; }          /* 国交省ラベルが上端に張り付かないように */
  /* 不透明化 + backdrop-filter解除 (fixedオーバーレイの基準をviewportにする) */
  .gh { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* trust: 縦積み + 上罫線 */
  .trust-in { grid-template-columns: 1fr; }
  .trust-item { border-left: none; border-top: 1px solid var(--line); padding: 24px 16px; }
  .trust-item:first-child { border-top: none; }
  .trust-item .v { font-size: 42px; }

  section { padding: 56px 0; }
  .sec-title { font-size: 26.5px; }
  .sec-title br { display: none; }
  .sec-lead { font-size: 17px; }

  .prob, .ind, .kadai, .sec3, .price, .steps { grid-template-columns: 1fr; }

  /* feature rows: 縦積み */
  .frow, .frow.rev { display: block; padding: 40px 0; }
  .fnum { font-size: 50.5px; }
  .frow h3 { font-size: 22px; }
  .frow .ph { margin-top: 22px; min-height: 180px; }

  .band { padding: 60px 0; }
  .band blockquote { font-size: 21.5px; }
  .band blockquote br { display: none; }

  /* industry cards: 写真を上に */
  .ind-card { display: block; }
  .ind-card .ph { width: 100%; min-height: 110px; }
  /* 業種画像: 幅いっぱい + 縦中央 + 上下トリミング (スマホ) */
  .ind-card .ph.shot { width: 100%; height: 220px; min-height: 0; }
  .ind-card .ph.shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

  /* tables: 比較は横スクロール、Before/Afterは縦積みカード化 */
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.cmp { min-width: 560px; font-size: 16.5px; }
  .cmp th, .cmp td { padding: 11px 12px; }
  .ba, .ba tbody { display: block; background: transparent; }  /* 白背景を打ち消す(カード間の白をなくす) */
  .ba thead { display: none; }
  .ba tr:first-child { display: none; }   /* ヘッダ行(空セル)を隠す */
  .ba tr { display: block; border: 1.5px solid #b3d6cd; border-radius: 10px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(10,59,55,.06); }
  .ba td { display: block; border: none; padding: 14px 16px; }
  .ba td.arrow { display: none; }
  .ba td.before { color: var(--ink-2); background: #fff; border-bottom: 1.5px solid #b3d6cd; }
  .ba td.after { background: linear-gradient(110deg, #0a5f57 0%, #14b8a6 100%); color: #fff; font-weight: 900; }
  .ba td.before, .ba td.after { border-radius: 0; box-shadow: none; }
  .ba { border-spacing: 0; }
  .ba td.before::before { content: "これまで"; display: block; font-size: 13px; font-weight: 800; color: var(--gray); letter-spacing: .12em; margin-bottom: 5px; }
  .ba td.after::before { content: "導入後"; display: block; font-size: 13px; font-weight: 800; color: #d7f5ee; letter-spacing: .12em; margin-bottom: 5px; }

  /* steps: 縦タイムライン */
  .step { border: 1px solid var(--line); border-top: none; }
  .step:first-child { border-top: 1px solid var(--line); }

  .msg { display: block; }
  .msg .ph { width: 100%; min-height: 240px; margin-bottom: 24px; }
  .msg blockquote { font-size: 20px; }

  .case { display: block; }
  .case .ph { width: 100%; min-height: 170px; }
  .case-body { padding: 24px 20px; }
  .case-metric { font-size: 31px; } .case-metric b { font-size: 39.5px; }

  .final { padding: 60px 0; }
  .final h2 { font-size: 24px; }
  .final h2 br { display: none; }
  .final .btns { flex-direction: column; align-items: stretch; }

  .foot-in { display: block; }
  .foot-in > div + div { margin-top: 22px; }
  footer .logo img { height: 42px; }

  .cat-hero .hero-in { padding-top: 40px; padding-bottom: 44px; }

  .voices, .vslots { grid-template-columns: 1fr; }
  .voices-bridge { font-size: 18.5px; }
  /* 声カルーセル: 1枚をはっきり表示 + 左右矢印 (端フェードは無効) */
  #voice > .wrap { max-width: none; }
  .reviews-track { gap: 14px; padding: 8px 20px 22px; scroll-padding-inline: 20px;
    -webkit-mask-image: none; mask-image: none; }
  .rv-card { flex: 0 0 calc(100% - 40px); max-width: calc(100% - 40px); padding: 26px 22px; }
  .rv-title { min-height: auto; }
  .rv-arrow { display: flex; width: 40px; height: 40px; font-size: 20px; top: 44%; }
  .rv-prev { left: 2px; }
  .rv-next { right: 2px; }
  .award-stack { flex-direction: column; gap: 10px; margin: 0 auto 18px; }
  .doctypes-in { gap: 10px; }
  .doctypes .lead { flex-basis: 100%; }
  .dlform { padding: 28px 22px; }
  .dlrow { grid-template-columns: 1fr; gap: 0; }
  .dl-layout { grid-template-columns: 1fr; gap: 28px; }
  .dl-cover { min-height: 220px; }
  .dl-cover h3 { font-size: 23px; }
  .ptable { min-width: 620px; }

  .floatcta { right: 12px; bottom: 12px; gap: 10px; }
  .fc-main { gap: 10px; }
  .fc-tel { padding: 12px 18px; }
  .fc-tel .fc-num { font-size: 25.5px; }
  .fc-btn { font-size: 16.5px; padding: 10px 16px; }
  .fc-top { padding: 9px 16px; font-size: 16px; }
}

@media (max-width: 1000px) {
  .voices { grid-template-columns: repeat(2, 1fr); }
  .vslots { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 劣化書類デモ (index/demo.html 共通) ---------- */
/* ---- demo page local styles ---- */
.demo-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.demo-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: start; margin-top: 36px; }
.demo-docpane { position: sticky; top: 96px; }
.demo-doc { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(10,59,55,.10); }
.demo-doc img { width: 100%; display: block; }
.demo-slider { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; }
.demo-slider .lv-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.demo-slider .lv-name { font-size: 17px; font-weight: 800; color: var(--teal-deep); }
.demo-slider .lv-sub { font-size: 13px; color: var(--gray); }
.demo-slider input[type=range] { width: 100%; accent-color: var(--teal-dark); height: 32px; }
.demo-slider .lv-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--gray); }
.demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.demo-stat { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 12px 8px; text-align: center; }
.demo-stat .n { font-size: 26px; font-weight: 900; line-height: 1.2; }
.demo-stat .k { font-size: 12px; color: var(--gray); }
.demo-stat.ok .n { color: var(--teal-dark); }
.demo-stat.warn .n { color: #b98300; }
.demo-stat.ng .n { color: #b3541e; }
.demo-stat.zero .n { color: var(--teal-deep); }
.demo-fields { display: flex; flex-direction: column; gap: 8px; }
.demo-field { display: grid; grid-template-columns: 148px 1fr auto; gap: 10px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 8px; padding: 11px 14px; }
.demo-field .fk { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.demo-field .fv { font-size: 15px; font-weight: 600; }
.demo-field .conf { font-size: 12px; color: var(--gray); white-space: nowrap; }
.demo-field.st-check { border-left-color: #e6b422; background: #fffcf1; }
.demo-field.st-unread { border-left-color: #cf6a3c; background: #fdf6f2; }
.demo-field.st-check .fv { color: #8a6d00; }
.demo-field.st-unread .fv { color: #b3541e; font-weight: 800; }
.st-badge { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 4px; padding: 2px 8px; margin-left: 8px; vertical-align: 1px; }
.st-ok { color: #0e8f82; background: #e2f6f2; }
.st-chk { color: #8a6d00; background: #fbf0c8; }
.st-ng { color: #b3541e; background: #f9e3d6; }
.demo-note { margin-top: 16px; padding: 16px 20px; background: var(--paper-3); border-radius: 9px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.demo-note b { color: var(--teal-deep); }
/* gate */
.demo-gate { max-width: 620px; margin: 40px auto 0; }
.demo-locked { filter: blur(3px); pointer-events: none; user-select: none; }
@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-docpane { position: static; }
  .demo-stats { grid-template-columns: repeat(2, 1fr); }
  .demo-field { grid-template-columns: 118px 1fr; }
  .demo-field .conf { grid-column: 2; }
}

/* ── デモ: 本番導線 + サンプルDL (demo.html) ── */
.demo-live { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 34px; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.demo-live-main h3 { font-size: 22px; margin: 6px 0 10px; color: var(--ink); }
.demo-live-main p { font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }
.demo-live-btn { margin-top: 18px; width: 100%; text-align: center; }
.demo-live-cap { font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.demo-live-cap span { display: block; font-weight: 400; font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.demo-dl { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.demo-dl:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgba(20,184,166,.12); }
.demo-dl img { width: 44px; height: 60px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.demo-dl span { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.demo-dl span em { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--gray); }
.demo-dl b { font-size: 12.5px; color: var(--teal-dark); white-space: nowrap; }
.demo-live-note { font-size: 12px; color: var(--gray); margin-top: 4px; }
.demo-live-warn { font-size: 13px; font-weight: 700; color: #c2410c; margin-top: 10px; }
@media (max-width: 860px) { .demo-live { grid-template-columns: 1fr; } }

/* ── 処理イメージアニメーション (index.html #procAnim) ── */
.proc-anim { --pa-h: clamp(400px, calc(100vh - 360px), 470px); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-top: 28px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.pa-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pa-tab { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: var(--gray); background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.pa-tab b { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--gray); }
.pa-tab.on { background: #fff; border-color: var(--teal); color: var(--ink); box-shadow: 0 4px 14px rgba(20,184,166,.14); }
.pa-tab.on b { background: var(--teal); border-color: var(--teal); color: #fff; }
.pa-stage { position: relative; min-height: 480px; }
.pa-scene { position: absolute; inset: 0; display: flex; gap: 20px; opacity: 0; pointer-events: none; transition: opacity .35s; }
.pa-scene.on { opacity: 1; pointer-events: auto; }
/* Step1: 束アップロード */
.pa-drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; border: 2px dashed var(--line); border-radius: 12px; background: var(--paper-2); padding: 26px; }
.pa-drop-in { text-align: center; }
.pa-cloud { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--teal); color: var(--teal-dark); font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pa-drop-main { font-size: 16.5px; font-weight: 800; color: var(--ink); }
.pa-drop-sub { margin-top: 6px; font-size: 12.5px; color: var(--gray); }
.pa-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 660px; }
.pa-file { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; color: var(--ink); box-shadow: 0 6px 16px rgba(13,33,31,.08); opacity: 0; transform: translateY(22px) scale(.92); transition: opacity .45s, transform .45s; }
.pa-file i { font-style: normal; background: #e05d44; color: #fff; font-size: 9.5px; font-weight: 800; border-radius: 4px; padding: 2.5px 5px; }
.pa-file i:empty { display: none; }
.pa-scene.play .pa-file { opacity: 1; transform: none; }
.pa-scene.play .pa-file:nth-child(1) { transition-delay: .15s; } .pa-scene.play .pa-file:nth-child(2) { transition-delay: .3s; }
.pa-scene.play .pa-file:nth-child(3) { transition-delay: .45s; } .pa-scene.play .pa-file:nth-child(4) { transition-delay: .6s; }
.pa-scene.play .pa-file:nth-child(5) { transition-delay: .75s; } .pa-scene.play .pa-file:nth-child(6) { transition-delay: .9s; }
.pa-drop-done { font-size: 13.5px; font-weight: 800; color: var(--teal-deep); background: #d3f4ee; border-radius: 99px; padding: 8px 20px; opacity: 0; transform: translateY(8px); transition: opacity .4s 1.5s, transform .4s 1.5s; }
.pa-scene.play .pa-drop-done { opacity: 1; transform: none; }
/* Step2/3: 見開き資料 (半分を資料に) */
.pa-doc { flex: 0 0 50%; position: relative; align-self: center; }
.pa-doc img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(13,33,31,.10); }
.pa-box { position: absolute; border: 2px solid var(--teal); border-radius: 3px; background: rgba(20,184,166,.14); opacity: 0; transform: scale(1.3); transition: opacity .3s, transform .3s; }
.pa-box.warn { border-color: #d97706; background: rgba(217,119,6,.15); }
.pa-scene.play .pa-box, .pa-box.on { opacity: 1; transform: scale(1); }
.pa-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.pa-row { display: grid; grid-template-columns: 104px 1fr auto; gap: 8px; align-items: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s, box-shadow .3s; }
.pa-scene.play .pa-row, .pa-row.on { opacity: 1; transform: none; }
.pa-row.approved { box-shadow: 0 0 0 2px var(--teal); }
.pa-row .k { font-size: 11.5px; font-weight: 700; color: var(--gray); }
.pa-row .v { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-row .st { font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.pa-row .st.ok { background: #d3f4ee; color: var(--teal-deep); }
.pa-row .st.chk { background: #fdeecd; color: #92580a; }
.pa-sum { display: flex; gap: 8px; margin-top: 4px; }
.pa-sum span { flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; border-radius: 8px; padding: 8px 4px; background: var(--paper-2); border: 1px solid var(--line); color: var(--gray); }
.pa-sum span b { display: block; font-size: 19px; color: var(--ink); }
.pa-sum .ok b { color: var(--teal-dark); } .pa-sum .chk b { color: #b45309; }
.pa-hint { font-size: 12.5px; line-height: 1.75; color: var(--ink-2); background: var(--paper-3); border-radius: 8px; padding: 9px 12px; opacity: 0; transition: opacity .4s; }
.pa-scene.play .pa-hint, .pa-hint.on { opacity: 1; }
/* Step4: 書類出力 */
.pa-out { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pa-out-lead { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 16px; text-align: center; }
.pa-out-lead b { color: var(--teal-deep); }
.pa-out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; margin: 0 auto; width: 100%; }
.pa-out-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; box-shadow: 0 6px 18px rgba(13,33,31,.07); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s; }
.pa-scene.play .pa-out-card { opacity: 1; transform: none; }
.pa-out-card .fmt { grid-row: 1 / 3; font-size: 10.5px; font-weight: 800; color: #fff; border-radius: 6px; padding: 9px 8px; }
.pa-out-card .fmt.xls { background: #1d6f42; } .pa-out-card .fmt.doc { background: #185abd; } .pa-out-card .fmt.pdf { background: #c0392b; }
.pa-out-card .n { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pa-out-card .d { font-size: 11.5px; color: var(--gray); }
/* Step1: 束バンドルのフライイン */
.pa-bundle { position: absolute; left: -26%; top: 7%; display: block; width: 190px; height: 64px; opacity: 1; z-index: 2; }
.pa-scene.play .pa-bundle { transition: left 1s cubic-bezier(.5,.1,.3,1), top 1s cubic-bezier(.5,.1,.3,1), opacity .35s 1.35s; left: calc(50% - 95px); top: 34%; opacity: 0; }
.pa-b { position: absolute; inset: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(13,33,31,.14); display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13px; font-weight: 800; color: var(--ink); }
.pa-b.c2 { transform: rotate(-4deg) translate(-7px, -7px); z-index: -1; opacity: .8; }
.pa-b.c3 { transform: rotate(4deg) translate(8px, -12px); z-index: -2; opacity: .55; }
.pa-b i { font-style: normal; background: #e05d44; color: #fff; font-size: 9.5px; font-weight: 800; border-radius: 4px; padding: 2.5px 5px; }
.pa-bundle > b { position: absolute; right: -12px; top: -12px; background: var(--teal); color: #fff; font-size: 12px; border-radius: 99px; padding: 4px 9px; box-shadow: 0 4px 10px rgba(20,184,166,.4); }
.pa-scene.play .pa-file:nth-child(n) { }
.pa-scene.play .pa-files .pa-file:nth-child(1) { transition-delay: 1.35s; } .pa-scene.play .pa-files .pa-file:nth-child(2) { transition-delay: 1.5s; }
.pa-scene.play .pa-files .pa-file:nth-child(3) { transition-delay: 1.65s; } .pa-scene.play .pa-files .pa-file:nth-child(4) { transition-delay: 1.8s; }
.pa-scene.play .pa-files .pa-file:nth-child(5) { transition-delay: 1.95s; } .pa-scene.play .pa-files .pa-file:nth-child(6) { transition-delay: 2.1s; }
.pa-scene.play .pa-drop-done { transition-delay: 2.7s; }
/* Step2/3: フロントエンド風 項目パネル */
.pa-panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(13,33,31,.06); }
.pa-ptabs { display: grid; grid-template-columns: 1fr 1fr 1fr; background: #f7f9f9; border-bottom: 1px solid var(--line); }
.pa-ptabs span { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--gray); padding: 8px 4px; }
.pa-ptabs span.on { background: #ccf1ea; color: var(--teal-deep); font-weight: 800; }
.pa-ptabs span b { display: inline-block; background: #fde8c8; color: #b45309; border-radius: 99px; padding: 0 7px; font-size: 11px; margin-left: 3px; }
.pa-legend { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--gray); padding: 6px 12px; border-bottom: 1px solid #eef2f1; }
.pa-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.pa-legend i:first-child { margin-left: 0; }
.pa-legend .lg-ok { background: var(--teal); } .pa-legend .lg-chk { background: #eab308; }
.pa-panel .pa-row { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; background: #fff; border: 0; border-bottom: 1px solid #eef2f1; border-radius: 0; padding: 7px 12px 7px 8px; box-shadow: none; }
.pa-panel .pa-row .bar { grid-row: 1 / 3; grid-column: 1; }
.pa-panel .pa-row .k { grid-row: 1; grid-column: 2; }
.pa-panel .pa-row .pct { grid-row: 1; grid-column: 3; }
.pa-panel .pa-row .st { grid-row: 1; grid-column: 4; }
.pa-panel .pa-row .pen { grid-row: 1; grid-column: 5; }
.pa-panel .pa-row .v { grid-row: 2; grid-column: 2 / 6; font-size: 13px; line-height: 1.5; }
.pa-panel .pa-row .k { white-space: nowrap; }
.pa-panel .pa-row .v { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.55; word-break: break-all; }
/* 要確認行: 2行レイアウト (上=項目名+バッジ / 下=値全文)。承認ボタンは右で上下センター */
.pa-panel .pa-row.chkrow { grid-template-columns: 6px minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto; row-gap: 3px; }
.pa-row.chkrow .bar { grid-row: 1 / 3; grid-column: 1; }
.pa-row.chkrow .k { grid-row: 1; grid-column: 2; }
.pa-row.chkrow .warnb { grid-row: 1; grid-column: 3; justify-self: start; }
.pa-row.chkrow .apr { grid-row: 1 / 3; grid-column: 4; align-self: center; }
.pa-row.chkrow .pen { grid-row: 1 / 3; grid-column: 5; align-self: center; }
.pa-row.chkrow .v { grid-row: 2; grid-column: 2 / 4; font-size: 14px; }
.pa-panel .pa-row:last-child { border-bottom: 0; }
.pa-panel .pa-row .bar { width: 6px; height: 20px; border-radius: 3px; }
.pa-panel .pa-row .bar.ok { background: var(--teal); } .pa-panel .pa-row .bar.chk { background: #eab308; }
.pa-panel .pa-row .pct { font-size: 11.5px; font-weight: 700; color: var(--gray); }
.pa-row.approved { box-shadow: inset 0 0 0 2px var(--teal); }

/* Step3: 原文ルーペ */
.pa-loupe { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; background: #fbfdfc; border-bottom: 1px solid #eef2f1; padding: 8px 12px 10px 22px; opacity: 0; transition: opacity .35s; }
.pa-scene.play .pa-loupe, .pa-loupe.on { opacity: 1; }
.pa-loupe .lp-tag { grid-row: 1 / 3; font-size: 10px; font-weight: 800; color: #92580a; background: #fdeecd; border-radius: 5px; padding: 4px 6px; }
.pa-loupe .lp-q { font-size: 12.5px; color: var(--ink); background: #fff; border: 1px dashed #eab308; border-radius: 6px; padding: 5px 9px; }
.pa-loupe .lp-q b { color: #b45309; }
.pa-loupe .lp-src { grid-column: 2; font-size: 10.5px; color: var(--gray); }
.pa-loupe .lp-btns { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 5px; }
.pa-loupe .lp-btns b { font-size: 11px; font-weight: 800; color: #fff; background: var(--teal); border-radius: 6px; padding: 5px 12px; text-align: center; }
.pa-loupe .lp-btns i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--gray); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; text-align: center; }
/* Step4: データ→流し込み→様式 */
.pa-out-flow { display: grid; grid-template-columns: 1fr auto 1.6fr; gap: 16px; align-items: center; }
.pos-t { font-size: 12px; font-weight: 800; color: var(--gray); margin-bottom: 8px; text-align: center; }
.pos-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 6px 18px rgba(13,33,31,.06); }
.pos-card span { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
.pos-card span i { font-style: normal; font-weight: 600; color: var(--gray); font-size: 11px; }
.pos-card .pos-more { display: block; text-align: center; color: var(--teal-dark); font-size: 11.5px; }
.pa-out-arrow { text-align: center; color: var(--teal-deep); font-weight: 800; font-size: 12px; line-height: 1.5; }
.pa-out-arrow b { display: block; font-size: 26px; color: var(--teal); }
.pa-out-files { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pa-out-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(13,33,31,.07); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s; }
.pa-scene.play .pa-out-card { opacity: 1; transform: none; }
.doc-thumb { grid-row: 1 / 4; position: relative; width: 40px; height: 52px; background: #fff; border: 1.5px solid var(--line); border-radius: 5px; padding: 16px 6px 6px; display: flex; flex-direction: column; gap: 4px; }
.doc-thumb::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 11px; border-radius: 3px 3px 0 0; }
.doc-thumb.xls::before { background: #1d6f42; } .doc-thumb.doc::before { background: #185abd; } .doc-thumb.pdf::before { background: #c0392b; }
.doc-thumb i { display: block; height: 3px; border-radius: 2px; background: #dbe4e2; }
.pa-out-card .n { font-size: 13px; font-weight: 800; color: var(--ink); }
.pa-out-card .d { font-size: 11px; color: var(--gray); }
.pa-out-card .ft { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pa-out-card .fmt { font-size: 9.5px; font-weight: 800; color: #fff; border-radius: 4px; padding: 2.5px 7px; }
.fmt.xls { background: #1d6f42; } .fmt.doc { background: #185abd; } .fmt.pdf { background: #c0392b; }
.pa-out-card .ft em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--teal-dark); }
/* demo.html: フロントエンド風アップロード */
.up-left { display: flex; flex-direction: column; gap: 12px; }
.up-sub { margin-top: 4px; font-size: 13px; color: var(--gray); }
.up-select-btn { display: inline-block; margin-top: 16px; pointer-events: none; }
.up-list { display: flex; flex-direction: column; gap: 8px; }
.up-file-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.uf-ic { font-style: normal; background: #e05d44; color: #fff; font-size: 9.5px; font-weight: 800; border-radius: 4px; padding: 3px 6px; }
.uf-name { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf-size { font-size: 11.5px; color: var(--gray); }
.uf-state { font-size: 11px; font-weight: 700; color: var(--gray); background: var(--paper-2); border-radius: 99px; padding: 3px 9px; }
.uf-state.done { color: var(--teal-deep); background: #d3f4ee; }
.uf-del { border: 0; background: none; font-size: 16px; color: var(--gray); cursor: pointer; line-height: 1; }
.up-form { margin-top: 26px; }
.up-form-title { font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.up-form-title span { display: block; font-weight: 400; font-size: 12.5px; color: var(--gray); margin-top: 3px; }
.up-side-sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--gray); margin-top: 2px; }

/* 高さ揃え + ミニプレビュー列 + コメント帯下端固定 */
.pa-docwrap { flex: 0 0 auto; display: flex; gap: 10px; align-items: flex-start; }
.pa-pages { display: flex; flex-direction: column; gap: 8px; padding: 6px; background: #f2f6f5; border: 1px solid var(--line); border-radius: 8px; height: 560px; overflow: hidden; }
.pa-pages .pp { position: relative; width: 40px; height: 56px; border-radius: 4px; border: 1.5px solid var(--line); background-color: #fff; background-image: url('assets/images/lp-ai-crostyle/demo/keiyaku-spread.webp'); background-size: 200% auto; flex: 0 0 auto; }
.pa-pages .pp.on { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(20,184,166,.25); }
.pa-pages .pp.ph { background-image: none; display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; }
.pa-pages .pp.ph i { display: block; height: 3px; border-radius: 2px; background: #e2eae8; }
.pa-doc { flex: 0 0 auto; position: relative; }
.pa-doc img { width: auto; max-width: 100%; height: 560px; object-fit: contain; object-position: top left; }
.pa-scene[data-s="1"], .pa-scene[data-s="2"] { align-items: flex-start; }
.pa-scene[data-s="1"] .pa-fields, .pa-scene[data-s="2"] .pa-fields { height: 560px; justify-content: flex-start; }
.pa-scene[data-s="1"] .pa-panel { flex: 1; display: flex; flex-direction: column; }
.pa-scene[data-s="1"] .pa-panel .pa-row { flex: 1; }
.pa-scene .pa-hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.pa-stage { min-height: calc(var(--pa-h) + 58px); }
/* 要確認パネル */
.pa-panel-chk { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* Step4: 中央配置+コメント下端 */
.pa-scene[data-s="3"] .pa-out { width: 100%; height: 100%; display: flex; flex-direction: column; }
.pa-scene[data-s="3"] .pa-out-flow { margin: auto 0; }


/* ビューア風ツールバー */
.pa-view { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pa-toolbar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; font-size: 11px; color: var(--gray); }
.pa-toolbar .tb-tabs { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.pa-toolbar .tb-tabs b { font-weight: 700; padding: 4px 10px; background: #fff; color: var(--gray); }
.pa-toolbar .tb-tabs b.on { background: #ccf1ea; color: var(--teal-deep); }
.pa-toolbar .tb-doc { border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; color: var(--ink); font-weight: 600; }
.pa-toolbar .tb-page { font-weight: 700; }
.pa-toolbar .tb-sp { flex: 1; }
.pa-toolbar .tb-ic { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.pa-toolbar .tb-zoom { font-weight: 700; }
.pa-toolbar .tb-waku { background: var(--teal); color: #fff; font-weight: 800; border-radius: 7px; padding: 4px 10px; }
/* サムネイル列 (実UI風: 番号+画質) */
.pa-pages { height: var(--pa-h); padding: 8px; gap: 8px; }
.pa-pages .ppw { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pa-pages .pp { width: 46px; height: 65px; }
.pa-pages .ppw img { display: block; width: min(46px, calc((var(--pa-h) - 268px) / 6.4)); height: auto; border: 1.5px solid var(--line); border-radius: 4px; background: #fff; }
.pa-pages .ppw.on img { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(20,184,166,.25); }
.pa-pages .ppw em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--gray); text-align: center; line-height: 1.25; }
.pa-pages .ppw em i { display: block; font-style: normal; font-weight: 500; font-size: 8.5px; color: #9ab0ac; }
.pa-pages .pp.ph { padding: 7px 5px; gap: 3px; }
.pa-doc img { height: var(--pa-h); }
.pa-scene[data-s="1"] .pa-fields, .pa-scene[data-s="2"] .pa-fields { height: var(--pa-h); }
/* 右パネルヘッダ (読取項目 + CSV) */
.pa-phead { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #eef2f1; }
.pa-phead .ph-t { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.pa-phead .ph-t i { font-style: normal; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); color: var(--gray); font-size: 9px; text-align: center; line-height: 13px; }
.pa-phead .ph-csv { font-size: 11px; font-weight: 800; color: #fff; background: var(--teal); border-radius: 7px; padding: 5px 11px; }
.pa-legend { font-size: 10.5px; }
/* 要確認行 (実UI風) */
.pa-panel .pa-row.chkrow { grid-template-columns: 6px 120px 1fr auto auto auto; flex: 0 0 auto; padding: 13px 12px 13px 8px; }
.chkrow .warnb { font-size: 11px; font-weight: 800; color: #ea8600; background: none; white-space: nowrap; }
.chkrow .apr { font-size: 11.5px; font-weight: 800; color: var(--teal-dark); border: 1.5px solid var(--teal); border-radius: 8px; padding: 5px 12px; white-space: nowrap; transition: all .25s; }
.chkrow .apr.done { background: var(--teal); color: #fff; }
.pa-row.approved .bar { background: var(--teal) !important; }
.pen { font-size: 12px; color: #b6c6c2; }
.pa-quote { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 3px; align-items: center; padding: 12px; border-top: 1px solid #eef2f1; margin-top: auto; }
.pa-quote .lp-tag { grid-row: 1 / 3; font-size: 10px; font-weight: 800; color: #92580a; background: #fdeecd; border-radius: 5px; padding: 4px 6px; }
.pa-quote .q { font-size: 12.5px; color: var(--ink); background: #fffdf5; border: 1px dashed #eab308; border-radius: 6px; padding: 5px 9px; }
.pa-quote .q b { color: #b45309; text-decoration: underline; text-decoration-color: #eab308; text-underline-offset: 3px; }
.pa-quote .src { font-size: 10.5px; color: var(--teal-dark); font-weight: 700; }
.pa-box.s { border-width: 1.5px; background: rgba(20,184,166,.10); }

@media (max-width: 860px) {
  .pa-steps { grid-template-columns: 1fr 1fr; }
  .pa-stage { min-height: 560px; }
  .pa-scene { flex-direction: column; }
  .pa-doc { flex: none; width: 100%; }
  .pa-out-grid { grid-template-columns: 1fr; }
}

/* ── 実書類アップロード (demo.html #upload) ── */
.up-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; max-width: 980px; margin: 0 auto; }
.up-zone { border: 2px dashed var(--line); border-radius: 14px; background: var(--paper); padding: 44px 28px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.up-zone.over, .up-zone:hover { border-color: var(--teal); background: #f2fbf9; }
.up-zone.has-file { border-style: solid; border-color: var(--teal); }
.up-main { margin-top: 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.8; }
.up-main span { font-weight: 400; font-size: 13px; color: var(--gray); }
.up-spec { margin-top: 12px; font-size: 12px; color: var(--gray); }
.up-picked { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--teal-dark); }
.up-side { display: flex; flex-direction: column; gap: 14px; }
.up-side-title { font-weight: 800; color: var(--ink); }
.up-list { margin: 0; padding: 0 0 0 1.2em; font-size: 13.5px; line-height: 2; color: var(--ink-2); }
.up-note { font-size: 12px; color: var(--gray); line-height: 1.7; }
@media (max-width: 860px) { .up-grid { grid-template-columns: 1fr; } }

/* ---- Step4: 作成資料ビュー (実UIの作成画面) ---- */
.pa-scene[data-s="3"] { align-items: flex-start; }
.pa-create-doc img { display: block; height: var(--pa-h); width: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(13,33,31,.10); opacity: 0; transform: translateY(10px); transition: opacity .5s .2s, transform .5s .2s; }
.pa-scene.play .pa-create-doc img { opacity: 1; transform: none; }
.pa-scene[data-s="3"] .pa-fields { height: var(--pa-h); justify-content: flex-start; gap: 10px; }
.pa-scene[data-s="3"] .pa-out-files { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; flex: 1; min-height: 0; }
.pa-scene[data-s="3"] .pa-out-card { min-height: 0; align-content: center; padding: 8px 16px; row-gap: 3px; overflow: hidden; }
.pa-scene[data-s="3"] .pa-out-card .n, .pa-scene[data-s="3"] .pa-out-card .d { line-height: 1.55; }
.pa-scene[data-s="3"] .pa-out-card .ft { margin-top: 0; }
.pa-create-lead { font-size: 13.5px; font-weight: 800; color: var(--ink); margin: 2px 0 0; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-create-lead b { color: #d40000; }

/* ---- 拡大ボタン (モーダル表示) / TRIALセクションではCTAをフェードアウト ---- */
.pa-create-doc { position: relative; display: inline-block; }
.floatcta.fc-hide { opacity: 0; transform: translateY(18px); pointer-events: none; }

/* ---- Step5: 貴社資料でお試し (デモ導線) ---- */
.pa-try { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; background: #fff; border: 1.5px dashed var(--teal); border-radius: 12px; padding: 30px; }
.pa-try > * { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; }
.pa-scene.play .pa-try > * { opacity: 1; transform: none; }
.pt-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--teal-dark); }
.pt-main { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.55; }
.pt-sub { font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.pt-btn { font-size: 16px; padding: 15px 34px; }
.pt-note { font-size: 11.5px; color: var(--gray); }

/* デモ: ファイル投入と同時にお届け先フォームをふわっと表示 */
@keyframes upFormIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.up-form.show { animation: upFormIn .55s ease both; }

/* ---- 左端固定のコンテンツメニュー (トップ) ---- */
.sidenav { position: fixed; left: 14px; top: 50%; transform: translateY(-50%) translateX(-10px); z-index: 80; display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.sidenav.show { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.sidenav a { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gray); padding: 6px 10px 6px 8px; border-radius: 8px; transition: color .2s, background .2s; }
.sidenav a::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #cfe0dc; transition: background .2s, box-shadow .2s; }
.sidenav a:hover { color: var(--teal-deep); background: rgba(255,255,255,.75); }
.sidenav a.on { color: var(--teal-deep); }
.sidenav a.on::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.18); }
@media (max-width: 1380px) { .sidenav { display: none; } }

/* 濃い緑背景 (.final) に重なったら色を反転 */
.sidenav.inv a { color: rgba(255,255,255,.78); }
.sidenav.inv a::before { background: rgba(255,255,255,.45); }
.sidenav.inv a:hover { color: #fff; background: rgba(255,255,255,.14); }
.sidenav.inv a.on { color: #fff; }
.sidenav.inv a.on::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.floatcta.inv .fc-top { background: #fff; color: var(--ink); }
.floatcta.inv .fc-tel { background: #fff; color: var(--teal-deep); box-shadow: 0 14px 36px rgba(0,0,0,.28); }
.floatcta.inv .fc-shiryo { background: transparent; color: #fff; border-color: #fff; }
.floatcta.inv .fc-soudan { background: var(--ink); color: #fff; }
.floatcta.inv .fc-soudan:hover { background: #000; }

/* ---- demo.html: WEB DEMO の余白 / サイド差し込みフォーム / Replay 解析アニメ ---- */
#upload .sec-lead { margin-bottom: 36px; }
.up-side .up-form { margin: 0; padding: 20px 22px; max-width: none; }
.up-side .up-form .dlrow { grid-template-columns: 1fr; }
.up-side .up-form .consent label { font-size: 11.5px !important; line-height: 1.75; }
.up-side .up-form-title span { font-size: 12px; line-height: 1.75; }

#demo { --dm-h: clamp(340px, calc(100vh - 470px), 560px); }
.demo-doc { position: relative; }
.demo-doc img { height: var(--dm-h); width: 100%; object-fit: contain; background: #fff; }
.demo-fields { max-height: calc(var(--dm-h) + 130px); overflow-y: auto; }
.demo-doc::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--teal), transparent); box-shadow: 0 0 16px rgba(20,184,166,.7); opacity: 0; pointer-events: none; }
.demo-doc.scan::after { opacity: 1; animation: dmScan .7s ease-in-out; }
@keyframes dmScan { from { top: 0; } to { top: calc(100% - 3px); } }
.demo-field { transition: opacity .3s, transform .3s; }
.demo-field.pre { opacity: 0; transform: translateY(7px); transition: none; }

/* ==== legal.html: 法務・セキュリティ・DX ==== */
.lg-flow { display: grid; grid-template-columns: 1fr auto 1.3fr auto 1fr; gap: 14px; align-items: stretch; margin-top: 40px; }
.lg-node { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 18px 16px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.lg-node b { font-size: 16.5px; color: var(--ink); }
.lg-node span { font-size: 14px; color: var(--gray); line-height: 1.8; }
.lg-node span em { font-style: normal; font-weight: 800; color: var(--teal-deep); }
.lg-node-main { border-color: var(--teal); background: #f2fbf9; box-shadow: 0 10px 26px rgba(10,59,55,.10); }
.lg-arrow { align-self: center; font-size: 13.5px; font-weight: 800; color: var(--teal-dark); white-space: nowrap; }
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
.lg-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.lg-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
.lg-card b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.lg-card p { font-size: 15px; color: var(--ink-2); line-height: 1.95; }
.lg-access { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 36px; }
.lg-ac { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
.lg-ac i { display: inline-block; font-style: normal; font-size: 13.5px; font-weight: 800; border-radius: 99px; padding: 3px 12px; margin-bottom: 10px; }
.lg-ac i.ok { background: #d3f4ee; color: var(--teal-deep); }
.lg-ac i.no { background: #10221f; color: #fff; }
.lg-ac i.ex { background: #fdeecd; color: #92580a; }
.lg-ac b { display: block; font-size: 16.5px; color: var(--ink); margin-bottom: 8px; }
.lg-ac p { font-size: 14.5px; color: var(--ink-2); line-height: 1.95; }
.lg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.lg-step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.lg-step i { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font-style: normal; font-weight: 800; font-size: 15.5px; margin-bottom: 10px; }
.lg-step b { display: block; font-size: 16.5px; color: var(--ink); margin-bottom: 6px; }
.lg-step p { font-size: 14px; color: var(--ink-2); line-height: 1.9; }
@media (max-width: 1000px) {
  .lg-flow { grid-template-columns: 1fr; }
  .lg-arrow { transform: rotate(90deg); padding: 4px 0; }
  .lg-grid, .lg-grid-3, .lg-access, .lg-steps { grid-template-columns: 1fr; }
}

/* ==== index: 他社比較 (Comparison) ==== */
.cmp-scroll { overflow-x: auto; margin-top: 40px; }
.cmp { width: 100%; border-collapse: collapse; background: #fff; font-size: 16.5px; }
.cmp th, .cmp td { border: 1px solid var(--line); padding: 14px 18px; vertical-align: middle; }
.cmp thead th { text-align: center; font-size: 17px; background: var(--paper-2); color: var(--ink-2); }
.cmp thead th.us { background: var(--teal-deep); color: #fff; font-size: 17.5px; }
.cmp td.rowh { background: var(--paper-2); font-weight: 700; color: var(--ink-2); white-space: nowrap; width: 190px; }
.cmp td.oth { text-align: center; color: var(--gray); font-size: 15px; line-height: 1.8; width: 30%; }
.cmp td.ours { font-size: 15.5px; line-height: 1.9; background: #f6fdfb; }
.cmp td.ours b { color: var(--teal-deep); }
.cmp .mark { display: block; font-size: 18px; font-weight: 900; margin-bottom: 2px; }
.cmp td.oth .mark { color: #b9c8c4; }
.cmp td.ours .mark { color: var(--teal); }

/* ==== モバイル: 処理イメージ(TRIAL DEMO)を縦積みの通常フローに ==== */
@media (max-width: 860px) {
  .proc-anim { --pa-h: none; }
  .pa-stage { min-height: 0 !important; }
  .pa-scene { position: static; display: none; flex-direction: column; gap: 14px; }
  .pa-scene.on { display: flex; }
  .pa-steps { grid-template-columns: 1fr 1fr; }
  .pa-steps .pa-tab:nth-child(5) { grid-column: 1 / -1; }
  .pa-pages { display: none; }                    /* ページサムネイル列は非表示 */
  .pa-docwrap, .pa-view, .pa-view-create { width: 100%; }
  .pa-doc { flex: none; width: 100%; }
  .pa-doc img { width: 100%; height: auto !important; }
  .pa-create-doc { display: block; }
  .pa-create-doc img { width: 100%; height: auto !important; }
  .pa-fields { height: auto !important; }
  .pa-scene .pa-hint { position: static; }
  .pa-scene[data-s="3"] .pa-out-files { grid-template-rows: none; flex: none; }
  .pa-try { position: static; padding: 26px 18px; }
  .pt-main { font-size: 19px; }
}
/* ==== モバイル: CTAボタンのサイズ調整 ==== */
@media (max-width: 760px) {
  .btns .btn { width: 100%; max-width: 420px; margin: 0 auto; font-size: 16.5px; padding: 13px 20px; }
}

/* ==== ヒーロー図 (legal / price) ==== */
.hf-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: 0 18px 44px rgba(10,59,55,.14); }
.hf-t { font-size: 14.5px; font-weight: 800; color: var(--gray); letter-spacing: .06em; margin-bottom: 14px; }
.hf-flow { display: flex; flex-direction: column; gap: 6px; }
.hf-n { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 14px; text-align: center; background: #fff; }
.hf-n b { display: block; font-size: 16px; color: var(--ink); line-height: 1.6; }
.hf-n span { font-size: 13px; color: var(--gray); line-height: 1.7; }
.hf-n em { display: block; font-style: normal; font-size: 13px; font-weight: 800; color: var(--teal-deep); margin-top: 2px; }
.hf-main { border-color: var(--teal); background: #f2fbf9; }
.hf-a { text-align: center; font-size: 12.5px; font-weight: 800; color: var(--teal-dark); line-height: 1.4; }
.hf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; justify-content: center; }
.hf-chips i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--teal-deep); background: #d3f4ee; border-radius: 99px; padding: 4px 11px; }
.hf-note { margin-top: 12px; font-size: 12.5px; color: var(--gray); line-height: 1.7; }
.pf-rows { display: flex; flex-direction: column; gap: 9px; }
.pf-row { display: grid; grid-template-columns: 86px 1fr auto; gap: 10px; align-items: center; }
.pf-row span { font-size: 13px; font-weight: 700; color: var(--gray); text-align: right; white-space: nowrap; }
.pf-row i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #b8ebe2, var(--teal)); }
.pf-row b { font-size: 14px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.pf-row.rec b { color: var(--teal-deep); }
.pf-row.rec i { background: linear-gradient(90deg, #48d4c0, var(--teal-dark)); }

/* モバイル: Step4リード文の折返し / Step5ボタンのはみ出し修正 */
@media (max-width: 860px) {
  .pa-create-lead { white-space: normal; overflow: visible; text-overflow: clip; }
  .pa-try { width: 100%; }
  .pt-main { line-height: 1.6; }
  .pt-btn { width: 100%; max-width: 100%; font-size: 14.5px; padding: 13px 14px; white-space: normal; line-height: 1.6; }
}

/* Comparison: 日本語の自然な改行 (文節区切り) */
.cmp td.oth, .cmp td.ours { word-break: auto-phrase; line-break: strict; overflow-wrap: break-word; }
@media (max-width: 860px) {
  .cmp td.oth br, .cmp td.ours br { display: none; }  /* モバイルは自動折返しに任せる */
}

/* ==== demo.html: 中央大アップロード + テスト資料プルダウン + Replay刷新 ==== */
.up-center { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.up-zone-lg { padding: 64px 32px; }
.dl-drop { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dl-drop summary { list-style: none; cursor: pointer; padding: 14px 20px; font-size: 15.5px; font-weight: 700; color: var(--teal-deep); text-align: center; }
.dl-drop summary::-webkit-details-marker { display: none; }
.dl-drop[open] summary { border-bottom: 1px solid var(--line); }
.dl-menu { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.rp { margin-top: 34px; }
.rp-left { display: flex; flex-direction: column; min-width: 0; }
.rp-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.rp-pill { position: relative; overflow: hidden; font: inherit; font-size: 13.5px; font-weight: 800; line-height: 1.4; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 12px 10px; cursor: pointer; color: var(--gray); transition: border-color .2s, background .2s, color .2s; }
.rp-pill em { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; opacity: .75; }
.rp-pill.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.rp-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: stretch; }
.rp-side { display: flex; }
.rp-side .pa-panel { flex: 1; display: flex; flex-direction: column; }
#rpRows { flex: 1; display: flex; flex-direction: column; }
#rpRows .pa-row { flex: 1; align-content: center; }
.rp-doc { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(10,59,55,.10); }
.rp-doc img { display: block; width: 100%; }
.rp-doc::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--teal), transparent); box-shadow: 0 0 16px rgba(20,184,166,.7); opacity: 0; pointer-events: none; }
.rp-doc.scan::after { opacity: 1; animation: dmScan .7s ease-in-out; }
.rp-side .pa-panel .pa-row { transition: opacity .3s, transform .3s; opacity: 1; transform: none; }
.rp-side .pa-panel .pa-row.rp-pre { opacity: 0; transform: translateY(7px); transition: none; }
.pa-panel .pa-row .bar.ng { background: #cf6a3c; }
.pa-panel .pa-row .st.ng { background: #fdeae2; color: #b3541e; }
.pa-panel .pa-row .v.vng { color: #b3541e; font-weight: 800; }
.rp .demo-note { margin-top: 20px; }
@media (max-width: 860px) {
  .rp-grid { grid-template-columns: 1fr; }
  .up-zone-lg { padding: 40px 20px; }
}

/* ファイル投入後: ゾーンをコンパクトに畳み、フォームをその場に表示 (スクロール不要に) */
.up-center.has-files .up-zone { padding: 14px 18px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.up-center.has-files .up-zone .pa-cloud,
.up-center.has-files .up-zone .up-sub,
.up-center.has-files .up-zone .up-spec { display: none; }
.up-center.has-files .up-zone .up-main { margin: 0; font-size: 13px; font-weight: 700; color: var(--gray); }
.up-center.has-files .up-zone .up-select-btn { padding: 8px 16px; font-size: 13px; }
.up-center.has-files .dl-drop { display: none; }
.up-center .up-form { margin-top: 0; }

/* ---- ステップ/品質のフォーカス中ゲージ (スライド表示時間の可視化) ---- */
@keyframes stepGauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pa-tab { position: relative; overflow: hidden; }
.pa-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--teal); transform-origin: left; transform: scaleX(0); animation: stepGauge 5.2s linear forwards; }
.rp-pill.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.9); transform-origin: left; transform: scaleX(0); animation: stepGauge 5.2s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .pa-tab.on::after, .rp-pill.on::after { animation: none; transform: none; }
}

/* ==== price: 件数連動プランのイメージ図 ==== */
.vp-chart { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px 18px; margin-top: 28px; max-width: 760px; }
.vp-t { font-size: 14.5px; font-weight: 800; color: var(--gray); margin-bottom: 16px; }
.vp-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end; height: 150px; }
.vp-m { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.vp-m i { width: 100%; border-radius: 5px 5px 0 0; background: #bfe9e0; }
.vp-m.busy i { background: var(--teal); }
.vp-m span { font-size: 11.5px; color: var(--gray); font-weight: 700; white-space: nowrap; }
.vp-note { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }
.vp-note b { color: var(--teal-deep); }
@media (max-width: 760px) { .vp-bars { gap: 4px; } }

/* 導入事例: 写真は340px固定カラムに収めてトリミング表示 */
.case .ph.shot { width: 340px; flex: none; display: block; }
.case .ph.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ==== chintai: 信頼度分布と閾値トリアージの図 ==== */
.qd { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px 28px 20px; text-align: left; }
.qd-t { font-size: 14.5px; font-weight: 800; color: var(--gray); margin-bottom: 16px; }
.qd-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 140px; }
.qd-b { position: relative; border-radius: 5px 5px 0 0; }
.qd-b span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--gray); white-space: nowrap; }
.qd-b.ng { background: #f0c4ab; }
.qd-b.chk { background: #f3dd9a; }
.qd-b.ok { background: var(--teal); }
.qd-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 30px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.qd-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 10px; }
.qd-legend i:first-child { margin-left: 0; }
.qd-legend i.ng { background: #f0c4ab; } .qd-legend i.chk { background: #f3dd9a; } .qd-legend i.ok { background: var(--teal); }
.qd-note { margin-top: 12px; font-size: 14.5px; color: var(--gray); line-height: 1.9; }

/* 資料請求: 実資料の表紙 + 未入力時のボタン減光 */
.dl-cover-real { padding: 0; overflow: hidden; }
.dl-cover-real img { display: block; width: 100%; height: auto; }
.btn.is-dim { opacity: .45; }

/* 資料請求: 実績帯 + ページプレビュー + わかることリスト (HRBrain風) */
.dl-band2 { margin-top: 12px; background: var(--paper-3); border-radius: 8px; padding: 10px 14px; font-size: 14.5px; color: var(--ink-2); text-align: center; }
.dl-band2 b { color: var(--teal-deep); }
.dl-pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.dl-pages img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.dl-pages img:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10,59,55,.16); }
.dl-pages-note { margin-top: 8px; font-size: 13px; color: var(--gray); text-align: center; }
.dl-learn { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; }
.dl-learn h3 { font-size: 16.5px; font-weight: 800; color: var(--teal-deep); margin-bottom: 10px; }
.dl-learn ul { list-style: none; }
.dl-learn li { position: relative; padding: 5px 0 5px 26px; font-size: 15px; color: var(--ink-2); line-height: 1.8; }
.dl-learn li::before { content: "✓"; position: absolute; left: 2px; top: 5px; color: var(--teal); font-weight: 900; }

/* Comparison: 2軸比較のサブ見出し */
.cmp-h { margin-top: 44px; font-size: 18px; font-weight: 800; color: var(--teal-deep); }
.cmp-h:first-of-type { margin-top: 36px; }
#compare .cmp-scroll { margin-top: 14px; }

/* ---------- 10/5 FB: 比較表②の注記 / 最終CTAの「特殊な会社ほど」強調 ---------- */
.cmp-note { margin-top: -6px; margin-bottom: 14px; font-size: 16.5px; color: var(--gray); }
.cmp2 td.no { color: #7a8794; font-weight: 500; }
.cmp2 td.yes { font-weight: 800; }
.final-punch { margin-top: 22px !important; font-size: 23px !important; font-weight: 800; line-height: 1.8; color: #fff !important; }
/* 10/21 FB: 黄色の線を「力になれます。」だけでなく3行全体の下線に (「まるっと〜解決します」と同じマーカー) */
.final-punch em { font-style: normal; background: linear-gradient(transparent 72%, #ffe14d 72%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.final-sub { margin-top: 18px !important; font-size: 17.5px !important; font-weight: 500; color: rgba(255,255,255,.88) !important; line-height: 1.9; }
@media (max-width: 760px) {
  .final-punch { font-size: 18px !important; }
  .final-punch br { display: none; }
  .final-sub { font-size: 15.5px !important; }
}
.kadai-more { display: block; margin: 18px 0 6px; }
/* ヘッダー: 課題別プルダウン追加ぶん、中間幅でメニューを詰めてCTAのはみ出しを防ぐ */
@media (max-width: 1560px) and (min-width: 1101px) {
  .gh nav { gap: 12px; }
  .gh nav > a, .gh nav .has-drop > a { font-size: 15px; }
  .gh-cta .btn-sm { padding: 12px 20px; font-size: 16px; }
}
@media (max-width: 1380px) and (min-width: 1101px) {
  .gh nav { gap: 10px; }
  .gh nav > a[href="#trial"], .gh nav > a[href="#faq"] { display: none; }  /* 中間幅はサイドメニューに任せる */
}

/* ---------- 10/6 FB: FVの文字が背景に同化しないようコントラストを確保 ---------- */
/* 緑背景のFV: 見出しの強調は白文字+明るい下線をやめ、ミントの文字+控えめな下線に */
.cat-hero h1 em { color: #8ff5e2; background: none; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 4px; text-underline-offset: 10px; text-decoration-skip-ink: none; }
.cat-hero .hero-desc { color: rgba(255,255,255,.92); }
.cat-hero .hero-tag { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); }
/* 緑背景の上では塗りボタンが背景と同色になるため、白地+濃い緑文字に反転 */
.cat-hero .btn-fill { background: #fff; color: var(--teal-deep); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.cat-hero .btn-fill:hover { background: var(--paper-2); }
.cat-hero .btn-ghost-w { border-color: #fff; }
/* 白背景の塗りボタン: 白文字が読めるよう少し濃い緑に */
.btn-fill { background: var(--teal-dark); }
.btn-fill:hover { background: var(--teal-deep); }
/* トップFVの説明文 (グレーが薄い) */
.hero:not(.cat-hero) .hero-desc, .hero:not(.cat-hero) .hero-note { color: var(--ink-2); }
/* 固有名詞 (AI Cro'style / InterLink Guild) は途中で改行しない */
.nw { white-space: nowrap; }
/* 最終行に1〜2語だけ残る改行を避ける (対応ブラウザのみ。未対応でも表示は崩れない) */
p, li, td, th, dd, figcaption, .kadai-card p, .sec-lead { text-wrap: pretty; }
h1, h2, h3, .sec-title, .ba td, .cmp td { text-wrap: balance; }
/* 料金表: 1画面 (1440px幅) に収める。収まらない幅では従来どおり横スクロール */
.ptable th, .ptable td { padding: 14px 10px; }
.ptable td { white-space: nowrap; }
.ptable td.feat { white-space: normal; padding: 14px 18px; }
.ptable thead th { line-height: 1.45; }
.ptable th.rowh { white-space: normal; width: 168px; padding-left: 16px; line-height: 1.5; }
.ptable th.rowh small { display: block; font-size: .82em; font-weight: 600; color: var(--gray); }
/* 課題別ページの「ほかの課題から探す」: トップの課題カード (.kadai-card) をリンクとして流用 */
.kd-subhead { margin-top: 64px; font-size: 22px; font-weight: 900; }
.kadai.kadai-3 { grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
a.kadai-card { display: block; color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; }
a.kadai-card:hover { box-shadow: 0 12px 28px rgba(10,59,55,.12); transform: translateY(-2px); }
a.kadai-card .arrow-link { display: inline-block; margin-top: 4px; }
@media (max-width: 1100px) { .kadai.kadai-3 { grid-template-columns: 1fr; } }
.kadai.kadai-all { margin-top: 24px; }
.kadai-card h3 { text-wrap: wrap; }
.kadai-current { background: var(--paper-2); }
.kadai-now { display: inline-block; margin-top: 4px; font-size: 15px; font-weight: 800; color: var(--gray); }
/* 課題別ページFV: 説明文末尾の一気通貫の一文 (工程の帯は廃止) */
.kd-ittsu-b { display: inline-block; margin-top: 10px; color: #fff; font-weight: 800; }


/* ---------- 10/7 FB: トップFVが100%表示で詰まって見える → FVだけ文字サイズ・余白を調整 (全体は縮小しない) ---------- */
@media (min-width: 1101px) {
  .hero:not(.cat-hero) .hero-in { grid-template-columns: 0.92fr 1.3fr; gap: 56px; }
  .hero:not(.cat-hero) h1 { font-size: 37px; line-height: 1.55; }
  .hero:not(.cat-hero) .cred-row { margin-bottom: 18px; }
  .hero:not(.cat-hero) .hero-sub { margin-top: 18px; font-size: 18.5px; line-height: 1.8; }
  .hero:not(.cat-hero) .hero-desc { margin-top: 12px; font-size: 16.5px; line-height: 1.95; }
  .hero:not(.cat-hero) .hero-btns { margin-top: 26px; }
  .hero:not(.cat-hero) .hero-btns .btn { padding: 15px 28px; font-size: 17px; }
  .hero:not(.cat-hero) .hero-note { margin-top: 12px; font-size: 15px; }
  .hero:not(.cat-hero) .fvs-cap { font-size: 15.5px; }
}