/* ===== Contact Form (cfz) — layout & look ===== */
.cfz {
  --gap: 16px;
  --gap-lg: 24px;
  --label-w: 240px; /* PCのラベル幅 */
  --border: #d7dbe3; /* 罫線色 */
  --label-bg: #eaf3ff; /* 左列の背景（淡い青） */
  --text: #111827;
  --muted: #6b7280;
  --accent: #2563eb;
  --danger: #d92c2c;
  --bg-soft: #f9fafb;
  color: var(--text);
  font-size: 16px;
}

/* 2カラム（PC） */
.cfz-dl dl {
  display: grid;
  grid-template-columns: minmax(160px, var(--label-w)) 1fr;
  align-items: start;
  column-gap: var(--gap-lg);
  row-gap: var(--gap);
  margin: 0;
}

/* 左列（項目名）・右列（入力欄） */
.cfz-dl dt,
.cfz-dl dd {
  padding: 12px 14px;
  border-top: 1px dotted var(--border);
  margin: 0;
}
.cfz-dl dt {
  background: var(--label-bg);
  border-radius: 8px 0 0 8px;
}
.cfz-dl dd {
  border-left: 0;
}

/* 先頭行の上線は消す */
.cfz-dl dt:first-of-type,
.cfz-dl dd:first-of-type {
  border-top: 0;
}

/* 入力フィールドのスタイル統一 */
.cfz-dl input[type="text"],
.cfz-dl input[type="email"],
.cfz-dl input[type="tel"],
.cfz-dl select,
.cfz-dl textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.6;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.cfz-dl textarea {
  min-height: 160px;
  resize: vertical;
}
.cfz-dl input:focus,
.cfz-dl select:focus,
.cfz-dl textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 郵便番号の左右入力を横並びに */
#zip1,
#zip2 {
  width: 7rem;
}
#zip1 {
  margin-right: 0.5rem;
}
#zip2 {
  margin-left: 0.5rem;
}

/* 必須マーク（CSS :has で自動検出） */
.cfz-dl dt .cfz-req::after {
  content: "必須";
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: var(--danger);
  border-radius: 999px;
  vertical-align: middle;
}
.cfz-dl p{
  text-indent: 0;
  margin:0;
}

/* 補足・プライバシー文、ボタン群 */
.cfz-note,
.cfz-privacy {
  margin-top: 20px;
  color: var(--muted);
}
.cfz-privacy {
  background: var(--bg-soft);
  padding: 12px 14px;
  border-radius: 8px;
}

/* ボタン */
.cfz-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cfz-confirm-button,
.cfz-submit-button,
.cfz-back-button {
  appearance: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.05s ease, opacity 0.2s ease, background 0.2s ease;
}
.cfz-back-button {
  border-color: var(--border);
  background: #fff;
  color: var(--text);
}
.cfz-confirm-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.cfz-confirm-button:active,
.cfz-submit-button:active,
.cfz-back-button:active {
  transform: translateY(1px);
}

/* 確認画面の行間調整 */
.cfz-confirm .cfz-dl dl {
  grid-template-columns: minmax(160px, var(--label-w)) 1fr;
}
.cfz-confirm .cfz-dl dd {
  padding-top: 14px;
}

/* ===== SPは1カラムに ===== */
@media (max-width: 767px) {
  .cfz-dl dl,
  .cfz-confirm .cfz-dl dl {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .cfz-dl dt {
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 600;
  }
  .cfz-dl dd {
    padding: 0 0 14px 0;
    border-top: 0;
  }
  .cfz-dl input[type="text"],
  .cfz-dl input[type="email"],
  .cfz-dl input[type="tel"],
  .cfz-dl select,
  .cfz-dl textarea {
    margin-top: 6px;
  }
  #zip1,
  #zip2 {
    width: 6.5rem;
  }
}