/* ==========================================================
 🔘 button.css
 対応HTML：button.html（ボタンデザインページ）
 デザイン内容：ボタンデザイン5種
 ----------------------------------------------------------
 ① 角丸ボタン
 ② フラットボタン
 ③ 枠線ボタン
 ④ シャドウボタン
 ⑤ グラデーションボタン
========================================================== */

/* ===== 共通設定 ===== */
.btn {
  display: inline-block;
  color: #fff;
  padding: 10px 25px;
  text-decoration: none;
  border-radius: 30px;
  margin: 5px 10px 10px 0;
  transition: 0.3s;
  font-weight: bold;
}

/* ===== ① 角丸ボタン ===== */
.btn-round {
  background: #43A047;
}
.btn-round:hover {
  background: #2E7D32;
}

/* ===== ② フラットボタン ===== */
.btn-flat {
  background: #66BB6A;
  border-radius: 4px;
}
.btn-flat:hover {
  background: #43A047;
}

/* ===== ③ 枠線ボタン ===== */
.btn-outline {
  border: 2px solid #2E7D32;
  color: #2E7D32;
  background: none;
}
.btn-outline:hover {
  background: #2E7D32;
  color: #fff;
}

/* ===== ④ シャドウボタン ===== */
.btn-shadow {
  background: #388E3C;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
.btn-shadow:hover {
  background: #2E7D32;
}

/* ===== ⑤ グラデーションボタン ===== */
.btn-gradient {
  background: linear-gradient(90deg,#66BB6A,#2E7D32);
}
.btn-gradient:hover {
  filter: brightness(1.1);
}