/* ========================================
  Section 3: Mechanism (探索・仮決定)
  - Left text / Right weak diagram
  - Pink x Greige + one deep rose accent
======================================== */
.section-mechanism{
  position: relative;
  padding-block: clamp(64px, 9vw, 108px);
  /* background: var(--bg); */
  background-color: #FDF7F7;
}

/* わずかな表情（強すぎない） */
.section-mechanism::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0.10;
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(180, 90, 115, 0.08), transparent 70%),
    radial-gradient(65% 55% at 82% 35%, rgba(214, 205, 198, 0.10), transparent 72%),
    radial-gradient(70% 60% at 52% 88%, rgba(58, 43, 42, 0.04), transparent 76%);
}

.section-mechanism__container{
  width: min(var(--maxw), calc(100% - 32px));
  margin-inline: auto;   /* 忘れずに */
  position: relative;
  z-index: 1;
}
/* タイトル群は左に置く */
.section-mechanism__head{
  /* container基準で左 */
}
/* 2カラムをやめて、縦積み固定 */
.section-mechanism__stack{
  display: grid;
  gap: clamp(22px, 4vw, 36px);
  align-items: start;
}
.section-mechanism__content{
  max-width: none;      /* ←固定幅やめる */
  margin-inline: 0;     /* ←auto禁止（タイトルを左に戻す） */

}
.section-mechanism__title{
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: clamp(1.35rem, 1.05rem + 1.25vw, 2.15rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #b18a8a;
  font-weight: 500;
}
/* タイトルに完全追従する下線 */
/* .section-mechanism__title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.45em;
  width: clamp(13rem, 12.714rem + 1.43vw, 15rem);
  height: 1px;
  transform: translateX(-50%);
  background: rgba(154, 72, 92, 0.55);
} */
/* 見出し下の極細ライン */
/* .section-mechanism__rule{
  margin-top: clamp(12px, 2.2vw, 16px);
  width: clamp(44px, 8vw, 72px);
  height: 1px;
  background: rgba(154, 72, 92, 0.55);
} */

/* 中央寄せブロック */
.section-mechanism__center{
  margin-top: clamp(20px, 4vw, 32px);
  width: min(560px, 100%);  /* ←幅を決める */
  margin-inline: auto;      /* ←これで画面中央 */
  text-align: center;
}
/* もし左の余白が強く見えるなら、headとcenterの距離を微調整 */
.section-mechanism__head + .section-mechanism__center{
  margin-top: clamp(18px, 3.6vw, 28px);
}
/* ----------------------------------------
  行内アクセント（太字に頼らず）
  - うっすら下線＋薄い面
---------------------------------------- */
.u-accent{
  position: relative;
  display: inline;
  padding: 0 .08em;
  letter-spacing: 0.04em; /* ほんの少しだけ“引っかかり” */
}
.u-accent::after{
  content:"";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.08em;
  height: 0.42em;
  background: linear-gradient(
    to right,
    rgba(180, 90, 115, 0.00),
    rgba(180, 90, 115, 0.14),
    rgba(180, 90, 115, 0.00)
  );
  border-radius: 999px;
  pointer-events: none;
}
.u-accent--thin::after{
  height: 0.32em;
  opacity: 0.85;
}

/* ----------------------------------------
  Flow（時間差）
---------------------------------------- */
.section-mechanism__lead{
  margin: clamp(16px, 3vw, 22px) 0 0;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--text);
  opacity: 0.92;
  font-weight: 500;

}
.section-mechanism__lead--sub{
  margin-top: 12px;
  opacity: 0.86;
}

.section-mechanism__flow{
  margin-top: clamp(18px, 3vw, 26px);
  display: grid;
  gap: clamp(14px, 2.4vw, 18px);
  font-weight: 500;
}

/* 1つずつ入る（初期） */
.section-mechanism__flowItem{
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(1.5px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}

/* “弱い区切り”は維持（カード化しない） */
.section-mechanism__flowItem + .section-mechanism__flowItem{
  padding-top: clamp(14px, 2.2vw, 18px);
  border-top: 1px solid rgba(42, 42, 47, 0.08);
}

.section-mechanism__flowLine{
  display: block;
  font-size: clamp(15px, 1.65vw, 17px);
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* 2行目：濃度で“芯”を作る（サイズ差に依存しない） */
.section-mechanism__flowLine--sub{
  color: var(--text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: .22s;
}

/* inview で順に表示 */
.section-mechanism.is-inview .section-mechanism__flowItem{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: var(--d, 0ms);
}
.section-mechanism.is-inview .section-mechanism__flowLine--sub{
  opacity: 0.90;
  transform: translateY(0);
}

/* 図解：最後に入る（1カラムなので下でOK） */
.section-mechanism__diagram{
  width: min(420px, 100%);
  margin-inline: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .65s ease, transform .65s ease;
}
.section-mechanism.is-inview .section-mechanism__diagram{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 520ms;
}
.section-mechanism__img{
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.95;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-top: -50px;
  margin-bottom: -50px;
  
}