/* =========================================================
 * common.css（整頓版・全文）
 * 役割：本文（.page-content）だけの最終上書き
 * - Gutenberg（ブロックエディタ）出力の文章見た目を安定させる
 * - 見出し / 段落 / 強調 / 本文リスト をここで統一
 *
 * 入れないもの：
 * - レイアウト骨格（container/hero/breadcrumb など）→ layout.css
 * - UI部品（child-page-links / tel-box / toc / table装飾 等）→ components.css
 * ======================================================= */


/* ======================================================
   Block Editor Headings adjustment (H2–H6)
   - 本文(justify)から分離
====================================================== */
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6{
  text-align: left;
  text-justify: auto;
  line-height: 1.4;
  color: #1f3558; /* 基本ネイビー */
}

/* ----------------------
   H2：章見出し（最重要）
---------------------- */
.page-content h2{
  font-size: 1.75rem; /* 約28px */
  margin: 56px 0 20px;
  padding-left: 14px;
  border-left: 5px solid #2b6cb0;
}

/* ----------------------
   H3：小見出し
---------------------- */
.page-content h3{
  font-size: 1.4rem; /* 約22px */
  margin: 36px 0 16px;
  padding-left: 10px;
  border-left: 3px solid #7aa6d8;
}

/* ----------------------
   H4：補助見出し
---------------------- */
.page-content h4{
  font-size: 1.15rem; /* 約18px */
  margin: 24px 0 12px;
  color: #333;
}

/* ----------------------
   H5：注釈レベル
---------------------- */
.page-content h5{
  font-size: 1rem; /* 約16px */
  margin: 18px 0 10px;
  color: #555;
}

/* ----------------------
   H6：最下位（注意書き等）
---------------------- */
.page-content h6{
  font-size: 0.9rem; /* 約14px */
  margin: 14px 0 8px;
  color: #777;
}


/* ======================================================
   段落（p）
====================================================== */
.page-content p{
  margin: 0 0 1.0em; /* 下だけ余白（日本語本文に自然） */
  line-height: 1.7;
}

/* 連続する段落は詰める（1段落目で余白管理） */
.page-content p + p{
  margin-top: 0;
}

/* 見出し直後の本文に少し余白 */
.page-content h2 + p,
.page-content h3 + p,
.page-content h4 + p{
  margin-top: 0.6em;
}


/* ======================================================
   強調（strong / b）
====================================================== */
.page-content strong,
.page-content b{
  font-weight: var(--fw-bold); /* 700 */
}


/* ======================================================
   本文リスト（ul / ol）
   ※ Reset で list-style:none にしているため、本文だけ復活
====================================================== */
.page-content ul{
  list-style: disc;          /* ・ */
  margin: 0 0 1.2em 1.5em;
  padding: 0;
}

.page-content ol{
  list-style: decimal;       /* 1. 2. 3. */
  margin: 0 0 1.2em 1.5em;
  padding: 0;
}

.page-content li{
  margin: 0.4em 0;
  line-height: 1.7;
}

/* =========================================================
   例外：右サイド TOC（tch-toc）はリストマーカーを表示しない
   ※ TOC 自体のデザインは components.css 側
========================================================= */
.page-content .tch-toc ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-content .tch-toc li{
  margin: 0;
}


/* =========================================================
 * 本文起因の横スクロール防止（本文のみ）
 * - 1100px コンテナ制御は layout.css の責務
 * - ここでは「折り返し」「はみ出し抑制」だけ行う
====================================================== */

/* 本文の長いURLや英数字の折り返しを強化 */
.page-content{
  overflow-wrap: anywhere; /* break-word より強い */
  word-break: normal;
}

/* 画像・埋め込み・iframe */
.page-content img,
.page-content iframe,
.page-content video,
.page-content embed,
.page-content object{
  max-width: 100%;
  height: auto;
}

/* table / pre は中だけスクロールさせる（本文の横はみ出し対策） */
.page-content table,
.page-content pre{
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* インライン code をブロック化しない（文章が崩れるため） */
.page-content code{
  overflow-wrap: anywhere;
}