/* effects.css — グーチング®がもたらす5つの効果（Figma: 2247:66540）
   実値: pt 96 pb 160 / 見出し 32px Black + 青バー + リード 16px Medium
         カード #F3F3F3 radius 16 pt 32 px 32 gap 16 / タイトル 21.33px Bold
         黒バー 40x4 / 本文 16px Bold #333 / イラスト 224x124（下端配置）*/

.effects {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-96) 0 var(--space-160);
}

.effects__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);
  width: 100%;
  max-width: var(--layout-max);
}

.effects__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.effects__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.effects__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-primary);
}

.effects__lead {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

.effects__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  padding: 0 var(--space-80);
}

.effects__row {
  display: flex;
  gap: var(--space-24);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.effect-card {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-32) var(--space-16); /* Figma実値: 上32 / 左右32 / 下16 */
  border-radius: var(--radius-lg);
  background: var(--color-gray-light);
  overflow: hidden;
}

.effect-card__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  text-align: center;
}

.effect-card__bar {
  display: block;
  width: 2.5rem;
  height: .25rem;
  background: var(--color-black);
}

.effect-card__text {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  text-align: center;
}

/* Figmaは「見出し・バー・本文」をgap16の入れ子にまとめ、その塊とイラストの間はgap8。
   実装は4つを並列に並べたgap16なので、イラストだけ8px詰めて 16 → 8 にする。 */
.effect-card__visual {
  width: 14rem;
  height: 7.75rem;
  margin-top: calc(-1 * var(--space-8));
  overflow: hidden;
}

.effect-card__visual img {
  display: block;
  width: auto;
  height: 100%;
  margin-inline: auto;
}

/* --- SP: カードは1カラム --------------------------------------------------- */
@media (max-width: 767px) {
  .effects {
    padding: var(--space-64) 0 var(--space-40);
  }
  .effects__inner {
    gap: var(--space-40);
  }
  /* PC用の<br>を無効化し、SPは素の折返しに任せる（左寄せ・左右24px） */
  .effects__lead br {
    display: none;
  }
  .effects__lead {
    padding-inline: var(--space-24);
    text-align: left;
  }
  .effects__grid {
    padding: 0 var(--space-24);
  }
  .effects__row {
    flex-direction: column;
    gap: var(--space-24);
  }
}