/* ============================================================
   同人スペック帳 — ダーク計器盤テーマ + コンポーネント
   方針: Cocoonスキン不使用。このCSS一枚でダーク化を完結させる。
   パレット:
     bg基調   #0f1420 (ダークネイビー) / 面 #161d2e / カード #1b2438
     罫線     #2a3752
     文字     #d5dbe8 / 見出し #f0f3fa / 弱 #8b96ab
     アクセント amber #f5a623 (星・CTA・強調) / cyan #4dd0e1 (リンク)
   ============================================================ */

/* ---- 全体 ---- */
body {
  background: #0f1420;
  color: #d5dbe8;
}
#container, #body {
  background: #0f1420;
}

/* ---- ヘッダー (コンパクト1段構成: ロゴ左 + ナビ右) ----
   背景画像はCocoonが .header-container に background-image で出すため、
   ここでは background-color のみ指定(ショートハンド禁止=画像を潰すため) */
.header-container, #header-container {
  background-color: #0c1019;
  border-bottom: 1px solid #2a3752;
}
/* #headerはCocoonが背景画像(background-image)を当てる要素。色だけ透過にして画像を活かす */
#header {
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
}
.site-name-text, .logo-text a, #site-title a, .site-name a {
  color: #f5b842 !important;
  letter-spacing: .08em;
  font-family: "DotGothic16", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 400;
}
@media (min-width: 835px) {
  #header-container-in {
    display: flex;
    align-items: center;
    gap: 1.5em;
    padding: 2px 20px;
    max-width: 1236px;
    margin: 0 auto;
    height: 65px; /* ヘッダー高さ固定 (2026-07-20ユーザー確定) */
    box-sizing: border-box;
  }
  #header { flex-shrink: 0; width: auto !important; }
  /* Cocoonの .wrap は幅1236px固定でナビを画面外に押し出すため無効化 */
  #header-in, #header-in.wrap {
    display: flex;
    flex-direction: column-reverse; /* DOMはtagline→h1の順なので反転してタイトルを上に */
    align-items: flex-start;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  #navi-in, #navi-in.wrap { width: 100% !important; max-width: none !important; }
  #header .logo-header {
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.35 !important;
  }
  #header .tagline { text-align: left !important; }
  #navi {
    flex: 1;
    background: transparent !important;
    border: none;
    min-width: 0;
    display: flex;
    align-items: flex-end;   /* ナビを下寄せ (2026-07-25ユーザー指定) */
    align-self: stretch;
    padding-bottom: 6px;
  }
  /* .navi-in は高さ100%を取るため #navi の align-items:flex-end が効かない。
     内側も flex にして ul 自体を下端へ寄せる (2026-07-25) */
  #navi .navi-in {
    width: 100%;
    display: flex;
    align-items: flex-end;
    height: 100%;
  }
  #navi .navi-in > ul {
    justify-content: flex-end;
    margin: 0 0 0 auto;
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  /* Cocoonのli固定幅176pxを解除 (5項目で幅超過→折返し→枠外に消える原因)。
     高さ60px固定も解除する: liが60pxのままだと中のaが上端に貼り付き、
     ul側の align-items:flex-end が見た目に反映されない (罠⑯・2026-07-25) */
  #navi .menu-pc > li { width: auto !important; height: auto !important; }
}
/* サイト説明バー (ヘッダー直下・全ページ。AIサイトであることを明示) */
.specbook-sitedesc {
  background: #182238;
  border-bottom: 1px solid #2a3752;
  color: #c3ccdd;
  text-align: center;
  font-size: 13.5px;
  padding: .5em 1em;
  letter-spacing: .04em;
}
.specbook-sitedesc .ai { color: #f5c063; font-weight: bold; }
.specbook-sitedesc .ai-badge {
  display: inline-block;
  background: #f5a623;
  color: #17120a;
  font-size: .8em;
  font-weight: bold;
  border-radius: 3px;
  padding: .05em .45em;
  margin-right: .45em;
  vertical-align: .08em;
}

/* モバイル: タイトル+AI説明を中央寄せでコンパクトに */
@media (max-width: 834px) {
  #header-in {
    padding: 6px 0 !important;
    display: flex;
    flex-direction: column-reverse; /* DOMはtagline→h1の順なので反転 */
    align-items: center;
  }
  #header .logo-header { font-size: 16px !important; padding: 0 !important; margin: 0 !important; }
  #header .tagline { text-align: center; }
  #header .tagline::after { font-size: 10.5px; }
}

/* ナビ文字 (PC/モバイル共通。2026-07-25に12.5px→14pxへ拡大) */
#navi a, .navi-in a {
  font-size: 14px !important;
  line-height: 2.0 !important;
  height: auto !important;
  padding: 0 .8em !important;
}
/* ヘッダー背景画像はヘッダー全体をカバー表示 */
#header-container, .header-container {
  background-size: cover !important;
  background-position: center !important;
}
/* ヘッダーロゴ画像は最小限サイズで表示 (ナビの縦幅≒32pxに合わせる) */
#header .logo-header img, .logo-image img {
  max-height: 24px !important;
  width: auto !important;
}
/* キャッチフレーズ位置に「AI作品サイト」の説明を表示 (元テキストは非表示・CSS擬似要素で差し替え) */
.tagline, #site-description, .header-site-catchphrase {
  font-size: 0 !important;      /* 元のキャッチフレーズ文字を消す */
  margin: 1px 0 0 !important;
  line-height: 1.3 !important;
}
#header .tagline::before {
  content: "AI";
  display: inline-block;
  background: #f5a623;
  color: #17120a;
  font-size: 10px;
  font-weight: bold;
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 6px;
  vertical-align: 1px;
}
#header .tagline::after {
  content: "AI漫画・AICG集の実購入レビューと実測スペック集";
  font-size: 12px;
  color: #f5b842;
  letter-spacing: .03em;
}
#navi, .navi-in {
  background: transparent; /* ヘッダー背景画像を透過表示 */
}
#navi a, .navi-in a {
  color: #f5b842;
}
#navi a:hover, .navi-in a:hover {
  background: #1b2438;
  color: #ffd76b;
}

/* ---- メイン領域 ---- */
#main, .main {
  background: #161d2e;
  color: #d5dbe8;
}
.article h1, .entry-title, .article-header h1 {
  color: #f0f3fa;
}
.article h2 {
  background: #1e2a44;
  color: #f0f3fa;
  border-left: 4px solid #f5a623;
  border-radius: 2px;
}
.article h3 {
  border-left: 4px solid #4dd0e1;
  border-bottom: 1px solid #2a3752;
  color: #e6ebf5;
}
.entry-content, .article p {
  color: #d5dbe8;
}
.article a, .entry-content a {
  color: #4dd0e1;
}
.article a:hover, .entry-content a:hover {
  color: #7fe3f0;
}

/* ---- 記事一覧カード (トップ/アーカイブ) ---- */
.entry-card-wrap, .a-wrap {
  background: #1b2438 !important;
  border: 1px solid #2a3752 !important;
  color: #d5dbe8 !important;
  border-radius: 4px;
  margin-bottom: 1em;
}
.entry-card-wrap:hover, .a-wrap:hover {
  background: #22304d !important;
  opacity: 1;
}
.entry-card-title, .card-title {
  color: #f0f3fa !important;
  font-weight: 700;
}
.entry-card-snippet, .card-snippet {
  color: #b9c3d6 !important;
}
.entry-card-meta, .entry-card-meta *, .card-meta, .card-meta * {
  color: #8b96ab !important;
}
.entry-card-thumb {
  border: 1px solid #2a3752;
  border-radius: 3px;
  overflow: hidden;
}

/* ページネーション */
.pagination a, .page-numbers {
  background: #1b2438;
  color: #d5dbe8;
  border: 1px solid #2a3752;
}
.pagination .current, .page-numbers.current {
  background: #f5a623;
  color: #0f1420;
}
.pagination-next-link, .pagination-prev-link {
  background: #1b2438 !important;
  color: #d5dbe8 !important;
  border: 1px solid #2a3752 !important;
}
.pagination-next-link:hover, .pagination-prev-link:hover {
  background: #22304d !important;
  color: #f5a623 !important;
}

/* 目次 (Cocoon) */
.toc, .toc-container {
  background: #1b2438;
  border: 1px solid #2a3752;
  color: #d5dbe8;
}
.toc-title {
  color: #f0f3fa;
}
.toc a {
  color: #4dd0e1;
}

/* ---- サイドバー ---- */
.sidebar, #sidebar {
  background: transparent;
  color: #d5dbe8;
}
.sidebar h2, .sidebar h3, .sidebar .wp-block-heading, .sidebar .widget-title {
  background: #1e2a44 !important;
  color: #f0f3fa !important;
  border-left: 4px solid #f5a623;
  padding: .45em .7em;
  font-size: 1em;
  border-radius: 2px;
}
.sidebar a, .sidebar li a, .sidebar .wp-block-latest-posts a, .sidebar .wp-block-categories a, .sidebar .wp-block-archives a {
  color: #4dd0e1 !important;
}
.sidebar, .sidebar li, .sidebar p, .sidebar cite {
  color: #aab6cc;
}
.sidebar .widget {
  background: #161d2e;
  border: 1px solid #2a3752;
  margin-bottom: 1.2em;
}

/* 検索ボックス */
.search-edit, input[type="text"], input[type="search"], textarea {
  background: #0c1019;
  border: 1px solid #2a3752;
  color: #d5dbe8;
}
.search-submit, input[type="submit"] {
  background: #f5a623;
  color: #0f1420;
  border: none;
}

/* ---- フッター ---- */
#footer, .footer {
  background: #0c1019;
  border-top: 1px solid #2a3752;
  color: #8b96ab;
}
#footer a, .footer a {
  color: #8b96ab;
}
#footer a:hover, .footer a:hover {
  color: #f5a623;
}

/* モバイルメニュー(Cocoonモバイルボタン) */
.mobile-menu-buttons {
  background: #0c1019;
  color: #d5dbe8;
  border-top: 1px solid #2a3752;
}
.mobile-menu-buttons a, .mobile-menu-buttons .menu-button {
  color: #d5dbe8;
}

/* モバイルのスライドインパネル(メニュー/検索/サイドバー)をダーク化 */
.menu-content, .navi-menu-content, .sidebar-menu-content, .search-menu-content {
  background: #10182a !important;
  color: #d5dbe8 !important;
}
.menu-content a, .navi-menu-content a, .sidebar-menu-content a {
  color: #d5dbe8 !important;
}
.menu-content li, .navi-menu-content li {
  border-color: #2a3752 !important;
}
.menu-content .menu-close-button, .menu-content .close-button {
  color: #8b96ab !important;
}
/* パネル内のウィジェット見出し・検索ボックスも既存ダークルールを適用させる */
.sidebar-menu-content h2, .sidebar-menu-content h3, .sidebar-menu-content .wp-block-heading {
  background: #1e2a44 !important;
  color: #f0f3fa !important;
  border-left: 4px solid #f5a623;
  padding: .45em .7em;
  font-size: 1em;
}
.sidebar-menu-content input[type="text"], .sidebar-menu-content input[type="search"] {
  background: #0c1019 !important;
  border: 1px solid #2a3752 !important;
  color: #d5dbe8 !important;
}
.sidebar-menu-content .wp-block-tag-cloud a, .sidebar-menu-content .tagcloud a {
  font-size: 11px !important;
  color: #8b96ab !important;
  border: 1px solid #2a3752;
  border-radius: 999px;
  padding: .15em .6em;
  margin: 0 .15em .3em 0;
  display: inline-block;
  background: #121929;
  text-decoration: none;
}

/* ============================================================
   コンポーネント (specbook)
   ============================================================ */

/* バッジ */
.specbook-badges { display: flex; flex-wrap: wrap; gap: .5em; margin: .5em 0 1em; }
.specbook-badges span {
  display: inline-block;
  padding: .25em .7em;
  border: 1px solid #f5a623;
  border-radius: 999px;
  font-size: .82em;
  background: rgba(245, 166, 35, .08);
  color: #f5c063;
  letter-spacing: .03em;
}

/* 自社作品明示 */
.specbook-own-work-notice {
  padding: .8em 1em;
  border-left: 4px solid #f5a623;
  background: rgba(245, 166, 35, .07);
  color: #f5c063;
  margin: 1em 0;
  font-size: .9em;
}

/* ヒーロー画像 */
.specbook-hero { text-align: center; margin: 1em 0; }
.specbook-hero img {
  max-width: 100%;
  height: auto;
  border: 1px solid #2a3752;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}

/* スペック表 = 計器盤の主役
   ※ Cocoonのnth-child白ストライプに勝つため背景は!important */
.specbook-spec, .specbook-score {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: .95em;
  background: #121929 !important;
  border: 1px solid #2a3752;
}
.specbook-spec tr, .specbook-score tr {
  background: transparent !important;
}
.specbook-spec th, .specbook-score th {
  text-align: left;
  padding: .55em .9em;
  background: #1e2a44 !important;
  border: 1px solid #2a3752;
  color: #aab6cc;
  width: 40%;
  white-space: nowrap;
  font-weight: 600;
  font-size: .92em;
  letter-spacing: .02em;
}
.specbook-spec td, .specbook-score td {
  padding: .55em .9em;
  border: 1px solid #2a3752;
  background: #121929 !important;
  color: #e6ebf5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 記事本文中の一般テーブル(Gutenbergテーブル)もダークで統一 */
.entry-content table { background: #121929 !important; border-color: #2a3752; }
.entry-content table tr { background: transparent !important; }
.entry-content table th { background: #1e2a44 !important; color: #aab6cc; border-color: #2a3752; }
.entry-content table td { background: #121929 !important; color: #e6ebf5; border-color: #2a3752; }
/* 数値セルの計器感: 等幅数字 */
.specbook-spec td {
  font-family: "Consolas", "Menlo", "Hiragino Kaku Gothic ProN", monospace, sans-serif;
  font-size: .95em;
}

/* 採点の星 */
.specbook-score .stars {
  font-family: sans-serif;
  letter-spacing: .12em;
  color: #f5a623;
  font-size: 1.15em;
  text-shadow: 0 0 8px rgba(245, 166, 35, .35);
}
.specbook-score .stars-empty {
  color: #5a6478;
  font-style: italic;
  text-shadow: none;
  font-size: .9em;
}
.specbook-score small { color: #8b96ab; }

/* CTA */
.specbook-cta { text-align: center; margin: 2em 0 1em; }
.specbook-cta a {
  display: inline-block;
  padding: .85em 2.4em;
  background: linear-gradient(180deg, #f7b23f, #e89511);
  color: #17120a !important;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  letter-spacing: .05em;
  box-shadow: 0 2px 12px rgba(245, 166, 35, .35);
}
.specbook-cta a:hover {
  background: linear-gradient(180deg, #ffc35a, #f5a623);
  color: #17120a !important;
}

/* 公式サンプルギャラリー */
.specbook-samples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin: 1em 0 .3em;
}
.specbook-samples figure { margin: 0; }
.specbook-samples img {
  width: 100%;
  height: auto;
  border: 1px solid #2a3752;
  border-radius: 4px;
  display: block;
}
.specbook-samples-note { color: #7c8699; margin-top: .2em; }

/* カード内 作品情報行 (サークル/価格/販売数) */
.specbook-card-info {
  display: flex;
  flex-wrap: wrap;
  gap: .4em .9em;
  margin-top: .35em;
  font-size: .82em;
  color: #8b96ab;
}
.specbook-card-info .ci-circle { color: #4dd0e1; }
.specbook-card-info .ci-price  { color: #f5c063; }

/* ---- トップページ (front-page.php) セクション構成 ---- */
.specbook-home { padding: .5em 0; }
.sb-home-sec { margin-bottom: 2.2em; }
.sb-home-title {
  background: #1e2a44;
  color: #f0f3fa;
  border-left: 4px solid #f5a623;
  padding: .5em .8em;
  border-radius: 2px;
  font-size: 1.15em;
  margin-bottom: .8em;
}
.sb-home-title span { font-size: .68em; color: #8b96ab; font-weight: normal; margin-left: .8em; }

/* レビューカード(メイン枠・横型大きめ) */
.sb-review-list { display: flex; flex-direction: column; gap: 12px; }
.sb-review-card {
  display: flex;
  gap: 14px;
  background: #1b2438;
  border: 1px solid #2a3752;
  border-radius: 6px;
  padding: 12px;
  color: #d5dbe8;
  transition: background .15s;
}
.sb-review-card:hover { background: #22304d; }
.sb-review-card .sb-thumb-link { flex-shrink: 0; }
.sb-review-card img {
  width: 220px; height: 156px; object-fit: cover;
  border: 1px solid #2a3752; border-radius: 4px; display: block;
}
.sb-review-card-body { min-width: 0; }
.sb-review-card-body h3 { margin: 0 0 .3em; font-size: 1.05em; }
.sb-review-card-body h3 a { color: #f0f3fa; text-decoration: none; }
.sb-review-card-body h3 a:hover { color: #f5a623; }
.sb-review-score { display: flex; align-items: center; gap: .8em; margin-bottom: .3em; }
.sb-review-score .stars { color: #f5a623; letter-spacing: .1em; text-shadow: 0 0 8px rgba(245,166,35,.35); }
.sb-review-score .c { color: #4dd0e1; font-size: .85em; }
.sb-review-excerpt { font-size: .85em; color: #aab6cc; margin: .4em 0 0; }
.sb-empty { color: #8b96ab; padding: 1em; background: #121929; border: 1px dashed #2a3752; border-radius: 4px; }
.sb-empty a { color: #4dd0e1; }

/* 作品DBタイル(サブ枠・コンパクトグリッド) */
.sb-db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.sb-db-tile {
  background: #1b2438;
  border: 1px solid #2a3752;
  border-radius: 6px;
  overflow: hidden;
  color: #d5dbe8;
  transition: background .15s;
  display: flex;
  flex-direction: column;
}
.sb-db-tile:hover { background: #22304d; }
.sb-db-tile .sb-thumb-link { text-decoration: none; }
.sb-db-tile img { width: 100%; aspect-ratio: 1.41 / 1; object-fit: cover; display: block; }
.sb-db-tile-t {
  font-size: .78em; color: #e6ebf5; padding: .5em .6em .2em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.4; min-height: 2.9em;
}
.sb-db-tile .sb-thumb-link:hover .sb-db-tile-t { color: #f5a623; }
.sb-db-tile-m { display: flex; justify-content: space-between; gap: .5em; padding: 0 .6em .35em; font-size: .72em; }
.sb-db-tile .sb-taglinks { padding: 0 .6em .55em; margin-top: 0; }
.sb-db-tile-m .c { color: #4dd0e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-db-tile-m .p { color: #f5c063; flex-shrink: 0; }

.sb-more { text-align: right; margin: .6em 0 0; }
.sb-more a { color: #4dd0e1; text-decoration: none; font-size: .9em; }
.sb-more a:hover { color: #f5a623; }

@media (max-width: 600px) {
  .sb-review-card { flex-direction: column; }
  .sb-review-card img { width: 100%; height: auto; }
}

/* dbpage未検証notice */
.specbook-dbpage-note {
  padding: .6em 1em;
  background: #121929;
  border-left: 4px solid #5a6478;
  margin: 1em 0;
  font-size: .85em;
  color: #aab6cc;
}
.specbook-dbpage-note a { color: #4dd0e1; }

/* PRフッター */
.specbook-pr-footer {
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px dashed #2a3752;
  color: #7c8699;
  font-size: .8em;
}

/* FANZA公式の作品説明ブロック (引用) */
.specbook-fanza-desc {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  background: #121929;
  border-left: 4px solid #4dd0e1;
  border-radius: 4px;
  color: #c3ccdd;
  font-size: .92em;
  line-height: 1.75;
}
.specbook-fanza-desc-heading, .specbook-fanza-desc > summary {
  font-weight: bold;
  color: #4dd0e1;
  margin: 0 0 .6em;
  cursor: pointer;
  font-size: 1em;
}
.specbook-fanza-desc > summary { list-style: none; }
.specbook-fanza-desc > summary::before {
  content: "▶ "; color: #4dd0e1; font-size: .8em; margin-right: .2em;
}
.specbook-fanza-desc[open] > summary::before { content: "▼ "; }
.specbook-fanza-desc-body { margin: 0; }
.specbook-fanza-desc-src {
  margin: .8em 0 0;
  color: #7c8699;
  font-size: .82em;
  border-top: 1px dashed #2a3752;
  padding-top: .5em;
}

/* ---- Age Gate(年齢認証モーダル)を完全ダーク化 ---- */
#age-gate-wrapper, .age-gate__wrapper, .age-gate__background {
  background: #0f1420 !important;
}
.age-gate {
  background: #161d2e !important;
  border: 1px solid #2a3752;
  border-radius: 10px;
  padding: 2em 2.2em !important;
  max-width: 480px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  color: #d5dbe8 !important;
}
.age-gate__heading-title {
  color: #f5a623 !important;
  letter-spacing: .15em;
  font-size: 1.3em !important;
}
.age-gate h2, .age-gate__heading-text {
  color: #f0f3fa !important;
  font-size: 1.15em !important;
}
.age-gate p, .age-gate__paragraph, .age-gate__question {
  color: #c3ccdd !important;
  font-size: .95em !important;
}
.age-gate__button {
  border-radius: 5px !important;
  font-weight: bold !important;
  padding: .7em 1.2em !important;
  border: 1px solid #2a3752 !important;
  background: #1e2a44 !important;
  color: #aab6cc !important;
  cursor: pointer;
  white-space: nowrap;
}
/* Yes(18歳以上)ボタン: ボタン順は no→yes なので最後のボタンをアンバーに */
.age-gate__button--yes, .age-gate button[value="yes"], .age-gate__submit-yes,
.age-gate__fields button:last-of-type, .age-gate form button:last-of-type {
  background: linear-gradient(180deg, #f7b23f, #e89511) !important;
  color: #17120a !important;
  border-color: #e89511 !important;
}
.age-gate__form { margin-top: 1em; }

/* ---- 目次はレビュー/DBページでは使わない (2026-07-20ユーザー指定) ---- */
.single-review .toc, .single-review .toc-container,
.single-dbpage .toc, .single-dbpage .toc-container { display: none !important; }

/* 採点表: 総合行を強調 */
.specbook-score .specbook-score-total th,
.specbook-score .specbook-score-total td {
  background: #22304d !important;
  border-top: 2px solid #f5a623;
  font-weight: bold;
  color: #f0f3fa;
  font-size: 1.08em;
}
.specbook-score .specbook-score-total .stars { font-size: 1.25em; }

/* サイドバーのタグクラウド: タグ数が多い前提で小さく均一に */
.sidebar .wp-block-tag-cloud a, .sidebar .tagcloud a {
  font-size: 11px !important;
  color: #8b96ab !important;
  border: 1px solid #2a3752;
  border-radius: 999px;
  padding: .15em .6em;
  margin: 0 .15em .3em 0;
  display: inline-block;
  background: #121929;
  text-decoration: none;
  line-height: 1.5;
}
.sidebar .wp-block-tag-cloud a:hover, .sidebar .tagcloud a:hover {
  color: #f5a623 !important;
  border-color: #f5a623;
}

/* 全タグ一覧ページ */
/* ヘッダーのXアイコンはモバイルのみ (PCは視認性が悪くサイドバーカードに変更 2026-07-25)。
   絶対配置=レイアウト不参加。基準=#header-in */
#header-in { position: relative; }
.specbook-x-head { display: none; }
@media (max-width: 834px) {
  .specbook-x-head {
    display: block;
    position: absolute;
    right: 6px;
    bottom: 2px;
    z-index: 60;
    font-size: 13px;
    line-height: 1;
    color: #aab6cc !important;
    text-decoration: none !important;
    padding: 3px;
  }
}

/* Xロゴアイコン (アプリアイコン風: 黒角丸+白X。公式ロゴSVGをdata URIで埋込) */
.x-logo {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  border-radius: 3px;
  background-color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

/* サイドバーのXリンク (ランキング上・1行極小) */
.specbook-x-card {
  text-align: center;
  padding: 0;
  margin-bottom: .2em;
}
.specbook-x-card a {
  display: inline-block;
  color: #aab6cc !important;
  font-size: .82em;
  text-decoration: none !important;
  padding: .15em .6em;
}
.specbook-x-card a:hover { color: #f5b842 !important; }
.specbook-x-card .xg { margin-right: .2em; }

/* フッター最下部クレジット行のXリンク (モバイルのみ表示。PCはサイドバーにあるため) */
.specbook-x-credit { display: none; }
@media (max-width: 834px) {
  .specbook-x-credit { display: inline; margin-left: .8em; }
  .specbook-x-credit a { color: #aab6cc !important; text-decoration: none !important; }
}

/* トップ: メインコンテンツ3柱の導線 (2026-07-25追加) */
.sb-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8em;
  margin: 0 0 1.6em;
}
.sb-pillar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  text-decoration: none !important;
  background: #161d2e;
  border: 1px solid #2a3752;
  border-radius: 6px;
  padding: .45em .6em;   /* コンパクト化 (2026-07-25ユーザー指定: 縦を短く) */
  transition: border-color .15s, background .15s;
  min-width: 0;          /* nowrap説明文がグリッド最小幅を押し広げて本文カラムをはみ出す対策 */
  overflow: hidden;
}
.sb-pillar:hover { border-color: #f5a623; background: #1b2438; }
.sb-pillar .ic { font-size: 1.1em; line-height: 1; }
.sb-pillar .t { color: #f5b842; font-weight: bold; font-size: .98em; white-space: nowrap; line-height: 1.4; }
.sb-pillar .d { color: #8b96ab; font-size: .74em; line-height: 1.3; }  /* 2行折返しOK (ユーザー確認済) */
@media (max-width: 959px) { .sb-pillar .d { display: none; } }
@media (max-width: 559px) {
  .sb-pillars { gap: .5em; margin-bottom: 1.2em; }
  .sb-pillar { padding: .4em .3em; }
  .sb-pillar .t { font-size: .88em; }
}

/* トップ: 市場統計カード */
.sb-stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .7em;
}
.sb-stats-card {
  display: block;
  text-decoration: none !important;
  background: #161d2e;
  border: 1px solid #2a3752;
  border-left: 3px solid #4dd0e1;
  border-radius: 4px;
  padding: .7em .85em;
}
.sb-stats-card:hover { background: #1b2438; }
.sb-stats-card .k {
  display: inline-block; font-size: .72em; color: #17120a;
  background: #4dd0e1; border-radius: 3px; padding: .05em .5em; margin-bottom: .35em;
}
.sb-stats-card .t { display: block; color: #e6ebf5; font-size: .9em; line-height: 1.45; }
.sb-stats-card .d { display: block; margin-top: .3em; color: #7c8699; font-size: .78em; }

/* 市場統計ハブ (/stats/) */
.sb-stats-latest {
  background: #161d2e;
  border: 1px solid #2a3752;
  border-left: 4px solid #f5a623;
  border-radius: 4px;
  padding: 1em 1.2em;
  margin: 1em 0;
}
.sb-stats-latest h3 { margin: 0 0 .5em; font-size: 1.05em; }
.sb-stats-latest p { margin: .4em 0; color: #aab6cc; font-size: .92em; }
.sb-stats-list { list-style: none; padding: 0; margin: .8em 0; }
.sb-stats-list li {
  padding: .55em .2em;
  border-bottom: 1px solid #2a3752;
  display: flex; justify-content: space-between; gap: 1em; align-items: baseline;
}
.sb-stats-list li .d { color: #7c8699; font-size: .82em; white-space: nowrap; }

.specbook-alltags { display: flex; flex-wrap: wrap; gap: .45em; }
.specbook-alltags a {
  font-size: 12px;
  color: #aab6cc !important;
  border: 1px solid #2a3752;
  border-radius: 999px;
  padding: .25em .75em;
  text-decoration: none;
  background: #121929;
  line-height: 1.6;
}
.specbook-alltags a:hover { color: #f5a623 !important; border-color: #f5a623; }
.specbook-alltags .cnt {
  color: #5a6478;
  font-size: 10px;
  margin-left: .45em;
}

/* 一言講評(リード)を太字強調 */
/* 既存記事(旧構成)向け: 本文最初のh2直後の段落もリード扱いにする */
.single-review .entry-content > h2:first-of-type + p,
.specbook-lead, p.specbook-lead {
  font-weight: bold;
  color: #f0f3fa;
  font-size: 1.06em;
  border-left: 4px solid #f5a623;
  background: rgba(245, 166, 35, .06);
  padding: .7em .9em;
  border-radius: 2px;
}

/* 話題作ウィジェット */
.specbook-hot { display: flex; flex-direction: column; gap: 8px; }
.specbook-hot .hot-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  background: #1b2438;
  border: 1px solid #2a3752;
  border-radius: 5px;
  padding: 6px;
  text-decoration: none;
}
.specbook-hot .hot-item:hover { background: #22304d; }
.specbook-hot img {
  grid-row: 1 / 3;
  width: 64px; height: 46px; object-fit: cover;
  border-radius: 3px; border: 1px solid #2a3752;
}
.specbook-hot .hot-t { color: #e6ebf5; font-size: .78em; line-height: 1.3; }
.specbook-hot .hot-v { color: #f5c063; font-size: .72em; }

/* カードのタグ/カテゴリリンク行 */
.sb-taglinks { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .35em; }
.sb-taglinks a {
  font-size: .7em;
  color: #8b96ab !important;
  border: 1px solid #2a3752;
  border-radius: 999px;
  padding: .1em .6em;
  text-decoration: none;
  background: #121929;
}
.sb-taglinks a:hover { color: #f5a623 !important; border-color: #f5a623; }
.sb-taglinks a.cat { color: #4dd0e1 !important; }