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

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

@media only screen and (min-width : 768px){
	.table th,
	.table td{padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width : 768px) {
	.table td,
	.table th {padding:13px 10px 7px;}
}
@media only screen and (min-width : 1024px){
	.table,
	.table thead,
	.table tbody,
	.table tr {
		display:table;
		width:100%;
		border-collapse: collapse;
		border:none;
		}
	.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;
		}
	.table th {
		width:25%;
		text-align:center;
		}
	.table td {
		width:auto;
		}
}

/*SPで落とす-solid(PC4列)
*****************************************************/
.table_col4,
.table_col4 thead,
.table_col4 tbody,
.table_col4 tr {
	display: block;
	}
.table_col4{
	border:#ccc solid 1px;
	}
.table_col4 th,
.table_col4 td {
	width:100%;
	display: list-item;
	list-style-type: none;
	border: none;
	text-align:left;
	padding:5px;
	}
.table_col4 th {
	background: #f7f7f7;
	}

@media only screen and (min-width : 768px){
	.table_col4 th,
	.table_col4 td{padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width : 768px) {
	.table_col4 td,
	.table_col4 th {padding:13px 10px 7px;}
}
@media only screen and (min-width : 1024px){
	.table_col4,
	.table_col4 thead,
	.table_col4 tbody,
	.table_col4 tr {
		display:table;
		width:100%;
		border-collapse: collapse;
		border:none;
		}
	.table_col4 tr{margin-top:-1px;}
	.table_col4 tr:first-child{margin-top:0;}
	
	.table_col4 th,
	.table_col4 td{
		display:table-cell;
		vertical-align:middle;
		border:#ccc solid 1px;
		}
	.table_col4 th {
		width:20%;
		text-align:center;
		}
	.table_col4 td {
		width:30%;
		}
	.table_col4 td[colspan="3"]{
		width:80%;
		}

}


/*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: #f7f7f7;
	}
.table_dot td {
	border-bottom:#ccc dotted 1px;
	}


@media only screen and (min-width : 768px){
	.table_dot th,
	.table_dot td{padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width : 768px) {
	.table_dot td,
	.table_dot th {padding:13px 10px 7px;}
}
@media only screen and (min-width : 1024px){
	.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:20%;
	background:#f7f7f7;
	}
@media only screen and (min-width : 768px){
	.table_pc td,
	.table_pc th {padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width : 768px) {
	.table_pc td,
	.table_pc th {padding:13px 10px 7px;}
}
@media only screen and (min-width : 1024px){
	.table_pc th {width:25%;}

}


/*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;
	}
@media only screen and (min-width : 768px){
	.table_dot_pc td,
	.table_dot_pc th {padding:10px;}
}
@media (-ms-high-contrast:none) and (min-width : 768px) {
	.table_dot_pc td,
	.table_dot_pc th {padding:13px 10px 7px;}
}
@media only screen and (min-width : 1024px){
	.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 {
	}
*/

@media only screen and (min-width : 1024px){
.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;
	border-top:1px solid #ccc;
}
.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;
	}

.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 : 768px) {
	.table_sticky td,
	.table_sticky th {padding:13px 10px 7px;}
}
@media only screen and (min-width : 1024px){
	.table_sticky th {width:25%;}
	.table_sticky > div.table_sticky_scroll {
		overflow-y:inherit;
		overflow-x:inherit;
	}

}


/******
縦横反転
***************************/
.table-vh_flip {
		width:100%;
    border : 1px solid #ccc;
		border-collapse: collapse;
    -ms-writing-mode : tb-lr;
    writing-mode : vertical-lr;
	}
.table-vh_flip thead {
	width:40%;}
.table-vh_flip tbody {
	width:60%;}

.table-vh_flip th,
.table-vh_flip td{
    border : 1px solid #ccc;
    line-height : 1;
		padding:5px;
		height:2.5em;
	}
.table-vh_flip th {
    background-color : #f7f7f7;
		padding:10px 5px;
	}
.table-vh_flip td {
	}
.table-vh_flip td > span,
.table-vh_flip th > span{
    -ms-writing-mode : lr-tb;
    writing-mode : horizontal-tb;
    white-space : nowrap;
	}
@media only screen and (min-width : 1025px){
.table-vh_flip {
	-ms-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
	}
.table-vh_flip thead,
.table-vh_flip tbody {width:auto;}

.table-vh_flip th,
.table-vh_flip td{
	}
}

/*
<table width="100%" class="table-vh_flip">
<thead>
<tr>
<th>&nbsp;</th>
<th><span>基本給</span></th>
<th><span>資格手当</span></th>
<th><span>夜勤手当<sup>※1</sup></span></th>
<th><span>処遇手当</span</th>
<th><span>業務手当<sup>※2</sup></span></th>
<th><span>扶養手当<sup>※3</sup></span></th>
<th><span>合計月額</span></th>
</tr>
</thead>
<tbody>
<tr>
<th>支給額</th>
<td><span><input type="text" name="basev" id="basev" value="0" style="border:none; font-size:1.1em; width:100px; text-align:right;">円～</span></td>
<td><span><input type="text" name="licensev" id="licensev" value="0" style="border:none; font-size:1.1em; width:100px; text-align:right;">円</span></td>
<td><span><input type="text" name="midnightv" id="midnightv" value="0" style="border:none; font-size:1.1em; width:100px; text-align:right;">円</span></td>
<td><span><input type="text" name="plusv" id="plusv" value="18500" style="border:none; font-size:1.1em; width:100px; text-align:right;">円</span></td>
<td><span><input type="text" name="plus2v" id="plus2v" value="0" style="border:none; font-size:1.1em; width:100px; text-align:right;">円</span></td>
<td><span><input type="text" name="familyv" id="familyv" value="0" style="border:none; font-size:1.1em; width:100px; text-align:right;">円</span></td>
<td><span><input type="text" name="allv" id="allv" value="0" style="border:none; font-size:1.1em; width:100px; text-align:right; font-weight:bold;" class="fcGreen">円～</span></td>
</tr>
</tbody>
</table>

*/