/**
 * c-search-002: 検索フォームセクション
 * 施術・クリニック検索フォームを含むセクションの共通スタイル
 */

:where(.c-search-002) {
  width: 100%;
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--base);
  background: var(--wp--preset--color--gray-lightest);
}

@media (min-width: 768px) {
  :where(.c-search-002) {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
  }
}

:where(.c-search-002__container) {
  max-width: 900px;
  margin: 0 auto;
}

/* サブタイトル（オプション） */
:where(.c-search-002__subtitle) {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--primary-darker);
  text-align: center;
  margin: 0 0 var(--wp--preset--spacing--lg) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
}

@media (min-width: 768px) {
  :where(.c-search-002__subtitle) {
    font-size: var(--wp--preset--font-size--2-xl);
    margin-bottom: var(--wp--preset--spacing--xl);
  }
}

/* タイトル（オプション） */
:where(.c-search-002__title) {
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--primary-darker);
  text-align: center;
  margin: 0 0 var(--wp--preset--spacing--lg) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
}

@media (min-width: 768px) {
  :where(.c-search-002__title) {
    font-size: var(--wp--preset--font-size--4-xl);
    margin-bottom: var(--wp--preset--spacing--xl);
  }
}