/* ========================================
 * page-contact-pc.css
 * お問い合わせフォーム(PC)
 * ======================================== */

/* フォーム全体の枠 */
.cntc-form-1 { max-width: var(--widt-1); margin: var(--marg-1); padding: var(--padd-6); background: var(--colr-2); border: 2px solid var(--colr-1); border-radius: var(--radi-2); }

/* ハニーポット(非表示) */
.cntc-hpot-1 { position: absolute; left: -9999px; opacity: 0; }

/* ラベル+入力欄セット */
.cntc-labl-1 { display: var(--disp-1); margin-bottom: var(--padd-6); font-weight: var(--fwgt-1); color: var(--colr-1); }

/* テキスト入力欄 */
.cntc-inpt-1 { display: var(--disp-1); width: 100%; margin-top: var(--marg-2); padding: var(--padd-2); border: 1px solid var(--colr-6); border-radius: var(--radi-1); font-size: var(--font-3); }

/* フォーカス時、メインカラーで強調 */
.cntc-inpt-1:focus { border-color: var(--colr-1); outline: none; box-shadow: 0 0 0 3px var(--colr-5); }

/* テキストエリア */
.cntc-area-1 { display: var(--disp-1); width: 100%; margin-top: var(--marg-2); padding: var(--padd-2); border: 1px solid var(--colr-6); border-radius: var(--radi-1); font-size: var(--font-3); resize: vertical; }

.cntc-area-1:focus { border-color: var(--colr-1); outline: none; box-shadow: 0 0 0 3px var(--colr-5); }

/* ボタンエリア */
.cntc-btns-1 { display: flex; gap: var(--padd-6); margin-top: var(--padd-6); }

/* 送信ボタン(メインカラー、塗り) */
.cntc-subm-1 { flex: 1; padding: var(--padd-2); background: var(--colr-1); color: var(--colr-2); font-weight: var(--fwgt-1); font-size: var(--font-3); border: none; border-radius: var(--radi-1); cursor: pointer; transition: background 0.2s; }

/* 送信ボタン、ホバーでアクセントカラーに変化 */
.cntc-subm-1:hover { background: var(--colr-3); }

/* キャンセルボタン(アクセントカラーの縁取り) */
.cntc-canc-1 { flex: 1; padding: var(--padd-2); background: var(--colr-2); color: var(--colr-3); font-weight: var(--fwgt-1); font-size: var(--font-3); border: 2px solid var(--colr-3); border-radius: var(--radi-1); text-align: center; text-decoration: none; transition: background 0.2s, color 0.2s; }

/* キャンセルボタン、ホバーでアクセントカラー塗りに反転 */
.cntc-canc-1:hover { background: var(--colr-3); color: var(--colr-2); }

/* 送信完了メッセージ */
.cntc-done-1 { max-width: var(--widt-1); margin: var(--padd-6) auto; padding: var(--padd-6); text-align: center; font-size: var(--font-3); color: var(--colr-1); background: var(--colr-5); border: 2px solid var(--colr-1); border-radius: var(--radi-2); }