/* 🌟 1. Tailwind v4のコアをインポート */
@import "tailwindcss";

/* 🌟 2. Tailwind v4の独自テーマ定義（config.jsの代わりにここに直接記述します） */
@theme {
  /* アネモア公式ブランドカラーの登録 */
  --color-brand: #E51A63;
  --color-brand-light: #FFF0F5;
  --color-brand-dark: #B00E46;
  --color-soft-bg: #FAFAF9;

  /* アネモア公式フォントファミリーの登録 */
  --font-sans: 'Noto Sans JP', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, Cambria, "Times New Roman", Times, serif;
}

/* 🌟 3. その他、LP専用の追加カスタムスタイル */
.fade-in {
  animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.drawer-transition {
  transition: transform 0.3s ease-in-out;
}
/* style.css - anemore LP専用カスタムスタイルシート */

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

/* フェードイン表示（ファーストビュー等） */
.fade-in {
  animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スライド式ドロワー遷移 */
.drawer-transition {
  transition: transform 0.3s ease-in-out;
}

/* 背景オーバーレイフェード */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease-in-out;
}

/* スクロールバーのカスタマイズ（主にドロワーや規約用） */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}