/* =====================================================================
   feature-top.css — 下層ページ「コープデリの特長」TOP（B01）
   KVバナー＋見出し ＋ 3つの理由ブロック
   PC: 白い角丸カード＋画像/テキスト左右交互
   SP: カードなしで「見出し → 画像(角丸24) → 全幅ボタン」の縦並び
   ===================================================================== */
.p-fthero { background: var(--bg-default); }
.p-fthero__img { position: relative; }
.p-fthero__img > picture img { width: 100%; height: auto; display: block; }

/* 画像下部中央の山型装飾（背景色と同色でくり抜きに見せる） */
.p-fthero__mountain {
  position: absolute;
  left: 50%;
  bottom: -2px;               /* 継ぎ目のヘアラインを防ぐ */
  width: 320px;               /* SP: 横幅320px固定（比率維持） */
  transform: translateX(-50%);
  pointer-events: none;
}
.p-fthero__mountain img { width: 100%; height: auto; }
.p-fthero__mountain-pc { display: none; }
.p-fthero__mountain-sp { display: block; }
/* KV画像の切替(600px)に合わせて山型も切替 */
@media (min-width: 600px) {
  .p-fthero__mountain { width: 640px; }  /* PC: 横幅640px固定（比率維持） */
  .p-fthero__mountain-pc { display: block; }
  .p-fthero__mountain-sp { display: none; }
}
.p-fthero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: 5px var(--container-pad) 0;
  text-align: center;
}
.p-fthero__eyebrow {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-orange);
}
.p-fthero__dots { width: 64px; height: auto; }
.p-fthero__title {
  margin-top: var(--space-12);
  font-size: clamp(26px, 6.4vw, 40px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
/* SP: 見出しサイズを28pxで固定 */
@media (max-width: 599px) {
  .p-fthero__title { font-size: 28px; }
}
/* SPのみ改行（≥600pxでは1行） */
@media (min-width: 600px) { .p-fthero__sp-br { display: none; } }
.p-fthero__lead {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-default);
}

/* ---- 3つの理由 ---- */
.p-ftlist {
  position: relative;
  background: var(--bg-default);
  padding: 132px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}

/* 装飾（白カード／写真を起点に配置。SP基準・PCは後段で上書き） */
.p-ftblock__deco {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  z-index: 2;
}
.p-ftblock__deco--baby   { width: 120px; top: -78px; right: 16px; }    /* block1: 赤ちゃん（カード右上） */
.p-ftblock__deco--car    { width: 64px;  top: -28px; right: -6px; }    /* block2: 車＋星（写真の右上） */
.p-ftblock__deco--bottle { width: 68px;  bottom: -24px; left: -10px; } /* block2: 哺乳瓶＋星（写真の左下） */
.p-ftblock__deco--chicken{ width: 140px; bottom: -28px; right: -16px; }/* block3: 鶏（写真の右下） */
/* SP: 赤ちゃん装飾を左右中央へ */
@media (max-width: 599px) {
  .p-ftblock__deco--baby { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ブロック（SP: 白の全幅バンド。クリームのセクション地＝ブロック間の余白と色が切り替わる） */
.p-ftblock {
  position: relative;   /* 装飾(.p-ftblock__deco)の起点 */
  width: 100%;
  background: var(--container-white);
  padding: var(--space-48) var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}
.p-ftblock__head,
.p-ftblock__img,
.p-ftblock__btn { width: 100%; max-width: 480px; }
.p-ftblock__head { display: flex; flex-direction: column; gap: var(--space-8); align-items: center; text-align: center; }
.p-ftblock__title {
  font-size: clamp(24px, 6.2vw, 32px);
  line-height: 1.4;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
.p-ftblock__sub {
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}
.p-ftblock__img { position: relative; width: 100%; }   /* 写真起点の装飾用 */
.p-ftblock__img > img:not(.p-ftblock__deco) {           /* 写真本体のみ（装飾imgは除外） */
  width: 100%;
  height: auto;
  aspect-ratio: 327 / 207;
  object-fit: cover;
  border-radius: var(--radius-24);
}
.p-ftblock__btn { width: 100%; color: var(--text-primary); }
/* SP: ブロック内の余白（gapを使わず各要素のマージンで明示） */
@media (max-width: 599px) {
  .p-ftblock { padding-top: 54px; gap: 0; }  /* 上辺→見出し54 / 下辺はpadding48 */
  .p-ftblock__head { gap: 25px; }            /* 見出し→サブ25 */
  .p-ftblock__img { margin-top: 25px; }      /* サブ→画像25 */
  .p-ftblock__btn { margin-top: 40px; }      /* 画像→ボタン40 */
}

/* ---- PC: 白い角丸カード＋左右交互 ---- */
@media (min-width: 1024px) {
  .p-ftlist { padding: var(--space-64) var(--space-24) 0; gap: var(--space-40); }
  /* PC: 装飾を大きめに */
  .p-ftblock__deco--baby   { width: 220px; top: -120px; right: 10px; }
  .p-ftblock__deco--car    { width: 90px;  top: -40px; right: -20px; }
  .p-ftblock__deco--bottle { width: 96px;  bottom: -36px; left: -28px; }
  .p-ftblock__deco--chicken{ width: 186px; bottom: -40px; right: -36px; }

  .p-ftblock {
    max-width: 1200px;
    background: var(--container-white);
    border-radius: var(--radius-40);
    padding: var(--space-64);
    display: grid;
    grid-template-columns: 460px 1fr;
    grid-template-areas:
      "img head"
      "img btn";
    column-gap: var(--space-80);
    row-gap: var(--space-40);
    align-content: center;
  }
  .p-ftblock--reverse {
    grid-template-columns: 1fr 460px;
    grid-template-areas:
      "head img"
      "btn  img";
  }
  .p-ftblock__img { grid-area: img; align-self: center; max-width: 460px; }
  .p-ftblock__head {
    grid-area: head;
    align-self: end;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-8);
  }
  .p-ftblock__btn { grid-area: btn; align-self: start; width: 280px; }
}