/*
 * コラム本文 (#postBody) のブロックの見た目。
 * 移行前の second.css は h2 と段落しか組んでいないので、WordPress で入稿する表と h3 をここで足す。
 */

.column-point {
  margin: 24px 0;
  padding: 16px 20px;
  background: #fff;
  border-left: 4px solid #154b2e;
  line-height: 1.9;
}
.column-point > :first-child {
  margin-top: 0;
}
.column-point > :last-child {
  margin-bottom: 0;
}

.toc {
  margin: 20px 0 28px;
  padding: 14px 18px;
  background: #f6f4ee;
  border: 1px solid #d8d3c7;
  border-radius: 8px;
  font-size: 14px;
}
.toc__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 15px;
  color: #154b2d;
}
#postBody .toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#postBody .toc__item {
  margin: 4px 0;
  padding-left: 0;
  text-indent: 0;
  line-height: 1.6;
}
#postBody .toc__item::before {
  content: none;
  counter-increment: none;
}
.toc__item a {
  color: #1558b0;
  text-decoration: underline;
}
.toc__item a:hover {
  text-decoration: none;
}

#postBody h2 {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  position: relative;
  padding-bottom: 15px;
  margin-top: 40px;
}
#postBody h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #154b2e 10%, #d5d5d5 10%);
  position: absolute;
  bottom: 0;
  left: 0;
}
#postBody h2 + p {
  margin-top: 15px;
}

/* ===== 表 ===== */

/* 幅は本文いっぱい。列が多くて入りきらないときは横にスクロールさせる */
#postBody .wp-block-table {
  margin: 24px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#postBody .wp-block-table table {
  width: 100%;
  table-layout: auto;            /* ブロックの「固定幅のセル」(has-fixed-layout) より中身に合わせる */
  border-collapse: collapse;
  border: 1px solid #d8d3c7;
}
#postBody .wp-block-table th,
#postBody .wp-block-table td {
  min-width: 7em;                /* 狭い画面で 1 文字ずつ折り返さず、スクロールにする */
  padding: 10px 12px;
  border: 1px solid #d8d3c7;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

/*
 * 見出しの行。ブロックの「ヘッダーセクション」(thead) を使ったときと、
 * 使わずに 1 行目を見出しにしているとき (今の記事はこちら) の両方に付ける。
 */
#postBody .wp-block-table thead th,
#postBody .wp-block-table thead td,
#postBody .wp-block-table table:not(:has(thead)) tr:first-child > * {
  background: #f6f4ee;
  color: #154b2d;
  font-weight: 700;
}

/* 表のタイトル。段落ブロックのスタイル「表のタイトル」(kanto-column-faq.php で登録) */
#postBody .is-style-table-title {
  margin-top: 32px;
  font-weight: 700;
  color: #154b2d;
}
#postBody .is-style-table-title + .wp-block-table {
  margin-top: 8px;
}

/* 表の補足。表ブロック標準のキャプション (表の下) を使う */
#postBody .wp-block-table figcaption {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #666;                   /* 白地とのコントラスト比 約 5.7:1 (WCAG AA) */
  text-align: left;
}

/* ===== h3 ===== */

/* h2 (22px) より小さく、本文 (16px) より大きく */
#postBody h3 {
  margin-top: 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #154b2d;
}
#postBody h3 + p {
  margin-top: 12px;
}