Define colors in scss

### このブランチ

新UIに向けて、統一感を出したいです。
そこで、同じ色をカンタンに使えるようにするため
色をSCSSで変数定義します。

また、色指定されている部分をその変数に置き換えていきます。
命名はこんなかんじです。
アンダーバーなのは、vim上で`#`で一発検索するためです。

    $color_[タイプ]_[明度]

- タイプ
    - base: グレースケール。背景、通常文字色
    - main: アクセントカラー。リンク、ボタン、ヘッダ
- 明度(明るい順に)
    - lightest
    - lighter
    - *(なし)*
    - darker
    - darkest

明度は、名前を決めておくことである程度しばりを設けよう（≒統一）としています。
ご了承ください。

### todo

- [x] 色定義をファイルに分割
- [x] 「Fesdy UI」を元に、使う色を変数定義
- [x] 既存の色を使っているSCSSコードを、変数に変更
- :x: 確認用ステージングを準備
- [ ] どの変数がどんな色なのかwikiに書く

### issue

#208