/* =========================================================
   REASON — Compact 4-column grid
========================================================= */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1280px;
  margin: 60px auto 0;
}

.reason-card {
  position: relative;
  padding: 32px 28px 28px;
  background: #ffffff;
  border: 1px solid var(--c-line, rgba(10, 58, 48, 0.08));
  border-radius: 2px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: reasonFadeUp 0.5s both;
  animation-delay: calc(var(--i) * 0.06s);
}
.reason-card:hover {
  border-color: rgba(10, 58, 48, 0.18);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -16px rgba(10, 58, 48, 0.15);
}

.reason-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.reason-card__num {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-gold-deep, #a88846);
  letter-spacing: 0.02em;
  line-height: 1;
}
.reason-card__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold-soft, #d9c590), transparent);
}
.reason-card__en {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold-deep, #a88846);
  font-weight: 500;
}

.reason-card__title {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: var(--c-primary-deep, #0a3a30);
  margin-bottom: 14px;
}

.reason-card__desc {
  font-size: 18px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft, #5a6a64);
}

@keyframes reasonFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .reason-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 48px;
  }
  .reason-card { padding: 28px 24px 24px; }
  .reason-card__title { font-size: 18px; }
}

@media (max-width: 560px) {
  .reason-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 36px;
  }
  .reason-card { padding: 24px 22px 22px; }
  .reason-card__head { margin-bottom: 16px; }
  .reason-card__num { font-size: 18px; }
  .reason-card__title { font-size: 18px; line-height: 1.6; margin-bottom: 10px; }
  .reason-card__desc { font-size: 14px; line-height: 1.9; }
}