/* ================================
   互い違い背景：ベース（div.section-bg）
   ================================ */
.section-bg{
  position: relative;
  width: 100%;
  padding: 56px 0;      /* セクション上下の余白 */
  overflow: hidden;     /* もあもあ（疑似要素）をはみ出さない */
  isolation: isolate;   /* z-indexの混線防止 */
}

/* 中身は “もあもあ” より上に表示 */
.section-bg > *{
  position: relative;
  z-index: 2;
}

/* ================================
   A: 桜っぽい明るい背景
   ================================ */
.section-bg--a{
  background:
    radial-gradient(circle at 20% 20%, #FFD5EC, transparent 35%),
    radial-gradient(circle at 80% 60%, #FFD5EC, transparent 55%),
    linear-gradient(180deg, #FFD5EC 0%, #FFD5EC 70%);
}

/* ================================
   B: 青みの落ち着いた背景
   ================================ */
.section-bg--b{
  background:
    radial-gradient(circle at 70% 25%, #FFEEFF, transparent 55%),
    radial-gradient(circle at 20% 70%, #FFEEFF, transparent 55%),
    linear-gradient(180deg, #FFEEFF 0%, #FFEEFF 70%);
}

/*上部なし*/
.section-bg--c{
  background:
    radial-gradient(circle at 20% 20%, #FFD5EC, transparent 35%),
    radial-gradient(circle at 80% 60%, #FFD5EC, transparent 55%),
    linear-gradient(180deg, #FFD5EC 0%, #FFD5EC 70%);
}

/* ================================
   切り替わりを “もあもあ” にする（上下フェード）
   → 次のセクション背景が自然ににじむ
   ================================ */
.section-bg--a::before,
.section-bg--a::after,
.section-bg--b::before,
.section-bg--b::after,
.section-bg--c::before,
.section-bg--c::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height: clamp(50px, 7vw, 150px); /* もあもあの強さ（大きいほどふわっと） */
  pointer-events:none;
  z-index: 1; /* 背景より上・中身より下 */
}

/* 上側：白い霧でフェード */
.section-bg--a::before,
.section-bg--b::before{
  top:0;
  background: linear-gradient(
    to bottom,
    rgba(255, 238, 255,0.95) 0%,
    rgba(255, 238, 255,0.55) 55%,
    rgba(255, 238, 255,0)    100%
  );
}

/* 下側：白い霧でフェード */
.section-bg--a::after,
.section-bg--b::after,
.section-bg--c::after{
  bottom:0;
  background: linear-gradient(
    to top,
    rgba(255, 238, 255,0.95) 0%,
    rgba(255, 238, 255,0.55) 55%,
    rgba(255, 238, 255,0)    100%
  );
}

/* 余白微調整（スマホ） */
@media (max-width: 768px){
  .section-bg{
    padding: 44px 0;
  }
}