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

	
  /*サイトカラー*/
  --color--white: #ffffff;
  --color--black: #333333;
  --color--gray01: #adadad;
  --color--gray02: #999999;
  --color--gray03: #f8f8f8;
  --color--gray04: #8a8a8a;
  /* staging */
  --color--gray05: #f7f7f7; /*薄い灰色　背景  */
  --color--gray06: #aaaaaa; /*薄い灰色　文字 ライン */
  --color--gray07: #878A88; /*薄い灰色　文字 */
  --color--gray08: #FAFAFA; /*薄い灰色　背景  */
  --color--gray09: #E5E5E1; /*さらに薄い灰色　文字 ライン  */

  /*yellow バリエーション*/
  --color--light-yellow01: #f7f7f2; /*薄い黄色 背景  */
  --color--light-yellow02: #f7f3de; /*薄い黄色 背景2  */
  --color--dark-yellow01: #BDA40F; /*くすんだ暗い黄色 ボタン  */

  /*blue バリエーション*/
  --color--light-blue01: #f0f3f5; /*くすんだ薄い青*/
  --color--light-blue05: #e2e8eb; /*くすんだ薄い青の少し濃い青*/
  --color--light-blue02: #f3f8fa; /*   少し明るい青 */
  --color--light-blue03: #dfe7ea; /*くすんだ少しだけ濃い青*/
  --color--light-blue04: #cedfe8; /*キー青を18%に薄めたもの*/
  --color--dark-blue01: #13567d; /*少し濃い青*/
  --color--dark-blue02: #a3b8c2; /*くすんだ濃い青*/

  --color--orange: #f47e04; /*   オレンジ色  */
  --color--yellow: #f2e974; /*   黄色  */
  --color--light-yellow: #ece8d0; /*   薄い黄色  */

  --color--transparent-blue01: rgba(12, 92, 133, 0.7); /* キーの青の透過70% */
}
/* background */
.box-shadow {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}
/**************************************************
* 背景　[t-color-bg--]
***************************************************/
/*サイトキーカラー*/
.t-color-bg--key-blue {
  background-color: var(--color--key-blue);
}
.t-color-bg--key-bk {
  background-color: var(--color--key-bk);
}
/*標準色セット*/
.t-color-bg--white {
  background-color: var(--color--white);
}
.t-color-bg--black {
  background-color: var(--color--black);
}
/*サイトカラーバリエーション*/
.t-color-bg--light-blue01 {
  background-color: var(--color--light-blue01);
}
.t-color-bg--light-blue02 {
  background-color: var(--color--light-blue02);
}
.t-color-bg--light-blue03 {
  background-color: var(--color--light-blue03);
}
.t-color-bg--light-blue04 {
  background-color: var(--color--light-blue04);
}
.t-color-bg--light-yellow {
  background-color: var(--color--light-yellow);
}
.t-color-bg--light-yellow01 {
  background-color: var(--color--light-yellow01);
}
.t-color-bg--light-yellow02 {
  background-color: var(--color--light-yellow02);
}
.t-color-bg--gray03 {
  background-color: var(--color--gray03);
}
.t-color-bg--gray05 {
  background-color: var(--color--gray05);
}
.t-color-bg--gray08 {
  background-color: var(--color--gray08);
}

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

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



/*標準色セット*/
.t-color-text--white {
  color: var(--color--white);
}
.t-color-text--black {
  color: var(--color--black);
}
.t-color-text--gray02 {
  color: var(--color--gray02);
}
.t-color-text--gray04 {
  color: var(--color--gray04);
}
.t-color-text--gray05 {
  color: var(--color--gray05);
}
.t-color-text--gray07 {
  color: var(--color--gray07);
}

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