/* ------------------------------------------------
COLOR
------------------------------------------------ */
:where(:root) {
        /* base color */
        --color-base: #333333;
        /* other text color */
        --color-gray: #726E6E;
        /* main color */
        --color-main: #FF8001;
        /* sub color */
        --color-sub: #F7A80C;
        /* bg color */
        --color-bg: #fff;
        --color-bg-sub: #FAF6F1;
        /* field color */
        --color-field: #A8A8A8;
        /* off white */
        --color-offwhite: #FFF8F8;
}

/* ------------------------------------------------
GLOBAL
------------------------------------------------ */
:root {

        /* gradient */
        /* 上から下 */
        --gradient: linear-gradient(180deg, #f7a80c 0%, #ff8001 61%);
        /* 左から右 */
        --gradient-reverse: linear-gradient(90deg, #f7a80c 0%, #ff8001 61%);
        /* 薄黄色〜濃黄色 */
        --gradient-light: linear-gradient(90deg, #FEEEA0 5%, #FF8001 61%);
        /* family */
        --fontFamily-base: "Zen Kaku Gothic New", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
        --fontFamily-en: "Roboto", sans-serif;

        /* weight */
        --wght-thin: 100;
        --wght-ex-light: 200;
        --wght-light: 300;
        --wght-regular: 400;
        --wght-medium: 500;
        --wght-semi-bold: 600;
        --wght-bold: 700;
        --wght-ex-bold: 800;
        --wght-black: 900;

        /* containerの最大幅 */
        --container-max: 1600px;

        /* inner幅の最大値（1600px基準） */
        --inner-xl-max: 1600px;
        /* 100% */
        --inner-l-max: 1458px;
        /* 1440pxの1312px → 91.11% */
        --inner-md-max: 1402px;
        /* 1440pxの1262px → 87.64% */
        --inner-sm-max: 1353px;
        /* 1440pxの1218px → 84.58% */

        /* clampで可変設定 */
        --inner-xl: clamp(375px, 100vw, var(--inner-xl-max));
        --inner-l: clamp(342px, 91.11vw, var(--inner-l-max));
        --inner-md: clamp(329px, 87.64vw, var(--inner-md-max));
        --inner-sm: clamp(317px, 84.58vw, var(--inner-sm-max));

        /* headerの高さ */
        --height-header: clamp(65px, 8vw, 80px);
        /* 1000pxで可変 */
}

@media (width < 800px) {
        :root {
                --inner-xl: 100%;
                --inner-l: 100%;
                --inner-md: 100%;
                --inner-sm: 100%;
        }
}

/* ------------------------------------------------
BREAKPOINT
------------------------------------------------ */

/* SP （800px未満） */
@media (width < 800px) {
        :root {
                /* container余白 */
                --padding-container: 20px;
                --margin: 0 2rem;
                /* headerの高さ */
                --height-header: 64px;
        }
}

/* TABLET（800px以上、1000px未満） */
@media (800px <=width < 1000px) {
        :root {
                /* タブレット用の調整があればここに */
                /* container余白 */
                --padding-container: 20px;
                /* headerの高さ */
                --height-header: 64px;
        }
}

/* PC（1000px以上） */
@media (width >=1000px) {
        :root {
                /* デスクトップ用の調整があればここに */
                --padding-container: 64px;
        }
}

/* ------------------------------------------------
関数
------------------------------------------------ */
:root {
        /* ビューポート設定 */
        --min-vw: 375;
        --max-vw: 1440;
}

/* @media (max-width: 800px) {
        :root {
                --min-vw: 320;
                --max-vw: 500;
        }
} */

*,
*::before,
*::after {
        /* フォントサイズ用（可変・カスタム） */
        --font-min: 14;
        --font-max: 18;
        --font-slope: calc((var(--font-max) - var(--font-min)) / (var(--max-vw) - var(--min-vw)));
        --font-fluid: calc((var(--font-slope) * (100vw - var(--min-vw) * 1px)) + (var(--font-min) * 1px));
        --font-size: clamp(var(--font-min) * 1px, var(--font-fluid), var(--font-max) * 1px);

        /* スペース用（可変・カスタム） */
        --space-min: 20;
        --space-max: 64;
        --space-slope: calc((var(--space-max) - var(--space-min)) / (var(--max-vw) - var(--min-vw)));
        --space-fluid: calc((var(--space-slope) * (100vw - var(--min-vw) * 1px)) + (var(--space-min) * 1px));
        --space: clamp(var(--space-min) * 1px, var(--space-fluid), var(--space-max) * 1px);
}

/* 固定フォントサイズ（定数用）------ */
/* 使用例: font-size: var(--fontSize-lg); */
:root {
        /* フォントサイズ設定 */
        --fontSize-xs-min: 11;
        --fontSize-xs-max: 12;

        --fontSize-sm-min: 13;
        --fontSize-sm-max: 14;

        --fontSize-base-min: 15;
        --fontSize-base-max: 16;

        --fontSize-md-min: 16;
        --fontSize-md-max: 18;

        --fontSize-lg-min: 17;
        --fontSize-lg-max: 20;

        --fontSize-xl-min: 20;
        --fontSize-xl-max: 24;

        --fontSize-2xl-min: 20;
        --fontSize-2xl-max: 28;

        --fontSize-3xl-min: 24;
        --fontSize-3xl-max: 34;

        /* スペース設定 */
        --space-xxs-min: 4;
        --space-xxs-max: 4;

        --space-xs-min: 6;
        --space-xs-max: 8;

        --space-sm-min: 10;
        --space-sm-max: 12;

        --space-md-min: 12;
        --space-md-max: 16;

        --space-lg-min: 16;
        --space-lg-max: 20;

        --space-xl-min: 20;
        --space-xl-max: 28;

        --space-2xl-min: 32;
        --space-2xl-max: 40;

        --space-3xl-min: 30;
        --space-3xl-max: 64;

        --space-4xl-min: 60;
        --space-4xl-max: 80;

        --space-5xl-min: 70;
        --space-5xl-max: 90;

        --space-6xl-min: 80;
        --space-6xl-max: 120;

        --space-7xl-min: 100;
        --space-7xl-max: 160;

        /* 確定 */
        --space-8xl-min: 26;
        --space-8xl-max: 100;

        /* フォントサイズ変数の定義 */
        --fontSize-xs: clamp(calc(var(--fontSize-xs-min) * 1px),
                        calc(var(--fontSize-xs-min) * 1px + (var(--fontSize-xs-max) - var(--fontSize-xs-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--fontSize-xs-max) * 1px));

        --fontSize-sm: clamp(calc(var(--fontSize-sm-min) * 1px),
                        calc(var(--fontSize-sm-min) * 1px + (var(--fontSize-sm-max) - var(--fontSize-sm-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--fontSize-sm-max) * 1px));

        --fontSize-base: clamp(calc(var(--fontSize-base-min) * 1px),
                        calc(var(--fontSize-base-min) * 1px + (var(--fontSize-base-max) - var(--fontSize-base-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--fontSize-base-max) * 1px));

        --fontSize-md: clamp(calc(var(--fontSize-md-min) * 1px),
                        calc(var(--fontSize-md-min) * 1px + (var(--fontSize-md-max) - var(--fontSize-md-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--fontSize-md-max) * 1px));

        --fontSize-lg: clamp(calc(var(--fontSize-lg-min) * 1px),
                        calc(var(--fontSize-lg-min) * 1px + (var(--fontSize-lg-max) - var(--fontSize-lg-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--fontSize-lg-max) * 1px));

        --fontSize-xl: clamp(calc(var(--fontSize-xl-min) * 1px),
                        calc(var(--fontSize-xl-min) * 1px + (var(--fontSize-xl-max) - var(--fontSize-xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--fontSize-xl-max) * 1px));

        --fontSize-2xl: clamp(calc(var(--fontSize-2xl-min) * 1px),
                        calc(var(--fontSize-2xl-min) * 1px + (var(--fontSize-2xl-max) - var(--fontSize-2xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--fontSize-2xl-max) * 1px));

        --fontSize-3xl: clamp(calc(var(--fontSize-3xl-min) * 1px),
                        calc(var(--fontSize-3xl-min) * 1px + (var(--fontSize-3xl-max) - var(--fontSize-3xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--fontSize-3xl-max) * 1px));

        /* スペース変数の定義 */
        --space-xxs: clamp(calc(var(--space-xxs-min) * 1px),
                        calc(var(--space-xxs-min) * 1px + (var(--space-xxs-max) - var(--space-xxs-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-xxs-max) * 1px));

        --space-xs: clamp(calc(var(--space-xs-min) * 1px),
                        calc(var(--space-xs-min) * 1px + (var(--space-xs-max) - var(--space-xs-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-xs-max) * 1px));

        --space-sm: clamp(calc(var(--space-sm-min) * 1px),
                        calc(var(--space-sm-min) * 1px + (var(--space-sm-max) - var(--space-sm-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-sm-max) * 1px));

        --space-md: clamp(calc(var(--space-md-min) * 1px),
                        calc(var(--space-md-min) * 1px + (var(--space-md-max) - var(--space-md-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-md-max) * 1px));

        --space-lg: clamp(calc(var(--space-lg-min) * 1px),
                        calc(var(--space-lg-min) * 1px + (var(--space-lg-max) - var(--space-lg-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-lg-max) * 1px));

        --space-xl: clamp(calc(var(--space-xl-min) * 1px),
                        calc(var(--space-xl-min) * 1px + (var(--space-xl-max) - var(--space-xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-xl-max) * 1px));

        --space-2xl: clamp(calc(var(--space-2xl-min) * 1px),
                        calc(var(--space-2xl-min) * 1px + (var(--space-2xl-max) - var(--space-2xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-2xl-max) * 1px));

        --space-3xl: clamp(calc(var(--space-3xl-min) * 1px),
                        calc(var(--space-3xl-min) * 1px + (var(--space-3xl-max) - var(--space-3xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-3xl-max) * 1px));

        --space-4xl: clamp(calc(var(--space-4xl-min) * 1px),
                        calc(var(--space-4xl-min) * 1px + (var(--space-4xl-max) - var(--space-4xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-4xl-max) * 1px));

        --space-5xl: clamp(calc(var(--space-5xl-min) * 1px),
                        calc(var(--space-5xl-min) * 1px + (var(--space-5xl-max) - var(--space-5xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-5xl-max) * 1px));

        --space-6xl: clamp(calc(var(--space-6xl-min) * 1px),
                        calc(var(--space-6xl-min) * 1px + (var(--space-6xl-max) - var(--space-6xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-6xl-max) * 1px));

        --space-7xl: clamp(calc(var(--space-7xl-min) * 1px),
                        calc(var(--space-7xl-min) * 1px + (var(--space-7xl-max) - var(--space-7xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-7xl-max) * 1px));

        --space-8xl: clamp(calc(var(--space-8xl-min) * 1px),
                        calc(var(--space-8xl-min) * 1px + (var(--space-8xl-max) - var(--space-8xl-min)) * ((100vw - var(--min-vw) * 1px) / (var(--max-vw) - var(--min-vw)))),
                        calc(var(--space-8xl-max) * 1px));
}