+-contrast-+が付く名称はダークモードの時などに使用。
+-breakpoint-+はJSで使用。
:root {
--white: rgb(255 255 255);
--white-main: rgb(255 255 255 / .95);
--white-light: rgb(255 255 255 / .87);
--black: rgb(0 0 0);
--black-main: rgb(0 0 0 / .95);
--black-light: rgb(0 0 0 / .87);
--primary-main: #2194f3;
--primary-light: #bbdefb;
--primary-dark: #1045a1;
--primary-50: #e3f2fd;
--primary-100: #bbdefb;
--primary-200: #90c9f9;
--primary-300: #63b4f6;
--primary-400: #42a4f5;
--primary-500: #2194f3;
--primary-600: #1f87e5;
--primary-700: #1a75d2;
--primary-800: #1764c0;
--primary-900: #1045a1;
--secondary-main: #ffeb3b;
--secondary-light: #fff9c4;
--secondary-dark: #f57f16;
--secondary-50: #fffde7;
--secondary-100: #fff9c4;
--secondary-200: #fff59d;
--secondary-300: #fef075;
--secondary-400: #fceb55;
--secondary-500: #ffeb3b;
--secondary-600: #fdd835;
--secondary-700: #fbc02d;
--secondary-800: #f9a825;
--secondary-900: #f57f16;
--txt-main: rgb(0 0 0 / .87);
--txt-light: rgb(0 0 0 / .60);
--txt-disabled: rgb(0 0 0 / .28);
--txt-link: rgb(41 98 255);
--txt-contrast-main: rgb(255 255 255 / .60);
--txt-contrast-light: rgb(255 255 255 / .87);
--txt-contrast-dark: rgb(255 255 255 / .28);
--txt-contrast-link: rgb(62, 166, 255);
--bg-main: rgb(246 247 248);
--bg-paper: rgb(255 255 255);
--bg-disabled: rgb(0 0 0 / .12);
--bg-contrast-main: rgb(0 0 0 / .60);
--bg-contrast-light: rgb(0 0 0 / .87);
--bg-contrast-dark: rgb(0 0 0 / .28);
--line-main: rgb(0 0 0 / .23);
--line-light: rgb(0 0 0 / .12);
--line-dark: rgb(0 0 0 / .42);
--hover: rgb(0 0 0 / .04);
--overlay: rgb(0 0 0 / .50);
--shadow-main: rgb(0 0 0 / .2) 0px 3px 1px -2px, rgb(0 0 0 / .14) 0px 2px 2px 0px, rgb(0 0 0 / .12) 0px 1px 5px 0px;
--shadow-main-hov: rgb(0 0 0 / .2) 0px 2px 4px -1px, rgb(0 0 0 / .14) 0px 4px 5px 0px, rgb(0 0 0 / .12) 0px 1px 10px 0px;
--shadow-light: 0 1px 15px rgb(27 31 35 / .15),0 0 1px rgba(106 115 125 / .35);
--shadow-light-hov: 0 1px 13px rgb(27 31 35 / .2),0 0 5px rgba(106 115 125 / .4);
--margin-obj: 8px;
--margin-item: 16px;
--margin-group: 24px;
--margin-unit: 32px;
--margin-block: 40px;
--margin-section: 64px;
--radius-xs: 4px;
--radius-xm: 10px;
--radius-xl: 20px;
--radius-round: 100vh;
--radius-circle: 50%;
--breakpoint-xl: 1280px;
--breakpoint-xm: 960px;
--breakpoint-xs: 770px;
--typo-h1: 2rem; /*32px*/
--typo-h2: 1.875rem; /*30px*/
--typo-h3: 1.625rem; /*26px*/
--typo-h4: 1.5rem; /*24px*/
--typo-h5: 1.375rem; /*22px*/
--typo-h6: 1.25rem ; /*20px*/
--typo-art: 1.125rem; /*18px*/
--typo-bd: 1rem; /*16px*/
--typo-min: .875rem; /*14px*/
--info-main: #2196F3;
--info-light: #64b5f6;
--info-dark: #0d47a1;
--info-contrast: #0d3c61;
--info-bg: #e3f2fd;
--success-main: #4caf50;
--success-light: #81c784;
--success-dark: #1b5e20;
--success-contrast: #1e4620;
--success-bg: #e8f5e9;
--important-main: #9c27b0;
--important-light: #ba68c8;
--important-dark: #4a148c;
--important-contrast: #3e1046;
--important-bg: #f3e5f5;
--warning-main: #ff9800;
--warning-light: #ffb74d;
--warning-dark: #e65100;
--warning-contrast: #5f2b01;
--warning-bg: #fff3e0;
--error-main: #F44336;
--error-light: #e57373;
--error-dark: #b71c1c;
--error-contrast: #621b16;
--error-bg: #ffebee;
}