@charset "utf-8";

/* ============================================================
   contact.css
   「お問い合わせ」ページ（/contact/）専用のスタイル

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


/* ============================================================
   セクション共通レイアウト（.page-section）
   ------------------------------------------------------------
     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;
}


/* ============================================================
   リード文（.lead-text）
   ------------------------------------------------------------
   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);
}


/* ============================================================
   本文テキストブロック（.text-block）
   ------------------------------------------------------------
   複数段落からなる本文用のブロック。
   段落間の余白（margin-bottom: 20px）と行間（--text-pc-body-lh）を統一する。
============================================================ */
.text-block {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
  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; } /* 最後の段落は余白なし */


/* ============================================================
   本文内のリンク：primary色・下線
============================================================ */
.section-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  word-break: break-word;
}


/* ============================================================
   iframe の枠線削除
============================================================ */
.contact-form {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}


.page-section--thanks .page-section__inner {
  min-height: 100vh;
  min-height: 100svh;          /* スマホのツールバー対策 */
  justify-content: space-between; /* 上・中央・下に均等配置 */
}


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

} /* @media (max-width: 874px) contact/index.html SP版 */