/* ============================================================
   components.css — 再利用パーツ（ボタン / フェードイン）
   タグ・バッジ・カード類は各セクション固有のため sections.css 側
   ============================================================ */

/* BUTTONS */
/* 統一ルール: お問い合わせ = btn-contact (brand-dark固定) / 白背景に白ボタンNG */
.btn-contact{
  background:var(--accent);color:#fff;
  padding:14px 36px;font-size:14px;font-weight:700;
  letter-spacing:0.06em;text-decoration:none;border-radius:3px;
  transition:background .2s,transform .15s;display:inline-block;
}
.btn-contact:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn-primary{
  background:var(--brand);color:#fff;
  padding:14px 36px;font-size:14px;font-weight:700;
  letter-spacing:0.05em;text-decoration:none;border-radius:3px;
  transition:background .2s,transform .15s;display:inline-block;
}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-2px)}
.btn-ghost{
  color:var(--text-primary);padding:12px 28px;
  font-size:13px;font-weight:700;text-decoration:none;
  border:1.5px solid var(--border);border-radius:3px;
  transition:border-color .2s,color .2s,background .2s;display:inline-flex;
  align-items:center;gap:8px;letter-spacing:0.04em;
}
.btn-ghost::after{content:'→';transition:transform .2s}
.btn-ghost:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-ghost:hover::after{transform:translateX(4px)}


/* FADE */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
.fd1{transition-delay:.1s}.fd2{transition-delay:.2s}.fd3{transition-delay:.3s}