@charset "UTF-8";
/* Table */

table {
	border-collapse:collapse;
}

/* ftbl */
.ftbl {
	width: 100%;
	table-layout: fixed;
}

.ftbl table {
	border-collapse:collapse;
	box-sizing: border-box;
	width: 100%;
	border: 0px solid;
	/* (注：displayをblockにしないように) */
}
.ftbl table tr {
	display: block;
}
.ftbl table th,
.ftbl table td {
	box-sizing: border-box;
	border-bottom: 2px solid #fff;
	display: block;
}
.ftbl table th {
	background-color: #f9e574;
	padding: 0.6em 2em 0.6em 2em;
	width: 100%;
}

.ftbl table td {
	background-color: #e8e8e8;
	padding: 0.6em 1em 0.6em 1em;
	border-left: 0px solid #fff;
	width: 100%;
}

/* tbl_reverse */
.tbl_reverse {}

.tbl_reverse table {
	width: 100%;
}

.tbl_reverse table tr {
	display: block;
	clear: none;
	float: left;
}
.tbl_reverse table thead tr {
	width: 100%;
}
.tbl_reverse table tbody tr {
	width: 30%;
}

.tbl_reverse table tr th,
.tbl_reverse table tr td {
	display: block;
	height: 60px;
	vertical-align: middle;
}

.tbl_reverse table thead {
	display: block;
	clear: none;
	float: left;
	width: 30%;
}
.tbl_reverse table thead th {
	background-color: #f9e574;
	text-align: center; 
	/*padding: 1em 0.1em 1em 0.1em;*/
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
}
.tbl_reverse table tbody {
	display: block;
	clear: none;
	float: left;
	width: 70%;
}
.tbl_reverse table tbody th,
.tbl_reverse table tbody td {
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
}
.tbl_reverse table tbody th {
	background-color: #dcdffe;
	text-align: center; 
}
.tbl_reverse table tbody td {
	text-align: center;
	/*padding: 1em 0.1em 1em 0.1em;*/
	background-color: #e8e8e8;
}

/* tbl_scroll */
.tbl_scroll {
	overflow-x: scroll;
}
.tbl_scroll table {
	box-sizing: border-box;
	min-width: 420px;
}
.tbl_scroll table th,
.tbl_scroll table td {
	box-sizing: border-box;
}
.tbl_scroll table thead th {
	padding: 1em 1em 1em 1em;
	background-color: #f9e574;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;

}
.tbl_scroll table tbody th,
.tbl_scroll table tbody td {
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;

}
.tbl_scroll table tbody th {
	padding: 1em 1em 1em 1em;
	background-color: #dcdffe;
}
.tbl_scroll table tbody td {
	padding: 1em 1em 1em 1em;
	background-color: #e8e8e8;
}
.scroll_arrow {
	text-align: center;
	display: block;
}





@media handheld, print, screen and (min-width: 481px) {


/* tbl_scroll */
.scroll_arrow {
	display: none;
}


/* end of media query */	
}

@media handheld, print, screen and (min-width: 621px) {
/* iPad */

/* ftbl */
.ftbl table {
	display: table;
}
.ftbl table tr {
	display: table-row;
}
.ftbl table th,
.ftbl table td {
	display: table-cell;
}

.ftbl table th {
	background-color: #f9e574;
	padding: 1em 2em 1em 2em;
	width: 12em;
}

.ftbl table td {
	background-color: #e8e8e8;
	padding: 1em 2em 1em 2em;
	border-left: 2px solid #fff;
	width: auto;
}


/* tbl_reverse */
.tbl_reverse {}

.tbl_reverse table {
	width: 100%;
}

.tbl_reverse table tr {
	display: table-row;
	clear: both;
	float: none;
}
.tbl_reverse table thead tr {
	width: auto;
}
.tbl_reverse table tbody tr {
	width: auto;
}

.tbl_reverse table tr th,
.tbl_reverse table tr td {
	display: table-cell;
	height: 60px;
	vertical-align: middle;
}

.tbl_reverse table thead {
	display: table-header-group;
	clear: both;
	float: none;
	width: auto;
}
.tbl_reverse table thead th {
	background-color: #f9e574;
	text-align: center; 
	/*padding: 1em 0.1em 1em 0.1em;*/
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
}
.tbl_reverse table tbody {
	display: table-row-group;
	clear: both;
	float: none;
	width: auto;
}
.tbl_reverse table tbody th,
.tbl_reverse table tbody td {
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
}
.tbl_reverse table tbody th {
	background-color: #dcdffe;
	text-align: center; 
}
.tbl_reverse table tbody td {
	text-align: center;
	/*padding: 1em 0.1em 1em 0.1em;*/
	background-color: #e8e8e8;
}



/* end of media query(iPad) */	
}




@media handheld, print, screen and (min-width: 801px) {




/* end of media query */
}