/* 共通スタイル */
body {
  background-color: #ffffff;
}

/* セクションスタイル */
section[id] {
  scroll-margin-top: 72px;
}

/* カードスタイル */
.card {
  @apply relative bg-white/95 backdrop-blur-xl overflow-hidden border border-slate-200/70 rounded-2xl shadow-md;
}

.card-gradient {
  @apply absolute -inset-1 bg-gradient-to-r from-emerald-300/70 to-sky-300/70 rounded-[2rem] blur;
}

.card-content {
  @apply relative p-8;
}

/* テキストスタイル */
.section-title {
  @apply text-3xl md:text-4xl font-bold text-slate-800 mb-6;
}

.section-description {
  @apply text-lg text-slate-600 leading-relaxed mb-12;
}

/* ボタンスタイル */
.btn {
  @apply inline-flex items-center justify-center px-6 py-3 rounded-lg transition-all duration-300 text-base font-medium;
}

.btn-primary {
  @apply text-white bg-gradient-to-r from-emerald-500 to-sky-500 hover:from-emerald-600 hover:to-sky-600;
}

.btn-secondary {
  @apply text-slate-700 bg-white hover:bg-slate-50 border border-slate-200;
}

/* グリッドレイアウト */
.grid-cols-auto-fit {
  @apply grid gap-6;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* アニメーション */
.hover-lift {
  @apply transition-transform duration-300 hover:-translate-y-1;
}

/* 装飾的な要素 */
.decorative-line {
  @apply absolute w-full h-[1px];
  background: linear-gradient(to right, transparent, rgba(16, 185, 129, 0.3), transparent);
}

.top-line {
  @apply top-0 left-0;
}

.bottom-line {
  @apply bottom-0 right-0;
}

/* レスポンシブユーティリティ */
@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
  
  .section-title {
    @apply text-2xl;
  }
  
  .section-description {
    @apply text-base;
  }
}

/* 360px幅対応のモバイル専用スタイル */
@media (max-width: 480px) {
  /* コンテナの調整 */
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    max-width: 100% !important;
  }
  
  /* カードスタイルの調整 */
  .card {
    border-radius: 1rem !important;
  }
  
  .card-gradient {
    border-radius: 1rem !important;
  }
  
  .card-content {
    padding: 1.5rem !important;
  }
  
  /* テキストスタイルの調整 */
  .section-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }
  
  .section-description {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 2rem !important;
  }
  
  /* ボタンスタイルの調整 */
  .btn {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.5rem !important;
  }
  
  /* グリッドレイアウトの調整 */
  .grid-cols-auto-fit {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* 一般的なTailwindクラスの上書き */
  .text-3xl, .text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  .text-xl {
    font-size: 1rem !important;
  }
  
  .text-lg {
    font-size: 0.95rem !important;
  }
  
  .p-8 {
    padding: 1.5rem !important;
  }
  
  .p-6 {
    padding: 1rem !important;
  }
  
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  .gap-6 {
    gap: 1rem !important;
  }
  
  .mb-12 {
    margin-bottom: 2rem !important;
  }
  
  .mb-6 {
    margin-bottom: 1rem !important;
  }
  
  .rounded-2xl {
    border-radius: 1rem !important;
  }
  
  .rounded-lg {
    border-radius: 0.5rem !important;
  }
}