@charset "UTF-8";
/* ----- 変数定義 ----- */
:root {
/* 共通カラー (※プロジェクト毎に値を変更※) */
/* 白 */
--color-white:#ffffff;
/* 標準文字色 */
--color-black:#333333;
/* 赤 */
--color-red:#C81C1D;
/* --color-red 10％ */
--color-red_light:#ffebeb;

/* メインカラー (※プロジェクト毎に値を変更※) */
/* 茶色 */
--color-primary:#836048;
/* 薄い茶色 */
--color-primary_light:#FCF6F2;
/* 薄い茶色背景用(今プロジェクトでは不使用) */
--color-primary_bg:#E6E0D5;
/* 更に薄い茶色背景用(今プロジェクトでは不使用) */
--color-primary_bg_light:#F1EEE9;
/* --color-borderと同じ */
--color-primary_border:#cecece;
/* --color-borderと同じ */
--color-primary_border_light:#cecece;
/* 茶色系文字用 */
--color-secondary_text:#594C3E;

/* サブカラー(※プロジェクト毎に値を変更) */
/* プライマリと同じ */
--color-secondary:#836048;
/* 薄い茶色 */
--color-secondary_light:#FAF9F5;
/* プライマリと同じ */
--color-secondary_dark:#836048;
/* 更に薄い黄色背景用 */
--color-secondary_bg:#FAFAF5;

/* サブカラー2 (※プロジェクト毎に値を変更※) */
/* 青（注文ボタンで使用） */
--color-tertiary:#0064B4;

/* グレー系 (※プロジェクト毎に値を変更※) */
/* 薄いグレー（背景用） */
--color-bg:#f2f2f2;
/* 更に薄いグレー背景用 */
--color-bg_light:#F5F7F8;
/* 区切りや表の線に使用する */
--color-border:#cecece;
/* グレー */
--color-gray:#878787;
/* 濃いグレー(今回不使用) */
/* --color-gray_text:#999; */

/* 部品用・その他カラー */
/*  枠線用：黒 */
--color-frame:--color-black;
/*  料金文字色用：赤 */
--color-price:--color-red;
/* 文字選択時の色 (※プロジェクト毎に値を変更※) */
--color-selection:#3399ff;

/* テーブル用の背景色　seondary_bgと分ける為 */
--color-table_bg:#F6F6F6;

/* アイコン用カラー (※プロジェクト毎に値を変更※) */
/* 白 */
--color-icon-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(65deg) brightness(103%) contrast(103%);
/* 黒または--color-blackを変換 */
--color-icon-black: brightness(0) saturate(100%) invert(14%) sepia(0%) saturate(16%) hue-rotate(179deg) brightness(104%) contrast(85%);
/* --color-redを変換 */
--color-icon-red: brightness(0) saturate(100%) invert(17%) sepia(55%) saturate(4742%) hue-rotate(347deg) brightness(96%) contrast(99%);
/* --color-grayを変換 */
--color-icon-gray: brightness(0) saturate(100%) invert(55%) sepia(0%) saturate(0%) hue-rotate(222deg) brightness(91%) contrast(88%);
 /* --color-primaryを変換 */
--color-icon-primary: brightness(0) saturate(100%) invert(29%) sepia(19%) saturate(531%) hue-rotate(346deg) brightness(95%) contrast(89%);
/* --color-secondaryを変換 */
--color-icon-secondary: brightness(0) saturate(100%) invert(81%) sepia(75%) saturate(3535%) hue-rotate(356deg) brightness(93%) contrast(112%);
/* --color-tertiaryを変換 */
--color-icon-tertiary: brightness(0) saturate(100%) invert(24%) sepia(96%) saturate(1726%) hue-rotate(189deg) brightness(89%) contrast(101%);
}