/* --- 基本的なスタイルリセットと設定 --- */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #ffffff; /* 背景は白 */
  color: #333;
}
/* --- 見出しのスタイル --- */
h1, h2, h3, h4 {
  margin-top: 0;
  margin-bottom: 2px;
}
h1 {
  font-size: 22px;
} /* ← 変更 */
h2 {
  font-size: 20px;
} /* ← 変更 */
h3 {
  font-size: 18px;
  margin-top: 20px;
} /* ← 変更 */
h4 {
  font-size: 18px; /* ← 変更 */
  font-weight: normal; /* ← 追加 */
}
/* --- 画像のスタイル --- */
.main-content img, .sidebar img {
  max-width: 100%;
  height: auto; /* アスペクト比を維持 */
  display: block; /* 余白を正しく適用するため */
}
/* download-image-wrapperの枠線 */
.main-content .download-image-wrapper {
  border: 1px dotted #ccc; /* 薄いグレーのドット線 */
  padding: 10px; /* 枠線と画像の間隔 */
  margin-bottom: 10px; /* 下に余白 */
  display: inline-block; /* 枠線が画像幅に合わせる */
}
/* --- 全体を囲むコンテナ --- */
.container {
  max-width: 1000px; /* PCでの最大幅 */
  margin: 20px auto; /* 上下に余白をつけ、左右中央に配置 */
  padding: 0 15px; /* スマホ表示で左右の余白を確保 */
}
/* --- 各エリアの共通スタイル --- */
header {
  padding: 10px;
  background-color: #f0f0f0; /* 薄いグレーの背景色 */
}
footer {
  padding: 20px;
  text-align: center; /* フッターのテキストを中央揃え */
}
.footer-links {
  margin-top: 15px; /* 上のテキストとの間隔を調整 */
}
.footer-links a {
  margin: 0 10px; /* リンク同士の左右の間隔を調整 */
  color: #007bff; /* 文字色 */
  text-decoration: none; /* 下線を消す */
}
.footer-links a:hover {
  text-decoration: underline; /* マウスを乗せたら下線を表示 */
}
.main-content, .sidebar {
  padding: 20px;
  border: 1px solid #e0e0e0; /* 薄いグレーの線 */
}
header, footer {
  margin-bottom: 20px;
}
/* --- コンテンツエリアのレイアウト（PC表示） --- */
.contents-wrapper {
  display: flex; /* Flexboxを使用して2カラムレイアウトを作成 */
  gap: 20px; /* カラム間の隙間 */
  margin-bottom: 20px;
}
.main-content {
  flex: 3; /* メインコンテンツの幅をサイドバーの3倍に */
}
.sidebar {
  flex: 1; /* サイドバーの幅 */
}
/* --- メニューリストのスタイル --- */
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none; /* リストの黒点を削除 */
  border-bottom: 1px solid #e0e0e0;
}
.sidebar ul li {
  /* padding: 8px 12px; */ /* ← 以前の設定を削除 */
  padding: 0; /* ← 新しく 0 に設定 */
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s;
}
.sidebar ul li:last-child {
  border-bottom: none; /* 最後のアイテムの下線は削除 (変更なし) */
}
/* ↓↓↓ ここからがホバー対応で追加した部分です ↓↓↓ */
.sidebar ul li:hover {
  background-color: #f0f8ff; /* ホバー時の背景色 */
}
.sidebar ul li a {
  text-decoration: none;
  color: #007bff;
  display: block;
  padding: 8px 12px; /* ← この行を追加しました */
}
.sidebar ul li a:hover {
  text-decoration: underline;
}
/* --- タグリンクのスタイル --- */
.tag-links {
  margin-top: 20px;
}
.tag-link {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border-radius: 3px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}
.tag-link:hover {
  background-color: #e0e0e0;
}
/* --- ボタンのスタイル --- */
.button-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* ボタンを中央揃え */
    gap: 15px; /* ボタン間の隙間 */
    margin-top: 2px; /* 画像との間に余白を縮小 */
    margin-bottom: 25px;
}
.download-button {
  display: inline-block;
  padding: 12px 30px; /* 120%拡大 */
  font-size: 17px; /* 120%拡大 */
  color: #fff;
  background-color: #28a745; /* 緑色 */
  border: none;
  border-radius: 9999px; /* 左右を完全に丸くする */
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3S;
}
.download-button:hover {
  background-color: #218838; /* 少し濃い緑 */
}
.back-list-button {
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 5px;
  font-size: 16px;
  color: #007bff; /* 青色に変更 */
  background-color: #f0f0f0; /* 薄いグレイ */
  border: none; /* 枠線を削除 */
  border-radius: 5px; /* 四角 */
  text-decoration: none;
  transition: background-color 0.3s;
}
.back-list-button:hover {
  background-color: #e0e0e0;
}
/* --- サムネイルのスタイル --- */
.thumbnail-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}
.thumbnail-link {
  display: block;
  border: 1px solid #e0e0e0; /* 薄いグレーの線 */
  border-radius: 8px; /* 角丸にする */
  line-height: 0; /* 画像下の余白を削除 */
  transition: border-color 0.3s;
  overflow: hidden; /* 画像を枠内に収める */
}
.thumbnail-link:hover {
  border-color: #007bff;
}
/* --- メイン画像セクションのスタイル --- */
.main-image-section {
  border: 1px dotted #ccc; /* 薄いグレーのドット線 */
  padding: 10px;
  margin-top: 20px;
  text-align: center;
}
.main-image-section img {
  margin: 0 auto 15px auto; /* 画像を中央揃えにし、下に余白を追加 */
}
.main-image-section a {
  color: #007bff;
  text-decoration: none;
}
.main-image-section a:hover {
  text-decoration: underline;
}
/* --- レスポンシブ対応（幅が768px以下の場合） --- */
@media (max-width: 768px) {
  .contents-wrapper {
    flex-direction: column; /* カラムを縦積みに変更 */
  }
}