/* =============================================================
   dk-contact  - お問い合わせフォーム / 確認画面
   ============================================================= */

/* ---------- ラッパー ---------- */
.dk-cf-wrap {
  margin: 0;
  padding: 0;
}

.dk-cf-table,
.dk-cf-table table,
.dk-cf-table td,
.dk-cf-table th {
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: none !important;
}

/* ---------- テーブル (入力・確認共通) ---------- */
.dk-cf-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ccc !important;
}
.dk-cf-table tr {
  border-bottom: 1px solid #ccc !important;
}
.dk-cf-table th,
.dk-cf-table td {
  padding: 16px 12px;
  vertical-align: middle;
  text-align: left;
}
.dk-cf-table th {
  width: 240px;
  white-space: nowrap;
  font-weight: normal;
  /*background: #fff;*/
}
.dk-cf-table td {
  /*background: #fff;*/
}

/* ---------- 必須 / 任意バッジ ---------- */
.dk-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  font-weight: bold;
  line-height: 1.6;
}
.dk-badge--req {
  background: #c0392b;
  color: #fff;
}
.dk-badge--opt {
  background: #555;
  color: #fff;
}
.dk-label {
  vertical-align: middle;
}

/* ---------- 入力フィールド ---------- */
.dk-cf-table td input[type="text"],
.dk-cf-table td input[type="email"],
.dk-cf-table td input[type="tel"],
.dk-cf-table td textarea {
  width: 100%;
  max-width: 480px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
  box-sizing: border-box;
  font-family: inherit;
}
.dk-cf-table td textarea {
  min-height: 120px;
  resize: vertical;
}
.dk-cf-table td input[type="text"]:focus,
.dk-cf-table td input[type="email"]:focus,
.dk-cf-table td input[type="tel"]:focus,
.dk-cf-table td textarea:focus {
  outline: none;
  border-color: #0097a7;
  box-shadow: 0 0 0 2px rgba(0,151,167,.2);
}

/* ---------- 姓/名 2列 ---------- */
/*
 * CF7 の wpautop が有効な場合、内容が <p><br> でラップされる。
 * functions.php の wpcf7_autop_or_not フィルタで contact ページのみ無効化済みだが、
 * 念のため <p> ラップ両パターンに対応するセレクタを両方記述する。
 */
.dk-split2 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: 12px;
  /* 単一 input（max-width:480px）と同幅に揃える */
  max-width: 480px;
}

/* wpautop 無効時：wrap が直接の flex child */
.dk-split2 > .wpcf7-form-control-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* wpautop 有効時フォールバック：<p> を flex コンテナに昇格させる */
.dk-split2 > p {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  width: 100%;
}
.dk-split2 > p > .wpcf7-form-control-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* wpautop が挿入した <br> を非表示 */
.dk-split2 br {
  display: none !important;
}

/* 両パターン共通: input は flex 親に従わせ max-width 解除 */
.dk-split2 input {
  width: 100% !important;
  max-width: none !important;
}

/* ---------- 郵便番号 幅 ---------- */
/* 7桁に見合ったコンパクト幅（単一 input ルールの max-width:480px を上書き） */
.dk-cf-table td input[name="zip-code"] {
  max-width: 140px;
}

/* ---------- 郵便番号ステータス ---------- */
.dk-zip-status {
  font-size: 12px;
  margin-left: 8px;
}
.dk-zip-status--ok   { color: #0097a7; }
.dk-zip-status--err  { color: #c0392b; }

/* ---------- チェックボックス / acceptance ---------- */
.dk-cf-table .wpcf7-list-item {
  margin: 0;
}
.dk-cf-table .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ---------- 個人情報リンク ---------- */
.dk-cf-wrap a[href="/privacy/"] {
  color: #0097a7 !important;
  text-decoration: underline !important;
}
.dk-cf-wrap a[href="/privacy/"]:hover {
  color: #007c87 !important;
}

/* ---------- 個人情報同意 補足テキスト ---------- */
.dk-privacy-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
}

/* ---------- CF7 エラー表示 ---------- */
.wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}
.wpcf7-not-valid {
  border-color: #c0392b !important;
}

/* メール確認不一致エラー */
.dk-email-mismatch-tip {
  color: #c0392b;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

/* ---------- ボタンエリア ---------- */
.dk-cf-btns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 32px 0;
}

/* wpautop 有効時フォールバック：<p> を flex コンテナに昇格 */
.dk-cf-btns > p {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
}
/* wpautop が挿入した <br> を非表示 */
.dk-cf-btns br {
  display: none !important;
}

/* CF7 JS が submit の直後に挿入する wpcf7-spinner を非表示（レイアウト保護） */
.dk-cf-btns .wpcf7-spinner {
  display: none !important;
}

/* ボタン：直接 child / <p> 経由 child 両方に幅 auto を強制 */
.dk-cf-btns > .dk-btn,
.dk-cf-btns > input.wpcf7-submit,
.dk-cf-btns > button,
.dk-cf-btns > p > .dk-btn,
.dk-cf-btns > p > input.wpcf7-submit,
.dk-cf-btns > p > button {
  width: auto !important;
  display: inline-block !important;
  flex-shrink: 0;
}

/* 共通ボタンベース */
.dk-btn {
  display: inline-block;
  min-width: 160px;
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: opacity .2s;
}
.dk-btn:hover { opacity: .85; }

/* 確認するボタン */
.dk-btn--confirm {
  background: #0097a7;
  color: #fff;
}

/* 送信ボタン */
.dk-btn--submit,
input.wpcf7-submit.dk-btn--submit {
  background: #0097a7;
  color: #fff;
}

/* キャンセルボタン */
.dk-btn--back {
  background: #0097a7;
  color: #fff;
}

/* ---------- 確認テーブル（値表示） ---------- */
.dk-cf-table--confirm td {
  font-size: 14px;
  color: #333;
  word-break: break-all;
}
.dk-cf-table--confirm td.dk-conf-val--empty {
  color: #999;
}

/* ---------- CF7 ステータスメッセージ ---------- */
.wpcf7-response-output {
  margin: 16px 0;
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 14px;
}

/* ---------- メールアドレス行：下罫線なし ---------- */
/* 「メールアドレス」と「メールアドレス（確認）」の間の罫線を削除 */
.dk-cf-table tr.dk-no-border-bottom {
  border-bottom: none !important;
}

/* ---------- 住所グループ ---------- */
.dk-addr-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dk-addr-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* wrap を flex アイテムとして横幅を占有させる */
.dk-addr-line .wpcf7-form-control-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
/* 郵便番号行の wrap は入力幅に合わせて縮む */
.dk-addr-zip .wpcf7-form-control-wrap {
  flex: 0 0 auto;
}
/* 郵便番号「〒」テキスト */
.dk-addr-zip {
  align-items: center;
}

/* 都道府県 select */
.dk-addr-group select {
  width: 100%;
  max-width: 200px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  cursor: pointer;
  appearance: auto;
}
.dk-addr-group select:focus {
  outline: none;
  border-color: #0097a7;
  box-shadow: 0 0 0 2px rgba(0,151,167,.2);
}
/* select の wpcf7-not-valid（赤枠）対応 */
.dk-addr-group select.wpcf7-not-valid {
  border-color: #c0392b !important;
}

/* ---------- カタログ請求フォーム select（数量・都道府県 / .dk-addr-group 外） ---------- */
/* contact.css の .dk-addr-group select と同設定 */
.dk-cf-table td select {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  cursor: pointer;
  appearance: auto;
  max-width: 480px;
  width: 100%;
}
.dk-cf-table td select:focus {
  outline: none;
  border-color: #0097a7;
  box-shadow: 0 0 0 2px rgba(0,151,167,.2);
}
.dk-cf-table td select.wpcf7-not-valid {
  border-color: #c0392b !important;
}

/* ---------- カタログ請求フォーム radio（縦並び） ---------- */
/* CF7 の .wpcf7-list-item はデフォルト inline のため block に変更 */
.dk-cf-table td .wpcf7-radio .wpcf7-list-item {
  display: block;
  margin-bottom: 4px;
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
  .dk-cf-table,
  .dk-cf-table tbody,
  .dk-cf-table tr,
  .dk-cf-table th,
  .dk-cf-table td {
    display: block;
    width: 100%;
  }
  .dk-cf-table th {
    padding-bottom: 4px;
    white-space: normal;
  }
  .dk-cf-table td {
    padding-top: 4px;
  }
  /* SP でも flex:row !important が基底に効くため flex-direction 再定義は不要。
     gap・ボタンサイズのみ調整。 */
  .dk-split2 {
    gap: 8px;
  }
  .dk-cf-btns {
    gap: 12px;
  }
  .dk-btn {
    min-width: 120px;
    padding: 12px 16px;
    font-size: 15px;
  }
  /* 住所グループ SP */
  .dk-addr-group select {
    max-width: 100%;
  }
}

/* 介護ゆとりっくすフォーム限定 */
.kaigo-form .dk-cf-table input,
.kaigo-form .dk-cf-table textarea,
.kaigo-form .dk-cf-table select {
  background: #fff;
  border: 1px solid #ccc;
}

/* フォーカス時（UX向上） */
.kaigo-form .dk-cf-table input:focus,
.kaigo-form .dk-cf-table textarea:focus,
.kaigo-form .dk-cf-table select:focus {
  background: #fff;
  border-color: #0097a7;
  outline: none;
}

.kaigo-form .dk-cf-table input {
  height: 42px;
  padding: 8px 10px;
}