@charset "utf-8";

/* ============================================================
   association.css
   「協会について」ページ（/association/）専用のスタイル

   構成（index.html 側の <main> と対応）：
     1. 代表メッセージ   #message
     2. 法人概要         #overview
     3. 法人の目的・活動内容 #purpose
     4. 沿革             #history
     5. 情報公開         #disclosure

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


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

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

/* content：本文側の幅。デフォルトは1000pxだが、セクションごとに
   下記の modifier クラスで実測に基づいた幅へ上書きしている */
.page-section__content { width: 100%; max-width: 1000px; }

/* 法人概要：役員リストの最長行「運営委員　石山　玲子（社会福祉法人　はるにれの里　児童発達支援センターさんりんしゃ）」が
   1行に収まる幅を実測して設定
   （本文18pxで名前・所属部分は約37文字＝約666px。dt幅160px＋ddのpadding48px＋
   role-label幅100px＋gap12pxを足すと約986px必要なため、1000pxに設定） */
.page-section__content--overview { max-width: 1000px; }

/* 法人の目的・活動内容：
   活動内容カード①②が1行に収まる幅を実測して設定
   （本文18pxでカードのテキスト幅は約484px。アイコン28px＋gap12px＋左右padding44px＋
   カード間gap16px×2枚分を足すと約1176px必要なため、余裕を見て1200pxに設定） */
.page-section__content--purpose { max-width: 1200px; }

/* 沿革：
   年表の最長行「…ふれあいペアレントプログラム指導者ガイド」の刊行（ミネルヴァ書房）」が
   1行に収まる幅を実測して設定
   （本文18pxでテキスト幅は約1133px。タイムラインの左パディング32pxを足すと約1165px
   必要なため、余裕を見て1190pxに設定） */
.page-section__content--history { max-width: 1190px; }


/* ============================================================
   1. 代表メッセージ（.message-card）
   ------------------------------------------------------------
   構造：message-card
           ├ img.message-card__photo   … 代表理事の写真（左）
           └ div.message-card__text    … 本文＋署名（右）
                 └ div.message-card__signature
                       ├ .org  … 団体名
                       └ .name … 代表者名
   PC版は写真と本文を横並び、SP版（874px以下）は縦並びに変更する。
============================================================ */
.message-card {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}

/* 写真：PC版 200×240px（縦長のポートレート比率）で固定
   - object-fit: cover を指定しているので、実際の写真の縦横比が多少違っても
     この枠内に自然にトリミングされて収まる
   - background は画像の読み込み前・読み込み失敗時のフォールバック色 */
.message-card__photo {
  flex: 0 0 200px;
  width: 200px;
  height: 240px;
  border-radius: 16px;
  background: var(--color-secondary);
  object-fit: cover;
  object-position: top center;
}

/* 本文：text/pc/body相当（18px・400・175%） */
.message-card__text {
  flex: 1;
  color: var(--color-text-body);
  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);
}
.message-card__text p { margin: 0 0 20px; }

/* 署名：右揃えで団体名（小さく・キャプション色）→代表者名（大きく・見出し色）の順に表示 */
.message-card__signature { text-align: right; }
.message-card__signature .org {
  color: var(--color-text-caption);
  margin-bottom: 6px;
  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);
}
.message-card__signature .name {
  color: var(--color-text-heading);
  font-family: var(--font-serif);
  font-size: var(--text-pc-heading-s-size);
  font-weight: var(--text-pc-heading-s-weight);
  line-height: var(--text-pc-heading-s-lh);
}


/* ============================================================
   1-2. 代表プロフィール（.profile-block）
   ------------------------------------------------------------
   構造：div.profile-block
           ├ div.profile-block__hd  … 氏名＋現職（見出し部分のみ新規CSS）
           └ dl.overview-card       … 経歴の内容は「2. 法人概要」の
                                       .overview-card / .overview-row を
                                       そのまま再利用（新規CSSなし）
============================================================ */
.profile-block {
  width: 100%;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-secondary);
}

.profile-block__hd {
  margin-bottom: 24px;
}

.profile-block__name {
  color: var(--color-text-heading);
  font-family: var(--font-serif);
  font-size: var(--text-pc-heading-s-size);
  font-weight: var(--text-pc-heading-s-weight);
  line-height: var(--text-pc-heading-s-lh);
}

.profile-block__role {
  margin-top: 24px;
  color: var(--color-text-heading);
  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);
}

/* 経歴などの項目：ラベル列＋詳細列の2カラムで並べる（罫線・背景なしの「見えない表」） */
.profile-block__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-block__meta-row {
  display: flex;
  gap: 24px;
}

.profile-block__meta-label {
  flex: 0 0 88px; /* 「最終学歴」（4文字）がそろう幅 */
  color: var(--color-text-caption);
  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);
}

.profile-block__meta-value {
  flex: 1;
  min-width: 0;
  color: var(--color-text-body);
  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);
}


/* ============================================================
   2. 法人概要（.overview-card）
   ------------------------------------------------------------
   構造：dl.overview-card
           └ div.overview-row（1行＝1項目）
                 ├ dt … 項目名（法人名・所在地・設立・代表者・役員）
                 └ dd … 内容
   「役員」の行だけは、dd の中に role-row（役職名＋氏名）を人数分縦に並べる。
============================================================ */
.overview-card {
  border: 1px solid var(--color-primary);
  border-radius: 16px;
  background: var(--color-white);
  overflow: hidden;
  width: 100%;
}
.overview-row { display: flex; border-bottom: 1px solid var(--color-secondary); }
.overview-row:last-child { border-bottom: none; } /* 最終行はborder-bottomを消す */

/* dt：項目名。背景を薄緑にして値（dd）と区別する */
.overview-row dt {
  flex: 0 0 160px;
  padding: 20px 24px;
  background: var(--color-secondary);
  color: var(--color-text-heading);
  font-family: var(--font-sans);
  font-size: var(--text-pc-small-size);
  font-weight: var(--text-pc-small-weight);
  line-height: var(--text-pc-small-lh);
}

/* dd：内容 */
.overview-row dd {
  flex: 1;
  margin: 0;
  padding: 20px 24px;
  color: var(--color-text-body);
  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);
}

/* role-row：役員1名分（役職名＋氏名）。dd の中で縦に繰り返す */
.role-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  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);
}
.role-row:last-child { margin-bottom: 0; }
.role-row .role-label { flex: 0 0 100px; color: var(--color-text-caption); } /* 役職名は幅を揃えて左寄せ */

/* 区分の切れ目に1行分の余白を追加する（監事→運営委員、運営委員→顧問） */
.role-row--gap { margin-top: 32px; }

/* is-muted：肩書きなど一部分だけキャプション色に落としたい場合に付与する（例：代表者の「代表理事」） */
.overview-row dd .is-muted { color: var(--color-text-caption); }


/* ============================================================
   3. 法人の目的・活動内容（.lead-box / .activity-grid）
   ------------------------------------------------------------
   構造：p.lead-box（リード文＝色付きの座布団）
         ul.activity-grid（活動内容4項目、PC版2列・SP版1列）
           └ li
                 ├ span.num  … 連番の丸バッジ
                 └ テキスト
============================================================ */

/* リード文：色付きの背景（座布団）でひとまとまりとして目立たせる */
.lead-box {
  background: var(--color-background-sub);
  border-radius: 16px;
  width: 100%;
  padding: 32px;
  margin: 0 0 48px;
  color: var(--color-text-body);
  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);
}

/* 活動内容：PC版は2列（gap 16px）。874px以下は1列に変更する（後述メディアクエリ参照） */
.activity-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.activity-grid li {
  border: 1px solid var(--color-primary);
  border-radius: 16px;
  background: var(--color-white);
  padding: 20px 22px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--color-text-body);
  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);
}
/* num：連番（①②③④）を表す丸バッジ。テキストサイズはUI要素のため固定値のまま */
.activity-grid .num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   4. 沿革（.timeline）
   ------------------------------------------------------------
   構造：div.timeline
           └ div.item（1件＝1つの出来事）
                 ├ div.date … 年月
                 └ div.desc … 出来事の説明
   .timeline::before で縦の連結線を、.item::before で各行の丸マーカーを描画する
   （どちらもCSSの疑似要素のみで、画像は使用していない）。
============================================================ */
.timeline { position: relative; padding-left: 32px; width: 100%; }

/* 縦の連結線：timelineの左端、丸マーカーの中心を通るように配置 */
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--color-secondary);
}
.timeline .item { position: relative; padding-bottom: 32px; }
.timeline .item:last-child { padding-bottom: 0; } /* 最後の項目は余白なし */

/* 丸マーカー：白丸＋緑の枠線で、連結線の上に重ねて表示する */
.timeline .item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
}
.timeline .date {
  color: var(--color-primary);
  margin-bottom: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-pc-small-size);
  font-weight: var(--text-pc-small-weight);
  line-height: var(--text-pc-small-lh);
}
.timeline .desc {
  color: var(--color-text-body);
  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);
}


/* ============================================================
   5. 情報公開（.doc-btn-group）
   ------------------------------------------------------------
   定款ダウンロードボタン（common.css の .btn / .btn--icon を使用）の
   配置用ラッパーのみ。ボタン自体の見た目は再定義しない。
============================================================ */
.doc-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center; /* ボタンをセクション中央に配置 */
  gap: 16px;
  width: 100%;
}



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

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

  /* 代表メッセージ：写真と本文を縦並びに変更し、写真を中央揃え・縦長のまま縮小
     （横長に引き伸ばすと顔写真が不自然にトリミングされるため、
       比率を保ったまま160×192pxに縮小している） */
  .message-card { flex-direction: column; align-items: center; }
  .message-card__photo { flex: 0 0 auto; width: 160px; height: 192px; margin: 0 auto; }
  .message-card__text { font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }
  .message-card__signature .org { font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }
  .message-card__signature .name { font-size: var(--text-sp-heading-s-size); line-height: var(--text-sp-heading-s-lh); }

  /* 代表プロフィール：見出しのフォントサイズをSP用に縮小 */
  .profile-block { margin-top: 24px; padding-top: 24px; }
  .profile-block__name { font-size: var(--text-sp-heading-s-size); line-height: var(--text-sp-heading-s-lh); }
  .profile-block__role { font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }
  .profile-block__meta-row { flex-direction: column; gap: 2px; }
  .profile-block__meta-label { flex: none; font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }
  .profile-block__meta-value { font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }

  /* 法人概要：dt/ddを横並びから縦並びに変更 */
  .overview-row { flex-direction: column; }
  .overview-row dt { flex: none; font-size: var(--text-sp-small-size); line-height: var(--text-sp-small-lh); }
  .overview-row dd { font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }
  .role-row { font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }

  /* 法人の目的・活動内容：リード文を縮小、活動カードを2列→1列に変更 */
  .lead-box { font-size: var(--text-sp-lead-size); line-height: var(--text-sp-lead-lh); }
  .activity-grid { grid-template-columns: 1fr; }
  .activity-grid li { font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }

  /* 沿革：日付・説明文のフォントサイズをSP用に縮小 */
  .timeline .date { font-size: var(--text-sp-small-size); line-height: var(--text-sp-small-lh); }
  .timeline .desc { font-size: var(--text-sp-body-size); line-height: var(--text-sp-body-lh); }
} /* @media (max-width: 874px) association/index.html 全セクション SP版 */