@charset "utf-8";
/* HELATH デザインの決まりごと（トークン）
   色・文字・余白・横幅・角丸・影・動きは、このファイルにだけ書く。部品のCSS（style.css ほか）は var() で読む。
   このファイルの外に色の直書きがあると、生成（build_site.py）の検査で止まる。
   値を変えるときは、ここの1行を変えれば全ページに効く。

   名前の付け方
     --c-*   色（役割の名前。値の名前ではない）
     --grad-* グラデーション
     --ff-* 書体　--fs-* 文字の大きさ
     --sp-* 余白の目盛り（4・8の倍数）　--space-* 節と区切りの余白
     --w-* 横幅　--h-* 高さ　--r-* 角丸　--sh-* 影　--dur-* 動きの時間 */

:root{
  /* ── 色：ブランド ─────────────────────────────
     2026-09-27 代表「赤、オレンジ両方とももう少し明るく、濃く」。朱と山吹の組み合わせのまま、赤を純色に近づけて明るくした。
     Serverworksと同じ色コードは使わない（白 #fff を除く） */
  --c-accent: #dc1c10;      /* 文字・線・矢印の赤。白地でコントラスト比5.0（小さい文字にも使える） */
  --c-grad-from: #ef2013;   /* グラデーションの始まり（赤） */
  --c-grad-mid: #fb7412;    /* 中ほど（オレンジ） */
  --c-grad-to: #ffa814;     /* 終わり（山吹） */

  /* ── 色：淡い色（ブランド寄り） ── */
  --c-tint-1: #f7c9bd;      /* 斜めの帯の淡い線 */
  --c-tint-2: #fde5dc;      /* 丸いアイコンの地・淡い帯 */
  --c-tint-3: #fff3ea;      /* 触れたときの地・ファーストビューの地 */
  --c-line-tint: #eddcd5;   /* 淡い枠線（タグ・課題の箱） */

  /* ── 色：面 ── */
  --c-surface: #fff;        /* カード・ヘッダー・白い節 */
  --c-bg: #f7f7f7;          /* ページの地 */
  --c-pale: #eeedec;        /* 淡い面（課題の箱・表の見出し・ピックアップ） */
  --c-dark: #1f1d1c;        /* 墨（お問い合わせの帯） */

  /* ── 色：文字 ── */
  --c-ink: #1f1d1c;         /* 見出し */
  --c-body: #403d3b;        /* 本文 */
  --c-sub: #5f5a57;         /* 補足 */
  --c-muted: #75716e;       /* 注記・英字の下の日本語 */
  --c-faint: #9d9894;       /* 最も淡い文字・点線 */

  /* ── 色：線 ── */
  --c-line: #e4e2e0;        /* 罫線 */
  --c-line-soft: #ecebe9;   /* ごく淡い罫線（表・一覧の囲み） */
  --c-line-field: #d9d4d4;  /* 入力欄の枠 */
  --c-watermark: #e8e6e4;   /* 英字の透かし（トップ案Bの節見出し） */

  /* ── 色：色や墨の上に乗せる白 ── */
  --c-on-accent: #fff;                      /* 赤・グラデーションの上の文字 */
  --c-on-dark: #fff;                        /* 墨の上の文字 */
  --c-on-dark-2: rgb(255 255 255 / .82);    /* 墨の上の説明文 */
  --c-on-dark-line: rgb(255 255 255 / .55); /* 墨の上の枠線 */
  --c-on-dark-veil-1: rgb(255 255 255 / .08); /* 墨の上の斜めの帯 */
  --c-on-dark-veil-2: rgb(255 255 255 / .05);
  --c-lb-bg: rgb(31 29 28 / .94);   /* 図版を拡大したときの背景（墨） */

  /* ── 影（2026-09-27 代表「前の方が繊細」＝値は変えない） ── */
  --c-shadow: 34 30 28;     /* 影の色（rgbの3つの数） */

  /* ── 文字 ── */
  --ff-jp: "Noto Sans JP", sans-serif;
  --ff-en: "Montserrat", "Noto Sans JP", sans-serif;  /* 英字・数字の見出し */
  --ff-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  /* 決まりごとの一覧ページの変数名 */
  --fs-2xs: 11px;   /* 著作権表示・必須の印 */
  --fs-xs: 12px;    /* パンくず・分類のラベル・注記 */
  --fs-sm: 13px;    /* 英字見出しの下の日本語・カードの補足 */
  --fs-ui: 14px;    /* ボタン・ナビ・タグ・カードの説明 */
  --fs-md: 15px;    /* 一覧の項目・フォーム */
  --fs-base: 16px;  /* 本文 */
  --fs-lg: 18px;    /* カードの見出し・前文 */
  --fs-xl: 21px;    /* 小見出し */
  --fs-2xl: 24px;   /* 中見出し */
  --fs-3xl: 28px;   /* 赤い見出し */
  --fs-4xl: 32px;   /* 大きな一文 */
  --fs-5xl: 40px;   /* お問い合わせの帯の見出し */
  --fs-6xl: 44px;   /* 英字の節見出し・ページの見出し */
  --fs-display: clamp(40px, 4.6vw, 62px); /* ファーストビューの見出し。1440pxで「業務を、ヘラス。」が1行に収まる上限 */
  --fs-display-band: clamp(40px, 4.3vw, 58px); /* 帯に乗せた見出し（トップ案B）。帯の内側の余白ぶん小さく */
  --fs-watermark: clamp(48px, 6.2vw, 88px);    /* 英字の透かし（トップ案Bの節見出し） */
  --lh-body: 2;
  --ls-body: .05em;

  /* ── 余白の目盛り ── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px;  --sp-8: 32px;  --sp-9: 40px;  --sp-10: 48px;
  --sp-11: 56px; --sp-12: 64px; --sp-13: 72px; --sp-14: 80px; --sp-15: 96px; --sp-16: 112px;
  --space-section: var(--sp-16);  /* 節の上下 */
  --space-block: var(--sp-15);    /* 節の中の大きな区切り */

  /* ── 横幅・高さ ── */
  --w-page: 1160px;   /* コンテンツの幅 */
  --gutter: 24px;     /* 画面の端との余白（狭い画面） */
  --edge: max(var(--gutter), calc((100vw - var(--w-page)) / 2)); /* 全幅の帯の中で、コンテンツの端にそろえる余白 */
  --h-head: 84px;     /* ヘッダーの高さ */

  /* ── 角丸 ── */
  --r-sm: 3px;        /* ボタン・ラベル・技術名 */
  --r-md: 6px;        /* カード・入力欄・画像 */
  --r-pill: 999px;    /* タグ・絞り込み・分類 */
  --r-round: 50%;     /* 丸いアイコン・丸い矢印 */

  /* ── 動き ── */
  --dur-fast: .15s;
  --dur-base: .2s;
  --dur-flow: 6s;     /* グラデーションが流れる1周 */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ほかの色から組み立てる値。置き換え済みの値で子へ継承されるので、配色を上書きする場所でも組み直す */
:root, [data-palette]{
  --grad-brand: linear-gradient(90deg, var(--c-grad-from) 0%, var(--c-grad-mid) 50%, var(--c-grad-to) 100%);
  --sh-card: 0 3px 14px rgb(var(--c-shadow) / .08);        /* カード */
  --sh-card-hover: 0 6px 22px rgb(var(--c-shadow) / .14);  /* カードに触れたとき */
  --sh-raised: 0 6px 20px rgb(var(--c-shadow) / .12);      /* ピックアップ */
  --sh-media: 0 6px 24px rgb(var(--c-shadow) / .1);        /* 画面の画像 */
  --sh-menu: 0 24px 32px -24px rgb(var(--c-shadow) / .22); /* メガメニュー */
}

/* 狭い画面 */
@media (max-width: 1180px){
  :root{ --h-head: 72px; }
}
@media (max-width: 900px){
  :root{
    --space-section: var(--sp-13);
    --space-block: var(--sp-12);
    --fs-display: clamp(30px, 10vw, 40px);  /* 360pxでも1行 */
    --fs-display-band: clamp(28px, 9vw, 38px);
    --fs-watermark: clamp(24px, 7.1vw, 44px);  /* 360pxでも「System Development」が1行に収まる */
  }
}

/* スマホ（560px以下）：文字と余白の段をスマホ専用に差し替える（MOBILE-SPEC-2026-09-28）。
   PC は部品ごとに段（--fs-*）を選んでいる。スマホは「役割」の変数でそろえ、ここの1行で全ページの同じ役割が変わる */
@media (max-width: 560px){
  :root{
    /* 高さ */
    --h-head: 60px;                 /* ヘッダー 72 → 60 */
    --h-row: 48px;                  /* 押す行（目次・フッター・一覧）の最小の高さ */
    --h-tap: 44px;                  /* 押せるものの最小の高さ */
    /* 余白 */
    --space-section: var(--sp-10);  /* 48：節の上下（節と節の間は 96） */
    --space-block: var(--sp-10);    /* 48：節の中の大きな区切り（下層の h2 の上） */
    --space-head: var(--sp-4);      /* 16：見出し → 中身 */
    /* 文字：役割の段 */
    --fs-h1: var(--fs-3xl);         /* 28：ページの見出し */
    --fs-h2: var(--fs-2xl);         /* 24：節の見出し（赤い見出し・トップの節見出し） */
    --fs-h3: var(--fs-xl);          /* 21：節の中の見出し（領域名・技術名・課題から探す・ピックアップの題） */
    --fs-h4: var(--fs-lg);          /* 18：小見出し（業務のまとまり・手順・本文の h2・アクセスの拠点名） */
    --fs-lead: var(--fs-lg);        /* 18：業務ページの要約（太字） */
    --fs-intro: var(--fs-base);     /* 16：ページの前文 */
    --fs-desc: var(--fs-ui);        /* 14：説明・補足（お問い合わせの帯の文・フッターの項目） */
    --fs-note: var(--fs-xs);        /* 12：注記・パンくず・日付・表の項目名 */
    /* 行の高さ */
    --lh-body: 1.8;                 /* 本文 2.0 → 1.8（16px で 1行 28.8px） */
    --lh-head: 1.5;                 /* 見出し（h2・h3） */
    --lh-lead: 1.7;                 /* 要約・前文の太字 */
    /* 英字の透かし：2行に割って大きく（390 で 42.9px、360 で 39.6px） */
    --fs-watermark: clamp(36px, 11vw, 44px);
  }
}

/* 直前の配色（2026-09-27 に明るくする前）。決まりごとの一覧ページで見比べるためだけに使う */
[data-palette="prev"]{
  --c-accent: #c42c14; --c-grad-from: #d12e15; --c-grad-mid: #e86e12; --c-grad-to: #ffaf0f;
}