@charset "utf-8";

/********************************************
color-palette
サイト全体で使う色・幅・高さを :root で一元管理
********************************************/
:root{
    /* content */
    --contents_size: 1260px;
    --header-height: 70px;
    --header-height-sp: 40px;

    /* brand blue */
    --color-header: #117ac0;
    --color-primary: #117ac0;      /* 見出し(EN)・リンク */
    --color-primary-dark: #0e5f9e;
    --color-primary-light: #4ba6da;

    /* text */
    --color-text: #333333;
    --color-text-sub: #666666;
    --color-text-note: #999999;
    --color-reason: #117ac0;       /* Reasonの小見出し */

    /* accent */
    --color-accent: #f28c3d;       /* オレンジ(ボタン/バッジ) */
    --color-accent-dark: #df7a2b;

    /* background */
    --color-bg: #ffffff;
    --color-bg-gray: #efefef;      /* 対応実績ボックス */
    --color-bg-light: #d8e5ed;     /* Reason/FAQの淡い青背景 */
    --color-line: #117ac0;

    /* gradient */
    --grad-back: linear-gradient(167deg, #117ac0 0%, #50cfe0 100%);

    /* font */
    --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
    --font-num: "Hind", var(--font-base);   /* 数字・STEP・Q/A などに使用(bold) */
}