/*
 * 記事本文（article-base.twig の .article-body。お知らせ詳細・輸入住宅コラム詳細）。
 * Twind のプリフライトで見出しの大きさ・リストの記号・余白が消えるため、本文の装飾だけここで補う。
 * 値は mockup 詳細ページのクラスを px に展開したもの（p: works-001 / h2: works-001 / h3・h4・表: reason-details / 引用: customer-voice-01 / ボタン: spec-details）。
 * p・見出し・リストは直下の子（>）に限り、リンクは class の無い a だけにする。
 * 本文にカスタム HTML で mockup のマークアップを貼ったとき、その中の Twind クラスを上書きしないため。
 * functions.php の register_custom_scripts で is_singular( post / news ) のときだけ読み込む。
 */
.article-body{font-size:12px;line-height:1.8}

/*
 * 縦の余白。後ろのルールほど優先する並びにしてある（並べ替えない）。
 * figure 系は :where() で詳細度を (0,1,0) に落とし、直後の見出しの margin-top（h2 / h3）が勝つようにする。
 */
.article-body>*+*{margin-top:20px}
.article-body>:where(figure,.wp-block-image,.wp-block-table,.wp-block-embed),
.article-body>:where(figure,.wp-block-image,.wp-block-table,.wp-block-embed)+*{margin-top:32px}
.article-body>h2{margin-top:56px}
.article-body>h2+*{margin-top:32px}
.article-body>h3{margin-top:40px}
.article-body>h3+*{margin-top:16px}
.article-body>h4{margin-top:32px}
.article-body>h4+*{margin-top:8px}
.article-body>:first-child{margin-top:0}

.article-body>h2{font-size:16.5px;line-height:1.625;letter-spacing:.15em}
.article-body>h2::after{content:"";display:block;width:40px;height:1px;margin-top:20px;background:#6C7075}
.article-body>h2.has-text-align-center::after{margin-left:auto;margin-right:auto}
.article-body>h3{padding-bottom:12px;border-bottom:1px solid #D8D5CF;font-size:15px;line-height:1.625;letter-spacing:.15em}
.article-body>h4{font-size:13px;line-height:1.8;letter-spacing:.15em;color:#043d78}
.article-body>h2,.article-body>h3{scroll-margin-top:96px}
.article-body a:not([class]){color:#043d78;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:opacity .5s}
.article-body a:not([class]):hover{opacity:.7}
.article-body strong,.article-body b{font-weight:700}
.article-body>ul,.article-body>ol{padding-left:1.5em}
.article-body>ul{list-style:disc}.article-body>ol{list-style:decimal}
.article-body>:where(ul,ol) li+li,.article-body>:where(ul,ol) li>ul,.article-body>:where(ul,ol) li>ol{margin-top:8px}
/* 入れ子のリスト（プリフライトで記号と字下げが消えるため） */
.article-body>:where(ul,ol) li>ul,.article-body>:where(ul,ol) li>ol{padding-left:1.5em}
.article-body>:where(ul,ol) li>ul{list-style:circle}.article-body>:where(ul,ol) li>ol{list-style:decimal}
.article-body>:where(ul,ol) li::marker{color:#6C7075}
.article-body>blockquote,.article-body .wp-block-quote{border-left:2px solid #043d78;padding-left:24px;font-size:13px;letter-spacing:.15em}
.article-body .wp-block-quote p+p{margin-top:12px}
.article-body blockquote cite{display:block;margin-top:12px;font-size:11px;font-style:normal;color:#6C7075}
.article-body img{max-width:100%;height:auto}
/* サイズ指定・左右寄せ・中央寄せをしていないブロック画像は本文幅いっぱいに出す */
.article-body>.wp-block-image:not(.is-resized):not(.alignleft):not(.alignright):not(.aligncenter) img{width:100%}
/* 中央寄せ。本来は global-styles（functions.php で外している）の layout が margin:auto を付けるため、ここで補う */
.article-body>.aligncenter{margin-left:auto;margin-right:auto}
.article-body figcaption{margin-top:12px;font-size:11px;line-height:1.625;color:#6C7075;text-align:left}
.article-body .wp-block-table{overflow-x:auto}
.article-body table{width:100%;border-collapse:collapse;border-top:1px solid #D8D5CF}
.article-body th,.article-body td{border:0;border-bottom:1px solid #D8D5CF;padding:12px 12px 12px 0;text-align:left;vertical-align:top}
.article-body th{font-weight:400;color:#043d78}
.article-body thead th{border-bottom-color:#6C7075}
/* wp-block-library の thead / tfoot の 3px 罫を打ち消す（罫は th / td の border-bottom だけで引く） */
.article-body .wp-block-table thead,.article-body .wp-block-table tfoot{border:0}
.article-body hr,.article-body .wp-block-separator{border:0;border-top:1px solid #D8D5CF;margin:48px 0}
.article-body .wp-block-button__link{display:inline-flex;background:none;border-radius:0;border-bottom:1px solid #043d78;color:#043d78;padding:12px 0;font-size:12px;letter-spacing:.15em;text-decoration:none}
.article-body .wp-block-embed.is-type-video iframe{width:100%;height:auto;aspect-ratio:16/9}
.article-body .wp-block-columns{gap:24px}
@media (min-width:1024px){
  .article-body{font-size:13.5px}

  /* 縦の余白（並びは上と同じ） */
  .article-body>*+*{margin-top:24px}
  .article-body>:where(figure,.wp-block-image,.wp-block-table,.wp-block-embed),
  .article-body>:where(figure,.wp-block-image,.wp-block-table,.wp-block-embed)+*{margin-top:40px}
  .article-body>h2{margin-top:80px}
  .article-body>h2+*{margin-top:40px}
  .article-body>h3{margin-top:56px}
  .article-body>h3+*{margin-top:20px}
  .article-body>h4{margin-top:32px}
  .article-body>h4+*{margin-top:8px}
  .article-body>:first-child{margin-top:0}

  .article-body>h2{font-size:23.5px}
  .article-body>h2::after{margin-top:24px}
  .article-body>h3{font-size:19px}
  .article-body>h4{font-size:13.5px}
  .article-body>blockquote,.article-body .wp-block-quote{padding-left:40px;font-size:15px}
  .article-body blockquote cite{font-size:12.5px}
  .article-body th,.article-body td{padding:16px 24px 16px 0}
  .article-body hr,.article-body .wp-block-separator{margin:64px 0}
  .article-body .wp-block-button__link{font-size:13.5px}
  .article-body .wp-block-columns{gap:40px}
}