body {
	background-color: white;	/* 背景色 */
	margin: 10px;				/* 外側の余白 */
}

/* ボタン */
.button {
	border: 2px solid black;		/* 枠線：黒色の実線を1pxの太さで引く */
	border-radius: 0.3em;			/* 枠線の角を丸く */
	padding: 0.2em 0.8em;			/* 内側の余白 */
	background-color: white;		/* 背景色 */
}
.button:disabled {
	pointer-events: none;			/* マウスイベント無効化 */
	background-color: #dcdcdc;		/* 無効化時の背景色 */
}
.button:hover {
	background-color: #b0e0e6;		/* マウスオーバー時の背景色 */
}
.button:active {
	background-color: #87ceeb;		/* クリック時の背景色 */
}

/* コンボボックス */
.combobox {
	border: 1px solid black;		/* 枠線：黒色の実線を1pxの太さで引く */
	padding: 0.2em;					/* 内側の余白 */
	background-color: white;		/* 背景色 */
}
.combobox:disabled {
	background-color: #dcdcdc;		/* 無効化時の背景色 */
}
/* コンボボックスの各項目 */
.combobox option {
	
}

/* ダイアログ */
.dialog {
	box-shadow: 0px 20px 36px 0px rgba(0, 0, 0, 0.6);
}
.dialog::backdrop {
	backdrop-filter: blur(2px);
}

/* divボックス */
.divBox {
	border: 2px dashed #0094D6;		/* 枠線 */
	border-radius: 5px;				/* 枠線の角を丸める */
	background-color: #dcdcdc;		/* 背景色 */
}
.divBoxTitle {
	background-color: #dcdcdc;		/* タイトルの背景色 */
}

/* リストボックス */
.listbox {
	border: 1px solid black;		/* 枠線：黒色の実線を1pxの太さで引く */
	background-color: #ececec;		/* 背景色 */
	outline: none;					/* フォーカス時の外枠無し */
}
.listbox:disabled {
	background-color: #dcdcdc;		/* 無効化時の背景色 */
}
.listbox option:checked {
	/*
		OPTION選択時（フォーカスがあたっているとき）の背景色は何故かグラデーション指定をしないと反映されない。
		また、OPTION選択時の文字色は反映方法が不明。（2025.02）
	*/
	color: white;										/* 選択された項目の文字色 */
	background-color: #0078d7;							/* 選択された項目の背景色 */
	background: linear-gradient(#0078d7, #0078d7);		/* 選択された項目の背景色（フォーカスがあたっているとき） */
}

/* スクロールボックス */
.scrollBox {
	border: 1px solid black;		/* 枠線：黒色の実線を1pxの太さで引く */
}

/* タブ領域全体 */
.tabControl {
	margin: 0;
}

/* タブ */
.tabControl > a {
	display: inline-block;				/* インラインブロック化 */
	border-width: 1px 1px 0px 1px;		/* 下以外の枠線を引く */
	border-style: solid;				/* 枠線の種類：実線 */
	border-color: black;				/* 枠線の色：黒色 */
	border-radius: 0.3em 0.3em 0 0;		/* 枠線の左上角と右上角だけを丸く */
	padding: 0.4em 0.75em;				/* 内側の余白 */
	margin-right: 0.2em;				/* 外側の余白 */
	text-decoration: none;				/* リンクの下線を消す */
	position: relative;					/* JavaScriptでz-indexを調整するために必要 */
}

/* タブの中身 */
.tabBody > div {
	background-color: #dcdcdc;		/* 背景色 */
	border: 1px solid black;		/* 枠線：黒色の実線を1pxの太さで引く */
	margin-top: -1px;				/* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */
	padding: 1em;					/* 内側の余白 */
	position: relative;				/* z-indexを調整するために必要 */
	z-index: 0;						/* 重なり順序を「最も背面」にするため */
}

/* テキストエリア */
.textarea {
	border: 1px solid black;		/* 枠線：黒色の実線を1pxの太さで引く */
	padding: 0.2em;					/* 内側の余白 */
	background-color: white;		/* 背景色 */
	outline-color: #0078d7;			/* フォーカス時の外枠の色 */
	/*outline: none;*/				/* フォーカス時の外枠を非表示にする */
}
.textarea:disabled {
	background-color: #dcdcdc;		/* 無効化時の背景色 */
}

/* テキストフィールド */
.textfield {
	border: 1px solid black;		/* 枠線：黒色の実線を1pxの太さで引く */
	padding: 0.2em;					/* 内側の余白 */
	background-color: white;		/* 背景色 */
	outline-color: #0078d7;			/* フォーカス時の外枠の色 */
	/*outline: none;*/				/* フォーカス時の外枠を非表示にする */
}
.textfield:disabled {
	background-color: #dcdcdc;		/* 無効化時の背景色 */
}