:root {
    /* ================================
       Base colors（直接使用しないこと）
    ================================= */
    --mjs-blue01: #1B76BD;
    --mjs-blue02: #79B8EA;
    --mjs-blue03: #B0D7F7;
    --mjs-blue04: #E2F2FF;
    --mjs-blue05: #F4FAFF;
    --mjs-blue06: #0088CE;
    --mjs-blue07: #4585DE;
    --mjs-blue08: #91A4C3;
    --mjs-blue09: linear-gradient(90deg, #004688 0%, #1B76BD 100%);
    --mjs-blue10: #D9EDF7;
    --mjs-green01: #228589;
    --mjs-green02: #4EB6BA;
    --mjs-green03: #7CD9DD;
    --mjs-green04: #DAF3F5;
    --mjs-green05: #EFFEFF;
    --mjs-green06: linear-gradient(90deg, #0F5D60 0%, #228589 100%);
    --mjs-green07: #EEFDFE;
    --mjs-white01: #FFFFFF;
    --mjs-white02: #FCFCFC;
    --mjs-white03: #FAFAFA;
    --mjs-white04: #F7F8FA;
    --mjs-black01: #333333;
    --mjs-black02: #5F6368;
    --mjs-black03: #3333331A;
    --mjs-gray01: #8D8D8D;
    --mjs-gray02: #D8D8D8;
    --mjs-gray03: #F0F0F0;
    --mjs-gray04: #E9EEF5;
    --mjs-gray05: #DDDDDD;
    --mjs-red01: #CB1E1E;
    --mjs-red02: #FFA7A7;
    --mjs-red03: #FFE6E6;
    --mjs-red04: #F2DEDE;
    --mjs-orange01: #EF842D;
    --mjs-orange02: #FFF4E5;
    --mjs-orange03: #FCF8E3;
    --mjs-yellow01: #FFFFE0;
    /* ================================
       Usage mapping（用途毎にBase colorsを割当）
    ================================= */
    --mjs-text-color-base: var(--mjs-black01); /* 通常の文字色 */
    --mjs-text-color-disabled: var(--mjs-gray01); /* 非活性の文字色 */
    --mjs-text-color-on-dark: var(--mjs-white01); /* 濃色上の文字色 */
    --mjs-text-color-muted: var(--mjs-black02); /* サブテキストの文字色 */
    --mjs-text-color-menu: var(--mjs-blue03); /* メニューの文字色 */
    --mjs-bg-color-content: var(--mjs-white01); /* コンテンツの背景色 */
    --mjs-bg-color-page: var(--mjs-white03); /* ページの背景色 */
    --mjs-bg-color-btn: var(--mjs-blue06); /* (旧)ボタンの背景色 */
    --mjs-bg-color-non-active: var(--mjs-gray02); /* 非活性の背景色 */
    --mjs-border-color: var(--mjs-gray03); /* 枠線色 */
    --mjs-color-primary: var(--mjs-blue01); /* メインカラー */
    --mjs-color-primary-light: var(--mjs-blue02); /* メインカラー 淡色 */
    --mjs-bg-header: var(--mjs-blue09); /* ヘッダ背景 */
    --mjs-qyo-color-primary: var(--mjs-green01); /* （給与）メインカラー */
    --mjs-qyo-color-primary-light: var(--mjs-green02); /* （給与）メインカラー 淡色 */
    --mjs-qyo-bg-header: var(--mjs-green06); /* （給与）ヘッダ背景 */
    --mjs-qyo-bg-color-title: var(--mjs-green05); /* （給与）タイトル背景色 */
    --mjs-qyo-bg-color-item: var(--mjs-white02); /* （給与）項目背景色 */
    --mjs-qyo-color-bg-confirmed: var(--mjs-green04); /* （給与）確定背景色 */
    --mjs-qyo-color-confirmed: var(--mjs-green01); /* （給与）確定色 */
    --mjs-qyo-color-bg-pending: var(--mjs-gray03); /* （給与）未確定背景色 */
    --mjs-qyo-color-pending: var(--mjs-gray01); /* （給与）未確定色 */
    --mjs-lock-bg-color: var(--mjs-orange01); /* ロックの背景色 */
    --mjs-lock-bg-color-tooltip: var(--mjs-orange02); /* ロックのツールチップ背景色 */
    --mjs-important-bg-color: var(--mjs-red01); /* 重要の背景色 */
    --mjs-alert-border-color: var(--mjs-red02); /* 通知の枠色 */
    --mjs-alert-bg-color: var(--mjs-red03); /* 通知の背景色 */
    --mjs-alert-text-color: var(--mjs-red01); /* 通知の文字色 */
    --mjs-table-border-color: var(--mjs-blue03); /* テーブルの枠線色 */
    --mjs-table-header-bg-color: var(--mjs-blue05); /* テーブルヘッダの背景色 */
    --mjs-table-fixed-border-color: var(--mjs-gray01); /* テーブルの枠線色（固定ヘッダ） */
    --mjs-table-fixed-header-bg-color: var(--mjs-gray04); /* テーブルヘッダの背景色（固定ヘッダ） */
    --mjs-bg-color-menu-hover: var(--mjs-blue04); /* メニューホバーの背景色 */
    --mjs-bg-color-menu-hover-light: var(--mjs-blue05); /* メニューホバーの背景色 淡色 */
    --mjs-qyo-bg-color-menu-hover: var(--mjs-green04); /* （給与）メニューホバーの背景色 */
    --mjs-qyo-bg-color-menu-hover-light: var(--mjs-green05); /* （給与）メニューホバーの背景色 淡色 */
    --mjs-bg-color-list-item-hover: var(--mjs-blue04); /* ヘッダーアカウント押下後のリストのホバー時背景色*/
    --mjs-qyo-bg-color-list-item-hover: var(--mjs-green07); /* (給与)/* ヘッダーアカウント押下後のリストのホバー時背景色*/
    --mjs-sideMenu-icon-hover-color: var(--mjs-gray02); /* サイドメニューアイコン ホバー色 */
    --mjs-color-icon: var(--mjs-blue03); /* アイコン色 */
    --mjs-bg-color-icon: var(--mjs-blue04); /* アイコンの背景色 */
    --mjs-bg-color-homeContact-icon-hover: var(--mjs-blue04); /* お問い合わせアイコンホバーの背景色 */
    --mjs-boder-color-homeContact-icon-hover: var(--mjs-blue03); /* お問い合わせアイコンホバーの枠線色 */
    --mjs-qyo-bg-color-homeContact-icon-hover: var(--mjs-green04); /* 給与お問い合わせアイコンホバーの背景色 */
    --mjs-qyo-boder-color-homeContact-icon-hover: var(--mjs-green02); /* 給与お問い合わせアイコンホバーの枠線色 */
    --mjs-bg-color-icon-hover: var(--mjs-blue03); /* アイコンホバーの背景色 */
    --mjs-warning-bg-color: var(--mjs-red04); /* 注意書きエリアの背景色 */
    --mjs-table-bg-color-inuse: var(--mjs-blue10); /* サービス利用中行背景色 */
    --mjs-table-bg-color-pending-cancel: var(--mjs-orange03); /* サービス解約予定行背景色 */
    --mjs-table-bg-color-canceled: var(--mjs-gray05); /* サービス解約済み行背景色 */
    --mjs-tooltip-bg-color: var(--mjs-yellow01); /* ツールチップ背景色 */
    --mjs-tooltip-border-color: var(--mjs-gray02); /* ツールチップ枠線色 */
    --mjs-qyo-sc-bg-color: var(--mjs-green05); /* 給与ショートカット背景色 */
    --mjs-qyo-sc-bg-color-hover: var(--mjs-green04); /* 給与ショートカットホバーの背景色 */
    --mjs-sc-bg-color-disbled: var(--mjs-gray03); /* 使用不可ショートカット背景色 */
    --mjs-sc-text-color-disbled: var(--mjs-gray01); /* 使用不可ショートカット文字色 */
    --mjs-bg-color-stepgide: var(--mjs-blue04); /* ステップガイドの背景色 */
    --mjs-bg-color-gide: var(--mjs-white04); /* 利用ガイドの背景色 */
    --mjs-color-threeicon: var(--mjs-white01); /* ステップガイドの③の文字色 */
    --mjs-sg-bg-color: var(--mjs-green04); /* スタートガイドの背景色 */
    --mjs-sg-title-color: var(--mjs-green01); /* スタートガイドのタイトル色 */
    --mjs-sg-close-hover-color: var(--mjs-gray02); /* スタートガイドの閉じるアイコンホバー色 */
    --mjs-sg-item-border-color: var(--mjs-blue04); /* スタートガイドのアイコン枠線色 */
    --mjs-qyo-sg-item-border-color: var(--mjs-green04); /* 給与スタートガイドのアイコン枠線色 */
    --mjs-modal-flow-shadow-color: var(--mjs-black03); /* フローのシャドウ色 */
    --mjs-modal-flow-step-bg-color: var(--mjs-blue04); /* フローステップ背景色 */
    --mjs-qyo-modal-flow-step-bg-color: var(--mjs-green04); /* フローステップ背景色 */
    --mjs-modal-flow-step-disabled: var(--mjs-gray03); /* 使用不可フローの背景・枠線色 */
    --mjs-modal-flow-text-step-disabled: var(--mjs-gray01); /* 使用不可フローの文字色 */
    --mjs-info-pr-color: var(--mjs-blue07); /* お知らせPRタグ色 */
    --mjs-info-important-color: var(--mjs-red01); /* お知らせ重要タグ色 */
    --mjs-header-printBox-badge-text: var(--mjs-white01); /* ヘッダー印刷ボックスバッジ文字色 */
    --mjs-qyo-gb-color-icon: var(--mjs-green04); /* 給与アイコン色 */
    --mjs-qyo-gb-color-icon-hover: var(--mjs-green03); /* 給与アイコンホバー色 */
}