/* ------------------------------
　　CSS変数
------------------------------ */
:root {
  // フォント
  --font-hiragino       : -apple-system,blinkmacsystemfont,segoe ui,roboto,helvetica neue,arial, hiragino kaku gothic pro,meiryo,sans-serif;
  --font-yu-gothic      : segoe ui,roboto,helvetica neue,arial, yugothic,yu gothic, "Hiragino Kaku Gothic Pro","Meiryo", sans-serif;
  --font-meiryo         : -apple-system,blinkmacsystemfont,segoe ui,roboto,helvetica neue,arial, verdana, meiryo, "Hiragino Kaku Gothic Pro",sans-serif;
  --font-base           : 'Roboto Condensed', var(--font-yu-gothic);


  // カラー
  --color-primary         : #222;
  --color-primary-light   : #e5f5ff;
  --color-primary-bg      : var(--color-primary-light);
  --color-primary-hover   : #525252;
  --color-secondary       : #6A6A6A;
  --color-tertiary       : #FFE13B;
  --color-tertiary-light : #fffb8b;
  --color-white           : #FFF;
  --color-black           : #333;
  --color-gray10          : #F8F8F8;
  --color-gray20          : #F4F4F4;
  --color-gray30          : #EBEBEB;
  --color-gray40          : #DDD;
  --color-gray50          : #CCC;
  --color-gray60          : #AAA;
  --color-gray70          : #999;
  --color-gray80          : #777;
  --color-gray90          : #666;
  --color-gray100         : #333;
  --color-form-bg         : var(--color-gray10);
  --color-form-border     : var(--color-gray40);
  --color-link            : #0061d1;
  --color-required        : #c92d2d;
  --color-error           : #c92d2d;
  --color-text            : var(--color-gray100);
  --color-text-side       : var(--color-gray90);
  --color-text-inverse    : var(--color-white);
  --color-text-primary    : var(--color-primary);
  --color-text-secondary  : var(--color-secondary);
  --color-text-point      : #676767;
  --box-shadow-error      : 0 0 0 2px rgb(201 45 45 / 40%);
}
