@charset "UTF-8";

table.js-rspTable {
  margin-bottom: 0;
  min-width: 100%;
  opacity: 0;
  width: 300%;
}

.table-wrapper {
  border-right: 1px solid #dadada;
  position: relative;
  margin-bottom: 20px;
  margin-top: 20px;
  width: 100%;
}

.table-wrapper .pinned {
  border-left: 1px solid #dadada;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  overflow: hidden;
}

.table-wrapper .pinned,
.table-wrapper .scrollable table {
  border-bottom: 1px solid #dadada;
}

.table-wrapper .pinned table {
  background-color: #f6f6f6;
  border-bottom: none !important;
  border-left: none !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  width: 100%;
}

.table-wrapper .pinned table th,
.table-wrapper .pinned table td {
  border-right: 1px solid #dadada;
}

.table-wrapper .pinned td:last-child {
  border-bottom: 0;
}

.table-wrapper .scrollable {
  overflow: scroll;
  overflow-y: hidden;
}

.table-wrapper .scrollable table {
  border-left: none;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.table-wrapper .scrollable td,
.table-wrapper .scrollable th{
  overflow: hidden;
  position: relative;
}

.table-wrapper .scrollable td:not(:first-child),
.table-wrapper .scrollable th:not(:first-child){
  white-space: nowrap;
}

.table-wrapper .scrollable td:last-child {
  border-right: none;
}


@media screen and (max-width: 767px) {

  .table-wrapper {
    margin-top: 40px;
  }

  .table-wrapper-scroll:before {
    top: -20px;
    content: '◀︎ 下記の表は左右にスライドできます ▶︎';
    color: #999;
    display: block;
    font-size: 10px;
    font-size: 1.0rem;
    position: absolute;
    right: 0;
    text-align: center;
    width: 100%;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
  }

  .table-wrapper .pinned {
    overflow-x: hidden;
    width: 34% !important;
  }
  .table-wrapper .scrollable {
    margin-left: 34% !important;
  }

}