/* =============================================
   ミライコンパス - トップページ専用CSS
   ============================================= */

/* ヒーロー */
.hero {
  min-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 60px 5%;
  position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255,107,53,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(78,205,196,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 60% 20%, rgba(168,85,247,0.10) 0%, transparent 70%);
}
.hero-badge {
  display: inline-block;
  background: var(--accent); color: var(--navy);
  font-weight: 900; font-size: 0.78rem; letter-spacing: 2px;
  padding: 6px 18px; border-radius: 999px;
  margin-bottom: 24px; position: relative; z-index: 1;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900; line-height: 1.15;
  margin-bottom: 20px; position: relative; z-index: 1;
  color: var(--navy);
}
.hero h1 .highlight {
  position: relative; display: inline-block; color: var(--primary);
}
.hero h1 .highlight::after {
  content: ''; position: absolute;
  left: 0; bottom: -4px; right: 0; height: 6px;
  background: var(--accent); border-radius: 4px;
  transform: skewX(-8deg);
}
.hero-sub {
  font-size: 1.1rem; color: #555; max-width: 580px;
  line-height: 1.8; margin: 0 auto 40px; position: relative; z-index: 1;
}

/* ヒーローカード */
.hero-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 860px; width: 100%;
  position: relative; z-index: 1;
}
.hero-card {
  background: white; border-radius: 20px; padding: 32px 24px;
  border: 3px solid transparent;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left; text-decoration: none; color: inherit;
  display: block;
}
.hero-card:hover { transform: translateY(-8px) scale(1.02); }
.hero-card.school { border-color: var(--primary); }
.hero-card.exam   { border-color: var(--secondary); }
.hero-card.career { border-color: var(--purple); }

.card-icon  { font-size: 2.8rem; margin-bottom: 14px; display: block; }
.card-title { font-size: 1.1rem; font-weight: 900; margin-bottom: 8px; }
.hero-card.school .card-title { color: var(--primary); }
.hero-card.exam   .card-title { color: var(--secondary); }
.hero-card.career .card-title { color: var(--purple); }
.card-desc  { font-size: 0.84rem; color: #666; line-height: 1.6; }
.card-arrow {
  display: inline-block; margin-top: 14px;
  font-weight: 700; font-size: 0.82rem;
  padding: 6px 14px; border-radius: 999px; color: white;
}
.hero-card.school .card-arrow { background: var(--primary); }
.hero-card.exam   .card-arrow { background: var(--secondary); color: var(--navy); }
.hero-card.career .card-arrow { background: var(--purple); }

/* フローティングシェイプ */
.shape {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  animation: float 6s ease-in-out infinite;
}
.shape1 { width:80px; height:80px; background:rgba(255,230,109,0.4); top:10%; left:8%; animation-delay:0s; }
.shape2 { width:50px; height:50px; background:rgba(78,205,196,0.3);  top:20%; right:10%; animation-delay:1s; border-radius:12px; }
.shape3 { width:60px; height:60px; background:rgba(168,85,247,0.2);  bottom:25%; left:5%; animation-delay:2s; border-radius:8px; }
.shape4 { width:40px; height:40px; background:rgba(255,107,53,0.25); bottom:30%; right:8%; animation-delay:3s; }

@media (max-width: 768px) {
  .hero-cards { grid-template-columns: 1fr; }
}