/* お問い合わせフォーム（入力欄の基本スタイルは theme/style.css を利用） */
.contact-form { max-width: 760px; margin: 30px auto 0; }
.contact-form-field { margin-bottom: 22px; }
.contact-form-field > label { display: block; font-weight: 600; color: #222; margin-bottom: 8px; }
.contact-form select { color: #777; border: 1px solid #e7e7e7; padding: 13px 20px; width: 100%; height: auto; background-color: #fff; box-sizing: border-box; transition: border ease .238s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #46b0e4; outline: 0; }
.contact-form input, .contact-form textarea { margin-bottom: 0; }
.contact-form textarea { width: 100%; border: 1px solid #e7e7e7; padding: 13px 20px; box-sizing: border-box; }
.contact-form .is-invalid { border-color: #d9534f !important; }

.contact-form-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 11px; font-weight: 600; line-height: 18px; color: #fff; background-color: #aaa; border-radius: 2px; vertical-align: middle; }
.contact-form-badge.is-required { background-color: #d9534f; }

.contact-form-note { margin: 6px 0 0; font-size: 13px; color: #888; }
.contact-form-error { margin: 6px 0 0; font-size: 13px; color: #d9534f; min-height: 0; }
.contact-form-error:empty { display: none; }

.contact-form-agree > label { font-weight: 400; color: #555; }
.contact-form-agree input[type="checkbox"] { width: auto; margin-right: 6px; }

/* ボット対策の非表示項目 */
.contact-form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-form-actions { text-align: center; margin-top: 30px; }
.contact-form-submit { min-width: 240px; padding: 16px 30px; border: 0; font-weight: 600; letter-spacing: 1px; color: #fff; background-color: #46b0e4; cursor: pointer; transition: background-color ease .3s; }
.contact-form-submit:hover, .contact-form-submit:focus { background-color: #222; outline: 0; }
.contact-form-submit[disabled] { opacity: .6; cursor: wait; }

.contact-form-result { margin-top: 24px; }
.contact-form-result:empty { display: none; }
.contact-form-result.is-success, .contact-form-result.is-error { padding: 18px 22px; border-left: 4px solid; }
.contact-form-result.is-success { border-color: #46b0e4; background-color: #eef7fc; color: #222; }
.contact-form-result.is-error { border-color: #d9534f; background-color: #fdf1f0; color: #a94442; }

@media (max-width: 767px) {
  .contact-form-submit { width: 100%; min-width: 0; }
}
