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

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

/* ボタンを並べる */
.animation-container {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

/* 3つのボタンのスタイル */
.btn {
	display: inline-block;
	width: 180px;
	padding: 15px 0;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	box-sizing: border-box;
	transition: all 0.3s ease; 
}

/* 背景と文字色が反転するパターン */
.btn-bg-change {
	background-color: #fff;
	color: #e74c3c;
	border: 2px solid #e74c3c;
}

.btn-bg-change:hover {
	background-color: #e74c3c;
	color: #fff;
}

/* 文字間隔が広がるパターン */
.btn-scale {
	background-color: #2ecc71;
	color: #fff;
}

.btn-scale:hover {
	transform: scale(1.05);
	letter-spacing: 3px;
}

/* ふわっと上に浮き上がるパターン */
.btn-float {
	background-color: #3498db;
	color: #fff;
	box-shadow: 0 4px 0 #2980b9; 
}

.btn-float:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}