/* ============================================================
   Michibiki - style.css
   ============================================================ */

/* ----------------------------------------------------------
   基本
---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Tailwind の container を中央寄せ */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans JP', 'Source Han Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------
   スクロールフェードイン
---------------------------------------------------------- */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.card-stagger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.card-stagger.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   ヘッダー
---------------------------------------------------------- */
#header {
  transition: box-shadow 0.3s ease;
}

#header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------
   ハンバーガーメニュー
---------------------------------------------------------- */
#menu-btn span {
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ----------------------------------------------------------
   Vanta.js 背景セクション
   Vantaが自動で position:absolute の canvas を挿入するため
   セクションを relative + overflow:hidden にする
---------------------------------------------------------- */
#ai-era,
#business,
#testimonials,
#pricing,
#vanta-waves {
  position: relative;
  overflow: hidden;
}

/* Vantaが挿入するcanvasを背景に固定 */
#ai-era > canvas.vanta-canvas,
#business > canvas.vanta-canvas,
#testimonials > canvas.vanta-canvas,
#pricing > canvas.vanta-canvas,
#vanta-waves > canvas.vanta-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
}

/* セクション内コンテンツをcanvasより前面に */
#ai-era > .container,
#business > .container,
#testimonials > .container,
#pricing > .container,
#vanta-waves > .container {
  position: relative;
  z-index: 10;
}

/* ----------------------------------------------------------
   ヒーローセクション
---------------------------------------------------------- */
.hero-pc {
  min-height: 800px;
  position: relative;
  overflow: hidden;
}

.hero-sp {
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

/* ----------------------------------------------------------
   レスポンシブ（ヒーロー）
---------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero-pc {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hero-sp {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   ボタン・リンク
---------------------------------------------------------- */
a, button {
  transition: all 0.2s ease;
}

/* ----------------------------------------------------------
   お客様の声 スター
---------------------------------------------------------- */
.text-yellow-400 {
  letter-spacing: 2px;
}

/* ----------------------------------------------------------
   フッター
---------------------------------------------------------- */
footer {
  background-color: #111827;
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   印刷
---------------------------------------------------------- */
@media print {
  #header, #mobile-menu {
    display: none;
  }
  .pt-20 {
    padding-top: 0;
  }
}