/* =====================================================
   school.css — くむすたスクール専用スタイル
   education.qumcum.com/school.html
   ===================================================== */

/* ===== PAGE HERO ===== */
.school-hero {
  padding: 80px 0;
  background: #1A2236 url('../images/school_room.jpg') center center / cover no-repeat;
  position: relative;
  color: #fff;
}
.school-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 34, 54, 0.82);
  pointer-events: none;
}
.school-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.school-hero-badge {
  display: inline-block;
  background: rgba(214,158,46,0.2);
  border: 1px solid rgba(214,158,46,0.45);
  color: #F6C948;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.school-hero-title {
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 20px;
}
.school-hero-lead {
  font-size: 15px;
  line-height: 1.9;
  color: #ffffff;
  margin-bottom: 24px;
  max-width: 480px;
}
.school-hero-bridge {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  margin-bottom: 20px;
  max-width: 480px;
}
.school-hero-subsidy {
  display: block;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: #F6C948;
  margin-top: 8px;
}
.school-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.school-hero-visual img {
  width: 100%;
  max-width: 460px;
  border-radius: 8px;
}

/* ===== CHANGE (変化) SECTION ===== */
.school-change-section {
  background: #fff;
}
.school-change-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 52px;
}
.school-change-title {
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 900;
  color: #1E2A3B;
  line-height: 1.4;
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}
.school-change-lead {
  font-size: 15px;
  color: #718096;
  line-height: 1.9;
}
.school-change-lead p {
  margin-bottom: 14px;
}
.school-change-lead p:last-child {
  margin-bottom: 0;
}
.school-change-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.school-change-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px 24px;
}
.school-change-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #EFF5FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #1A56A4;
}
.school-change-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 10px;
  line-height: 1.4;
}
.school-change-card-desc {
  font-size: 15px;
  color: #718096;
  line-height: 1.8;
}
.school-change-card--accent {
  background: #EBF4FF;
  border-color: #BDD7F5;
}
.school-change-card--accent .school-change-icon {
  background: #1A56A4;
  color: #fff;
}
.school-change-card--accent .school-change-card-title {
  color: #1A3A6B;
}
.school-change-card--accent .school-change-card-desc {
  color: #4A5568;
}

/* ===== TRUST (信頼) SECTION ===== */
/* section--alt provides #F7F9FC background */
.school-trust-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}
.school-trust-title {
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 900;
  color: #1E2A3B;
  line-height: 1.4;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.school-trust-lead {
  font-size: 15px;
  color: #718096;
  line-height: 1.9;
}
.school-trust-footer {
  text-align: center;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid #D1D9E6;
}
.school-trust-footer p {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: #1E2A3B;
  line-height: 1.85;
}

/* ===== ANXIETY RELIEF (不安解消) SECTION ===== */
/* section (no --alt) provides white background, contrasting with adjacent #F7F9FC sections */
.school-anxiety-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 52px;
}
.school-anxiety-title {
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 900;
  color: #1E2A3B;
  line-height: 1.4;
  margin-bottom: 28px;
  letter-spacing: -0.02em;
}
.school-anxiety-lead {
  font-size: 15px;
  color: #718096;
  line-height: 1.9;
}
.school-anxiety-lead p {
  margin-bottom: 14px;
}
.school-anxiety-lead p:last-child {
  margin-bottom: 0;
}
.school-anxiety-footer {
  text-align: center;
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid #E2E8F0;
}
.school-anxiety-footer p {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: #1E2A3B;
  line-height: 1.85;
}

/* ===== REASON (理由) SECTION ===== */
/* section--alt provides #F7F9FC background */
.school-reason-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 52px;
}
.school-reason-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  color: #1E2A3B;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.school-reason-lead {
  font-size: 16px;
  color: #4A5568;
  line-height: 1.85;
}
.school-reason-grid .material-card-header p {
  font-size: 15px;
  color: #1E2A3B;
}

.school-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 52px;
}
.school-reason-block {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 32px 28px;
}
.school-reason-num {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1A56A4;
  background: #EFF5FF;
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 16px;
}
.school-reason-block-title {
  font-size: 16px;
  font-weight: 700;
  color: #1E2A3B;
  line-height: 1.5;
  margin-bottom: 16px;
}
.school-reason-body p {
  font-size: 14px;
  color: #4A5568;
  line-height: 1.85;
  margin-bottom: 10px;
}
.school-reason-body p:last-child {
  margin-bottom: 0;
}
.school-reason-summary {
  max-width: 560px;
  margin: 56px auto 0;
  padding: 22px 28px;
  border-left: 3px solid #1A56A4;
  background: #fff;
  border-radius: 0 8px 8px 0;
}
.school-reason-summary p {
  font-size: 16px;
  font-weight: 700;
  color: #1A3A6B;
  line-height: 1.8;
}

/* ===== INTRO ===== */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}
.intro-text p {
  font-size: 15px;
  color: #4A5568;
  line-height: 1.9;
  margin-bottom: 16px;
}
.intro-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.intro-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.intro-point-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #EBF4FF;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A56A4;
}
.intro-point-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.intro-point-text h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 3px;
}
.intro-point-text p {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.7;
  margin: 0;
}

/* ===== CHALLENGES ===== */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.challenge-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}
.challenge-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: #FFF5F5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C53030;
}
.challenge-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.challenge-card-text h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 6px;
  line-height: 1.5;
}
.challenge-card-text p {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.7;
}

/* ===== SOLUTION ===== */
.solution-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}
.solution-text p {
  font-size: 15px;
  color: #4A5568;
  line-height: 1.9;
  margin-bottom: 16px;
}
.solution-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.solution-point {
  padding: 16px 18px;
  background: #F7F9FC;
  border-left: 3px solid #1A56A4;
  border-radius: 0 6px 6px 0;
}
.solution-point h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 4px;
}
.solution-point p {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.7;
  margin: 0;
}
.solution-diagram {
  background: #F7F9FC;
  border-radius: 8px;
  padding: 28px 24px;
}
.solution-diagram-title {
  font-size: 13px;
  font-weight: 700;
  color: #4A5568;
  text-align: center;
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}
.solution-diagram-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.solution-diagram-box {
  flex: 1;
  background: #EBF4FF;
  border-radius: 6px;
  padding: 14px 12px;
  text-align: center;
}
.solution-diagram-box-label {
  font-size: 10px;
  font-weight: 700;
  color: #1A56A4;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.solution-diagram-box-text {
  font-size: 13px;
  font-weight: 700;
  color: #1E2A3B;
}
.solution-diagram-box-sub {
  font-size: 11px;
  color: #718096;
  margin-top: 3px;
}
.solution-diagram-arrow {
  font-size: 18px;
  color: #CBD5E0;
  flex-shrink: 0;
}
.solution-diagram-note {
  margin-top: 16px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 6px;
  font-size: 12px;
  color: #718096;
  line-height: 1.7;
  text-align: center;
}

/* ===== LEARNING FLOW ===== */
.school-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
}
.school-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  position: relative;
}
.school-flow-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #CBD5E0;
}
.school-flow-num {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1A56A4;
  margin-bottom: 12px;
}
.school-flow-icon {
  width: 64px;
  height: 64px;
  background: #EBF4FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #1A56A4;
}
.school-flow-icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.school-flow-step h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 8px;
}
.school-flow-step p {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.7;
}
.school-flow-note {
  margin-top: 40px;
  padding: 18px 24px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
  font-size: 14px;
  color: #4A5568;
  line-height: 1.8;
  text-align: center;
}

/* ===== CLASS IMAGE / TIMELINE ===== */
.class-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  position: relative;
}
.class-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5%);
  right: calc(12.5%);
  height: 2px;
  background: #E2E8F0;
  z-index: 0;
}
.class-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.class-step-dot {
  width: 56px;
  height: 56px;
  background: #EBF4FF;
  border: 2px solid #1A56A4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1A56A4;
  background: #fff;
}
.class-step-time {
  font-size: 11px;
  font-weight: 700;
  color: #1A56A4;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.class-step h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 6px;
}
.class-step p {
  font-size: 12px;
  color: #718096;
  line-height: 1.6;
}
.class-video-section {
  margin-top: 56px;
}
.class-video-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #718096;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.class-video-caption {
  font-size: 15px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 16px;
}
.class-video-desc {
  font-size: 14px;
  color: #4A5568;
  line-height: 1.8;
  margin-bottom: 20px;
  max-width: 640px;
}
.class-video-wrap {
  border-radius: 8px;
  overflow: hidden;
  max-width: 720px;
  border: 1px solid #E2E8F0;
}
.class-video-wrap video {
  width: 100%;
  display: block;
  background: #000;
}

/* ===== LEARNING OUTCOMES ===== */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.outcome-card {
  padding: 24px 20px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  text-align: center;
}
.outcome-card-icon {
  width: 52px;
  height: 52px;
  background: #EBF4FF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #1A56A4;
}
.outcome-card-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.outcome-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 8px;
  line-height: 1.5;
}
.outcome-card p {
  font-size: 12px;
  color: #4A5568;
  line-height: 1.7;
}

/* ===== TEACHING MATERIALS ===== */
.material-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.material-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.material-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: #F7F9FC;
  border-bottom: 1px solid #E2E8F0;
}
.material-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: #EBF4FF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A56A4;
}
.material-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.material-card-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1E2A3B;
  line-height: 1.3;
}
.material-card-header p {
  font-size: 12px;
  color: #718096;
  margin-top: 3px;
}
.material-card-body {
  padding: 20px 24px;
}
.material-card-features {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.8;
  margin-bottom: 16px;
}
.material-card-features li {
  padding-left: 1.2em;
  position: relative;
}
.material-card-features li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: #CBD5E0;
}
.material-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.material-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.material-btn--pdf {
  background: transparent;
  color: #1A56A4;
  border: 1px solid #1A56A4;
}
.material-btn--pdf:hover { background: #EBF4FF; }
.material-btn--video {
  background: #1A56A4;
  color: #fff;
  border: 1px solid #1A56A4;
}
.material-btn--video:hover { background: #1443A0; }
.material-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== GRADE CURRICULUM ===== */
.grade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.grade-card {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.grade-header {
  padding: 16px 20px;
  border-bottom: 1px solid #E2E8F0;
}
.grade-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.grade-label {
  font-size: 15px;
  font-weight: 700;
  color: #1E2A3B;
}
.grade-years {
  font-size: 12px;
  color: #718096;
  background: #F7F9FC;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #E2E8F0;
}
.grade-body {
  padding: 16px 20px;
}
.grade-body li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #4A5568;
  padding: 7px 0;
  border-bottom: 1px solid #F7F9FC;
  line-height: 1.5;
}
.grade-body li:last-child { border-bottom: none; }
.grade-body li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  background: #1A56A4;
  border-radius: 50%;
  margin-top: 6px;
}

/* ===== INTRODUCTION EASE ===== */
.ease-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.ease-card {
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}
.ease-card-icon {
  width: 48px;
  height: 48px;
  background: #EBF4FF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #1A56A4;
}
.ease-card-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ease-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 8px;
  line-height: 1.4;
}
.ease-card p {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.7;
}

/* ===== ACHIEVEMENT ===== */
.achievement-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}
.achievement-facts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.achievement-fact {
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}
.achievement-fact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #718096;
  margin-bottom: 8px;
}
.achievement-fact h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 6px;
  line-height: 1.5;
}
.achievement-fact p {
  font-size: 13px;
  color: #4A5568;
  line-height: 1.7;
}
.achievement-video-area {}
.achievement-video-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #718096;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.achievement-video-caption {
  font-size: 15px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 12px;
}
.achievement-video-wrap {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
}
.achievement-video-wrap video {
  width: 100%;
  display: block;
  background: #000;
}

/* ===== PDF / VIDEO OVERLAY ===== */
.sc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.sc-overlay.active {
  opacity: 1;
  visibility: visible;
}
.sc-overlay-content {
  position: relative;
  width: 90%;
  max-width: 900px;
}
.sc-overlay-content--pdf {
  height: 85vh;
}
.sc-overlay-content--pdf iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 6px;
  background: #fff;
}
.sc-overlay-content video {
  width: 100%;
  border-radius: 6px;
}
.sc-overlay-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.sc-overlay-close:hover { background: rgba(255,255,255,0.25); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .school-hero { padding: 60px 0; }
  .school-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .school-hero-visual { order: -1; }

  .school-change-grid { grid-template-columns: 1fr; gap: 14px; }
  .school-trust-body { grid-template-columns: 1fr; }
  .school-trust-video { position: static; }

  .school-gs-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .school-flow-layout { grid-template-columns: 1fr; gap: 36px; }
  .school-flow-video-wrap { order: -1; }

  .school-reason-grid { grid-template-columns: 1fr; gap: 14px; }
  .school-reason-summary { max-width: 100%; }

  .intro-grid,
  .solution-content,
  .achievement-content { grid-template-columns: 1fr; gap: 36px; }

  .challenge-grid { grid-template-columns: 1fr; gap: 14px; }

  .school-flow-steps { grid-template-columns: 1fr; }
  .school-flow-step:not(:last-child)::after {
    content: '↓';
    right: auto;
    bottom: -16px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .class-timeline {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .class-timeline::before { display: none; }

  .outcome-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .material-grid { grid-template-columns: 1fr; }
  .grade-grid { grid-template-columns: 1fr; }
  .ease-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 480px) {
  .class-timeline { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr; }
  .school-gs-grid { grid-template-columns: 1fr; }
}

/* ===== GETTING STARTED (6-card 3-col) ===== */
.school-gs-section {
  background: #fff;
}
.school-gs-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 52px;
}
.school-gs-title {
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 900;
  color: #1E2A3B;
  line-height: 1.4;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.school-gs-lead {
  font-size: 15px;
  color: #718096;
  line-height: 1.9;
}
.school-gs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ===== CLASS FLOW ===== */
.school-flow-section {
  /* section--alt provides #F7F9FC */
}
.school-flow-header {
  text-align: center;
  margin-bottom: 48px;
}
.school-flow-title {
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 900;
  color: #1E2A3B;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.school-flow-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.school-flow-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.school-flow-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
}
.school-flow-step-num {
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1A56A4;
  background: #EFF5FF;
  border-radius: 4px;
  padding: 3px 10px;
  margin-top: 2px;
}
.school-flow-step-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 4px;
}
.school-flow-step-content p {
  font-size: 13px;
  color: #718096;
  line-height: 1.7;
}
.school-flow-video-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 20px 48px rgba(0,0,0,0.08);
}
.school-flow-video-label {
  font-size: 12px;
  color: #718096;
  margin-bottom: 10px;
}
.school-flow-video-wrap video {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== MATERIALS + CURRICULUM ===== */
.school-mat-section {
  background: #fff;
}
.school-mat-header {
  text-align: center;
  margin-bottom: 48px;
}
.school-mat-title {
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 900;
  color: #1E2A3B;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.school-mat-curriculum {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid #E2E8F0;
}
.school-mat-curriculum-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #1E2A3B;
  margin-bottom: 28px;
}

/* ===== TRUST ACHIEVEMENTS ===== */
.school-trust-achievements {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #D1D9E6;
}
.school-trust-achievement-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #4A5568;
}
.school-trust-achievement-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1A56A4;
  background: #EFF5FF;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.school-trust-card--compact {
  padding: 16px 20px;
  border-radius: 10px;
}
.school-trust-card--compact .school-change-card-title {
  font-size: 15px;
  margin-bottom: 6px;
}
.school-trust-card--compact .school-change-card-desc {
  font-size: 14px;
}

/* ===== TRUST BODY (cards + video 横並び) ===== */
.school-trust-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.school-trust-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.school-trust-video {
  position: sticky;
  top: 80px;
}
.school-trust-video-label {
  font-size: 13px;
  color: #718096;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.school-trust-video video {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.school-trust-video .school-trust-achievements {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #D1D9E6;
}

/* ===== TRUST PHOTOS ===== */
.school-trust-photos {
  display: flex;
  gap: 8px;
  margin-top: 40px;
  background: #F7F9FC;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 36px calc(50vw - 50%);
}
.school-trust-photo-item {
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
  height: 180px;
}
.school-trust-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== CTA ===== */
.st-cta-section {
  text-align: center;
  background: #fff;
}
.st-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .st-cta-buttons { flex-direction: column; align-items: center; }
}