/* #Table
   -------------------------------------------------------------------------- */
/*doc
---
title: table
name: table
categories: [component]
---

tableのレイアウト

```block
<div class="c-wrapper">
  <table class="c-table c-table--fixed">
    <tr>
      <th class="u-percent50">th1</th>
      <th>th2</th>
      <th>th3</th>
    </tr>
    <tr>
      <td>td1</td>
      <td>td2</td>
      <td>td3</td>
    </tr>
  </table>
</div>
```
*/
.c-table {
  width: 100%;
  th,
  td {
    padding: 1em;
  }
}

/**
 * セルを均等にします。`width`を1つだけ指定した場合は、残りのセルが均等になります。
 */
.c-table--fixed {
  table-layout: fixed;
}


.c-form--tableA{
  width: 100%;
  background: #fff;
  border-radius: 10px;
  table-layout: fixed;
  tr{
    width: 970px;
    overflow: hidden;
    th,td{
      text-align: left;
      @include sp{
        display: block;
        width: 100%;
      }
    }
    &:last-child{
      th{
        @include pc{
          border-bottom: none;
        }
      }
      td{
        border-bottom: none;
      }
    }
    th{
      padding: 10px 20px 10px 20px;
      font-size: 1.5rem;
      line-height: 1.8;
      border-bottom: 1px solid #d2d2d2;
      max-height: 100%;
      @include pc{
        min-width: 225px;
      }
      @include sp{
        padding: 15px;
        margin: 0 auto;
        width: 100%;
      }
    }
    td{
      padding: 13px 0;
      width: calc(744/970*100%);
      font-size: 1.5rem;
      border-bottom: 1px solid #d2d2d2;
      @include pc{
        border-left: 1px solid #d2d2d2;
      }
      @include sp{
        padding: 15px;
        margin: 0 auto;
        width: 100%;
      }
    }
  }
}