@charset "UTF-8";

@import "_setting.scss"; //mixin カラー

/*---------------
  table 
----------------*/

/* base */
/****************************************************************/
table{width: 100%;}
th,td{
	text-align: left;
	font-weight: normal;
	padding: 10px;
	line-height: 1.6;
	border: 1px solid #eeeeee;
}
@media only screen and (max-width:690px) {
	th,td{padding: 8px;}
	.table_wrap{
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.table_wrap table{width: 640px;}
}


/* table 01 */
/****************************************************************/
table.tab01{table-layout: fixed;}
table.tab01 th,
table.tab01 td{	text-align: center;}

table.tab01 th{
	background-color: $key-color;
	color: #ffffff;
	width: 20%;
}
table.tab01 th.th_sub{
	background-color: #999999;
}
table.tab01 th.txt_left,
table.tab01 td.txt_left{text-align: left;}


/* table 02 */
/****************************************************************/
table.tab02{table-layout: fixed;}
table.tab02 tr:nth-child(2n){background-color: $bg-color-base;}



/* table 03 */
/****************************************************************/
table.tab03{table-layout: fixed;}
table.tab03 tr:nth-child(2n){background-color: $bg-color-base;}
table.tab03 tr:nth-child(2n) th{background-color: $key-color;}
table.tab03 th{
	background-color: $key-color;
	color: #ffffff;
}


/* table 04 */
/****************************************************************/
table.tab04{table-layout: fixed;}
table.tab04 th,
table.tab04 td{	text-align: center;}
table.tab04 th{
	background-color: $key-color;
	color: #ffffff;
}
table.tab04 thead th:nth-child(2n){background-color: $key-color;}
table.tab04 tbody td:nth-child(2n){background-color: $bg-color-base;}


/* table 05 */
/****************************************************************/
table.tab05{table-layout: fixed;}

table.tab05 th{
	background-color: $key-color;
	color: #ffffff;
	width: 20%;
}
@media only screen and (max-width:690px) {
	table.tab05 th,
	table.tab05 td{
		display: block;
		width: 100%;
		border-top: none;
		text-align: left;
	}
	table.tab05 th{border: none;}
}

/* table 06 */
/****************************************************************/
table.tab06{table-layout: fixed;}
table.tab06 th,
table.tab06 td{	text-align: center;}

table.tab06 th{
	background-color: $key-color;
	color: #ffffff;
}
@media only screen and (max-width:690px) {
	table.tab06 thead{display: none;}
	table.tab06 tbody td{
		display: block;
		padding: 0 0 10px 0;
	}
	table.tab06 tbody td::before{
		background-color: $key-color;
		color: #ffffff;
		display: block;
		padding: 5px;
		margin-bottom: 10px;
	}
	table.tab06 tbody td:nth-of-type(1)::before{content: "表見出し1";}
	table.tab06 tbody td:nth-of-type(2)::before{content: "表見出し2";}
	table.tab06 tbody td:nth-of-type(3)::before{content: "表見出し3";}
	table.tab06 tbody td:nth-of-type(4)::before{content: "表見出し4";}
	table.tab06 tbody td:nth-of-type(5)::before{content: "表見出し5";}
	table.tab06 tbody td:nth-of-type(6)::before{content: "表見出し6";}
	table.tab06 tbody td:nth-of-type(7)::before{content: "表見出し7";}
}

/* table 07 */
/****************************************************************/
table.tab07 th,
table.tab07 td{border: none;}
table.tab07 thead {border-bottom: 2px solid $key-color;}
table.tab07 thead th {
  color: $key-color;
  text-align: center;
  font-weight: bold;
  padding: 8px 16px;
  font-size: 16px;
}
table.tab07 tbody td{padding: 16px;}
table.tab07 thead th:not(:last-child),
table.tab07 tbody th,
table.tab07 tbody td:not(:last-child){border-right: 1px solid #CCCCCC;}

table.tab07 tbody tr:not(:last-child) th,
table.tab07 tbody tr:not(:last-child) td{border-bottom: 1px solid #CCCCCC;}

@media only screen and (max-width: 690px) {
  table.tab07 thead th {
    padding: 8px;
    font-size: 15px;
  }
}
/* table 08 */
/****************************************************************/
table.tab08 th,
table.tab08 td{border: none;vertical-align: top;}
table.tab08 tbody tr:not(:last-child) th,
table.tab08 tbody tr:not(:last-child) td{border-bottom: 1px solid #CCCCCC;}

table.tab08 th{color: $key-color; font-weight: bold;position: relative;}
table.tab08 th::after{
  content: "";
  width: 2px;
  height: 20px;
  background-color: #CCCCCC;
  position: absolute;
  top: 16px;
  right: 0;
}
table.tab08 td{padding-left: 40px;}

@media only screen and (max-width: 690px) {
  table.tab08 th,
  table.tab08 td{width: 100%;display:block;}
  table.tab08 tbody th,
  table.tab08 tbody tr:not(:last-child) th{border-bottom: none;padding: 16px 0 0 0;font-size: 15px;}
  table.tab08 tbody tr:not(:last-child) td{border-bottom: 1px solid #CCCCCC;}
  table.tab08 tbody td{padding-bottom: 16px;}

  table.tab08 th{color: $key-color;font-weight: bold;position: relative;}
  table.tab08 th::after{ display: none;}
  table.tab08 td{padding-left: 0;}
}
/* table 09 */
/****************************************************************/
table.tab09 th,
table.tab09 td{
	border: none;
	border-bottom: 1px solid #EEEEEE;
	vertical-align: middle;
}
table.tab09 tr:nth-child(2n){background-color: #f9f9f9;}

/* table 10 */
/****************************************************************/
table.tab10 th,
table.tab10 td{
	border: none;
	border-bottom: 1px dashed #dddddd;
	vertical-align: middle;
	vertical-align: top;
}
table.tab10 th{color: $key-color;position: relative;font-weight: bold;width: 120px;}
table.tab10 th::after{
	content: " :";
	position: absolute;
	right: 10%;
	color: $key-color;
}
table.tab10 td{width: calc(100% - 120px);}

@media only screen and (max-width: 690px) {
	table.tab10 th,
	table.tab10 td{width: 100%;display: block;}
	table.tab10 th{border-bottom: none;padding-bottom: 0;}
	table.tab10 th::after{display: none;}
	table.tab10 tr:first-child th{border-top: 1px dashed #dddddd;}
}