/* contact.html（お問い合わせ）の本文とフォーム。配色・余白は company.css のトークンに揃える */

.contact{max-width:860px;margin:auto;padding:0 7% 90px}
.contact-head{padding:70px 0 34px;border-bottom:1px solid var(--line)}
.contact-head h1{font-size:clamp(28px,3.4vw,40px);line-height:1.5;letter-spacing:.04em;margin:0}
.contact-lead{font-size:14px;color:var(--muted);margin:30px 0 0}
.contact-tel{font-size:13px;color:var(--muted);margin:14px 0 0}
.contact-tel b{font-size:17px;color:var(--ink);letter-spacing:.04em}

.form{margin-top:44px}
.form-row{padding:22px 0;border-bottom:1px solid var(--line)}
.form-row>label,.form-legend{display:block;font-size:13px;font-weight:600;margin-bottom:10px}
.req{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#c0392b;margin-left:10px;vertical-align:1px}
.opt{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:var(--muted);margin-left:10px;vertical-align:1px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;font:inherit;font-size:14px;color:var(--ink);background:white;
  border:1px solid #cfd8e3;border-radius:6px;padding:12px 14px}
.form textarea{line-height:1.9;resize:vertical;min-height:190px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-color:var(--cyan)}
.form-hint{font-size:12px;color:var(--muted);margin:9px 0 0;line-height:1.8}
.form-error{font-size:12px;color:#c0392b;margin:9px 0 0;line-height:1.8}
.form-row[data-invalid] input,.form-row[data-invalid] textarea,.form-row[data-invalid] select{border-color:#c0392b}

.form-agree{padding:26px 0 0;font-size:13px;line-height:1.95}
.form-agree label{display:flex;gap:12px;align-items:flex-start}
.form-agree input{margin:5px 0 0;width:16px;height:16px;flex-shrink:0}
.form-agree a{color:var(--indigo)}

.form-actions{padding-top:30px}
.form-submit{font:inherit;font-size:14px;font-weight:600;letter-spacing:.06em;color:white;background:var(--indigo);
  border:none;border-radius:999px;padding:16px 54px;cursor:pointer}
.form-submit:hover{background:var(--cyan)}
.form-submit:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.form-submit[disabled]{background:#9da6b7;cursor:progress}
.form-note{font-size:12px;color:var(--muted);margin:18px 0 0;line-height:1.9}

/* 自動投稿よけ（人には見せない・支援技術からも隠す） */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-result{margin-top:34px;padding:26px 28px;border-radius:10px;background:var(--pale);border:1px solid var(--line)}
.form-result[hidden]{display:none}
.form-result h2{font-size:17px;margin:0 0 12px}
.form-result p{font-size:13px;margin:0 0 6px}
.form-result .ticket{font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--indigo)}
.form-result[data-state=error]{background:#fdf3f2;border-color:#f3cfca}

@media(max-width:700px){
  .contact{padding:0 6% 70px}
  .contact-head{padding:48px 0 26px}
  .form-row{padding:18px 0}
  .form-submit{width:100%;padding:16px 0}
}