/* 全体の基本スタイル */
body {
  font-family: Arial, sans-serif; /* 読みやすいフォント */
  line-height: 1.6; /* 全体の行間を調整 */
  margin: 0;
  padding: 0;
  background-color: #f8f9fa; /* 背景に薄いグレーで落ち着いた印象 */
  color: #333; /* 本文テキストは濃いグレー */
}

h1, h2, h3 {
  font-weight: bold; /* 見出しを強調 */
  line-height: 1.4; /* 見出しの行間を調整 */
  color: #d9534f; /* 暖かみのある赤系色で統一 */
  margin-top: 10px;
  margin-bottom: 20px;
}

h2 {
  text-align: center; /* センター揃えで視覚的に目立たせる */
  font-size: 2.2rem; /* タイトルが目立つサイズ感 */
}

h3 {
  font-size: 1.5rem; /* サブタイトルは適度に目立たせる */
  text-align: left; /* 左揃え */
}

/* 導入 */
.lead dt {
  font-weight: bold; /* 見出しを強調 */
  line-height: 1.4; /* 見出しの行間を調整 */
  color: #d9534f; /* 暖かみのある赤系色で統一 */
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.5rem; 
}

.lead p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

/* セクション全体の共通スタイル */
section {
  margin: 30px 5px auto;
  padding: 20px;
  width: 90%;
  max-width: 800px;
  background-color: #ffffff; /* 背景は白で清潔な印象 */
  border: 1px solid #ddd; /* 枠線を薄く設定 */
  border-radius: 8px; /* 角を丸める */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 軽いシャドウで立体感を追加 */
}

/* 目次部分 */
nav.table-of-contents {
    padding: 1em 1.5em;
    margin: 2em 20em 2em 0;
    border: dashed 2px #773d50;/*線*/
    color:#000000;/*文字色*/
}

nav.table-of-contents ul li {
  padding: 8px 0;
  font-size: 1.2rem; /* 目次を少し目立たせる */
}

/* 目次サブリストのスタイル */
.sub-list {
  list-style: none;
  padding-left: 20px; /* 階層のためにインデント */
  margin: 10px 0;
}

.sub-list li {
  font-size: 1rem; /* サイズ調整 */
}

/* プレゼント選びのセクション */
.selection-tips ul.gift-tips {
  list-style-type: disc; /* 通常のディスク型マーカー */
  padding-left: 40px; /* 左側余白を設定 */
}

.selection-tips ul.gift-tips li {
  margin-bottom: 10px; /* リスト項目ごとの余白 */
  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
}

.selection-tips ul.gift-tips li strong {
  color: #000; /* 太字のカラーを濃く設定 */
  font-weight: bold;
}

.selection-tips p {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
}

/* 予算に関するセクション */
.budget-tips {
  background-color: #fcf6f6; /* 薄ピンク系の背景で温かさを演出 */
}

.budget-tips p {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
}

/* ギフトランキングセクション */
.gift-ranking {
  background-color: #fffaf0; /* クリーム系の背景色で柔らかい印象 */
}

.gift-ranking h3 {
  color: #333; /* 濃い灰色 */
}






.gift-ranking p {
  font-size: 1.2rem
}



.gift-ranking .container {
  display: grid; /* グリッドレイアウトを使用 */
  grid-template-columns: repeat(4, 1fr); /* 4列で設定 */
  gap: 15px; /* 各画像間の間隔 */
  justify-items: center; /* 各アイテムを中央揃え */
}

.gift-ranking .container img {
  width: 100%; /* 幅いっぱいに配置 */
  height: auto; /* 縦横比を維持 */
  border-radius: 8px; /* 角に丸みを持たせる */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* 軽い影を追加 */
  transition: transform 0.3s ease-in-out; /* ホバー時の動きをスムーズに設定 */
}

.gift-ranking .more img {
  width: 100%; /* 幅いっぱいに配置 */
  height: auto; /* 縦横比を維持 */
  border-radius: 8px; /* 角に丸みを持たせる */
  transition: transform 0.3s ease-in-out; /* ホバー時の動きをスムーズに設定 */
  padding: 3px;
}

/* ホバー時の効果を維持 */
.gift-ranking .container img:hover {
  transform: scale(1.05); /* ホバーで画像を少し拡大 */
}


/* おまけセクション */
.omake {
  margin-top: 20px;
  padding: 15px;
  background-color: #fcf8e8; /* 温かみのあるクリーム色 */
  border-radius: 8px;
}

.omake p {
  font-size: 1rem;
  color: #444;
}

.omake h2 {
  font-size: 1.8rem;
  color: #d9534f; /* 明るい赤色で親しみやすく */
}

.omake .container img {
  width: 200px; /* 少し大きめの画像サイズ */
  margin: 10px auto;
  border-radius: 6px;
}

.omake a {
  color: #007bff;
  text-decoration: underline;
}