$sp : 500px;

.l-wrapper {
  @media screen and (max-width: $sp) {
    padding: 15px;
  }
}

//tableベース設定
table {
  border-collapse: collapse;
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  table-layout: fixed;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  @media screen and (max-width: $sp) {
    border: none;
  }
  th,
  td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    @media screen and (max-width: $sp) {
      border: none;
    }
  }//th td
}//table
//===================tableベース設定

thead {
  @media screen and (max-width: $sp) {
    display: none;
  }
  tr {
    background: #eee;
  }
  th {
    padding: 1em;
  }
}//thead

tbody {
  tr {
    background-color: #fff;
    @media screen and (max-width: $sp) {
      display: block;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }//tr
  th,
  td {
    padding: 1em;
    vertical-align: middle;
  }//th td
  th {
    @media screen and (max-width: $sp) {
      background-color: #eee;
      display: block;
      border-right: none;
    }
  }//th
  td {
    @media screen and (max-width: $sp) {
      position: relative;
      display: block;
      padding-left: 6em;
      border-bottom: solid 1px #ccc;
    }
    &:before {
      @media screen and (max-width: $sp) {
        position: absolute;
        top: 1em;
        left: 10px;
        display: block;
        content: attr(data-label);
        font-weight: 600;
      }
    }
  }
}//tbody