.lesson { padding-block: 100px 128px; scroll-margin-top: 48px; }
.lesson__header { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 64px; }
.lesson__eyebrow { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; color: var(--color-accent); font-size: 20px; font-weight: 500; letter-spacing: 0.12em; }
.lesson__eyebrow::after { width: 56px; height: 3px; background: var(--color-olive); content: ""; }
.lesson__title { margin: 0; font-size: clamp(30px, 3.15vw, 48px); font-weight: 700; line-height: 1.6; letter-spacing: 0.015em; }
.lesson__title span { display: block; }
.lesson__intro { max-width: 660px; padding-top: 42px; font-size: 18px; line-height: 2; }
.lesson__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 88px 0 0; padding: 0; list-style: none; }
.lesson-step { min-width: 0; }
.lesson-step__image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.lesson-step__title { display: flex; align-items: baseline; gap: 16px; margin: 26px 0 12px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.6; }
.lesson-step__number { flex-shrink: 0; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-size: 56px; font-weight: 400; line-height: 1; }
.lesson-step__description { font-size: 16px; line-height: 1.9; }

@media (max-width: 1100px) {
  .lesson { padding-block: 80px 104px; }
  .lesson__header { grid-template-columns: 1fr 1.05fr; gap: 40px; }
  .lesson__intro { font-size: 16px; }
  .lesson__steps { gap: 24px; margin-top: 64px; }
  .lesson-step__title { flex-direction: column; gap: 14px; }
  .lesson-step__number { font-size: 48px; }
}

@media (max-width: 800px) {
  .lesson__header { grid-template-columns: 1fr; gap: 24px; }
  .lesson__intro { padding-top: 0; }
  .lesson__steps { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
  .lesson-step { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
  .lesson-step__image { grid-row: span 2; }
  .lesson-step__title { margin: 0 0 14px; font-size: 22px; }
  .lesson-step__description { grid-column: 2; }
}

@media (max-width: 600px) {
  .lesson { padding-block: 56px 80px; scroll-margin-top: 24px; }
  .lesson__eyebrow { gap: 18px; margin-bottom: 22px; font-size: 16px; }
  .lesson__eyebrow::after { width: 40px; }
  .lesson__title { font-size: clamp(26px, 6.8vw, 36px); line-height: 1.7; }
  .lesson__intro { font-size: 16px; }
  .lesson-step { display: block; }
  .lesson-step__title { flex-direction: row; gap: 16px; margin: 24px 0 14px; font-size: 20px; }
  .lesson-step__number { font-size: 44px; }
  .lesson-step__description { font-size: 16px; }
}

/* 最終更新: 2026-11-04 00:37 */