/* ======================================= */
/* 全体で使うテーマのカスタムプロパティ */
/* ======================================= */

:root {

/* カラー */
    --color-main: #B38C09;
    --color-light-main: #FFFEEE;
    --color-dark-main: #634c00;
    /* --color-secondary: ; */
    --color-light-secondary: #FFF9EB;
    --color-normal-black: #2F2F2F;
    --color-red: #ED0000;
    --color-yellow: #F5E956;
    /* --color-cta: #FD7A03; */
    /* --color-cta-shadow: #A86B34; */

/* テキストサイズ(フォールバック) */
    /* prev:8px */
    --font-size-xs: 10px;
    --font-size-sm: 13px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-size-4xl: 48px;
    /* next:56px */


/* テキストサイズを"最小0-最大1180"と"1個下のサイズ-1個上のサイズ"の対応で段階的に変更 */
--font-size-xs: clamp(0.5rem, 0.5rem + 0.42vw, 0.813rem);
--font-size-sm: clamp(0.625rem, 0.625rem + 0.51vw, 1rem);
--font-size-md: clamp(0.813rem, 0.813rem + 0.59vw, 1.25rem);
--font-size-lg: clamp(1rem, 1rem + 0.68vw, 1.5rem);
--font-size-xl: clamp(1.25rem, 1.25rem + 1.02vw, 2rem);
--font-size-2xl: clamp(1.5rem, 1.5rem + 1.36vw, 2.5rem);
--font-size-3xl: clamp(2rem, 2rem + 1.36vw, 3rem);



/* -----スペーシングサイズ----- */

    /* -----フォールバック----- */
    /* prev:2px */
    --spacing-3xs: 4px;
    --spacing-2xs: 8px;
    --spacing-xs: 10px;
    --spacing-sm: 13px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 40px;
    --spacing-4xl: 48px;
    /* next:56px */

    
    
    /* -----スペーシングサイズを"最小0-最大1180"と"1個下のサイズ-1個上のサイズ"の対応で段階的に変更----- */
    --spacing-2xs: clamp(0.25rem, 0.25rem + 0.51vw, 0.625rem);
    --spacing-xs: clamp(0.5rem, 0.5rem + 0.42vw, 0.813rem);
    --spacing-sm: clamp(0.625rem, 0.625rem + 0.51vw, 1rem);
    --spacing-md: clamp(0.813rem, 0.813rem + 0.59vw, 1.25rem);
    --spacing-lg: clamp(1rem, 1rem + 0.68vw, 1.5rem);
    --spacing-xl: clamp(1.25rem, 1.25rem + 1.02vw, 2rem);
    --spacing-2xl: clamp(1.5rem, 1.5rem + 1.36vw, 2.5rem);
    --spacing-3xl: clamp(2rem, 2rem + 1.36vw, 3rem);
    --spacing-4xl: clamp(2.5rem, 2.5rem + 1.36vw, 3.5rem);



/* ボーダーサイズ */
--border-sm: 1px;
--border-md: 2px;
--border-lg: 3px;
--border-xl: 4px;
--border-2xl: 6px;

  }