/* 基本的なリセットとボディの設定 */
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
  font-size: 16px; /* 基本のフォントサイズを明確に設定 */
}
/* コンテナの設定 */
.container {
  width: 100%; /* 親要素の幅いっぱいに広がる */
  max-width: 1000px; /* 最大幅を1000pxに制限 */
  margin: 0 auto; /* 中央揃え */
  padding: 0 20px 20px;
  box-sizing: border-box; /* paddingとborderをwidthに含める */
}
/* ヘッダーのスタイル */
header {
  display: flex; /* Flexboxを有効にする */
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: space-between; /* 要素間に均等なスペースを空ける */
  padding: 10px 0; /* 上下のパディングを調整 */
  margin-bottom: 5px; /* ヘッダー全体の底部のマージンを詰める */
  flex-wrap: wrap; /* 小さい画面で折り返すようにする */
}
.header-text {
  order: 2; /* タグの記述順に関わらず、Flexアイテムの表示順序を制御 (値を大きく) */
  flex: 1; /* 利用可能なスペースを占める */
  min-width: 200px; /* 小さい画面での最小幅 */
  text-align: left; /* テキストを左揃えにする */
}
.header-image-wrapper {
  order: 1; /* タグの記述順に関わらず、Flexアイテムの表示順序を制御 (値を小さく) */
  flex-shrink: 0; /* 必要に応じて縮小しない */
  margin-right: 20px; /* テキストと画像の間にスペース (右側に変更) */
  text-align: left; /* 画像を左揃えにする */
}
header h1 {
  margin: 0; /* 上部のマージンを元の0に戻す */
  font-size: 1.1em;
  color: #444;
}
header h2 {
  margin: 0; /* マージンを完全に除去 */
  font-size: 1em;
  color: #555;
}
/* ヘッダー画像のスタイル */
header img {
  max-width: 100%; /* 親要素の幅に合わせて画像を縮小 */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 中央寄せのためにブロック要素にする */
  /* margin: 5px auto 0 auto; /* Flexboxを使用するため不要 */
}
/* メインコンテンツとサイドバーのレイアウト */
.content {
  display: flex; /* フレックスボックスで子要素を配置 */
  flex-wrap: wrap; /* 必要に応じて折り返す */
  gap: 20px; /* 各要素間の隙間 */
  margin-bottom: 20px;
}
.main-content {
  flex: 2; /* 他の要素より2倍の比率で幅を占める */
  min-width: 300px; /* 最小幅 */
  padding: 15px;
  border: 1px solid #eee;
  box-sizing: border-box;
  text-align: left; /* main-content内のテキストを左揃えにする */
}
.sidebar {
  flex: 1; /* 残りのスペースを埋める */
  min-width: 200px; /* 最小幅 */
  padding: 15px; /* サイドバー全体のパディング */
  border: 1px solid #eee;
  box-sizing: border-box;
}
/* サイドバーの「メニュー」見出し */
.sidebar-title {
  margin-top: 0; /* 上部の余白を詰める */
  margin-bottom: 10px; /* 下部の余白 */
  padding-bottom: 5px; /* 下線との隙間 */
  border-bottom: 1px solid #ccc; /* 下線 */
  font-size: 1.05em; /* 少し大きめのフォント (調整) */
  color: #333;
  text-align: left; /* サイドバー見出しも左揃え */
}
/* メインコンテンツの見出し調整 */
.main-content h3 {
  font-size: 1.05em; /* h3のサイズをサイドバーと統一 */
}
.main-content h4 {
  font-size: 1em; /* h4を通常のフォントサイズに */
  font-weight: normal; /* 太さを通常に */
  color: #333; /* 色を元に戻す */
  margin: 0 0 10px 0; /* 下に少し余白 */
}
/* サイドバーのリスト */
.sidebar ul {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  padding: 0; /* デフォルトのパディングを削除 */
  margin: 0; /* デフォルトのマージンを削除 */
}
.sidebar ul li {
  border-bottom: 1px solid #eee; /* 各アイテムの下線 */
  padding: 0; /* li自体のパディングは0 */
  font-size: 0.95em; /* 少し小さめの文字 */
  text-align: left; /* サイドバーリストアイテムも左揃え */
}
.sidebar ul li a {
  display: block; /* リンク全体をクリック可能にする */
  padding: 8px 0; /* 上下のパディングで間隔を作る */
  text-decoration: none; /* 下線を削除 */
  color: #333; /* リンクの色 */
}
.sidebar ul li a:hover {
  background-color: #f9f9f9; /* ホバー時の背景色 */
  color: #007bff; /* ホバー時の文字色 */
}
/* メインコンテンツ内の画像のスタイル (既存の画像) */
.main-content img {
  max-width: 100%; /* 親要素の幅に合わせて画像を縮小 */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 中央寄せのためにブロック要素にする */
  margin: 0 auto 15px auto; /* 上下左右の余白を設定し、左右をautoで中央寄せ */
}
/* ダウンロードボタンのコンテナスタイル */
.button-container {
  text-align: center; /* このコンテナ内のインライン要素（ボタン）を中央揃え */
  margin-bottom: 20px; /* ボタンと次の要素との余白 */
}
/* ダウンロードボタンのスタイル */
.download-button {
  display: inline-block; /* ボタンをインラインブロック要素にする */
  padding: 10px 20px;
  background-color: #28a745; /* 緑色の背景 */
  color: white;
  text-decoration: none; /* 下線をなくす */
  border-radius: 5px; /* 角を丸くする */
  font-size: 1em;
  cursor: pointer; /* カーソルをポインターにする */
  transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}
.download-button:hover {
  background-color: #218838; /* ホバー時の色 */
}
/* main-content内の新しい画像（image2.png）のスタイル */
.main-content .bottom-image {
  margin-top: 20px; /* 上のコンテンツとの余白 */
  margin-bottom: 20px; /* サムネイルグリッドとの余白 */
  display: block; /* 中央寄せを維持するため */
  margin-left: auto;
  margin-right: auto;
}
/* サムネイルグリッドのスタイル */
.thumbnail-grid {
  display: flex; /* Flexboxコンテナにする */
  flex-wrap: wrap; /* 子要素がコンテナをはみ出す場合に折り返す */
  justify-content: center; /* 横方向（主軸）で中央揃え */
  gap: 10px; /* アイテム間の隙間（新しいCSSプロパティで簡潔に） */
  margin-top: 20px; /* 上の画像との余白 */
  margin-bottom: 20px; /* メインコンテンツの底部の余白 */
}
/* サムネイル画像のスタイル */
.thumbnail-grid .thumbnail {
  border-radius: 6px; /* 角を丸くする */
  border: 1px solid #ddd; /* 薄いグレー（#ddd）の1px solid枠 */
}
/* タグリンクのスタイル */
.tag-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.tag-links a {
  text-decoration: none;
  color: #007bff;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.9em;
  transition: background-color 0.3s ease;
}
.tag-links a:hover {
  background-color: #e0e0e0;
}
.sidebar .tag-links {
  margin-top: 50px;
}
/* thumbnail-image-blockのスタイル */
.thumbnail-image-block {
  text-align: center; /* 画像とリンクを中央揃えにする */
  margin-top: 20px;
  margin-bottom: 20px;
}
.thumbnail-image-block img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.image-link-text {
  margin-top: 10px; /* 画像との間に少しスペース */
  text-align: center;
}
.image-link-text a {
  color: #007bff; /* フッターのリンクと同じ色 */
  text-decoration: none;
  font-size: 1.1em; /* 少し大きめに */
}
.image-link-text a:hover {
  text-decoration: underline;
}
/* ドットラインのスタイル */
.dotted-line {
  border: none;
  border-top: 1px dotted #ccc; /* 薄いグレーの点線 */
  height: 1px;
  margin: 10px 0; /* 上下の余白 */
}
/* 検索バー */
.search-bar-block {
  border: none;
  margin: 10px 0px; /* 上下の余白 */
}
/* フッターのスタイル */
footer {
  padding: 10px 0 10px 0; /* 上の余白を調整 */
  border-top: 1px solid #ccc;
  text-align: center; /* フッターは中央寄せを維持 */
  font-size: 0.9em;
  color: #666;
  margin-top: 20px; /* コンテンツとの間に余白 */
}
/* ナビゲーションのスタイル (フッター内での配置に合わせて調整) */
footer nav ul { /* footer内のnav ulに適用 */
  list-style: none;
  padding: 5px 0 0 0; /* 上にパディング */
  margin: 5px 0 0 0; /* 上にマージン、下は0 */
  text-align: center; /* フッター内のナビゲーションは中央寄せを維持 */
  font-size: 1em; /* フォントサイズを通常に戻す */
}
footer nav ul li {
  display: inline-block; /* PC表示では横並び */
  margin: 0 10px;
}
footer nav ul li a {
  display: block;
  padding: 5px 0; /* 上下のパディングを少し小さく */
  text-decoration: none;
  color: #007bff;
}
footer nav ul li a:hover {
  color: #0056b3;
}
/* スマートフォン向けのメディアクエリ */
@media (max-width: 768px) {
  /* ヘッダーのレイアウト調整 */
  header {
    flex-direction: column; /* 縦積みに変更 */
    text-align: center; /* 中央揃えにする */
  }
  .header-text, .header-image-wrapper {
    order: unset; /* orderをリセット */
    flex: none; /* Flexアイテムの成長・収縮をリセット */
    width: 100%; /* 幅を100%にする */
    margin-left: 0; /* マージンをリセット */
    margin-top: 10px; /* 各要素間のスペース */
    text-align: center; /* 中央揃えにする */
  }
  .header-text {
    margin-top: 0; /* テキストの上マージンは不要 */
  }
  footer nav ul li { /* フッター内のナビを縦並びにする */
    display: block; /* 縦並びにする */
    margin: 0;
  }
  footer nav ul li a {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  footer nav ul li:last-child a {
    border-bottom: none;
  }
  .content {
    flex-direction: column; /* 縦積みにする */
  }
  .main-content, .sidebar {
    flex: none; /* フレックスアイテムの成長・収縮をリセット */
    width: 100%; /* 幅を100%にする */
    min-width: unset; /* 最小幅を解除 */
  }
  .image-download {
    padding: 0px;
  }
}