/* スマホ表示の文字組み調整（移行時に追加。幅767px以下だけに効く）
   - 見出し：行末に1〜2文字だけ残る改行を防ぎ、行の長さを揃える
   - 本文：言葉の途中で改行しにくくする（対応ブラウザのみ。非対応でも表示は従来どおり）
   - 記事下の「前の記事へ／次の記事へ」：縦に並べて読みやすく */
@media (max-width: 767px) {
  #container :is(h1, h2, h3, h4, .title, .title1, .title2, .title3, .sub, .main, .name, .tokuten) {
    text-wrap: balance;
    word-break: auto-phrase;
    line-break: strict;
  }
  #container section h2 { letter-spacing: 0.04em; }

  #container :is(p, li, dd) {
    text-wrap: pretty;
    word-break: auto-phrase;
    line-break: strict;
  }

  /* 表は狭い画面で必ず画面幅に収まるように（言葉単位の改行は表では使わない） */
  #container table :is(p, li, th, td) { word-break: normal; text-wrap: wrap; }
  #container table th, #container table td { padding: 10px 8px; }

  html body #container .container #blog .pageing {
    display: block;
    margin-top: 40px;
    border-top: 1px solid #dde3ee;
    padding-top: 16px;
  }
  html body #container .container #blog .pageing .left,
  html body #container .container #blog .pageing .right {
    width: 100%;
    line-height: 1.7;
  }
  html body #container .container #blog .pageing .right { margin-top: 16px; text-align: right; }
  html body #container .container #blog .pageing .right:empty,
  html body #container .container #blog .pageing .right:has(> br:only-child) { display: none; }

  /* 記事・一覧の上の余白（100px）を詰める */
  #contents > article > .container,
  #category > article > .container { padding-top: 40px; }

  /* 記事内のフォーム・動画を画面幅に収める */
  #container :is(input, textarea, select) { max-width: 100%; box-sizing: border-box; }
  #container iframe { max-width: 100%; }
  #container iframe[src*="youtube.com"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}