/* テーマ「白い研究所」（Social hearts株式会社、方向 03-future_white）のデザイントークン。
   色は正本（directions/socialhearts/03-future_white.png）の画素から取った値。役割の名前で持つ。 */
:root {
  --ds-ink: #0f1d33;          /* 大見出しと本文の濃い紺（正本の大見出し 10,27,51） */
  --ds-ink-soft: #33445a;     /* 本文 */
  --ds-muted: #66768a;        /* 補足の小さな字 */
  --ds-primary: #33485e;      /* 紺の丸いボタン（正本 57,79,100 と 24,41,57 の間） */
  --ds-primary-hover: #1f3247;
  --ds-accent: #4a78a8;       /* 番号・小さな強調の青（正本 114,145,177 を字として読める濃さに） */
  --ds-en: #6f8aa6;           /* 英字の見出し札（正本 152,172,193 を読める濃さに） */
  --ds-white: #ffffff;
  --ds-paper: #fafbfd;        /* 地（正本 250,251,253） */
  --ds-tint: #f1f6fa;         /* 淡い青灰の帯（正本 241,247,251） */
  --ds-tint-deep: #e7eef5;    /* 記事の目次・まとめの箱（正本の記事の「まとめ」の灰青） */
  --ds-line: #dde5ee;         /* カードの細い枠と区切りの線 */
  --ds-shadow: 0 10px 30px rgba(28, 58, 96, .07);
  --ds-font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --ds-font-en: "Inter", "Noto Sans JP", sans-serif;   /* 英字の見出し札・番号・ロゴ */
  --ds-frame: 1440px;       /* 中身の列の最大幅（左右44pxの内側で約1350px）。正本は1440幅のほぼ端まで中身を並べる（2026-09-29 寄せ直し）。広い画面ではここで止め、写真と背景だけ端まで伸ばす */
  --frame-pad: 44px;
  /* すりガラスの面と白銀の地（正本のカード・帯の質感） */
  --ds-glass: linear-gradient(160deg, rgba(255, 255, 255, .97) 0%, rgba(244, 248, 252, .92) 100%);
  --ds-glass-line: rgba(206, 219, 233, .85);
  --ds-glass-shadow: 0 14px 34px rgba(40, 72, 112, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
  --ds-sheen: linear-gradient(118deg, #fbfcfe 0%, #eef3f8 36%, #f9fbfd 54%, #e8eef5 100%);
  --ds-radius-card: 10px;
  --ds-radius-pill: 999px;
  /* 余白の目盛り（2026-09-27 実測：日本の企業サイト19件の中央値。会社をまたいで共通。絵から測った値に書き換えない） */
  --space-section: 120px;  /* 区画の上下（片側） */
  --space-head: 64px;      /* 見出し（区画の見出しの塊）→中身 */
  --space-block: 48px;     /* 区画の中の塊と塊の間 */
  --space-gap: 32px;       /* カード・札の間 */
}
@media (max-width: 1199px) {
  :root { --space-section: 96px; --space-head: 48px; --space-block: 40px; --space-gap: 24px; --frame-pad: 40px; }
}
@media (max-width: 640px) {
  :root { --space-section: 72px; --space-head: 40px; --space-block: 32px; --space-gap: 24px; --frame-pad: 20px; }
}
/* 正本の本文の左端は1440幅で x=90 前後（2026-09-29 レビュー実測）。事業のカードの列だけ左右にはみ出す */
:root { --frame-pad: 88px; --ds-font-script: "Allura", cursive; }
@media (max-width: 1199px) { :root { --frame-pad: 40px; } }
@media (max-width: 640px) { :root { --frame-pad: 20px; } }