/* ========================================
  Section 4: Difference (L4-1)
  - Central vertical layout
  - Text only / No comparison visuals
======================================== */

.section-difference{
  position: relative;
  padding-block: clamp(72px, 10vw, 120px);
  background: var(--bg-soft, #fbf7ff);
  overflow: hidden; /* にじみがはみ出すのを制御 */
  transform: translateY(16px); /* ← 体感できる量 */
  opacity: 0;
}
/* 表示後 */
.section-difference.is-inview{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s ease;
}

/* ========================================
  - Section2と同系統の背景
  - ただし強度は抑え、中央寄りに
======================================== */
.section-difference::before{
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;

  background:
    radial-gradient(80% 70% at 50% 8%, rgba(255, 214, 228, 0.55), transparent 68%),
    radial-gradient(90% 75% at 50% 100%, rgba(255, 214, 228, 0.35), transparent 72%);
}
/* レイヤー2：ごく薄い粒子（“作った感”を消すための空気） */
.section-difference::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  mix-blend-mode: multiply;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  background-repeat: repeat;
}

.section-difference__container{
  width: min(var(--maxw-narrow, 860px), calc(100% - 32px));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.section-difference__inner{
  text-align: center;
}

/* 核メッセージ（2行固定） */
.section-difference__headline{
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + 1.25vw, 2.15rem);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--text);
  font-weight: 500;
  opacity: 0;
  transform: translateY(12px);

}
.section-difference.is-inview .section-difference__headline{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: .25s;
}
/* .section-difference.is-inview .section-difference__headline::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: clamp(13rem, 12.714rem + 1.43vw, 15rem);
  height: 1px;
  background: rgba(154, 72, 92, 0.55);
} */

/* 本文ブロック */
.section-difference__body{
  margin-top: clamp(28px, 4vw, 40px);
  display: grid;
  gap: clamp(20px, 3.5vw, 32px);
  opacity: 0;
  transform: translateY(12px);
  font-weight: 500;
}
.section-difference.is-inview .section-difference__body{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: .75s; /* ← 明確に遅らせる */
}
.section-difference__body p{
  margin: 0;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}