/* カスタムプロパティ（Tailwindのconfigと同期） */
:root {
  --color-primary: #002D6E;
  --color-accent: #FF9100;
  --color-success: #52C41A;
  --color-bg-base: #F0F2F5;
  --color-bg-light: #F9FAFB;
  --color-bg-sky: #E6F0FF;
}

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

/* カスタムアニメーション */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

/* スクロール連動アニメーションクラス */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* プログレスバーのアニメーション */
@keyframes fillProgress {
  from {
      width: 0;
  }
  to {
      width: var(--progress);
  }
}

.progress-bar {
  width: 0;
}
.progress-bar.animate {
  animation: fillProgress 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.3s;
}

/* シャドウの拡張 */
.shadow-orange {
  box-shadow: 0 10px 25px -5px rgba(255, 145, 0, 0.4), 0 8px 10px -6px rgba(255, 145, 0, 0.1);
}

/* 浮遊アニメーション */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.floating-animation {
  animation: float 6s ease-in-out infinite;
}

/* FAQアコーディオン用のスタイル */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.faq-item.is-open .faq-content {
  max-height: 500px;
}

.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
}

.faq-icon {
  transition: transform 0.3s ease-out;
}