/* Fans Navi Affiliate — 共通スタイル */

.fn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.fn-card {
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 12px;
  transition: box-shadow 0.2s ease;
  background: #fff;
}
.fn-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.fn-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.fn-card h3 { font-size: 15px; margin: 8px 10px 4px; }
.fn-card-meta { font-size: 12px; color: #888; margin: 0 10px 8px; }

.fn-fav-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 10px 8px; padding: 6px 12px;
  border: 1px solid #ddd; border-radius: 999px; background: #fff;
  color: #666; font-size: 12px; cursor: pointer; transition: all .2s ease;
}
.fn-fav-btn:hover, .fn-fav-btn.is-active { border-color:#ff6b8a; color:#ff6b8a; }
.fn-fav-btn.is-active { background:#fff0f3; }
.fn-fav-icon { font-size: 15px; line-height:1; }

.fn-cta-btn-small {
  display: inline-block; margin: 0 10px; padding: 8px 20px;
  background:#ff6b8a; color:#fff !important; border-radius:6px;
  text-decoration:none; font-size:13px; font-weight:600;
}
.fn-cta-btn-small:hover { background:#e85575; }

.fn-home-section { margin: 32px 0; }
.fn-home-section h2 { font-size: 20px; border-left: 4px solid #ff6b8a; padding-left: 10px; margin-bottom: 16px; }

.fn-search-form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.fn-search-form input, .fn-search-form select {
  padding: 8px 12px; border:1px solid #ddd; border-radius:6px; font-size:14px;
}
.fn-search-form button {
  padding: 8px 20px; background:#ff6b8a; color:#fff; border:none; border-radius:6px; cursor:pointer;
}
.fn-search-form button:hover { background:#e85575; }