@charset "UTF-8";
/* CSS Document */

table.sample1 {
	width: 100%;
	margin:1em 0 2em;
	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: 14px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 5px;
	}
table.sample1 thead tr {
	background: #e1f7fa;
	}
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;
	}
	tr td span {
	font-size:11px;
}
tr th img {
	max-width:100%;
}
tr td img {
	max-width:50%;
	padding:3px;
}
tr td #seat {
	max-width:200px;
}
		
@media screen and (max-width: 960px) {  
tr th img {
	max-width:280px;
}
tr td img {
	max-width:100%;
	padding:7px;
	float:left;
}
tr td #seat {
	max-width:200px;
}
}

@media screen and (max-width: 640px) {  /*ここからメディアクエリ*/
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;
    }
tr td img {
	max-width:34%;
	padding:8px;
	float:left;
}

}