/* フォント設定 */
body {
  font-family: 'Noto Sans JP', 'M PLUS 1p', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

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

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0,-30px,0);
  }
  70% {
    transform: translate3d(0,-15px,0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ホバーエフェクト */
.hover-float:hover {
  animation: float 2s ease-in-out infinite;
}

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

/* グラデーションテキスト */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* カスタムシャドウ */
.custom-shadow {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.custom-shadow-lg {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* 音符のアニメーション */
.musical-note {
  animation: float 3s ease-in-out infinite;
}

.musical-note:nth-child(2) {
  animation-delay: -1s;
}

.musical-note:nth-child(3) {
  animation-delay: -2s;
}

/* モバイル対応のナビゲーション */
@media (max-width: 768px) {
  .mobile-nav {
    display: none;
  }
  
  .mobile-nav.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 50;
  }
}

/* 音楽的背景パターン */
.bg-pattern {
  background-image: 
    radial-gradient(circle at 25px 25px, rgba(255, 255, 255, 0.2) 2px, transparent 0),
    radial-gradient(circle at 75px 75px, rgba(255, 255, 255, 0.2) 2px, transparent 0);
  background-size: 100px 100px;
}

/* 音符背景パターン */
.bg-music-notes {
  background-image: 
    /* 大きな音符 */
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.05) 40px, transparent 41px),
    radial-gradient(circle at 80% 70%, rgba(147, 51, 234, 0.05) 35px, transparent 36px),
    radial-gradient(circle at 60% 20%, rgba(236, 72, 153, 0.05) 30px, transparent 31px),
    radial-gradient(circle at 30% 80%, rgba(34, 197, 94, 0.05) 45px, transparent 46px),
    
    /* 小さな音符 */
    radial-gradient(circle at 45% 45%, rgba(59, 130, 246, 0.08) 15px, transparent 16px),
    radial-gradient(circle at 75% 25%, rgba(147, 51, 234, 0.08) 12px, transparent 13px),
    radial-gradient(circle at 25% 65%, rgba(236, 72, 153, 0.08) 18px, transparent 19px),
    
    /* 細かいドット */
    radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.1) 3px, transparent 4px),
    radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.1) 2px, transparent 3px),
    radial-gradient(circle at 70% 50%, rgba(244, 63, 94, 0.1) 4px, transparent 5px);
    
  background-size: 800px 800px, 600px 600px, 700px 700px, 900px 900px,
                   300px 300px, 250px 250px, 350px 350px,
                   100px 100px, 120px 120px, 80px 80px;
  background-position: 0 0, 100px 100px, 200px -100px, -100px 200px,
                      50px 150px, 250px 50px, 150px 250px,
                      25px 75px, 175px 25px, 75px 175px;
  animation: floatingBackground 20s ease-in-out infinite;
}

@keyframes floatingBackground {
  0%, 100% {
    background-position: 0 0, 100px 100px, 200px -100px, -100px 200px,
                        50px 150px, 250px 50px, 150px 250px,
                        25px 75px, 175px 25px, 75px 175px;
  }
  50% {
    background-position: -50px 50px, 150px 50px, 150px -50px, -50px 250px,
                        100px 200px, 200px 100px, 100px 200px,
                        50px 100px, 150px 50px, 50px 150px;
  }
}

/* 五線譜背景 */
.bg-staff-lines {
  position: relative;
}

.bg-staff-lines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 79px,
      rgba(59, 130, 246, 0.03) 80px,
      rgba(59, 130, 246, 0.03) 81px,
      transparent 82px,
      transparent 99px,
      rgba(147, 51, 234, 0.03) 100px,
      rgba(147, 51, 234, 0.03) 101px,
      transparent 102px,
      transparent 119px,
      rgba(236, 72, 153, 0.03) 120px,
      rgba(236, 72, 153, 0.03) 121px,
      transparent 122px,
      transparent 139px,
      rgba(34, 197, 94, 0.03) 140px,
      rgba(34, 197, 94, 0.03) 141px,
      transparent 142px,
      transparent 159px,
      rgba(59, 130, 246, 0.03) 160px,
      rgba(59, 130, 246, 0.03) 161px
    );
  pointer-events: none;
  z-index: 0;
}

/* 楽器シルエット背景 */
.bg-instruments {
  background-image: 
    /* トランペットのシルエット */
    radial-gradient(ellipse 60px 20px at 15% 25%, rgba(251, 191, 36, 0.08) 70%, transparent 71%),
    /* サクソフォンのシルエット */
    radial-gradient(ellipse 40px 80px at 85% 60%, rgba(59, 130, 246, 0.06) 70%, transparent 71%),
    /* ドラムのシルエット */
    radial-gradient(circle 50px at 70% 20%, rgba(147, 51, 234, 0.06) 70%, transparent 71%),
    /* クラリネットのシルエット */
    radial-gradient(ellipse 15px 70px at 30% 70%, rgba(236, 72, 153, 0.08) 70%, transparent 71%);
    
  background-size: 500px 400px, 600px 500px, 400px 300px, 300px 400px;
  background-position: 0 0, 200px 100px, 100px 200px, 300px 0;
  background-repeat: no-repeat;
}

/* 音波パターン */
.bg-sound-waves {
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(59, 130, 246, 0.02) 21px,
      rgba(59, 130, 246, 0.02) 42px,
      transparent 43px,
      transparent 63px,
      rgba(147, 51, 234, 0.02) 64px,
      rgba(147, 51, 234, 0.02) 85px,
      transparent 86px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(236, 72, 153, 0.015) 31px,
      rgba(236, 72, 153, 0.015) 61px,
      transparent 62px
    );
}

/* 複合音楽背景 */
.bg-musical-theme {
  background: 
    /* ベースグラデーション */
    linear-gradient(135deg, 
      rgba(239, 246, 255, 0.9) 0%,
      rgba(245, 243, 255, 0.9) 25%,
      rgba(253, 242, 248, 0.9) 50%,
      rgba(240, 253, 244, 0.9) 75%,
      rgba(254, 249, 195, 0.9) 100%
    ),
    /* 音楽的な幾何学模様 */
    repeating-conic-gradient(
      from 0deg at 10% 20%,
      transparent 0deg,
      rgba(59, 130, 246, 0.02) 30deg,
      transparent 60deg,
      rgba(147, 51, 234, 0.02) 90deg,
      transparent 120deg
    ),
    repeating-conic-gradient(
      from 45deg at 90% 80%,
      transparent 0deg,
      rgba(236, 72, 153, 0.02) 45deg,
      transparent 90deg,
      rgba(34, 197, 94, 0.02) 135deg,
      transparent 180deg
    );
  background-size: 100% 100%, 400px 400px, 350px 350px;
  animation: subtleRotate 60s linear infinite;
}

@keyframes subtleRotate {
  0% {
    background-position: 0 0, 0 0, 100% 100%;
  }
  100% {
    background-position: 0 0, 100% 100%, 0 0;
  }
}

/* 楽譜風のライン背景 */
.bg-sheet-music {
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 48px,
      rgba(59, 130, 246, 0.05) 49px,
      rgba(59, 130, 246, 0.05) 50px,
      transparent 51px,
      transparent 58px,
      rgba(59, 130, 246, 0.05) 59px,
      rgba(59, 130, 246, 0.05) 60px,
      transparent 61px,
      transparent 68px,
      rgba(59, 130, 246, 0.05) 69px,
      rgba(59, 130, 246, 0.05) 70px,
      transparent 71px,
      transparent 78px,
      rgba(59, 130, 246, 0.05) 79px,
      rgba(59, 130, 246, 0.05) 80px,
      transparent 81px,
      transparent 88px,
      rgba(59, 130, 246, 0.05) 89px,
      rgba(59, 130, 246, 0.05) 90px,
      transparent 91px,
      transparent 138px
    );
}

/* 踊る音符エフェクト */
.dancing-notes {
  position: relative;
  overflow: hidden;
}

.dancing-notes::before {
  content: "♪ ♫ ♬ ♩ ♪ ♫ ♬ ♩ ♪ ♫";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 2rem;
  color: rgba(59, 130, 246, 0.1);
  animation: scrollNotes 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes scrollNotes {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

/* ホバー時の音楽的エフェクト */
.musical-hover:hover {
  animation: musicalPulse 0.6s ease-in-out;
}

@keyframes musicalPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* ローディングアニメーション */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { 
    transform: rotate(360deg); 
  }
}

/* フォーカス時のアクセシビリティ */
a:focus,
button:focus {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* カスタムスクロールバー（Webkit系ブラウザ） */
::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ダークモードサポート（将来的に使用） */
@media (prefers-color-scheme: dark) {
  .auto-dark {
    background-color: #1f2937;
    color: #f9fafb;
  }
}

/* プリント用スタイル */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}