/* =============================================
   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;
  }
}

/* 10. PCではコラム面を広く使い、情報ブロックの窮屈さを減らす */
@media (min-width: 1024px) {
  body {
    padding-inline: clamp(20px, 2.8vw, 40px) !important;
  }

  .wrap {
    width: min(100%, 1280px) !important;
    max-width: 1280px !important;
  }

  .wrap > .container,
  .wrap > .card,
  .wrap .container,
  .wrap .card {
    width: 100% !important;
    max-width: 1180px !important;
    padding: clamp(30px, 2.8vw, 46px) !important;
  }

  .card-inner {
    max-width: none !important;
  }

  .wrap .hero,
  .wrap header.page-header {
    padding: clamp(24px, 2.8vw, 42px) !important;
  }

  .wrap .section,
  .card-inner .section {
    margin: 28px 0 !important;
    padding: clamp(24px, 2.1vw, 32px) clamp(24px, 2.4vw, 34px) !important;
  }

  .wrap .section p,
  .card-inner .section p,
  .wrap .section li,
  .card-inner .section li {
    line-height: 1.82 !important;
    margin: 14px 0 !important;
  }

  .column-hero-shell {
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 340px) !important;
  }

  .column-next-step__rail {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }

  .column-next-step__makers {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .wrap h1,
  .wrap h2,
  .wrap h3,
  .wrap .section-title,
  .card-inner h1,
  .card-inner h2,
  .card-inner h3,
  .card-inner .section-title {
    text-wrap: pretty;
  }

  .wrap .lead,
  .wrap .lede,
  .card-inner .lead,
  .card-inner .lede,
  .wrap .section p,
  .card-inner .section p,
  .wrap .note,
  .wrap .summary-box,
  .wrap .callout,
  .card-inner .note,
  .card-inner .summary-box,
  .card-inner .callout,
  .wrap .faq-list dd,
  .card-inner .faq-list dd {
    max-width: none !important;
    text-wrap: pretty;
  }
}

@media (min-width: 1360px) {
  .wrap {
    width: min(100%, 1320px) !important;
    max-width: 1320px !important;
  }

  .wrap > .container,
  .wrap > .card,
  .wrap .container,
  .wrap .card {
    max-width: 1220px !important;
  }
}

/* 11. SPでは外枠をコンパクトにし、本文は段落間の余白で読ませる */
@media (max-width: 640px) {
  body {
    padding: 8px !important;
  }

  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 32px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .wrap > .container,
  .wrap > .card,
  .wrap .container,
  .wrap .card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px 20px !important;
    border-radius: 16px !important;
  }

  .wrap .hero,
  .wrap header.page-header {
    margin-bottom: 16px !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }

  .wrap .section,
  .card-inner .section {
    margin: 16px 0 !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }

  .wrap .section p,
  .card-inner .section p {
    margin: 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.78 !important;
    letter-spacing: 0.015em !important;
    text-wrap: pretty;
  }

  .wrap .section p + p,
  .card-inner .section p + p {
    margin-top: 14px !important;
  }

  .wrap .section li,
  .card-inner .section li,
  .card-inner .list-dot li {
    margin: 7px 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.72 !important;
    letter-spacing: 0.015em !important;
  }

  .wrap .lead,
  .wrap .lede,
  .card-inner .lead,
  .card-inner .lede {
    margin: 10px 0 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    letter-spacing: 0.015em !important;
    text-wrap: pretty;
  }

  .wrap .section h2,
  .card-inner .section h2,
  .wrap .section-title {
    margin: 0 0 12px !important;
    font-size: clamp(1.08rem, 4.8vw, 1.28rem) !important;
    line-height: 1.45 !important;
    text-wrap: pretty;
  }

  .wrap .section h3,
  .card-inner .section h3 {
    margin: 18px 0 9px !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    text-wrap: pretty;
  }

  .wrap .toc,
  .wrap .summary-box,
  .wrap .note,
  .wrap .callout,
  .card-inner .toc,
  .card-inner .summary-box,
  .card-inner .note,
  .card-inner .callout {
    margin: 14px 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .hero-meta {
    gap: 6px !important;
  }

  .hero-meta span {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
  }

  .column-next-step {
    margin-top: 1.5rem !important;
    padding: 1rem 0.85rem !important;
  }

  .column-next-step__works {
    gap: 0.65rem !important;
  }

  .column-next-step__work {
    flex-basis: min(44vw, 150px) !important;
  }
}

@media (max-width: 380px) {
  body {
    padding: 6px !important;
  }

  .wrap {
    padding: 8px !important;
  }

  .wrap .section,
  .card-inner .section,
  .wrap > .container,
  .wrap > .card,
  .wrap .container,
  .wrap .card {
    padding-inline: 12px !important;
  }
}