/* ======================================================
   KENNDO — page-contact.css
   ====================================================== */

/* ---- 外部フォーム（Tally等）埋め込み枠 ---- */
.formwrap { max-width: 680px; margin: 0 auto; }
.formlead {
  font-size: 15px; color: #48535f; line-height: 2;
  margin-bottom: 32px;
}
/* 埋め込みコードは無加工で貼る前提。iframeの固定widthをここで矯正する。 */
.formwrap iframe {
  width: 100% !important;
  max-width: 100%;
  border: none;
  display: block;
}

/* ---- 個人情報の同意導線 ---- */
.consent {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 32px;
}
.consent-ttl {
  font-size: 14px; font-weight: 700; color: var(--navy);
  margin-bottom: 10px;
}
.consent p { font-size: 13.5px; color: #48535f; line-height: 1.9; }
.consent a {
  color: var(--accent-text); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.consent a:hover { color: var(--accent-darker); }
.consent-note {
  margin-top: 10px; font-size: 12.5px !important; color: var(--muted) !important;
}

/* ---- 埋め込み待ちプレースホルダ ----
   公開版に残ってしまった場合に一目で分かるよう、
   意図的に本編と違う見た目（破線・グレー）にしている。 */
.formslot {
  border: 2px dashed #b8c2cd;
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 10px, #f2f5f8 10px, #f2f5f8 20px);
  padding: 48px 24px;
  text-align: center;
}
.formslot-tag {
  display: inline-block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: #fff; background: #8a95a1;
  border-radius: 4px; padding: 5px 12px;
  margin-bottom: 14px;
}
.formslot-txt { font-size: 13.5px; color: var(--muted); line-height: 1.9; }

/* ---- 自前フォーム（現在は不使用） ----
   Tally等をやめて自前フォームに戻す場合に、そのまま再利用できるよう残置。 */
.contact-form label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; padding: 13px 16px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 8px !important; font-size: 14px !important;
  background: #fff !important; color: var(--text) !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,167,189,.14) !important;
}
.contact-form input.invalid,
.contact-form select.invalid,
.contact-form textarea.invalid {
  border-color: #e53935 !important;
}
.contact-form textarea { resize: vertical; min-height: 140px; }


/* Tally embedded contact form */
.tally-embed {
  margin-top: 24px;
}
.tally-embed iframe {
  display: block;
  width: 100%;
  min-height: 760px;
  border: 0;
}
@media (max-width: 768px) {
  .tally-embed iframe {
    min-height: 820px;
  }
}