/* =========================================================
 * CREATPS token.css
 * [目次]
 * 1. カラー定義
 * 2. フォント定義
 * 3. レイアウト定義
 * 4. 幅・高さ・コンテナ設定（レスポンシブ設計）
 * ========================================================= */



/* =========================================
 * 1. カラー定義
 * 基本色・セマンティックカラーの定義
 * =======================================*/

:root {
    --color-raven: #232220;
    --color-forest: #577170;
    --color-clay: #929E9E;
    --color-fogstone: #D8D8D8;
    --color-cloud: #D9DFDF;
    --color-snow: #FFFFFF;
    --color-blackleaf: #10312A;
    --color-ocean-haze: #A3BEB7;
    --color-mint: #D1E1D6;
    --color-sunbeam: #F0EBBF;
    --color-terracotta: #AC7968;
    --color-oat: #DED5C4;
    --color-sand: #EDE6DC;
    --color-birch: #F8F7F5;
    --color-sky: #CAE1E4;
    --color-morning-glow: #FBE8D6;
    --color-glass: #DCEED4;
    --color-apricot:#FCDABA;
    --color-pale-yellow:#E9E19D;
    --color-leaf:#22594E;
    --color-pebble:#767676;
    --color-wheat:#EBD7AF;
    --color-concrete:#cdcdcd;
    --color-pure-white:#fff;
    --color-cotton:#F0F0F0;
    --color-overlay-black:#00000080;
    --color-lightgray:#d3d3d3;

    /* ナビゲーション用セマンティックカラー（SP/PC切替） */
    --nav-font-color: var(--color-raven);
}
@media screen and (min-width: 1240px) {
    :root {
        /* PC: 白に上書き */
        --nav-font-color: var(--color-snow);
    }
}



/* =========================================
 * 2. フォント定義
 * フォントファミリー・サイズ・スタイルの定義
 * =======================================*/

:root {
    /* フォントファミリー */
    --font-family-jp: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-en-primary: "Space Grotesk", sans-serif;
    --font-family-en-secondary: "Inter", sans-serif;
    --font-family-en-tertiary: "Montserrat", sans-serif;
    
    --nav-font-style: 700 16rem/1 "Space Grotesk", sans-serif;
    --footer-nav-font-style: 600 14rem/1 "Space Grotesk", sans-serif;

    /* レタースペーシング */
    --letter-spacing-base: 0.05em;


    /* 本文フォントスタイル */
    /* base */
    --font-size-base: 14rem;
    --line-height-base: 175%;
    --font-weight-base: 400;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-base: normal var(--font-weight-base) var(--font-size-base)/var(--line-height-base) var(--font-family-jp);

    /* base-static */
    --font-size-base-static: 14rem;
    --line-height-base-static: 175%;
    --font-weight-base-static: 400;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-base-static: normal var(--font-weight-base-static) var(--font-size-base-static)/var(--line-height-base-static) var(--font-family-jp);


    /* xsmフォントスタイルを定義 */
    --font-size-xsm: 10rem;
    --line-height-xsm: 175%;
    --font-weight-xsm: 400;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-xsm: normal var(--font-weight-xsm) var(--font-size-xsm)/var(--line-height-xsm) var(--font-family-jp);

    /* xsm-static */
    --font-size-xsm-static: 10rem;
    --line-height-xsm-static: 175%;
    --font-weight-xsm-static: 400;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-xsm-static: normal var(--font-weight-xsm-static) var(--font-size-xsm-static)/var(--line-height-xsm-static) var(--font-family-jp);


    /* smフォントスタイルを定義 */
    --font-size-sm: 12rem;
    --line-height-sm: 175%;
    --font-weight-sm: 400;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-sm: normal var(--font-weight-sm) var(--font-size-sm)/var(--line-height-sm) var(--font-family-jp);

    /* sm-static */
    --font-size-sm-static:12rem;
    --line-height-sm-static: 175%;
    --font-weight-sm-static: 400;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-sm-static: normal var(--font-weight-sm-static) var(--font-size-sm-static)/var(--line-height-sm-static) var(--font-family-jp);


    /* lgフォントスタイルを定義 */
    --font-size-lg: 16rem;
    --line-height-lg: 175%;
    --font-weight-lg: 400;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-lg: normal var(--font-weight-lg) var(--font-size-lg)/var(--line-height-lg) var(--font-family-jp);

    /* lg-static */
    --font-size-lg-static: 16rem;
    --line-height-lg-static: 175%;
    --font-weight-lg-static: 400;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-lg-static: normal var(--font-weight-lg-static) var(--font-size-lg-static)/var(--line-height-lg-static) var(--font-family-jp);


    /* 見出しフォントスタイル */
    /* heading(base) */
    --font-size-heading-base: 14rem;
    --line-height-heading-base: 175%;
    --font-weight-heading-base: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-base: normal var(--font-weight-heading-base) var(--font-size-heading-base)/var(--line-height-heading-base) var(--font-family-jp);

    /* heading-static */
    --font-size-heading-static: 14rem;
    --line-height-heading-static: 175%;
    --font-weight-heading-static: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-static: normal var(--font-weight-heading-static) var(--font-size-heading-static)/var(--line-height-heading-static) var(--font-family-jp);


    /* heading-sm */
    --font-size-heading-sm: 12rem;
    --line-height-heading-sm: 175%;
    --font-weight-heading-sm: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-sm: normal var(--font-weight-heading-sm) var(--font-size-heading-sm)/var(--line-height-heading-sm) var(--font-family-jp);

    /* heading-sm-static */
    --font-size-heading-sm-static: 12rem;
    --line-height-heading-sm-static: 175%;
    --font-weight-heading-sm-static: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-sm-static: normal var(--font-weight-heading-sm-static) var(--font-size-heading-sm-static)/var(--line-height-heading-sm-static) var(--font-family-jp);


    /* heading-md */
    --font-size-heading-md: 16rem;
    --line-height-heading-md: 175%;
    --font-weight-heading-md: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-md: normal var(--font-weight-heading-md) var(--font-size-heading-md)/var(--line-height-heading-md) var(--font-family-jp);

    /* heading-md-static */
    --font-size-heading-md-static: 16rem;
    --line-height-heading-md-static: 175%;
    --font-weight-heading-md-static: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-md-static: normal var(--font-weight-heading-md-static) var(--font-size-heading-md-static)/var(--line-height-heading-md-static) var(--font-family-jp);


    /* heading-lg */
    --font-size-heading-lg: 18rem;
    --line-height-heading-lg: 175%;
    --font-weight-heading-lg: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-lg: normal var(--font-weight-heading-lg) var(--font-size-heading-lg)/var(--line-height-heading-lg) var(--font-family-jp);

    /* heading-lg-static  */
    --font-size-heading-lg-static: 18rem;
    --line-height-heading-lg-static: 175%;
    --font-weight-heading-lg-static: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-lg-static: normal var(--font-weight-heading-lg-static) var(--font-size-heading-lg-static)/var(--line-height-heading-lg-static) var(--font-family-jp);


    /* heading-xlg */
    --font-size-heading-xlg: 20rem;
    --line-height-heading-xlg: 175%;
    --font-weight-heading-xlg: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-xlg: normal var(--font-weight-heading-xlg) var(--font-size-heading-xlg)/var(--line-height-heading-xlg) var(--font-family-jp);

    /* heading-xlg-static */
    --font-size-heading-xlg-static: 20rem;
    --line-height-heading-xlg-static: 175%;
    --font-weight-heading-xlg-static: 600;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-heading-xlg-static: normal var(--font-weight-heading-xlg-static) var(--font-size-heading-xlg-static)/var(--line-height-heading-xlg-static) var(--font-family-jp);


    /* ディスプレイフォントスタイル */
    /* display-md */
    --font-size-display-md: 24rem;
    --line-height-display-md: 175%;
    --font-weight-display-md: 700;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-display-md: normal var(--font-weight-display-md) var(--font-size-display-md)/var(--line-height-display-md) var(--font-family-jp);
    --font-display-md-en-primary: normal var(--font-weight-display-md) var(--font-size-display-md)/var(--line-height-display-md) var(--font-family-en-tertiary);

    /* display-md-static */
    --font-size-display-md-static: 24rem;
    --line-height-display-md-static: 175%;
    --font-weight-display-md-static: 700;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-display-md-static: normal var(--font-weight-display-md-static) var(--font-size-display-md-static)/var(--line-height-display-md-static) var(--font-family-jp);


    /* display-lg */
    --font-size-display-lg:32rem;
    --line-height-display-lg: 175%;
    --font-weight-display-lg: 700;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-display-lg: normal var(--font-weight-display-lg) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-family-jp);
    --font-display-lg-en-primary: normal var(--font-weight-display-lg) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-family-en-tertiary);


    /* display-xlg */
    --font-size-display-xlg:32rem;
    --line-height-display-xlg: 175%;
    --font-weight-display-xlg: 700;
    /* 上記のプロパティを統合した一括指定用変数 (フォントも含む) */
    --font-display-xlg: normal var(--font-weight-display-xlg) var(--font-size-display-xlg)/var(--line-height-display-xlg) var(--font-family-jp);
    --font-display-xlg-en-primary: normal var(--font-weight-display-xlg) var(--font-size-display-xlg)/var(--line-height-display-xlg) var(--font-family-en-tertiary);

}

@media screen and (min-width: 768px) {
    :root {
        /* フォントファミリー上書き */
        --nav-font-style: 700 14rem/1 "Space Grotesk", sans-serif;

        /* フォントサイズ上書き */
        --font-size-base: 16rem;
        --font-size-lg: 18rem;
        --font-size-sm: 14rem;
        --font-size-xsm: 12rem;
        --font-size-heading-base: 16rem;
        --font-size-heading-sm: 14rem;
        --font-size-heading-md: 18rem;
        --font-size-heading-lg: 20rem;
        --font-size-heading-xlg: 24rem;
        --font-size-display-md: 36rem;
        --font-size-display-lg:40rem;
        --font-size-display-xlg:48rem;
    }
}

:root {
    /* フォントウェイト */
    --common-weight-xs: 300 ;
    --common-weight-sm: 400 ;
    --common-weight-md: 500 ;
    --common-weight-lg: 600 ;
    --common-weight-xl: 700 ;
}

/* =========================================
 * 3. レイアウト定義
 * セクション余白・スタック・グリッドの定義
 * =======================================*/

:root {
    /* セクション上下余白（l-section） */
    --space-section-xs: 20rem;
    --space-section-sm: 30rem;
    --space-section-md: 40rem;
    --space-section-ml: 60rem;
    --space-section-lg: 80rem;
    --space-section-xl: 100rem;

    /* 縦スタック(l-stack)用 gap */
    --space-stack-xxs: 8rem;
    --space-stack-xs: 12rem;
    --space-stack-sm: 16rem;
    --space-stack-md: 24rem;
    --space-stack-ml: 32rem;
    --space-stack-lg: 40rem;
    --space-stack-xl: 60rem;
    --space-stack-2xl: 80rem;

    --space-stack-none: 0;

    /* グリッド（l-grid）用 gap */
    --space-grid-xxs: 8rem;
    --space-grid-xs: 12rem;
    --space-grid-sm: 16rem;
    --space-grid-md: 24rem;
    --space-grid-ml: 32rem;
    --space-grid-lg: 40rem;
    --space-grid-xl: 60rem;

    --space-grid-none: 0;

    /* グリッド分割数指定 sp(1列） */
    --l-grid-columns-1: repeat(1, minmax(0, 1fr));

    /* 2カラム（l-split）用 column-gap */
    --space-split-xxs: 8rem;
    --space-split-xs: 12rem;
    --space-split-sm: 16rem;
    --space-split-md: 24rem;
    --space-split-ml: 32rem;
    --space-split-lg: 40rem;
    --space-split-xl: 60rem;
    --space-split-2xl:80rem;

    --space-split-none: 0;

    /* コンテンツ最大幅 */
    --maxw-compact: 824rem;
    --maxw-narrow: 1024rem;
    --maxw-content: 1240rem;
    --maxw-wide: 1440rem;

    /* 横ガター */
    --gutter-sm: 10rem;
    --gutter-md: 20rem;
    --gutter-lg: 30rem;

    --gutter-none: 0;
}

/* PC でだけ数値を変えたい場合はここで上書き */
@media (min-width: 768px) {
    :root {
        /* セクション上下余白（l-section） */
        --space-section-sm: 40rem;
        --space-section-md: 60rem;
        --space-section-ml: 100rem;
        --space-section-lg: 120rem;
        --space-section-xl: 160rem;

        /* 縦スタック(l-stack)用 gap */
        --space-stack-xxs: 12rem;
        --space-stack-xs: 24rem;
        --space-stack-sm: 32rem;
        --space-stack-md: 48rem;
        --space-stack-ml: 64rem;
        --space-stack-lg: 80rem;
        --space-stack-xl: 160rem;

        /* グリッド（l-grid）用 gap */
        --space-grid-xxs: 12rem;
        --space-grid-xs: 24rem;
        --space-grid-sm: 32rem;
        --space-grid-md: 48rem;
        --space-grid-ml: 64rem;
        --space-grid-lg: 80rem;
        --space-grid-xl: 160rem;

        /* グリッド分割数指定 sp(2列） */
        --l-grid-columns-2: repeat(2, minmax(0, 1fr));

        /* 2カラム（l-split）用 row-gap */
        --space-split-xxs: 12rem;
        --space-split-xs: 24rem;
        --space-split-sm: 32rem;
        --space-split-md: 48rem;
        --space-split-ml: 64rem;
        --space-split-lg: 80rem;
        --space-split-xl: 160rem;

        /* 横ガター */
        --gutter-sm: 10rem;
        --gutter-md: 20rem;
        --gutter-lg: 30rem;
    }
}

@media (min-width: 960px) {
    :root {
        /* グリッド分割数指定 sp(3列） */
        --l-grid-columns-3: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    :root {
        /* 縦スタック(l-stack)用 gap */
        --space-stack-2xl: 300rem;

        /* 2カラム（l-split）用 row-gap */
        --space-split-2xl: 300rem;
    }
}



/* =========================================
 * 4. 幅・高さ・コンテナ設定（レスポンシブ設計）
 * コンテナ幅・ヘッダー高・固有サイズ
 * =======================================*/

:root{
     /* --- 基本設定（Mobile / Baseline）ヘッダの高さ --- */
    --header-height: 60rem;  /* スマホ時のヘッダー高 */
    --main-padding-x: 0;  /* 横方向の余白 */
    --main-padding-bottom: 0;  /* 下方向の余白 */
}
@media screen and (min-width: 768px) {
    :root{
        --fixed-content-width: 95%;  /* 画面幅に合わせた可変幅 */
        /* ヘッダの高さ */
        --header-height: 90rem; /* PC・タブレット向けのヘッダー高 */
    }
}

@media screen and (min-width: 968px) {
    :root {
        --fixed-content-width: 928rem;  /* コンテンツ幅を固定 */
    }
}
@media screen and (min-width: 1280px) {
    :root {
        --fixed-content-width: 1200rem;  /* 広域モニター向けに固定幅を拡大 */
    }
}