/* Header Styling */
/* ヘッダー全体の固定・背景指定 */
.site-header {
  /* 白背景 */
  background-color: #ffffff;
  /* 下部ボーダー */
  border-bottom: 1px solid var(--color-border);
  /* 上部に固定 */
  position: sticky;
  /* 上端ピン留め */
  top: 0;
  /* 前面への配置 */
  z-index: 100;
  /* シャドウの適用 */
  box-shadow: var(--shadow-sm);
}

/* ヘッダー内部のレイアウト */
.header-inner {
  /* Flex配置 */
  display: flex;
  /* 垂直中央寄せ */
  align-items: center;
  /* 両端配置 */
  justify-content: space-between;
  /* 高さ56px */
  height: 64px;
}

/* ロゴエリアのスタイル */
.logo {
  /* フォントサイズ */
  font-size: 22px;
  /* 太字 */
  font-weight: 700;
  /* 文字間隔 */
  letter-spacing: -0.5px;
  /* カラー */
  color: var(--color-primary);
}

/* ロゴのアクセントカラー表示 */
.logo span {
  /* オレンジゴールド */
  color: var(--color-accent);
}

/* 検索バー（ピル型インライン検索） */
.search-box {
  /* 視覚的配置 */
  position: relative;
  /* 幅 */
  width: 320px;
}

/* 検索インプット */
.search-input {
  /* 全幅 */
  width: 100%;
  /* 上下左右パディング */
  padding: 8px 16px 8px 36px;
  /* 丸みのあるピル型 */
  border-radius: 20px;
  /* ボーダー */
  border: 1px solid var(--color-border);
  /* 背景色 */
  background-color: var(--color-bg-main);
  /* フォントサイズ */
  font-size: 13px;
  /* トランジション */
  transition: all 0.2s;
}

/* 検索インプットフォーカス時 */
.search-input:focus {
  /* アウトライン消去 */
  outline: none;
  /* 白背景化 */
  background-color: #ffffff;
  /* ボーダーカラー変化 */
  border-color: var(--color-accent);
}

/* 検索アイコン */
.search-icon {
  /* 絶対配置 */
  position: absolute;
  /* 左配置 */
  left: 12px;
  /* 垂直中央 */
  top: 50%;
  /* 垂直シフト */
  transform: translateY(-50%);
  /* アイコンカラー */
  color: var(--color-text-sub);
  /* イベント無視 */
  pointer-events: none;
}

/* PR告知バッジ（景表法・ステマ規制対応文言） */
.pr-disclosure-bar {
  /* 背景色（淡いグレー） */
  background-color: #f1f3f5;
  /* 上下パディング */
  padding: 6px 0;
  /* 中央寄せ */
  text-align: center;
  /* フォントサイズ */
  font-size: 11px;
  /* サブテキスト色 */
  color: var(--color-text-sub);
  /* 下部ボーダー */
  border-bottom: 1px solid var(--color-border);
}

/* ヒーローセクション */
.hero-section {
  /* グラデーション背景 */
  background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
  /* 白文字 */
  color: #ffffff;
  /* パディング */
  padding: 48px 0;
  /* 中央寄せ */
  text-align: center;
  /* 余白 */
  margin-bottom: 32px;
}

/* ヒーロータイトル */
.hero-title {
  /* フォントサイズ */
  font-size: 32px;
  /* 太字 */
  font-weight: 700;
  /* 下部マージン */
  margin-bottom: 12px;
}

/* ヒーローキャッチコピー */
.hero-subtitle {
  /* フォントサイズ */
  font-size: 15px;
  /* 透明度 */
  opacity: 0.9;
}

/* カテゴリーグリッド */
.category-grid {
  /* Grid配置 */
  display: grid;
  /* 4列配置 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* ギャップ */
  gap: 16px;
  /* マージン */
  margin-bottom: 40px;
}

/* カテゴリーカード */
.category-card {
  /* 背景白 */
  background-color: #ffffff;
  /* パディング */
  padding: 16px;
  /* 角丸 */
  border-radius: var(--border-radius);
  /* ボーダー */
  border: 1px solid var(--color-border);
  /* Flex配置 */
  display: flex;
  /* 垂直中央 */
  align-items: center;
  /* ギャップ */
  gap: 12px;
  /* トランジション */
  transition: transform 0.2s, box-shadow 0.2s;
}

/* カテゴリーカードホバー */
.category-card:hover {
  /* 浮き上がり効果 */
  transform: translateY(-2px);
  /* シャドウ強化 */
  box-shadow: var(--shadow-md);
}

/* カテゴリーアイコン */
.category-icon {
  /* サイズ */
  font-size: 28px;
  /* カラー */
  color: var(--color-accent);
}

/* 注目比較記事リストグリッド */
.articles-grid {
  /* Grid配置 */
  display: grid;
  /* レスポンシブ3列 */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  /* ギャップ */
  gap: 24px;
  /* マージン */
  margin-bottom: 48px;
}

/* 記事カード */
.article-card {
  /* 白背景 */
  background-color: #ffffff;
  /* 角丸 */
  border-radius: var(--border-radius);
  /* はみ出し防止 */
  overflow: hidden;
  /* ボーダー */
  border: 1px solid var(--color-border);
  /* トランジション */
  transition: transform 0.2s, box-shadow 0.2s;
  /* パラメータ計算用 */
  position: relative;
}

/* 記事カードホバー */
.article-card:hover {
  /* 浮き上がり */
  transform: translateY(-4px);
  /* シャドウ */
  box-shadow: var(--shadow-md);
}

/* サムネイル画像領域 */
.article-thumb-wrapper {
  /* 相対配置 */
  position: relative;
  /* 幅 */
  width: 100%;
  /* 4:3比率 */
  aspect-ratio: 4 / 3;
  /* 切り抜き */
  overflow: hidden;
}

/* サムネイル画像 */
.article-thumb {
  /* 全幅 */
  width: 100%;
  /* 全高 */
  height: 100%;
  /* トリミング */
  object-fit: cover;
  /* トランジション */
  transition: transform 0.3s;
}

/* サムネイルホバーズーム */
.article-card:hover .article-thumb {
  /* 拡大 */
  transform: scale(1.05);
}

/* 「徹底比較」ゴールドバッジ */
.badge-thorough {
  /* 絶対配置 */
  position: absolute;
  /* 上部 */
  top: 12px;
  /* 左部 */
  left: 12px;
  /* 背景ゴールド */
  background-color: var(--color-accent);
  /* 白文字 */
  color: #ffffff;
  /* フォントサイズ */
  font-size: 11px;
  /* 太字 */
  font-weight: 700;
  /* パディング */
  padding: 4px 10px;
  /* 角丸 */
  border-radius: 4px;
  /* シャドウ */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 検証商品数タグ */
.item-count-tag {
  /* 絶対配置 */
  position: absolute;
  /* 下部 */
  bottom: 12px;
  /* 右部 */
  right: 12px;
  /* 黒透明背景 */
  background-color: rgba(0, 0, 0, 0.75);
  /* 白文字 */
  color: #ffffff;
  /* フォントサイズ */
  font-size: 11px;
  /* パディング */
  padding: 2px 8px;
  /* 角丸 */
  border-radius: 4px;
}

/* 記事カード本文コンテンツ */
.article-card-body {
  /* パディング */
  padding: 16px;
}

/* 記事カードカテゴリタグ */
.article-category-name {
  /* フォントサイズ */
  font-size: 11px;
  /* カラー */
  color: var(--color-text-sub);
  /* マージン */
  margin-bottom: 6px;
}

/* 記事カードタイトル */
.article-card-title {
  /* フォントサイズ */
  font-size: 15px;
  /* 太字 */
  font-weight: 700;
  /* 行高 */
  line-height: 1.4;
  /* カラー */
  color: var(--color-text-main);
}

/* ランキング比較表 (Comparison Table) */
.comparison-table-wrapper {
  /* 横スクロール対応 */
  overflow-x: auto;
  /* マージン */
  margin: 32px 0;
  /* 角丸 */
  border-radius: var(--border-radius);
  /* ボーダー */
  border: 1px solid var(--color-border);
  /* 白背景 */
  background-color: #ffffff;
}

/* 比較テーブル */
.comparison-table {
  /* 全幅 */
  width: 100%;
  /* 最小幅確保 */
  min-width: 700px;
  /* セル結合 */
  border-collapse: collapse;
  /* テキスト左寄せ */
  text-align: left;
}

/* テーブルヘッダー */
.comparison-table th {
  /* ヘッダー背景 */
  background-color: var(--color-primary);
  /* 白文字 */
  color: #ffffff;
  /* パディング */
  padding: 12px 16px;
  /* フォントサイズ */
  font-size: 13px;
  /* セル間ボーダー */
  border-right: 1px solid #333333;
}

/* テーブルデータセル */
.comparison-table td {
  /* パディング */
  padding: 14px 16px;
  /* 下部ボーダー */
  border-bottom: 1px solid var(--color-border);
  /* セル間ボーダー */
  border-right: 1px solid var(--color-border);
  /* フォントサイズ */
  font-size: 13px;
}

/* テーブル交互背景色 */
.comparison-table tbody tr:nth-child(even) {
  /* 薄いグレー背景 */
  background-color: #f8f9fa;
}

/* ランキング詳細カードセクション */
.ranking-card {
  /* 白背景 */
  background-color: #ffffff;
  /* 角丸 */
  border-radius: var(--border-radius);
  /* ボーダー */
  border: 1px solid var(--color-border);
  /* パディング */
  padding: 24px;
  /* マージン */
  margin-bottom: 32px;
  /* シャドウ */
  box-shadow: var(--shadow-sm);
  /* 相対配置 */
  position: relative;
}

/* 順位バッジ (Gold/Silver/Bronze/Standard) */
.rank-badge {
  /* インラインブロック */
  display: inline-block;
  /* パディング */
  padding: 4px 16px;
  /* 角丸 */
  border-radius: 20px;
  /* 白文字 */
  color: #ffffff;
  /* 太字 */
  font-weight: 700;
  /* フォントサイズ */
  font-size: 14px;
  /* マージン */
  margin-bottom: 16px;
}

/* 金賞 */
.rank-badge.rank-1 { background-color: var(--color-gold); }
/* 銀賞 */
.rank-badge.rank-2 { background-color: var(--color-silver); }
/* 銅賞 */
.rank-badge.rank-3 { background-color: var(--color-bronze); }
/* 4位以下 */
.rank-badge.rank-standard { background-color: #6c757d; }

/* ランキング商品ヘッダー */
.product-header {
  /* Flex配置 */
  display: flex;
  /* ギャップ */
  gap: 20px;
  /* 下部マージン */
  margin-bottom: 20px;
}

/* 商品画像 */
.product-image {
  /* サイズ */
  width: 140px;
  /* アスペクト比 */
  height: 140px;
  /* トリミング */
  object-fit: contain;
  /* 角丸 */
  border-radius: 6px;
  /* ボーダー */
  border: 1px solid var(--color-border);
}

/* メリット・おすすめポイントボックス */
.pros-box {
  /* 薄グリーン背景 */
  background-color: var(--color-pros-bg);
  /* グリーンボーダー */
  border-left: 4px solid var(--color-pros-text);
  /* パディング */
  padding: 14px 18px;
  /* 角丸 */
  border-radius: 4px;
  /* マージン */
  margin-bottom: 12px;
}

/* メリットタイトル */
.pros-title {
  /* メリットテキスト色 */
  color: var(--color-pros-text);
  /* 太字 */
  font-weight: 700;
  /* フォントサイズ */
  font-size: 13px;
  /* マージン */
  margin-bottom: 6px;
}

/* デメリット・気になった点ボックス */
.cons-box {
  /* 薄レッド背景 */
  background-color: var(--color-cons-bg);
  /* レッドボーダー */
  border-left: 4px solid var(--color-cons-text);
  /* パディング */
  padding: 14px 18px;
  /* 角丸 */
  border-radius: 4px;
  /* マージン */
  margin-bottom: 20px;
}

/* デメリットタイトル */
.cons-title {
  /* デメリットテキスト色 */
  color: var(--color-cons-text);
  /* 太字 */
  font-weight: 700;
  /* フォントサイズ */
  font-size: 13px;
  /* マージン */
  margin-bottom: 6px;
}

/* 楽天アフィリエイト購入CTAボタン */
.btn-rakuten {
  /* ブロック配置 */
  display: flex;
  /* 中央寄せ */
  align-items: center;
  /* 中央寄せ */
  justify-content: center;
  /* ギャップ */
  gap: 8px;
  /* 赤背景 */
  background-color: var(--color-rakuten);
  /* 白文字 */
  color: #ffffff;
  /* 太字 */
  font-weight: 700;
  /* フォントサイズ */
  font-size: 15px;
  /* パディング */
  padding: 14px 24px;
  /* 角丸 */
  border-radius: 30px;
  /* トランジション */
  transition: background-color 0.2s, transform 0.1s;
  /* シャドウ */
  box-shadow: 0 4px 12px rgba(191, 0, 0, 0.25);
  /* 全幅 */
  width: 100%;
}

/* 楽天ボタンホバー */
.btn-rakuten:hover {
  /* 濃い赤 */
  background-color: var(--color-rakuten-hover);
  /* 押し込み */
  transform: translateY(-1px);
}

/* AdSense 広告配置用プレースホルダー */
.adsense-placeholder {
  /* 薄いグレー背景 */
  background-color: #f1f3f5;
  /* 破線ボーダー */
  border: 1px dashed #ced4da;
  /* 中央寄せ */
  text-align: center;
  /* パディング */
  padding: 24px;
  /* マージン */
  margin: 32px 0;
  /* 角丸 */
  border-radius: var(--border-radius);
  /* 補足カラー */
  color: var(--color-text-sub);
  /* フォントサイズ */
  font-size: 12px;
}

/* フッター */
.site-footer {
  /* 背景ブラック */
  background-color: var(--color-primary);
  /* 白文字 */
  color: #a0aec0;
  /* パディング */
  padding: 40px 0 24px 0;
  /* 上部マージン */
  margin-top: 60px;
  /* テキストサイズ */
  font-size: 12px;
}

/* フッターコンテンツ配置 */
.footer-inner {
  /* Flex配置 */
  display: flex;
  /* 上下方向 */
  flex-direction: column;
  /* 中央寄せ */
  align-items: center;
  /* ギャップ */
  gap: 16px;
}

/* フッターナビゲーション */
.footer-nav {
  /* Flex配置 */
  display: flex;
  /* ギャップ */
  gap: 20px;
}

/* モバイル表示時のスタイル調整 */
@media (max-width: 768px) {
  /* ヘッダー内アイテム配置 */
  .header-inner {
    /* 縦並び */
    flex-direction: column;
    /* パディング */
    padding: 8px 0;
    /* 高さ自動 */
    height: auto;
    /* ギャップ */
    gap: 8px;
  }
  /* 検索ボックス全幅 */
  .search-box {
    /* 幅100% */
    width: 100%;
  }
  /* 商品ヘッダー縦並び */
  .product-header {
    /* 縦並び */
    flex-direction: column;
    /* 中央寄せ */
    align-items: center;
    /* テキスト中央 */
    text-align: center;
  }
}