/* =====================================================================
   feature.css — TOP 特長（毎日のくらしを支える、3つの理由）
   PC(>=1024px): 画像とテキストを左右交互 / SP: 縦積み中央寄せ
   ===================================================================== */
.p-feature {
  position: relative;
  overflow-x: clip;   /* アクセントが画面幅を超えた分だけ横方向をクリップ（縦は維持） */
  background: var(--container-white);
  /* SPは上の余白を赤ちゃん画像(.p-feature__hope)のmargin-topに委ねるため0 */
  padding-block: 0 calc(var(--space-64) + 60px);
}
.p-feature__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
}

/* マスコット（PCのみ・左上） */
.p-feature__mascot { display: none; }

/* 赤ちゃん画像（SPのみ・見出し上に中央配置。上20px / 下48pxの余白） */
.p-feature__hope {
  display: block;
  width: 213px;
  max-width: 64%;
  height: auto;
  margin-top: 20px;   /* 上の隙間20px（about下〜赤ちゃん） */
  /* 下の隙間48pxは .p-feature__inner の gap (--space-48) が担う */
}

/* 見出し */
.p-feature__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}
.p-feature__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-feature__dots { width: 64px; height: auto; }
.p-feature__heading {
  margin-top: var(--space-12);
  font-size: clamp(32px, 6.4vw, 40px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-align: center;
}

/* リスト */
.p-feature__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  width: 100%;
}
.p-feature__item {
  position: relative;          /* SP: POINTバッジの絶対配置の基準 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding-top: 60px;           /* SP: POINT(高さ120)が写真上端から半分はみ出す分 */
}
.p-feature__image { width: 100%; max-width: 380px; position: relative; }  /* アクセント配置の基準 */
.p-feature__image img { width: 100%; height: auto; }

.p-feature__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.p-feature__title {
  font-size: 20px;
  line-height: 1.7;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
  margin-bottom: var(--space-16);
}
.p-feature__desc {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
  margin-bottom: var(--space-24);
}

/* POINTバッジ */
.p-point {
  position: absolute;          /* SP: 写真の上端中央に重ねる（下半分が写真にかかる） */
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 120px; height: 120px;
  display: grid;
  place-items: center;
}
.p-point__blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-point__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-point__label {
  padding: 0 var(--space-4) 2px;
  border-bottom: 2px solid var(--color-primary);
  font-size: 13px;
  line-height: 1.4;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.p-point__num {
  font-size: 34px;
  line-height: 1.3;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

/* SP: POINTバッジは写真上端に揃える */
@media (max-width: 1023px) {
  .p-feature__item:nth-child(2) .p-point,
  .p-feature__item:nth-child(3) .p-point { top: 0; }
}

/* 各POINTの「詳しく見る」 */
.p-feature__detail {
  min-width: 280px;              /* 説明文との間隔は .p-feature__desc の margin-bottom(24) で制御 */
}

.p-feature__more { color: var(--text-primary); }

/* SP: feature→lineup の区切りを中心に上下75pxずつ（feature側の下余白） */
@media (max-width: 599px) {
  .p-feature { padding-bottom: 75px; }
  .p-feature__item { gap: var(--space-40); }   /* 画像→見出しの間隔を40pxに */
  .p-feature__title { font-size: 24px; }        /* 見出しフォントサイズ */
}

/* アクセント画像（写真の四隅に重ねる装飾） */
.p-feature__accent { display: none; }

/* ---- SP/タブレット（<1024px）: 画像の縁に沿わせて配置。画面外は .p-feature の overflow-x: clip でカット ---- */
@media (max-width: 1023px) {
  .p-feature__image .p-feature__accent {
    display: block;
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12));
  }
  .p-feature__image .p-feature__accent--banana    { width: 36%; right: -10%; bottom: -12%; }
  .p-feature__image .p-feature__accent--bowl      { width: 34%; right: -4%; top: -16%; }
  .p-feature__image .p-feature__accent--octagon   { width: 26%; right: -15%; top: 42%; }
  .p-feature__image .p-feature__accent--egg-white { width: 18%; right: -2%; top: -12%; }
  .p-feature__image .p-feature__accent--eggs      { width: 30%; left: -10%;  bottom: -12%; }
}

/* 下部の波形（白セクション → クリーム）。白い波がクリーム地へ下に伸びる */
.p-feature__wave {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  line-height: 0;
  background: var(--bg-default);
  transform: scaleY(-1);
}
.p-feature__wave img { display: block; width: 100%; height: auto; }

/* ---- PC: 左右交互 ---- */
@media (min-width: 1024px) {
  .p-feature { padding-top: var(--space-64); } /* SPで0にした上余白をPCは元に戻す */
  .p-feature__hope { display: none; }          /* 赤ちゃんはSPのみ */
  .p-feature__mascot {
    display: block;
    position: absolute;
    top: -36px; left: 0;
    width: 230px; height: auto;
    z-index: 2;
  }
  .p-feature__list { gap: var(--space-80); }
  .p-feature__item {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-64);
    padding-top: 0;            /* SPのはみ出し用余白を解除 */
  }
  .p-feature__item:nth-child(even) { flex-direction: row-reverse; }
  .p-feature__image { flex: 0 0 auto; width: 46%; max-width: 500px; }
  .p-feature__body {
    flex: 1 1 0;
    min-width: 0;
  }
  .p-point {                   /* PCは本文カラム内の通常フロー（タイトル上）に戻す */
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 150px; height: 150px;
    margin-bottom: var(--space-32);   /* SPの gap 相当（バッジ→タイトル）を margin で保持 */
  }
  .p-point__label { font-size: 14px; }
  .p-point__num { font-size: 40px; }
  .p-feature__title { white-space: nowrap; }

  /* ---- アクセント画像（写真基準で絶対配置） ----
     `.p-feature__image img { width:100% }` に勝つよう .p-feature__image 配下で指定 */
  .p-feature__image { position: relative; }
  .p-feature__image .p-feature__accent {
    display: block;
    position: absolute;
    z-index: 1;                /* 写真の上に重ねる */
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .12));
  }
  .p-feature__image .p-feature__accent--banana    { width: 42%; right: -7%;  bottom: -14%; }
  .p-feature__image .p-feature__accent--bowl      { width: 40%; right: -8%;  top: -22%; }
  .p-feature__image .p-feature__accent--octagon   { width: 30%; right: -130px; top: 36%; }
  .p-feature__image .p-feature__accent--egg-white { width: 20%; right: -3%;  top: -14%; }
  .p-feature__image .p-feature__accent--eggs      { width: 34%; left: -9%;   bottom: -16%; }
}