@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* ========== Common Tokens ========== */
    /* label */
    --color-label-primary: #222222;
    --color-label-secondary: #5a5a5a;
    --color-label-tertiary: #8d8e91;
    --color-label-dark-primary: #ffffff;
    --color-label-dark-secondary: #eaeff9;
    --color-label-dark-tertiary: #d1d5df;
    /* border */
    --color-border-primary: #d1d5df;
    --color-border-secondary: #f0f2f6;
    --color-border-tertiary: #f0f2f6;
    --color-border-dark-primary: #ffffff;
    --color-border-dark-secondary: #ededed;
    --color-border-dark-tertiary: #555555;
    /* bg */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f7f8f7;
    --color-bg-dark-primary: #383838;
    --color-bg-dark-secondary: #6a6c6c;
    /* primary */
    --color-primary-on-primary: #ffffff;
    --color-primary-primary: linear-gradient(to right, #c11c13 0%, #aa2d26 100%);
    --color-primary-on-inverse-primary: #c11c13;
    --color-primary-inverse-primary: #ffffff;
    /* secondary */
    --color-secondary-on-secondary: #ffffff;
    --color-secondary-secondary: #333333;
    --color-secondary-on-inverse-secondary: #333333;
    --color-secondary-inverse-secondary: #ffffff;

    /* ========== Product : EP ========== */
    /* primary */
    --ep-color-on-primary: #ffffff;
    --ep-color-primary: #e60012;
    --ep-color-on-inverse-primary: #e60012;
    --ep-color-inverse-primary: #ffffff;
    --ep-color-primary-lower: #ff8894;
    --ep-color-primary-low: #f74d5e;
    --ep-color-primary-high: #c50010;
    --ep-color-primary-higher: #8f000c;
    /* secondary */
    --ep-color-on-secondary: #048281;
    --ep-color-secondary: #048281;
    --ep-color-on-inverse-secondary: #048281;
    --ep-color-inverse-secondary: #ffffff;
    --ep-color-secondary-low: #06a29b;
    --ep-color-secondary-high: #034f4b;
    /* bgColor */
    --ep-color-bg-accent: #fff2f3;
    --ep-color-bg-gradient-low: linear-gradient(to right, #ffaab1 0%, #ffedee 100%);
    --ep-color-bg-gradient: linear-gradient(to right, #c50010 0%, #f74d5e 100%);

    /* ========== Product : CP ========== */
    /* primary */
    /* secondary */
    /* bgColor */

    /* ========== Product : PS ========== */
    /* primary */
    /* secondary */
    /* bgColor */

    /* ========== Product : SA ========== */
    /* primary */
    /* secondary */
    /* bgColor */

    /* font-size & font-weight & font-family */
    --fz-xs: 12px;
    --fz-sm: 14px;
    --fz-md: 16px;
    --fz-lg: 18px;
    --fz-xl: 20px;
    --fz-2xl: 24px;
    --fz-3xl: 32px;
    --fz-4xl: 40px;
    --fz-5xl: 48px;
    --fz-6xl: 56px;
    --fz-7xl: 72px;

    --fw-normal: 400;
    --fw-bold: 700;

    --ff-jp: 'Noto Sans JP', sans-serif;
    --ff-en: 'Montserrat', sans-serif;

    /* 見出し */
    --display-7xl: var(--fw-normal) var(--fz-7xl)/1.2 var(--ff-jp);
    --display-7xl-bold: var(--fw-bold) var(--fz-7xl)/1.2 var(--ff-jp);
    --display-6xl: var(--fw-normal) var(--fz-6xl)/1.2 var(--ff-jp);
    --display-6xl-bold: var(--fw-bold) var(--fz-6xl)/1.2 var(--ff-jp);
    --display-5xl: var(--fw-normal) var(--fz-5xl)/1.25 var(--ff-jp);
    --display-5xl-bold: var(--fw-bold) var(--fz-5xl)/1.25 var(--ff-jp);
    --display-4xl: var(--fw-normal) var(--fz-4xl)/1.25 var(--ff-jp);
    --display-4xl-bold: var(--fw-bold) var(--fz-4xl)/1.25 var(--ff-jp);
    --display-3xl: var(--fw-normal) var(--fz-3xl)/1.3 var(--ff-jp);
    --display-3xl-bold: var(--fw-bold) var(--fz-3xl)/1.3 var(--ff-jp);
    --display-2xl: var(--fw-normal) var(--fz-2xl)/1.3 var(--ff-jp);
    --display-2xl-bold: var(--fw-bold) var(--fz-2xl)/1.3 var(--ff-jp);
    --display-xl: var(--fw-normal) var(--fz-xl)/1.3 var(--ff-jp);
    --display-xl-bold: var(--fw-bold) var(--fz-xl)/1.3 var(--ff-jp);
    --display-lg: var(--fw-normal) var(--fz-lg)/1.3 var(--ff-jp);
    --display-lg-bold: var(--fw-bold) var(--fz-lg)/1.3 var(--ff-jp);
    --display-md: var(--fw-normal) var(--fz-md)/1.3 var(--ff-jp);
    --display-md-bold: var(--fw-bold) var(--fz-md)/1.3 var(--ff-jp);
    /* 本文 */
    --body-2xl: var(--fw-normal) var(--fz-2xl)/1.5 var(--ff-jp);
    --body-2xl-bold: var(--fw-bold) var(--fz-2xl)/1.5 var(--ff-jp);
    --body-xl: var(--fw-normal) var(--fz-xl)/1.5 var(--ff-jp);
    --body-xl-bold: var(--fw-bold) var(--fz-xl)/1.5 var(--ff-jp);
    --body-lg: var(--fw-normal) var(--fz-lg)/1.5 var(--ff-jp);
    --body-lg-bold: var(--fw-bold) var(--fz-lg)/1.5 var(--ff-jp);
    --body-base: var(--fw-normal) var(--fz-md)/1.6 var(--ff-jp);
    --body-base-bold: var(--fw-bold) var(--fz-md)/1.6 var(--ff-jp);
    --body-sm: var(--fw-normal) var(--fz-sm)/1.6 var(--ff-jp);
    --body-sm-bold: var(--fw-bold) var(--fz-sm)/1.6 var(--ff-jp);
    --body-xs: var(--fw-normal) var(--fz-xs)/1.6 var(--ff-jp);
    --body-xs-bold: var(--fw-bold) var(--fz-xs)/1.6 var(--ff-jp);
    /* キャプション */
    --caption-md: var(--fw-normal) var(--fz-sm)/1.5 var(--ff-jp);
    --caption-md-bold: var(--fw-bold) var(--fz-sm)/1.5 var(--ff-jp);
    --caption-sm: var(--fw-normal) var(--fz-xs)/1.5 var(--ff-jp);
    --caption-sm-bold: var(--fw-bold) var(--fz-xs)/1.5 var(--ff-jp);
    /* 角丸 */
    --round-full: 9999px;
    --round-xlarge: 28px;
    --round-large: 16px;
    --round-medium: 12px;
    --round-small: 8px;
    --round-xsmall: 4px;
    --round-xxsmall: 2px;
    --round-none: 0;
    /* ドロップシャドウ */
    --shadow-lv6: 0 8px 8px -4px rgba(8, 28, 84, 0.06), 0 20px 24px -4px rgba(8, 28, 84, 0.08);
    --shadow-lv5: 0 4px 6px -4px rgba(8, 28, 84, 0.06), 0 12px 16px -4px rgba(8, 28, 84, 0.08);
    --shadow-lv4: 0 2px 4px -2px rgba(8, 28, 84, 0.06), 0 4px 8px -2px rgba(8, 28, 84, 0.08);
    --shadow-lv3: 0 1px 3px 0 rgba(8, 28, 84, 0.06), 0 1px 2px 0 rgba(8, 28, 84, 0.08);
    --shadow-lv2: 0 1px 2px 0 rgba(8, 28, 84, 0.06);
    --shadow-lv1: 0 4px 16px 0 rgba(222, 230, 252, .2);
}