:root {
  /* プライマリ色セット */
  --primary: #5acfc9;
  --primary-autofill: #eefffe; /* ログイン画面などでautofillした場合のinput要素の背景 */
  --primary-active: #09aea6;
  --primary-focus: #09aea680;
  --primary-hover: #09aea6;

  --input: #4e423e; /* input要素のメイン色 */

  /* プライマリーフォント色セット */
  --primary-font: white;
  --primary-font-hover: white;
  --primary-font-disabled: white;
  --primary-font-active: white;

  /* セカンダリー色セット */
  --secondary: #eae7e7;
  --secondary-hover: #ded3d3;
  --secondary-disabled: #eae7e7a6;

  /* セカンダリーフォント色セット */
  --secondary-font: #09aea6;
  --secondary-font-hover: #5acfc9;
  --secondary-font-disabled: #5acfc9;
  --secondary-font-active: #5acfc9;

  /* 背景がグレーの領域に配置する場合の色セット */
  --secondary02: #fff;
  --secondary02-hover: #fafafa;
  --secondary02-active: #fafafa;

  --secondary02-font: #09aea6;
  --secondary02-font-hover: #09aea6;
  --secondary02-font-disabled: #09aea6;
  --secondary02-font-active: #09aea6;

  /* ネガティブ色セット */
  --negative: #a0a0a0;
  --negative-disabled: #979797;

  /* fontやアイコンで使用するリンクの色 */
  --link-font: #09aea6;
  --link-font-hover: #5acfc9;
  /* クリックやタブ移動でfocusした際に強調表示する色 */
  --focus-outline: #5acfc9;

  /* components */
  /* サイドメニュー */
  --sidebar: #646464;
  --sidebar-child: #7a7474;
  --sidebar-active: #8e8e8e;
  --sidebar-hover: #8e8e8e;

  /* ヘッダーにあるナビゲーションバー */
  --navibar: #4a4a4a;

  --submenu-font: #4e423e;

  /* datepickerコンポーネントの背景色 */
  --datepicker: #646464;

  /* select2コンポーネントの背景色 */
  --select2-highlighted: #bdece9; /* primaryの同系色を使う */

  /* system */
  /* 以降はカスタム時も基本的に修正しない */

  --light: #eeeeee;
  --dark: #4a4a4a;

  --info: #0096e1;
  --success: #5cb85c;
  --warn: #f0ad4e;
  --danger: #d9534f;
  --danger-075: #d5413c;
}