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

/*SPで落とす-solid
*****************************************************/
.table,
.table thead,
.table tbody,
.table tr {
	display: block;
	background-color:#fff;}
.table th,
.table td {
	width:100%;
	display: list-item;
	list-style-type: none;
	border: none;
	text-align:left;
	padding:5px;
	}
.table th {
	background: #f1f7fa;
	}

/*TABLET*/
@media only screen and (min-width : 600px){
	.table th,
	.table td{padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width: 600px) {
	.table td,
	.table th {padding:13px 10px 7px;}
}
/*PC*/
@media only screen and (min-width : 1025px){
	.table,
	.table thead,
	.table tbody,
	.table tr {
		display:table;
		width:100%;
		border-collapse: collapse;
		}
	.table tr{margin-top:-1px;}
	.table tr:first-child{margin-top:0;}
	
	.table th,
	.table td{
		display:table-cell;
		vertical-align:middle;
		border:#ccc solid 1px;
		padding:10px;
		}
	.table th {
		width:25%;
		text-align:center;
		}
	.table td {
		width:auto;
		}
	/**/
	.table.table4row th {
		width:20%;
		}
	.table.table4row td{
		width:30%;
		}

}

/*SPで落とす-dotted
*****************************************************/
.table_dot,
.table_dot thead,
.table_dot tbody,
.table_dot tr {display: block;}
.table_dot{border-top:#ccc dotted 1px;}
.table_dot th,
.table_dot td {
	width:100%;
	display: list-item;
	list-style-type: none;
	border: none;
	text-align:left;
	padding:5px;
	}
.table_dot th {
	background: #f1f7fa;
	}
.table_dot td {
	border-bottom:#ccc dotted 1px;
	}


/*TABLET*/
@media only screen and (min-width : 600px){
	.table_dot th,
	.table_dot td{padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width: 600px) {
	.table_dot td,
	.table_dot th {padding:13px 10px 7px;}
}
/*PC*/
@media only screen and (min-width : 1025px){
	.table_dot,
	.table_dot thead,
	.table_dot tbody,
	.table_dot tr {
		display:table;
		width:100%;
		border-collapse: collapse;
		}
	.table_dot th,
	.table_dot td{
		display:table-cell;
		vertical-align:middle;
		}
	.table_dot th {
		width:25%;
		text-align:center;
		border-bottom:#ccc dotted 1px;
		}
	.table_dot td {
		width:auto;
		}
}



/*SPで落とさない-solid
*****************************************************/

.table_pc {
	width:100%;
	border-collapse: collapse;
	}
.table_pc th,
.table_pc td{
	padding:5px;
	border: 1px solid #ccc;
	}
.table_pc th {
	width:25%;
	background:#f1f7fa;
	}

.facilityWrap .table_pc th,
.facilityWrap .table_pc td{
	width:50%;
	}


/*TABLET*/
@media only screen and (min-width : 600px){
	.table_pc td,
	.table_pc th {padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width: 600px) {
	.table_pc td,
	.table_pc th {padding:13px 10px 7px;}
}
/*PC*/
@media only screen and (min-width : 1025px){


}


/*SPで落とさない-dotted
*****************************************************/

.table_dot_pc{
	width:100%;
	border-collapse: collapse;
	border-top: 1px dotted #ccc;
	}
.table_dot_pc th,
.table_dot_pc td{
	padding:5px;
	border-bottom: 1px dotted #ccc;
	}
.table_dot_pc th {
	width:20%;
	background:#f7f7f7;
	}
/*TABLET*/
@media only screen and (min-width : 600px){
	.table_dot_pc td,
	.table_dot_pc th {padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width: 600px) {
	.table_dot_pc td,
	.table_dot_pc th {padding:13px 10px 7px;}
}
/*PC*/
@media only screen and (min-width : 1025px){
	.table_dot_pc th {width:25%;}

}





/*スクロールするテーブル
*****************************************************/

/*テーブルにスクロール*/
.table_sticky {
	display: block;
	overflow:hidden;
	}
.table_sticky > div.table_sticky_scroll {
  overflow: scroll;
  max-height: 75vh;
	}
/*ブラウザにスクロール*/
/*
.table_sticky {
	display: block;
	}
.table_sticky > div.table_sticky_scroll {
	}
*/

/*PC*/
@media only screen and (min-width : 1025px){
.table_sticky > div.table_sticky_scroll {
  overflow: scroll;
  max-height: none
	}
}

/************記述*****************
<div class="table_sticky">
<div class="table_sticky_scroll">
<table cellspacing="0">
	<thead>
		<tr>
			<th>1111</th>
			<th>2222</th>
			<th>3333</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>AAA</th>
			<td>ああああああ</td>
			<td>いいいいいい</td>
		</tr>
		<tr>
			<th>BBB</th>
			<td>うううううう</td>
			<td>ええええええ</td>
		</tr>
	</tbody>
</table>
</div>
</div>
*********************************/



.table_sticky table {
	width:100%;
	table-layout:auto;
  -webkit-overflow-scrolling: touch;
	border-spacing: inherit;
}
.table_sticky td,
.table_sticky th {
	position:relative;
	padding:5px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	white-space: nowrap;
	text-align:center;
	}
.table_sticky td {
	background:#ffffff;
	}
.table_sticky thead th,
.table_sticky thead td{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background:#666666;
	color:#ffffff;
	z-index:2;
	border-top: 1px solid #ccc;
	}
.table_sticky tbody th {
	background:#f7f7f7;
	width:20%;
	}

.table_sticky tbody tr th:first-child{
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	background:#f7f7f7;
	z-index:1;
	border-left: 1px solid #ccc;
	}
.table_sticky thead th:first-child{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	z-index:3;
	}

@media all and (-ms-high-contrast:none){
	.table_sticky > div.table_sticky_scroll {
		overflow-y:inherit;
		overflow-x:auto;
		height:inherit;
		}
}
@media (-ms-high-contrast:none) and (min-width: 600px) {
	.table_sticky td,
	.table_sticky th {padding:13px 10px 7px;}
}
/*PC*/
@media only screen and (min-width : 1025px){
	.table_sticky table {
		table-layout:fixed;
	}
	.table_sticky th {width:25%;}
	.table_sticky > div.table_sticky_scroll {
		overflow-y:inherit;
		overflow-x:inherit;
	}

}