:root {
  /* neutral */
  --neutral-0: #000;
  --neutral-900: #111;
  --neutral-800: #333;
  --neutral-850: #464646;
  --neutral-700: #555;
  --neutral-600: #666;
  --neutral-500: #888;
  --neutral-450: #bbb;
  --neutral-400: #aaa;
  --neutral-300: #ccc;
  --neutral-200: #ddd;
  --neutral-180: #eaeaea;
  --neutral-150: #eee;
  --neutral-100: #fff;
  --neutral-075: #f2f2f2;
  --neutral-050: #f5f5f5;

  /* brand */
  --primary: #0c5c78;

  /* derived */
  --primary-hover: #0a516a; /* 少し沈める */

  --primary-link: #3a687d;
  --primary-dark: #305769;

  --primary-surface-soft: #daecf2; /* hover bg */
  --primary-surface-hover: #85b0be; /* card hover */
  --primary-lang-menu: #7db0c0; /* lang-menu */

  --color-text: var(--neutral-800);

  --divider-soft: var(--neutral-180);

  --border-light: var(--neutral-300);
  --shadow-header: rgba(127, 137, 161, 0.25);

  --black-pure: var(--neutral-0); /* micro use only */
}

/* ess color
--------------------------------*/

.es01 {
  background: #ec8e57;
}
.es02 {
  background: #20b283;
}
.es03 {
  background: #566fec;
}
.es04 {
  background: #be9c07;
}