/* ============================================================
   レスポンシブスタイル
   ============================================================ */

/* ---------- タブレット（〜1024px） ---------- */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 260px;
  }

  .pillars-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .ranking-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .stat-card {
    min-width: 100px;
    padding: 12px 16px;
  }
}

/* ---------- タブレット縦（〜768px） ---------- */
@media (max-width: 768px) {
  :root {
    --header-h: 56px;
  }

  /* ヘッダー：ドロップダウン非表示（モバイルはドロワー使用） */
  .global-nav { display: none; }
  .hamburger  { display: flex; }

  .logo-title { font-size: 13px; }

  /* ヒーロー */
  .hero { padding: 40px 0 32px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-stats {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
  .stat-card { min-width: 90px; }
  .stat-num  { font-size: 22px; }

  /* カテゴリナビ */
  .category-nav { top: var(--header-h); }
  .cat-nav-item  { padding: 12px 14px; font-size: 12px; }

  /* レイアウト（記事一覧・詳細ページのサイドバー付き） */
  .layout-grid {
    grid-template-columns: 1fr;
  }
  /* モバイルは sticky を解除 */
  .sidebar {
    order: -1;
    position: static;
    max-height: none;
    overflow-y: visible;
    top: auto;
  }

  /* ピックアップカード：モバイルは幅を少し縮小 */
  .pickup-card { width: max(var(--pickup-card-w, 200px), 160px); }

  /* タグ一覧：モバイルは少し間隔を詰める */
  .tag-list-section { padding: 32px 0 28px; }
  .tag-list-item { font-size: 12px; padding: 5px 12px; }

  /* 5本柱 */
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .pillar-card { padding: 18px 12px; }
  .pillar-icon { font-size: 28px; }

  /* 記事カード（〜768px）
     グリッドは .article-card-link（<a>ラッパー）に設定 */
  .article-card-link {
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 14px 16px;
    align-items: flex-start;
  }
  .article-thumb {
    width: 120px;
    height: 80px;   /* 3:2比率 */
    flex-shrink: 0;
  }
  .article-body  { gap: 5px; }
  .article-title {
    font-size: 14px;
    -webkit-line-clamp: 3;   /* 3行表示でタイトル途切れ防止 */
    line-height: 1.5;
  }
  .article-tags  { gap: 4px; }

  /* ランキング */
  .ranking-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* CTAバナー */
  .cta-banner {
    grid-template-columns: 1fr;
    padding: 28px;
    text-align: center;
  }
  .cta-banner::before { display: none; }
  .cta-actions { justify-content: center; }

  /* フッター */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  /* サービスグリッド：タブレットは2列 */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* noteカード：1列 */
  .note-cards-grid { grid-template-columns: 1fr !important; }
  .note-card { flex-direction: row; }

  /* サイドバー非表示・最小化 */
  .sidebar-widget:not(:first-child) { display: none; }
  .ad-slot-sidebar { min-height: 100px; }

  /* モバイルナビ */
  .mobile-nav-overlay { display: block; pointer-events: none; }
  .mobile-nav-overlay.open { pointer-events: all; }
}

/* ---------- スマホ（〜480px） ---------- */
@media (max-width: 480px) {
  .container { padding: 0 14px; }

  /* ヒーロー */
  .hero { padding: 28px 0 24px; }
  .hero-title { font-size: 20px; }
  .hero-desc  { font-size: 13px; }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .stat-card { min-width: 0; padding: 10px 8px; }
  .stat-num { font-size: 18px; }
  .hero-cta-group { flex-direction: column; }
  .btn-primary, .btn-secondary { justify-content: center; }

  /* 5本柱：スマホは2+3か1列 */
  .pillars-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pillar-card:last-child {
    grid-column: span 2;
  }

  /* 記事カード（スマホ〜480px）
     グリッドは .article-card-link（<a>ラッパー）に設定 */
  .article-card-link {
    grid-template-columns: 96px 1fr;
    gap: 10px;
    padding: 12px 14px;
    align-items: flex-start;
  }
  .article-thumb {
    width: 96px;
    height: 64px;   /* 3:2比率 */
    flex-shrink: 0;
  }
  .article-body  { gap: 4px; }
  .article-title {
    font-size: 13px;
    -webkit-line-clamp: 3;   /* 3行確保でタイトル途切れ防止 */
    line-height: 1.45;
  }
  .article-tags  { gap: 3px; }
  .article-excerpt { display: none; }
  .article-meta { font-size: 11px; gap: 6px; }

  /* ピックアップ：幅をCSS変数優先・最小幅150px */
  .pickup-card { width: max(var(--pickup-card-w, 200px), 150px); flex-shrink: 0; }
  .pickup-thumb { height: var(--pickup-thumb-h, 100px); min-height: 80px; }

  /* タグ一覧 */
  .tag-list-section { padding: 24px 0 20px; }
  .tag-list-item { font-size: 11px; padding: 4px 10px; }
  .tag-list-count { display: none; }

  /* サービスグリッド：1列固定 */
  .services-grid { grid-template-columns: 1fr !important; }

  /* noteカード：縦積み */
  .note-cards-grid { grid-template-columns: 1fr !important; }
  .note-card { flex-direction: column; gap: 12px; }
  .note-card-icon { font-size: 32px; }

  /* ゲームカードグリッド：スマホは1列 */
  .game-cards-grid { grid-template-columns: 1fr !important; }

  /* PHPゲームカード内部 */
  .game-card-title  { font-size: 15px; }
  .game-card-thumb  { height: 140px; }
  .game-card-body   { padding: 14px; }

  /* CTAバナー：縦積み */
  .cta-banner {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    text-align: center;
    gap: 16px;
  }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-secondary { justify-content: center; width: 100%; box-sizing: border-box; }

  /* ゲームカードグリッド */
  .game-cards-grid { grid-template-columns: 1fr !important; }

  /* セクションヘッダー */
  .section-title { font-size: 15px; }
  .section-link  { font-size: 12px; }

  /* services-section のパディング削減 */
  .services-section { padding: 40px 0; }

  /* note-section のパディング削減 */
  .note-section { padding: 40px 0; }

  /* pillars-section のパディング削減 */
  .pillars-section { padding: 32px 0; }

  /* フッター */
  .site-footer { margin-top: 40px; }

  /* TOPへ戻る */
  .back-to-top {
    bottom: 16px; right: 16px;
    width: 40px; height: 40px;
    font-size: 16px;
  }
}

/* ---------- スマホ全体：横スクロール完全防止 ---------- */
@media (max-width: 768px) {
  /* 横幅からはみ出す要素を抑制 */
  .container,
  .category-nav,
  .category-nav-inner,
  .hero-inner,
  .layout-grid,
  .services-grid,
  .pillars-grid,
  .footer-grid {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* ヒーロー内テキスト折り返し */
  .hero-title { word-break: keep-all; overflow-wrap: break-word; }
  .hero-desc br { display: none; }

  /* CTA バナー横幅制御 */
  .cta-banner { overflow: hidden; }

  /* カテゴリナビ：横スクロールはさせるがbodyには影響させない */
  .category-nav { overflow: hidden; }
  .category-nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 大画面（1400px〜） ---------- */
@media (min-width: 1400px) {
  :root {
    --max-w: 1360px;
    --sidebar-w: 320px;
  }

  .pillars-grid {
    gap: 20px;
  }

  /* 大画面：article-card-link（<a>ラッパー）にグリッドを設定 */
  .article-card-link {
    grid-template-columns: 220px 1fr;
  }
  .article-thumb {
    width: 220px; height: 147px;   /* 3:2比率 */
  }

  /* 大画面：記事ページをさらにワイドに */
  .single-container,
  .list-container {
    max-width: 960px;
  }
}

/* ============================================================
   記事個別ページ・一覧ページ レスポンシブ
   ============================================================ */

/* タブレット（〜768px） */
@media (max-width: 768px) {
  .single-wrap,
  .list-wrap {
    padding: 20px 0 60px;
  }
  .single-container,
  .list-container {
    padding: 0 14px;
  }

  /* 記事タイトル */
  .single-title { font-size: 20px; }

  /* 記事本文 */
  .single-content { font-size: 15px; }
  .single-content h2 { font-size: 1.2em; }
  .single-content h3 { font-size: 1.05em; }
  .single-content pre { font-size: 12px; padding: 1em; }
  .single-content table { font-size: 13px; }

  /* 記事一覧カード（〜768px 記事ページ内） */
  .article-card-link {
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 14px 16px;
    align-items: flex-start;
  }
  .article-thumb {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
  }
  .article-body  { gap: 5px; }
  .article-title {
    font-size: 14px;
    -webkit-line-clamp: 3;
    line-height: 1.5;
  }

  /* 広告スロット */
  .ad-slot-article-top,
  .ad-slot-article-bottom,
  .ad-slot-list-top {
    margin: 16px 0;
  }

  /* 著者ボックス */
  .author-box { gap: 14px; padding: 18px; }
  .author-avatar { width: 56px; height: 56px; font-size: 24px; }
  .author-name   { font-size: 14px; }

  /* 前後ナビ */
  .post-nav { gap: 10px; }
  .post-nav-prev,
  .post-nav-next { padding: 12px 14px; }

  /* 関連記事 */
  .related-grid  { gap: 10px; }
  .related-thumb { height: 76px; font-size: 22px; }
}

/* スマホ（〜480px） */
@media (max-width: 480px) {
  /* 記事タイトル */
  .single-title { font-size: 18px; line-height: 1.4; }

  /* 記事本文 */
  .single-content {
    font-size: 14px;
    line-height: 1.85;
  }
  .single-content h2 { font-size: 1.15em; padding: .45em .7em; }
  .single-content h3 { font-size: 1.0em; }
  .single-content th,
  .single-content td { padding: 7px 10px; }
  .single-content table { font-size: 12px; }

  /* 記事一覧カード（〜480px 記事ページ内） */
  .article-card-link {
    grid-template-columns: 96px 1fr;
    gap: 10px;
    padding: 12px 14px;
    align-items: flex-start;
  }
  .article-thumb {
    width: 96px;
    height: 64px;
    flex-shrink: 0;
  }
  .article-body  { gap: 4px; }
  .article-title {
    font-size: 13px;
    -webkit-line-clamp: 3;
    line-height: 1.45;
  }
  .article-excerpt { display: none; }
  .article-meta    { font-size: 11px; gap: 6px; }

  /* 関連記事：1列に */
  .related-grid { grid-template-columns: 1fr; }

  /* 前後ナビ：1列に */
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; }

  /* 著者ボックス：縦積み */
  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .author-desc { text-align: center; }

  /* シェアボタン：折り返し */
  .share-btn { font-size: 12px; padding: 7px 12px; }
}

/* ---------- タブレット（〜768px）：ゲームカード ---------- */
@media (max-width: 768px) {
  /* ゲームカードグリッド：タブレットは1〜2列 */
  .game-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }
  .game-card-thumb { height: 140px; }
  .game-cards-section { padding: 40px 0; }
}

/* ---------- 印刷 ---------- */
@media print {
  .site-header,
  .category-nav,
  .sidebar,
  .ad-slot,
  .back-to-top,
  .search-overlay,
  .mobile-nav-overlay,
  .mobile-nav-drawer { display: none !important; }

  .layout-grid { grid-template-columns: 1fr; }
  body { background: #fff; }
}