/*
変数の定義（カラー、サイズなど）
*/

:root{
    /*color*/
    --color-primary: #131313;
    --color-on-primary: #fff;
    --color-secondary: #f1ece5;
    --color-on-secondary: #000;
    --color-tertiary: #ccc;
    --color-on-tertiary: #000;
    --color-background: #f8f6f4;
    --color-on-background: #131313;
    --color-surface: #fff;
    --color-on-surface: #131313;
    --color-error: #ff0000;
    --color-on-error: #fff;

    --color-quote: #f5f5f5;
    --color-on-quote: #000;
    --color-quote-decoration: #ccc;

    --color-link:#1a0dab;
    --color-border: #ccc;

    /*font*/
    --font-size-xxs: 0.5rem;
    --font-size-xs: 0.70rem;
    --font-size-s: 0.75rem;
    --font-size-m: 1rem;
    --font-size-l: 1.4rem;
    --font-size-xl: 1.8rem;
    --font-size-2xl: 2.4rem;
    --font-size-3xl: 3.6rem;
    --font-size-4xl: 4.8rem;
    --font-size-5xl: 6rem;

    --font-family-primary: 'Shippori Mincho', serif;

    /*spacing*/
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 3rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    /*radius*/
    --border-radius: 10px;

    /*letter-spacing*/
    --letter-spacing-s: 0.05em;
    --letter-spacing-m: 0.1em;
    --letter-spacing-l: 0.15em;
    --letter-spacing-xl: 0.2em;

    /*line-height*/
    --line-height-s: 1.4;
    --line-height-m: 1.7;
    --line-height-l: 2.2;
    --line-height-xl: 2.8;
    --line-height-2xl: 3.2;
    --line-height-3xl: 3.6;

    /*font-weight*/
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /*width*/
    --max-width_pc: 1200px;
    --max-width_pc_content: 700px;
    --max-width:1400px;

    --button-width: 250px;

    /*radius*/

    --border-radius: 20px;
}