/* ==========================================================================
   jp-type.css — 日本語組版レイヤー
   既存デザインには手を入れず、改行・約物・字間だけを整える上書き専用CSS。
   読み込みは各ページの <style> より後（</head> 直前）に置くこと。
   ========================================================================== */

/* --- 1. 基本の禁則処理 -----------------------------------------------------
   line-break: strict で「、。」）ー」の行頭禁則と小書き仮名（ぁぃっゃ）の
   行頭禁則を有効化する。ブラウザ既定の auto は禁則が緩い。            */
html {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;   /* 長いURL等がはみ出すのだけは防ぐ */
}

/* --- 2. 約物のツメと和欧間アキ ---------------------------------------------
   palt = プロポーショナルメトリクス。「」（）、。 の間延びを詰める。
   詰めた分を letter-spacing でわずかに戻して読みやすさを保つ。
   text-autospace は和文と欧文・数字の間に四分アキを自動挿入する。      */
body {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
  text-autospace: normal;
}

/* --- 3. 見出し：文節で折る -------------------------------------------------
   word-break: auto-phrase は日本語を文節単位で折り返す。
   「不動産」が「不動 / 産」に割れる事故を防ぐ。見出しは字数が短く
   ラグ（右端のガタつき）が目立たないので balance と併用する。         */
.article-title,
.article-body h2,
.article-body h3,
.section-title,
.card-title,
.related-title,
h1, h2, h3, h4 {
  word-break: auto-phrase;
  text-wrap: balance;
  letter-spacing: 0.01em;
}

/* --- 4. 本文：孤立行を作らない ---------------------------------------------
   text-wrap: pretty だけでは日本語の「ぶら下がり」はほぼ解消しない
   （Chrome の pretty は CJK への効きが弱い）。実測すると 390px 幅で
   最終行が3文字以下になる段落が5件残った。
   word-break: auto-phrase（文節での折り返し）を併用すると0件になり、
   行末のガタつきは1行あたり平均+0.5文字しか増えなかったため併用する。
   副次効果として「不動産」が「不動 / 産」に割れる事故も防げる。   */
.article-body p,
.article-body li,
.img-caption,
.lead,
p {
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* リストは1〜3行と短いので balance が効く（行数を均して1文字残りを防ぐ） */
.article-body li {
  text-wrap: balance;
}

/* 短いテキスト塊は文節折りが有効に働く（ラグが出ない長さのため） */
.img-caption,
.pull-quote,
.info-box-title,
.tip-box-title,
.article-category,
.breadcrumb,
.btn,
.header-cta-btn,
.card-title,
.toc a {
  word-break: auto-phrase;
}

/* --- 5. リスト：折り返しをマーカーに揃える ---------------------------------- */
.article-body ul,
.article-body ol {
  padding-left: 1.4em;
}
.article-body li {
  padding-left: 0.1em;
  line-height: 1.85;
}
.article-body li::marker {
  color: var(--green, #2a5c45);
}

/* --- 6. 引用・囲み ---------------------------------------------------------- */
.pull-quote {
  text-wrap: balance;
  line-height: 1.75;
}

/* ==========================================================================
   モバイル（〜600px）
   画面幅が狭いほど1行あたりの字数が減り、折り返しの粗が目立つ。
   ここでは「行長を1文字でも稼ぐ」「行間を詰めすぎない」の2点で整える。
   ========================================================================== */
@media (max-width: 600px) {

  /* 左右パディングを削って1行の字数を稼ぐ（16px→14px で約1字分） */
  .article-wrap {
    padding: 28px 14px;
  }

  body {
    font-size: 16.5px;
    line-height: 1.85;
    letter-spacing: 0.01em;   /* 狭い画面では字間を詰めて字数を確保 */
  }

  .article-body p {
    margin-bottom: 1.5em;
    line-height: 1.85;
  }

  /* タイトル：狭い画面では balance より文節折り優先。
     balance は行数が多いと効きが鈍く、かえって不揃いになるため。 */
  .article-title {
    font-size: 21px;
    line-height: 1.55;
    text-wrap: pretty;
    word-break: auto-phrase;
  }

  .article-body h2 {
    font-size: 19px;
    line-height: 1.5;
    margin: 40px 0 14px;
    text-wrap: pretty;
  }

  .article-body h3 {
    font-size: 17px;
    line-height: 1.5;
    text-wrap: pretty;
  }

  /* 引用は本文より1段小さく。18pxのままだと2〜3文字で折り返す */
  .pull-quote {
    font-size: 16px;
    line-height: 1.7;
    padding: 16px 18px;
    text-wrap: pretty;
  }

  /* 囲みボックスの内側パディングも詰めて行長を確保 */
  .info-box,
  .tip-box {
    padding: 18px 16px;
  }

  .article-body ul,
  .article-body ol {
    padding-left: 1.25em;
  }

  /* 画像キャプションは中央揃えだと折り返しが不格好になるので左揃え */
  .img-caption {
    text-align: left;
    font-size: 12.5px;
    line-height: 1.7;
  }

  /* メタ情報の折り返しを詰める */
  .article-meta {
    gap: 12px;
    row-gap: 8px;
  }
}

/* --- 極小画面（〜360px） --------------------------------------------------- */
@media (max-width: 360px) {
  .article-wrap { padding: 24px 12px; }
  body { font-size: 16px; letter-spacing: 0; }
  .article-title { font-size: 20px; }
}

/* --- 非対応ブラウザについて -------------------------------------------------
   word-break: auto-phrase / text-wrap: pretty は未対応ブラウザでは
   単に無視され、従来どおりの折り返しになる（レイアウト崩れは起きない）。
   Safari は auto-phrase 未対応のため、上の line-break: strict と
   palt による禁則・約物調整が効く形になる。                        */