@charset "utf-8";

/* ① 親要素：2列×5行のグリッドを作る */
.grid-container {
  display: grid;
  /* 「同じ幅で2列に分ける」という設定 */
  grid-template-columns: repeat(2, 1fr); 
  /* ボックス同士の間隔（縦横共通で20pxあける） */
  gap: 10px; 
  
  max-width: 80%; /* 全体の最大幅（お好みで） */
  margin: 0 auto;   /* 中央寄せ */
}

/* ② 子要素：各ボックスのスタイル（前回とほぼ同じ） */
.moving-box {
  /* gridの子要素になると自動的にブロックのように扱われるので display: block; は不要になります */
  padding: 5px 10px;
  border: 1px solid;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: rgb(0,0,0);
  /* なめらかに動かすための設定 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.moving-box a{
color: rgb(255,255,255);

}

/* ③ ホバー時の動き（ちょっとだけ動かす） */
.moving-box:hover {
  /* 「ちょっとだけ」動かすなら 5px 〜 8px あたりが上品でおすすめです */
  transform: translateX(8px); 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background-color: #2980b9;
  color: rgb(255,255,255);
}