/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  padding-top: var(--header-h);
  background: linear-gradient(160deg, #0f1f3d 0%, #1a3a6e 40%, #0d5fc2 70%, #1fc776 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Floating blocks */
.hero-blocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-block {
  position: absolute;
  border-radius: 6px;
  opacity: 0.13;
  animation: floatBlock linear infinite;
}

.hero-block:nth-child(1) { width:58px;  height:58px;  background:var(--green); left:7%;  top:22%; animation-duration:8s;  animation-delay:0s;   }
.hero-block:nth-child(2) { width:38px;  height:38px;  background:var(--blue);  left:14%; top:62%; animation-duration:11s; animation-delay:-2s;  }
.hero-block:nth-child(3) { width:76px;  height:76px;  background:var(--accent);left:86%; top:14%; animation-duration:9s;  animation-delay:-4s;  }
.hero-block:nth-child(4) { width:28px;  height:28px;  background:var(--accent2);left:76%;top:58%; animation-duration:13s; animation-delay:-6s;  }
.hero-block:nth-child(5) { width:50px;  height:50px;  background:var(--green); left:92%; top:78%; animation-duration:10s; animation-delay:-1s;  }
.hero-block:nth-child(6) { width:44px;  height:44px;  background:var(--blue);  left:3%;  top:82%; animation-duration:12s; animation-delay:-3s;  }
.hero-block:nth-child(7) { width:24px;  height:24px;  background:var(--accent);left:50%; top:8%;  animation-duration:7s;  animation-delay:-5s;  }
.hero-block:nth-child(8) { width:54px;  height:54px;  background:#fff;         left:62%; top:72%; animation-duration:14s; animation-delay:-7s;  }

@keyframes floatBlock {
  0%   { transform: translateY(0)     rotate(0deg); }
  50%  { transform: translateY(-28px) rotate(9deg); }
  100% { transform: translateY(0)     rotate(0deg); }
}

/* Inner */
.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 860px;
  padding: 60px 24px;
  animation: heroFadeIn .9s ease both;
}

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

.hero-inner h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.2;
  margin-bottom: 26px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

.hero-inner h1 em {
  font-style: normal;
  color: #7effa0;
  position: relative;
}
.hero-inner h1 em::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  border-radius: 4px;
}

.hero-sub {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.9;
  color: rgba(255,255,255,0.82);
  margin-bottom: 40px;
}

.hero-stats {
  display: flex;
  gap: 48px;
  justify-content: center;
  margin-top: 56px;
  flex-wrap: wrap;
}

.hero-stat-num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #7effa0;
  line-height: 1;
}

.hero-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  margin-top: 6px;
}

/* ---------- Reasons ---------- */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.reason-card {
  background: white;
  border-radius: var(--radius);
  padding: 40px 30px 36px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.reason-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.reason-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.reason-card:nth-child(1)::before { background: linear-gradient(90deg, var(--green), #1fc776); }
.reason-card:nth-child(2)::before { background: linear-gradient(90deg, var(--blue), #6ea8fe); }
.reason-card:nth-child(3)::before { background: linear-gradient(90deg, var(--accent), var(--accent2)); }

.reason-num {
  position: absolute;
  top: 12px; right: 20px;
  font-family: var(--font-mono);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.09;
  color: var(--navy);
}

.reason-icon {
  display: block;
  width: 64px; height: 64px;
  border-radius: 12px;
  background: var(--green-light);
  object-fit: contain;
  margin-bottom: 20px;
}

.reason-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.4;
}

.reason-card p { font-size: 14px; line-height: 1.85; color: var(--gray); }

/* ---------- Courses (top) ---------- */
.top-courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s, border-color .3s;
  text-decoration: none;
  color: inherit;
  display: block;
  border: 2px solid transparent;
}
.course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--green); }

.course-thumb {
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.course-thumb .icon-img--hero {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
}
.course-card:nth-child(1) .course-thumb { background: linear-gradient(135deg, #1a3a6e, #3dba5e); }
.course-card:nth-child(2) .course-thumb { background: linear-gradient(135deg, #2d1b69, #c084fc); }
.course-card:nth-child(3) .course-thumb { background: linear-gradient(135deg, #7c2d12, #fb923c); }

.course-body { padding: 24px; }

.course-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.course-card:nth-child(1) .course-tag { background: var(--green-light); color: var(--green-dark); }
.course-card:nth-child(2) .course-tag { background: #f3e8ff; color: #7c3aed; }
.course-card:nth-child(3) .course-tag { background: #fff7ed; color: #c2410c; }

.course-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 10px;
}

.course-body p { font-size: 13px; color: var(--gray); line-height: 1.8; margin-bottom: 20px; }

.course-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s;
}
.course-link::after { content: '→'; }
.course-card:hover .course-link { gap: 10px; }

/* ---------- Flow ---------- */
.flow-steps {
  display: flex;
  gap: 0;
  position: relative;
}

.flow-steps::before {
  content: '';
  position: absolute;
  top: 38px; left: 60px; right: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  z-index: 0;
}

.flow-step {
  flex: 1;
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.flow-step-num {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 22px;
  color: white;
  margin: 0 auto 20px;
}
.flow-step:nth-child(1) .flow-step-num { background: var(--green); box-shadow: 0 0 0 6px rgba(61,186,94,0.22); }
.flow-step:nth-child(2) .flow-step-num { background: var(--blue);  box-shadow: 0 0 0 6px rgba(26,115,232,0.22); }
.flow-step:nth-child(3) .flow-step-num { background: var(--accent);box-shadow: 0 0 0 6px rgba(245,166,35,0.22); }
.flow-step:nth-child(4) .flow-step-num { background: var(--accent2);box-shadow: 0 0 0 6px rgba(255,107,53,0.22); }

.flow-step h4 { font-family: var(--font-display); font-size: 17px; font-weight: 900; margin-bottom: 10px; }
.flow-step p  { font-size: 13px; color: rgba(255,255,255,0.70); line-height: 1.8; }

/* ---------- Voices ---------- */
.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.voice-card {
  background: white;
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  position: relative;
}
.voice-card::before {
  content: '"';
  font-family: Georgia, serif;
  font-size: 80px;
  color: var(--green-light);
  position: absolute;
  top: -10px; left: 18px;
  line-height: 1;
  z-index: 0;
}

/* 星評価 — CSSのみで5つ描画 */
.voice-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.voice-stars::before {
  content: '';
  display: block;
  /* 5つの星を clip-path で並べる代わりに、
     シンプルなバー方式でレーティングを表現 */
}
/* 星の個別要素 */
.star {
  display: inline-block;
  width: 14px; height: 14px;
  background: #f59e0b;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.voice-text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.voice-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.voice-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.voice-avatar .icon-img--md {
  width: 44px; height: 44px;
  border-radius: 50%;
}
.voice-card:nth-child(1) .voice-avatar { background: var(--green-light); }
.voice-card:nth-child(2) .voice-avatar { background: #eff6ff; }
.voice-card:nth-child(3) .voice-avatar { background: #fff7ed; }

.voice-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.voice-meta { font-size: 12px; color: var(--gray); margin-top: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .reasons-grid,
  .top-courses-grid,
  .voices-grid { grid-template-columns: 1fr; }

  .flow-steps { flex-direction: column; gap: 28px; }
  .flow-steps::before { display: none; }
}