/* CSS Document */
body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  background-color: #F8FAFC;
  color: #0F2137;
}
.gradient-text-epic {
  background: linear-gradient(135deg, #0F2137 0%, #005BAC 50%, #E34E49 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text-red {
  background: linear-gradient(135deg, #E34E49 0%, #D13C37 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-border-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 30px -10px rgba(15, 33, 55, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gradient-border-card:hover {
  border-color: rgba(227, 78, 73, 0.4);
  box-shadow: 0 20px 40px -15px rgba(227, 78, 73, 0.15);
  transform: translateY(-6px);
}
/* 背景パターン（グリッド・横線）を除去してクリーンなグラデーション背景に */
.hero-bg-clean {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 50%, #F1F5F9 100%);
}
.hero-glow-1 {
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(227, 78, 73, 0.08) 0%, rgba(0, 91, 172, 0.05) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.hero-glow-2 {
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 160, 233, 0.08) 0%, rgba(248, 250, 252, 0) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}

@media screen and (max-width:1023px) {
#strengths {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media screen and (max-width:767px) {
#strengths {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
}