@charset "utf-8";
/* CSS Document */
body { font-size: 10px }

table.sample1 {
	width: 100%;
	margin:1em 0 4em;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-spacing:0px;
	}
table.sample1 tr th,table.sample1 tr td {
	text-align: center;
	font-size: 30px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 3px;
	}
table.sample1 thead tr {
	background: #c7ebc9;
	}
table.sample1 tfoot tr {
	background: #86bd7e;
	color:#fff;
	}
table.sample1 tbody.areaA tr {
	background: #ffc;
	}
table.sample1 tbody.areaB tr {
	background: #e1f7fa;
	}
table.sample1 tbody.areaC tr {
	background: #ffe9da;
	}
	
@media screen and (max-width: 600px) {  /*ここからメディアクエリ*/
table.sample1 {
	border:none
	}
table.sample1 thead {
	display: none;   /*theadは非表示に*/
	}
table.sample1 tr {
	display: block;  /*trをブロックレベルに*/
	margin-bottom:.5em;
	border-bottom:1px solid #ccc;
	box-shadow:0 2px 2px #ddd;
	}
table.sample1 tr td {
	display:block;  /*tdをブロックレベルに（セルをやめる）*/
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom:none;
	}
table.sample1 tr td::before {   /*tdに擬似要素 ::before*/
	content: attr(aria-label);  /*aria-label属性の値をコンテンツに*/
	float: left;                /*テキストを左寄せにする*/
	font-weight:bold;
	padding-left:.7em
	}
table.sample1 tr td::after {   /*クリアフィックス（コレは不要かもしれません）*/
	content:"";
	display:table;
	clear:both;
	}
table.sample1 tbody th {
	display:block;  /*tbody内の thをブロックレベルに（セルをやめる）*/
	border:none;
	background:#666;
	color:white
	}
table.sample1 tbody th::before {
	content:"エリア"  /*tbody内の thの前に エリア と追加*/
	}
table.sample1 tbody.areaA th {
	color: #ffc
    }
table.sample1 tbody.areaB th {
	color: #e1f7fa
    }
table.sample1 tbody.areaC th {
	color: #ffe9da
    }
table.sample1 tfoot th {
	display:block;
	border:none;
	}
table.sample1 tfoot td {
	border-top-color:white
	}
}