:root {
    /* レスポンシブなしの基本幅 */
    --w: 768px;
    --layoutRatio: 1fr 2.8fr 1fr;

    --zIndexLoading: 9999;
    --zIndexErrorDialog: 9999;
    --zIndexWaiting: 9998;
    --zIndexDialog: 9997;
    --zIndexFloatingActionButton: 9996;
    --zIndexSpHeader: 9996;
    --zIndexSpFooter: 9995;
    --zIndexHeader: 9995;
    --zIndexMeatball: 9994;

    /* ベースサイズ */
    /* laptopと同じ */
    --base_width: 1024px;
    --max_size: calc(100% - 2rem);
    --calc_min_width: min(var(--base_width), var(--max_size));
    --imageMaxSize: 600px;
    /* リサイズのサイズ */

    /* サイズ変数 */
    --fs-8xl: 4rem;
    --fs-7xl: 3.5rem;
    --fs-6xl: 3.2rem;
    --fs-5xl: 2.8rem;
    --fs-4xl: 2.4rem;
    --fs-3xl: 2rem;
    --fs-2xl: 1.8rem;
    --fs-xl: 1.6rem;
    --fs-lg: 1.2rem;
    --fs-md: 0.8rem;
    --fs-sm: 0.6rem;
    --fs-xs: 0.4rem;
    --fs-2xs: 0.2rem;

    /* スペース */
    --gap-8xl: 4rem;
    --gap-7xl: 3.5rem;
    --gap-6xl: 3.2rem;
    --gap-5xl: 2.8rem;
    --gap-4xl: 2.4rem;
    --gap-3xl: 2rem;
    --gap-2xl: 1.8rem;
    --gap-xl: 1.6rem;
    --gap-lg: 1.2rem;
    --gap-md: 0.8rem;
    --gap-sm: 0.6rem;
    --gap-xs: 0.4rem;
    --gap-2xs: 0.2rem;

    /* 透明度 */
    --op-none: 0;
    --op-weak: 0.1;
    --op-light: 0.25;
    --op-mid: 0.5;
    --op-strong: 0.75;
    --op-full: 1;

    /* ボーダー */
    --bd-sl-light: 0.5px solid var(--border);
    --bd-sl-normal: 1px solid var(--border);
    --bd-sl-bold: 2px solid var(--border);
    --bd-sl-normal-transparent: 1px solid transparent;

    /* フォント */
    --fontSize: clamp(12px, 100vw / 80, 14px);
    --fontSizeInput: 16px;
    --Robot:
        "Robot", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Arial,
        Verdana, sans-serif;
    --MarugoW6:
        "ヒラギノUD丸ゴ Std W6", "Hiragino Kaku Gothic Pro", "メイリオ",
        "Meiryo", Arial, Verdana, sans-serif;
    --ZenMaru:
        "Zen Maru Gothic", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
        Arial, Verdana, sans-serif;
    --MochiyPop:
        "Mochiy Pop One", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
        Arial, Verdana, sans-serif;
    --NotoSans:
        "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Arial,
        Verdana, sans-serif;

    /* アニメーションの時間 */
    --transitionSec: 0.2s ease;

    --radius: calc(infinity * 1px);
    --radius-card: 10px;
    --radius-btn: 8px;
    --radius-input: 5px;
    --radius-message: 5px;

    /* カラー */
    --icon-shadow: 0 0 1px rgba(145, 145, 145, 0.9);
    --shadow: 0 0 5px var(--shadow-cl);
    --guide: #ff736e;
    --active-border: 2px solid var(--active-cl);

    /* 小型ノートパソコン */
    @media screen and (max-width: 1024px) {
        --layoutRatio: 1fr 3fr;
    }

    /* 大きめのスマートフォン */
    @media screen and (max-width: 480px) {
        --layoutRatio: 1fr;
        --radius-card: 5px;
        --radius-input: 2.5px;
    }
}