/* ------------------------------------------------
COLOR
------------------------------------------------ */
:where(:root) {
        /* text color */
        --color-base: #222222;
        /* site color */
        /* フッター前スタッフ募集のボタン */
        --color-brown: #725247;
        /* ほぼこのピンク */
        --color-main: #ffaac1;
        /* フッター前採用情報ボタン */
        --color-pink-dark: #ff93b5;
        /* カテゴリ名 */
        --color-green: #97cb6a;
        --color-orange: #ffac00;
        --color-black: #222222;
        --color-brown: #745449;
        /* background */
        --color-bg-beige: #f1e7d6;
        --color-bg-l-beige: #f7f2ee;
        --color-bg-pink: #fcf6f4;
        /* 下層ページbgカラー */
        --color-bg-l-pink: #f7f2ee;
        /* borderカラー */
        --color-border-beige: #e4d2c1;
        /* 事業所紹介のborder */
        --color-border-brown: #d1c0b2;
        /* おおの家 */
        /* コンタクトフォームテキストの線 */
        --color-border-brown: #e2d0bf;
        /* コンタクトフォームのラジオボタン,インプット */
        --color-radio: #e5d3c2;

        /* header button */
        /* h1下の英語 */
        /* 下層のスタッフ紹介ボタン */
        --color-button: #ffaac1;
        /* 求人のカテゴリと３つの項目 */
        --color-recruit-brown: #6a483b;
        --color-recruit-pink: #ffaac1;
        /* footer button */
        /* カテゴリ名 */
        --color-category-brown: #745449;
        --color-category-brown: #f2b037;
        --color-category-pink: #ffaac1;
        /* リスト */
        --color-list-pink: #ffaac1;
        --color-list-brown: #745449;
        --color-list-orange: #ffac00;
        --color-list-black: #222222;
        /* ご利用の流れ */
        --color-flow-orange: #ffac00;
}

/* ------------------------------------------------
GLOBAL
------------------------------------------------ */
:root {
        /* overlay */
        --overlay: rgba(51, 51, 51, 0.15);

        /* gradient */
        /* --gradient: linear-gradient(45deg, var(--color-sky), var(--color-blue)); */

        /* shadow */
        /* --shadow: 5px 5px 3px rgba(51, 51, 51, 0.1); */

        /* z-index */
        --zindex-back: -10;
        --zindex-none: 0;
        --zindex-middle: 10;
        --zindex-front: 100;
        --zindex-scroll: 200;
        --zindex-nav: 300;
        --zindex-modal: 1000;
        --zindex-max: 10000;

        /* family */
        --fontFamily-base: "Noto Sans JP", "游ゴシック", "Yu Gothic", "Meiryo", sans-serif;
        /* --fontFamily-serif: "Shippori Mincho B1", serif; */
        --fontFamily-en: "Roboto", sans-serif;
        --fontFamily-number: "Lato", sans-serif;

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

        /* line-height */
        /* 例：フォントサイズ60px、行間106px の場合 */
        /* 106 ÷ 60 = 1.766... */
        --fontSize-value: 60;
        --lineHeight-value: 106;
        --lineHeight: calc(var(--lineHeight-value) / var(--fontSize-value));

        /* letter-spacing */
        --letterSpacing-0: 0;
        --letterSpacing-2: 0.02em;
        --letterSpacing-4: 0.04em;
        --letterSpacing-6: 0.06em;
        --letterSpacing-8: 0.08em;
        --letterSpacing-10: 0.1em;
        --letterSpacing-12: 0.12em;
        --letterSpacing-14: 0.14em;
        --letterSpacing-16: 0.16em;
        --letterSpacing-20: 0.2em;

        /* boreder-radius */

        --border-radius-xs: 15px;
        --border-radius-sm: 20px;
        --border-radius-md: 25px;
        --border-radius-lg: 30px;


        --width-inner-xs: clamp(320px, 50vw, 360px);
        --width-inner-s: clamp(360px, 55vw, 480px);
        --width-inner-ms: clamp(600px, 66vw, 860px);
        --width-inner-m: clamp(680px, 68vw, 960px);
        --width-inner-l: clamp(710px, 71vw, 1020px);
        --width-inner-xl: clamp(710px, 75vw, 1080px);
        --width-inner-2xl: clamp(710px, 77.5vw, 1024px);
        --width-inner-3xl: clamp(720px, 80vw, 1152px);
        --width-inner-4xl: clamp(800px, 82.7vw, 1200px);


        /* container余白 */
        --padding-container: 5%;

        /* headerの高さ */
        --height-header: clamp(60px, 10vw, 70px);

        /* ハーフレングスを打ち消す関数 */
        /* 現在のフォントサイズ（1em）から行の高さ（1lh）を引き、その差を2で割ることでハーフ・レディングを取り除いた値を算出する計算式
        使用例：p {font-size: 1rem;line-height: 1.5;margin-block: calc((1em - 1lh) / 2);} */
        --leading-trim: calc((1em - 1lh) / 2);
}


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

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

/* TABLET（768px以上、1024px未満） */
@media (768px <=width < 1024px) {
        :root {
                /* タブレット用の調整があればここに */
        }
}

/* SP 768px未満 */
@media (width < 768px) {
        :root {
                /* container余白 */
                --padding-container: clamp(10px, 7.39vw, 60px);

                --margin: 0 2rem;

                /* headerの高さ */
                --height-header: 70px;
        }

}

@media (width < 480px) {
        :root {
                /* container余白 */
                --padding-container: 5vw;

                /* border-radius 0.8倍 */
                --border-radius-xs: 12px;
                --border-radius-sm: 16px;
                --border-radius-md: 20px;
                --border-radius-lg: 24px;

                /* headerの高さ */
                --height-header: 54px;
        }
}

/* ------------------------------------------------
関数
------------------------------------------------ */

/* Clamp計算式（カスタム用）---------- */
/* 使用例: --min-size: 16; --max-size: 24; でカスタマイズ */
*,
*:before,
:after {
        --min-size: 15;
        --max-size: 17;
        --min-viewport: 375;
        --max-viewport: 1400;
        /* スロープの計算を修正 */
        --slope: calc((var(--max-size) - var(--min-size)) * 1.0 / (var(--max-viewport) - var(--min-viewport)));
        /* インターセプトの計算を修正 */
        --fluid-size: calc((var(--slope) * (100vw - var(--min-viewport) * 1px)) + (var(--min-size) * 1px));
        --clamp-size: clamp(var(--min-size) * 1px,
                        var(--fluid-size),
                        var(--max-size) * 1px);
}


/* 固定フォントサイズ（定数用）------ */
/* 使用例: font-size: var(--fontSize-lg); */


/* 固定フォントサイズ（定数用）------ */
/* 使用例: font-size: var(--fontSize-lg); */
:root {
        /* ビューポート設定  */
        --clamp-viewport-min: 375;
        --clamp-viewport-max: 1400;

        /* フォントサイズ設定 */
        --fontSize-xs-min: 11;
        --fontSize-xs-max: 12;

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

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


        --fontSize-md-min: 17;
        --fontSize-md-max: 18.4;

        --fontSize-lg-min: 19;
        --fontSize-lg-max: 23;

        --fontSize-xl-min: 21;
        --fontSize-xl-max: 30;

        --fontSize-2xl-min: 22;
        --fontSize-2xl-max: 31;

        --fontSize-3xl-min: 26;
        --fontSize-3xl-max: 40;


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

        --space-xs-min: 4;
        --space-xs-max: 10;

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

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

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

        --space-xl-min: 24;
        --space-xl-max: 47;

        --space-2xl-min: 30;
        --space-2xl-max: 55;

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

        --space-4xl-min: 40;
        --space-4xl-max: 74;

        --space-5xl-min: 46;
        --space-5xl-max: 83;

        --space-6xl-min: 50;
        --space-6xl-max: 92;

        --space-7xl-min: 56;
        --space-7xl-max: 104;

        --space-8xl-min: 70;
        --space-8xl-max: 127;

        --space-9xl-min: 76;
        --space-9xl-max: 138;

        --space-10xl-min: 100;
        --space-10xl-max: 185;

        /* フォントサイズ変数の定義 */
        --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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        calc(var(--space-sm-max) * 1px));

        --space-base: clamp(calc(var(--space-base-min) * 1px),
                        calc(var(--space-base-min) * 1px + (var(--space-base-max) - var(--space-base-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        calc(var(--space-base-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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        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(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
                        calc(var(--space-8xl-max) * 1px));

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

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