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

:root {

/* カラー */
    --color-main: #007dff;
    --color-main--hover: #3e9bff;
    --color-light-main: #f0f7ff;
    --color-secondary: #EF4E47;
    /* --color-light-secondary: #ffffff; */
    --color-normal-black: #333333;
    --color-cta: #FF7700;
    --color-cta-shadow: #d36200;

/* テキストサイズ(フォールバック) */
    /* 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;

}