/* ヘッダー */
header {
  background-color: #1abc9c;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

header h1 {
  font-size: 2rem;
  flex-basis: 100%;
  text-align: center;
  color: #000;
}

nav {
  flex-basis: 100%;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

nav li {
  margin: 0.5rem;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
}




form {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 2rem auto;
}

input[type="text"] {
  border: 1px solid #CCCCCC;
  font-size: 1.5rem;
  height: 2.5rem;
  margin-right: 1rem;
  padding: 0.25rem 0.5rem;
  text-align: center;
  width: 5rem;
}

button[type="submit"] {
  background-color: #CCCCCC;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 1.5rem;
  height: 2.5rem;
  padding: 0 1rem;
}

p {
  font-size: 1.5rem;
  margin: 0 auto;
  text-align: center;
}

/* メインコンテンツ */
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem;
}

section {
margin-bottom: 3rem;
text-align: center;
}


section h1 {
font-size: 2rem;
margin-bottom: 3rem;
text-align: center;
}

section h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

section a {
display: block;
padding: 1rem;
background-color: #1abc9c;
color: #fff;
text-decoration: none;
font-size: 1.2rem;
border-radius: 5px;
width: 500px;
margin: 0 auto;
}

/* ボタンのコンテナにフレックスを適用 */
.button-container {
  display: flex; /* 横に並べる */
  justify-content: space-around; /* ボタンを均等に配置 */
  gap: 0.1rem; /* ボタン間のスペースを1remに設定 */
  padding: 1rem 0; /* 上下にパディングを追加 */
  text-align: center; /* 文字を中央に */
}

/* ボタンのスタイル */
a.button-style {
  display: inline-block; /* ボタンをインラインブロックで表示 */
  padding: 0.8rem 1.5rem; /* 上下の余白を0.8rem、左右を1.5rem */
  background-color: #1abc9c; /* 背景色を青に変更 */
  color: #fff; /* 文字色は白 */
  text-decoration: none; /* リンクの下線を削除 */
  font-size: 1rem; /* フォントサイズを1remに変更 */
  border-radius: 30px; /* 角を丸く (30px) */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
  transition: background-color 0.3s ease, transform 0.3s ease; /* ホバー時のアニメーション */
  width: 150px; /* 横幅を固定で200pxに設定 */
}

/* ホバー時のスタイル */
a.button-style:hover {
  background-color: #2980b9; /* 背景色が少し濃くなる */
  transform: translateY(-2px); /* 上に少し浮き上がる */
}

/* フッター */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}