/*==============================================
  U5 Software - ブログ本文のタイポグラフィ

  対象は記事ページの本文( .blog-content.post-body )のみ。
  Aboutページなど他の .blog-content には影響させない。

  custom-style.css の以下の全体指定が、箇条書き中心の記事に
  合っていなかったため、本文だけ上書きする。
    p, li { font-size: 1rem; line-height: 1.7; margin-top: 1rem; }
    h1 { font-size: 2.2rem } / h2 { font-size: 1.8rem }
  - li ごとに 1rem の上マージンが付き、箇条書きが間延びする
  - 見出しに下マージンが無く、直後の本文と近すぎる
  - h2(1.8rem) と h3(Bootstrap既定 1.75rem) がほぼ同じ大きさで
    階層が判別できない
===============================================*/

/*----------------------------------------------
  1. 本文の基本
----------------------------------------------*/

.blog-content.post-body {
  /* 900px は日本語には長すぎる（1行50字超）ので詰める */
  max-width: 760px;
  font-size: 1.0625rem;
  line-height: 1.95;
  color: rgba(0, 0, 0, 0.79);
  overflow-wrap: break-word;
}

.blog-content.post-body > *:first-child {
  margin-top: 0;
}

/*----------------------------------------------
  2. 見出し
----------------------------------------------*/

.blog-content.post-body h1,
.blog-content.post-body h2,
.blog-content.post-body h3,
.blog-content.post-body h4,
.blog-content.post-body h5,
.blog-content.post-body h6 {
  line-height: 1.5;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
}

/* 上は大きく空けて区切りを作り、下は詰めて内容と結び付ける */
.blog-content.post-body h1 {
  font-size: 1.9rem;
  margin: 3.4rem 0 1rem;
}

.blog-content.post-body h2 {
  font-size: 1.5rem;
  margin: 3rem 0 0.9rem;
}

.blog-content.post-body h3 {
  font-size: 1.2rem;
  margin: 2.4rem 0 0.7rem;
}

.blog-content.post-body h4 {
  font-size: 1.075rem;
  margin: 2rem 0 0.6rem;
}

.blog-content.post-body h5,
.blog-content.post-body h6 {
  font-size: 1rem;
  margin: 1.8rem 0 0.5rem;
}

/*----------------------------------------------
  3. 段落・リスト
----------------------------------------------*/

.blog-content.post-body p {
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 1.6em;
}

.blog-content.post-body ul,
.blog-content.post-body ol {
  margin: 0 0 1.6em;
  padding-left: 1.5em;
}

/* 項目ごとの上マージンをやめ、項目間だけを空ける */
.blog-content.post-body li {
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 0.7em;
}

.blog-content.post-body li:last-child {
  margin-bottom: 0;
}

.blog-content.post-body li > ul,
.blog-content.post-body li > ol {
  margin: 0.7em 0 0;
}

/* 項目間に空行がある(loose)リストでは li の中が <p> になる。
   段落と同じ 1.6em の下マージンでは間延びするため詰める */
.blog-content.post-body li > p {
  margin-bottom: 0.7em;
}

.blog-content.post-body li > p:last-child {
  margin-bottom: 0;
}

.blog-content.post-body li::marker {
  color: rgba(124, 118, 187, 0.85);
}

/* 見出し前の余白調整用に本文へ直接書かれている <br> は、
   マージンで間隔を取るようになったため無効化する */
.blog-content.post-body > br {
  display: none;
}

/*----------------------------------------------
  4. コード
----------------------------------------------*/

.blog-content.post-body pre {
  margin: 0 0 1.8em;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.blog-content.post-body :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.925em;
  background-color: rgba(39, 163, 255, 0.12);
}

/*----------------------------------------------
  5. 引用・区切り線・画像
----------------------------------------------*/

.blog-content.post-body blockquote {
  margin: 0 0 1.8em;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 3px solid rgba(124, 118, 187, 0.45);
  color: rgba(0, 0, 0, 0.62);
}

.blog-content.post-body blockquote > :last-child {
  margin-bottom: 0;
}

.blog-content.post-body hr {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  opacity: 1;
}

.blog-content.post-body img {
  max-width: 100%;
  height: auto;
}

/*----------------------------------------------
  6. 表
----------------------------------------------*/

.blog-content.post-body table {
  display: block;
  width: 100%;
  margin: 0 0 1.8em;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95em;
  line-height: 1.7;
}

.blog-content.post-body th,
.blog-content.post-body td {
  padding: 0.5em 0.8em;
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-align: left;
  vertical-align: top;
}

.blog-content.post-body thead th {
  background-color: rgba(39, 163, 255, 0.1);
  white-space: nowrap;
}

/*----------------------------------------------
  7. 記事タイトル
----------------------------------------------*/

/*
  display-3 は最大 4.5rem まで拡大するため、日本語の長いタイトルが
  数行に折り返して読みにくくなる。上限を抑える。
*/
.section.blog-single .display-3 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.45;
}

/*----------------------------------------------
  8. アイキャッチ画像
----------------------------------------------*/

/* 画像と本文が接していたため、下に余白を入れて切り分ける */
.section.blog-single .post-thumb {
  margin-bottom: 3rem;
}

/*----------------------------------------------
  9. 狭い画面
----------------------------------------------*/

@media (max-width: 575.98px) {
  .section.blog-single .post-thumb {
    margin-bottom: 2rem;
  }

  .blog-content.post-body {
    font-size: 1rem;
    line-height: 1.85;
  }

  .blog-content.post-body h1 {
    font-size: 1.6rem;
    margin-top: 2.6rem;
  }

  .blog-content.post-body h2 {
    font-size: 1.35rem;
    margin-top: 2.4rem;
  }

  .blog-content.post-body h3 {
    font-size: 1.125rem;
    margin-top: 2rem;
  }

  .blog-content.post-body ul,
  .blog-content.post-body ol {
    padding-left: 1.3em;
  }
}