/* =====================================================================
   feature-assort.css — 下層「コープデリの特長 / 毎日の家事がラクになる」（B02）
   ヘッダー（写真＋タイトル）＋導入文 / 白カード2つ（3行ジグザグ・3カラム）
   PC: 角丸カード。SP: 全幅の白バンド（クリーム地と切り替え）
   ===================================================================== */

/* ---- ヘッダー（写真＋タイトルオーバーレイ） ---- */
.p-fahero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;   /* lead の上下余白は .p-fahero__lead の margin-block で制御 */
}
.p-fahero__media { position: relative; width: 100%; aspect-ratio: 375 / 400; overflow: hidden; }
.p-fahero__media picture { display: block; }
.p-fahero__media img {
  display: block;
  width: 100%;
  height: 100%;
}
/* タイトル（左寄せ・半透明白・右上下のみ角丸） */
.p-fahero__title {
  position: absolute;
  top: 90px; left: 0;
  width: min(280px, 78%);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background: rgba(255, 255, 255, .64);
  border-radius: 0 var(--radius-40) var(--radius-40) 0;
}
.p-fahero__h {
  font-size: 28px;   /* SP: 見出しは28px固定（PCは1024px〜で40px） */
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-fahero__sub {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--text-default);
}
/* 導入文 */
.p-fahero__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  margin-block: var(--space-64);   /* 上下64px */
  padding-inline: var(--container-pad);
  text-align: center;
}
.p-fahero__lead-h {
  font-size: clamp(20px, 5.4vw, 24px);
  line-height: 1.55;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-fahero__lead-t {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-default);
  /* SP: 左寄せ（PCで中央に戻す） */
  text-align: left;
  align-self: stretch;
}
/* SP: リード文の余白（上45 / 見出し↔本文24 / 下45） */
@media (max-width: 599px) {
  .p-fahero__lead { margin-block: 45px; gap: 24px; }
  /* タイトルをKVの縦中央に（横は据え置き） */
  .p-fahero__title { top: 50%; transform: translateY(-50%); }
}

/* ---- 白カードセクション共通 ---- */
.p-fasec { width: 100%; }
.p-fasec + .p-fasec { margin-top: var(--space-40); }   /* セクション間40px（PC/タブレット/SP共通） */
/* heroリード: SPのみ改行（≥600pxでは1行） */
@media (min-width: 600px) { .p-fahero__sp-br { display: none; } }
.p-fasec__inner {
  position: relative;
  background: var(--container-white);
  padding: var(--space-48) var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  overflow: hidden;
}
/* 見出し（ラインマーカー風） */
.p-fasec__title {
  font-size: clamp(24px, 6.2vw, 32px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
  text-align: center;
}
.p-fasec__title span {
  background: linear-gradient(transparent 72%, #e0f2bd 72%);
}

/* ---- 01: 3行ジグザグ ---- */
.p-fasec__rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}
.p-farow { position: relative; }
.p-farow__img { position: relative; }
.p-farow__img img:not(.p-fadeco) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 327 / 207;
  object-fit: cover;
  border-radius: var(--radius-24);
}
.p-farow__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-24);
}
.p-farow__body--center { text-align: center; align-items: center; }
.p-farow__title {
  font-size: clamp(20px, 5.4vw, 28px);
  line-height: 1.55;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-farow__text {
  font-size: 16px;
  line-height: 1.9;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}

/* 装飾マスコット */
.p-fadeco { position: absolute; display: block; pointer-events: none; z-index: 2; }
/* 左: 行1の大きい画像の箱を基準に左下（少し下にはみ出し） */
.p-fadeco--all    { width: 110px; left: -30px; bottom: -26px; }
/* 赤ちゃん: 行2の画像の箱の上端にせり出す（底辺を画像上端に合わせる） */
.p-fadeco--baby { width: 120px; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(100% - 2px); }
/* テキスト下に流し込み（重なり回避） */
.p-fadeco--kinako { position: static; width: 100%; margin-top: var(--space-24); align-self: center; }
.p-fadeco--mizu   { position: static; width: 106px; margin-top: var(--space-16); align-self: flex-end; }

/* SP/タブレット: 行2(split・非rev)は「写真 → テキスト → 足あと装飾」の縦並び */
@media (max-width: 1023px) {
  .p-farow--split:not(.p-farow--rev) { display: flex; flex-direction: column; padding-top: 132px; }   /* 赤ちゃん(約112px)分＋20pxの余白を上に確保し、テキストと被らせない */
  .p-farow--split:not(.p-farow--rev) .p-farow__img { order: -1; }   /* 写真を上に */
  .p-farow__body--center { text-align: left; align-items: stretch; }   /* 行1テキストはSPで左揃え */
}

/* ---- 02: 3カラムカード ---- */
.p-facards {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.p-facard { display: flex; flex-direction: column; gap: var(--space-24); }
.p-facard__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 327 / 207;
  object-fit: cover;
  border-radius: var(--radius-24);
}
.p-facard__body { display: flex; flex-direction: column; gap: var(--space-8); }
.p-facard__title {
  font-size: 20px;
  line-height: 1.7;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-facard__sub {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-default);
}

/* =====================================================================
   PC（min-width:1024px）
   ===================================================================== */
@media (min-width: 1024px) {
  .p-fahero { gap: 0; padding-top: var(--space-64); }   /* gapは0、lead上下はmargin-blockで64px */
  .p-fahero__lead-t { text-align: center; align-self: auto; }   /* PCは中央寄せ */
  .p-fahero__media {
    width: min(1200px, calc(100% - 240px));
    height: 400px;
    aspect-ratio: auto;
    border-radius: var(--radius-40);
    overflow: hidden;
  }
  .p-fahero__media img { object-fit: cover; }   /* PCは横長KV(1200×400)を収める */
  .p-fahero__title {
    top: 50%;
    transform: translateY(-50%);
    width: 600px;
    padding: var(--space-32) var(--space-40);
  }
  .p-fahero__h { font-size: 40px; line-height: 1.45; letter-spacing: 0; }
  .p-fahero__sub { font-size: 16px; }

  .p-fasec { padding-inline: var(--space-24); }
  .p-fasec__inner {
    max-width: 1200px;
    margin-inline: auto;
    border-radius: var(--radius-40);
    padding: var(--space-64);
    gap: var(--space-64);
  }
  .p-fasec__rows { gap: var(--space-80); max-width: 1072px; }

  /* 行1: 画像（全幅）→ テキスト中央 */
  .p-farow--full { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
  .p-farow--full .p-farow__img { width: 100%; }
  .p-farow--full .p-farow__img img:not(.p-fadeco) { aspect-ratio: 1072 / 678; }
  .p-farow--full .p-farow__body { max-width: 760px; }

  /* 行2・行3: テキスト／画像 横並び */
  .p-farow--split {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-40);
  }
  .p-farow--split .p-farow__img { flex: none; width: 620px; }
  .p-farow--split .p-farow__img img:not(.p-fadeco) { aspect-ratio: 620 / 392; }
  .p-farow--split .p-farow__body { flex: 1; padding-top: 0; }
  .p-farow--rev { align-items: flex-start; }

  .p-fadeco--all    { width: 166px; left: 10px; bottom: -80px; }
  .p-fadeco--baby { width: 160px; left: auto; right: 20px; transform: none; }   /* PCは画像の右上に寄せる（bottom:100%継承） */
  .p-fadeco--kinako { position: absolute; bottom: 0; right: 620px; width: 390px; }   /* 行基準：右側620px画像の左外へ・下揃え */
  .p-fadeco--mizu   { width: 161px; }

  /* 02: 3カラム */
  .p-facards { flex-direction: row; gap: var(--space-40); }
  .p-facard { flex: 1; min-width: 0; }
}