@charset "utf-8";

/* ============================================================
   section/participation（保護者の方へ：ふれペアは、親が子育てを学ぶプログラム）

   構造：
     .parent-participation（外側・背景色のみ）
       └ .section-participation__inner（内側・幅1440px固定＋余白80px＋レイアウト）
           ├ .ttl-area（共通：見出し）
           ├ .parent-participation__overview（リード文＋本文）
           └ .parent-participation__list（カード×2、PC/SPで出し分け）
============================================================ */

/* ------------------------------------------------------------
   .parent-participation：セクション全体（背景色を全幅に広げる役割のみ）
------------------------------------------------------------ */
.parent-participation {
  background-color: var(--color-background-base);
}

/* ------------------------------------------------------------
   .section-participation__inner：内側の箱
   - max-width: 1440px + margin: 0 auto で中央固定
   - padding は 80px 80px 30px（下だけ詰めて次セクションとの間隔を調整）
------------------------------------------------------------ */
.section-participation__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 80px 30px;

  /* 見出し→overview→カード一覧を縦に並べ、中央寄せにする */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* 見出しエリア／overview／カード一覧の間隔 */
}

/* ------------------------------------------------------------
   .parent-participation__overview：リード文＋本文をまとめるエリア
   （上限820px。innerが狭い画面では自然に縮む）
------------------------------------------------------------ */
.parent-participation__overview {
  display: flex;
  flex-direction: column;
  gap: 40px;     /* リード文と本文の間隔 */
  width: 100%;
  max-width: 820px;
}

/* 本文（リード文の下に続く説明文）
   section__lead（リード文）の左ボーダーとインデントを
   揃えるため、padding-leftを同じ24pxにしている */
.parent-participation__overview-body {
  padding-left: 24px;
  font-family: var(--text-pc-body-family);
  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);
}


.parent-participation__overview-body p {
  margin: 0;
}

/* ------------------------------------------------------------
   .parent-participation__list：PC/SP共通の土台クラス
   --pc・--spどちらにもこのクラスが付いているため、
   ここに書いた内容はPC版・SP版の両方に効く。
   .section-participation__inner の幅（=80px paddingを除いた内側）
   に対して100%まで広がるようにする
------------------------------------------------------------ */
.parent-participation__list {
  width: 100%;
}

/* SP用カードはデフォルト（PC表示時）では非表示にしておく */
.parent-participation__list--sp {
  display: none;
}

/* ============================================================
   parent-card-message（PC版カード）
   構造：img-frame（左・画像）＋ txt-area（右・テキスト）の横並び
============================================================ */

/* カード全体：画像とテキストを横並びにし、縦中央で揃える */
.parent-card-message {
  display: flex;
  align-items: center;
  justify-content: center; /* 画像＋テキストの合計幅が親要素より狭い場合、
                                左に寄らず中央に揃えるようにする */
  gap: 40px;
  width: 100%;
  box-sizing: border-box;
}

/* bg：オレンジ丸背景（装飾） */
.parent-card-message__bg {
  position: absolute;
  left: -68px;
  top: 50%;
  width: 150px;
  height: 100px;
  background: url('/assets/images/parent/bg.png') 50% / cover no-repeat;
  z-index: -1;
  flex-shrink: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

/* 画像エリア：基本300px・縮小のみ許可。狭い画面で画像も一緒に縮むようにする */
.parent-card-message__img-frame {
  flex: 0 1 300px;
  max-width: 300px;
  min-width: 0; /* flexアイテムの初期値min-width:autoによる縮小制限を解除 */
}

/* 画像本体：枠いっぱいに表示し、アスペクト比を保ったまま切り出す */
.parent-card-message__img {
  width: 100%;
  height: auto; /* width/height属性より縦横比を優先させる */
  display: block;
  object-fit: cover;
}

/* テキストエリア */
.parent-card-message__txt-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;       /* タイトルと本文の間隔 */
  flex: 1 1 0%;
  min-width: 0;     /* flex内の文字あふれ防止 */

  /* br-pcで改行位置を固定しているため、余分に広がらないよう720pxを上限にする */
  max-width: 720px;
  padding: 40px 0 50px;  /* 上40px・左右0・下50px */
}

/* 1枚目のカードだけ、txt-areaの上paddingを0にする */
.parent-card-message:first-child .parent-card-message__txt-area {
  padding-top: 0;
}

/* 1枚目のカードのテキストエリア下部にのみ点線を入れる
   （:not(:last-child) にしておくと、カードが何枚に増えても
     「最後の1枚以外」に区切り線が入る設計になる） */
.parent-card-message:not(:last-child) .parent-card-message__txt-area {
  border-bottom: 2px dashed var(--color-primary);
}

/* カードタイトル：見出しスタイル（heading-s）を適用 */
.parent-card-message__ttl {
  font-family: var(--text-pc-heading-m-family);
  font-size:   var(--text-pc-heading-s-size);
  font-weight: var(--text-pc-heading-s-weight);
  line-height: var(--text-pc-heading-s-lh);
  color: var(--color-text-heading);
  position: relative;
}

/* カード本文：本文スタイル（body）を適用
   親要素自体に文字が直接入っている場合（カード2）と、
   内部に複数の<p>がある場合（カード1）の両方に対応できるよう
   親・子pタグの両方に同じスタイルを当てている */
.parent-card-message__desc,
.parent-card-message__desc p {
  font-family: var(--text-pc-body-family);
  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);
}

.parent-card-message__desc p {
  margin: 0;
}

/* 該当例リスト（カード1のみ存在）：黒丸＋インデント */
.parent-card-message__desc ul {
  margin: 0;
  padding-left: 27px;
  list-style: disc;
}

/* ============================================================
   SP版（874px以下）の上書きスタイル
============================================================ */
@media screen and (max-width: 874px) {

  /* レイアウト・余白を持っているのは .section-participation__inner なので
     SP用の上書きもこちらに対して行う */
  .section-participation__inner {
    flex-direction: column;
    gap: 32px;
    padding: 40px 16px; /* 上下40px・左右16px */
    align-items: flex-start; /* ttl-areaをSP幅いっぱいに広げるため左揃え */
  }

  /* リード文＋本文エリア：幅固定をやめ、画面幅いっぱいに */
  .parent-participation__overview {
    max-width: none;
    gap: 24px;
  }

  /* 本文：インデントをやめてフルワイズ表示にし、文字サイズもSP用に */
  .parent-participation__overview-body {
    padding-left: 0;
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* PC版カードを非表示にし、SP版カードを表示に切り替える */
  .parent-participation__list--pc {
    display: none;
  }
  .parent-participation__list--sp {
    display: flex;
    flex-direction: column;
  }

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


/* ============================================================
   parent-card-message-sp（SP版カード）
   構造：img（上・画像）＋ txt-area（下・テキスト）の縦並び
============================================================ */

.parent-card-message-sp {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* bg：オレンジ丸背景（装飾） */
.parent-card-message-sp__bg {
  position: absolute;
  left: -32px;
  top: 50%;
  width: 150px;
  height: 100px;
  background: url('/assets/images/parent/bg.png') 50% / cover no-repeat;
  z-index: -1;
  flex-shrink: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

/* 画像：横幅いっぱい・高さ230px固定 */
.parent-card-message-sp__img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  display: block;
}

.parent-card-message-sp__txt-area {
  display: flex;
  flex-direction: column;
  gap: 16px;      /* タイトルと本文の間隔 */
  padding: 24px 0;
}

.parent-card-message-sp__ttl {
  font-family: var(--text-sp-heading-m-family);
  font-size:   var(--text-sp-heading-m-size);
  font-weight: var(--text-sp-heading-m-weight);
  line-height: var(--text-sp-heading-m-lh);
  color: var(--color-text-heading);
  position: relative;
}

.parent-card-message-sp__desc,
.parent-card-message-sp__desc p {
  font-family: var(--text-sp-body-family);
  font-size:   var(--text-sp-body-size);
  font-weight: var(--text-sp-body-weight);
  line-height: var(--text-sp-body-lh);
  color: var(--color-text-body);
}

.parent-card-message-sp__desc p {
  margin: 0;
}

.parent-card-message-sp__desc ul {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}

/* ============================================================
   フェードインの表示順調整
   - 画像とテキストに個別に js-fade-in を付け、表示タイミングをずらす
   - PC版はテキスト→画像、SP版は画像→テキストの順
============================================================ */

/* カード単位のずらし幅：トップページ（common.css）と同じ1.0s刻み。
   テキスト→画像の遅れ0.5sはこの半分（詳しい理由はcommon.css参照） */
.parent-card-message,
.parent-card-message-sp {
  --fade-step: 1.0s;
}

/* PC版：テキストが基準タイミング（--fade-base、通常0s） */
.parent-card-message__txt-area {
  transition-delay: var(--fade-base, 0s);
}

/* PC版：画像はテキストの0.5秒後 */
.parent-card-message__img-frame {
  transition-delay: calc(var(--fade-base, 0s) + 0.5s);
}

/* SP版：画像→テキストの順に入れ替え */
.parent-card-message-sp__img {
  transition-delay: var(--fade-base, 0s);
}
.parent-card-message-sp__txt-area {
  transition-delay: calc(var(--fade-base, 0s) + 0.5s);
}


/* ============================================================
   section/voices（保護者の方へ：ふれペア参加者の感想）

   構造：
     .parent-voices（外側・背景色のみ）
       └ .section-voices__inner（内側・幅1440px固定＋余白＋レイアウト）
           ├ .ttl-area（共通：見出し）
           └ .parent-voices__row（カード×3、縦並び）

   ※participationと違い、PC/SPでレイアウト構造自体は変わらないため
     （カードが縦に並ぶ点は共通）、HTMLの出し分けは行わず、
     文字サイズ・余白のみメディアクエリで切り替える
============================================================ */

/* ------------------------------------------------------------
   .parent-voices：セクション全体（外側の箱）
   背景色を画面幅いっぱいに広げる役目だけを持つ。
   participationとは異なり、背景色は --color-background-sub
   （#F0FAF5・薄緑）を使用する
------------------------------------------------------------ */
.parent-voices {
  background-color: var(--color-background-sub);
}

/* ------------------------------------------------------------
   .section-voices__inner：内側の箱（実際のコンテンツ）
   participationの.section-participation__innerと同じ考え方
------------------------------------------------------------ */
.section-voices__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* 見出しエリアとカード一覧の間隔 */
}

/* ------------------------------------------------------------
   .parent-voices__row：保護者の声カードをまとめる縦並びエリア
   PC版：カード間24px／幅は.section-voices__innerの内側いっぱい
------------------------------------------------------------ */
.parent-voices__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

/* ------------------------------------------------------------
   .parent-voices__card：保護者の声カード1枚
   ・白背景
   ・左側だけ緑3pxの太いボーダー（吹き出しのような見た目にする装飾）
   ・右側の角（右上・右下）のみ角丸8px
   ・内側にラベルと本文を縦に並べる
------------------------------------------------------------ */
.parent-voices__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px; /* ラベルと本文の間隔 */
  width: 100%;
  padding: 16px;

  background-color: var(--color-white);
  border-left: 3px solid var(--color-primary);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  /* 左側だけ角丸を付けないことで、左の太いボーダーと自然につながる見た目にする */
}

/* ------------------------------------------------------------
   .parent-voices__card-lbl：「参加した保護者の声（1）」のラベル
   PC版：text/pc/small（16px・700・175%）
------------------------------------------------------------ */
.parent-voices__card-lbl {
  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);
  color: var(--color-primary);
}

/* ------------------------------------------------------------
   .parent-voices__card-desc：本文エリア（小見出し＋本文の繰り返し）
   PC版：text/pc/body（18px・400・175%）をベースとし、
   小見出し（__card-desc-ttl）だけ太字で上書きする
------------------------------------------------------------ */
.parent-voices__card-desc {
  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);
}

/* 本文中のpタグ同士の余分なマージンをリセット */
.parent-voices__card-desc p {
  margin: 0;
}

/* 小見出し（「気持ちや行動の変化」「親子関係の変化」）：太字にする */
.parent-voices__card-desc-ttl {
  font-weight: 700;
}

/* 2つ目以降の小見出しの上にだけ、本文1行分の空白を作る
     marginで代用することでHTML上に余分な空段落を作らずに済ませる。
     1.75emは自分自身のフォントサイズ×line-height分＝本文1行分の高さ） */
.parent-voices__card-desc-ttl:not(:first-child) {
  margin-top: 1.75em;
}

/* ----------------------------------------------------------
   フェードインのずらし表示（カード3枚）
   カードに画像が無いため、カード単位で1つだけjs-fade-inを付けている
---------------------------------------------------------- */
.parent-voices__card:nth-child(1) { transition-delay: 0s;   }
.parent-voices__card:nth-child(2) { transition-delay: 0.25s; }
.parent-voices__card:nth-child(3) { transition-delay: 0.5s;  }


/* ============================================================
   SP版（874px以下）の上書きスタイル
============================================================ */
@media screen and (max-width: 874px) {

  /* レイアウト・余白の上書き：参加方法と同じ値を使用 */
  .section-voices__inner {
    flex-direction: column;
    gap: 32px;
    padding: 40px 16px;
    align-items: flex-start;
  }

  /* カード間の間隔をSP仕様に縮小 */
  .parent-voices__row {
    gap: 16px;
  }

  /* ラベル：text/sp/small（14px・700・175%） */
  .parent-voices__card-lbl {
    font-size:   var(--text-sp-small-size);
    font-weight: var(--text-sp-small-weight);
    line-height: var(--text-sp-small-lh);
  }

  /* 本文：text/sp/body（16px・400・175%） */
  .parent-voices__card-desc {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

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


/* ============================================================
   section/faq（保護者の方へ：よくある質問）
============================================================ */

/* 外側の箱：背景色（participationと同じ #FEFCF8）を画面いっぱいに広げる */
.parent-faq {
  background-color: var(--color-background-base);
}

/* 内側の箱：幅1440px固定＋余白80px＋レイアウト（他セクションと同じ考え方） */
.section-faq__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* ------------------------------------------------------------
   .faq__list：質問と回答をまとめる白い箱（外枠）
------------------------------------------------------------ */
.faq__list {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 16px;
  overflow: hidden;

  /* 左右をカード内側のpadding（24px）と揃え、外枠とカードの
     左端が一直線に見えるようにする */
  padding: 16px 24px;
}

/* ------------------------------------------------------------
   .faq__item：質問1問分のまとまり（質問行＋回答行）
   最後の項目以外、下に薄い緑のボーダーで区切る
------------------------------------------------------------ */
.faq__item {
  width: 100%;
  border-bottom: 1px solid var(--color-secondary);
}
.faq__item:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------------
   .faq__q-row：質問行（クリックして開閉するボタン）
   button要素のデフォルトの見た目（枠線・背景・フォント）をリセットし、
   見た目はdivと同じフレックスレイアウトにする
------------------------------------------------------------ */
.faq__q-row {
  /* ボタンのリセット */
  display: flex;
  /* 質問文が複数行に折り返してもバッジとアイコンが1行目に揃うよう上揃え */
  align-items: flex-start;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;

  gap: 16px;
  padding: 20px 24px;
}

/* 質問バッジ＋質問文をまとめるグループ（アイコンとは別にflex-growさせる） */
.faq__q-group {
  display: flex;
  /* テキストが複数行になってもバッジが1行目に揃うよう上揃え */
  align-items: flex-start;
  /* A行のバッジ→テキストのgapと揃え、Q・Aのテキスト左端を一致させる */
  gap: 16px;
  flex: 1 1 0%;
  min-width: 0;
}

/* ------------------------------------------------------------
   .faq__badge：Q1・A1のような丸いバッジ
   --q（質問用：緑背景・白文字）／--a（回答用：薄緑背景・緑文字・枠線）
   の2種類をmodifierで分ける
------------------------------------------------------------ */
.faq__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 25px;
  flex-shrink: 0; /* テキストが長くても円形を保つ */

  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 175%;
  white-space: nowrap;
}

/* バッジは動かさず、質問文・アイコン側をバッジ中心に合わせて下げる */

.faq__badge--q {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.faq__badge--a {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

/* 質問文：PC版 text/pc/body（18px・400・175%） */
.faq__q-text {
  flex: 1 1 0%;
  min-width: 0;
  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);

  /* バッジ44pxと1行（約31.5px）の差の半分＝6.25px下げて中心を合わせる */
  margin-top: 6.25px;
}

/* ------------------------------------------------------------
   .faq__icon：開閉アイコン（＋／－）
   プラスとマイナスの画像を両方置いておき、
   .faq__item.is-open の有無でCSS側だけで表示を切り替える
------------------------------------------------------------ */
.faq__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;

  /* バッジ44pxとアイコン20pxの差の半分＝12px下げて中心を合わせる（PC/SP共通） */
  top: 12px;
}

.faq__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 初期状態：プラスを表示・マイナスを隠す */
.faq__icon-minus {
  display: none;
}

/* 開いている時：プラスを隠す・マイナスを表示 */
.faq__item.is-open .faq__icon-plus {
  display: none;
}
.faq__item.is-open .faq__icon-minus {
  display: block;
}

/* ------------------------------------------------------------
   .faq__a-row：回答行（開閉する部分の外枠）
   - max-height: 0 + overflow: hidden で閉じた状態を作る
   - paddingは内側の .faq__a-row-inner に持たせる（閉時の隙間防止）
   - 開くときはJS（main.js）が scrollHeight を max-height に設定する
     （回答の文章量がカードごとに違うため固定値にしない）
------------------------------------------------------------ */
.faq__a-row {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 回答行の内側：実際のレイアウトとpaddingはここに持たせる
   pr-56は、質問行のアイコン分のスペースに右側を揃えるための余白 */
.faq__a-row-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 56px 20px 24px;
}

/* 回答テキスト：PC版 text/pc/body（18px・400・175%） */
.faq__a-text {
  flex: 1 1 0%;
  min-width: 0;
  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);

  /* Q行と同じ考え方・同じ値で1行目の中心を合わせる */
  margin-top: 6.25px;
}

/* 回答テキスト内のpタグの余分なマージンをリセット */
.faq__a-text p {
  margin: 0;
}

/* 回答内の<ul>にだけインデントを付ける（ul自体が.faq__a-textの場合と、
   div.faq__a-text内に入れ子の場合の両方に対応。div側には付けない） */
.faq__a-text ul,
ul.faq__a-text {
  list-style: disc;
  padding-left: 27px;
}

/* ============================================================
   SP版（874px以下）の上書きスタイル
============================================================ */
@media screen and (max-width: 874px) {

  .section-faq__inner {
    flex-direction: column;
    gap: 32px;
    padding: 40px 16px;
    align-items: flex-start;
  }

  /* 上下にだけ8pxの余白（左右はセクション＋カードのpaddingで足りている） */
  .faq__list {
    padding: 8px 0;
  }

  /* SP版：質問行のpaddingを16pxに統一 */
  .faq__q-row {
    gap: 16px;
    padding: 16px;
  }

  /* 質問文：SP版 text/sp/body（16px・400・175%） */
  .faq__q-text {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  .faq__q-text {
  margin-top: 8px; /* (バッジ44px − 質問文1行28px) ÷ 2 */
  }

  /* 回答テキストも質問文と同じ値（バッジ44px・SP版の1行28px） */
  .faq__a-text {
    margin-top: 8px;
  }

  /* SP版：回答行の内側paddingも16pxに統一（PC版の非対称パディングをやめる） */
  .faq__a-row-inner {
    gap: 8px;
    padding: 16px;
  }

  /* 回答テキスト：SP版 text/sp/body（16px・400・175%） */
  .faq__a-text {
    font-size:   var(--text-sp-body-size);
    font-weight: var(--text-sp-body-weight);
    line-height: var(--text-sp-body-lh);
  }

  /* 箇条書きのインデント：SP版は24px
     PC版と同じ理由で、div.faq__a-text自体には付けない */
  .faq__a-text ul,
  ul.faq__a-text {
    padding-left: 24px;
  }

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