.teacher { padding-block: 96px; background: #fbf2e9; scroll-margin-top: 32px; }
.teacher__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.teacher__photo { grid-area: 1 / 1 / 2 / 9; align-self: stretch; min-width: 0; }
.teacher__photo img { width: 100%; height: 100%; aspect-ratio: 1.08; object-fit: cover; object-position: 35% center; }
.teacher__panel { grid-area: 1 / 7 / 2 / 13; z-index: 1; min-width: 0; margin-block: 56px; padding: clamp(32px, 4vw, 64px); background: var(--color-background); }
.teacher__eyebrow { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; color: var(--color-accent); font-size: 18px; font-weight: 500; letter-spacing: 0.1em; }
.teacher__eyebrow::after { width: 56px; height: 3px; flex-shrink: 0; background: var(--color-olive); content: ""; }
.teacher__title { margin: 0; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.6; letter-spacing: 0.015em; }
.teacher__title span { display: block; }
.teacher__support, .teacher__profile p, .teacher__audience { font-size: 17px; line-height: 2; }
.teacher__support { margin-top: 24px; }
.teacher__profile { margin-top: 40px; }
.teacher__profile p span { display: block; }
.teacher__name { margin: 0 0 16px; color: var(--color-accent); font-size: 23px; font-weight: 700; line-height: 1.6; }
.teacher__audience { margin-top: 32px; }

@media (max-width: 1100px) {
  .teacher { padding-block: 80px; }
  .teacher__panel { padding: 32px; margin-block: 40px; }
  .teacher__eyebrow { gap: 18px; font-size: 16px; }
  .teacher__support, .teacher__profile p, .teacher__audience { font-size: 16px; }
  .teacher__name { font-size: 21px; }
}

@media (max-width: 960px) {
  .teacher__inner { grid-template-columns: minmax(0, 1fr); }
  .teacher__photo { grid-area: auto; }
  .teacher__photo img { height: auto; aspect-ratio: 4 / 3; object-position: center; }
  .teacher__panel { grid-area: auto; margin: -48px 32px 0; padding: 48px; }
  .teacher__title { font-size: 38px; }
}

@media (max-width: 600px) {
  .teacher { padding-block: 56px; scroll-margin-top: 24px; }
  .teacher__panel { margin: -28px 12px 0; padding: 30px 22px; }
  .teacher__eyebrow { gap: 16px; margin-bottom: 24px; font-size: 14px; letter-spacing: 0.08em; }
  .teacher__eyebrow::after { width: 32px; }
  .teacher__title { font-size: clamp(25px, 6.8vw, 34px); }
  .teacher__profile { margin-top: 32px; }
  .teacher__profile p span { text-wrap: balance; }
  .teacher__name { font-size: 20px; }
  .teacher__audience { margin-top: 26px; }
}

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