@charset "UTF-8";
/* ============================================================
   ホームページ・パッケージLP お問い合わせフォーム
   フォーム部分は従来のフォーム（wagamachi-hpp.com/contact/）のデザインのまま。
   共通ヘッダー・フッターに影響しないよう .contact の中だけに適用しています。
   ============================================================ */

/* 共通ヘッダーの色をLPに合わせる */
:root {
  --bz-main: #07599d;
  --bz-accent: #e97865;
}

/* フォーム用 */
:root {
  --main: #0e328c;
  --text: #222;
  --muted: #888;
  --line: #e2e2e2;
  --field: #f3f4f6;
  --req: #d0021b;
  --err-bg: #fff1f2;
}
body { background: #fff; }

.contact {
  max-width: 880px; margin: 0 auto; padding: 56px 16px 96px;
  color: var(--text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.9;
}
.contact a { color: var(--main); }
.contact_head { margin-bottom: 32px; }
.contact_en { margin: 0; color: var(--main); font-weight: 700; letter-spacing: .12em; font-size: 14px; }
.contact_head h1 { margin: 4px 0 0; font-size: 30px; letter-spacing: .06em; line-height: 1.5; }
.contact_lead { margin: 0 0 16px; }
.contact_head + .contact_lead { margin-bottom: 40px; }

/* ステップ */
.contact_steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 40px; }
.contact_steps li {
  flex: 1; padding: 12px 8px; text-align: center; background: var(--field);
  color: var(--muted); font-size: 14px; line-height: 1.5;
}
.contact_steps li span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.contact_steps li.is-current { background: var(--main); color: #fff; }

.contact_notice { padding: 12px 16px; background: var(--err-bg); color: var(--req); border-left: 4px solid var(--req); }

/* フォーム */
.contact .form_table { margin: 0; }
.contact .form_table dt { margin: 0 0 8px; font-weight: 700; }
.contact .form_table dd { margin: 0 0 28px; }
.contact .req {
  display: inline-block; margin-left: 8px; color: var(--req);
  font-size: 12px; font-weight: 700; vertical-align: 1px;
}
.contact input[type=text], .contact input[type=tel], .contact input[type=email], .contact textarea {
  width: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: 4px;
  background: var(--field); color: var(--text); font: inherit;
}
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--main); background: #fff; }
.contact input::placeholder, .contact textarea::placeholder { color: #aaa; }
.contact .is-error { border-color: var(--req) !important; background: var(--err-bg) !important; }
.contact .error { margin: 6px 0 0; color: var(--req); font-size: 13px; }
.contact .radios label { margin-right: 24px; cursor: pointer; }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact .policy { padding: 24px; margin-top: 8px; text-align: center; border-top: 1px solid var(--line); }
.contact .policy p { margin: 0 0 8px; }
.contact .policy label { font-weight: 700; cursor: pointer; }

/* 確認画面 */
.contact .form_table.is-confirm { border-top: 1px solid var(--line); }
.contact .form_table.is-confirm dt { margin: 0; padding: 16px 0 4px; }
.contact .form_table.is-confirm dd { margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--line); word-break: break-all; }
.contact .muted { color: var(--muted); }

/* ボタン */
.contact .form_action { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 32px 0 0; }
.contact .btn {
  display: inline-block; min-width: 280px; padding: 16px 32px; border: 1px solid var(--main); border-radius: 999px;
  background: var(--main); color: #fff; font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
  transition: opacity .2s;
}
.contact .btn:hover { opacity: .85; }
.contact .btn-sub { background: #fff; color: var(--main); }

.contact .complete { text-align: center; }
.contact .complete h2 { font-size: 22px; color: var(--main); }

@media (max-width: 600px) {
  .contact { padding-top: 32px; }
  .contact_head h1 { font-size: 24px; }
  .contact_steps li { font-size: 12px; padding: 10px 4px; }
  .contact .btn { min-width: 0; width: 100%; }
}