/**
 * 法人向けLP固有スタイル（補助）
 * business-lp-style.css の補足スタイル
 * #lp-business スコープで記述
 */

/* for-biz バッジ */
#lp-business .for-biz {
  font-size: 0.75rem;
  color: var(--accent-orange);
  font-weight: 700;
  padding: 2px 8px;
  background: #FFF7ED;
  border-radius: 4px;
  margin-left: 8px;
}

/* ハイライトスタイル（アンダーライン効果） */
#lp-business .hero-text h1 span.highlight::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 10px;
  background: rgba(0, 169, 157, 0.2);
  z-index: -1;
  transform: skewX(-15deg);
}

#lp-business .hero-text h1 span.highlight {
  position: relative;
  display: inline-block;
}

/* ヒーロー画像のシャドウエフェクト */
#lp-business .hero-img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 20px 20px 0px rgba(44, 62, 80, 0.1);
}

/* Problems セクション背景 */
#lp-business .problems {
  background: var(--bg-light);
}

/* レスポンシブ */
@media (max-width: 1024px) {
  #lp-business .problem-grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #lp-business .problem-grid-4col {
    grid-template-columns: 1fr;
  }
}