/* 共通ボタンスタイル */
.button {
  display: inline-block;
  padding: 0.6em 1.4em;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background-color: #f48c3f;   /* テンプレートオレンジ */
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

/* ホバー時のスタイル */
.button:hover {
  background-color: #e67a2d;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* アクティブ時のスタイル */
.button:active {
  background-color: #d0661c;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* フォーカス時（キーボード操作対応）のスタイル */
.button:focus {
  outline: 2px solid #ffa655;
  outline-offset: 2px;
}

/* 無効状態（disabled）のスタイル */
.button[disabled],
.button.disabled {
  background-color: #ccc;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

/* 二次ボタン（スクリーンセカンダリ的用途） */
.button-secondary {
  background-color: #fff;
  color: #f48c3f;
  border: 2px solid #f48c3f;
}

.button-secondary:hover {
  background-color: #f48c3f;
  color: #fff;
}

/* アイコン入りボタンの微調整 */
.button .icon {
  vertical-align: middle;
  margin-right: 0.4em;
}