:root{
  /* カラー（ここだけいじれば全体が変わる） */
  --brand: #0ea5e9;         /* 基本アクセント（ボタン/リンク） */
  --brand-ink: #ffffff;     /* アクセント上の文字色 */
  --ink: #0f172a;           /* 本文色 */
  --muted: #475569;         /* 補足/薄い文字色 */
  --line: #e2e8f0;          /* 罫線 */
  --bg: #ffffff;            /* 背景 */
  --bg-soft: #f8fafc;       /* フッター等の淡背景 */

  /* 形・余白・幅（全体の“雰囲気”をまとめて変更） */
  --radius: 16px;           /* 角丸 */
  --shadow: 0 6px 20px rgba(2,6,23,.08); /* カード影 */
  --container: 1100px;      /* 本文最大幅 */

  /* タイポ（見出しスケール） */
  --fs-h1: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h2: 1.4rem;
  --fs-h3: 1.15rem;
}

/* 既存ルールの一部を変数で置き換え（主な箇所だけ例示） */
body{ color: var(--ink); background: var(--bg); }
.container{ width: min(var(--container), 92%); margin: 0 auto; }

.site-header{ border-bottom:1px solid var(--line); background:#fff; }
.site-header .nav a:hover{ background:#f1f5f9; border-radius:.5rem; }

.site-footer{ border-top:1px solid var(--line); background: var(--bg-soft); }

.card{ border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.btn{ background: var(--brand); color: var(--brand-ink); border-radius: calc(var(--radius) - 4px); }
.btn:hover{ opacity:.9; text-decoration:none; }

h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

.muted{ color: var(--muted); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: #0f172a;
  line-height: 1.7;
  background: #ffffff;
}
a { color: #0ea5e9; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(1100px, 92%); margin: 0 auto; }
.flex { display: flex; gap: 1rem; }
.between { justify-content: space-between; }
.center { align-items: center; }

.site-header { border-bottom: 1px solid #e2e8f0; background: #fff; position: sticky; top: 0; z-index: 10; }
.site-header .brand { font-weight: 700; font-size: 1.25rem; color: #0f172a; }
.site-header .nav a { padding: 1rem; display: inline-block; color: #0f172a; }
.site-header .nav a:hover { background: #f1f5f9; border-radius: .5rem; text-decoration: none; }

.site-footer { border-top: 1px solid #e2e8f0; padding: 2rem 0; background: #f8fafc; margin-top: 3rem; }
.site-footer p { margin: 0; color: #334155; }

.hero { padding: 6rem 0 3rem; background: linear-gradient(180deg, #f0f9ff, #ffffff 70%); }
.hero h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 .5rem; }
.lead { color: #334155; max-width: 760px; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }

.card { border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; background: #fff; }
.card h3 { margin-top: 0; }

.btn {
  display: inline-block;
  background: #0ea5e9;
  color: #fff;
  padding: .75rem 1rem;
  border-radius: .75rem;
  font-weight: 600;
}
.btn:hover { opacity: .9; text-decoration: none; }

main.container { padding-top: 2rem; }
h1 { font-size: 1.8rem; margin: 1rem 0; }
h2 { font-size: 1.4rem; margin-top: 2rem; }
h3 { font-size: 1.15rem; }

.definition { display: grid; grid-template-columns: 160px 1fr; gap: .75rem 1rem; }
.definition dt { font-weight: 600; color: #334155; }
.definition dd { margin: 0; }

.timeline { list-style: none; padding: 0; }
.timeline li { margin: .5rem 0; }
.timeline span { color: #475569; display: inline-block; width: 8em; }

.service { border-bottom: 1px dashed #e2e8f0; padding-bottom: 1rem; margin-bottom: 1rem; }
.flow ol { padding-left: 1.2rem; }
.muted { color: #475569; }

/* Contact form */
form { display: grid; gap: .75rem; max-width: 720px; }
label { font-weight: 600; }
input[type="text"], input[type="email"], textarea {
  width: 100%; padding: .75rem; border: 1px solid #cbd5e1; border-radius: .5rem;
}
.hidden { display: none; }
.consent { display: flex; gap: .5rem; align-items: center; font-weight: 400; }
.contact-alt { margin-top: 1rem; color: #334155; }

/* ==== トップページ（index）だけ背景を画像に ==== */
.home .hero{
  /* 画像＋暗めグラデで文字の可読性UP */
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('/assets/img/hero-dark.webp') center/cover no-repeat;
  color: #fff;
  min-height: 52vh;
  display: flex; align-items: center;
}

/* ヒーロー内の文字・ボタンを白系に */
.home .hero h1,
.home .hero .lead { color:#fff; }
.home .hero .btn{
  background: rgba(255,255,255,.18);
  color:#fff;
  border: 1px solid rgba(255,255,255,.4);
}