/* ------------------------------------------------
COLOR
------------------------------------------------ */
:where(:root) {
        /* text color */
        --color-base: #333333;
        /* 下層ページフォント#373737 */
        /* background color */
        --color-bg: var(--color-white);
        --color-bg-light: #E6EFEF;
        /* ロケーションのボックス背景 */
        --color-bg-grey: #F5F5F5;
        /* 会社概要のグレーのライン #DDDDDD バリアブルしていせず*/

        /* border color */
        --color-border: var(--color-gray-light);
        /* 沿革のborder */
        --border-grey: 1px solid var(--color-gray-middle);
        /* brand color */
        --color-dark: #4a4a4a;
        --color-primary: #3a75bb;
        --color-primary-selected: #ebf1f8;
        --color-sky: #4ACBD0;
        --color-sky-dark: #00A3B7;
        --color-sky-light: #E6EFEF;
        --color-sky-selected: #dfeef7;
        --color-blue: #2F89C4;
        /* #004B79メディアタイトルで利用中 */
        --color-navy: #415a91;
        --color-navy-selected: #e8eaee;
        --color-navy-light: #485c7c;
        --color-yellow: #ffcc00;
        --color-danger: #bb503a;
        --color-danger-light: #fcefed;
        --color-gray-dark: #444444;
        --color-gray: #a4a4a4;
        /* 下層沿革で利用中 */
        --color-gray-middle: #CFCFCF;
        --color-gray-light: #f9f9f9;
        --color-snow: #ededed;
        --color-facebook: #0866ff;
        --color-line: #06c755;
        --color-white: #ffffff;
        --color-white-transparent: rgba(255, 255, 255, 0.3);
        --color-black: #000000;
}

/* ------------------------------------------------
GLOBAL
------------------------------------------------ */
:root {
        /* overlay */
        --overlay-gray15: rgba(51, 51, 51, 0.15);
        --overlay-gray30: rgba(51, 51, 51, 0.3);
        --overlay-navy: rgba(7, 34, 33, 0.6);

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

        --gradient-dark: linear-gradient(45deg, #0eb5bb, #006aaf);
        --gradient-dark-reverse: linear-gradient(-15deg, #0eb5bb, #006aaf);
        --gradient2: linear-gradient(135deg, #84DADE, #54A3D4);
        --gradient-light: linear-gradient(45deg, #E5FBF7, #E5F5FF);
        --gradient-gray: linear-gradient(0deg, #e6e6e6c8, #D9D9D9);
        --gradient-orange: linear-gradient(165deg, #FFE293, #FFAE00);

        /* 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: "Oswald", 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 */
        --lineHeight-0: 0;
        --lineHeight-1: 1;
        /* 利用中（自動の時） */
        --lineHeight-125: 1.25;
        --lineHeight-150: 1.5;
        /* 利用中 */
        --lineHeight-160: 1.6;
        /* 利用中 */
        --lineHeight-180: 1.80;
        --lineHeight-185: 1.85;
        --lineHeight-2: 2;
        --lineHeight-225: 2.25;

        /* 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;

        /* inner */
        --width-inner-xsmall: 626px;
        --width-inner-small: 700px;
        --width-inner-medium: 850px;
        --width-inner-large: 966px;
        --width-inner-xlarge: 1166px;

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

        /* headerの高さ */
        --height-header: clamp(60px, 7vw, 90px);
}

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

/* SP 768px未満 */
@media (width < 768px) {
        :root {
                /* container余白 */
                --padding-container: clamp(10px, 2.6vw, 20px);
                --margin: 0 2rem;

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

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

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

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

/* Clamp計算式（カスタム用）---------- */
/* 使用例: --min-size: 16; --max-size: 24; でカスタマイズ */
*,
*:before,
:after {
        --min-size: 14;
        --max-size: 16;
        --min-viewport: 375;
        --max-viewport: 1366;
        /* スロープの計算を修正 */
        --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); */
:root {
        /* ビューポート設定 */
        --clamp-viewport-min: 375;
        --clamp-viewport-max: 1366;

        /* フォントサイズ設定 */
        --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: 42;
        --space-3xl-max: 60;

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

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

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

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

        --space-8xl-min: 110;
        --space-8xl-max: 180;

        
        /* フォントサイズ変数の定義 */
        --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));
}