/* =============================================
   ミライコンパス - 進学方法ページ CSS
   ============================================= */

/* 入試方式カード */
.method-card {
  border-radius: 20px; padding: 28px 22px;
  text-align: center; color: white; font-weight: 700;
}
.method-card.m1 { background: linear-gradient(135deg, #FF6B35, #FF8C69); }
.method-card.m2 { background: linear-gradient(135deg, #4ECDC4, #38B2AC); }
.method-card.m3 { background: linear-gradient(135deg, #A855F7, #9333EA); }
.method-icon { font-size: 2.4rem; margin-bottom: 12px; }
.method-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.method-card p  { font-size: 0.82rem; opacity: 0.9; line-height: 1.6; }
.method-tag {
  display: inline-block; background: rgba(255,255,255,0.25);
  border-radius: 999px; padding: 4px 12px;
  font-size: 0.76rem; margin-top: 12px;
}

/* タイムライン */
.timeline { position: relative; padding-left: 40px; }
.timeline::before {
  content: ''; position: absolute; left: 14px; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(to bottom, var(--secondary), var(--purple));
  border-radius: 4px;
}
.timeline-item { position: relative; margin-bottom: 36px; }
.timeline-dot {
  position: absolute; left: -33px; top: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--secondary); border: 3px solid white;
  box-shadow: 0 0 0 3px var(--secondary);
}
.timeline-card {
  background: white; border-radius: 16px; padding: 24px 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.timeline-period {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 1px; margin-bottom: 6px;
}
.timeline-card h3 { font-weight: 900; color: var(--navy); font-size: 1.1rem; margin-bottom: 10px; }
.timeline-card p  { color: #555; font-size: 0.88rem; line-height: 1.7; }
.timeline-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.timeline-tag {
  border-radius: 999px; padding: 3px 12px;
  font-size: 0.78rem; font-weight: 700;
  background: rgba(78,205,196,0.12); color: var(--secondary);
}

/* ヒントカード */
.tip-card {
  background: white; border-radius: 16px; padding: 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
  display: flex; gap: 16px; align-items: flex-start;
}
.tip-emoji { font-size: 2rem; flex-shrink: 0; }
.tip-card h4 { font-weight: 900; color: var(--navy); margin-bottom: 6px; }
.tip-card p  { font-size: 0.86rem; color: #555; line-height: 1.6; }