/* ===================================================================== * pickles 埋め込みフォームの見た目をテンプレートに合わせる * （高木さん指示 2026-08-14「フォームだけ極端に品質が低い」） * * ── なぜ CSS を自分で書いているのか ── * ふだんは購入テンプレートの markup をそのまま貼るのが原則（.claude/rules/design.md）。 * ただしこのフォームの DOM は **pickles 側の embed.js が実行時に組み立てる**ので、 * 貼れる markup が存在しない。そこで * **「値はすべてテンプレートかブランドファイルから転記し、自分では決めない」** * という形で原則を守っている。転記元は各ブロックのコメントに書いた。 * 主な転記元は購入テンプレート `ai-software/contact.html` の contact form * （2433〜2553行）＝ /contact の器と同じページのフォーム。 * * ── 詳細度について（重要）── * pickles の embed.js は自前の CSS を **実行時に `` の末尾へ足す**ので、 * この静的な より必ず後に来る。同じ詳細度では負けるため、 * すべてのセレクタを **`.pickles-form-embed` の子孫として書いて詳細度を1つ上げている** * （0-2-0 対 0-1-0）。`!important` は使わない。 * `.pickles-form-embed` は PicklesForm.astro が出す器の class。 * * ── 読み込み方 ── * フォームを置く4ページ（/contact・/demo・/documents・/partners）が * `stylesheets={['/assets/pickles-form.css']}` で読む。全ページ共通にはしない * （フォームの無いページで1リクエスト増やさない）。 * ===================================================================== */ /* --------------------------------------------------------------------- * フォーム全体 * 転記元:
（項目間 32px）／器の白カードは * ページ側が持っているので、ここでは幅の制限を外すだけ。 * embed 既定の max-width:560px は 847px のカードの中で左に寄って見える。 * ------------------------------------------------------------------- */ .pickles-form-embed .pickles-form { max-width: none; gap: calc(var(--spacing) * 8); /* space-y-8 = 32px */ font-size: var(--text-tagline-2); line-height: 150%; color: var(--color-secondary); } /* 転記元:
（ラベル → 入力 8px） */ .pickles-form-embed .pickles-form__field { gap: calc(var(--spacing) * 2); } /* --------------------------------------------------------------------- * ラベルと補足 * 転記元: