body {
  margin: 0;
  font-family: sans-serif;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

/* ナビゲーション */
nav {
  display: flex;
  flex-wrap: wrap;       /* 小さい画面で折り返す */
  background-color: #555;
}

nav a {
  flex: 1;               /* 均等5カラム */
  text-align: center;
  padding: 1rem;
  text-decoration: none;
  color: #fff;
  border-right: 1px solid #666;
}

nav a:last-child {
  border-right: none;    /* 最後の右枠線を消す */
}

main {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2カラム */
  gap: 1rem;
}

article {
  background-color: #f4f4f4;
  padding: 1rem;
  border-radius: 8px;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 1rem;
}

/* レスポンシブ */
@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr;   /* スマホは1カラム */
  }

  nav a {
    flex: 100%;                  /* ナビも縦並び */
    border-right: none;
    border-bottom: 1px solid #666;
  }

  nav a:last-child {
    border-bottom: none;
  }
}

.r {color: #ee0000; font-weight: bold; }