@charset "utf-8";

/* ===============================================
    カスタムプロパティ
   =============================================== */
:root {
    /* ===============================================
        表示するテーマカラー定義（カラーコード・RGB）

        ※JavaScript で操作する対象
        　この色に左右されずに表示させたい各帳票カラーは、別途変数を参照すること
       =============================================== */
    --snp-current-report-mode: 00;
    --snp-current-report-theme-color-code: #000;
    --snp-current-report-theme-color-rgb: #000;


    /* ===============================================
        カラー定義（カラーコード・RGB）
       =============================================== */
    /* Spectrum Color */
    --spectrum-red-color-code: #D40000;
    --spectrum-red-color-rgb: 212, 0, 0;
    --spectrum-orange-color-code: #F98500;
    --spectrum-orange-color-rgb: 249, 133, 0;
    --spectrum-yellow-color-code: #FFE942;
    --spectrum-yellow-color-rgb: 255, 233, 66;
    --spectrum-green-color-code: #00926E;
    --spectrum-green-color-rgb: 0, 146, 110;
    --spectrum-blue-color-code: #0067E8;
    --spectrum-blue-color-rgb: 0, 103, 232;
    --spectrum-purple-color-code: #84008E;
    --spectrum-purple-color-rgb: 132, 0, 142;
    --spectrum-pink-color-code: #E64C84;
    --spectrum-pink-color-rgb: 230, 76, 132;

    /* 無彩色 */
	--achromatic-color-code-001: #FFF;
	--achromatic-color-code-002: #F8F8F8;
	--achromatic-color-code-003: #F5F5F7;
	--achromatic-color-code-004: #E5E5EA;
	--achromatic-color-code-005: #DEDEDE;
	--achromatic-color-code-006: #BABABA;
	--achromatic-color-code-007: #939393;
	--achromatic-color-code-008: #6C6C6C;
	--achromatic-color-code-009: #1A1A1A;
	--achromatic-color-code-010: #000;


    /* ===============================================
        帳票別テーマカラー
       =============================================== */
    --snp-report-theme-color-code--01: var(--spectrum-green-color-code);   /* 木造 */
    --snp-report-theme-color-rgb--01: var(--spectrum-green-color-rgb);   /* 木造 */
    --snp-report-theme-color-code--02: var(--spectrum-green-color-code);   /* RC造_ラーメン構造 */
    --snp-report-theme-color-rgb--02: var(--spectrum-green-color-rgb);   /* RC造_ラーメン構造 */
    --snp-report-theme-color-code--03: var(--spectrum-purple-color-code);   /* RC造_壁式構造 */
    --snp-report-theme-color-rgb--03: var(--spectrum-purple-color-rgb);   /* RC造_壁式構造 */
    --snp-report-theme-color-code--04: var(--spectrum-pink-color-code);   /* RC造_壁式PC構造 */
    --snp-report-theme-color-rgb--04: var(--spectrum-pink-color-rgb);   /* RC造_壁式PC構造 */
    --snp-report-theme-color-code--05: var(--spectrum-orange-color-code);   /* RC造_中高層式ラーメン構造 */
    --snp-report-theme-color-rgb--05: var(--spectrum-orange-color-rgb);   /* RC造_中高層式ラーメン構造 */
    --snp-report-theme-color-code--06: var(--spectrum-blue-color-code);   /* 鉄骨造 */
    --snp-report-theme-color-rgb--06: var(--spectrum-blue-color-code);   /* 鉄骨造 */
    --snp-report-theme-color-code--07: var(--spectrum-purple-color-code);   /* 区分所有建物・占有部分用 */
    --snp-report-theme-color-rgb--07: var(--spectrum-purple-color-rgb);   /* 区分所有建物・占有部分用 */
    --snp-report-theme-color-code--08: var(--spectrum-orange-color-code);   /* 家財 */
    --snp-report-theme-color-rgb--08: var(--spectrum-orange-color-rgb);   /* 家財 */


    /* ===============================================
        背景色
       =============================================== */
    --background-color-base: var(--achromatic-color-code-003);
    --background-color-overlay: rgba(0, 0, 0, 0.8);

    --background-color-000: var(--achromatic-color-code-001);
    --background-color-001: var(--achromatic-color-code-002);
    --background-color-002: var(--achromatic-color-code-003);
    --background-color-003: var(--snp-current-report-theme-color-code);             /* 操作中の帳票に合わせて変化する色 */
    --background-color-004: var(--achromatic-color-code-004);
    --background-color-005: rgb(var(--snp-current-report-theme-color-rgb), 0.1);    /* 操作中の帳票に合わせて変化する色 */
    --background-color-006: var(--snp-report-theme-color-code--08);                 /* 固定色（帳票：家財） */
    --background-color-007: var(--spectrum-red-color-code);
    --background-color-008: var(--achromatic-color-code-008);
    --background-color-009: var(--achromatic-color-code-006);
    --background-color-010: var(--snp-report-theme-color-code--01);                 /* 固定色（帳票：木造） */
    --background-color-011: var(--achromatic-color-code-010);

    /* ===============================================
        枠色
       =============================================== */
    --border-color-base: var(--achromatic-color-code-005);
    
    --border-color-001: var(--achromatic-color-code-007);
    --border-color-002: var(--snp-current-report-theme-color-code);                 /* 操作中の帳票に合わせて変化する色 */
    --border-color-003: var(--achromatic-color-code-006);
    --border-color-004: var(--achromatic-color-code-009);
    --border-color-005: var(--snp-report-theme-color-code--01);                     /* 固定色（帳票：木造） */
    --border-color-006: var(--achromatic-color-code-001);
    --border-color-007: var(--achromatic-color-code-010);


    /* ===============================================
        文字色
       =============================================== */
    --font-color-base: var(--achromatic-color-code-009);
    --font-color-error: var(--spectrum-red-color-code);

    --font-color-000: var(--achromatic-color-code-001);
    --font-color-001: var(--spectrum-red-color-code);
    --font-color-002: var(--spectrum-orange-color-code);                             /* 固定色（帳票：RC造_中高層壁式ラーメン構造、家財） */
    --font-color-003: var(--spectrum-yellow-color-code);
    --font-color-004: var(--spectrum-green-color-code);                              /* 固定色（帳票：木造、RC造_ラーメン構造） */
    --font-color-005: var(--spectrum-blue-color-code);                               /* 固定色（帳票：鉄骨） */
    --font-color-006: var(--spectrum-purple-color-code);                             /* 固定色（帳票：区分所有・専有部分、RC造_壁式構造） */
    --font-color-007: var(--spectrum-pink-color-code);                               /* 固定色（帳票：RC造_壁式PC構造：ピンク） */
    --font-color-008: var(--achromatic-color-code-008);
    --font-color-009: var(--achromatic-color-code-005);
    --font-color-010: var(--achromatic-color-code-006);
    --font-color-011: var(--snp-current-report-theme-color-code);                    /* 操作中の帳票に合わせて変化する色 */
    --font-color-012: var(--achromatic-color-code-007);


    /* ===============================================
        文字サイズ
       =============================================== */
    --font-size-base: 0.875rem;              /* 14px  ベースサイズ */
    --font-size-small: 0.8125rem;            /* 13px */
    --font-size-description: 0.875rem;       /* 14px */
    --font-size-medium: 1rem;                /* 16px */
    --font-size-semilarge: 1.125rem;         /* 18px */
    --font-size-large: 1.375rem;             /* 22px */
    --font-size-base-highlight: 0.9375rem;   /* 15px */

    --font-size-minimal: 0.6875rem;          /* (特殊) 11px */


    /* ===============================================
        影
       =============================================== */
    --shadow-base: 0px -4px 6px -2px rgba(0,0,0,0.2);
    --tooltip-shadow-base: 0 0 6px rgba(0, 0, 0, 0.5);
    --dropdown-shadow-base: 0 0 6px rgba(0, 0, 0, 0.4);


    /* ===============================================
        Bootstrap 変数
       =============================================== */
    --bs-font-sans-serif: "NotoSansJP", "NotoSansJPBold", Verdana, Meiryo, sans-serif;
}