/* ===========================================================
   記事「読み物」レイヤー (editorial)

   .info-box はお問い合わせフォーム等と共有のため、ここでの調整は
   すべて .article-reading スコープに限定し、他画面へは影響させない。
   記事テンプレート側(.info-box に article-reading を付与)で有効化する。

   主目的:
     - 本文を濃いインクにして可読性を上げる(灰色固定の解消)
     - 読書幅・行間・見出し階層を整える
     - 画面が大きいときは横幅を段階的に広げて読みやすくする
   =========================================================== */
.article-reading {
  /* 本文インク: 灰(--text-medium #6b7280)をやめ、ティールに寄せた濃い黒 */
  --reading-ink: #283142;
  --reading-ink-strong: #1c2733;
  /* 可読幅(本文の最大行長)。下のメディアクエリで大画面ほど広げる */
  --reading-measure: 720px;
  --reading-gutter: 3rem;
  max-width: calc(var(--reading-measure) + var(--reading-gutter) * 2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
              0 16px 40px rgba(15, 23, 42, 0.06);
  border-color: rgba(229, 231, 235, 0.85);
  border-radius: 18px;
}
/* フォーム用の上部グラデーションバーは読み物では外す */
.article-reading::before { display: none; }

.article-reading .info-box-content {
  max-width: var(--reading-measure);
  margin-inline: auto;
  padding: 3.25rem var(--reading-gutter) 3.5rem;
  color: var(--reading-ink);
  font-size: 1.0625rem;   /* 17px: 長文向けに底上げ */
  line-height: 1.9;
  letter-spacing: 0.012em;
}

/* --- 大画面ほど横幅を広げて読みやすく --- */
@media (min-width: 1024px) {
  .article-reading { --reading-measure: 800px; }
}
@media (min-width: 1280px) {
  .article-reading {
    --reading-measure: 880px;
    --reading-gutter: 3.5rem;
  }
}
@media (min-width: 1600px) {
  .article-reading {
    --reading-measure: 980px;
    --reading-gutter: 4rem;
  }
  .article-reading .info-box-content { font-size: 1.09375rem; } /* 17.5px */
}

/* --- 本文: 灰色をやめて濃いインクへ(薄さ解消の本丸) --- */
.article-reading .info-box-content p {
  color: var(--reading-ink);
  font-size: inherit;
  margin-bottom: 1.5rem;
}
.article-reading .info-box-content ul,
.article-reading .info-box-content ol {
  color: var(--reading-ink);
  margin: 1.25rem 0 1.75rem 1.5rem;
}
.article-reading .info-box-content li {
  margin-bottom: 0.6rem;
  line-height: 1.85;
}
.article-reading .info-box-content li::marker { color: var(--primary-color); }
.article-reading .info-box-content strong,
.article-reading .info-box-content li strong {
  color: var(--reading-ink-strong);
  font-weight: 700;
}

/* --- 見出し: 全部ティールで叫ばせず、強弱を作る --- */
.article-reading .info-box-content h3 {
  color: var(--reading-ink-strong);   /* h3 はインク + ティール罫 */
  font-size: 1.45rem;
  line-height: 1.5;
  margin: 2.75rem 0 1rem;
  padding-left: 0.9rem;
  border-left: 4px solid var(--primary-color);
}
.article-reading .info-box-content h4 {
  color: var(--primary-color);        /* h4 はティールでアクセント */
  font-size: 1.15rem;
  margin: 2rem 0 0.6rem;
}
.article-reading .info-box-content h4::before {
  color: var(--primary-color);        /* ▶ を本体配色のティールに統一 */
}

/* --- 用語解説(dl): 区切り線つきで読みやすく --- */
.article-reading .info-box-content dl { margin: 1.75rem 0; }
.article-reading .info-box-content dt {
  font-weight: 700;
  color: var(--reading-ink-strong);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}
.article-reading .info-box-content dt:first-of-type {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}
.article-reading .info-box-content dd {
  margin: 0.45rem 0 0 1rem;
  color: var(--reading-ink);
}

/* --- 引用 / ポイントのコールアウト --- */
.article-reading .info-box-content blockquote {
  margin: 1.85rem 0;
  padding: 1rem 1.35rem;
  border-left: 4px solid var(--primary-color);
  background: var(--primary-light);
  border-radius: 0 10px 10px 0;
  color: var(--reading-ink-strong);
}
.article-reading .info-box-content blockquote p:last-child { margin-bottom: 0; }

/* --- 本文中リンク: 読みやすい控えめな下線 --- */
.article-reading .info-box-content p a,
.article-reading .info-box-content li a {
  border-bottom-color: rgba(29, 78, 216, 0.32);
}

@media (max-width: 640px) {
  .article-reading {
    --reading-gutter: 1.35rem;
  }
  .article-reading .info-box-content {
    padding: 1.85rem var(--reading-gutter) 2.25rem;
    font-size: 1.02rem;
    line-height: 1.85;
  }
  .article-reading .info-box-content h3 {
    font-size: 1.28rem;
    margin-top: 2.25rem;
  }
}