body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f9f9f9;
}

header {
  background-color: #ffcc00;
  padding: 10px 20px;
}

.logo {
  max-width: 150px;
}

.nav-menu {
  list-style: none;
  padding: 0;
  display: flex;
}

.nav-menu li {
  margin-right: 15px;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.hero {
  background-image: url('../img/main-bg.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 100px 20px;
}

.hero-content h1 {
  font-size: 2.5em;
}

.btn {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}
footer {
  background-color: #f9f9f9; /* 背景色を淡いグレーに設定 */
  text-align: center; /* 中央揃え */
  padding: 10px 0; /* 上下の余白 */
  font-size: 0.8em; /* フォントサイズを小さく（0.8em = 80%） */
  color: #666; /* テキストカラーを薄いグレーに変更 */
  border-top: 1px solid #ddd; /* 上部に境界線を追加（オプション） */
}

footer p {
  margin: 0; /* フッター内の段落の余白をゼロに */
}