/* セクション1の画像調整 */
.section1-image {
  width: 100%; /* 画像の幅を画面幅に合わせる */
  height: auto; /* 高さを自動調整 */
  object-fit: cover; /* 必要に応じて切り抜き（表示の崩れを防ぐ） */
}

/* スマホ用 .top-h1 の修正 */
.top-h1 {
  position: absolute; /* 必須 */
  top: 5px; /* 画像の上端からの位置 */
  left: 10px; /* 画像の左端からの位置 */
  color: rgba(255, 255, 255, 0.7); /* 半透明の白文字 */
  font-size: 12px; /* フォントサイズを小さく */
  font-weight: bold; /* 太字 */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* 見やすい影 */
  z-index: 10; /* 画像より前に表示されるように */
  margin:0;
}

/* 親要素のスタイル確認 */
.top-image-container {
  position: relative; /* 子要素の絶対配置をサポート */
  overflow: visible; /* 子要素が隠れないように */
}

/* スマホ用 .overlay の調整 */
.overlay {
  position: absolute;
  bottom: 0; /* 画像の下端ぴったり */
  right: 0; /* 画像の右端ぴったり */
  background-color: #00777b; /* 緑色の背景 */
  color: white; /* 文字色を白に */
  padding: 0px 25px; /* 内側の余白を調整 */
  font-size: 12px; /* フォントサイズ */
  z-index: 10; /* 前面に表示 */
  text-align: center; /* 中央揃え */
  line-height: 1.4; /* 行間調整 */
  width: auto; /* 必要なら幅を自動に */
  
}

/* スマホ用 .overlay 内の h2 の余計なマージンをリセット */
.overlay h2 {
  margin: 5px 0; /* マージンを完全に削除 */
  padding: 0; /* 必要ならパディングも削除 */
  font-size: inherit; /* 親要素のフォントサイズを継承 */
  line-height: inherit; /* 親要素の行間を継承 */
}


/* 親要素の確認 */
.top-image-container {
  position: relative; /* 必須 */
  overflow: hidden; /* 子要素が画像外に出ないようにする */
}

/* セクション1（TOP画像）とセクション2の間をくっつける */
.section1 {
  margin-bottom: 0; /* 下余白を削除 */
}

.section2 {
  margin-top: 0; /* 上余白を削除 */
}


/* セクション3のヘッダー */
.category-header {
  text-align: center; /* 中央揃え */
  margin-bottom: 10px; /* 下部の余白を調整 */
}

.category-header h2 {
  font-size: 18px; /* フォントサイズを調整 */
  font-weight: bold; /* 太字 */
  color: #000; /* 黒文字 */
  margin: 0; /* 余計なマージンを削除 */
  padding: 10px 0; /* 上下に少し余白を追加 */
  border-bottom: 2px solid #ddd; /* 下に横ボーダーを引く */
}

/* セクション3の商品リストを2列に配置 */
.product-list {
  display: grid; /* グリッドレイアウトを使用 */
  grid-template-columns: repeat(2, 1fr); /* 2列に分割 */
  gap: 10px; /* アイテム間のスペース */
  margin: 0 auto; /* 中央揃え */
}

/* 商品アイテムのスタイル調整 */
.product-item {
  text-align: center; /* 中央揃え */
  border: 1px solid #ddd; /* アイテムごとにボーダーを追加 */
  padding: 10px; /* 内側の余白を調整 */
  border-radius: 5px; /* 角を丸める */
}

/* 商品画像の調整 */
.product-item img {
  width: 100%; /* 親要素にフィット */
  height: auto; /* 縦横比を維持 */
  max-width: 100%; /* 親要素を超えない */
  object-fit: contain; /* 必要に応じて全体表示 */
}

/* 商品名や価格のスタイル調整 */
.product-item p {
  margin: 5px 0; /* 余白を調整 */
  font-size: 14px; /* テキストサイズを少し縮小 */
  line-height: 1.5; /* 行間を調整 */
}

/* グリッド内の空白を埋める */
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列グリッド */
  gap: 10px; /* アイテム間のスペース */
  grid-auto-flow: dense; /* アイテムを詰めて表示 */
}

/* 商品アイテムのスタイル */
.product-item {
  text-align: center;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}


.pagination {
  display: flex;
  justify-content: center; /* 水平方向の中央配置 */
  align-items: center; /* 垂直方向の中央配置（念のため） */
  gap: 10px; /* 各ボタンの間隔 */
  margin-top: 20px; /* 上部に余白 */
  margin-bottom:20px;
}

.pagination a {
  text-decoration: none;
  padding: 8px 15px;
  border: 1px solid #333;
  border-radius: 5px;
  color: #333;
  background-color: #f8f8f8;
  transition: 0.3s;
}

.pagination a.special {
  background-color: #333;
  color: #fff;
}

.pagination a:hover {
  background-color: #555;
  color: #fff;
}


@media screen and (max-width: 431px) {
    #back-to-top {
        display: none !important; /* CSSで非表示 */
        visibility: hidden; /* 完全に隠す */
    }    

/* サイド画像のサイズ調整 */
.floating-button img {
  width: 70px; /* 横幅をさらに半分に縮小 */
  height: auto; /* 縦横比を維持 */
}

/* フローティングボタン（修正済み） */
.floating-button {
  position: fixed;
  right: 10px;
  top: 80%; /* 画面の下部に配置 */
  transform: translateY(-50%);
  z-index: 1000; /* トップに戻るボタンより前面に表示 */
}

}

@media screen and (max-width: 431px) {
  .category-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px; /* CATEGORYの下の余白を縮める */
  }

  .category-block {
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px; /* 各リンクの間隔を縮める */
      text-align: center;
  }

  .category-block a p {
      font-size: 14px;
      color: #333;
      padding: 5px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      margin: 2px 0; /* 上下の余白を最小限に */
  }

  /* 最後のリンク（「その他」）だけ下の余白を大きくする */
  .category-block a:last-child p {
      margin-bottom: 20px; /* 下のH2との間隔を適度に確保 */
  }
}

@media screen and (max-width: 431px) {
  .product-list {
      grid-template-columns: repeat(2, 1fr) !important; /* 2列に強制変更 */
      gap: 10px !important;
  }
}