/* 基本設定 */
* {
  box-sizing: border-box; /* 境界線を含めてサイズ計算 */
}

body {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

header a {
  text-decoration: none;
  color: inherit;
}

/* メインレイアウト */
.container {
  display: flex;
  gap: 20px; /* 要素間の隙間 */
}

.sidebar {
  flex: 1; /* 比率で指定 */
}

nav h3 {
  border-bottom: 1px solid #000;
}

.content {
  flex: 4; /* サイドバー1に対しコンテンツ4の割合 */
  border: 1px solid #000;
  padding: 20px;
}

/* リンク集（グリッド表示） */
.link-grid {
  display: flex;
  flex-wrap: wrap; /* 折り返し許可 */
  gap: 10px;
}

.link-item {
  flex: 1;
  min-width: 120px; /* 最小幅 */
  text-align: center;
  border: 1px solid #000;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.link-item img {
  max-width: 50px; /* 画像が大きくなりすぎないように */
  height: auto;
  display: block;
  margin: 0 auto 5px;
}

footer {
  margin-top: 50px;
  text-align: center;
}

/* レスポンシブ対応（画面幅が768px以下の場合） */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 縦並びに変更 */
  }

  .sidebar, .content {
    width: 100%;
  }

  .link-grid {
    justify-content: center;
  }
}