:root {
    /* font-size (rem) = font-size of element (px) / font-size of body (px) */
    --fsize-9: 0.64rem; /* 9px */
    --fsize-10: 0.71rem; /* 10px */
    --fsize-11: 0.7857rem; /* 11px */
    --fsize-12: 0.8571rem; /* 12px */
    --fsize-13: 0.9286rem; /* 13px */
    --fsize-14: 1rem; /* 14px */
    --fsize-15: 1.0714rem; /* 15px */
    --fsize-16: 1.1429rem; /* 16px */
    --fsize-17: 1.21rem; /* 17px */
    --fsize-18: 1.29rem; /* 18px */
    --fsize-19: 1.36rem; /* 19px */
    --fsize-20: 1.4286rem; /* 20px */
    --fsize-22: 1.5714rem; /* 22px */
    --fsize-24: 1.71rem; /* 24px */

    --line-height-9: 0.64rem; /* 9px */
    --line-height-10: 0.71rem; /* 10px */
    --line-height-11: 0.7857rem; /* 11px */
    --line-height-12: 0.8571rem; /* 12px */
    --line-height-13: 0.9286rem; /* 13px */
    --line-height-14: 1rem; /* 14px */
    --line-height-15: 1.0714rem; /* 15px */
    --line-height-16: 1.1429rem; /* 16px */
    --line-height-17: 1.21rem; /* 17px */
    --line-height-18: 1.29rem; /* 18px */
    --line-height-20: 1.4286rem; /* 20px */
    --line-height-22: 1.5714rem; /* 22px */
    --line-height-24: 1.71rem; /* 24px */

    --fsize-small-under: 0.64rem; /* 9px */
    --fsize-small: 0.7857rem; /* 11px */
    --fsize-small-upper: 0.8571rem; /* 12px */

    --fsize-normal-under: 0.9286rem; /* 13px */
    --fsize-normal: 1rem; /* 14px */
    --fsize-normal-upper: 1.0714rem; /* 15px */

    --fsize-medium-under: 1.1429rem; /* 16px */
    --fsize-medium: 1.21rem; /* 17px */
    --fsize-medium-upper: 1.29rem; /* 18px */

    --fsize-large-under: 1.4286rem; /* 20px */
    --fsize-large: 1.5714rem; /* 22px */
    --fsize-large-abow: 1.71rem; /* 24px */

    /*9px	0.64rem*/
    /*10px	0.71rem*/
    /*11px	0.7857rem*/
    /*12px	0.8571rem*/
    /*13px	0.9286rem*/
    /*14px	1.0000rem*/
    /*15px	1.0714rem*/
    /*16px	1.1429rem*/
    /*17px	1.21rem*/
    /*18px	1.29rem*/
    /*19px	1.36rem*/
    /*20px	1.4286rem*/
    /*22px	1.5714rem*/
    /*23px  1.64rem*/
    /*24px  1.71rem*/
    --font-family: Hiragino Kaku Gothic Pro;
    --font-family-n: Hiragino Kaku Gothic ProN;

    --group-color-family: #9e81b5;
    --group-color-relatives: #9e9e9e;
    --group-color-primary-school: #6393cb;
    --group-color-friend: #deb478;
    --group-color-swimming: #df8270;


    --bg-color: #FAF8EA;
    --bg-item-color: #ffffff;
    --text-color: #444444;
    --text-color-label: #9E9E9E;
    --text-color-white: #ffffff;
    --border-color-white: #ffffff;
    --border-color-green: #82B697;
    --border-color-grey: #BDBDBD;
    --text-color-red: #DF8270;
    --text-color-green: #82b697;
    --text-color-active: #82b697;
    --text-color-violet: #9E81B5;
    --border-color-violet: #9E81B5;
    --border-color: #DEB478;
    --input-invalid-bg-color: #FCF3F1;
    --input-invalid-border-color: #DF8270;
    --bg-head-md-color: #fafafa;
    --confirm-color: #DF8270;
    --cancel-border-color: #82B697;

    --input-border-color: #BDBDBD;
    --input-background-color: #ffffff;
    --input-border-radius: 12px;

    --nav-bg-color: #82b697;
    --nav-text-color: #ffffff;
    --nav-fontweight: 400;

    --tabs-border-color:#ffffff;
    --tabs-text-color:#ffffff;
    --tabs-bg-color:#82B697;
    --tabs-bg-item-color:#DEB478;
    --tabs-border-color-active:#82B697;
    --tabs-text-color-active: #82B697;
    --tabs-bg-color-active: #FAF8EA;

    --bag-req-bg-color: #DF8270;
    --bag-req-text-color: #ffffff;
    --bag-req-fontweight: 400;

    --sidebar-bg-color: #ffffff;
    --sidebar-text-color: #9E9E9E;
    --sidebar-text-color-active: #82b697;
    --sidebar-fontweight: 400;
    --sidebar-fontweight-active: 500;
    --sidebar-border-color: #bdbdbd;
    --sidebar-border-active-color: #82b697;

    --btn-color-orange: #DEB478;
    --btn-color-gray: #9E9E9E;
    --btn-color-blue:#6393CB;
    --btn-color-green:#82B697;
    --btn-color-white:#ffffff;
    --btn-color-red: #DF8270;
    --btn-color-violet: #9E81B5;
    --btn-text-color: #ffffff;

    --gift-color-blue: #6393CB;
    --gift-color-red: #DF8270;
    --gift-color-gray: #9E9E9E;

    --badge-bg-color: #DF8270;
    --badge-text-color: #ffffff;

    --btn-color: #BDBDBD;
    --btn-bg-color: #ffffff;
    --btn-active-color: #ffffff;
    --btn-active-bg-color: #82b697;
    --btn-close-bg-white: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M.293.293a1%201%200%200%201%201.414%200L8%206.586%2014.293.293a1%201%200%201%201%201.414%201.414L9.414%208l6.293%206.293a1%201%200%200%201-1.414%201.414L8%209.414l-6.293%206.293a1%201%200%200%201-1.414-1.414L6.586%208%20.293%201.707a1%201%200%200%201%200-1.414z%22%2F%3E%3C%2Fsvg%3E);
    /*--btn-close-bg-white: url(/assets/design/svg/icon-close-white.svg);*/
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    font-size: 14px;
}