/* ── Section 3: Case Study（bento / 大きな数値 / 個人名なし） ──:
   - Maven の "Why top experts teach" を参考に、bento カード + 大きな数値表現
   - 個人名（池田）を撤去、quote は匿名化
*/
.section-case-study {
  background-color: var(--color-page);  /* アイボリー統一 */
}
.section-case-study .subhead-en {
  margin-bottom: var(--space-2);
}

.section-case-study__heading {
  font-size: var(--text-4xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
  line-height: var(--line-height-display);
}

/* ── Bento Grid ─────────────────────────────────
   Col 1: large narrative card (spans 2 rows)
   Col 2/3 row 1: stat cards
   Col 2/3 row 2: quote card (spans 2 cols)
*/
.section-case-study__bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-3);
  margin-bottom: var(--space-12);
}

/* ── case-card base ────────────────────────────── */
.case-card {
  position: relative;
  padding: var(--space-5, var(--space-4));
  padding: var(--space-5) var(--space-5);   /* 1.5rem * 1.66 = 40px */
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* 2026-05-30: アイボリー地に白で浮かせる（高級感） */
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.case-card__label {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* ── Card A: Narrative（大、白のまま維持） ── */
.case-card--narrative {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}
.case-card__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);            /* 狭い左カラムに収めるため 30→24px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  word-break: keep-all;                  /* 日本語の語中改行を禁止（「から」の途中折れ防止） */
}
.case-card__body {
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

/* ── Card B/C: Stat（大きな数値） ── */
.case-card--stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.case-card--mint {
  background-color: #E8F0E8;       /* パステルミント（復元） */
  border: 1px solid #D6E5D6;
}
.case-card--accent {
  background-color: var(--color-accent-light);  /* #EDE9FF（復元） */
  border: 1px solid rgba(107, 92, 231, 0.18);
}
.case-card__figure {
  font-family: var(--font-en);
  font-size: 4.5rem;               /* 72px */
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--color-text-primary);
  margin-top: var(--space-2);
}
.case-card__unit {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-left: 4px;
}
.case-card__caption {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-1);
}
.case-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}

/* ── Card D: Quote（cream-deep, 2col span） ── */
.case-card--quote {
  grid-column: 2 / span 2;
  grid-row: 2;
  background-color: #FBF4E4;       /* ソフトクリーム（復元） */
  border: 1px solid #EEE3CC;
}
.case-card__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.case-card__attribution {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

/* ── 講師の声 grid ────────────────────────── */
.section-case-study__voices-wrap {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.section-case-study__voices-label {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.section-case-study__voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.section-case-study__voice {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.section-case-study__voice:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.section-case-study__voice-mark {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-light);
  line-height: 1;
}
.section-case-study__voice-body {
  font-size: var(--text-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text-primary);
  flex: 1;
}
.section-case-study__voice-meta {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  row-gap: 2px;
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.section-case-study__voice-avatar {
  grid-row: span 2;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
}
.section-case-study__voice-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.section-case-study__voice-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .section-case-study__bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .case-card--narrative { grid-column: 1 / span 2; grid-row: 1; }
  .case-card--stat { grid-row: 2; }
  .case-card--mint { grid-column: 1; }
  .case-card--accent { grid-column: 2; }
  .case-card--quote { grid-column: 1 / span 2; grid-row: 3; }
}

@media (max-width: 768px) {
  /* minmax(0,1fr) + min-width:0 でグリッド破裂（カードが画面外へ伸びる）を防止 */
  .section-case-study__bento { grid-template-columns: minmax(0, 1fr); }
  .case-card { min-width: 0; }
  .case-card--narrative,
  .case-card--mint,
  .case-card--accent,
  .case-card--quote { grid-column: 1; grid-row: auto; }
  /* SP では狭いカードに収めるため keep-all を解除し、日本語を通常折返しに戻す
     （PC は左カラムが広く keep-all で「から」の途中折れを防ぐ意図を維持） */
  .case-card__heading { word-break: normal; }
  .section-case-study__voices-grid { grid-template-columns: 1fr; }
  .section-case-study__heading { font-size: var(--text-3xl); }
  .case-card__figure { font-size: 3.5rem; }
}