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

/* 項目、列数がことなる場合は表ごとにid(#)を要変更 */

/*===================================================================================================
 Responsive Table (サンプル)
===================================================================================================*/
#respon_tbl{
	width: 100%;
	border-collapse: collapse;
}
#respon_tbl td,
#respon_tbl th{
	padding: 5px;
	border: 1px solid #ddd;
	vertical-align: text-top;
}
#respon_tbl th{
	font-weight: normal;
}
#respon_tbl thead th{
	background:#f5f5f5;
}

/* 480px以下の画面表示 */
@media only screen and (max-width:480px){
	#respon_tbl{
		display: block;
	}
		#respon_tbl thead{
			display: none;
		}
		#respon_tbl tbody{
			display: block;
		}
			#respon_tbl tbody tr{
				display: block;
				margin-bottom: 1.5em;
			}
			#respon_tbl tbody th,
			#respon_tbl tbody td{
				display: list-item;
				border: none;
			}
			#respon_tbl tbody th{
				margin-bottom: 5px;
				list-style: none;
				background: #f5f5f5;
			}
			#respon_tbl tbody td{
				margin-left: 5px;
				padding: 0;
				list-style: none;
			}
			#respon_tbl tbody td:nth-of-type(1):before { content: "[項目1] "; }/* 項目名をhtmlと同じに変更 */
			#respon_tbl tbody td:nth-of-type(2):before { content: "[項目2] "; }/* 項目名をhtmlと同じに変更 */
			#respon_tbl tbody td:nth-of-type(3):before { content: "[項目3] "; }/* 項目名をhtmlと同じに変更 */
}