コミュニケーション

<スタイル> /* Voc フォーム - お問い合わせフォーム (最小限および狭いスペース用) */ .voc-form-fields-container { ディスプレイ:フレックス; フレックス方向: 列; ギャップ: 0.8rem; /* スペースが大幅に削減されました */ 背景: 透明; /* 背景と厚いパディングが削除されました */ 境界線:なし; パディング: 0; 幅: 100%; } .voc-form-group { ディスプレイ:フレックス; フレックス方向: 列; ギャップ: 0.3rem; /* タグと入力の間のスペースが狭くなりました */ 幅: 100%; margin-bottom: 0 !重要; } .voc-label { カラー: rgba(255, 255, 255, 0.8) !重要; フォントの太さ: 600; フォントサイズ: 13px !重要; /* より最小のフォント サイズ */ フォントファミリー: 'Inter'、サンセリフ; ディスプレイ:フレックス; 整列項目: 中央; ギャップ: 0.2rem; } .voc-必須マーク { 色: var(--brand-red, #f7374f) !重要; } .voc-input { 幅: 100%; 背景: rgba(0, 0, 0, 0.2) !重要; ボーダー: 1px ソリッド rgba(255, 255, 255, 0.1) !重要; 色: #fff !重要; パディング: 0.7rem 1rem !重要; /* 間引いた */ 境界半径: 8px !重要; /* より最小限の楕円形の角 */ フォントサイズ: 14px !重要; フォントファミリー: 'Inter'、サンセリフ; 概要: なし。 トランジション: すべて 0.3 秒のイーズ。 背景フィルター: ぼかし(5px); } .voc-input::placeholder { カラー: rgba(255, 255, 255, 0.3) !重要; } .voc-input:focus { 境界線の色: var(--brand-red, #f7374f) !重要; 背景: rgba(0, 0, 0, 0.4) !重要; ボックスシャドウ: 0 0 0 2px rgba(247, 55, 79, 0.1); } /* (ポップアップ メニュー) カスタム設定を選択します */ .voc-select { 外観：なし。 背景画像: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4% 22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5% 200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c 0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%2 05.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4- 7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E”) !重要; 背景-リピート: リピートなし!重要; 背景位置: 右 1rem 上位 50% !重要; 背景サイズ: 0.6rem 自動 !重要; } .voc-select オプション { 背景: #0f172a; 色: #fff; } /* テキストエリアの設定 */ .voc-textarea { サイズ変更: 垂直; 最小高さ: 80px !重要; /* 高さがかなり減りました */ } /* KVKK チェックボックスのデザイン */ .voc-チェックボックス-ラッパー { マージントップ: 0.2rem; } .voc-チェックボックス-ラベル { ディスプレイ:フレックス; align-items: flex-start; ギャップ: 0.6rem; カーソル: ポインタ; 色: rgba(255, 255, 255, 0.7); 行の高さ: 1.4; フォントサイズ: 12px !重要; /* KVKK テキストが削減されました */ } .voc-チェックボックス入力 { 外観：なし。 最小幅: 16px; 高さ: 16px; ボーダー: 1px ソリッド rgba(255, 255, 255, 0.2) !重要; 境界半径: 4px !重要; 背景: rgba(0, 0, 0, 0.2) !重要; カーソル: ポインタ; 位置: 相対的; トランジション: すべて 0.2 秒の緩和。 マージントップ: 1px; } .voc-checkbox-input:チェック済み { 背景: var(--brand-red, #f7374f) !重要; 境界線の色: var(--brand-red, #f7374f) !重要; } .voc-checkbox-input:checked::after { 内容: ''; 位置: 絶対; 左: 4px; ボール: 2px; 幅: 4px; 高さ: 8px; ボーダー: ソリッドホワイト; ボーダー幅: 0 2px 2px 0; 変換: 回転(45 度); } .voc-checkbox-content a { 色: var(--brand-red, #f7374f) !重要; テキスト装飾: 下線; フォントサイズ: 12px !重要; } /* 送信ボタン (最小限) */ .voc-submit-btn { マージントップ: 0.5rem; 背景: var(--brand-red, #f7374f) !重要; 色: #fff !重要; 境界線: なし!重要; パディング: 0.8rem 1.5rem !重要; /* 間引いた */ 境界半径: 8px !重要; /* 互換性のあるエッジ */ フォントの太さ: 600; フォントサイズ: 14px !重要; フォントファミリー: 'Inter'、サンセリフ; カーソル: ポインタ; ディスプレイ:フレックス; 整列項目: 中央; コンテンツの位置揃え: 中央; ギャップ: 0.5レム; トランジション: すべて 0.3 秒のイーズ。 幅: 100%; } .voc-submit-btn:hover { 背景: #e02040 !重要; 変換：translateY(-1px); } /* スピナーをロードしています */ .voc-スピナー { 表示: インラインブロック; 幅: 14px; 高さ: 14px; ボーダー: 2px ソリッド rgba(255,255,255,0.3); 境界半径: 50%; ボーダートップカラー: #fff; アニメーション: vocSpin 1 秒イーズインアウト無限。 } @keyframes vocSpin { に { 変換: 回転(360 度); } }