@charset "utf-8";
/* ========================================
■ 料金（PRICE） 「.plan-table」 「price.html」用
  table 書籍 P.190～196 参照
=========================================== */
.plan-table {
  overflow-x: auto; /** ボックスに入りきらない場合だけスクロール表示 */
  padding: 0 20px;
  margin-bottom: 80px;
}
.plan-table .table {
  /* ↓2行「width: 900px;」と「table-layout: fixed;」で、テーブルの横幅と列幅を固定 */
  width: 900px;
  table-layout: fixed;
  /** ↓セル間のラインを重ねて表示（細く表示） カタカナ読み【コラプス】 */
  border-collapse: collapse;
  margin: 0 auto;
}
.plan-table .table th,
.plan-table .table td {
  border: 1px solid #707070;
  padding: 20px;
}
/* ↓ヘッダーのセルに背景色「#fafafa」を設定 */
.plan-table .table thead th {
  background-color: #fafafa;
  font-weight: 500;
}
/* ↓ヘッダーの1番目のセルに対して */
.plan-table .table thead th:first-child {
  width: 300px; /** 横幅を300px */
  background-color: #fff;
  border-left: none; /** 左側の線は引かない */
  border-top: none; /** 上側の線は引かない */
}
/* ↓ヘッダーの2番目以降のセルに対して、横幅200px */
.plan-table .table thead th:nth-child(n + 2) {
  width: 200px;
}
/* ↓「tbody」の「th」（左側のヘッド）に対して */
.plan-table .table tbody th {
  background-color: #fafafa;
  font-weight: 500;
  text-align: left;
}
/* ↓「tbody」の「td」に対して */
.plan-table .table tbody td {
  font-size: 18px;
  text-align: center;
}
.plan-table .table tbody td .title {
  display: block;
  font-size: 14px;
}
.plan-table .table tbody td .price {
  font-size: 24;
  font-weight: 500;
}
.plan-table .table tbody td .tax {
  font-size: 12px;
}
.plan-table .table tbody td .note {
  font-size: 12px;
}

/* =========================================
■ スマートフォン
============================================*/
@media screen and (max-width: 767px) {
  /* ----------------------------------
  料金（スマホ）
  -------------------------------------*/
  .plan-table {
    margin-bottom: 40px; /** PC は、80px */
  }
  .plan-table .table {
    width: 600px; /** PC は、900px */
  }
  .plan-table .table th,
  .plan-table .table td {
    font-size: 14px; /** PC は、18px(tdのみ) */
    padding: 10px; /** PC は、20px */
  }
  .plan-table .table thead th:first-child {
    width: 150px; /** PC は、300px */
  }
  .plan-table .table thead th:nth-child(n + 2) {
    width: 150px;
  }
  .plan-table .table tbody td {
    font-size: 14px;
  }
  .plan-table .table tbody td .price {
    font-size: 14px;
  }
}