/* ══════════════════════════════════════════════════════════════
   Kaname リファラル（紹介）フロント専用スタイル（.kt-inv スコープのみ）。
   目的: 会員が「友だちを招く」ページ／被紹介ウェルカム帯／会員ホームの導線。
   方針: 上品・非断定・押し売りしない。既存トークン（青#2B6CF6・コーラル#FF7A59・
         白背景・角丸・M PLUS Rounded）に馴染ませる。新規 "100%" リテラル禁止。
         390px完璧・320可・タップ44px・prefers-reduced-motion で動きを止める。
   既存CSSは編集しない（このファイルに閉じる）。
   ══════════════════════════════════════════════════════════════ */

/* ── 紹介ページの外枠（招待の主役カード）── */
.kt-inv-hero {
  margin: 6px 0 0;
  padding: 22px 20px 20px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(140deg, #2b6cf6, #4f86ff 58%, #7aa8ff);
  box-shadow: 0 16px 38px rgba(43, 108, 246, .26);
  position: relative;
  overflow: hidden;
}
.kt-inv-hero::after {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}
.kt-inv-hero-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  gap: 7px;
}
.kt-inv-hero-ico {
  font-size: 38px;
  line-height: 1;
  display: block;
  margin: 0 0 8px;
}
.kt-inv-hero-title {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.32;
  margin: 0 0 8px;
  color: #fff;
}
.kt-inv-hero-lead {
  font-size: 13.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .94);
  margin: 0;
}

/* ── あなたの紹介リンク（コピー欄）── */
.kt-inv-link {
  margin: 16px 0 0;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(43, 108, 246, .14);
  box-shadow: 0 6px 18px rgba(43, 108, 246, .06);
}
.kt-inv-link-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--kt-kicker, #A64B35);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kt-inv-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.kt-inv-link-field {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(43, 108, 246, .22);
  background: #f6f9ff;
  color: #1b2b4b;
  font-size: 13px;
  font-family: inherit;
  min-height: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kt-inv-copy {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(120deg, #2b6cf6, #4f86ff);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  min-height: 46px;
  box-shadow: 0 6px 16px rgba(43, 108, 246, .24);
}
.kt-inv-copy:hover { transform: translateY(-1px); }
.kt-inv-copy-flash {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #17845a;
}
.kt-inv-code {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #6b7488;
}
.kt-inv-code b {
  color: #384259;
  font-weight: 800;
  letter-spacing: .06em;
}

/* ── シェアボタン群（X / LINE / その他）── */
.kt-inv-share {
  margin: 14px 0 0;
}
.kt-inv-share-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #6b7488;
  margin: 0 0 8px;
  padding: 0 2px;
}
.kt-inv-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.kt-inv-share-btn {
  flex: 1 1 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 800;
  min-height: 48px;
  border: 1px solid rgba(43, 108, 246, .14);
  background: #fff;
  color: #34405c;
  box-shadow: 0 3px 10px rgba(43, 108, 246, .05);
}
.kt-inv-share-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(43, 108, 246, .26);
}
.kt-inv-share-btn--x {
  background: #1b2733;
  color: #fff;
  border-color: #1b2733;
}
.kt-inv-share-btn--line {
  background: #06c755;
  color: #fff;
  border-color: #06c755;
}
.kt-inv-share-ico { font-size: 16px; line-height: 1; }

/* ── 参加した友だち数＋節目バッジ ── */
.kt-inv-count {
  margin: 16px 0 0;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #f4f8ff);
  border: 1px solid rgba(43, 108, 246, .14);
}
.kt-inv-count-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--kt-kicker, #A64B35);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kt-inv-count-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  flex-wrap: wrap;
}
.kt-inv-count-num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.02;
  color: #1b2b4b;
}
.kt-inv-count-unit {
  font-size: 13px;
  color: #5b6478;
  font-weight: 700;
}
.kt-inv-count-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: #5b6478;
  margin: 6px 0 0;
}

/* 節目バッジ（競争でなく記録・煽らない） */
.kt-inv-badges {
  margin: 12px 0 0;
}
.kt-inv-badges-h {
  font-size: 11.5px;
  font-weight: 700;
  color: #5b6478;
  margin: 0 0 8px;
}
.kt-inv-badge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kt-inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(43, 108, 246, .16);
  font-size: 12px;
  font-weight: 700;
  color: #34405c;
}
.kt-inv-badge-emoji { font-size: 15px; line-height: 1; }
.kt-inv-badges-empty {
  font-size: 12px;
  line-height: 1.55;
  color: #5b6478;
  margin: 0;
}

/* ── 特典の説明（非断定・「本稼働時に付与予定・変更あり」）── */
.kt-inv-reward {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7f1, #fff);
  border: 1px solid rgba(255, 122, 89, .22);
}
.kt-inv-reward-kicker {
  font-size: 12px;
  font-weight: 700;
  color: #c2371a;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kt-inv-reward-body {
  font-size: 12.5px;
  line-height: 1.6;
  color: #475066;
  margin: 0;
}
.kt-inv-reward-note {
  font-size: 11px;
  line-height: 1.5;
  color: #6d6579;
  margin: 8px 0 0;
}

/* ── 招くコツ（3ステップの控えめな説明）── */
.kt-inv-how {
  margin: 16px 0 0;
}
.kt-inv-how-kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #6b7488;
  margin: 0 0 8px;
  padding: 0 2px;
}
.kt-inv-how-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.kt-inv-how-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(43, 108, 246, .10);
}
.kt-inv-how-no {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef3ff;
  color: #1b52cc;
  font-size: 12px;
  font-weight: 800;
}
.kt-inv-how-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: #34405c;
  min-width: 0;
}

/* ── 非会員ロック（会員のみ・入会へ）── */
.kt-inv-locked {
  margin: 16px 0 0;
  padding: 22px 20px 20px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(150deg, #fffdf8, #fff);
  border: 1px solid rgba(43, 108, 246, .20);
  box-shadow: 0 10px 26px rgba(43, 108, 246, .10);
}
.kt-inv-locked-ico { font-size: 34px; line-height: 1; display: block; margin: 0 0 10px; }
.kt-inv-locked-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: #1b2b4b;
  margin: 0 0 8px;
}
.kt-inv-locked-lead {
  font-size: 13px;
  line-height: 1.62;
  color: #5a6377;
  margin: 0 auto 16px;
  max-width: 320px;
}
.kt-inv-locked-cta {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  padding: 15px 26px;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(120deg, #2b6cf6, #4f86ff);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(43, 108, 246, .28);
  min-height: 50px;
}
.kt-inv-locked-cta:hover { transform: translateY(-1px); }

/* 紹介ページ末尾の会員ホームへ戻る導線 */
.kt-inv-back { margin: 18px 0 0; text-align: center; }

/* ══════════════════════════════════════════════════════════════
   会員ホーム（kaname_member.html）の「🎁 友だちを招く」従属導線。
   主役（次の一歩）を邪魔しない一枚。非会員は鍵。
   ══════════════════════════════════════════════════════════════ */
.kt-invcta {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 18px;
  text-decoration: none;
  background: linear-gradient(135deg, #fff, #fff7f1);
  border: 1px solid rgba(255, 122, 89, .22);
  box-shadow: 0 6px 18px rgba(255, 122, 89, .08);
}
.kt-invcta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 122, 89, .14); }
.kt-invcta-ico { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.kt-invcta-main { min-width: 0; flex: 1 1 auto; }
.kt-invcta-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #c2371a; margin: 0 0 2px; }
.kt-invcta-title { font-size: 15px; font-weight: 800; color: #1b2b4b; margin: 0 0 2px; line-height: 1.3; }
.kt-invcta-sub { font-size: 11.5px; line-height: 1.45; color: #5b6478; margin: 0; }
.kt-invcta-go { flex: 0 0 auto; color: #c2371a; font-weight: 800; font-size: 18px; }
.kt-invcta-lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 122, 89, .12);
  color: #c2371a;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   被紹介者ウェルカム帯（kaname_lp.html・kt_referred が真のときだけ）。
   ヒーロー付近に控えめに。偽の希少性・保証なし。
   ══════════════════════════════════════════════════════════════ */
.kt-welcome {
  margin: 2px 0 14px;
  padding: 16px 18px 15px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff7f1, #fff4ee);
  border: 1px solid rgba(255, 122, 89, .28);
  box-shadow: 0 8px 22px rgba(255, 122, 89, .12);
  text-align: center;
}
.kt-welcome-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #c2371a;
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kt-welcome-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: #b03d20;
  margin: 0 0 6px;
}
.kt-welcome-lead {
  font-size: 12.5px;
  line-height: 1.6;
  color: #6a5a52;
  margin: 0 auto 12px;
  max-width: 320px;
}
.kt-welcome-cta {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(120deg, #ff7a59, #ff936f);
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(255, 122, 89, .30);
  min-height: 48px;
}
.kt-welcome-cta:hover { transform: translateY(-1px); }
.kt-welcome-sub {
  display: block;
  margin: 9px 0 0;
  font-size: 11.5px;
}
.kt-welcome-sub a { color: #b03d20; text-decoration: underline; }

/* prefers-reduced-motion: 動き（浮き上がり等）を止める。 */
@media (prefers-reduced-motion: reduce) {
  .kt-inv-copy:hover,
  .kt-inv-share-btn:hover,
  .kt-inv-locked-cta:hover,
  .kt-invcta:hover,
  .kt-welcome-cta:hover {
    transform: none;
  }
}