/* =============================================
   column-readability.css
   コラムページ専用 可読性向上スタイル
   ============================================= */

/* 1. フォント：長文コラムでは Noto Sans JP（ゴシック体）を使用
      可読性とサイト全体の統一感を重視 */
.wrap .section p,
.wrap .section li,
.wrap .lead,
.wrap .note,
.wrap .summary-box,
.wrap .toc,
.wrap .toc a,
.wrap .toc li,
.card-inner .section p,
.card-inner .section li,
.card-inner .lead,
.card-inner .note,
.card-inner .callout,
.card-inner .faq-a,
.card-inner .faq-q,
.card-inner .toc,
.card-inner .toc a {
  font-family: system-ui, "Segoe UI", 'Noto Sans JP', -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 2. 本文フォントサイズを拡大 */
.wrap .section p,
.card-inner .section p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin: 12px 0 !important;
}

.wrap .section li,
.card-inner .section li,
.card-inner .list-dot li {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin: 8px 0 !important;
}

/* 3. 見出しを強調して本文との差を明確に */
.wrap .section h2,
.card-inner .section h2 {
  font-size: 1.25rem !important;
  margin: 0 0 14px !important;
  line-height: 1.4 !important;
}

.wrap .section h3,
.card-inner .section h3 {
  font-size: 1.08rem !important;
  margin: 22px 0 10px !important;
  line-height: 1.4 !important;
}

/* 4. セクション内padding改善（モバイル） */
.wrap .section {
  padding: 20px 18px !important;
  margin-top: 28px !important;
}

/* 5. leadテキストの改善 */
.wrap .lead,
.card-inner .lead {
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
}

/* 6. 段落間の視覚的区切りを強化 */
.wrap .section p+p,
.card-inner .section p+p {
  margin-top: 16px !important;
}

/* 7. summary-boxとnoteの改善 */
.wrap .summary-box,
.card-inner .summary-box {
  font-size: 0.95rem !important;
  padding: 16px !important;
  line-height: 1.6 !important;
}

.wrap .note,
.card-inner .note {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  padding: 14px 16px !important;
}

/* 8. TOCの可読性 */
.wrap .toc ol,
.wrap .toc a,
.card-inner .toc a {
  font-size: 0.92rem !important;
}

/* 9. FAQの可読性 */
.wrap .faq-list dd,
.card-inner .faq-list dd {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 8px !important;
}

/* 9. デスクトップでsectionのpaddingをさらに広く */
@media (min-width: 640px) {
  .wrap .section {
    padding: 26px 24px !important;
  }
}

@media (min-width: 880px) {
  .wrap .section {
    padding: 30px 28px !important;
  }
}