* { margin: 0; padding: 0; box-sizing: border-box; }

body {

  background: #dde3ea;

  font-family: 'Meiryo', 'メイリオ', 'Meiryo UI', sans-serif;

  color: #333;

  font-size: 14px;

  line-height: 1.6;

}



/* ===== ヘッダー ===== */

.site-header {

  background: #2979b8;

  padding: 0 16px;

  position: sticky;

  top: 0;

  z-index: 100;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

}

.header-inner {

  max-width: 1240px;

  margin: 0 auto;

  height: 52px;

  display: flex;

  align-items: center;

  gap: 16px;

}

.site-name {

  color: #fff;

  font-size: 1.6rem;

  font-weight: bold;

  text-decoration: none;

  white-space: nowrap;

  letter-spacing: 0.04em;

}

.site-name span { font-size: 0.85rem; opacity: 0.8; margin-left: 6px; }

.header-search {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-left: auto;

  flex-wrap: wrap;

}

.header-search select,

.header-search input {

  height: 32px;

  border: none;

  border-radius: 4px;

  padding: 0 10px;

  font-family: inherit;

  font-size: 13px;

  outline: none;

}

.header-search select { background: #fff; color: #333; cursor: pointer; }

.header-search input { background: #fff; color: #333; width: 180px; }

.header-search input::placeholder { color: #aaa; }







/* ===== ページレイアウト ===== */

.page-wrap {

  max-width: 1240px;

  margin: 20px auto;

  padding: 0 12px;

  display: flex;

  gap: 20px;

  align-items: flex-start;

}



/* ===== 広告サイドバー ===== */

.ad-sidebar {

  width: 200px;

  min-width: 200px;

  position: static;

  top: 96px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.ad-block {

  background: #f7f9fb;

  border: 1px solid #d0d8e4;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #aaa;

  font-size: 12px;

  text-align: center;

}

.ad-block.large  { width: 200px; height: 600px; }

.ad-block.medium { width: 200px; height: 250px; }



/* ===== メインコンテンツ ===== */

.main-content { flex: 1; min-width: 0; }





/* ===== カルーセル ===== */

.carousel {

  background: #fff;

  border-radius: 8px;

  border: 1px solid #d0d8e4;

  overflow: hidden;

  margin-bottom: 20px;

  position: relative;

}

.carousel-track-wrap { overflow: hidden; }

.carousel-track {

  display: flex;

  transition: transform 0.4s ease;

}

.carousel-slide {

  min-width: 100%;

  position: relative;

  aspect-ratio: 16/6;

  background: linear-gradient(135deg, #1e5f96, #2979b8, #4da1e8) center/cover no-repeat;

  display: flex;

  align-items: flex-end;

  text-decoration: none;

}

.carousel-slide::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.25);

}

.carousel-slide:nth-child(2) { background: linear-gradient(135deg, #1e5f40, #2979a0, #4da188); }

.carousel-slide:nth-child(3) { background: linear-gradient(135deg, #5f1e96, #9629b8, #c44de8); }

.carousel-caption {

  background: linear-gradient(transparent, rgba(0,0,0,0.7));

  width: 100%;

  padding: 24px 20px 16px;

  color: #fff;

}

.carousel-cat {

  display: inline-block;

  background: #f9a8c9;

  color: #831843;

  font-size: 11px;

  font-weight: bold;

  padding: 2px 8px;

  border-radius: 3px;

  margin-bottom: 6px;

}

.carousel-title {

  font-size: 1.1rem;

  font-weight: bold;

  line-height: 1.4;

  word-break: keep-all;

  overflow-wrap: break-word;

}

.carousel-prev,

.carousel-next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 44px;

  height: 44px;

  background: rgba(0,0,0,0.4);

  color: #fff;

  border: none;

  border-radius: 50%;

  font-size: 18px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.15s;

  z-index: 10;

}

.carousel-prev:hover,

.carousel-next:hover { background: rgba(0,0,0,0.7); }

.carousel-prev { left: 10px; }

.carousel-next { right: 10px; }

.carousel-pause {

  position: absolute;

  top: 10px;

  right: 10px;

  background: rgba(0,0,0,0.4);

  color: #fff;

  border: none;

  border-radius: 4px;

  padding: 4px 10px;

  font-size: 16px;

  cursor: pointer;

  z-index: 10;

}

.carousel-dots {

  display: flex;

  justify-content: center;

  gap: 6px;

  padding: 10px 0 8px;

  background: #fff;

}

.carousel-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #ccc;

  border: none;

  cursor: pointer;

  transition: background 0.2s;

}

.carousel-dot.active { background: #2979b8; }

/* ===== セクション見出し ===== */

.section-title {

  font-size: 1rem;

  font-weight: bold;

  color: #1e5f96;

  border-left: 4px solid #2979b8;

  padding-left: 10px;

  margin-bottom: 14px;

}



/* ===== 記事グリッド ===== */

.articles-section { margin-bottom: 20px; }

.article-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  margin-bottom: 12px;

}

.article-grid-more {

  display: none;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  margin-bottom: 12px;

}

.article-card {

  background: #fff;

  border: 1px solid #d0d8e4;

  border-radius: 6px;

  overflow: hidden;

  text-decoration: none;

  color: #333;

  transition: box-shadow 0.15s;

  display: block;

}

.article-card:hover { box-shadow: 0 2px 10px rgba(41,121,184,0.18); }

.article-thumb {

  width: 100%;

  aspect-ratio: 16/9;

  background: linear-gradient(135deg, #1e5f96, #4da1e8);

  display: flex;

  align-items: center;

  justify-content: center;

  color: rgba(255,255,255,0.5);

  font-size: 11px;

}

.article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-info { padding: 8px 10px 10px; }

.article-cat-label {

  display: inline-block;

  font-size: 10px;

  font-weight: bold;

  padding: 1px 6px;

  border-radius: 3px;

  margin-bottom: 4px;

}

.cat-新作   { background: #7dd4fc; color: #0c4a6e; }

.cat-攻略   { background: #6ee7b7; color: #064e3b; }

.cat-セール { background: #fca96a; color: #7c2d12; }

.cat-ニュース,.cat-news { background: #f9a8c9; color: #831843; }

.cat-アップデート { background: #d1fae5; color: #064e3b; }

.cat-グッズ { background: #e9d5ff; color: #4c1d95; }

.cat-イベント { background: #fbcfe8; color: #831843; }

.cat-レビュー { background: #ddd6fe; color: #4c1d95; }

.cat-その他 { background: #e2e8f0; color: #334155; }

.article-card-title {

  font-size: 13px;

  font-weight: bold;

  line-height: 1.45;

  word-break: keep-all;

  overflow-wrap: break-word;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.article-date { font-size: 11px; color: #999; margin-top: 4px; }



/* ===== ページャ（数字リンク + 前後ナビ） ===== */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 24px 0 8px;
}
.pager a, .pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #b5d4f4;
  border-radius: 4px;
  background: #fff;
  color: #185fa5;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.pager a:hover { background: #e6f2fb; border-color: #2979b8; }
.pager .current {
  background: #2979b8;
  border-color: #2979b8;
  color: #fff;
  cursor: default;
}
.pager .disabled {
  color: #bbb;
  border-color: #e0e0e0;
  background: #f7f7f7;
  cursor: default;
}
.pager .edge { font-size: 13px; }
.pager-count {
  text-align: center;
  color: #888;
  font-size: 12px;
  margin: 0 0 28px;
}
.pager[hidden], .pager-count[hidden] { display: none; }

/* もっと見るボタン */

.more-btn-wrap { text-align: center; margin-bottom: 20px; }

.more-btn {

  background: #e6f2fb;

  color: #185fa5;

  border: 1px solid #b5d4f4;

  border-radius: 4px;

  padding: 10px 40px;

  font-size: 14px;

  font-weight: bold;

  font-family: inherit;

  cursor: pointer;

  transition: background 0.15s;

}

.more-btn:hover { background: #cde4f7; }

.more-btn[hidden] { display: none; }



/* 検索ゼロ件 */

.no-results {

  display: none;

  text-align: center;

  padding: 40px;

  color: #999;

  background: #fff;

  border-radius: 6px;

  border: 1px solid #d0d8e4;

  margin-bottom: 20px;

}



/* ===== ランキング ===== */

.ranking-section {

  background: #fff;

  border: 1px solid #d0d8e4;

  border-radius: 6px;

  padding: 16px;

  margin-bottom: 20px;

}

.ranking-list { list-style: none; }

.ranking-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 0;

  border-bottom: 1px solid #f0f4f8;

  text-decoration: none;

  color: #333;

  transition: background 0.1s;

}

.ranking-item:last-child { border-bottom: none; }

.ranking-item:hover { background: #f7f9fb; }

.rank-num {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background: #dde3ea;

  color: #555;

  font-size: 12px;

  font-weight: bold;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.rank-num.gold   { background: #fbbf24; color: #fff; }

.rank-num.silver { background: #9ca3af; color: #fff; }

.rank-num.bronze { background: #d97706; color: #fff; }

.rank-title { font-size: 13px; font-weight: bold; flex: 1; line-height: 1.4; word-break: keep-all; overflow-wrap: break-word; }

.rank-pv { font-size: 11px; color: #999; white-space: nowrap; }



/* ===== モバイル対応 ===== */

@media (max-width: 1239px) {

  .page-wrap > aside.ad-sidebar:last-of-type { display: none; }

}

@media (max-width: 780px) {

  .ad-sidebar { display: none; }

}

@media (max-width: 600px) {
  .pager { gap: 4px; }
  .pager a, .pager span { min-width: 32px; height: 32px; padding: 0 6px; font-size: 13px; }
  .pager .edge { display: none; }


  .page-wrap { padding: 0; margin: 12px 0; }

  .article-grid,

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

  .header-search input { width: 120px; }

  .carousel-title { font-size: 0.95rem; }

  }

@media (max-width: 400px) {

  .article-grid,

  .article-grid-more { grid-template-columns: 1fr; }

}



.cat-レビュー,.article-cat-label.cat-レビュー{background:#a8f4d2;color:#065f46}

.carousel-cat.cat-レビュー{background:rgba(6,95,70,.85)}

.tag-filter-bar{display:none;align-items:center;gap:8px;padding:8px 16px;background:#e6f2fb;border-bottom:1px solid #b5d4f4;font-size:13px;color:#185fa5}

.tag-filter-bar.active{display:flex}

.tag-filter-bar strong{font-weight:bold}

.tag-clear-btn{margin-left:auto;background:none;border:1px solid #b5d4f4;color:#185fa5;border-radius:4px;padding:3px 10px;font-size:12px;cursor:pointer}

.tag-clear-btn:hover{background:#2979b8;color:#fff;border-color:#2979b8}

.cat-trend,.article-cat-label.cat-trend{background:#fde68a;color:#78350f}

.carousel-cat.cat-trend{background:rgba(120,53,15,.85)}
/* cat-nav CSS → article.css に一元化（記事ページと共通）*/