/* ============================
   Button Base
============================ */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 22px;
  border-radius: 180px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  user-select: none;
  border: none;
}

/* ============================
   Primary Button（最重要）
   → 塗りつぶし
============================ */
.button--primary {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.button--primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

/* ============================
   Secondary Button（補助）
   → アウトライン
============================ */
.button--secondary {
  background: rgba(255,255,255,0.6);
  border: 2px solid rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
}


.button--secondary:hover {
  background: rgba(255,255,255,0.85);
}

/* ============================
   Tertiary Button（必要なら）
   → テキストのみ
============================ */
.button--text {
  background: transparent;
  color: var(--primary-color);
}

.button--text:hover {
  opacity: 0.7;
}

/* ============================
   Button Group（複数ボタン並べる時）
============================ */
.button-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

/* ボタングループ内の a 要素を統一管理 */
.button-group a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ボタングループを縦並びにしたい場合（任意） */
.button-group--vertical {
  flex-direction: column;
  align-items: stretch;
}
/* ============================
   Link Group（複数リンクカード）
============================ */
.link-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin-top: 12px;
}