/* Contact form page (Contact.php); builds on the tokens defined in style.css */

/* Page frame */
.contact-page{background:var(--pale);padding:64px 0 96px}
.contact-page-inner{max-width:820px}
.contact-page-title{font-size:clamp(1.7rem,2.6vw,2.35rem);font-weight:700;line-height:1.65;letter-spacing:.045em;color:var(--ink)}
.contact-lead{margin:20px 0 28px;color:var(--ink);font-size:1rem;line-height:2}
.contact-required-note{display:block;margin-top:6px;color:var(--muted);font-size:.875rem}

/* Step indicator: 入力 → 確認 → 完了 */
.contact-steps{display:flex;gap:8px;margin:24px 0 0;padding:0;list-style:none;counter-reset:step}
.contact-steps li{flex:1;position:relative;padding:10px 8px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:.875rem;font-weight:700;text-align:center;counter-increment:step}
.contact-steps li::before{content:counter(step) ". "}
.contact-steps li.is-current{background:var(--teal);border-color:var(--teal);color:#fff}

/* Alerts and inline errors */
.contact-alert{margin:24px 0;padding:16px 20px;border:2px solid #b3261e;border-radius:10px;background:#fdf1f0;color:#7a1712;font-size:.95rem;line-height:1.8}
.contact-alert:focus{outline:3px solid #b3261e;outline-offset:3px}
.contact-alert ul{margin:8px 0 0;padding-left:1.2em}
.contact-alert a{color:inherit;text-decoration:underline}
.contact-error{margin-top:8px;color:#b3261e;font-size:.9rem;font-weight:700;line-height:1.6}

/* Form card */
.contact-form{padding:36px;border-radius:var(--radius);background:#fff;box-shadow:0 10px 30px #1c34570f}
.contact-field{margin:0 0 28px;padding:0;border:0;min-width:0}
.contact-field>label,.contact-field>legend{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:0;color:var(--ink);font-size:1rem;font-weight:700}
.contact-required{display:inline-block;padding:1px 8px;border-radius:4px;background:#b3261e;color:#fff;font-size:.75rem;font-weight:700;line-height:1.7;vertical-align:middle;margin-left:6px}
.contact-hint{margin:-2px 0 8px;color:var(--muted);font-size:.875rem;line-height:1.7}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form textarea{display:block;width:100%;padding:12px 14px;border:1px solid #b9c6d8;border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:16px;line-height:1.7}
.contact-form textarea{min-height:200px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:3px solid #24538955;outline-offset:1px;border-color:var(--teal)}
.contact-form ::placeholder{color:#9aa6b6}
.has-error input[type=text],.has-error input[type=email],.has-error input[type=tel],.has-error textarea{border-color:#b3261e;background:#fffafa}

/* Radio and checkbox choices */
.contact-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.contact-choice{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:.95rem;line-height:1.6;cursor:pointer}
.contact-choice:has(input:checked){border-color:var(--teal);background:#eef3fa}
.contact-choice input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--teal)}
/* Consent box hugs its content (overrides the generic .contact-field>label block layout) */
.contact-field>label.contact-agree{display:inline-flex;margin-bottom:0;font-weight:700}

/* Privacy notice */
.contact-privacy{margin:8px 0 16px;padding:18px 20px;border-radius:10px;background:var(--pale)}
.contact-privacy h2{font-size:1rem;font-weight:700;line-height:1.7;letter-spacing:0;color:var(--ink)}
.contact-privacy p{margin-top:6px;color:var(--muted);font-size:.875rem;line-height:1.9}

/* Buttons row */
.contact-buttons{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:12px}
.contact-buttons .button{min-width:240px;font-size:1rem;cursor:pointer;border:0}
.contact-buttons .button-outline{border:1px solid var(--teal)}

/* Hidden honeypot field: off-screen but still in the DOM for bots */
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Confirmation list */
.contact-review{margin:0 0 28px;padding:12px 36px;border-radius:var(--radius);background:#fff;box-shadow:0 10px 30px #1c34570f}
.contact-review>div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-review>div:last-child{border-bottom:0}
.contact-review dt{color:var(--muted);font-size:.9rem;font-weight:700}
.contact-review dd{margin:0;color:var(--ink);font-size:1rem;line-height:1.9;overflow-wrap:anywhere}

/* Completion message */
.contact-done{padding:40px 36px;border-radius:var(--radius);background:#fff;box-shadow:0 10px 30px #1c34570f;text-align:center}
.contact-done p{margin-top:14px;color:var(--ink);line-height:2}
.contact-done-title{font-size:1.3rem;font-weight:700;color:var(--teal)!important}
.contact-done .button{margin-top:12px}

/* Phone box under the form */
.contact-tel-box{margin-top:36px;padding:24px;border-radius:var(--radius);background:var(--deep);color:#fff;text-align:center}
.contact-tel-box p{color:#d5dff0;font-size:.95rem}
.contact-tel-box a{display:inline-block;margin-top:4px;color:#fff;font-size:1.9rem;font-weight:700;letter-spacing:.04em}
.contact-tel-box .contact-tel-sub{margin-top:2px;font-size:.875rem}

/* Phone width */
@media(max-width:600px){
  .contact-page{padding:40px 0 120px}
  .contact-form,.contact-done{padding:24px 18px}
  .contact-review{padding:4px 18px}
  .contact-review>div{grid-template-columns:1fr;gap:4px}
  .contact-choices{grid-template-columns:1fr}
  .contact-steps li{font-size:.8rem;padding:8px 4px}
  .contact-buttons .button{width:100%;min-width:0}
}