/* ボタン群を中央に配置するための親要素 */
.button-container {
  margin: 40px 200px; /* 親要素自体を画面の左右中央に配置 */
  
  /* ボタンを並べるためのFlexbox設定 */
  display: flex;
  flex-wrap: wrap; /* ボタンが溢れたら自動で折り返す */
  justify-content: center; /* ボタン群を左右中央に寄せる */
}

@media (max-width: 767px) {
  .button-container {
    width: 100%; /* スマホでは幅を100%に */
    padding: 0 10px; /* 左右に少し余白を追加 */
    margin: 20px 0; /* 上下の余白を少し減らす */
  }
}

/* --- ボタンの大枠 --- */
.card-button {

  position: relative; /* 子要素の基準位置にする */
  display: flex;
  align-items: center;      /* テキストを上下中央に */
  justify-content: center;  /* テキストを左右中央に */
  width: 400px;  /* ボタンの幅 */
  height: 160px; /* ボタンの高さ */
  overflow: hidden; /* はみ出た画像を隠す（枠のサイズを固定する重要ポイント） */
  text-decoration: none;
  margin: 10px; /* ボタン間の余白 */
}

/* --- 背景画像 --- */
.card-button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の縦横比を崩さずに枠いっぱいに広げる */
  z-index: 1; /* テキストより奥に配置 */
  transition: transform 0.4s ease; /* 0.4秒かけて滑らかに拡大させる */
  filter: brightness(0.6); /* 画像の明るさを下げる */
}

/* --- テキスト --- */
.card-button__text {
  position: relative;
  border: 2px solid #fff; /* 白い枠線 */
  padding: 8px 16px; /* 上下8px、左右16pxの余白 */
  z-index: 2; /* 画像より手前に配置 */
  color: #fff; /* 通常時の文字色（白） */
  font-size: 36px;
  font-weight: bold;
  transition: color 0.4s ease; /* 0.4秒かけて滑らかに色を変える */
  
  /* 補足: 画像によっては白文字が見えにくくなるため、文字に薄く影をつけると見やすくなります */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* ================================
   ホバー（マウスカーソルが乗った時）の動き
   ================================ */

/* 1. 画像を1.1倍に拡大する */
.card-button:hover img {
  transform: scale(1.1);
}

/* 2. テキストの色を変更する */
.card-button:hover .card-button__text {
  color: #032445; /* ホバー時の文字色（例として水色) */ 
  background-color: #fff; /* ホバー時の背景色を半透明の黒にする */
}