/* ============================================
   慶應経済研究会 - 共通スタイルシート
   7ページ構成用
   ============================================ */

/* --- 金粒子アニメーション --- */
.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #c9a227;
  border-radius: 50%;
  opacity: 0;
  animation: float-up linear infinite;
}

@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  15%  { opacity: 0.8; }
  50%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-420px) scale(0); }
}

.particle:nth-child(1)  { left: 8%;  animation-duration: 7s;   animation-delay: 0s;   width: 2px; height: 2px; }
.particle:nth-child(2)  { left: 22%; animation-duration: 9s;   animation-delay: 1.2s; }
.particle:nth-child(3)  { left: 35%; animation-duration: 6s;   animation-delay: 0.5s; width: 4px; height: 4px; }
.particle:nth-child(4)  { left: 48%; animation-duration: 8s;   animation-delay: 2s;   width: 2px; height: 2px; }
.particle:nth-child(5)  { left: 62%; animation-duration: 10s;  animation-delay: 0.8s; }
.particle:nth-child(6)  { left: 75%; animation-duration: 7.5s; animation-delay: 1.8s; width: 4px; height: 4px; }
.particle:nth-child(7)  { left: 88%; animation-duration: 6.5s; animation-delay: 3s;   width: 2px; height: 2px; }
.particle:nth-child(8)  { left: 15%; animation-duration: 11s;  animation-delay: 2.5s; }
.particle:nth-child(9)  { left: 55%; animation-duration: 8.5s; animation-delay: 0.3s; width: 2px; height: 2px; }
.particle:nth-child(10) { left: 92%; animation-duration: 7s;   animation-delay: 1.5s; }
.particle:nth-child(11) { left: 42%; animation-duration: 9.5s; animation-delay: 1s;   width: 2px; height: 2px; }
.particle:nth-child(12) { left: 70%; animation-duration: 6.8s; animation-delay: 3.5s; }

/* --- カードホバー --- */
.card-tilt {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-tilt:hover {
  transform: translateY(-6px) rotate(-0.5deg);
}
.card-tilt:nth-child(even):hover {
  transform: translateY(-6px) rotate(0.7deg);
}

/* --- スクロールフェードイン --- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- モバイルメニュー --- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-menu.open {
  max-height: 400px;
}

/* --- スムーススクロール --- */
html {
  scroll-behavior: smooth;
}

/* --- ロゴ --- */
.nav-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}
.hero-logo {
  height: 80px;
  width: auto;
  filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.3));
}
@media (min-width: 768px) {
  .hero-logo { height: 100px; }
}
.footer-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

/* --- Instagram グリッド --- */
.ig-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(201, 162, 39, 0.08);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ig-card:hover::after {
  opacity: 1;
}

/* --- ページヒーロー（サブページ共通） --- */
.page-hero {
  padding-top: 64px;
  min-height: 320px;
}
@media (min-width: 768px) {
  .page-hero { min-height: 380px; }
}

/* --- アクティブナビリンク --- */
.nav-active {
  color: #c9a227 !important;
  position: relative;
}
.nav-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #c9a227;
  border-radius: 1px;
}