:root {
    /* ====================
        Color
    ==================== */

    /* ベース背景色 */
    --color-bg-base: #f5f5dc;

    /* 標準の文字色 */
    --color-text-main: #000000;

    /* ダーク背景上のテキスト */
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-hover: #d6d6d6;

    /* 進むボタン（primary） */
    --color-button-primary-bg:          #b6195b;
    --color-button-primary-text:        #ffffff;
    --color-button-primary-bg-hover:    #e91e63;
    --color-button-primary-bg-disabled: #e8bfd3;

    /* 戻るボタン（secondary） */
    --color-button-secondary-bg:            #702c91;
    --color-button-secondary-text:          #ffffff;
    --color-button-secondary-bg-hover:      #8a38b4;
    --color-button-secondary-bg-disabled:   #d4c0de;

    /* ====================
        Font
    ==================== */
    --font-family-base: 'Noto Serif JP',
                        'Yu Mincho', '游明朝',
                        'Hiragino Mincho ProN',
                        serif;

    /* =========================
        z-index

        10–19   … コンテンツ内で少しだけ手前に出す要素
                    例）固定ボタン、浮遊するカードなど
        20–29   … 共通レイアウト
                    例）固定ヘッダー／フッター、グローバルナビ
        30–39   … コンテンツ上に乗るUI
                    例）ドロップダウン、カレンダー、ツールチップ
        40–49   … 画面全体を覆う要素
                    例）オーバーレイ、モーダルウィンドウ
        50 以上 … 最前面に出すシステム系UI
                    例）全画面ローディング、緊急メッセージ
    ========================= */

    /* ====================
        Breakpoints（メモ）

        480px   … スマホ
        768px   … タブレット・小さめPC
        1024px  … 一般的なノートPC
    ==================== */
}