/* =========================================================
   Port ファンクラブ向けLP — /online/styles.css への差分のみ
   基本の部品（ヒーロー・カード・料金・FAQ など）はサイン会LPと共通。
   ========================================================= */

/* ---------- Problem: 解決への橋渡し ---------- */
.fc-bridge {
  margin-top: 40px;
  text-align: center;
  font-size: 16px; font-weight: 800; color: var(--black);
  line-height: 2;
  text-wrap: balance;
}

/* ---------- How it works: ファンクラブ側 → Port の流れ ---------- */
.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-bottom: 28px;
}
/* 3ステップ図の直後に置く「完全クローズド」の強調枠（部品は /online/ の highlight-band） */
.fc-closed { margin-top: 0; margin-bottom: 72px; }
.how-step {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px;
}
.how-step.is-port { border-color: var(--black); }
.how-step:not(:last-child)::after {
  content: "→";
  position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  font-size: 16px; font-weight: 700; color: var(--text-faint);
}
.how-who {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--text-sub);
  border: 1px solid var(--line-dark); border-radius: 999px;
  padding: 3px 14px; margin-bottom: 14px;
}
.how-step.is-port .how-who { color: #fff; background: var(--black); border-color: var(--black); }
.how-step h3 { font-size: 17px; font-weight: 900; color: var(--black); margin-bottom: 8px; }
.how-step p { font-size: 13.5px; color: var(--text-sub); }
.how-step p.how-who { color: var(--text-sub); }
.how-step.is-port p.how-who { color: #fff; }

/* ---------- Cases ---------- */
/* 「1,500万円超」が狭いカードで「超」だけ折り返すため、数字を少し小さくして単位を分割させない */
#cases .proof-num { font-size: clamp(44px, 4.4vw, 60px); }
#cases .proof-unit { white-space: nowrap; }
.fc-case-grid { margin-top: 16px; }

/* ---------- Flow（料金の直前・白背景が続くので区切り線を入れる） ---------- */
.fc-flow { border-top: 1px solid var(--line); }
.fc-flow .timeline { margin-bottom: 0; }

@media (max-width: 679px) {
  /* SPのヘッダーは幅が足りないので「Port」だけにする（予約ボタンの折り返し防止） */
  .site-header .logo span { display: none; }
  .fc-bridge { font-size: 15px; text-align: left; }
  .how-steps { grid-template-columns: 1fr; gap: 26px; margin-bottom: 26px; }
  .fc-closed { margin-bottom: 56px; }
  .how-step:not(:last-child)::after {
    content: "↓";
    right: auto; left: 50%; top: auto; bottom: -24px;
    transform: translateX(-50%);
  }
}