@charset "UTF-8";
/* CSS Document */
/**************************************************
* 色の管理、色は全てここ！
***************************************************/
/**************************************************
* thema以外で色を扱えるようにする
***************************************************/ 
:root {
  /*ブランド(キー)カラー*/
  --color--key: #8CBA72;

  /*サイトカラー*/
  --color--wh: #FFFFFF;
  --color--bk: #222222;
  --color--gray01: #F5F5F5;
  --color--gray02: #717171;

  /* key バリエーション*/
  --color--dark-green01: #7BA364; /*濃い*/
  --color--dark-green02: #668753; /*濃い hover*/
  --color--light-green01: #F4FAF0; /*薄い  BG*/
  --color--light-green02: #E0F0D8; /*薄い  見出し背景*/
  --color--red: #C15050; /*赤 エラー 強調カラー*/



/* 不要なら後で削除する */
  --color--transparent-wh9:rgba(255, 255, 255, 0.9);

  --color--shadow-bk:0px 3px 6px rgba(0, 0, 0, 0.1);

}




.box-shadow {
  box-shadow: var(--color--box-shadow-bk);
}
/**************************************************
* 背景　[t-color-bg--]
***************************************************/
/*サイトキーカラー*/
.t-color-bg--key {
  background-color: var(--color--key);
}
.t-color-bg--key-bk {
  background-color: var(--color--bk);
}
.t-color-bg--wh{
  background-color: var(--color--wh);
}

/*サイトカラーバリエーション*/
.t-color-bg--dark-green01 {
  background-color: var(--color--dark-green01);
}
.t-color-bg--dark-green02 {
  background-color: var(--color--dark-green02);
}
.t-color-bg--light-green01 {
  background-color: var(--color--light-green01);
}

.t-color-bg--gray01 {
  background-color: var(--color--gray01);
}


/**************************************************
* 文字色 [t-color-txt--]
***************************************************/
/*サイトキーカラー*/
.t-color-text--key{
  color: var(--color--key);
}
.t-color-text--key-bk {
  color: var(--color--bk);
}
.t-color-text--wh {
  color: var(--color--wh);
}
.t-color-text--gray01 {
  color: var(--color--gray01);
}
.t-color-text--gray02 {
  color: var(--color--gray02);
}

/*サイトカラーバリエーション*/
.t-color-text--dark-green01 {
  color: var(--color--dark-green01);
}
.t-color-text--dark-green02 {
  color: var(--color--dark-green02);
}
.t-color-text--light-green01 {
  color: var(--color--light-green01);
}

/*=================== TBここから ==================*/
@media screen and (min-width: 600px) {}
/*=================== TBここまで ==================*/
/*=================== PCここから==================*/
@media screen and (min-width: 1023px) {}
/*=================== PCここまで ==================*/