/* =========================================================
   株式会社ヴァンガードリクリエイト — コーポレートサイト v0.1
   配色：深紅は「印」だけ、基調は紺鼠
   書体：Noto Sans JP（和文）＋ Inter（欧文・数字）
   方針：角丸 0、影・グラデーションなし
   色は必ず CSS 変数で書く（直値を書かない）
   見出し 900／数字 800
   ========================================================= */

:root {
  /* 配色の変数 */
  --vr-ink: #2A3140;
  --vr-ink-light: #5A6170;
  --vr-paper: #F7F5F2;
  --vr-surface: #ECE9E4;
  --vr-white: #FFFFFF;
  --vr-signal: #950000;
  --vr-signal-deep: #6E0000;
  --vr-line: #D9D5CF;
  --vr-line-strong: #7E8592;
  --vr-caution: #9A5500;
  --vr-caution-large: #C77700;
  --vr-footer-muted: #B8BEC9;

  /* 書体 */
  --vr-sans: "Noto Sans JP", "Inter", sans-serif;
  --vr-latin: "Inter", "Noto Sans JP", sans-serif;

  /* 寸法（外周 80px／20px、本文 16px／1.8） */
  --vr-maxw: 1120px;
  --vr-pad: 80px;
  --vr-header-h: 72px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; } /* スムーススクロールなし（ブラウザ既定） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--vr-paper);
  color: var(--vr-ink);
  font-family: var(--vr-sans);
  font-size: 16px;
  line-height: 1.8;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
::selection { background: var(--vr-ink); color: var(--vr-paper); }

/* 数字は Inter の等幅数字 */
.num, td, th, .price { font-family: var(--vr-latin); font-variant-numeric: tabular-nums; }
td, th { font-family: var(--vr-sans); }

/* ---------- リンク・ボタン ---------- */
a { color: var(--vr-signal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:visited { color: var(--vr-signal-deep); }

:focus-visible {
  outline: 2px solid var(--vr-signal);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--vr-paper);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px;
  font-family: var(--vr-sans); font-size: 16px; font-weight: 700; line-height: 1;
  text-decoration: none; border-radius: 0; cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--vr-signal); color: var(--vr-white); border-color: var(--vr-signal); }
.btn-primary:hover, .btn-primary:visited { background: var(--vr-signal-deep); border-color: var(--vr-signal-deep); color: var(--vr-white); }
.btn-secondary { background: transparent; color: var(--vr-ink); border-color: var(--vr-ink); }
.btn-secondary:hover, .btn-secondary:visited { background: var(--vr-surface); color: var(--vr-ink); }

/* ---------- レイアウト ---------- */
.wrap { max-width: var(--vr-maxw); margin: 0 auto; padding: 0 var(--vr-pad); }
.wrap-narrow { max-width: 800px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--vr-ink); color: var(--vr-paper); padding: 8px 16px; z-index: 500;
}
.skip:focus { left: 0; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--vr-paper);
  border-bottom: 1px solid var(--vr-line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--vr-header-h); gap: 24px;
}
.logo {
  font-family: var(--vr-sans); font-weight: 700; font-size: 18px; letter-spacing: 0.02em;
  color: var(--vr-ink); text-decoration: none; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 10px;
}
.logo:hover, .logo:visited { color: var(--vr-ink); }
/* 深紅は社名の横の小さな印 1 つ */
/* 点の大きさは文字に連動（18px → 10px、モバイル 14px → 8px） */
.logo::before { content: ""; display: inline-block; width: 0.56em; height: 0.56em; background: var(--vr-signal); flex: none; }
.site-footer .logo::before { display: none; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--vr-ink); text-decoration: none; font-size: 15px; }
.nav a:hover { color: var(--vr-signal); }
.nav a[aria-current="page"] { font-weight: 700; border-bottom: 2px solid var(--vr-signal); }
.nav .btn { margin-left: 8px; }
/* .nav a（0,1,1）が .btn-primary（0,1,0）に勝つため、主ボタンの文字色を明示する */
.nav a.btn-primary, .nav a.btn-primary:hover, .nav a.btn-primary:visited { color: var(--vr-white); }
/* 末尾の主ボタンの面が見えている間は消す。急に消えないよう 0.15s で薄くする */
.nav .btn { transition: opacity 0.15s ease, visibility 0.15s ease; }
.site-header.hide-cta .nav .btn { visibility: hidden; opacity: 0; }

.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--vr-ink); border-radius: 0;
  color: var(--vr-ink); font-family: var(--vr-sans); font-size: 14px; padding: 8px 12px; min-height: 44px; cursor: pointer;
}

/* ---------- 見出し ---------- */
h1 { font-size: 34px; font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; }
h2 { font-size: 26px; font-weight: 700; line-height: 1.4; padding-bottom: 12px; margin-bottom: 24px; position: relative; }
/* h2 の短い下線：幅 40px・太さ 3px の深紅 */
h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--vr-signal); }
h3 { font-size: 20px; font-weight: 700; line-height: 1.5; margin-bottom: 12px; }
h4 { font-size: 17px; font-weight: 700; line-height: 1.5; margin-bottom: 10px; }
/* h3 の段落の下に h4 の小段を置くとき（事業・サービス「3 つの機能」） */
.sub-block { margin-top: 24px; }
/* 柱の中の小さな面（services #stages。柱 1 の中の h3） */
.sub-sec { margin-bottom: 56px; }
.sub-sec > h3 { font-size: 22px; }
/* 自社の取り組み（3 本の柱より小さな面） */
.section.own { padding: 48px 0; }
.section.own h2 { font-size: 20px; }
.section.own h3 { font-size: 17px; margin-bottom: 8px; }
/* ホームの事業カードの下の 1 行（自社の取り組み） */
.own-line { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--vr-line); font-size: 14px; color: var(--vr-ink-light); }
.own-line .go { margin: 0 0 0 12px; }
/* 本文の横に図（services #consulting の前後比較） */
.split-fig { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.split-fig > .sub-block { grid-column: 1 / -1; }
h2 .sub { display: block; font-size: 16px; font-weight: 500; color: var(--vr-ink-light); margin-top: 4px; }

/* ---------- 面（セクション） ---------- */
.section { padding: 72px 0; }
.section + .section { border-top: 1px solid var(--vr-line); }
/* ホームは帯の色と余白で面を分けるので罫線を引かない */
.home .section + .section { border-top: none; }
.lead { font-size: 17px; max-width: 760px; }
.lead + * { margin-top: 24px; }
p + p { margin-top: 1em; }
.note { font-size: 14px; color: var(--vr-ink-light); }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 40px; }

/* ファーストビュー（案 A 大きな文字で言い切る。本人の決定 2026-10-26。杠の試作 hero-variants.css の案 A を 2 行の版に）
   - h1 は 2 行。読点の後ろで折る（<br>）。行の中では折らない。字の大きさは 2 行目「研修で終わらせない」（9 字）が
     本文の幅に収まるよう幅から決める（9.6em ぶんの余裕）。1 行目は 2 行目より短いので同じ大きさで収まる
   - 2 行目は深紅（強調色）。深紅の線が右端まで伸びて V 字の矢の先で終わる（研修の先へ続く。装飾なので aria-hidden）
   - 図はヒーローに置かない（同じ内容はトップの「使う前に守る」の面・事業・サービスの図・研修ページの「導入の順番」にある） */
.hero { padding: 72px 0 64px; }
.hero .eyebrow { margin-bottom: 24px; font-size: 14px; }
.hero h1 {
  font-size: min(108px, calc((min(100vw, var(--vr-maxw)) - 2 * var(--vr-pad)) / 9.6));
  font-weight: 900; line-height: 1.16; letter-spacing: -0.01em; white-space: nowrap;
}
.hero h1 .k { display: inline-block; }
/* 語の途中で折り返さない（見出しの「外部サービス」など） */
.nb { display: inline-block; }
.hero h1 em { font-style: normal; color: var(--vr-signal); }
.hero .reach { display: flex; align-items: center; margin-top: 20px; height: 18px; }
.hero .reach .bar { flex: 1 1 auto; height: 4px; background: var(--vr-signal); transform-origin: left center; }
.hero .reach .head { flex: none; width: 14px; height: 14px; border-top: 4px solid var(--vr-signal); border-right: 4px solid var(--vr-signal); transform: translateX(-11px) rotate(45deg); }
.hero-row { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.hero .sub { font-size: 17px; max-width: 620px; }
.hero .actions { margin-top: 0; }
.actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
/* 小見出し：面の名前（日本語。見出しに英語を置かない）。深紅の短い線 1 本を添える */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vr-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--vr-ink-light); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--vr-signal); flex: none; }
/* 図（研修で使う画面の模式図）。実物のスクリーンショットではない */
.fig { background: var(--vr-white); border: 1px solid var(--vr-line); }
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption { font-size: 12px; color: var(--vr-ink-light); padding: 10px 14px; border-top: 1px solid var(--vr-line); }
/* 図の中の色（SVG は fill/stroke を var() で指定する。直値を書かない） */
.fig .f-white { fill: var(--vr-white); } .fig .f-paper { fill: var(--vr-paper); } .fig .f-surface { fill: var(--vr-surface); }
.fig .f-line { fill: var(--vr-line); } .fig .f-ink { fill: var(--vr-ink); } .fig .f-muted { fill: var(--vr-ink-light); } .fig .f-signal { fill: var(--vr-signal); }
.fig .s-line { stroke: var(--vr-line); } .fig .s-strong { stroke: var(--vr-line-strong); } .fig .s-ink { stroke: var(--vr-ink); }
.fig .s-signal { stroke: var(--vr-signal); } .fig .s-caution { stroke: var(--vr-caution); }

/* 数字の帯（出典のあるものだけ。Inter 800）。上段（見出し・図）との間は 64px、帯の上に Ink の罫 1 本 */
.stats { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--vr-ink); }
.stat { padding: 24px 20px 22px 0; border-right: 1px solid var(--vr-line); }
.stat + .stat { padding-left: 20px; }
.stat:last-child { border-right: none; }
.stat b { display: block; font-family: var(--vr-latin); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat b small { font-family: var(--vr-sans); font-size: 15px; font-weight: 700; margin-left: 4px; }
.stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--vr-ink-light); line-height: 1.5; }

/* 業種の列（社名は許諾後。空枠は破線） */
.clients { padding: 28px 0; border-top: 1px solid var(--vr-line); border-bottom: 1px solid var(--vr-line); }
.clients .cap { font-size: 12.5px; color: var(--vr-ink-light); text-align: center; }
.client-row { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.client-row li { font-size: 14px; font-weight: 700; padding: 8px 16px; border: 1px solid var(--vr-line); }
.client-row li.ph { color: var(--vr-ink-light); font-weight: 500; border-style: dashed; }

/* 面の見出し：面の名前（日本語。ホームはナビと同じ語＝詳細のあるページ名）＋h2（900）。番号 01〜03 は Inter。h2 の深紅の下線は共通の h2::after */
.label { font-family: var(--vr-latin); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--vr-ink-light); margin-bottom: 10px; }
.sec-head { margin-bottom: 40px; }
.sec-head h2 { font-size: 32px; font-weight: 900; line-height: 1.35; margin-bottom: 0; padding-bottom: 14px; }
.sec-head .lead { margin-top: 20px; }

/* 写真の枠（実写真が入ったら <img> に置き換える） */
.photo {
  background: var(--vr-surface); border: 1px dashed var(--vr-line-strong); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12.5px; color: var(--vr-ink-light); line-height: 1.6; padding: 12px;
  position: relative; overflow: hidden; flex-direction: column; gap: 10px;
}
.photo.tall { aspect-ratio: 4 / 5; }
/* 枠の中の線画（箱と矢印・画面・建物・格子・一覧。図は線画）。写真が入ったら svg ごと <img> に置き換える */
.photo .ph-art { width: 44%; max-width: 180px; height: auto; display: block; fill: none; stroke: var(--vr-line-strong); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; opacity: 0.55; }
.photo .ph-art .ph-fill { fill: var(--vr-line); stroke: none; }
.photo.tall .ph-art { width: 52%; }
.photo span { position: relative; }
/* 実写真：枠いっぱいに切り抜いて置く */
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 事業 01〜03（番号＋写真の枠＋箇条書き） */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.svc { border-top: 3px solid var(--vr-ink); padding-top: 20px; }
.svc:first-child { border-top-color: var(--vr-signal); }
.svc .k { margin-top: 16px; font-family: var(--vr-latin); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--vr-ink-light); }
.svc h3 { font-size: 21px; margin: 4px 0 0; }
.svc p { margin-top: 10px; font-size: 14.5px; }
.svc ul { list-style: none; padding: 12px 0 0; margin: 14px 0 0; border-top: 1px solid var(--vr-line); font-size: 13.5px; }
.svc li { padding-left: 14px; position: relative; line-height: 1.7; }
.svc li + li { margin-top: 5px; }
.svc li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; background: var(--vr-signal); }
.go { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700; text-decoration: none; }
.go::after { content: " →"; }

/* 事例カード（白の面、Line の枠、角丸 0） */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case { background: var(--vr-white); border: 1px solid var(--vr-line); display: flex; flex-direction: column; }
.case .photo { border: none; border-bottom: 1px dashed var(--vr-line-strong); aspect-ratio: 16 / 10; }
.case .tag { margin: 16px 20px 0; align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 3px 9px; background: var(--vr-ink); color: var(--vr-paper); }
.case h3 { margin: 10px 20px 0; font-size: 17px; }
.case p { margin: 8px 20px 0; font-size: 13.5px; }
.case p.body { flex: 1; }
.case .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 20px 18px; font-size: 12.5px; color: var(--vr-ink-light); }
.case .meta span::before { content: "◷ "; }
.case .meta span.pending::before { content: none; }
.case .meta .pending { margin: 0; }
/* 写真の無いカード：上の余白を左右と揃える */
.case > .tag:first-child { margin-top: 20px; }

/* 実績ページの一覧：横長（写真 左 1/3・文 右）。本文の長さが違っても空きが出ない。ホームの 3 列カードとは別の型 */
.case-list { grid-template-columns: 1fr; gap: 20px; }
/* 写真のあるカードだけ 2 列（写真 左・文 右）。写真が無いときは縦 1 列 */
.case-list .case.with-photo { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; }
.case-list .case .photo { aspect-ratio: auto; height: 100%; min-height: 200px; border-bottom: none; border-right: 1px dashed var(--vr-line-strong); grid-row: 1 / span 4; }
.case-list .case .tag { margin-top: 24px; justify-self: start; }
.case-list .case > .tag:first-child { margin-top: 24px; }
.case-list .case p.body { flex: none; }
.case-list .case .meta { margin-bottom: 24px; }

/* 姿勢の面（Surface の帯） */
.stance { background: var(--vr-surface); }
.stance-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
.stance h2 { font-size: 30px; font-weight: 900; line-height: 1.45; }
.stance p { font-size: 15.5px; }

/* 問い合わせ＋よくある質問の 2 枚 */
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cta-card { padding: 36px; border: 1px solid var(--vr-line); background: var(--vr-white); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-card.main { background: var(--vr-ink); color: var(--vr-paper); border-color: var(--vr-ink); }
.cta-card h2 { font-size: 24px; font-weight: 900; padding-bottom: 0; margin-bottom: 0; }
.cta-card h2::after { display: none; }
.cta-card p { font-size: 15px; max-width: none; }
.cta-card .note { font-size: 12.5px; }
.cta-card.main .note { color: var(--vr-footer-muted); }
.cta-card.main .btn-secondary { color: var(--vr-paper); border-color: var(--vr-paper); }
.cta.cta-2 { background: transparent; padding-top: 0; }
.cta.cta-2 .wrap { display: block; }

/* 自己診断のカード UI（角丸 0・影なし） */
.diag { background: var(--vr-white); border: 1px solid var(--vr-line); }
.diag .diag-head { padding: 14px 20px; border-bottom: 1px solid var(--vr-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--vr-ink-light); }
.diag .diag-head b { font-family: var(--vr-latin); letter-spacing: 0.08em; }
.diag ol { list-style: none; padding: 10px 12px; margin: 0; display: grid; gap: 6px; }
.opt { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--vr-line); background: var(--vr-white); }
.opt .n { font-family: var(--vr-latin); font-weight: 800; font-size: 28px; line-height: 1; color: var(--vr-ink-light); }
.opt h3, .opt h4 { font-size: 16px; margin: 0; } /* 段階の見出しは h4（柱 1 の中の h3 の下） */
.opt p { font-size: 13.5px; color: var(--vr-ink-light); margin-top: 4px; }
.opt .tag { font-size: 12px; font-weight: 700; color: var(--vr-ink); background: var(--vr-surface); padding: 4px 10px; max-width: 16em; line-height: 1.5; }
.opt .tag a { color: inherit; }
/* 研修の主な対象（段階 1〜2）は番号と入口を Ink／深紅で強く */
.opt.main { border-color: var(--vr-ink); background: var(--vr-paper); }
.opt.main .n { color: var(--vr-signal); }
.opt.main .tag { background: var(--vr-ink); color: var(--vr-paper); }
/* 柱 2・3 への入口（services #entry）：番号の列を持たない行。段階の表と同じ枠 */
.opt.no-n { grid-template-columns: 1fr auto; align-items: center; }
.opt.no-n p { margin-top: 0; color: var(--vr-ink); }
.diag .diag-foot { padding: 14px 16px; border-top: 1px solid var(--vr-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }

/* 導入の順番（番号付きの段） */
.steps { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: none; }
.steps > li { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--vr-line); position: relative; }
.steps > li:last-child { border-bottom: 1px solid var(--vr-line); }
.steps .n { font-family: var(--vr-latin); font-weight: 800; font-size: 40px; line-height: 1; color: var(--vr-ink-light); letter-spacing: -0.02em; }
.steps > li.main .n { color: var(--vr-signal); }
.steps h3 { margin-bottom: 8px; }

/* 2 列の仕様表（研修の構成）：見出し列を Surface に */
.spec th[scope="row"] { background: var(--vr-surface); }

/* FAQ を 1 問ずつの枠に（角丸 0） */
.faq dt { font-weight: 700; font-size: 17px; padding: 20px 24px 0; background: var(--vr-white); border: 1px solid var(--vr-line); border-bottom: none; }
.faq dd { margin: 0 0 12px; padding: 10px 24px 20px; background: var(--vr-white); border: 1px solid var(--vr-line); border-top: none; }

/* 下層ページの見出し帯（大見出し 900＋一言＋ボタン） */
.page-head { padding: 56px 0 48px; border-bottom: 1px solid var(--vr-line); }
.page-head h1 { font-size: 40px; font-weight: 900; line-height: 1.3; }
.page-head h1::after { content: ""; display: block; width: 40px; height: 3px; background: var(--vr-signal); margin-top: 16px; }
.page-head .lead { margin-top: 24px; }
.page-head .actions { margin-top: 28px; }
.page-head .eyebrow { margin-bottom: 14px; }

/* パンくず */
.breadcrumb { font-size: 13px; color: var(--vr-ink-light); margin-bottom: 20px; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--vr-ink-light); }
.breadcrumb a { color: var(--vr-ink-light); }

/* カード（Surface の面、角丸 0、影なし） */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--vr-surface); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { margin: 0; }
.card p { flex: 1; }

/* 表（横罫のみ。見出し行は Surface） */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--vr-line); }
thead th { background: var(--vr-surface); font-weight: 700; }
th[scope="row"] { font-weight: 700; width: 9em; white-space: nowrap; }
/* 段階の表（事業・サービス #stages）：見出し列が長いので折り返す */
.stages-table th[scope="row"] { width: 13em; white-space: normal; }

/* 定義リスト（会社概要） */
.co-table { display: grid; grid-template-columns: 10em 1fr; }
.co-table dt, .co-table dd { padding: 14px 12px; border-bottom: 1px solid var(--vr-line); margin: 0; }
.co-table dt { font-weight: 700; background: var(--vr-surface); }

/* 箇条書き */
.list { padding-left: 1.4em; }
.list li + li { margin-top: 8px; }
.list-steps { padding-left: 1.6em; }
.list-steps li + li { margin-top: 8px; }
.list-plain { list-style: none; padding: 0; } /* 原文に番号が含まれる箇条書き（行動十則） */
.list-plain li + li { margin-top: 8px; }

/* 注意書き（Caution の「！」＋短文。囲み枠は使わない） */
.caution { color: var(--vr-caution); display: flex; gap: 10px; align-items: flex-start; }
.caution::before { content: "！"; font-weight: 700; flex: none; }

/* 引用（スローガン・理念） */
.statement { font-size: 22px; font-weight: 700; line-height: 1.6; padding: 24px 28px; background: var(--vr-surface); border-left: 3px solid var(--vr-signal); }

/* 価格 */
.price { font-size: 24px; font-weight: 700; }

/* 文字リンクの行 */
.more { margin-top: 20px; }
/* 文字リンクが 2 本並ぶとき */
.more a + a { margin-left: 24px; }

/* 末尾の主ボタンの面（1 面に主ボタン 1 つ） */
.cta { padding: 64px 0; background: var(--vr-surface); }
.cta .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* この面の印は主ボタン 1 つ。h2 の深紅の下線は置かない（1 面に深紅の印を重ねない） */
.cta h2 { padding-bottom: 0; margin-bottom: 0; }
.cta h2::after { display: none; }
.cta p { max-width: 760px; }

/* ---------- 原文待ち・確認待ちの印（公開前に消す） ---------- */
.pending-block {
  border: 2px dashed var(--vr-caution); color: var(--vr-caution);
  padding: 20px; font-size: 14px; min-height: 80px;
}
.pending-block ol, .pending-block ul { list-style: none; padding: 0; margin: 8px 0 0; color: var(--vr-ink-light); }
.pending-block li { padding: 6px 0; border-bottom: 1px dashed var(--vr-line); }
.pending {
  display: inline-block; font-size: 12px; line-height: 1.4; vertical-align: middle;
  color: var(--vr-caution); border: 1px dashed var(--vr-caution); padding: 1px 6px; margin: 0 4px;
}

/* ---------- FAQ ---------- */
.faq-group + .faq-group { margin-top: 48px; }

/* ---------- フォーム（入力欄は白、枠は Line Strong、角丸 0） ---------- */
.form { display: grid; gap: 22px; max-width: 640px; }
.form label { display: block; font-weight: 700; margin-bottom: 6px; }
.form .req { color: var(--vr-caution); font-size: 13px; font-weight: 500; margin-left: 6px; }
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
  width: 100%; font: inherit; color: var(--vr-ink); background: var(--vr-white);
  border: 1px solid var(--vr-line-strong); border-radius: 0; padding: 12px 14px; min-height: 48px;
}
.form textarea { min-height: 160px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--vr-ink-light); }
.form .check { display: flex; align-items: flex-start; gap: 10px; }
.form .check input { width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--vr-signal); }
.form .check label { font-weight: 500; margin: 0; }
.form button { justify-self: start; }

/* ---------- フッター（Ink の面、Paper の文字。深紅は使わない） ---------- */
.site-footer { background: var(--vr-ink); color: var(--vr-paper); padding: 56px 0 32px; margin-top: 0; }
.site-footer .logo { color: var(--vr-paper); font-size: 17px; }
.site-footer .logo:hover, .site-footer .logo:visited { color: var(--vr-paper); }
/* 文字ロゴに下線を引かない（.site-footer a の下線指定に負けていた） */
.site-footer a.logo { text-decoration: none; }
.site-footer a { color: var(--vr-paper); text-decoration: underline; text-decoration-color: var(--vr-footer-muted); }
.site-footer a:hover, .site-footer a:visited { color: var(--vr-paper); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.footer-grid p { color: var(--vr-footer-muted); font-size: 14px; margin-top: 10px; }
.footer-grid p.addr { color: var(--vr-paper); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.footer-nav + .footer-nav { margin-top: 12px; }
.copyright { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--vr-footer-muted); font-size: 13px; color: var(--vr-footer-muted); font-family: var(--vr-latin); }

/* ---------- 404 ---------- */
.notfound .list { list-style: none; padding: 0; }

/* ---------- モバイル ---------- */
@media (max-width: 960px) {
  .stance-grid, .cta-grid, .split-fig { grid-template-columns: 1fr; }
  .hero-row { grid-template-columns: 1fr; gap: 28px; }
  .svc-grid, .case-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--vr-line); }
  .stat:nth-child(2n) { padding-left: 20px; }
  .stat:nth-child(2n+1) { padding-left: 0; }
  .case-list .case.with-photo { grid-template-columns: 1fr; }
  .case-list .case .photo { aspect-ratio: 16 / 10; height: auto; min-height: 0; border-right: none; border-bottom: 1px dashed var(--vr-line-strong); grid-row: auto; }
}
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .co-table { grid-template-columns: 1fr; }
  .co-table dt { border-bottom: none; padding-bottom: 6px; }
  .co-table dd { padding-top: 6px; }
}
@media (max-width: 760px) {
  :root { --vr-pad: 20px; }
  h1 { font-size: 26px; }
  .hero { padding: 40px 0; }
  .hero .eyebrow { font-size: 13px; margin-bottom: 16px; }
  .hero .reach { margin-top: 12px; height: 14px; }
  .hero .reach .bar { height: 3px; }
  .hero .reach .head { width: 11px; height: 11px; border-width: 3px; transform: translateX(-8px) rotate(45deg); }
  .hero-row { margin-top: 24px; }
  .hero .sub { font-size: 16px; }
  .stat b { font-size: 32px; }
  .stats { margin-top: 40px; }
  /* ボタンが縦に並ぶときは全幅に（主・副で幅が違うと揃って見えない） */
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .cta-card .btn { width: 100%; }
  .sec-head h2, .stance h2 { font-size: 24px; }
  .sec-head { margin-bottom: 28px; }
  .page-head h1 { font-size: 28px; }
  .cta-card { padding: 24px; }
  .opt { grid-template-columns: 32px 1fr; }
  .opt .n { font-size: 22px; }
  .opt .tag { grid-column: 2; justify-self: start; max-width: none; }
  .opt.no-n { grid-template-columns: 1fr; }
  .opt.no-n .tag { grid-column: 1; }
  .diag .diag-foot { flex-direction: column; align-items: flex-start; }
  .steps > li { grid-template-columns: 48px 1fr; gap: 12px; padding: 20px 0; }
  .steps .n { font-size: 30px; }
  .faq dt { padding: 16px 16px 0; }
  .faq dd { padding: 8px 16px 16px; }
  h2 { font-size: 22px; }
  .section { padding: 48px 0; }
  .logo { font-size: 14px; white-space: nowrap; }
  .nav-toggle { display: inline-flex; align-items: center; white-space: nowrap; flex: none; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: var(--vr-header-h);
    background: var(--vr-paper); border-bottom: 1px solid var(--vr-line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--vr-pad) 20px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--vr-line); }
  .nav a[aria-current="page"] { border-bottom: 1px solid var(--vr-line); }
  .nav .btn { margin: 16px 0 0; border-bottom: none; }
  .site-header.hide-cta .nav .btn { visibility: visible; }
  th[scope="row"] { width: auto; white-space: normal; }
  /* 列が 3 つ以上の表（実績）は 1 文字ずつ折れるので、列に最小幅を与えて横スクロールに逃がす（.table-wrap が overflow-x: auto）。2 列の表はそのまま収まる */
  .table-wrap th, .table-wrap td { min-width: 7em; }
  .table-wrap th[scope="row"] { min-width: 6em; }
  .statement { font-size: 18px; padding: 18px 20px; }
  .more a + a { margin-left: 0; display: block; margin-top: 8px; }
  /* 段階の表（3 列）も 4 列表と同じく列に最小幅を与えて横スクロールに逃がす（見出し列は折り返してよい） */
  .stages-table th[scope="row"] { min-width: 8em; }
  .stages-table td { min-width: 14em; }
}

/* フッター上の保留の印は Caution を使わない（Caution on Ink は 2.28:1 で読めない） */
.site-footer .pending { color: var(--vr-footer-muted); border-color: var(--vr-footer-muted); }

/* =========================================================
   動き
   - 「出る前の状態」は html.motion があるときだけ作る（main.js が reduced-motion でないときに付ける）。
     prefers-reduced-motion: reduce／JS なし／IntersectionObserver なし → この節は効かず、最終状態がそのまま出る
   - 光らせない・回し続けない・影なし・角丸 0。色は変数だけ。深紅は印（カーソル・点灯中の番号・選択の左線）だけ
   ========================================================= */

/* rise：下から 12px・0.5s。data-stagger の子は 80ms ずつ（遅延は JS が inline で付ける）
   transition の並び（opacity, transform, translate, border-color）は main.js の transitionDelay と対応させている */
html.motion [data-anim="rise"],
html.motion [data-stagger] > * {
  transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.2s ease, border-color 0.2s ease;
}
html.motion [data-anim="rise"]:not(.in),
html.motion [data-stagger] > *:not(.in) {
  opacity: 0;
  transform: translateY(12px);
}

/* hover：カードが 3px 持ち上がる（影は使わず、枠のあるカードは枠線を Ink に。.svc の上の罫線は深紅／紺鼠のまま）。
   translate は transform（rise）と別の性質なので重ねられる。マウス（fine pointer）のときだけ */
.case, .cta-card, .card, .opt, .svc { transition: translate 0.2s ease, border-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .case:hover, .cta-card:hover, .card:hover, .svc:hover { translate: 0 -3px; }
  .case:hover, .cta-card:hover { border-color: var(--vr-ink); }
}

/* type：見出しを 1 文字ずつ。文字は場所を取ったまま visibility で出す（行の折り返しが動かない）。カーソルは深紅の縦線、打ち終わったら消える */
html.motion .tw-ch { visibility: hidden; position: relative; }
html.motion .tw-ch.on { visibility: visible; }
html.motion .tw-ch.cur::after {
  content: ""; position: absolute; right: -0.08em; top: 0.1em; width: 3px; height: 0.9em;
  background: var(--vr-signal);
}

/* hero：トップのヒーロー（案 A）。行が下から上がる → 深紅の線が左から右へ伸びる → 矢の先・一言・ボタンが出る。約 1.5 秒・1 回だけ。
   html.motion（reduced-motion でない・JS が動いた）のときだけ。reduce では上の一括指定でも止まり、最終状態をそのまま出す */
html.motion .hero h1 .k { animation: hero-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.motion .hero h1 em.k { animation-delay: 0.12s; }
html.motion .hero .reach .bar { animation: hero-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
html.motion .hero .reach .head { animation: hero-fade 0.2s ease-out 1.3s both; }
html.motion .hero .eyebrow, html.motion .hero-row { animation: hero-fade 0.5s ease-out 0.9s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* count：数字は JS が文字列を書き換えるだけ（CSS なし） */

/* light：段階図（.diag の .opt）と段（.steps > li）。pre＝まだ点いていない（枠線が紙色、番号も紙色）→ lit＝点灯（枠線 紺鼠、番号 深紅）→ 設計の静止状態 */
.opt, .steps > li { transition: border-color 0.25s ease, translate 0.2s ease; }
.opt .n, .steps .n { transition: color 0.25s ease; }
html.motion .opt.pre { border-color: var(--vr-paper); }
html.motion .opt.pre .n { color: var(--vr-paper); }
html.motion .opt.lit { border-color: var(--vr-ink); }
html.motion .opt.lit .n { color: var(--vr-signal); }
html.motion .steps > li.pre { border-top-color: var(--vr-paper); }
html.motion .steps > li.pre .n { color: var(--vr-paper); }
html.motion .steps > li.lit { border-top-color: var(--vr-ink); }
html.motion .steps > li.lit .n { color: var(--vr-signal); }

/* 自己診断の選択：選んだカードは深紅の左線 3px（引用の左線と同じ印）＋枠線 Ink。padding で幅を補い、並びがずれない */
.diag .opt[data-stage] { cursor: pointer; }
.diag .opt[data-stage]:hover { border-color: var(--vr-ink); }
.diag .opt.selected { border-color: var(--vr-ink); border-left: 3px solid var(--vr-signal); padding-left: 14px; }
.diag .opt.selected .n { color: var(--vr-signal); }
/* 選んだ段階の入口（既存の文言のリンクだけ）。選ぶまで hidden */
.diag-result { padding: 14px 16px; border-top: 1px solid var(--vr-line); background: var(--vr-paper); font-size: 14px; }
.diag-result[hidden], .diag-result p[hidden] { display: none; }
.diag-result b { margin-right: 0.5em; }
.diag-result a + a { margin-left: 16px; }

/* draw：線（.dr-line）は stroke-dasharray/offset（長さは JS が測る）を 0.8s で 0 に。箱・文字・点・印・塗り（.dr-fade）は opacity 0.3s。
   順番と遅延は main.js が inline の transition-delay で付ける（図の f-step[data-step] の順）。.in は図の入れ物（[data-anim="draw"] か svg.figure）に付く */
html.motion .dr-line { transition: stroke-dashoffset 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.motion .dr-fade { opacity: 0; transition: none; } /* 隠すのは即時（遅延は現れるときだけ効かせる） */
html.motion [data-anim="draw"].in .dr-fade, html.motion svg.figure.in .dr-fade { opacity: 1; transition: opacity 0.3s ease-out; }
html.motion .in .f-dot.dr-fade, html.motion .in .f-fill.dr-fade { transition-duration: 0.2s; }

@media (max-width: 760px) {
  .diag .opt.selected { padding-left: 14px; }
  .diag-result a + a { margin-left: 0; display: block; margin-top: 6px; }
}