/* お問い合わせウィジェットの見た目を整えるためのテーマ変数
   Shadow DOM 内部へは通常の CSS が届かないため、
   ホスト要素 [data-sm-widget="contact"] へ CSS カスタムプロパティとして
   宣言することで、loader側のコンポーネントに反映させる。 */
[data-sm-widget="contact"] {
  --color-primary: #1e7edb;
  --color-foreground: #153668;
  --color-muted-foreground: #6b7280;
  --color-border: #cbd5e1;
  --color-background: #ffffff;
  --radius-md: 10px;
  --text-lg: 1.05rem;
  --spacing: 1rem;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ウィジェットを囲むカード風の余白と背景（ホスト要素自体への装飾のみ。
   内部要素は Shadow DOM のため触れない） */
[data-sm-widget="contact"] {
  display: block;
  max-width: 780px;
  margin: 0 auto 2em;
  padding: 8px;
  background: linear-gradient(180deg, rgba(30,126,219,0.04), rgba(30,126,219,0));
  border-radius: 16px;
}

@media (min-width: 768px) {
  [data-sm-widget="contact"] {
    padding: 20px;
  }
}