
JAF会員専用 [優待予約フォーム]

/* ===== フォーム全体 ===== */ .wpcf7 form { background: #ffffff; border: 2px solid #0066cc; border-radius: 10px; padding: 25px; max-width: 800px; margin: 40px auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1); font-family: "Helvetica Neue", Arial, sans-serif; } /* ===== ラベル部分 ===== */ .wpcf7 form label { display: block; font-weight: 600; color: #003366; margin-bottom: 6px; font-size: 15px; } /* ===== 必須マーク ===== */ .wpcf7 form label:has([required])::after { content: " *"; color: #e60000; font-weight: bold; } /* ===== 入力フィールド共通 ===== */ .wpcf7 form input[type="text"], .wpcf7 form input[type="tel"], .wpcf7 form input[type="email"], .wpcf7 form input[type="number"], .wpcf7 form input[type="date"], .wpcf7 form select, .wpcf7 form textarea { width: 100%; padding: 10px 12px; border: 1px solid #bbb; border-radius: 6px; font-size: 15px; margin-bottom: 18px; box-sizing: border-box; transition: all 0.2s ease; } /* フォーカス時 */ .wpcf7 form input:focus, .wpcf7 form select:focus, .wpcf7 form textarea:focus { border-color: #0066cc; box-shadow: 0 0 6px rgba(0,102,204,0.4); outline: none; } /* ===== セレクトボックス並び(時間と分を横並び) ===== */ .time-inline { display: flex; gap: 12px; align-items: flex-end; /* 下端揃え */ flex-wrap: wrap; /* スマホで折返し */ } /* ラベルを横並びに */ .time-inline > label { display: flex; align-items: center; gap: 6px; margin: 0; } /* CF7のwrapリセット */ .time-inline .wpcf7-form-control-wrap { display: inline-flex; align-items: center; margin: 0; } /* セレクト幅を自動にする */ .time-inline select { width: auto !important; /* 全幅指定を打ち消す */ min-width: 80px; /* 必要に応じて調整 */ margin-bottom: 0; } /* スマホ時は縦並び */ @media (max-width: 560px) { .time-inline { align-items: stretch; flex-direction: column; } .time-inline > label { width: 100%; } } /* ===== 備考欄(大きめ) ===== */ .wpcf7 form textarea { min-height: 100px; resize: vertical; } /* ===== 送信ボタン ===== */ .wpcf7 form input[type="submit"], .wpcf7 form input[type="button"] { background: #0066cc; color: #fff; font-size: 16px; font-weight: bold; padding: 12px 40px; border: none; border-radius: 30px; cursor: pointer; transition: background 0.3s ease; display: block; margin: 20px auto 0; box-shadow: 0 6px 14px rgba(0,102,204,0.25); } .wpcf7 form input[type="submit"]:hover { background: #004c99; } /* ===== 戻るボタン ===== */ .wpcf7 form input[value="戻って編集する"] { background: #ddd; color: #333; margin: 10px auto 0; display: block; border-radius: 20px; padding: 8px 24px; font-size: 14px; text-align: center; } .wpcf7 form input[value="戻って編集する"]:hover { background: #bbb; } .wpcf7-not-valid{outline:2px solid #e60000}