@charset "UTF-8";
/*----------------------------------------------------
  .table-class 共通
----------------------------------------------------*/
section table { width: 100%; }
section th, section td  { padding: 10px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }

/*----------------------------------------------------
  .table-class00
  // 入れ子で中のテーブルには適用したくないとき用
----------------------------------------------------*/
.table-class00, 
.table-class00 tr,
.table-class00 tr td,
.table-class00 tbody,
.table-class00 thead,
.table-class00 tfoot,
.table-class00 tr th,
.table-class00 tfoot tr tf
{
    margin:0;
    padding:0;
    background:none;
    border-collapse:collapse;
    border-spacing:0;
    background-image:none;
}

@media only screen and (max-width:480px){
    .table-class00 { 
        display:table !important; 
    }
    .table-class00 tr th,
    .table-class00 tr td {    
        display:table-cell !important; 
        width:auto !important; 
    }
}
/*----------------------------------------------------
  .table-class01
----------------------------------------------------*/
.table-class01 th  { width: 30%; text-align: left; }
 
@media only screen and (max-width:480px){
    .table-class01 { margin: 0; }
    .table-class01 th,
    .table-class01 td{
    width: 100%;
    display: block;
    border-top: none;
    }
  .table-class01 tr:first-child th { border-top: 1px solid #ddd; }
}

/*----------------------------------------------------
  .table-class02
----------------------------------------------------*/
.table-class02 th  { width: 13%; }
.table-class02 td  { text-align: center; }
.table-class02 td:first-child  { text-align: left; }
@media only screen and (max-width: 800px) { 
  .table-class02 { 
    display: block; 
    width: 100%; 
    margin: 0 -10px;
  }
  .table-class02 thead{ 
    display: block; 
    float: left;
    overflow-x:scroll;
  }
  .table-class02 tbody{ 
    display: block; 
    width: auto; 
    overflow-x: auto; 
    white-space: nowrap;
  }
  .table-class02 th{ 
    display: block;
    width:auto;
  }
  .table-class02 tbody tr{ 
    display: inline-block; 
    margin: 0 -3px;
  }
  .table-class02 td{ 
    display: block;
  }
}

/*----------------------------------------------------
  .table-class03
----------------------------------------------------*/

.table-class03 th, .table-class03 td  { width: 20%; text-align: left; }
@media only screen and (max-width: 480px) { 
  .table-class03 { margin: 0 -10px; }
  .table-class03 tr {
    display:block;
    margin-bottom: 10px;
  }
  .table-class03 th {
    display:block;
    width: 100%;
  }
  .table-class03 td {
    display: list-item;
    width: 90%;
    margin-left: 10%;
    border:none;
  }
}