/* Netlify Forms 問い合わせフォーム専用CSS（既存site.cssへ非破壊で追加） */

.contact-page{padding:44px 0 72px;}
.contact-page .cp-head{max-width:820px; margin-bottom:26px;}
.contact-page .cp-head .cp-kick{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--copper-d); text-transform:uppercase; display:block; margin-bottom:8px;}
.contact-page .cp-head h1{font-size:30px; line-height:1.34; letter-spacing:-.01em; margin-bottom:10px;}
.contact-page .cp-head p{color:var(--mut); font-size:14px;}

.contact-section{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start;}
@media (max-width:920px){ .contact-section{grid-template-columns:1fr;} }

.contact-container{background:var(--white); border:1px solid var(--line); border-radius:var(--rl); padding:28px;}
@media (max-width:600px){ .contact-container{padding:18px;} }

.contact-container .cf-legend{font-family:var(--disp); font-weight:700; font-size:15px; margin:26px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line);}
.contact-container .cf-legend:first-of-type{margin-top:0;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;}
.form-grid .span2{grid-column:1 / -1;}
@media (max-width:600px){ .form-grid{grid-template-columns:1fr;} .form-grid .span2{grid-column:auto;} }

.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field > label{font-family:var(--disp); font-size:12.5px; font-weight:600; color:var(--slate); display:flex; align-items:center; gap:7px;}
.form-field .req,.form-field .opt{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; padding:1px 6px; border-radius:3px; font-weight:500;}
.form-field .req{background:var(--copper-bg); color:var(--copper-d); border:1px solid var(--copper-ln);}
.form-field .opt{background:var(--panel); color:var(--mut); border:1px solid var(--line2);}
.form-field .hint{font-size:11.5px; color:var(--faint); line-height:1.6;}

.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=tel],
.form-field input[type=file],
.form-field select,
.form-field textarea{
  font-family:var(--body); font-size:14px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line2); border-radius:var(--r); padding:10px 12px; width:100%;
  transition:border-color .15s, background .15s;
}
.form-field textarea{min-height:150px; resize:vertical; line-height:1.75;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none; border-color:var(--copper-ln); background:var(--white);}
.form-field input.cf-err,.form-field textarea.cf-err{border-color:var(--signal); background:#fdf3f2;}
.form-field input[type=file]{padding:8px 10px; font-size:12.5px;}

.cf-topics{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:9px;}
.checkbox-card{display:flex; align-items:flex-start; gap:9px; border:1px solid var(--line2); border-radius:var(--r); padding:11px 13px; background:var(--paper); cursor:pointer; transition:.15s; font-size:13.5px; line-height:1.5;}
.checkbox-card:hover{border-color:var(--copper-ln); background:var(--white);}
.checkbox-card input{margin-top:3px; accent-color:var(--copper); flex:none; width:15px; height:15px;}
.checkbox-card:has(input:checked){border-color:var(--copper-ln); background:var(--copper-bg);}

.cf-consent{display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.7; margin-top:6px;}
.cf-consent input{margin-top:4px; accent-color:var(--copper); flex:none; width:15px; height:15px;}
.cf-consent a{color:var(--copper-d); text-decoration:underline; text-underline-offset:2px;}

.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0;}

.cf-recaptcha{margin:18px 0 4px;}

.cf-errors{display:none; border:1px solid var(--signal); background:#fdf3f2; border-radius:var(--r); padding:12px 14px; margin:18px 0 0; font-size:13px; color:var(--signal-d); line-height:1.75;}
.cf-errors.on{display:block;}
.cf-errors ul{margin:0; padding-left:18px;}

.submit-button{font-family:var(--disp); font-size:14.5px; font-weight:600; padding:13px 30px; border-radius:var(--r); cursor:pointer; border:1.5px solid transparent; background:var(--signal); color:#fff; transition:.15s; margin-top:20px;}
.submit-button:hover{background:var(--signal-d);}
.submit-button:disabled{background:var(--line2); color:var(--white); cursor:not-allowed;}
.cf-note{font-size:11.5px; color:var(--faint); margin-top:10px; line-height:1.75;}

.contact-aside{background:var(--white); border:1px solid var(--line); border-radius:var(--rl); padding:20px; font-size:13px; line-height:1.8; position:sticky; top:82px;}
@media (max-width:920px){ .contact-aside{position:static;} }
.contact-aside h2{font-size:14px; margin-bottom:10px;}
.contact-aside ul{margin:0 0 14px; padding-left:17px; color:var(--mut);}
.contact-aside .ca-k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--copper-d); text-transform:uppercase; display:block; margin-bottom:6px;}

.thanks-wrap{padding:80px 0 100px; max-width:640px;}
.thanks-wrap .tk-mk{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--copper-d); text-transform:uppercase; display:block; margin-bottom:12px;}
.thanks-wrap h1{font-size:28px; line-height:1.4; margin-bottom:14px;}
.thanks-wrap p{color:var(--mut); font-size:14px; margin-bottom:12px;}
.thanks-wrap .tk-box{background:var(--white); border:1px solid var(--line); border-radius:var(--rl); padding:20px; font-size:13px; color:var(--slate); line-height:1.85; margin:22px 0;}

/* 用途診断からの引き継ぎ表示 */
.cf-diag{border:1px solid var(--copper-ln);background:rgba(201,138,79,.06);border-radius:var(--r);padding:14px 16px;margin:0 0 18px}
.cf-diag b{display:block;font-size:13px;margin-bottom:8px;color:var(--copper-d)}
.cf-diag dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 8px;font-size:13px}
.cf-diag dt{color:var(--mut);font-size:11.5px;padding-top:2px}
.cf-diag dd{margin:0;font-weight:600}
.cf-diag p{margin:0;font-size:11.5px;color:var(--mut)}