@charset "UTF-8";
/* ==================================================================
 *  お問い合わせ（page-contact.php / Contact Form 7）専用CSS
 * ================================================================== */
#contact { padding: 110px 48px; background: linear-gradient(160deg,#1b1b1e 0,#101012 100%); }
.contact-wrap { max-width: 760px; margin: 0 auto; }
/* text-wrap:balance で行長を均等化、word-break:auto-phrase で文節単位に折り返し（SPの段落ち防止） */
.contact-lead { text-align: center; font-size: 15px; line-height: 2.0; color: var(--gray-l); margin-bottom: 48px; text-wrap: balance; word-break: auto-phrase; }

/* フォームは白カードで浮かせる */
.contact-form { background: var(--paper); border-radius: 6px; padding: 50px 54px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }

/* CF7 のマークアップに合わせた汎用スタイル */
.contact-form .wpcf7-form p { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; font-size: 14px; color: var(--ink); letter-spacing: .06em; }
.contact-form label { font-size: 14px; color: var(--ink); letter-spacing: .06em; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea, .contact-form select {
  width: 100%; border: 1px solid #ccc; padding: 13px 16px; font-family: var(--sans); font-size: 14px; border-radius: 3px; background: #fff; transition: border .3s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-color: var(--ink); background: #fff; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form .wpcf7-list-item { display: inline-block; margin: 0 14px 0 0; }
.contact-form .wpcf7-submit {
  display: inline-block; background: var(--ink); color: var(--paper); border: 0; padding: 18px 60px; font-family: var(--sans); font-size: 14px; letter-spacing: .16em; cursor: pointer; transition: opacity .3s; border-radius: 3px;
}
.contact-form .wpcf7-submit:hover { opacity: .82; }
.contact-form .wpcf7-spinner { margin: 14px auto 0; }
.contact-form .wpcf7-form > p:last-of-type { align-items: center; }
.wpcf7 .wpcf7-not-valid-tip { color: #c0392b; font-size: 12px; }
.wpcf7-response-output { border-radius: 3px; font-size: 13px; margin: 20px 0 0; }
.req { color: #c0392b; font-size: 11px; margin-left: 8px; }

.contact-direct { margin-top: 40px; text-align: center; padding: 34px 40px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 6px; }
.contact-direct p { font-size: 13px; color: var(--gray-l); line-height: 2; }
.contact-direct .tel { font-family: var(--en); font-size: 26px; letter-spacing: .06em; color: var(--paper); margin-top: 8px; }
.contact-direct .tel a { color: var(--paper); }
/* 黒背景の contact 上では戻るボタンを白抜きに */
#contact .ws-back a { color: var(--paper); border-color: var(--paper); }
#contact .ws-back a:hover { background: var(--paper); color: var(--ink); }

/* --- CF7 Multi-Step：label で囲むフォーム & 確認画面 --- */
/* 1項目＝1ブロック（入力画面・確認画面 共通） */
.contact-form form label { display: block; margin-bottom: 22px; font-size: 13px; color: #6a6a6e; letter-spacing: .08em; }
.contact-form form label .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.contact-form form label input,
.contact-form form label textarea,
.contact-form form label select { margin-top: 8px; }

/* 確認画面：読み取り専用の値（プラグインが .wpcf7c-conf を付与）をテキスト表示に */
.contact-form .wpcf7c-conf {
  border: 0; background: transparent; padding: 6px 0; margin-top: 6px;
  font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: .04em;
  border-bottom: 1px solid var(--line-d); border-radius: 0; pointer-events: none;
}
.contact-form textarea.wpcf7c-conf { min-height: auto; resize: none; }

/* 「戻る」ボタン（[previous] / .wpcf7c-btn-back）は白地＋黒枠、「送信」は黒塗り */
.contact-form input[type="button"],
.contact-form .wpcf7c-btn-back {
  display: inline-block; background: #fff; color: var(--ink); border: 1px solid var(--ink);
  padding: 17px 44px; font-family: var(--sans); font-size: 14px; letter-spacing: .16em; cursor: pointer;
  border-radius: 3px; margin: 10px 10px 0 0; transition: background .3s, color .3s, opacity .3s;
}
.contact-form input[type="button"]:hover,
.contact-form .wpcf7c-btn-back:hover { background: var(--ink); color: var(--paper); }
/* ボタン行を中央寄せ（戻る／送信を横並びで） */
.contact-form .wpcf7-form > p:last-child,
.contact-form form > p:last-child { text-align: center; margin-top: 10px; }

/* --- 必須／任意バッジ --- */
.contact-form .red, .contact-form .blue {
  display: inline-block; font-size: 11px; line-height: 1; letter-spacing: .08em; font-weight: 500;
  padding: 5px 9px; border-radius: 3px; margin-left: 10px; vertical-align: middle; white-space: nowrap;
}
/* 必須：赤ベタ */
.contact-form .red { background: #c0392b; color: #fff; }
/* 任意：濃いグレーのベタ塗り（薄グレーだと紙白カード上で埋もれるため） */
.contact-form .blue { background: #6b6b71; color: #fff; }

/* --- プライバシーポリシー同意チェック --- */
.contact-form label.policy { display: block; text-align: center; margin: 8px 0 4px; color: var(--ink); }
.contact-form .wpcf7-checkbox label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--ink); letter-spacing: .04em; cursor: pointer; }
.contact-form input[type="checkbox"] { width: auto; margin: 0; transform: scale(1.15); accent-color: var(--ink); }
.contact-form .wpcf7-list-item { margin: 0; }

/* 送信（入力内容の確認）ボタンを中央に */
.contact-form .wpcf7-submit { margin-top: 6px; }
@media (max-width: 1024px) { #contact { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 768px) {
  #contact { padding: 76px 22px; }
  .contact-form { padding: 34px 24px; }
  .contact-direct { padding: 26px 20px; }
  .contact-lead { font-size: 14px; letter-spacing: .01em; }
}