/* Kaname 無料リード獲得（メール取得）カード。スコープは .kt-ec のみ。
   既存トークン（kaname.css の --kt-*）を再利用。横はみ出し禁止のため幅は min()/clamp() で。
   幅の全角リテラルは使わない（min()/clamp()/92vw で表現）。 */

.kt-ec {
  display: block;
  width: min(92vw, 520px);
  margin: 22px auto 6px;
  box-sizing: border-box;
}

.kt-ec-card {
  box-sizing: border-box;
  width: min(92vw, 520px);
  max-width: min(92vw, 520px);
  margin: 0 auto;
  padding: clamp(18px, 5vw, 26px);
  border: 1px solid var(--kt-line, #E4E9F2);
  border-radius: 22px;
  background: var(--kt-bg-soft, #F2F6FF);
  text-align: center;
}

.kt-ec-kicker {
  margin: 0 0 8px;
  font-size: .9rem;
  font-weight: 800;
  color: var(--kt-kicker, #A64B35);
  letter-spacing: .02em;
}
.kt-ec-emoji { font-style: normal; }

.kt-ec-title {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 4.6vw, 1.4rem);
  line-height: 1.45;
  font-weight: 800;
  color: var(--kt-ink, #1E2433);
}

.kt-ec-lead {
  margin: 0 auto 14px;
  max-width: min(88vw, 440px);
  font-size: .94rem;
  line-height: 1.7;
  color: var(--kt-ink-soft, #5B6478);
}

/* 得られるもの（perks） */
.kt-ec-perks {
  list-style: none;
  margin: 0 auto 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(88vw, 420px);
  text-align: left;
}
.kt-ec-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: auto;
  padding: 10px 14px;
  border: 1px solid var(--kt-line, #E4E9F2);
  border-radius: 14px;
  background: var(--kt-bg, #FBFCFF);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--kt-ink, #1E2433);
}
.kt-ec-perk-ic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  border-radius: 10px;
  background: var(--kt-accent-bg, #E7EFFF);
}

/* フォーム */
.kt-ec-form {
  display: block;
  margin: 0 auto;
  max-width: min(88vw, 420px);
  text-align: left;
}

.kt-ec-field { display: block; margin: 0 0 12px; }
.kt-ec-field-label {
  display: block;
  margin: 0 0 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--kt-ink-soft, #5B6478);
}
.kt-ec-input {
  box-sizing: border-box;
  display: block;
  width: min(88vw, 420px);
  max-width: min(88vw, 420px);
  padding: 13px 14px;
  font-size: 1rem;
  color: var(--kt-ink, #1E2433);
  border: 1.5px solid var(--kt-line, #E4E9F2);
  border-radius: 13px;
  background: var(--kt-bg, #FBFCFF);
  -webkit-appearance: none;
  appearance: none;
}
.kt-ec-input:focus {
  outline: none;
  border-color: var(--kt-accent, #2B6CF6);
  box-shadow: 0 0 0 3px var(--kt-accent-bg, #E7EFFF);
}

/* 同意チェック */
.kt-ec-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  cursor: pointer;
}
.kt-ec-consent-box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--kt-accent, #2B6CF6);
  cursor: pointer;
}
.kt-ec-consent-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--kt-ink, #1E2433);
}
.kt-ec-privacy {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  color: var(--kt-ink-soft, #5B6478);
}

/* 送信ボタン */
.kt-ec-submit {
  box-sizing: border-box;
  display: block;
  width: min(88vw, 420px);
  max-width: min(88vw, 420px);
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: var(--kt-accent, #2B6CF6);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease, transform .08s ease;
}
.kt-ec-submit:hover { background: var(--kt-accent-d, #1B52CC); }
.kt-ec-submit:active { transform: translateY(1px); }
.kt-ec-submit:disabled {
  background: #B7C2D6;
  cursor: not-allowed;
  opacity: .8;
}

.kt-ec-note {
  margin: 10px 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--kt-ink-soft, #5B6478);
  text-align: center;
}

.kt-ec-error {
  margin: 0 0 10px;
  padding: 9px 12px;
  font-size: .82rem;
  line-height: 1.5;
  color: #8A2B2B;
  background: #FCEDED;
  border: 1px solid #F2C9C9;
  border-radius: 11px;
}

/* お礼（送信後） */
.kt-ec-thanks { padding: 8px 0 4px; text-align: center; }
.kt-ec-thanks-emoji { font-size: 2.2rem; line-height: 1; margin-bottom: 8px; }
.kt-ec-thanks-title {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--kt-ink, #1E2433);
}
.kt-ec-thanks-sub {
  margin: 0 auto;
  max-width: min(86vw, 380px);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--kt-ink-soft, #5B6478);
}

/* タブバー（画面下固定）と被らないよう、最後の出現時に余白を確保 */
.kt-ec:last-of-type { margin-bottom: 18px; }