@charset "UTF-8"; /* ========================================================= お問い合わせページ専用 inquiry.css 対象: 他ページへの影響を防ぐため、原則として .inquiry-page 配下に限定 ========================================================= */ /* ========================================================= フォーム全体 ========================================================= */ .inquiry-page form { max-width: 860px; margin: 30px auto 50px; } /* ========================================================= お問い合わせ入力エリア ========================================================= */ .inquiry-page .inquiry { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); } /* ========================================================= 項目一覧 ========================================================= */ .inquiry-page .inquiry dl { margin: 0; } /* ========================================================= 項目名 ========================================================= */ .inquiry-page .inquiry dt { padding: 12px 16px; background: #f5f8fb; color: #333; font-weight: 700; border-top: 1px solid #e5e7eb; } .inquiry-page .inquiry dt:first-child { border-top: none; } /* ========================================================= 入力欄 ========================================================= */ .inquiry-page .inquiry dd { margin: 0; padding: 14px 16px 18px; background: #fff; } /* ========================================================= テキスト入力共通 ========================================================= */ .inquiry-page .inquiry input[type="text"], .inquiry-page .inquiry input[type="email"], .inquiry-page .inquiry input[type="tel"], .inquiry-page .inquiry textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #cfd6df; border-radius: 6px; background: #fff; color: #333; font-size: 1rem; line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* ========================================================= フォーカス ========================================================= */ .inquiry-page .inquiry input[type="text"]:focus, .inquiry-page .inquiry input[type="email"]:focus, .inquiry-page .inquiry input[type="tel"]:focus, .inquiry-page .inquiry textarea:focus { outline: none; border-color: #005bab; box-shadow: 0 0 0 3px rgba(0, 91, 171, 0.12); } /* ========================================================= 個別幅 ========================================================= */ .inquiry-page .field-name { max-width: 320px; } .inquiry-page .field-email { max-width: 420px; } .inquiry-page .field-tel { max-width: 220px; } .inquiry-page .field-postal { max-width: 160px; } .inquiry-page .field-address { max-width: 600px; } /* ========================================================= テキストエリア ========================================================= */ .inquiry-page .inquiry textarea { min-height: 180px; resize: vertical; } /* ========================================================= 必須表示 ========================================================= */ .inquiry-page .required { display: inline-block; margin-left: 8px; padding: 2px 7px; background: #d93025; color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.4; border-radius: 4px; vertical-align: middle; } /* ========================================================= 補足文 ========================================================= */ .inquiry-page .form-note { max-width: 860px; margin: 20px auto 0; padding: 14px 16px; background: #fff8f0; border-left: 4px solid #ff8800; border-radius: 6px; color: #444; font-size: 0.95rem; line-height: 1.7; } /* ========================================================= 送信ボタンエリア ========================================================= */ .inquiry-page .form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; } /* ========================================================= 送信・リセットボタン共通 ========================================================= */ .inquiry-page .form-actions input[type="submit"], .inquiry-page .form-actions input[type="reset"] { min-width: 140px; min-height: 48px; padding: 10px 24px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } /* ========================================================= 送信ボタン ========================================================= */ .inquiry-page .form-actions input[type="submit"] { background: #005bab; color: #fff; } .inquiry-page .form-actions input[type="submit"]:hover { background: #004080; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14); } /* ========================================================= リセットボタン ========================================================= */ .inquiry-page .form-actions input[type="reset"] { background: #e9edf2; color: #333; } .inquiry-page .form-actions input[type="reset"]:hover { background: #d9dfe7; transform: translateY(-2px); } /* ========================================================= キーボード操作 ========================================================= */ .inquiry-page .form-actions input[type="submit"]:focus-visible, .inquiry-page .form-actions input[type="reset"]:focus-visible { outline: 3px solid rgba(0, 91, 171, 0.3); outline-offset: 3px; } /* ========================================================= ハニーポット ========================================================= */ .inquiry-page .hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= エラー・注意表示用 ========================================================= */ .inquiry-page .form-error { max-width: 860px; margin: 20px auto; padding: 14px 16px; background: #fff1f0; color: #9f1d1d; border: 1px solid #f0b8b5; border-radius: 6px; line-height: 1.7; } /* ========================================================= タブレット ========================================================= */ @media screen and (max-width: 900px) { .inquiry-page form, .inquiry-page .form-note { margin-left: 10px; margin-right: 10px; } } /* ========================================================= スマートフォン ========================================================= */ @media screen and (max-width: 600px) { .inquiry-page .inquiry dt { padding: 10px 12px; font-size: 0.95rem; } .inquiry-page .inquiry dd { padding: 12px; } .inquiry-page .inquiry input[type="text"], .inquiry-page .inquiry input[type="email"], .inquiry-page .inquiry input[type="tel"], .inquiry-page .inquiry textarea { font-size: 16px; } .inquiry-page .field-name, .inquiry-page .field-email, .inquiry-page .field-tel, .inquiry-page .field-postal, .inquiry-page .field-address { max-width: 100%; } .inquiry-page .form-actions { flex-direction: column; } .inquiry-page .form-actions input[type="submit"], .inquiry-page .form-actions input[type="reset"] { width: 100%; } } /* ========================================================= 小さいスマートフォン ========================================================= */ @media screen and (max-width: 420px) { .inquiry-page .required { display: inline-block; margin-top: 6px; margin-left: 0; } .inquiry-page .form-note { font-size: 0.9rem; } }