.table_base {
  box-shadow: 0 1px 1px #ebc2c2;
  border-collapse: separate;
  border-spacing: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ebc2c2;
  margin-bottom: 20px;
}
.table_base caption {
  margin: 0;
  padding-bottom: 0.2em;
  text-align: left;
  font-weight: bold;
}
.table_base caption:before {
  content: "☆";
  color: #ffa060;
}
.table_base th,
.table_base td {
  padding: 10px 1em;
  background: #faf2f3;
  line-height: 1.4;
  border-bottom: 1px dashed #ebc2c2;
}

.table_base th {
  color: #ffffff;
  background-color: #ffeabd;
  background-image: url(../img/table_bg.png);
}

/* -----------------------
  左上角丸　最初の行の最初のセル
----------------------- */
.table_base tr:first-child th:first-child,
.table_base tr:first-child td:first-child {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -o-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;
}
/* -----------------------
  右上角丸　最初の行の最後のセル
----------------------- */
.table_base tr:first-child th:last-child,
.table_base tr:first-child td:last-child {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -o-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;
}
/* -----------------------
  左下角丸　最後の行の最初のセル
----------------------- */
.table_base tr:last-child th:first-child,
.table_base tr:last-child td:first-child {
  border: none;
  -webkit-border-radius: 0 0 0 5px;
  -moz-border-radius: 0 0 0 5px;
  -o-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}
/* -----------------------
  右下角丸　最後の行の最後のセル
----------------------- */
.table_base tr:last-child th:last-child,
.table_base tr:last-child td:last-child {
  border: none;
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  -o-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
}
/* --------------------------------------------
  thaed,tbodyを使う場合の設定
-------------------------------------------- */
.table_base thead th {
  background: #ffeabd;
}
.table_base thead + tbody th {
  background: #ffeabd;
}
.table_base tbody th {
  text-align: left;
} /*IE*/
/* -----------------------
  左上角丸 thead内　最初の行の最初のセル
----------------------- */
.table_base thead tr:first-child th:first-child,
.table_base thead tr:first-child td:first-child {
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -o-border-radius: 5px 0 0 0;
  border-radius: 5px 0 0 0;
}
/* -----------------------
  右上角丸 thead内　最初の行の最後のセル
----------------------- */
.table_base thead tr:first-child th:last-child,
.table_base thead tr:first-child td:last-child {
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -o-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;
}
/* -----------------------
  角丸なし　thaedの後のtbody 最初の行の最初のセル
  角丸なし　thaedの後のtbody 最初の行の最後のセル
----------------------- */
.table_base thead + tbody tr:first-child th:first-child,
.table_base thead + tbody tr:first-child td:first-child,
.table_base thead + tbody tr:first-child th:last-child,
.table_base thead + tbody tr:first-child td:last-child {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}
/* -----------------------
  左下角丸　thaedの後のtbody 最後の行の最初のセル
----------------------- */
.table_base thead + tbody tr:last-child th:first-child,
.table_base thead + tbody tr:last-child td:first-child {
  -webkit-border-radius: 0 0 0 5px;
  -moz-border-radius: 0 0 0 5px;
  -o-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
}
/* -----------------------
  右下角丸　thaedの後のtbody 最後の行の最後のセル
----------------------- */
.table_base thead + tbody tr:last-child th:last-child,
.table_base thead + tbody tr:last-child td:last-child {
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  -o-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
}

/* スマホ向けのレイアウトの指定：～420px */
@media only screen and (max-width: 420px) {
  .table_base {
    width: 100%;
  }

  tr {
    display: block;
  }
  th,
  td {
    display: list-item;
    border: none;
    list-style: none;
    width: 100% !important;
  }

  .table_base tr:last-child th:first-child,
  .table_base tr:last-child td:first-child {
    border: none;
    -webkit-border-radius: 0 0 0 0;
    -moz-border-radius: 0 0 0 0;
    -o-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
  }
}