html {
    font-size: 62.5%;
}

:root {
    /*———————————
    色指定
    ———————————*/
    /* カラー */
    --cl-main: #15A070;
    --cl-sub: #91C451;
    --cl-brown: #6F5236;
    --cl-blue: #71C5D5;
    --cl-orange: #EF9F62;
    --cl-yellow:#F8CB62;
    --cl-base:#FEFDEE;
    --cl-glay:#CBCBCB;

    /* rgb */
    --cl-main-r: 21;
    --cl-main-g:160;
    --cl-main-b: 112;
    --cl-main-rgb:
        var(--cl-main-r) var(--cl-main-g) var(--cl-main-b);

    /*———————————
    フォントサイズ
    ———————————*/
    --fs-xxl: clamp(2.8rem, 5vw, 4rem);
    --fs-xl: clamp(2.4rem, 4vw, 3.2rem);
    --fs-lg: clamp(2rem, 3vw, 2.6rem);
    --fs-md: clamp(1.8rem, 2vw, 2.1rem);
    --fs-sm: clamp(1.7rem, 1.6vw, 1.8rem);
    --fs-xs: 1.6rem;
    --fs-main: 1.6rem;
    --fs-notice: 1.5rem;

    /*———————————
    カラム幅
    ———————————*/
    --column-main: 760px;
    --gap-main: 20px;
    --gap-sub: 15px;
    --gap-mini: 10px;
    --gutter: 20px;

    /*———————————
    その他
    ———————————*/
    --kadomaru: 8px;
}

:where(body) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-rendering: optimizeLegibility;
    font-size: var(--fs-main);

}