/* tool-factory 共有デザイントークン + リセット
   全サイトはこれを土台にし、テーマ色のみ上書きする。 */

:root {
  /* ブランド色（テーマごとに --brand / --brand-ink を上書き可） */
  --brand: #2563eb;
  --brand-ink: #1e3a8a;
  --brand-soft: #eff6ff;

  /* ニュートラル */
  --bg: #ffffff;
  --bg-muted: #f7f8fa;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #111827;
  --text-sub: #4b5563;
  --text-faint: #9ca3af;

  /* 意味色 */
  --ok: #059669;
  --warn: #d97706;
  --danger: #dc2626;

  /* タイポ */
  --font: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  --fs-hero: clamp(1.6rem, 4.5vw, 2.4rem);
  --fs-h2: clamp(1.25rem, 3vw, 1.6rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;

  /* 余白・角丸・影（8pxグリッド） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --shadow: 0 4px 6px -1px rgba(16,24,40,.08), 0 12px 24px -6px rgba(16,24,40,.12);

  --maxw: 720px;      /* 本文カラム */
  --maxw-wide: 1080px;/* PC広幅 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg-muted);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding-left: 1.25em; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* タップ領域は最低44px。フォーム要素はズーム暴発防止に16px以上 */
button, input, select, textarea { font: inherit; }
input, select, textarea { font-size: max(16px, 1rem); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-4); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  border: 0; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-weight: 700;
  cursor: pointer; transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:active { filter: brightness(.95); }
.btn--ghost { background: transparent; color: var(--brand); border: 1px solid var(--border); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}