/* ========================================================= 
   /websys 共通：タイポグラフィ＆余白 読みやすさ改善
   対象：
     - ガイド記事系 … .saascomp-* ブロック
     - 業種別システム開発例 … .indpkg-* ブロック
   既存デザインを壊さない範囲で「一段ゆったり・少し大きめ」に寄せる
   ========================================================= */

/* ---------------------------------
   1) 基本フォントサイズ・行間
   --------------------------------- */

/* ガイド記事（/websys/guide/ 系） */
.saascomp-wrap {
  font-size: 16px !important;
  line-height: 1.85 !important;
}

/* 業種別システム開発例（industry_system_*.php 系） */
.indpkg-wrap,
.indpkg-intro,
.indpkg-block-body {
  font-size: 16px !important;
  line-height: 1.85 !important;
}

/* ガイド・業種別どちらにも使う「説明テキストの行間」 */
.saascomp-wrap p,
.indpkg-wrap p,
.indpkg-intro p,
.indpkg-block-body p {
  margin-bottom: 18px !important;
}

/* 箇条書きの行間と余白を少し広げる */
.saascomp-wrap ul,
.saascomp-wrap ol,
.indpkg-wrap ul,
.indpkg-wrap ol,
.indpkg-intro ul,
.indpkg-intro ol {
  margin-top: 6px !important;
  margin-bottom: 12px !important;
  padding-left: 22px !important;
}

.saascomp-wrap li,
.indpkg-wrap li,
.indpkg-intro li {
  margin-bottom: 6px !important;
  line-height: 1.8 !important;
}

/* ---------------------------------
   2) セクションごとの上下余白
   --------------------------------- */

/* ガイドセクション */
.saascomp-section {
  margin-bottom: 48px !important;
  padding-top: 6px;
}

/* 業種別セクション（構成例・導入ポイントなど） */
.indpkg-section,
.indpkg-block {
  margin-bottom: 48px !important;
}

/* 「導入フロー」「よくあるご相談」など、段落が続くブロック想定 */
.indpkg-block-body + .indpkg-block-body {
  margin-top: 18px !important;
}

/* 見出しまわりの余白を広げる */
.saascomp-section h2,
.indpkg-section h2,
.indpkg-intro h2 {
  margin-bottom: 22px !important;
}

.saascomp-section h3,
.indpkg-section h3,
.indpkg-intro h3 {
  margin-top: 14px !important;
  margin-bottom: 12px !important;
}

/* ---------------------------------
   3) カード・ボックスの内側パディング調整
   --------------------------------- */

/* ガイド記事中のカード（メリット／デメリットなど） */
.saascomp-card {
  padding: 18px 20px 16px !important;
}

/* 業種別ページのカード・ボックス類を想定 */
.indpkg-block,
.indpkg-card,
.indpkg-col2 > .indpkg-col,
.indpkg-case {
  padding: 18px 20px 16px !important;
}

/* 強調ノート（注意書きなど）の行間 */
.saascomp-note,
.indpkg-note {
  line-height: 1.8 !important;
}

/* ---------------------------------
   4) テーブル（比較表・機能一覧など）
   --------------------------------- */

/* ガイド記事のテーブル */
.saascomp-table table {
  font-size: 15px !important; /* 14px → 15px */
}

.saascomp-table th,
.saascomp-table td {
  padding: 10px 12px !important;
  line-height: 1.75 !important;
}

/* 業種別ページ内のテーブル全般 */
.indpkg-wrap table {
  font-size: 15px !important; /* 14px → 15px */
  border-collapse: collapse;
}

.indpkg-wrap th,
.indpkg-wrap td {
  padding: 8px 10px !important;
  line-height: 1.75 !important;
}

/* ---------------------------------
   5) ヒーロー・リード・画像まわり
   --------------------------------- */

/* ガイド記事のリードブロック（saascomp-hero） */
.saascomp-hero {
  padding: 28px 24px 22px !important;
  margin-bottom: 40px !important;
}

/* 業種別ページ冒頭のイントロブロック（indpkg-intro） */
.indpkg-intro {
  margin-bottom: 40px !important;
  padding: 22px 24px 20px !important;
}

/* MV画像・図版などの上下余白 */
.saascomp-figure,
.indpkg-figure {
  margin: 24px 0 24px !important;
}

/* ---------------------------------
   6) 関連トピックス・リストブロック
   --------------------------------- */

/* 関連トピックス（共通ブロック） */
.indtopics-related {
  padding: 24px 32px !important;
  margin-top: 48px !important;
  line-height: 1.8 !important;
}

/* ガイドのケースまとめ用リスト（チェックマーク付きリスト） */
.guide-summary-list li {
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin-bottom: 10px !important;
}

/* ---------------------------------
   7) CTA（お問い合わせボックス）まわり
   --------------------------------- */

.saascomp-cta {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
  padding: 24px 20px !important;
}

.saascomp-cta p {
  line-height: 1.8 !important;
}

/* 業種別ページ下部の CTA が .indpkg-cta などの場合を想定 */
.indpkg-cta {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
  padding: 24px 20px !important;
  line-height: 1.8 !important;
}

/* =========================================================
   section 配下の classなし <p> を読みやすく（行間・余白）
   - セクション直下の p
   - h2 の直後に来る p
   既存デザインに触れすぎないよう限定的に適用
   ========================================================= */

/* section の直下にある p（classなし） */
section > p:not([class]) {
  line-height: 1.85 !important;
  margin-bottom: 18px !important;
}

/* h2 直後の p（説明リードとして扱う） */
section > h2 + p:not([class]) {
  margin-top: 12px !important;      /* h2 との間の余白 */
  line-height: 1.9 !important;      /* リード文はさらに少し広め */
  margin-bottom: 20px !important;
}

/* ==========================================
   Websys ガイド系（可読性アップのための全体補正）
   ========================================== */

/* 小見出し（タグ風） */
.saascomp-article-label,
.saascomp-subttl {
  font-size: 14px !important;
}

.saascomp-table caption {
  font-size: 16px;
}

.saascomp-hero-meta,
.saascomp-flow-step {
  font-size: 13.5px !important;
}

/* タグ群（ピル型ラベル） */
.saascomp-pill-list li {
  font-size: 14px !important;
}

/* カード内本文 */
.saascomp-card p {
  font-size: 15px !important;       /* 14.5px → 15px */
  line-height: 1.75 !important;
}

/* 注意書きボックス */
.saascomp-note {
  font-size: 15px !important;       /* 14px → 15px */
  line-height: 1.7 !important;
}

/* ---------------------------------
   8) スマホ向け 微調整
   --------------------------------- */

@media screen and (max-width: 768px) {

  /* 文字は気持ちだけ小さく、行間は確保 */
  .saascomp-wrap,
  .indpkg-wrap,
  .indpkg-intro,
  .indpkg-block-body {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .saascomp-section,
  .indpkg-section,
  .indpkg-block {
    margin-bottom: 40px !important;
  }

  .saascomp-card,
  .indpkg-block,
  .indpkg-card {
    padding: 16px 16px 14px !important;
  }

  .saascomp-table table,
  .indpkg-wrap table {
    /* 横スクロール前提のテーブルは幅を少しだけ確保 */
    min-width: 640px;
  }

  .indtopics-related {
    padding: 20px 16px !important;
  }
}