@charset "utf-8";

/* --- テーブル1 --- */
/* --- 表全体 --- */
table.example {
	width: 700px; /* 表の幅 */
	border: 1px #c0c0c0 solid; /* 大枠の境界線 */
	border-collapse: collapse;
	text-align: center;
}

/* --- 表タイトル --- */
table.example caption {
padding-bottom: 5px; /* 表タイトルの下パディング */
}

/* --- セル --- */
table.example th,
table.example td {
	/* width: 20%; */ /* セルの幅（セルの幅を均等にする場合） */
	padding: 6px 8px; /* セルのパディング（上下、左右） */
	border: 1px #c0c0c0 solid; /* セルの境界線 */
	font-style: normal;
	text-align: center;
}

/* --- 見出しセル（上段） --- */
table.example thead th {
	background-color: #CCD9FF; /* 見出しセルの背景色 */
	text-align: center;
}

/* --- 見出しセル（下段） --- */
table.example thead th2 {
background-color: #deefff; /* 見出しセルの背景色 */
text-align: center;
}

/* --- フッタセル --- */
table.example tfoot td {
background-color: #f5f5f5; /* フッタセルの背景色 */
}

/* --- 表ボディ --- */
table.example tbody {
background-color: #ffffff; /* ボディの背景色 */
}

/* --- マウスオーバー時 --- */
table.example tbody tr:hover {
background-color: #e5e5e5; /* 行の背景色 */
}

/* --- テーブル2 --- */
/* --- 表全体 --- */
table.example2 {
	width: 660px; /* 表の幅 */
	border-left: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	border-bottom: 1px solid #FFFFFF;
	border-top: 1px solid #c0c0c0; /* 大枠の境界線 */
	border-collapse: collapse;
	text-align: center;
}

/* --- 表タイトル --- */
table.example2 caption {
padding-bottom: 5px; /* 表タイトルの下パディング */
}

/* --- セル --- */
table.example2 th,
table.example2 td {
	padding-top: 0px;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 0px; /* セルのパディング（上下、左右） */
	border: 1px solid #FFFFFF; /* セルの境界線 */
	font-style: normal;
	text-align: center;
}

/* --- 見出しセル（上段） --- */
table.example2 thead th {
	background-color: #CCD9FF; /* 見出しセルの背景色 */
	text-align: center;
}

/* --- 見出しセル（下段） --- */
table.example2 thead th2 {
background-color: #deefff; /* 見出しセルの背景色 */
text-align: center;
}

/* --- フッタセル --- */
table.example2 tfoot td {
background-color: #f5f5f5; /* フッタセルの背景色 */
}

/* --- 表ボディ --- */
table.example2 tbody {
background-color: #ffffff; /* ボディの背景色 */
}