/* =========================
   Spring Plan - Empathy Module
   Scoped, repeatable, no JS
   ========================= */

/* container */
.sp-empathy .sp-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}

/* section */
.sp-empathy{
  padding: 72px 0;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
}

/* optional soft background (field: empathy_is_soft_bg) */
{% if module.empathy_is_soft_bg %}
.sp-empathy{
  background: linear-gradient(180deg, rgba(248,250,252,.9), #ffffff 60%);
}
{% endif %}

/* heading */
.sp-empathy__heading{
  text-align: center;
  margin: 0 0 22px; /* ← 14px → 22px に拡大 */
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.25;
  font-size: clamp(20px, 2.2vw, 28px);
  color: #0f172a;
}

/* lead */
.sp-empathy__lead{
  text-align: center;
  margin: 0 auto 34px; /* ← 26px → 34px に拡大 */
  max-width: 42rem;
  color: #475569;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.8;
}

/* grid: default 2 cols */
.sp-empathy__grid{
  display: grid;
  gap: 16px;
  align-items: stretch;
}

/* column presets (desktop) */
@media (min-width: 768px){
  .sp-empathy__grid--cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-empathy__grid--cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-empathy__grid--cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* mobile: 1 col */
@media (max-width: 767px){
  .sp-empathy__grid{ grid-template-columns: 1fr; }
}

/* card */
.sp-empathy__card{
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 18px;
  border-radius: 18px;
  background: rgba(248, 250, 252, .72);
  border: 1px solid rgba(203, 213, 225, .60);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

@media (hover:hover){
  .sp-empathy__card:hover{
    background: #fff;
    border-color: rgba(236, 72, 153, .18);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
  }
}

/* dot (pink accent) */
.sp-empathy__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 7px;
  background: #ec4899;
  box-shadow: 0 0 0 6px rgba(236, 72, 153, .12);
  flex: 0 0 auto;
}

/* text */
.sp-empathy__text{
  margin: 0;
  color: #334155;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.75;
}

/* responsive tweaks */
@media (max-width: 640px){
  .sp-empathy{ padding: 52px 0; }
  .sp-empathy__card{ padding: 16px; border-radius: 16px; }
  .sp-empathy__text{ font-size: 13.5px; }
  .sp-empathy__heading{ margin-bottom: 18px; } /* SPは少しだけ戻す */
  .sp-empathy__lead{ margin-bottom: 26px; }
}