/*
 * リサーチワークス LP
 *
 * 色は Radix UI Colors のスケールのみを使う（@radix-ui/colors light テーマの hex を直接記述）。
 * 用途は Radix の慣例に従う: 1-2 背景 / 3-5 面 / 6-8 ボーダー / 9-10 ソリッド / 11-12 テキスト。
 * 級数は 1.25 の等比、余白は 8px グリッドに統一する。
 */

:root {
  /* --- Radix: sand（暖色ニュートラル） --- */
  --sand-1: #fdfdfc;
  --sand-2: #f9f9f8;
  --sand-3: #f1f0ef;
  --sand-4: #e9e8e6;
  --sand-5: #e2e1de;
  --sand-6: #dad9d6;
  --sand-7: #cfceca;
  --sand-8: #bcbbb5;
  --sand-9: #8d8d86;
  --sand-10: #82827c;
  --sand-11: #63635e;
  --sand-12: #21201c;

  /* --- Radix: indigo（アクセント） --- */
  --indigo-2: #f7f9ff;
  --indigo-3: #edf2fe;
  --indigo-6: #c1d0ff;
  --indigo-8: #8da4ef;
  --indigo-9: #3e63dd;
  --indigo-11: #3a5bc7;
  --indigo-12: #1f2d5c;

  /* --- Radix: red（フォームのエラー表示のみ） --- */
  --red-2: #fff7f7;
  --red-7: #f4a9aa;
  --red-11: #ce2c31;

  /* --- 用途 --- */
  --bg: var(--sand-2);
  --bg-rgb: 249, 249, 248;
  --surface: var(--sand-1);
  --surface-sunken: var(--sand-3);
  --text: var(--sand-12);
  --text-2: var(--sand-11);
  --text-3: var(--sand-10);
  --rule: var(--sand-6);
  --rule-strong: var(--sand-7);
  --accent: var(--indigo-12);
  --accent-mid: var(--indigo-11);
  --on-accent: var(--sand-1);

  /* --- 級数（1.25 等比 / 16px 基準） --- */
  --fs-100: 0.8rem;      /* 12.8 — ラベル・注記 */
  --fs-200: 1rem;        /* 16   — 本文 */
  --fs-300: 1.25rem;     /* 20   — 小見出し */
  --fs-400: 1.5625rem;   /* 25   — 見出し */
  --fs-500: 1.9531rem;   /* 31   — セクション見出し */
  --fs-600: 2.4414rem;   /* 39   — 大見出し */
  --fs-700: 3.0518rem;   /* 49   — ヒーロー */

  /* --- 行間 --- */
  --lh-tight: 1.45;
  --lh-heading: 1.55;
  --lh-body: 1.7;
  --lh-relaxed: 1.9;

  /* --- 余白（8px グリッド） --- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* --- その他 --- */
  --wrap: 1080px;
  --gutter: var(--sp-3);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-slow: 700ms;
  --shadow-sheet: 0 1px 1px rgba(33, 32, 28, 0.04), 0 18px 40px -28px rgba(33, 32, 28, 0.35);
  --serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

@media (min-width: 900px) {
  :root { --gutter: var(--sp-5); }
}

/* ============ base ============ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: 0.02em;
  word-break: auto-phrase;
  line-break: strict;
}

p, dl, ol, ul, figure { margin: 0; }
a { color: inherit; }
img, picture, svg { display: block; max-width: 100%; }

/* 数字は等幅で。日付や比率が揃う */
time, .num { font-variant-numeric: tabular-nums; }

/* 意図した位置での改行。日本語は行末で語中でも折り返されるため、
   読点や文節の切れ目で切りたい箇所は幅によらず明示する */
.br-lg { display: inline; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--indigo-9);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* 画面には出さないが読み上げには残す */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============ 共通パーツ ============ */

.eyebrow {
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  line-height: var(--lh-tight);
  color: var(--text-3);
}

.section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  color: var(--text-3);
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.section-title {
  margin-top: var(--sp-5);
  max-width: 20em;
  font-size: var(--fs-400);
}

.section-lede {
  margin-top: var(--sp-3);
  max-width: 34em;
  color: var(--text-2);
}

.prose {
  margin-top: var(--sp-5);
  max-width: 36em;
  display: grid;
  gap: var(--sp-3);
  color: var(--text-2);
}

.note {
  font-size: var(--fs-100);
  line-height: var(--lh-relaxed);
  color: var(--text-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--sans);
  font-size: var(--fs-200);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--on-accent);
}

.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* スクロールで静かに現れる。JS が動く環境でだけ隠す */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

@media print {
  .js .reveal { opacity: 1; transform: none; }
  .sticky-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============ ロゴ ============ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--accent);
}

.brand-mark { flex-shrink: 0; }

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name {
  font-family: var(--serif);
  font-size: var(--fs-300);
  line-height: 1.2;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--text);
}

.brand-sub,
.brand-latin {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  color: var(--text-3);
}

/* ============ ヘッダー ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(var(--bg-rgb), 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 80px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
}

.site-nav a {
  position: relative;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--sp-1);
  transition: color var(--dur-fast) var(--ease);
}

/* 1080px 未満はナビの間隔を詰めて、折り返さずに収める */
@media (max-width: 1079px) {
  .site-nav { gap: var(--sp-3); }
  .header-inner { gap: var(--sp-3); }
}

.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.site-nav a:hover { color: var(--text); }
.site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }

.nav-cta {
  border: 1px solid var(--rule-strong);
  white-space: nowrap;
  padding: 10px var(--sp-3) !important;
  color: var(--text) !important;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.nav-cta:hover { border-color: var(--accent); background: var(--surface); }

/* ============ ヒーロー ============ */

.hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.hero .wrap {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-8) var(--sp-6);
}

.hero-copy { max-width: 34rem; }

.hero h1 {
  margin-top: var(--sp-5);
  /* 320px でも「完全成果報酬型リサーチ。」が 1 行に収まる係数にしている */
  font-size: clamp(1.375rem, 0.9rem + 2.3vw, 2.75rem);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
}

.hero-lede {
  margin-top: var(--sp-4);
  max-width: 28em;
  color: var(--text-2);
}

.hero-cta {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.hero-cta .note { max-width: 22em; }

/* セクション末尾に小さく添える補足 */
.aside-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-100);
  line-height: var(--lh-relaxed);
  color: var(--text-3);
}

/* ヒーロー画像。広い画面では背景として敷き、文字側にスクリムを掛ける */
.hero-visual {
  position: relative;
  z-index: 1;
  margin-inline: calc(var(--gutter) * -1);
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

/* ============ セクション ============ */

.section {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-12);
}

.section-alt { background: var(--surface); }

/* ============ 藍のバンド ============ */

.band {
  background: var(--accent);
  color: var(--on-accent);
  border-bottom: 0;
}

.band .section-label { color: var(--indigo-6); }
.band .section-label::after { background: var(--indigo-11); }

.band-head { max-width: 42em; }

.band-head h2 {
  margin-top: var(--sp-5);
  font-size: var(--fs-500);
}

.band-head p {
  margin-top: var(--sp-3);
  color: var(--indigo-3);
}

/* 到達率。品質の証明として、報告書の手前に一つだけ大きく置く */
.band-stat {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--indigo-11);
}

.band-stat-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.4rem + 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--on-accent);
}

.band-stat-unit { font-size: 0.48em; letter-spacing: 0.04em; }

.band-stat-label {
  margin-top: var(--sp-2);
  font-family: var(--serif);
  font-size: var(--fs-200);
  letter-spacing: 0.16em;
  color: var(--indigo-6);
}

.band-stat-note {
  margin-top: var(--sp-1);
  max-width: 30em;
  font-size: var(--fs-100);
  line-height: var(--lh-relaxed);
  color: var(--indigo-6);
}

/* ============ 調査報告書のモック ============ */

/* 用紙。背後に一枚重ねて、綴じられた書類の厚みを出す */
.report-figure { position: relative; margin-top: var(--sp-8); }

.report-figure::before {
  content: "";
  position: absolute;
  left: 10px;
  right: -10px;
  top: 10px;
  bottom: -10px;
  background: var(--sand-3);
  border: 1px solid var(--sand-5);
}

.report {
  position: relative;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--sand-5);
  box-shadow: var(--shadow-sheet);
  padding: var(--sp-4) var(--sp-3);
}

.report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--sand-7);
}

.report-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.report-emblem { flex-shrink: 0; }

.report-doc {
  flex-shrink: 0;
  font-size: var(--fs-300);
  line-height: 1.3;
  letter-spacing: 0.24em;
  color: var(--text);
}

.report-issuer {
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-3);
}

.report-issuer strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--text);
}

.report-to {
  margin-top: var(--sp-3);
  font-family: var(--serif);
  font-size: var(--fs-300);
  letter-spacing: 0.08em;
}

.report-meta {
  display: grid;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-2);
  padding-block: var(--sp-2);
  border-block: 1px solid var(--rule);
  font-size: var(--fs-100);
}

.report-meta div { display: flex; gap: var(--sp-2); }

.report-meta dt {
  flex: 0 0 5.5em;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.report-meta dd {
  margin: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.report-section { padding-block: var(--sp-3); }

.report-section + .report-section { border-top: 1px solid var(--rule); }

.report-heading {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  color: var(--accent);
}

.report-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sand-4);
}

.result {
  margin-top: var(--sp-2);
  display: grid;
  gap: var(--sp-2);
}

.result div { display: flex; gap: var(--sp-2); align-items: baseline; }

.result dt {
  flex: 0 0 7em;
  font-size: var(--fs-100);
  color: var(--text-3);
}

.result dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.result .result-key {
  font-family: var(--serif);
  font-size: var(--fs-200);
}

/* 根拠テーブル */
.evidence-table {
  width: 100%;
  margin-top: var(--sp-2);
  border-collapse: collapse;
  font-size: var(--fs-100);
  line-height: 1.6;
}

.evidence-table caption {
  text-align: left;
  padding-bottom: var(--sp-1);
  font-size: var(--fs-100);
  color: var(--text-3);
}

.evidence-table th,
.evidence-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px var(--sp-2) 10px 0;
  border-bottom: 1px solid var(--sand-4);
}

.evidence-table thead th {
  border-bottom: 1px solid var(--sand-7);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-3);
  white-space: nowrap;
}

.evidence-table tbody th { font-weight: 400; }

.evidence-table .col-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.evidence-table tr:last-child th,
.evidence-table tr:last-child td { border-bottom: 0; }

.tag {
  display: inline-block;
  border: 1px solid var(--sand-7);
  padding: 1px 7px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--text-2);
}

.tag-primary { border-color: var(--accent); color: var(--accent); }
.tag-high { border-color: var(--accent); color: var(--accent); }
.tag-mid { border-style: dashed; }

.report-foot {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 6px;
  font-size: 10.5px;
  line-height: 1.8;
  color: var(--text-3);
}

.report-foot p {
  display: flex;
  gap: 6px;
  max-width: 46em;
}

.fn-mark { flex: 0 0 auto; color: var(--accent); }

.fn-ref {
  margin-left: 3px;
  font-size: 9px;
  vertical-align: super;
  color: var(--accent);
}

.figure-caption {
  margin-top: var(--sp-2);
  font-size: var(--fs-100);
  color: var(--indigo-6);
}

/* ============ ご依頼前 / 納品後の対比 ============ */

.ba {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-2);
  align-items: stretch;
}

.ba-panel {
  border: 1px solid var(--rule);
  padding: var(--sp-4) var(--sp-3);
}

.ba-before { border-style: dashed; }

/* 主役感は白い面・影・藍の枠で出す。縁取りの太線は使わない */
.ba-after {
  background: var(--surface);
  border-color: var(--indigo-8);
  box-shadow: var(--shadow-sheet);
}

.ba-label {
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  color: var(--text-3);
}

.ba-after .ba-label { color: var(--accent-mid); }

.ba-title {
  margin-top: var(--sp-2);
  font-family: var(--serif);
  font-size: var(--fs-300);
  line-height: var(--lh-tight);
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.ba-after .ba-title { color: var(--accent); }

.ba-list {
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-1);
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

.ba-list li { position: relative; padding-left: 16px; }

.ba-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 7px;
  height: 1px;
  background: var(--sand-8);
}

.ba-after .ba-list { color: var(--text); }
.ba-after .ba-list li::before { background: var(--indigo-8); }

.ba-note {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-100);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

.ba-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding-block: var(--sp-2);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  color: var(--text-3);
}

.ba-arrow svg { width: 40px; height: 12px; color: var(--indigo-8); transform: rotate(90deg); }

/* ============ 成果報酬の図 ============ */

.fee {
  margin-top: var(--sp-6);
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-3);
  display: grid;
  gap: var(--sp-4);
}

.fee-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  counter-reset: fee;
}

.fee-steps li {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--sp-2);
}

/* 01 / 02 / 03 は同じ格。番号のあとに見出しを置き、上の罫線でそろえる */
.fee-step {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  color: var(--text-3);
}

.fee-step-result {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--sp-2);
  color: var(--text);
}

.fee-step-result span {
  margin-right: var(--sp-2);
  color: var(--text-3);
}

.fee-steps h4 { margin-top: var(--sp-1); font-size: var(--fs-200); }

.fee-steps p {
  margin-top: var(--sp-1);
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

.fee-fork { display: grid; gap: var(--sp-2); }

.fee-outcome {
  border: 1px solid var(--rule);
  padding: var(--sp-2) var(--sp-3);
}

.fee-outcome-label {
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.fee-outcome-value {
  margin-top: 6px;
  font-family: var(--serif);
  font-size: var(--fs-300);
  line-height: var(--lh-tight);
  color: var(--text);
}

/* 不達なら0円。強調は塗り・級数・余白で行い、縦棒アクセントは使わない */
.fee-outcome-free {
  border: 1px solid var(--indigo-8);
  background: var(--indigo-2);
  padding: var(--sp-4) var(--sp-3);
}

.fee-outcome-free .fee-outcome-label { color: var(--accent-mid); }

.fee-outcome-free .fee-outcome-value {
  margin-top: var(--sp-1);
  font-size: clamp(2.4414rem, 1.8rem + 2.2vw, 3.0518rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.fee-outcome-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-100);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

/* ============ サービス ============ */

/* ラインナップ。提供中を主役に、準備中を控えめに置いて拡張の余地を見せる */
.lineup {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
}

.lineup-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: var(--sp-4) var(--sp-3);
}

.lineup-status {
  display: inline-block;
  border: 1px solid var(--indigo-8);
  padding: 2px 10px;
  font-size: var(--fs-100);
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.lineup-card h3 {
  margin-top: var(--sp-3);
  font-size: var(--fs-400);
  letter-spacing: 0.06em;
}

.lineup-lede {
  margin-top: var(--sp-2);
  max-width: 34em;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

.lineup-facts {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.lineup-facts > div {
  display: flex;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-2);
}

.lineup-facts dt {
  flex: 0 0 5em;
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.lineup-facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-200);
  line-height: var(--lh-tight);
}

/* 準備中は面を落とし、輪郭も破線にして、いまは触れないことを示す */
.lineup-card-planned {
  background: transparent;
  border-style: dashed;
}

.lineup-card-planned .lineup-status { border-color: var(--rule-strong); color: var(--text-3); }
.lineup-card-planned h3 { color: var(--text-3); }
.lineup-card-planned .lineup-lede { color: var(--text-3); }

.service-detail { margin-top: var(--sp-10); }

.detail-title {
  font-size: var(--fs-300);
  letter-spacing: 0.08em;
}

.service-detail figure { margin-top: var(--sp-4); }

.options {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--rule);
  display: grid;
}

.options > div {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-3);
}

.options dt {
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.options dd {
  margin: var(--sp-1) 0 0;
  max-width: 30em;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

.coming {
  margin-top: var(--sp-5);
  border-left: 1px solid var(--rule-strong);
  padding-left: var(--sp-2);
}

.coming span {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-100);
  letter-spacing: 0.14em;
  color: var(--text-3);
}

/* ============ ご依頼の流れ ============ */

.steps {
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-5);
}

/* 番号を大きな明朝で置き、罫でステップ同士をつなぐ */
.steps li {
  position: relative;
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--sp-3);
}

.step-num {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-500);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--indigo-8);
}

.steps h3 { margin-top: var(--sp-3); font-size: var(--fs-300); }

.steps p {
  margin-top: var(--sp-2);
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

/* ============ FAQ ============ */

.faq {
  margin-top: var(--sp-6);
  max-width: 44em;
  border-top: 1px solid var(--rule);
}

/* 開閉は details / summary のまま使う。JS は挟まない */
.qa { border-bottom: 1px solid var(--rule); }

.qa summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-family: var(--serif);
  font-size: var(--fs-200);
  line-height: var(--lh-heading);
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary:focus-visible { outline-offset: -2px; }

/* 開閉の印。横棒に縦棒を重ね、開いたら縦棒だけ消す */
.qa summary::after {
  content: "";
  flex: 0 0 auto;
  position: relative;
  width: 11px;
  height: 11px;
  margin-top: 0.4em;
  background:
    linear-gradient(var(--sand-9), var(--sand-9)) center / 11px 1px no-repeat,
    linear-gradient(var(--sand-9), var(--sand-9)) center / 1px 11px no-repeat;
  transition: transform var(--dur-fast) var(--ease);
}

.qa[open] summary::after {
  background: linear-gradient(var(--accent), var(--accent)) center / 11px 1px no-repeat;
}

.qa summary:hover::after { transform: scale(1.15); }

.qa p {
  margin: 0;
  padding-bottom: var(--sp-4);
  max-width: 42em;
  color: var(--text-2);
}

/* ============ お問い合わせ ============ */

.contact-grid { display: grid; gap: var(--sp-8); }

.contact-intro h2 {
  margin-top: var(--sp-5);
  font-size: var(--fs-400);
}

.contact-intro > p {
  margin-top: var(--sp-3);
  max-width: 26em;
  color: var(--text-2);
}

.contact-form { display: grid; gap: var(--sp-3); }

.field-row { display: grid; gap: var(--sp-3); }

.field { display: grid; gap: var(--sp-1); align-content: start; }

.field label {
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.optional {
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px var(--sp-2);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  font-feature-settings: "palt" 1;
}

.field textarea { resize: vertical; min-height: 9rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--sand-9); }

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red-7); }

.field-error { font-size: var(--fs-100); color: var(--red-11); }

/* ボット避け。人には見せない */
.gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
}

.checkbox input {
  margin-top: 5px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.form-status {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 12px var(--sp-2);
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

.form-status.is-error {
  border-color: var(--red-7);
  background: var(--red-2);
  color: var(--red-11);
}

.form-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.form-done {
  border: 1px solid var(--accent);
  background: var(--surface);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}

.form-done h3 { font-size: var(--fs-300); }

.form-done p {
  margin-top: var(--sp-2);
  font-size: 14px;
  color: var(--text-2);
}

/* ============ 追従 CTA ============ */

/* 追従 CTA は body 直下に置く。祖先に transform / filter があると fixed が壊れるため、
   .reveal（transform を持つ）の内側には決して入れないこと */
.sticky-cta {
  position: fixed;
  z-index: 40;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 320ms var(--ease),
              transform 320ms var(--ease), background-color var(--dur-fast) var(--ease);
}

.sticky-cta.is-shown { opacity: 1; visibility: visible; }
.sticky-cta:hover { background: var(--accent-mid); }
/* 画面端に接するので、フォーカスリングは内側に引く */
.sticky-cta:focus-visible { outline-color: var(--sand-1); outline-offset: -5px; }
.sticky-cta-note { color: var(--indigo-6); }

/* 1024px 未満は画面下部の横バー */
@media (max-width: 1023px) {
  .sticky-cta {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    transform: translateY(100%);
  }
  .sticky-cta.is-shown { transform: none; }
  .sticky-cta-label { font-size: var(--fs-200); }
  .sticky-cta-note { font-size: var(--fs-100); }
}

/* 1024px 以上は画面右端に縦組みで貼りつく（網屋 alog 型） */
@media (min-width: 1024px) {
  .sticky-cta {
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    writing-mode: vertical-rl;
    padding: var(--sp-4) 14px;
    letter-spacing: 0.22em;
    transform: translate(8px, -50%);
    box-shadow: -6px 0 24px -18px rgba(33, 32, 28, 0.7);
  }
  .sticky-cta.is-shown { transform: translate(0, -50%); }
  .sticky-cta-label { font-family: var(--serif); font-size: var(--fs-200); }
  .sticky-cta-note { font-size: 10px; letter-spacing: 0.24em; }
}

/* ============ フッター ============ */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-6);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.site-footer small { font-size: var(--fs-100); color: var(--text-3); }
.site-footer a { text-underline-offset: 4px; }

/* ============ 〜380px（小型端末） ============ */

@media (max-width: 380px) {
  /* ロゴと相談ボタンが一行に収まらなくなるので、余白と級数を詰める */
  :root { --gutter: var(--sp-2); }

  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 14px; letter-spacing: 0.08em; }
  .nav-cta { padding: 8px 14px !important; }

  .report-meta div { flex-direction: column; gap: 0; }
  .report-meta dt { flex: none; }
  .result div { flex-direction: column; gap: 2px; }
  .result dt { flex: none; }
}

/* ============ 〜699px ============ */

@media (max-width: 699px) {
  .brand-sub { display: none; }
  .site-nav { gap: var(--sp-2); }
  .site-nav a:not(.nav-cta) { display: none; }
  .brand-name { white-space: nowrap; font-size: var(--fs-200); }

  .report { padding: var(--sp-3) var(--sp-2); }
  .report-head { flex-direction: column-reverse; align-items: flex-start; gap: var(--sp-2); }
  .report-to { font-size: var(--fs-200); }
  .report-figure::before { display: none; }

  /* 表は横スクロールさせず、行ごとのカードに畳む。
     事項と出典を主に見せ、取得日・区分・確度は 1 行にまとめる */
  .evidence-table,
  .evidence-table caption,
  .evidence-table tbody,
  .evidence-table tr,
  .evidence-table th,
  .evidence-table td { display: block; width: 100%; }
  .evidence-table thead { display: none; }
  .evidence-table tr {
    border-bottom: 1px solid var(--sand-4);
    padding-block: var(--sp-2);
  }
  .evidence-table tr:last-child { border-bottom: 0; }
  .evidence-table th,
  .evidence-table td { border: 0; padding: 2px 0; }
  .evidence-table td::before {
    content: attr(data-label) "：";
    color: var(--text-3);
  }
  .evidence-table tbody th { font-family: var(--serif); font-size: 14px; }
  .evidence-table td[data-label="出典"] { font-size: 13px; }

  .evidence-table td[data-label="取得日"],
  .evidence-table td[data-label="区分"],
  .evidence-table td[data-label="確度"] {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    width: auto;
    margin-right: var(--sp-2);
    font-size: 11.5px;
  }

  .evidence-table td[data-label="取得日"] { margin-top: 4px; }
}

/* ============ 700px〜 ============ */

@media (min-width: 700px) {
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .proof-item { padding-right: var(--sp-4); }
  .proof-item + .proof-item {
    border-left: 1px solid var(--rule);
    padding-left: var(--sp-4);
  }

  .field-row { grid-template-columns: 1fr 1fr; }
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }

  .report { padding: var(--sp-6) var(--sp-6); }

  .report-meta { grid-template-columns: repeat(3, 1fr); }

  .ba {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
    gap: var(--sp-4);
    align-items: start;
  }
  .ba-panel { padding: var(--sp-5) var(--sp-4); }
  .ba-arrow { align-self: center; padding: 0 var(--sp-2); }
  .ba-arrow svg { width: 56px; height: 16px; transform: none; }

  .fee {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--sp-6);
    padding: var(--sp-5);
    align-items: start;
  }
  .fee-steps { grid-template-columns: 1fr 1fr; }
  /* 結果は二枚のカードの対比だけで示す。線での分岐表現は用いない */
  .fee-fork {
    grid-template-rows: auto auto auto;
    gap: var(--sp-3);
    align-content: start;
  }

  .lineup {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }
  .lineup-card { padding: var(--sp-5) var(--sp-4); }

  .options { grid-template-columns: repeat(2, 1fr); }
  .options > div { padding-right: var(--sp-5); }
  .options > div:nth-child(even) {
    border-left: 1px solid var(--rule);
    padding-left: var(--sp-5);
  }

  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

  /* ステップ間をつなぐ点。番号の高さに合わせて置く */
  .steps li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-5) / -2 - 2px);
    top: calc(var(--sp-3) + var(--fs-500) / 2 - 2px);
    width: 5px;
    height: 5px;
    background: var(--sand-8);
    border-radius: 50%;
  }
}

/* ============ 1024px〜 ============ */

@media (min-width: 1024px) {
  /* 広い画面ではセクション見出しを一段上げ、藍のバンドと同じ級数でそろえる */
  .section-title,
  .contact-intro h2 { font-size: var(--fs-500); }

  .contact-grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-10); }
}

/* ============ 1024〜1199px ============
   重ね組みには足りないが、画像を下に敷くと切れ端しか見えない幅。
   文字と画像を左右に置いて一画面に収める。 */

@media (min-width: 1024px) and (max-width: 1199px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: stretch;
  }

  .hero .wrap {
    max-width: none;
    margin: 0;
    align-self: center;
    padding-inline: var(--gutter) var(--sp-6);
  }

  .hero-visual { margin: 0; height: 100%; }

  .hero-visual img {
    height: 100%;
    min-height: 26rem;
    object-fit: cover;
    object-position: 58% center;
  }
}

/* ============ 1200px〜（ヒーローを重ね組みにする） ============
   これより狭いと本文の折り返しでヒーローが縦に伸び、画像が大きく切られる。
   その幅では重ねず、画像を一枚そのまま下に置く。 */

@media (min-width: 1200px) {
  /* 画像は全幅に敷く。高さを素材の縦横比（1400 : 788）に合わせておくと、
     左右も上下もほとんど切り落とさずに一枚の構図がそのまま入る */
  .hero {
    min-height: min(calc(100vw * 788 / 1400), calc(100vh - 80px));
    display: flex;
    align-items: center;
  }

  .hero-visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
  }

  .hero-visual img { height: 100%; object-position: center; }

  /* 文字側の可読性を確保するスクリム。装飾ではなく機能として最小限に。
     下辺にも掛けて、画像に重なる実績帯の三列目まで読めるようにする */
  .hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        0deg,
        rgba(var(--bg-rgb), 1) 0%,
        rgba(var(--bg-rgb), 0.7) 12%,
        rgba(var(--bg-rgb), 0) 30%
      ),
      linear-gradient(
        90deg,
        rgba(var(--bg-rgb), 0.94) 0%,
        rgba(var(--bg-rgb), 0.9) 26%,
        rgba(var(--bg-rgb), 0.6) 50%,
        rgba(var(--bg-rgb), 0) 82%
      );
  }

  /* 主見出しを意図した位置で 2 行に収めるための段幅 */
  .hero-copy { max-width: 38rem; }
}