@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  --primary-blue: #0A3D91; /* 信頼感のある深いブルー */
  --secondary-blue: #1A56DB; /* 少し明るめのブルー */
  --accent-cyan: #06B6D4;
  --bg-light: #F8FAFC;
}

body {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  background-color: var(--bg-light);
  color: #1E293B;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* スクロールバーのカスタマイズ */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1; 
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; 
}

/* ガラスモーフィズム（すりガラス効果） */
.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: rgba(26, 86, 219, 0.2);
}

/* プレミアムなグラデーション背景 */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
}

.bg-gradient-hero {
  background: linear-gradient(to right, rgba(10, 61, 145, 0.85), rgba(26, 86, 219, 0.6));
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* アニメーション */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* リンクホバーのアンダーラインアニメーション */
.hover-underline-animation {
  display: inline-block;
  position: relative;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--secondary-blue);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* アイコンラッパーのホバーエフェクト */
.icon-wrapper {
  transition: all 0.3s ease;
}
.group:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
  background-color: var(--bg-light);
  color: var(--secondary-blue);
}