/**************
 * テーマ
 * テキスト、背景、ボーダーカラーを切り替える
 **************/
:root {
	--white  : #ffffff;
	--black  : #000000;
	--dark1  : #242a31;
	--dark2  : #363d45;
	--dark3  : #151d20;
	--dark4  : #666666;
	--dark5  : #434c56;
	--dark6  : #505050;
	--dark7  : #646464;
	--dark8  : #979797;
	--light1 : #d4dae4;
	--light2 : #989898;
	--light3 : #b2b2b2;
	--light4 : #808080;
	--light5 : #f0f0f6;
	--light6 : #e6e9ef;
	--light7 : #d3d8e3;
	--light8 : #f8f8f8;
	--light9 : #c4c4c4;
	--blue1  : #0046a9;
	--blue2  : #d6e2f9;
	--blue3  : #afd0ff;
	--blue4  : #0084ff;
	--blue5  : #408cff;
	--blue6  : #507597;
	--blue7  : #73bbff;
	--red1   : #ff1e3c;
	--green1 : #00cc78;
	--green2 : #d4f7e9;
	--mail-gray1 : #f5f5f5;
	--mail-gray2 : #c6c6c6;
	--mail-gray3 : #777777;
	--mail-gray4 : #464646;
	--mail-gray5 : #212121;
	--mail-mfilter : #fa4619;
}


.bg_white   { background-color: var(--white);  }
.bg_light1  { background-color: var(--light1); }
.bg_light3  { background-color: var(--light3); }
.bg_light4  { background-color: var(--light4); }
.bg_light5  { background-color: var(--light5); }
.bg_dark1   { background-color: var(--dark1);  }
.bg_dark2   { background-color: var(--dark2);  }
.bg_blue1   { background-color: var(--blue1);  }

/* 選択中 */
.bg_white.selected  { background: var(--blue2); }
.bg_light1.selected { background: var(--blue3); }
.bg_dark1.selected  { background: var(--dark5); }

@media screen and (min-width:961px) {
	.bg_white.clickable:active,  .bg_white.clickable:hover  { background-color: var(--light5); }
	:not(.mobile) > .bg_light1.clickable:active, :not(.mobile) > .bg_light1.clickable:hover { background-color: var(--light5); }
	.bg_dark1.clickable:active,  .bg_dark1.clickable:hover  { background-color: var(--dark5);  }
}


.txt_white  { color: var(--white);  }
.txt_light7 { color: var(--light7); }
.txt_light2 { color: var(--light2); }
.txt_light4 { color: var(--light4); }
.txt_dark1  { color: var(--dark1);  }
.txt_dark2  { color: var(--dark2);  }

.border_light2 { border-color: var(--light2); }
.border_light3 { border-color: var(--light3); }
.border_light6 { border-color: var(--light6); }
.border_dark1  { border-color: var(--dark1);  }
.border_dark2  { border-color: var(--dark2);  }


/***********************************************************
 * テーマ（デフォルト：ColorCode）
 ***********************************************************/
:root {
	/* 基準色（濃～淡） */
	--CC-THEMA-WHOLE-STRONG-MUCH:		#0046A9;
	--CC-THEMA-WHOLE-STRONG-LITTLE:		#285ABE;
	--CC-THEMA-WHOLE:					#3E72DA;
	--CC-THEMA-WHOLE-WEEK-LITTLE:		#6E9BF0;
	--CC-THEMA-WHOLE-WEEK-MUCH:			#AACBFF;

	/* 基準色（ドロップダウン） */
	--CC-THEMA-WHOLE-DROP-BASE:			#193F8A;
	--CC-THEMA-WHOLE-DROP-TEXT-STRONG:	#80C1FF;

	/* 背景色 */
	--CC-THEMA-FIELD-NONE:				#FEFEFE;
	--CC-THEMA-FIELD-MAIN:				#D7E6F0;
	--CC-THEMA-FIELD-SUB:				#C3D7E1;

	/* 文字色 */
	--CC-THEMA-TEXT-NORMAL:				#212529;
	--CC-THEMA-TEXT-INVERT:				#FFFFFF;
	--CC-THEMA-TEXT-STRONG:				var(--CC-THEMA-WHOLE);
	--CC-THEMA-TEXT-WEEK-LITTLE:		#707070;
	--CC-THEMA-TEXT-WEEK-MUCH:			#808080;

	/* 有効/無効色 */
	--CC-THEMA-ENABLE:					var(--CC-THEMA-WHOLE);
	--CC-THEMA-DISABLE:					#989898;

	/* メッセージ色 */
	--CC-THEMA-MESSAGE-NOMAL:			#FFFFFF;
	--CC-THEMA-MESSAGE-MINE:			var(--CC-THEMA-WHOLE-WEEK-MUCH);
	--CC-THEMA-MESSAGE-DELETE:			#666666;
	--CC-THEMA-MESSAGE-SYSTEM:			#507597;
	--CC-THEMA-MESSAGE-ALERT:			#FFC8CA;

	/* オンライン会議色 */
	--CC-THEMA-VIDEO-MAIN:				#6EC832;
	--CC-THEMA-VIDEO-SUB:				#D4F7E9;

	/* 各種リスト色 */
	--CC-THEMA-LIST1:					#F0F0F6;
	--CC-THEMA-LIST2:					#E2E4ED;
	--CC-THEMA-LIST3:					#717676;
	--CC-THEMA-LIST4:					#434C56;
	--CC-THEMA-LIST5:					#151D20;

	/* ツール関連色 */
	--CC-THEMA-KNOB-LINE:				#D4DAE4;
	--CC-THEMA-TOOL-BORDER:				#B2B2B2;

	/* 部品色（ボタン） */
	--CC-THEMA-BUTTON-ENABLED:			var(--CC-THEMA-ENABLE);
	--CC-THEMA-BUTTON-DISABLED:			var(--CC-THEMA-DISABLE);
	--CC-THEMA-BUTTON-INVERT:			var(--CC-THEMA-TEXT-INVERT);
	--CC-THEMA-BUTTON-TEXT:				var(--CC-THEMA-TEXT-INVERT);

	/* 部品色（ライン） */
	--CC-THEMA-LINE-STRONG:				var(--CC-THEMA-WHOLE);

	/* 部品色（スクロールバー） */
	--CC-THEMA-SCROLLBAR-BASE:			var(--CC-THEMA-DISABLE);
	--CC-THEMA-SCROLLBAR-MAIN:			var(--CC-THEMA-ENABLE);

	/* 部品色（その他） */
	--CC-THEMA-DIALOG-HEAD:				var(--CC-THEMA-WHOLE);
	--CC-THEMA-PULLDOWN-MAIN:			var(--CC-THEMA-TEXT-NORMAL);
	--CC-THEMA-PULLDOWN-TEXT:			var(--CC-THEMA-TEXT-INVERT);
	--CC-THEMA-HELPAREA-BASE:			var(--CC-THEMA-LIST1);
}

:root{
	/* 部品 - ボタン */
	--sz-button-w:						100px;
	--sz-button-h:						20px;
}

:root{
	/* 効果 - フィルター */
	--FT-SHADOW:						drop-shadow(0px 0px 0.5px #808080);

	/* 効果 - トランスフォーム */
	--TF-BIG:							scale(1.25, 1.25);
}