/* ==================================================
   助成金ブログ後編 共通装飾
   HTMLとは別ファイルで使用してください
================================================== */

/* 枠付きリスト */
.border-box {
  margin: 22px 0;
  padding: 16px 22px;
  border: 1px solid #cfd9e2;
  border-radius: 6px;
  background: #f8fafc;
}

.border-box ul,
.border-box ol {
  margin: 0;
  padding-left: 1.5em;
}

.border-box li {
  margin: 7px 0;
  line-height: 1.7;
}

/* 注意・重要ポイント */
.blog-info-box {
  margin: 24px 0;
  padding: 18px 20px;
  border-left: 5px solid #176ba0;
  border-radius: 4px;
  background: #eef7fc;
}

.blog-info-box p {
  margin: 0;
  line-height: 1.8;
}

.blog-info-box.center {
  text-align: center;
}

/* 強調 */
.normal2 {
  font-weight: 700;
}

.marker {
  background: linear-gradient(transparent 60%, #ffd978 60%);
}

.marker-yellow {
  background: linear-gradient(transparent 60%, #fff19a 60%);
}

/* 図キャプション */
.figure-caption {
  margin: 8px 0 24px;
  color: #666;
  font-size: 0.92em;
  text-align: center;
}

/* ==================================================
   表 共通
================================================== */

.table-scroll {
  width: 100%;
  margin: 20px 0 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

.table-scroll-note {
  display: none;
  margin: 8px 0 6px;
  color: #666;
  font-size: 13px;
}

.custom-border-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 15px;
  line-height: 1.65;
  border: 1px solid #cfd9e2;
  border-radius: 8px;
  overflow: hidden;
}

.custom-border-table th,
.custom-border-table td {
  padding: 15px 14px;
  border-right: 1px solid #d8e0e7;
  border-bottom: 1px solid #d8e0e7;
  vertical-align: middle;
}

.custom-border-table th:last-child,
.custom-border-table td:last-child {
  border-right: none;
}

.custom-border-table tbody tr:last-child td {
  border-bottom: none;
}

.custom-border-table thead th {
  background: #176ba0;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.45;
}

.custom-border-table tbody tr:nth-child(even) {
  background: #f4f8fb;
}

.custom-border-table tbody tr:hover {
  background: #edf6fc;
}

.custom-border-table td {
  text-align: left;
}

.custom-border-table a {
  color: #176ba0;
  font-weight: 700;
  text-decoration: underline;
}

.custom-border-table a:hover {
  text-decoration: none;
}

/* 金額・補助率を目立たせる */
.table-emphasis {
  color: #d94b30;
  font-size: 1.08em;
  font-weight: 700;
  white-space: nowrap;
}

/* ==================================================
   4制度比較表
================================================== */

.subsidy-table {
  min-width: 1050px;
}

.subsidy-table th:nth-child(1),
.subsidy-table td:nth-child(1) {
  width: 21%;
  min-width: 210px;
}

.subsidy-table th:nth-child(2),
.subsidy-table td:nth-child(2) {
  width: 22%;
  min-width: 220px;
}

.subsidy-table th:nth-child(3),
.subsidy-table td:nth-child(3) {
  width: 18%;
  min-width: 185px;
}

.subsidy-table th:nth-child(4),
.subsidy-table td:nth-child(4) {
  width: 20%;
  min-width: 210px;
}

.subsidy-table th:nth-child(5),
.subsidy-table td:nth-child(5) {
  width: 19%;
  min-width: 195px;
}

.subsidy-table tbody td:first-child {
  background: #f7fafc;
  font-weight: 700;
}

/* ==================================================
   補助限度額表
================================================== */

.table-scroll-small {
  max-width: 760px;
}

.limit-table {
  min-width: 560px;
}

.limit-table th:first-child,
.limit-table td:first-child {
  width: 68%;
}

.limit-table th:last-child,
.limit-table td:last-child {
  width: 32%;
  text-align: center;
}

.limit-table tbody td:last-child {
  font-size: 1.03em;
}

/* ==================================================
   スマートフォン
================================================== */

@media screen and (max-width: 768px) {
  .table-scroll-note {
    display: block;
  }

  .custom-border-table {
    font-size: 14px;
  }

  .custom-border-table th,
  .custom-border-table td {
    padding: 12px 10px;
  }

  .subsidy-table {
    min-width: 920px;
  }

  .table-scroll-small {
    max-width: 100%;
  }

  .limit-table {
    min-width: 520px;
  }

  .blog-info-box.center {
    text-align: left;
  }
}