/* =====================================================================
   ありあけAI ブランド デザイントークン（Web用）
   どのWebサイト/アプリにも読み込んで使えます： <link rel="stylesheet" href="ariake-tokens.css">
   ブランド：ありあけAI（有明／夜明け）｜運営：大蛇テック合同会社
   ===================================================================== */
:root{
  /* ---- ブランドカラー（中核4色） ---- */
  --ari-navy:   #153663;   /* メイン：見出し・主要UI・濃色背景 */
  --ari-blue:   #4D80C2;   /* サブ：補助・グラデ・図版 */
  --ari-coral:  #DD7C6A;   /* 強調：アクセント（点で使う） */
  --ari-lcoral: #EFB6A3;   /* 補助アクセント・濃色背景上の差し色 */

  /* ---- 拡張：陰影・状態（Web実装用の濃淡） ---- */
  --ari-navy-900:#0f2b50;  --ari-navy-800:#13315c;  --ari-navy-700:#1f4a78;
  --ari-blue-600:#3f6fae;  --ari-blue-100:#e9eff8;
  --ari-coral-strong:#C0573D; /* 文字/リンクで使える濃いコーラル（白地で可読） */
  --ari-coral-050:#fbeee9;

  /* ---- テキスト・地・罫線 ---- */
  --ari-ink:   #222222;    /* 本文（基本は黒系） */
  --ari-ink-2: #5b6470;    /* 補助テキスト */
  --ari-ink-3: #8a93a0;    /* 注釈・キャプション */
  --ari-on-dark:#ffffff;            /* 濃色背景上の本文 */
  --ari-on-dark-2:#c9d6e6;          /* 濃色背景上の補助 */
  --ari-bg:    #ffffff;    /* 基本背景 */
  --ari-bg-soft:#f4f6fa;   /* 薄い面（セクション地） */
  --ari-surface:#e9eff8;   /* カード等のごく薄い青み */
  --ari-line:  #dce1ea;    /* 罫線・ボーダー */

  /* ---- グラデーション（夜明け＝ありあけの世界観） ---- */
  --ari-grad-line:linear-gradient(90deg,#153663 0%,#4D80C2 30%,#DD7C6A 72%,#EF9F62 100%); /* 見出し下のアクセント線 */
  --ari-grad-dawn:linear-gradient(135deg,#0f2b50 0%,#1f4a78 46%,#c46f4e 100%);            /* 全面背景（ヒーロー等） */

  /* ---- タイポグラフィ ---- */
  --ari-font:"Noto Sans JP","BIZ UDPGothic","Hiragino Sans",system-ui,sans-serif;
  --ari-fs-display:3.5rem;  /* 56px 特大見出し（ヒーロー） */
  --ari-fs-h1:2.5rem;       /* 40px */
  --ari-fs-h2:2rem;         /* 32px */
  --ari-fs-h3:1.5rem;       /* 24px */
  --ari-fs-lead:1.25rem;    /* 20px リード */
  --ari-fs-body:1rem;       /* 16px 本文 */
  --ari-fs-sm:0.875rem;     /* 14px 補助 */
  --ari-fs-xs:0.75rem;      /* 12px 注釈 */
  --ari-fw-normal:400; --ari-fw-bold:700; --ari-fw-black:800;
  --ari-lh:1.7;             /* 本文行間 */

  /* ---- 余白・角丸・影 ---- */
  --ari-space-1:4px; --ari-space-2:8px; --ari-space-3:16px; --ari-space-4:24px;
  --ari-space-5:40px; --ari-space-6:64px; --ari-space-7:96px;
  --ari-radius-sm:8px; --ari-radius:14px; --ari-radius-lg:22px; --ari-radius-pill:999px;
  --ari-shadow:0 8px 30px rgba(21,54,99,.12);
  --ari-shadow-lg:0 14px 40px rgba(21,54,99,.18);
  --ari-maxw:1120px;       /* コンテンツ最大幅の目安 */
}

/* =========================================================
   そのまま使えるWebコンポーネント（任意）
   ========================================================= */
.ari-body{font-family:var(--ari-font);color:var(--ari-ink);line-height:var(--ari-lh);font-size:var(--ari-fs-body)}

/* 見出し＋グラデ下線 */
.ari-h2{font-size:var(--ari-fs-h2);font-weight:var(--ari-fw-black);color:var(--ari-navy);line-height:1.3}
.ari-rule{width:84px;height:6px;border-radius:3px;background:var(--ari-grad-line);margin:14px 0}

/* ボタン */
.ari-btn{display:inline-flex;align-items:center;gap:.5em;font-family:inherit;font-weight:var(--ari-fw-bold);
  font-size:var(--ari-fs-body);padding:.85em 1.8em;border-radius:var(--ari-radius-pill);
  border:2px solid transparent;cursor:pointer;text-decoration:none;transition:.2s}
.ari-btn--primary{background:var(--ari-navy);color:#fff}
.ari-btn--primary:hover{background:var(--ari-navy-800)}
.ari-btn--ghost{background:#fff;color:var(--ari-navy);border-color:var(--ari-navy)}
.ari-btn--ghost:hover{background:var(--ari-blue-100)}
.ari-btn--cta{background:var(--ari-coral-strong);color:#fff}     /* CTA：白文字が読める濃コーラル */
.ari-btn--cta:hover{filter:brightness(.94)}

/* リンク */
.ari-link{color:var(--ari-navy);text-decoration:underline;text-underline-offset:3px;font-weight:var(--ari-fw-bold)}
.ari-link:hover{color:var(--ari-coral-strong)}

/* バッジ／チップ */
.ari-badge{display:inline-block;background:var(--ari-surface);color:var(--ari-navy);
  border:1.5px solid var(--ari-navy);border-radius:var(--ari-radius-pill);
  padding:.4em 1.1em;font-size:var(--ari-fs-sm);font-weight:var(--ari-fw-bold)}

/* カード */
.ari-card{background:#fff;border:1px solid var(--ari-line);border-radius:var(--ari-radius);
  padding:var(--ari-space-4);box-shadow:var(--ari-shadow)}
.ari-card--accent{border-top:5px solid var(--ari-coral)}

/* 濃色ヒーロー */
.ari-hero{background:var(--ari-grad-dawn);color:#fff;border-radius:var(--ari-radius-lg);
  padding:var(--ari-space-6) var(--ari-space-5)}