/* ------------------------------
   ゲームカードスタイル
-------------------------------- */
.game-card {
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 10px; /* 半角のみ */
  background: #fefefe;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  max-width: 640px;
  box-sizing: border-box;
}

.game-card h3 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-size: 1.4rem;
  color: #c03028;
}
/* game-card の H3リンク色＋下線 */
.game-card h3 a {
  color: #b2987f !important; /* お好みの色 */
  text-decoration: underline !important;
}

.game-card h3 a:hover {
  color: #c03028 !important; /* ホバー時の色 */
  text-decoration: underline; /* ホバー時も下線 */
}

.game-card .meta {
  font-size: 0.9rem;
  color: #666;
}

.game-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1rem 0;
}

.comment-box p {
  font-size: 0.95rem;
  margin: 0.4rem 0;
}

.comment-box .meta {
  font-size: 0.85rem;
  margin-top: 18px;
  display: -webkit-box;              /* 必須：複数行対応 */
  -webkit-line-clamp: 2;             /* 最大2行 */
  -webkit-box-orient: vertical;      /* 縦方向のボックス */
  overflow: hidden;                  /* はみ出しを隠す */
  text-overflow: ellipsis;           /* 省略記号を表示 */
  line-height: 1.5;                  /* 行間 */
  max-height: calc(1.5em * 2);       /* 行数×行間 */
  white-space: normal;               /* 折り返し許可 */
}

.amazon-link a {
  color: #2a7ae2;
  text-decoration: none;
  font-weight: bold;
}

/* ------------------------------
   カード一覧（グリッド／リスト 共通）
-------------------------------- */
.fc-card-list {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* リスト行（title_only などで使用） */
.fc-card-list .listing-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #f4f1ed;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
  box-sizing: border-box;
  margin-bottom: 20px; /* リストの縦間隔 */
}
.fc-card-list .listing-item:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
}
.fc-card-list .listing-item img {
  width: 100px;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}
.fc-card-list .listing-content {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: visible;
  word-wrap: break-word;
}
.fc-card-list .listing-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 4px;
  color: #222;
}
.fc-card-list .maker {
  font-size: 14px;
  color: #555;
  margin: 2px 0;
}
.fc-card-list .date {
  font-size: 13px;
  color: #777;
  margin: 2px 0;
}
.fc-card-list .youtube,
.fc-card-list .listing-content p.youtube {
  display: none !important;
}

/* ------------------------------
   グリッド（output="grid" のときだけ .display-posts-listing が出力される）
-------------------------------- */
.fc-card-list > .display-posts-listing {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* カード間隔（横・縦） */
}
.fc-card-list > .display-posts-listing .related-game-item {
  display: block;
  width: calc(20% - 13px); /* PC：5列 */
  text-align: center;
  font-size: 0.9em;
}
.fc-card-list > .display-posts-listing .related-game-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.fc-card-list > .display-posts-listing .related-game-item img:hover {
  transform: scale(1.05);
}
.fc-card-list > .display-posts-listing .related-game-item p {
  margin-top: 6px;
  font-size: 0.85em;
  line-height: 1.2;
}

/* スマホ：3列（grid のみ対象） */
@media screen and (max-width: 768px) {
  .fc-card-list > .display-posts-listing .related-game-item {
    width: calc(33.333% - 11px);
  }
}

/* ------------------------------
   2カラムレイアウト（メイン＋サイドバー）
-------------------------------- */
.layout-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0 20px;
  box-sizing: border-box;
}
.main-content {
  flex: 0 0 70%;
  box-sizing: border-box;
}
.sidebar {
  flex: 0 0 30%;
  box-sizing: border-box;
  float: none;
}
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  .main-content,
  .sidebar {
    flex: 1 1 100%;
    padding-right: 0;
  }
}

/* ------------------------------
   ページネーション（共通）
-------------------------------- */
.game-pagination {
  margin: 2rem 0;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}
.game-pagination ul,
.game-pagination ul.page-numbers,
ul.page-numbers,
ul.page-numbers li {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.game-pagination ul.page-numbers > li { margin: 4px 2px; }
.game-pagination ul.page-numbers > li > a,
.game-pagination ul.page-numbers > li > span {
  display: inline-block;
  padding: 7px 9px;
  min-width: 11px;
  text-align: center;
  border: 1px solid #ccc;
  background: #f4f1ed;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  font-size: 12px;
  margin: 0;
}
.game-pagination ul.page-numbers > li > span.current {
  background: #c03028;
  color: #fff;
  font-weight: bold;
  border-color: #c03028;
}
.game-pagination ul.page-numbers > li > a:hover {
  background: #c03028;
  color: #fff;
  border-color: #c03028;
}

/* the_posts_pagination 用（必要なら） */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2rem auto;
  max-width: 100%;
}
.pagination .page-numbers {
  display: inline-block;
  padding: 7px 10px;
  margin: 2px;
  font-size: 13px;
  color: #333;
  background: #f4f1ed;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.pagination .page-numbers.current {
  background: #c03028;
  color: #fff;
  font-weight: bold;
  border-color: #c03028;
}
.pagination .page-numbers:hover {
  background: #c03028;
  color: #fff;
  border-color: #c03028;
}

/* その他 */
div.yyi-rinker-contents { margin: 0 !important; }

@media screen and (max-width: 1024px) {
  .pagination-top { display: none !important; }
}

/* ------------------------------
   関連するゲームタイトル関係
-------------------------------- */
.related-games { margin-top: 40px; }
.related-games h3 { font-size: 1.2em; margin-bottom: 1em; }
.related-games > .related-game-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/* PCは5列 */
.related-games > .related-game-list > .related-game-item {
  width: calc(20% - 13px);
  text-align: center;
  font-size: 0.9em;
}
/* サムネ&テキスト */
.related-games > .related-game-list > .related-game-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.related-games > .related-game-list > .related-game-item img:hover { transform: scale(1.05); }
.related-games > .related-game-list > .related-game-item p {
  margin-top: 6px;
  font-size: 0.85em;
  line-height: 1.2;
}
/* スマホ：3列＆7件目以降を非表示＝6件固定 */
@media (max-width: 768px) {
  .related-games > .related-game-list > .related-game-item { width: calc(33.333% - 11px); }
  .related-games > .related-game-list > .related-game-item:nth-child(n+7) { display: none; }
}

/* ------------------------------
   コメント関係
-------------------------------- */
.comment-meta {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px !important;
}
.comment-meta a {
  font-size: 14px;
  font-weight: normal; /* 必要に応じて bold を避ける */
  text-decoration: none;
}

/* ==========================================================
   検索ページ専用：ページネーション最終版（中央揃え・スマホ安定）
   ※ ここだけ新規／他は既存を維持
========================================================== */
body.search .pagination-area{
  display: flow-root;                 /* 前要素との重なり防止 */
  margin: 14px 0 28px;
  position: relative;
  z-index: 1;
}

/* the_posts_pagination() 外枠：中央寄せの土台＋見切れ防止 */
body.search .navigation.pagination{
  clear: both;
  float: none !important;
  position: relative;
  z-index: 1;
  text-align: center;                 /* 中身を中央に */
  overflow-x: auto;                   /* 幅不足時は横スクロール */
  -webkit-overflow-scrolling: touch;
  padding: 0 12px;                    /* 右端の見切れ防止 */
}

/* 中身：inline-flex で中央配置、幅は内容に合わせる */
body.search .navigation.pagination .nav-links{
  display: inline-flex !important;    /* 親の text-align:center で中央に */
  width: max-content;                 /* 内容幅そのまま */
  white-space: nowrap !important;
  gap: 2px !important;
  justify-content: center;
  vertical-align: top;
}

/* ボタン：横長化させない（next/prev も固定） */
body.search .navigation.pagination .page-numbers{
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  position: static !important;        /* 念のため absolute を無効化 */
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f4f1ed;
  color: #333;
  text-decoration: none;
}
body.search .navigation.pagination .page-numbers.next,
body.search .navigation.pagination .page-numbers.prev{
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

/* 現在ページは赤 */
body.search .navigation.pagination .page-numbers.current{
  background: #c03028;
  border-color: #c03028;
  color: #fff;
}

/* SRテキスト（「次のページ」など）が幅を食わないよう保険 */
body.search .navigation.pagination .screen-reader-text{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* スマホは少しだけ小さめにして収まりUP */
@media (max-width: 480px){
  body.search .navigation.pagination .page-numbers{
    padding: 6px 8px;
    font-size: 12px;
  }
}
/* ------------------------------
   検索ページ用 ページネーション調整
-------------------------------- */
body.search .navigation.pagination {
  clear: both;
  position: relative;
  z-index: 1;
  margin: 16px 0 24px;
}

body.search .navigation.pagination .nav-links {
  display: flex !important;
  justify-content: center;         /* 中央寄せ */
  align-items: center;
  flex-wrap: nowrap !important;    /* 折り返さない */
  white-space: nowrap !important;  /* はみ出し防止 */
  gap: 4px;                         /* 間隔は.game-paginationと同等 */
  overflow-x: auto;                 /* 幅不足時スクロール */
  -webkit-overflow-scrolling: touch;
  padding: 0 4px;                   /* スマホ端での切れ防止 */
}

body.search .navigation.pagination .nav-links > * {
  flex: 0 0 auto;                   /* ボタンつぶれ防止 */
}

/* ボタンデザインを .game-pagination と統一 */
body.search .navigation.pagination .nav-links a,
body.search .navigation.pagination .nav-links span {
  display: inline-block;
  padding: 13px 9px;
  min-width: 11px;
  text-align: center;
  border: 1px solid #ccc;
  background: #f4f1ed;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
  font-size: 12px;
}

body.search .navigation.pagination .nav-links .current {
  background: #c03028;
  color: #fff;
  font-weight: bold;
  border-color: #c03028;
}

body.search .navigation.pagination .nav-links a:hover {
  background: #c03028;
  color: #fff;
  border-color: #c03028;
}

/* ------------------------------
   Search & Filter: [searchandfilter fields="search" post_types="famicom"]
   検索窓＋サブミット（.game-pagination とサイズ感統一）
-------------------------------- */
.searchandfilter{
  max-width: 720px;
  margin: 0 auto 24px;
}

.searchandfilter ul{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;         /* スマホで折り返し */
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 入力欄 */
.searchandfilter .sf-field-search input[type="text"]{
  padding: 7px 9px;        /* ← .game-pagination と合わせる */
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f4f1ed;
  color: #333;
  width: min(420px, 100%); /* 横幅は可変 */
  box-sizing: border-box;
}

/* 送信ボタン */
.searchandfilter .sf-field-submit input[type="submit"]{
  padding: 7px 9px;        /* ← .game-pagination と合わせる */
  min-width: 60px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #c03028;
  border-radius: 4px;
  background: #c03028;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.searchandfilter .sf-field-submit input[type="submit"]:hover{
  background: #a02820;
  border-color: #a02820;
}
/* 送信ボタン（ホバー時はページネーションと同じ色変化） */
body .searchandfilter .sf-field-submit input[type="submit"]:hover {
  background: #c03028 !important;
  border-color: #c03028 !important;
  color: #fff !important;
}

/* モバイル微調整 */
@media (max-width: 480px){
  .searchandfilter{ margin-bottom: 28px; } /* 下のページネーションと干渉しないように */
  .searchandfilter .sf-field-search input[type="text"]{
    width: 100%;
  }
}