/* =========================================================
   お問い合わせページ用CSS（MW WP Form 用）
   設置先: wp-content/themes/staffTemplate/css/contact.css
   既存サイト（背景 #141417 / 罫線 #404040 / Garamond・明朝）に合わせています
   ========================================================= */

.contact { max-width: 720px; margin: 0 auto; padding: 200px 24px 140px; color: #fff; }
.contact__heading {
    font-family: "adobe-garamond-pro", serif; font-weight: 400; font-size: 34px;
    text-align: center; letter-spacing: 0.06em;
}
.contact__heading::after {
    content: ""; display: block; width: 12.8px; height: 1px;
    background: #fff; margin: 22px auto 0;
}
.contact__lead { text-align: center; margin: 40px 0 56px; line-height: 1.9; }
.contact__lead small { display: block; margin-top: 12px; color: #a3a3a8; font-size: 12px; }
html[data-contact-step="confirm"] .contact__lead,
html[data-contact-step="complete"] .contact__lead { display: none; }

.contact__steps {
    display: flex; justify-content: center; gap: 0 36px; list-style: none; padding: 0;
    font-family: "NHaasGroteskDSPro-45Lt", sans-serif; font-size: 11px; letter-spacing: 0.1em;
    color: #a3a3a8; margin: 0 0 64px;
}
html[data-contact-step="confirm"] .contact__steps,
html[data-contact-step="complete"] .contact__steps { margin-top: 48px; }
.contact__steps li { padding-bottom: 8px; border-bottom: 1px solid transparent; }
.contact__steps li.is-current { color: #fff; border-color: #fff; }

/* 各項目 */
.contact .field { padding: 30px 0; border-top: 1px solid #404040; }
.contact .field--last { border-bottom: 1px solid #404040; }
.contact .field__label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.contact .field__label .en { font-family: "adobe-garamond-pro", serif; font-size: 13px; color: #a3a3a8; }
.contact .req, .contact .opt {
    margin-left: auto; font-family: "NHaasGroteskDSPro-45Lt", sans-serif; font-size: 10px; letter-spacing: 0.1em;
}
.contact .req { border: 1px solid #6b6b70; padding: 0 7px; line-height: 18px; }
.contact .opt { color: #a3a3a8; }
html[data-contact-step="confirm"] .contact .req,
html[data-contact-step="confirm"] .contact .opt { display: none; }

.contact input[type="text"], .contact input[type="email"], .contact input[type="tel"], .contact textarea {
    width: 100%; background: #1c1c20; color: #fff; border: 1px solid #404040; border-radius: 0;
    padding: 14px 16px; font: inherit; font-size: 15px; letter-spacing: 0.04em; line-height: 1.6;
    -webkit-appearance: none; appearance: none; transition: border-color .3s; box-sizing: border-box;
}
.contact textarea { min-height: 200px; resize: vertical; line-height: 1.8; }
.contact input:focus, .contact textarea:focus { outline: none; border-color: #bdbdc2; }
.contact ::placeholder { color: #5f5f66; }

/* ラジオ・チェックボックス */
.contact .mwform-radio-field, .contact .mwform-checkbox-field { display: inline-block; margin: 0 !important; }
.contact .field--radio .field__value,
.contact .field--radio .field__value > p { display: flex; flex-wrap: wrap; margin: 0; }
.contact .field--radio .field__value .error { flex-basis: 100%; }
.contact .field--radio .mwform-radio-field { width: 50%; padding: 6px 0; box-sizing: border-box; }
.contact .mwform-radio-field label, .contact .mwform-checkbox-field label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.contact input[type="radio"], .contact input[type="checkbox"] { accent-color: #fff; width: 15px; height: 15px; margin: 0; }

/* 確認画面の値 */
html[data-contact-step="confirm"] .contact .field { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 24px 0; }
html[data-contact-step="confirm"] .contact .field__label { margin: 0; color: #a3a3a8; font-size: 13px; }
html[data-contact-step="confirm"] .contact .field__label .en { display: none; }
html[data-contact-step="confirm"] .contact .field__value { white-space: pre-wrap; word-break: break-word; }

/* 同意 */
.contact .agree { text-align: center; margin-top: 56px; }
.contact .agree__note { color: #a3a3a8; font-size: 12px; margin-bottom: 16px; }
html[data-contact-step="confirm"] .contact .agree { display: none; }

/* ボタン（サイトの .btn と同じ下線＋矢印） */
.contact .actions { display: flex; justify-content: center; gap: 32px 56px; margin-top: 64px; flex-wrap: wrap; }
.contact .actions input[type="submit"] {
    min-width: 259px; background: none; border: none; border-bottom: 1px solid #fff; border-radius: 0; color: #fff;
    font-family: "NHaasGroteskDSPro-55Rg", sans-serif; font-size: 14px; letter-spacing: 0.08em; text-align: left;
    padding: 0 0 15px; cursor: pointer; transition: opacity .3s;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 2px top 3px;
}
.contact .actions input[name="submitBack"] {
    border-color: #6b6b70; color: #a3a3a8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M7 1L2 6l5 5' fill='none' stroke='%23a3a3a8' stroke-width='1'/%3E%3C/svg%3E");
}
.contact .actions input[type="submit"]:hover { opacity: .8; }

/* エラー */
.contact .mw_wp_form .error { display: block; color: #e58b8b; font-size: 12px; margin-top: 8px; }

/* 完了画面 */
.contact .contact__thanks { text-align: center; line-height: 2; }
.contact .contact__thanks p { margin-bottom: 18px; }
.contact .contact__thanks small { color: #a3a3a8; font-size: 12px; }
.contact .contact__thanks .back {
    display: inline-block; min-width: 259px; margin-top: 56px; text-align: left; text-decoration: none; color: #fff;
    border-bottom: 1px solid #fff; padding-bottom: 15px; position: relative;
    font-family: "NHaasGroteskDSPro-55Rg", sans-serif; font-size: 14px; letter-spacing: 0.08em;
}
.contact .contact__thanks .back::after { content: ">"; position: absolute; right: 0; top: 0; font-size: 13px; }

@media screen and (max-width: 768px) {
    .contact { padding: 130px 16px 100px; }
    .contact__heading { font-size: 26px; }
    .contact__lead { text-align: left; margin: 28px 0 40px; }
    .contact__steps { gap: 0 20px; margin-bottom: 40px; }
    .contact .field { padding: 24px 0; }
    .contact .field--radio .mwform-radio-field { width: 100%; }
    html[data-contact-step="confirm"] .contact .field { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
    .contact .actions { flex-direction: column-reverse; align-items: center; }
    .contact .actions input[type="submit"], .contact .contact__thanks .back { min-width: 220px; font-size: 12px; padding-bottom: 8px; }
}