/*!
 * このファイルは自動生成です。編集しないでください。
 * 編集する場合は src/ を編集し、node tools/build-theme.js を実行してください。
 *
 * 生成元: src/css/design-tokens.css
 */
/*!
 * design-tokens.css
 * 就労支援事業所LP 共通デザイントークン v1
 *
 * 出所: ぎふ就労支援センターLP C228（gifu-lp-theme-c228）の実測値
 *   色 102種類 → 24種類
 *   font-size 33種類 → 11段階
 *   border-radius 12種類 → 4段階
 *   ブレークポイント 44種類 → 3点
 *
 * 新しい色を発明したのではなく、C228で最も使用回数の多い値を残し、
 * 誤差レベルで隣接している値をそこへ寄せています。
 * 括弧内の回数は C228 lp-content.php での実使用回数です。
 *
 * 使い方
 *   1. lp.css より前に読み込む
 *   2. 以降のCSSでは生の色コードを書かず、必ず var(--...) を参照する
 *   3. 事業所ごとに変えるのは「ブランド」ブロックだけ
 */

:root {

  /* =========================================================
     1. ブランド（事業所ごとに差し替える唯一のブロック）
     ========================================================= */

  /* 主色。C228では青系が7種類に分かれていたので #1A5FD0（63回）に統一 */
  --brand-primary:        #1A5FD0;
  --brand-primary-deep:   #12448F;  /* hover・押下 */
  --brand-primary-light:  #E9F1FC;  /* 主色の面（14回の値を採用） */
  /* v1追加。主色より明るい寄りの青。C228の --numbers-cyan (#28A8E0) と
     --brand-gradient の右端 (#5CC3EE) が担っていた役割。
     グラフのグラデーションで主色と対にして使う。
     事業所ごとに差し替えるならここも合わせて変える。 */
  --brand-primary-bright: #28A8E0;

  /* アクセント2色。C228の使い分け（オレンジ=仕事/実務、グリーン=生活/安心）を踏襲 */
  --brand-accent-warm:    #D98745;  /* 27回 */
  --brand-accent-warm-bg: #FBEEE1;  /*  7回 */
  --brand-accent-cool:    #6E9B55;  /* 14回 */
  --brand-accent-cool-bg: #EDF3E9;

  /* v1追加。見出し下の細い罫だけに使う金色。C228では FV / #reasons / #work の
     3箇所で同じ装飾に使われていた。文字には使わない（コントラストが出ない）。 */
  --brand-accent-gold: #F3D33A;

  /* アクセントの文字用（v1追加）。
     --brand-accent-warm をそのまま warm-bg の上に置くとコントラストが約2.6:1で
     読めない。C228も文字には濃い側（#A85C0F / #4A7D2C）を別に使っていた。
     アクセント色から導出しているので、上のアクセントを変えれば追従する。 */
  --brand-accent-warm-ink: color-mix(in srgb, var(--brand-accent-warm) 70%, black);
  --brand-accent-cool-ink: color-mix(in srgb, var(--brand-accent-cool) 75%, black);

  /* 主色・アクセントの透過段（v1追加）。
     C228では枠線や淡い面に rgba(26,95,208,α) が多数あった。
     色そのものを書かず、必ず主色から作る。 */
  --brand-primary-a04: color-mix(in srgb, var(--brand-primary) 4%,  transparent);
  --brand-primary-a14: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --brand-primary-a24: color-mix(in srgb, var(--brand-primary) 24%, transparent);
  --brand-accent-warm-a16: color-mix(in srgb, var(--brand-accent-warm) 16%, transparent);
  --brand-accent-cool-a18: color-mix(in srgb, var(--brand-accent-cool) 18%, transparent);

  /* 見出しグラデーション（C228 --heading-gradient-primary を維持） */
  --brand-gradient: linear-gradient(95deg, #1543B8 0%, #2A6FD6 60%, #5CC3EE 100%);


  /* =========================================================
     2. テキスト
     C228は濃紺系5種・グレー系5種に散っていた。役割ごとに1つへ。
     ========================================================= */

  --ink-strong:  #0D2B52;  /* 71回。見出し・強調 */
  --ink-base:    #22406B;  /* 43回。本文 */
  --ink-muted:   #3D557A;  /* 67回。補足・リード文 */
  --ink-subtle:  #5B6E8A;  /* 32回。注記・キャプション */
  --ink-invert:  #FFFFFF;


  /* =========================================================
     3. 面（背景）
     C228最大の統一感の欠落点。淡い青が8種類（#E7EEF7 #E9F1FC #EEF4FB
     #E9EDF3 #EEF2F7 #F8FAFD #F4F7FA #E7EDF5）並び、さらに
     ウォームベージュ系（#FBFAF6 #FDFDFC）とグリーン寄り（#F2F4F2）が
     混在していた。3系統を1系統（クールブルー）へ寄せ、3段階に整理。
     ========================================================= */

  --surface-base:   #FFFFFF;  /* 標準セクション */
  --surface-raised: #F5F8FC;  /* 1段沈めたセクション */
  --surface-sunken: #E7EEF7;  /* 23回。さらに沈めたセクション・FAQ など */
  /* 温かみのある紙色。青系の面とは別軸の中間色（#flow の背景） */
  --surface-paper:      #FBFAF6;
  --surface-paper-deep: #F7F6F1;

  --border-hairline: rgba(11, 45, 87, 0.08);  /* カード枠 */
  --border-line:     #D5E0EC;                 /* 罫線・区切り */
  --border-strong:   #AFBDCC;                 /* フォーム枠 */


  /* =========================================================
     4. タイポグラフィ
     C228は font-size 33種類。0.5px刻みの差（12/12.5/13/13.5…）は
     意図ではなく調整の残骸なので、11段階へ畳む。
     ========================================================= */

  --font-body:    'Noto Sans JP', sans-serif;
  --font-display: 'Manrope', 'Noto Sans JP', sans-serif;  /* 英字ラベル・数字のみ */

  /* サイズ（PC基準） */
  --fs-display: 76px;  /* 数字の大表示 */
  --fs-h1:      56px;  /* ファーストビュー */
  --fs-h2:      40px;  /* セクション見出し。C228は7種類に割れていた */
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-h5:      20px;  /* カード見出し。C228の18/19/20/21pxを吸収 */
  --fs-lead:    17px;  /* リード文 */
  --fs-body:    16px;  /* 83回。本文の基準 */
  --fs-body-s:  15px;
  --fs-caption: 13px;
  --fs-label:   12px;  /* 64回。英字ラベル・タグ */
  --fs-fine:    11px;  /* 注記の下限。これ未満は使わない */

  /* サイズ（SP基準。900px未満で切り替え） */
  --fs-display-sp: 48px;
  --fs-h1-sp:      34px;
  --fs-h2-sp:      29px;
  --fs-h3-sp:      22px;
  --fs-h4-sp:      19px;
  --fs-h5-sp:      18px;
  --fs-lead-sp:    15px;   /* v1追加。C228のリード文はSPで15pxだった */

  /* ウェイト。C228の400と900と600は使用が少なく役割が重複していたため落とす */
  --fw-normal: 500;
  --fw-bold:   700;
  --fw-black:  800;

  /* 行間。C228は12種類 → 5段階 */
  --lh-flat:    1;     /* 数字の大表示 */
  --lh-tight:   1.3;   /* 大見出し */
  --lh-snug:    1.5;   /* 小見出し */
  --lh-normal:  1.8;   /* 本文 */
  --lh-relaxed: 2;     /* ゆったり読ませる本文 */

  /* 字送り */
  --ls-tight:   -0.02em;  /* Manropeの数字 */
  --ls-normal:   0.03em;  /* 本文 */
  --ls-heading:  0.04em;  /* 見出し */
  --ls-label:    0.2em;   /* 英字ラベル（NUMBERS など） */


  /* =========================================================
     5. 余白
     8pxグリッド。C228のセクション上余白は76〜138pxで13種類あった。
     ========================================================= */

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  80px;
  --sp-10: 104px;

  /* セクション上下余白。標準はこの1つだけを使う */
  --sp-section-y:    104px;
  --sp-section-y-sp:  72px;

  /* 見出しブロックと本体の間 */
  --sp-heading-gap:    48px;
  --sp-heading-gap-sp: 32px;

  /* コンテンツ幅 */
  --w-content: 1160px;
  --w-narrow:   880px;  /* 読み物・FAQ */
  --w-gutter:    32px;
  --w-gutter-sp: 20px;


  /* =========================================================
     6. 角丸
     C228は 2/6/7/8/9/10/14/18/22/40/999px の11種類。4段階へ。
     ========================================================= */

  --r-sm:   8px;   /* タグ・小ボタン */
  --r-md:  16px;   /* カード */
  --r-lg:  28px;   /* 画像・大きい面 */
  --r-pill: 999px; /* ピルボタン。75回使われており役割が明確なので残す */


  /* =========================================================
     7. 影
     ========================================================= */

  --shadow-card:  0 2px 12px rgba(11, 45, 87, 0.06);
  --shadow-lift:  0 12px 30px rgba(11, 45, 87, 0.14);
  --shadow-float: 0 12px 30px rgba(0, 0, 0, 0.22);  /* ページトップボタン */


  /* =========================================================
     8. モーション
     ========================================================= */

  --ease:        cubic-bezier(0.22, 0.8, 0.32, 1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    600ms;  /* スクロールリビール */
}


/* ===========================================================
   ブレークポイント
   C228は44種類（899.98 / 900 / 768 / 767 / 760 / 640 / 599 /
   599.98 / 430 / 420 / 360 …）が混在していた。3点に固定する。
   CSS変数はメディアクエリに書けないため、値をここに明記して運用する。

     SP    : ～599px
     TB    : 600px～899px
     PC    : 900px～
     WIDE  : 1280px～（#flow など特殊レイアウトのみ）

   max-width を書くときは 599.98px / 899.98px / 1279.98px を使い、
   min-width と1px重ならないようにする。
   =========================================================== */

@media (max-width: 899.98px) {
  :root {
    --fs-display: var(--fs-display-sp);
    --fs-h1:      var(--fs-h1-sp);
    --fs-h2:      var(--fs-h2-sp);
    --fs-h3:      var(--fs-h3-sp);
    --fs-h4:      var(--fs-h4-sp);
    --fs-h5:      var(--fs-h5-sp);
    --fs-lead:    var(--fs-lead-sp);

    --sp-section-y:   var(--sp-section-y-sp);
    --sp-heading-gap: var(--sp-heading-gap-sp);
    --w-gutter:       var(--w-gutter-sp);
  }
}


/* ===========================================================
   基本スタイル
   ここから下は、全セクションが従う共通の型。
   セクション個別CSSで !important を使わなくて済むよう、
   詳細度を低く保つ。
   =========================================================== */

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-base);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--ink-base);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--brand-primary-deep); }
a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 3px;
}


/* --- セクションの型 ---------------------------------------
   すべてのセクションは .lp-section を持ち、面の違いだけを
   修飾クラスで切り替える。上下余白を個別に指定しない。
   ---------------------------------------------------------- */

.lp-section {
  position: relative;
  padding: var(--sp-section-y) var(--w-gutter);
  background: var(--surface-base);
}
.lp-section--raised { background: var(--surface-raised); }
.lp-section--sunken { background: var(--surface-sunken); }
.lp-section--flush  { padding-left: 0; padding-right: 0; }

.lp-inner {
  position: relative;
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
}
.lp-inner--narrow { max-width: var(--w-narrow); }


/* --- 見出しの型 -------------------------------------------
   英字ラベル → 日本語見出し → リード文、の3点セット。
   C228で最も繰り返されていた構造をそのまま型にする。
   ---------------------------------------------------------- */

.lp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--sp-heading-gap);
}
.lp-head--left { align-items: flex-start; text-align: left; }

.lp-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-flat);
  color: var(--brand-primary);
}

.lp-h2 {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--ink-strong);
}
.lp-h2--gradient {
  width: fit-content;
  max-width: 100%;
  background-image: var(--brand-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lp-lead {
  margin: var(--sp-5) 0 0;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--ink-muted);
}


/* --- カードの型 ------------------------------------------- */

.lp-card {
  background: var(--surface-base);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
}


/* --- ボタンの型 -------------------------------------------
   C228は個別セクションごとにCTAのサイズと角丸が違っていた。
   ---------------------------------------------------------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 60px;
  padding: 0 var(--sp-7);
  border-radius: var(--r-pill);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-flat);
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.lp-btn--primary {
  background: var(--brand-primary);
  color: var(--ink-invert);
  box-shadow: var(--shadow-card);
}
.lp-btn--primary:hover {
  background: var(--brand-primary-deep);
  color: var(--ink-invert);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.lp-btn--ghost {
  background: var(--surface-base);
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
}
.lp-btn--ghost:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary-deep);
}


/* --- モーション配慮 ---------------------------------------
   C228でも各セクションに個別に書かれていたが、ここで一括宣言する。
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}