@charset "UTF-8";

body {
	position: relative;
	background-color: rgba(202, 232, 242, 0.2);
}


/* contents */

#contents {
	width: 100%;
	position: relative;
}

#contact_block{
}

@media screen and (max-width: 840px) {
}
@media screen and (max-width: 640px) {
}

/*-----------------------------------
	works_block
-----------------------------------*/
#works_block{
	padding: 90px 0 128px;
	margin-bottom: 80px;
	background-color: #fff;
}
#works_block .scroll_txt{
	margin: 0 auto 15px;
}

#works_block .table_ttl{
	overflow-x: hidden;
	border-radius: 10px 10px 0 0;
}
#works_block .table_ttl table,
#works_block .works_table table{
	width: 100%;
}
#works_block .table_ttl table tr:first-child td{
	color: #fff;
	font-size: 16px;
	background: #6C818A;
}
#works_block .table_ttl table tr:first-child td:nth-child(even){
	background: #404C51;
}

#works_block .line_deco{
	position: relative;
}
#works_block .line_deco::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(0deg, rgba(108,129,138,0.4), rgba(255, 255, 255, 0));
	width: 100%;
	height: 20px;
	z-index: 1;
}
#works_block .works_table{
	overflow-x: hidden;
	overflow-y: auto;
	height: 685px;
}
#works_block .works_table table tr{
	background: #EFFAFE;
}
#works_block .works_table table tr:nth-child(odd){
	background: #fff;
}
table tbody {
  display: flex;
  flex-direction: column-reverse;
}

/* そのままだと幅が崩れるため、trを幅100%にする等の調整が必要 */
table tr {
  width: 100%;
  display: table; /* または flex */
  table-layout: fixed; /* レイアウト崩れを防ぐ工夫が必要 */
}
#works_block table tr td{
	padding: 15px 30px;
	font-weight: 700;
}
#works_block table tr td:first-child{
	width: 205px;
}
#works_block table tr td:nth-child(2){
	width: calc(100% - 525px);
}
#works_block table tr td:last-child{
	width: 320px;
}

/* スクロールバー */
.scroll__inner {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */
}
.scroll__inner::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}
.simplebar-scrollbar::before {
  border-radius: 2px!important;
  width: 17px;
  margin: auto;
  background: #8CB5C6!important;
}
.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}
.simplebar-track {
  background: #F3F3F3;
  width: 25px !important;
}

@media screen and (max-width: 840px) {
	#works_block table tr td{
		padding: 15px 20px;
	}
	#works_block table tr td:first-child{
		width: 170px;
	}
	#works_block table tr td:nth-child(2){
		width: calc(100% - 340px);
	}
	#works_block table tr td:last-child{
		width: 160px;
	}
}
@media screen and (max-width: 640px) {
	#works_block{
		padding: 50px 0;
		margin-bottom: 70px;
	}
	#works_block .works_table{
		height: 500px;
	}
	#works_block .table_ttl table tr:first-child td,
	#works_block table tr td{
		padding: 10px 15px;
		font-size: 13px;
	}
	#works_block table tr td:first-child{
		width: 145px;
	}
	#works_block table tr td:nth-child(2){
		width: calc(100% - 235px);
	}
	#works_block table tr td:last-child{
		width: 90px;
	}
	
	.simplebar-scrollbar::before {
		width: 10px;
	}
	.simplebar-track {
		width: 15px !important;
	}
}
@media screen and (max-width: 500px){
	#works_block .works_table{
		height: 400px;
	}
	#works_block table tr td:first-child{
		width: 90px;
	}
	#works_block table tr td:nth-child(2){
		width: calc(100% - 180px);
	}
}