@charset "UTF-8";

/* ============================================================
   Technophere — デザイントークン（全ページ共通・最初に読み込む）
   ------------------------------------------------------------
   このファイルはカスタムプロパティの「宣言」だけを持つ。
   宣言だけではどの要素にもスタイルが当たらないため、
   全ページに読み込んでも描画は一切変わらない。

   色・書体・角丸・イージングを変えたいときは、
   各CSSを探し回らずに **このファイルだけ** を書き換えれば全ページに波及する。

   ------------------------------------------------------------
   ブレークポイント規約（CSS変数はメディアクエリ内で使えないため規約はコメントで示す）

     1080px  … タブレット / 小さめラップトップ
      768px  … スマートフォン

   全CSSがこの2つに揃っている（2026-08-16 に統一完了）。
   新しいメディアクエリもこの2つ以外を増やさないこと。
   ============================================================ */

:root {
    /* ---------- 面（背景） ---------- */
    --c-paper: #F1F4F8;         /* ページ地。明るいクールグレー */
    --c-paper-deep: #E9EEF5;    /* 一段沈めた面 */
    --c-paper-tint: #E4EAF3;    /* カードのフレーム面 */
    --c-paper-shade: #D8E1F1;   /* 装飾ジオメトリの面 */
    --c-card: rgba(250, 252, 255, 0.92); /* カード本体（半透明） */

    /* ---------- 面（ダーク） ---------- */
    --c-ink-deep: #10182C;      /* ダーク帯セクション（STATISTIC など） */
    --c-ink-night: #0B1024;     /* SPドロワー / theme-color */
    --c-ink-black: #070B1A;     /* フッター */

    /* ---------- 主張色 ---------- */
    --c-cobalt: #2557F5;        /* 基準のコバルト。ボタン・リンク */
    --c-cobalt-deep: #1744D7;   /* ホバー時 */
    --c-cobalt-bright: #204FEC; /* コバルトのベタ帯（CONTACT） */
    --c-cyan: #24C6D9;          /* フォーカスリング・差し色 */
    --c-sky: #DCE6FA;           /* 薄いブルーの面・罫 */
    --c-accent: #FFB020;        /* ダーク面のフォーカスリング・ナビ下線 */

    /* ---------- 文字（ライト面） ---------- */
    --c-ink: #11182C;           /* 本文・見出し */
    --c-ink-soft: #536078;      /* リード文・補足 */
    --c-ink-mute: #64718A;      /* さらに弱い補足 */

    /* ---------- 文字（ダーク面） ---------- */
    --c-on-dark: #C7CBE0;       /* ダーク面のリード文 */
    --c-on-dark-mute: #A6ACC8;  /* ダーク面のラベル */
    --c-on-dark-faint: #8A90B0; /* ダーク面の注記 */
    --c-periwinkle: #A8BBFF;    /* ダーク面の eyebrow */

    /* ---------- 罫 ---------- */
    --c-line: rgba(32, 52, 88, 0.16);       /* ライト面の罫 */
    --c-line-dark: rgba(138, 148, 184, 0.25); /* ダーク面の罫 */

    /* ---------- 書体 ---------- */
    --f-disp: "Space Grotesk", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; /* 欧文混じりの表示用 */
    --f-body: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;                  /* 和文本文 */
    --f-mono: "Space Mono", monospace;                                            /* eyebrow・数字・コピーライト */
    --f-en: "Space Grotesk", sans-serif;                            /* 欧文のみ（ヘッダー/フッターのナビ） */

    /* ---------- 角丸 ---------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-corner: 26px; /* .tp-tile のシグネチャ「Corner Sphere」用の四分円カット半径 */

    /* ---------- 動き ---------- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);  /* 入場・下線の伸び */
    --ease-inout: cubic-bezier(0.4, 0.4, 0, 1);     /* ヘッダーのリビール */
    --dur-fast: 0.3s;
    --dur-base: 0.35s;
    --dur-slow: 0.8s;

    /* ---------- レイアウト ---------- */
    --container-max: 1200px;
    --gutter: 48px;      /* PC */
    --gutter-md: 32px;   /* @1080px 以下 */
    --gutter-sm: 22px;   /* @768px 以下 */
}