@charset "utf-8";

/* ============================================================
   government.css
   「自治体・行政の方へ」ページ（/government/）専用のスタイル

   構成（government/index.html 側の <main> と対応）：
     1. 自治体・行政の担当者の方へ  #for-government
     2. 自治体・行政の方への説明    #explanation
     3. 自治体・行政の研修会への講師派遣 #lecturer-dispatch

   読み込み順：variables.css → destyle.css → common.css → government.css
   共通スタイル（header/footer・.btn・.ttl-area等）はcommon.css側にあり、
   ここにはこのページ固有のコンポーネントのみを書く。
============================================================ */


/* ============================================================
   セクション共通レイアウト（.page-section）
   ------------------------------------------------------------
   3つのセクションはすべて同じ入れ子構造を取る：
     section.page-section(.page-section--base|.page-section--sub)
       └ div.page-section__inner        … 最大幅1440px・中央寄せ・余白
           ├ div.ttl-area               … 見出し（common.css）
           └ div.page-section__content  … 本文（全セクション共通で max-width: 820px）
   .page-section--base と .page-section--sub を1セクションごとに交互に指定することで、
   背景色が --color-background-base（#FEFCF8）→ --color-background-sub（#F0FAF5）→ …
   と交互に切り替わるようにしている（association.css と同じ方針）。
============================================================ */
.page-section { width: 100%; }
.page-section--base { background: var(--color-background-base); }
.page-section--sub  { background: var(--color-background-sub); }

/* inner：見出し・本文をこの中に縦に並べる（PC版はgap 56px・中央揃え、SP版はgap 32px） */
.page-section__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* content：本文側の幅。3セクションとも読みやすさを優先し max-width: 820px に統一 */
.page-section__content {
  width: 100%;
  max-width: 820px;
}


/* ============================================================
   本文テキストブロック（.text-block）
   ------------------------------------------------------------
   1./3. で使用する、複数段落からなる本文用のブロック。
   段落間の余白（margin-bottom: 20px）と行間（--text-pc-body-lh）を統一する。
============================================================ */
.text-block {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-pc-body-size);
  font-weight: var(--text-pc-body-weight);
  line-height: var(--text-pc-body-lh);
  color: var(--color-text-body);
}
.text-block p { margin: 0 0 20px; }
.text-block p:last-child { margin-bottom: 0; } /* 最後の段落は余白なし */


/* ============================================================
   リード文（.lead-text）：2.「自治体・行政の方への説明」のみで使用
   ------------------------------------------------------------
   width: fit-content + margin: 0 auto により、テキストの塊としては
   page-section__content の中央に配置されるが、テキスト自体（複数行に
   なった場合）は text-align: left で左揃えのまま保たれる。
============================================================ */
.lead-text {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-pc-lead-size);
  font-weight: var(--text-pc-lead-weight);
  line-height: var(--text-pc-lead-lh);
  color: var(--color-text-body);
}


/* ============================================================
   ボタンエリア（.btn-area）
   ------------------------------------------------------------
   2.・3. で使用。本文の下にボタン（common.css の .btn / .btn--icon）を
   中央揃えで配置するためのラッパー。ボタン自体の見た目は再定義しない。
   ボタン上のGapは、セクション間のGap（.page-section__inner）と
   同じ値に揃えている：PC版 56px／SP版 32px（SP版はメディアクエリで上書き）。
============================================================ */
.btn-area {
  display: flex;
  justify-content: center;
  margin-top: 56px;
  width: 100%;
}



/* ============================================================
   SP版（874px以下）
   ※ ブレークポイントは common.css の一般セクションと同じ874pxに揃えている
============================================================ */
@media (max-width: 874px) {

  /* セクション共通：paddingを縮小し、左揃え・gap 32pxに変更
     （association.css の他ページのSP調整と同じ考え方） */
  .page-section__inner {
    padding: 40px 16px;
    align-items: flex-start;
    gap: 32px;
  }

  /* 本文テキストブロック：SP用のフォントサイズ・行間に切り替え */
  .text-block {
    font-size: var(--text-sp-body-size);
    line-height: var(--text-sp-body-lh);
  }

  /* リード文：SP用のフォントサイズ・行間に切り替え */
  .lead-text {
    font-size: var(--text-sp-lead-size);
    font-weight: var(--text-sp-lead-weight);
    line-height: var(--text-sp-lead-lh);
  }

  /* ボタンエリア：ボタン上のGapをSP版の32pxに変更 */
  .btn-area {
    margin-top: 32px;
  }
} /* @media (max-width: 874px) government/index.html 全セクション SP版 */