@charset "utf-8";
/* CSS Document */

/*ここからサンプル画像用CSS*/
.imagesample{
	width: 330px;
	height: 145px;
	object-fit: cover;
}
/*ここまでサンプル画像用CSS*/

/* 全体リセット */
body {
  font-family: sans-serif;
  padding: 40px;
  background: #f9f9f9;
}

/* 共通デザイン */
.btn {
  display: inline-block;
  padding: 18px 40px;   /* ← 高さと横幅を大きく */
  margin: 16px;
  font-size: 20px;      /* ← 文字も大きめ */
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 10px;  /* ← 丸みを強調 */
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 1. button → 背景色が変化 */
.btn1 {
  background: #e74c3c;
}
.btn1:hover {
  background: #c0392b;
}

/* 2. リンク → 拡大＋影 */
.btn2 {
  background: #3498db;
}
.btn2:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/* 3. このをクリック → クリック時に色が変わる */
.btn3 {
  background: #2ecc71;   /* 通常時：緑 */
  transition: background 0.3s ease;
}
.btn3:active {
  background: #2c3e50;   /* クリック時：ネイビー */
}