/*!
Theme Name: MarketLens
Theme URI: https://example.com/marketlens/
Author: MarketLens
Author URI: https://example.com/
Description: 株式・為替・暗号資産を横断する総合金融メディア向けのSEO最適化WordPressテーマ。等幅数字によるマーケット表示、人気ランキング、執筆者E-E-A-T、運営者情報など、信頼性と検索評価を重視した設計です。配色は白を基調に黒と青で構成しています。
Version: 3.24.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marketlens
Tags: finance, news, magazine, stocks, forex, cryptocurrency, seo-optimized, custom-colors, responsive
*/

/* ==============================================================
   1. デザイントークン
   配色: 白(約80%) / 黒(約10%) / 青(約10%)
   ============================================================== */
:root {
  /* 黒 */
  --ink: #0e1620;
  --ink-2: #46505d;
  --ink-3: #8a93a0;
  /* 白・面 */
  --paper: #ffffff;
  --surface: #f4f6fb;
  --surface-2: #eef1f7;
  --line: #e3e8f0;
  /* 青（アクセント） */
  --blue: #1450e6;
  --blue-ink: #0c3bb0;
  --blue-tint: #eef3ff;
  /* 市況（最小限） */
  --up: #0a8f5b;
  --down: #e0243d;
  /* 資産クラス */
  --stock: #1450e6;
  --forex: #0e8aa6;
  --crypto: #b26a00;

  /* 互換エイリアス（移植コンポーネント用） */
  --color-primary: var(--blue);
  --color-primary-dark: var(--blue-ink);
  --color-primary-soft: var(--blue-tint);
  --color-ink: var(--ink);
  --color-text: #1f2630;
  --color-text-light: var(--ink-2);
  --color-background: var(--paper);
  --color-background-alt: var(--surface);
  --color-border: var(--line);
  --color-positive: var(--up);
  --color-negative: var(--down);
  --color-stock: var(--stock);
  --color-forex: var(--forex);
  --color-crypto: var(--crypto);

  /* タイポ */
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-primary: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: var(--font-display);
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-monospace: var(--font-mono);

  --fs-xs: .75rem;  --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1.0625rem;
  --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.6rem;
  --font-size-xs: var(--fs-xs); --font-size-sm: var(--fs-sm); --font-size-base: var(--fs-base);
  --font-size-md: var(--fs-md); --font-size-lg: var(--fs-lg); --font-size-xl: var(--fs-xl);
  --font-size-2xl: var(--fs-2xl); --font-size-3xl: var(--fs-3xl);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --spacing-xs: var(--space-1); --spacing-sm: var(--space-2); --spacing-md: var(--space-4);
  --spacing-lg: var(--space-5); --spacing-xl: var(--space-6); --spacing-2xl: var(--space-7);

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(14,22,32,.05);
  --shadow-md: 0 6px 20px rgba(14,22,32,.08);
  --shadow-lg: 0 16px 40px rgba(14,22,32,.12);

  --container: 1200px;
  --container-max-width: var(--container);
  --content: 760px;

  --z-sticky: 1020; --z-fixed: 1030; --z-dropdown: 1000; --z-modal: 1050;
}

/* ==============================================================
   2. リセット & ベース
   ============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--color-text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-ink); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); line-height: 1.4; margin: 0 0 .6em; font-weight: 700; letter-spacing: .01em; }
.mono, time, .figure { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.site-content { padding: 36px 0 64px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

/* 共通の見出し意匠：eyebrow（青の細マーカー）＋タイトル */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--blue); text-transform: none; }
.eyebrow::before { content: ""; width: 14px; height: 3px; background: var(--blue); border-radius: 2px; }
.block { margin-bottom: 56px; }
.block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.block__title { font-size: var(--fs-xl); font-weight: 900; margin: 4px 0 0; }
.block__more { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); white-space: nowrap; }
.block__more:hover { color: var(--blue); }

/* ボタン */
.btn, .button, .button-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-primary); font-weight: 700; font-size: var(--fs-sm); padding: 11px 22px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn--primary, .button-primary, .button.button-primary { background: var(--blue); color: #fff; }
.btn--primary:hover, .button-primary:hover { background: var(--blue-ink); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }

/* ==============================================================
   3. ヘッダー / ティッカー / ナビ
   ============================================================== */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--paper); border-bottom: 1px solid var(--line); }

/* マーケットティッカー（黒帯・等幅数字） */
.market-ticker-bar { background: var(--ink); }
.market-ticker { overflow: hidden; }
.market-ticker-inner { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.market-ticker:hover .market-ticker-inner { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 18px; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.1); font-size: var(--fs-xs); }
.ticker-symbol { font-family: var(--font-primary); font-weight: 700; color: #fff; letter-spacing: .02em; }
.ticker-price { font-family: var(--font-mono); color: #cdd6e3; }
.ticker-change { font-family: var(--font-mono); font-weight: 500; }
.ticker-change.positive { color: #4ade80; }
.ticker-change.negative { color: #ff6b7d; }

.site-header__main { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px 0; }
.site-brand { display: flex; flex-direction: column; gap: 2px; }
.site-title { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; margin: 0; letter-spacing: .01em; line-height: 1; }
.site-title a { color: var(--ink); }
.site-title .dot { color: var(--blue); }
.site-tagline { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); letter-spacing: .04em; }
.site-logo img { max-height: 44px; width: auto; }
.header-tools { display: flex; align-items: center; gap: 10px; }
.search-form { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 6px 5px 16px; }
.search-form .search-field { border: 0; background: transparent; outline: none; width: 200px; font-size: var(--fs-sm); font-family: var(--font-primary); color: var(--ink); }
.search-form .search-submit { border: 0; background: var(--blue); color: #fff; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 42px; height: 42px; cursor: pointer; color: var(--ink); }

.site-nav { border-top: 1px solid var(--line); }
.primary-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.primary-nav ul::-webkit-scrollbar { display: none; }
.primary-nav a { display: inline-block; padding: 13px 16px; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); border-bottom: 3px solid transparent; white-space: nowrap; }
.primary-nav a:hover { color: var(--blue); }
.primary-nav .current-menu-item > a, .primary-nav li:hover > a { border-bottom-color: var(--blue); }

/* ==============================================================
   4. レイアウト
   ============================================================== */
.two-column-layout { display: grid; grid-template-columns: minmax(0,1fr) 324px; gap: 48px; align-items: start; }
.site-main { min-width: 0; }

/* ==============================================================
   5. ホーム
   ============================================================== */
/* ヒーロー：左にリード記事、右にマーケット・ラベル */
.lead { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 36px; margin-bottom: 56px; align-items: start; }
.lead__main {}
.lead__main .card__media { aspect-ratio: 16/9; border-radius: var(--radius-md); }
.lead__main .card__title { font-size: var(--fs-2xl); line-height: 1.35; margin-top: 14px; }
.lead__main .card__excerpt { color: var(--ink-2); font-size: var(--fs-base); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* マーケットラベル（署名：等幅数字） */
.market-rail { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.market-rail__head { background: var(--ink); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.market-rail__head .eyebrow { color: #7aa2ff; }
.market-rail__head .eyebrow::before { background: #7aa2ff; }
.market-rail__head time { font-size: var(--fs-xs); color: #9fb0c7; }
.market-rail__list { list-style: none; margin: 0; padding: 4px 16px; }
.market-rail__item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.market-rail__item:last-child { border-bottom: 0; }
.market-rail__name { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.market-rail__price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2); text-align: right; }
.market-rail__chg { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; text-align: right; min-width: 64px; }
.market-rail__chg.positive { color: var(--up); }
.market-rail__chg.negative { color: var(--down); }
.market-rail__foot { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.market-rail__foot a { font-size: var(--fs-sm); font-weight: 700; }

/* カードグリッド */
.card-grid, .featured-posts-grid, .category-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 26px; }
.posts-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 26px; }

/* 記事カード */
.card { display: flex; flex-direction: column; }
.card__media { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.card__cat { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--blue); }
.card__cat::before { content: "▍"; margin-right: 2px; }
.card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.5; margin: 0; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--blue); }
.card__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card__meta .sep { color: var(--line); }
.card__excerpt { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.75; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 横長カード（リスト密度の高い表示） */
.card--row { flex-direction: row; gap: 16px; align-items: flex-start; }
.card--row .card__media { flex: 0 0 168px; aspect-ratio: 4/3; }
.card--row .card__body { padding-top: 0; }

/* ランキング（番号は順序情報＝正当） */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.popular-posts { display: contents; }
.ranking__item, .popular-post-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rank-num, .post-rank .rank-number { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: var(--ink-3); display: grid; place-items: center; width: 30px; height: 30px; }
.ranking__item:nth-child(-n+3) .rank-num, .popular-post-item:nth-child(-n+3) .post-rank .rank-number { color: #fff; background: var(--blue); border-radius: 7px; }
.popular-post-item:nth-child(2) .post-rank .rank-number { background: #3f73ec; }
.popular-post-item:nth-child(3) .post-rank .rank-number { background: #6f95f1; }
.popular-post-thumbnail { display: none; }
.popular-post-title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; margin: 0; }
.popular-post-title a { color: var(--ink); }
.popular-post-title a:hover { color: var(--blue); }
.popular-post-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: 10px; margin-top: 3px; }
.home-ranking .popular-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }

/* 資産クラス・セクションの色アクセント */
.block--stock .block__head { border-bottom-color: var(--stock); }
.block--forex .block__head { border-bottom-color: var(--forex); }
.block--crypto .block__head { border-bottom-color: var(--crypto); }
.block--stock .eyebrow, .block--stock .eyebrow::before { color: var(--stock); background-color: var(--stock); }
.block--forex .eyebrow, .block--forex .eyebrow::before { color: var(--forex); background-color: var(--forex); }
.block--crypto .eyebrow, .block--crypto .eyebrow::before { color: var(--crypto); background-color: var(--crypto); }
.block--stock .eyebrow, .block--forex .eyebrow, .block--crypto .eyebrow { background: none; }

/* ==============================================================
   6. パンくず
   ============================================================== */
.breadcrumbs { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 20px; }
.breadcrumbs ol, .breadcrumbs ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li::after { content: "/"; margin-left: 8px; color: var(--line); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--ink-3); }
.breadcrumbs a:hover { color: var(--blue); }

/* ==============================================================
   7. 単一記事
   ============================================================== */
.entry-header { margin-bottom: 24px; }
.entry-cat { margin-bottom: 12px; }
.entry-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.4; margin: 0 0 18px; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.entry-meta .author-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-weight: 700; color: var(--ink); }
.entry-meta .author-chip img { width: 26px; height: 26px; border-radius: 50%; }
.entry-meta svg { vertical-align: -2px; }
.entry-meta .posted-on, .entry-meta .reading-time, .entry-meta .post-views { display: inline-flex; align-items: center; gap: 5px; }
.single .post-thumbnail { margin: 26px 0; border-radius: var(--radius-md); overflow: hidden; }

.entry-content { font-size: var(--fs-md); line-height: 2; color: #1f2630; }
.entry-content > * { margin: 0 0 1.6em; }
.entry-content h2 { font-size: 1.5rem; font-weight: 900; margin: 2em 0 .8em; padding: 6px 0 6px 16px; border-left: 5px solid var(--blue); }
.entry-content h3 { font-size: 1.22rem; font-weight: 700; margin: 1.8em 0 .6em; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.entry-content h4 { font-size: 1.08rem; }
.entry-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ink); color: var(--ink-2); font-style: normal; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content code { font-family: var(--font-mono); background: var(--surface); padding: 2px 6px; border-radius: 4px; font-size: .85em; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 12px; }
.entry-content th { background: var(--surface); font-family: var(--font-display); }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; text-align: center; }

/* 目次 */
.table-of-contents { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 22px; margin: 0 0 28px; }
.toc-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 900; margin: 0 0 10px; }
.toc-content ul { margin: 0; padding-left: 1.3em; }
.toc-content > ul { list-style: decimal; }
.toc-content ul ul { list-style: lower-roman; margin-top: 4px; }
.toc-content li { margin: 5px 0; line-height: 1.6; }
.toc-content a { color: var(--ink-2); }
.toc-content a:hover, .toc-content a.active { color: var(--blue); font-weight: 700; }

/* シェア */
.social-share { margin: 36px 0; }
.social-share h3 { font-size: 1.05rem; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.share-button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; color: #fff; border: 0; cursor: pointer; }
.share-twitter { background: #000; } .share-facebook { background: #1877f2; } .share-linkedin { background: #0a66c2; } .share-copy { background: var(--ink); }
.share-button:hover { opacity: .9; color: #fff; }

/* 執筆者ボックス（E-E-A-T） */
.author-box { margin: 40px 0; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.author-box-header { display: flex; gap: 18px; align-items: center; }
.author-avatar img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.author-name { font-size: 1.15rem; margin: 0; }
.author-name a { color: var(--ink); }
.author-credentials { margin: 5px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
.author-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.author-description { margin: 16px 0 0; font-size: var(--fs-sm); line-height: 1.85; }
.author-social { display: flex; gap: 10px; margin-top: 14px; }
.author-social .social-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.author-social .social-link:hover { color: var(--blue); border-color: var(--blue); }
.author-recent-posts { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.author-recent-posts h4 { font-size: var(--fs-sm); margin: 0 0 10px; }
.author-recent-posts ul { list-style: none; margin: 0; padding: 0; }
.author-recent-posts li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: var(--fs-sm); }
.author-recent-posts .post-date { font-family: var(--font-mono); color: var(--ink-3); white-space: nowrap; }

/* 前後ナビ・関連 */
.post-navigation { margin: 36px 0; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.post-navigation a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.post-navigation a:hover { border-color: var(--blue); }
.post-navigation .nav-next { text-align: right; }
.post-navigation .nav-subtitle { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.post-navigation .nav-title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.related-posts { margin: 44px 0; }

/* ==============================================================
   8. サイドバー
   ============================================================== */
.widget-area .widget { margin-bottom: 30px; }
.widget-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 900; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.widget-newsletter { background: var(--ink); color: #fff; padding: 22px; border-radius: var(--radius-md); }
.widget-newsletter .widget-title { color: #fff; border-bottom-color: rgba(255,255,255,.18); }
.widget-newsletter p { font-size: var(--fs-sm); color: #c3ccd9; }
.widget-newsletter .newsletter-form { display: flex; gap: 8px; margin-top: 10px; }
.widget-newsletter input { flex: 1; border: 0; border-radius: var(--radius-pill); padding: 10px 14px; font-size: var(--fs-sm); }
.widget-newsletter .button-primary { background: var(--blue); }
.recent-posts-list, .widget-categories ul, .widget-archives ul { list-style: none; margin: 0; padding: 0; }
.recent-post-item a { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.recent-post-item .post-title { font-family: var(--font-display); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; }
.recent-post-item .post-date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.widget-categories li, .widget-archives li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.tagcloud, .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a, .tag-cloud-item { font-size: var(--fs-xs) !important; color: var(--ink-2); background: var(--surface); padding: 6px 12px; border-radius: var(--radius-pill); }
.tagcloud a:hover { background: var(--blue-tint); color: var(--blue); }
.ad-placeholder { display: grid; place-items: center; min-height: 250px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink-3); font-size: var(--fs-sm); }

/* ==============================================================
   9. アーカイブ・検索・404
   ============================================================== */
.page-header { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.page-title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xl); margin: 4px 0 6px; }
.page-description { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }
.pagination { margin-top: 40px; }
.pagination .nav-links, .posts-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-numbers { font-family: var(--font-mono); display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-weight: 700; }
.page-numbers.current { background: var(--blue); color: #fff; border-color: var(--blue); }
.page-numbers:hover:not(.current) { border-color: var(--blue); color: var(--blue); }
.no-results { padding: 40px; text-align: center; background: var(--surface); border-radius: var(--radius-md); }

/* ==============================================================
   10. フッター
   ============================================================== */
.site-footer { background: var(--ink); color: #b6c0cd; }
.site-footer a { color: #b6c0cd; }
.site-footer a:hover { color: #fff; }
.footer-widgets { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 36px; padding: 52px 0 24px; }
.footer-widget h3 { color: #fff; font-size: 1.05rem; margin: 0 0 16px; }
.footer-widget p { font-size: var(--fs-sm); line-height: 1.85; color: #93a0af; }
.footer-menu, .footer-legal-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin-bottom: 9px; font-size: var(--fs-sm); }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social .social-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.07); color: #fff; }
.footer-social .social-link:hover { background: var(--blue); }
.footer-widget .newsletter-form { display: flex; gap: 8px; margin-top: 12px; }
.footer-widget .newsletter-form input { flex: 1; border: 0; border-radius: var(--radius-pill); padding: 10px 14px; font-size: var(--fs-sm); }
.footer-widget .newsletter-form button { background: var(--blue); color: #fff; border: 0; border-radius: var(--radius-pill); padding: 10px 18px; font-weight: 700; cursor: pointer; }
.footer-trust { display: grid; grid-template-columns: 1fr 1.5fr; gap: 36px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.12); }
.footer-trust h4 { color: #fff; font-size: var(--fs-sm); margin: 0 0 12px; letter-spacing: .04em; }
.operator-meta { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 0; font-size: var(--fs-xs); }
.operator-meta dt { color: #7e8b9a; white-space: nowrap; }
.operator-meta dd { margin: 0; color: #c6cfdb; }
.footer-disclaimer p { font-size: var(--fs-xs); line-height: 1.9; color: #8d99a8; margin: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; }
.footer-bottom .site-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.footer-bottom .site-info p { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: #8d99a8; }
.footer-legal-menu { display: flex; flex-wrap: wrap; gap: 18px; font-size: var(--fs-xs); }

/* トップへ戻る */
.back-to-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: var(--z-fixed); }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--blue); transform: translateY(-2px); }

/* ==============================================================
   11. マーケット系ページモジュール
   ============================================================== */
.market-tabs { display: flex; gap: 6px; margin: 24px 0; border-bottom: 2px solid var(--line); }
.market-tab { background: none; border: 0; cursor: pointer; padding: 12px 18px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.market-tab:hover { color: var(--ink); }
.market-tab.is-active { color: var(--tab-color, var(--blue)); border-bottom-color: var(--tab-color, var(--blue)); }
.market-panel { display: none; } .market-panel.is-active { display: block; }
.market-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.summary-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.summary-label { font-size: var(--fs-xs); color: var(--ink-2); }
.summary-value { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; color: var(--ink); }
.summary-change { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); }
.summary-change.positive { color: var(--up); } .summary-change.negative { color: var(--down); }
.market-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.market-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.market-table th, .market-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.market-table thead th { font-size: var(--fs-xs); color: var(--ink-2); background: var(--surface); font-family: var(--font-display); }
.market-table .num { text-align: right; font-family: var(--font-mono); }
.market-table tbody tr:hover { background: var(--surface); }
.market-table .sym-code { display: block; font-weight: 700; font-family: var(--font-display); }
.market-table .sym-name { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.market-table .change.positive { color: var(--up); } .market-table .change.negative { color: var(--down); }
.market-disclaimer { margin-top: 24px; font-size: var(--fs-xs); color: var(--ink-3); }
.heatmap-section { margin-bottom: 40px; }
.heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 8px; }
.heat-cell { border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 3px; color: #0d2a1c; min-height: 92px; }
.heat-cell.negative { color: #3a0f14; }
.heat-symbol { font-family: var(--font-display); font-weight: 700; }
.heat-change { font-family: var(--font-mono); font-weight: 700; }
.heat-name { font-size: var(--fs-xs); opacity: .85; }
.instrument-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 18px 0; border-bottom: 3px solid var(--asset-color, var(--blue)); margin-bottom: 20px; }
.instrument-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--asset-color, var(--blue)); padding: 3px 10px; border-radius: 4px; }
.instrument-name { font-size: var(--fs-2xl); margin: 6px 0 0; }
.instrument-symbol { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ink-3); margin-left: 8px; }
.instrument-price { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: 700; }
.instrument-change { font-family: var(--font-mono); margin-left: 12px; font-size: var(--fs-lg); }
.instrument-change.positive { color: var(--up); } .instrument-change.negative { color: var(--down); }
.chart-canvas-wrap { position: relative; height: 360px; margin: 16px 0 28px; }
.chart-timeframe { display: flex; gap: 6px; margin-bottom: 12px; }
.timeframe-btn { font-family: var(--font-mono); border: 1px solid var(--line); background: var(--paper); padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; font-size: var(--fs-xs); }
.timeframe-btn.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }
.coin-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stat-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; }
.stat-label { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.stat-data { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); }
canvas.sparkline { display: block; }

/* コラム */
.column-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.column-card.column-lead { grid-column: 1/-1; }
.column-asset { font-size: var(--fs-xs); font-weight: 700; color: var(--blue); }
.column-title { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.5; }
.column-title a { color: var(--ink); }
.column-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: 12px; }

/* 用語集 */
.glossary-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.glossary-filter-btn { padding: 7px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--ink); }
.glossary-filter-btn.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }
.glossary-list { margin: 0; }
.glossary-entry { padding: 16px 0; border-bottom: 1px solid var(--line); }
.glossary-term { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; margin: 0 0 5px; display: flex; align-items: center; gap: 10px; }
.glossary-term a { color: var(--ink); }
.glossary-asset { font-size: var(--fs-xs); color: var(--ink-2); border: 1px solid var(--line); padding: 2px 9px; border-radius: 4px; }
.glossary-def { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* ==============================================================
   12. レスポンシブ
   ============================================================== */
@media (max-width: 1024px) {
  .two-column-layout { grid-template-columns: 1fr; }
  .lead { grid-template-columns: 1fr; }
  .card-grid, .featured-posts-grid, .category-posts-grid { grid-template-columns: repeat(2,1fr); }
  .footer-widgets { grid-template-columns: 1fr 1fr; }
  .footer-trust { grid-template-columns: 1fr; gap: 20px; }
  .coin-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
  .container { padding: 0 16px; }
  .card-grid, .featured-posts-grid, .category-posts-grid, .posts-list,
  .ranking, .home-ranking .popular-posts, .column-grid, .market-summary { grid-template-columns: 1fr; }
  .site-header__main { padding: 14px 0; }
  .search-form { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  .primary-nav ul { gap: 0; }
  .footer-widgets { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom .site-info { flex-direction: column; align-items: flex-start; }
  .post-navigation .nav-links { grid-template-columns: 1fr; }
  .entry-content { font-size: var(--fs-base); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==============================================================
   13. 引用記事（外部メディア・ニュース引用）
   ============================================================== */
.source-citation { margin: 0 0 20px; padding: 0; }
.source-quote { margin: 0; padding: 16px 20px; background: var(--surface); border-left: 4px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.source-quote p { margin: 0; font-size: var(--fs-base); color: var(--ink); line-height: 1.9; }
.source-attribution { margin-top: 10px; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.source-attribution a { font-weight: 700; }
.source-date { color: var(--ink-3); }
.source-readmore { margin: 18px 0 24px; }
.source-readmore .btn { text-decoration: none; }
.editor-note { margin: 24px 0; padding: 16px 18px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: var(--blue-tint); }
.editor-note p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.body .editor-note { display: block; }

/* ==============================================================
   14. 引用ニュース（market_news）と収益化UI
   ============================================================== */
/* 資産タグ・出典バッジ */
.asset-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: 4px; color: #fff; background: var(--ink-3); }
.asset-tag--stock { background: var(--stock); }
.asset-tag--forex { background: var(--forex); }
.asset-tag--crypto { background: var(--crypto); }
.news-source { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.news-time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.news-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 4px 9px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); }

/* ニュース一覧 */
.news-list { display: flex; flex-direction: column; }
.news-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 36px; }
.news-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.news-row__media { flex: 0 0 84px; }
.news-row__media img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.news-row__body { min-width: 0; flex: 1; }
.news-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.news-row__title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; line-height: 1.55; margin: 0; }
.news-row__title a { color: var(--ink); }
.news-row__title a:hover { color: var(--blue); }

/* 資産フィルター */
.asset-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.asset-filter__btn { padding: 7px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.asset-filter__btn.is-active, .asset-filter__btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* 引用ニュース単一 */
.news-single__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.related-news { margin-top: 44px; }

/* 広告スロット */
.ad-slot { margin: 24px 0; text-align: center; }
.ad-slot__label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.ad-slot__body { display: flex; justify-content: center; }
.ad-slot--header { margin: 0 0 28px; }
.ad-slot--sidebar { margin: 0; }
.widget-ad { margin-bottom: 30px; }

/* アフィリエイト・広告表記 */
.affiliate-disclosure { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 20px; }
.pr-label { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: .08em; color: #fff; background: var(--ink-3); padding: 2px 7px; border-radius: 3px; }

@media (max-width: 680px) {
  .news-list--grid { grid-template-columns: 1fr; gap: 0; }
}

/* ==============================================================
   15. 銘柄・通貨ページ（instrument）
   ============================================================== */
/* 価格ヒーロー */
.instrument-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 24px; padding: 24px; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius-lg); margin-bottom: 14px; }
.instrument-hero--crypto { border-top-color: var(--crypto); }
.instrument-hero--forex { border-top-color: var(--forex); }
.instrument-hero--stock { border-top-color: var(--stock); }
.instrument-hero__id { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.instrument-name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 900; margin: 0; }
.instrument-symbol { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ink-3); margin-left: 8px; }
.instrument-quote { display: flex; flex-direction: column; gap: 2px; }
.instrument-price { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: 700; color: var(--ink); line-height: 1.1; }
.instrument-change { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); }
.instrument-change.positive { color: var(--up); }
.instrument-change.negative { color: var(--down); }
.instrument-source { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.instrument-cta { align-self: center; white-space: nowrap; }
.instrument-cta__pr { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); align-self: center; }
.price-disclaimer { font-size: var(--fs-xs); color: var(--ink-3); margin: 0 0 22px; }
.instrument-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.instrument-chart-wrap { position: relative; height: 320px; margin-bottom: 28px; }
.instrument-desc { margin: 8px 0 32px; }

/* ホーム：主要銘柄ボード */
.instrument-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.instrument-chip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.instrument-chip:hover { border-color: var(--blue); }
.instrument-chip__sym { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.instrument-chip__name { font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-3); }
.asset-dot--stock { background: var(--stock); }
.asset-dot--forex { background: var(--forex); }
.asset-dot--crypto { background: var(--crypto); }

@media (max-width: 680px) {
  .instrument-hero { grid-template-columns: 1fr; }
  .instrument-board { grid-template-columns: 1fr; }
  .instrument-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==============================================================
   16. 暗号資産チャート一覧（CoinMarketCap風）
   ============================================================== */
.crypto-table .col-asset { min-width: 200px; }
.crypto-table .crypto-name { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.crypto-table .sym-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.crypto-table .sym-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.crypto-table .sym-code { font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-mono); }
.crypto-table .price { font-weight: 700; color: var(--ink); }
.crypto-table .change.positive { color: var(--up); font-weight: 700; white-space: nowrap; }
.crypto-table .change.negative { color: var(--down); font-weight: 700; white-space: nowrap; }
.crypto-table .change.neutral { color: var(--ink-3); white-space: nowrap; }
.crypto-table .col-hl { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.crypto-table a.crypto-name:hover .sym-name { color: var(--accent); }
.market-overview .market-summary { margin-bottom: 20px; }

/* ==============================================================
   17. 騰落率ランキング（内部リンク）
   ============================================================== */
.movers-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.movers-title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 900; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.movers-list { list-style: none; margin: 0; padding: 0; counter-reset: mv; }
.movers-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.movers-item a { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.movers-item a::before { counter-increment: mv; content: counter(mv); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); width: 16px; flex: 0 0 auto; }
.movers-sym { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.movers-name { font-size: var(--fs-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movers-pct { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.movers-pct.positive { color: var(--up); }
.movers-pct.negative { color: var(--down); }
@media (max-width: 680px) { .movers-cols { grid-template-columns: 1fr; gap: 18px; } }

/* ==============================================================
   18. トップ：相場サマリーボード & 騰落ランキングボード
   ============================================================== */
.market-board-section { margin-bottom: 44px; }
.index-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.index-cell { display: flex; flex-direction: column; gap: 3px; padding: 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
a.index-cell:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.index-label { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index-value { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.index-chg { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
.index-chg.positive { color: var(--up); } .index-chg.negative { color: var(--down); } .index-chg.neutral { color: var(--ink-3); }

.rank-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rank-col { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.rank-col__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.rank-col__head a { font-size: var(--fs-xs); font-weight: 700; }
.rank-rows { list-style: none; margin: 0; padding: 4px 14px; counter-reset: rk; }
.rank-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-link { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rank-link::before { counter-increment: rk; content: counter(rk); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); width: 14px; flex: 0 0 auto; }
.rank-sym { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.rank-name { font-size: var(--fs-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-px { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); text-align: right; }
.rank-pct { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; text-align: right; min-width: 58px; }
.rank-pct.positive { color: var(--up); } .rank-pct.negative { color: var(--down); } .rank-pct.neutral { color: var(--ink-3); }

@media (max-width: 1024px) {
  .index-board { grid-template-columns: repeat(4, 1fr); }
  .rank-board { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .index-board { grid-template-columns: repeat(2, 1fr); }
}

/* ==============================================================
   19. アセットハブ（株式/為替/暗号資産）の銘柄ボード
   ============================================================== */
.rank-board--two { grid-template-columns: 1fr 1fr; }
.quote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.quote-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "sym pct" "name px"; gap: 2px 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.quote-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.quote-sym { grid-area: sym; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.quote-name { grid-area: name; font-size: var(--fs-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-px { grid-area: px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); align-self: end; }
.quote-pct { grid-area: pct; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; text-align: right; }
.quote-pct.positive { color: var(--up); } .quote-pct.negative { color: var(--down); } .quote-pct.neutral { color: var(--ink-3); }
@media (max-width: 1024px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } .rank-board--two { grid-template-columns: 1fr; } }

/* ==============================================================
   20. 取引所比較・アビトラ・取引所カード（暗号資産）
   ============================================================== */
.rank-board--three { grid-template-columns: repeat(3, 1fr); }
.arb-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius-md); background: linear-gradient(90deg, rgba(20,80,230,.08), rgba(20,80,230,0)); border: 1px solid var(--line); }
.arb-label { font-size: var(--fs-xs); color: var(--ink-2); }
.arb-spread { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; color: var(--up); }
.arb-detail { font-size: var(--fs-xs); color: var(--ink-2); }
.compare-table .x-cta { white-space: nowrap; }
.x-cta { display: inline-block; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--crypto, #b26a00); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.x-cta:hover { opacity: .85; color: #fff; }
.x-cta--block { display: block; text-align: center; padding: 10px; }
.exchange-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.exchange-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.exchange-name { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-md); }
.exchange-blurb { font-size: var(--fs-sm); color: var(--ink-2); flex: 1; margin: 0; }
.exchange-note { font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 1024px) { .rank-board--three, .exchange-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .exchange-grid { grid-template-columns: 1fr; } }

/* ==============================================================
   21. 銘柄アイコン（CoinMarketCap）＋頭文字フォールバック
   ============================================================== */
.coin-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--ink-2); font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1; flex: 0 0 auto; overflow: hidden; position: relative; }
.coin-badge::before { content: attr(data-letter); position: absolute; }
.coin-badge .coin-icon { width: 26px; height: 26px; border-radius: 50%; position: relative; z-index: 1; background: var(--paper); }
/* ランキング行内のアイコン */
.rank-link .coin-badge { width: 22px; height: 22px; font-size: 10px; margin-right: 2px; }
.rank-link .coin-badge .coin-icon { width: 22px; height: 22px; }

/* ==============================================================
   22. 銘柄チャートページ（株・為替・暗号資産 共通 / BitTrade Blog風）
   ============================================================== */
.chart-page .two-column-layout { align-items: start; }
/* ヒーロー（価格） */
.chart-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.chart-hero__left { display: flex; align-items: center; gap: 14px; }
.chart-hero__coin .coin-badge { width: 44px; height: 44px; font-size: 18px; }
.chart-hero__coin .coin-badge .coin-icon { width: 44px; height: 44px; }
.chart-hero__title { font-size: var(--fs-xl); margin: 4px 0 2px; font-family: var(--font-display); }
.chart-hero__sub { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-sm); margin: 0; }
.chart-hero__price-wrap { text-align: right; }
.chart-hero__price { font-size: var(--fs-2xl); font-weight: 700; font-family: var(--font-mono); line-height: 1.1; }
.chart-hero__change { font-weight: 700; font-family: var(--font-mono); margin-top: 2px; }
.chart-hero__change.positive { color: var(--up); } .chart-hero__change.negative { color: var(--down); } .chart-hero__change.neutral { color: var(--ink-3); }
.chart-hero__range { color: var(--ink-3); font-size: var(--fs-xs); font-family: var(--font-mono); margin-top: 4px; }
/* チャートカード */
.chart-main-card { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.chart-periods { display: flex; gap: 8px; margin-bottom: 12px; }
.chart-period { padding: 6px 14px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; cursor: pointer; font-size: var(--fs-xs); font-family: var(--font-display); color: var(--ink-2); }
.chart-period:hover { border-color: var(--accent); color: var(--accent); }
.chart-period.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.instrument-chart-wrap { position: relative; width: 100%; }
/* 前日比・高値・安値 */
.chart-rate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.chart-rate-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.chart-rate-card__label { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 6px; }
.chart-rate-card__value { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-mono); }
.chart-rate-card__value small { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }
.chart-rate-card__value.positive { color: var(--up); } .chart-rate-card__value.negative { color: var(--down); } .chart-rate-card__value.neutral { color: var(--ink); }
/* FAQ */
.chart-faq__item { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; }
.chart-faq__question { cursor: pointer; padding: 14px 16px; font-weight: 700; font-family: var(--font-display); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.chart-faq__question::-webkit-details-marker { display: none; }
.chart-faq__question::after { content: '＋'; color: var(--ink-3); margin-left: 12px; }
details[open] .chart-faq__question::after { content: '−'; }
.chart-faq__answer { padding: 0 16px 14px; color: var(--ink-2); line-height: 1.8; }
/* チャート・価格一覧（チップグリッド） */
.chart-coins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.chart-coin-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); background: var(--paper); }
.chart-coin-chip:hover { border-color: var(--accent); }
.chart-coin-chip.is-active { border-color: var(--accent); background: var(--surface); }
.chart-coin-chip .coin-badge { width: 24px; height: 24px; font-size: 11px; flex: 0 0 auto; }
.chart-coin-chip .coin-badge .coin-icon { width: 24px; height: 24px; }
.chart-coin-chip__name { font-size: var(--fs-xs); font-weight: 700; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-coin-chip__price { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-2); }
.chart-coin-chip__chg { font-size: 10px; font-family: var(--font-mono); }
.chart-coin-chip__chg.positive { color: var(--up); } .chart-coin-chip__chg.negative { color: var(--down); }
/* 騰落率ランキング内のアイコン */
.movers-item .coin-badge { width: 20px; height: 20px; font-size: 10px; margin-right: 6px; vertical-align: middle; }
.movers-item .coin-badge .coin-icon { width: 20px; height: 20px; }
@media (max-width: 600px){ .chart-rate-grid { grid-template-columns: 1fr; } .chart-hero { flex-direction: column; align-items: flex-start; } .chart-hero__price-wrap { text-align: left; } }

/* ==============================================================
   23. アービトラージランキングページ
   ============================================================== */
.arb-table .col-rank { width: 44px; color: var(--ink-3); font-family: var(--font-mono); text-align: center; }
.arb-table .col-asset { min-width: 190px; }
.arb-table .arb-ex { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.arb-table .arb-px { display: block; font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.arb-table .arb-diff { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.arb-table .arb-diff small { display: block; font-size: var(--fs-xs); font-weight: 500; }
.arb-table .arb-diff.positive { color: var(--up); }
.arb-table .arb-diff.negative { color: var(--down); }
.arb-table .arb-diff.neutral { color: var(--ink-3); }
.arb-spread-big { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 700; color: var(--up); }
/* 銘柄タブ */
.arb-coin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.arb-coin-tab { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-xs); font-family: var(--font-display); color: var(--ink-2); text-decoration: none; }
.arb-coin-tab:hover { border-color: var(--accent); color: var(--accent); }
.arb-coin-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ==============================================================
   24. ツール（計算機・シミュレーター・比較・取扱取引所）
   ============================================================== */
/* 共通：入力フォーム */
.arb-calc, .dca { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin-top: 16px; background: var(--paper); }
.arb-calc__title { font-size: var(--fs-md); margin: 0 0 12px; font-family: var(--font-display); }
.arb-calc__inputs, .dca__inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.arb-calc__inputs label, .dca__inputs label { display: flex; flex-direction: column; font-size: var(--fs-xs); color: var(--ink-2); gap: 4px; }
.arb-calc__inputs input, .dca__inputs input { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-sm); }
.arb-calc__inputs input:focus, .dca__inputs input:focus { outline: none; border-color: var(--accent); }
.arb-calc__out { margin-top: 14px; border-top: 1px solid var(--line); }
.arb-calc__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-family: var(--font-mono); }
.arb-calc__row span { color: var(--ink-2); font-family: var(--font-display); font-size: var(--fs-sm); }
.arb-calc__row b { font-weight: 700; }
.arb-calc__row--net { font-size: var(--fs-lg); border-bottom: none; }
.arb-calc__row--net b.pos, #dca-gain.pos { color: var(--up); }
.arb-calc__row--net b.neg, #dca-gain.neg { color: var(--down); }
.arb-calc__note, .dca__note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 10px; }
/* DCA */
.dca__summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.dca__card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface); }
.dca__card span { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 4px; }
.dca__card b { font-size: var(--fs-lg); font-family: var(--font-mono); font-weight: 700; }
.dca__card--main { background: linear-gradient(90deg, rgba(20,80,230,.10), rgba(20,80,230,0)); border-color: var(--accent); }
.dca__chartwrap { width: 100%; }
/* 取引所比較表 */
.compare-grid .col-feature { min-width: 220px; color: var(--ink-2); font-size: var(--fs-sm); }
.compare-grid .sym-code { font-weight: 700; font-family: var(--font-display); }
/* 取扱取引所（銘柄ページ） */
.coin-exchange-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.coin-exchange-item { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.coin-exchange-name { font-weight: 700; font-family: var(--font-display); }
.coin-exchange-blurb { font-size: var(--fs-xs); color: var(--ink-3); flex: 1 1 auto; }
.coin-exchange-item .x-cta { align-self: flex-start; }
/* ツール間リンク */
.tool-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.tool-link { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }
.tool-link:hover { background: var(--surface); border-color: var(--accent); }
@media (max-width: 600px){ .dca__summary { grid-template-columns: repeat(2, 1fr); } }

/* ==============================================================
   25. 両替・クロスレート計算機／ツール一覧
   ============================================================== */
.conv { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin: 16px 0; background: var(--paper); }
.conv__row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.conv__field { flex: 1 1 240px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.conv__field label { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-2); }
.conv__field input { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-md); min-width: 0; }
.conv__field input[readonly] { background: var(--surface); font-weight: 700; }
.conv__field select { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--paper); }
.conv__field input:focus, .conv__field select:focus { outline: none; border-color: var(--accent); }
.conv__swap { flex: 0 0 auto; align-self: center; margin-top: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 18px; color: var(--accent); }
.conv__swap:hover { border-color: var(--accent); }
.conv__rate { margin: 12px 0 0; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-sm); }
@media (max-width: 560px){ .conv__row { flex-direction: column; align-items: stretch; } .conv__swap { transform: rotate(90deg); align-self: center; } }
/* ツール一覧 */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 18px 0; }
.tool-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); background: var(--paper); transition: border-color .15s, transform .15s; }
.tool-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tool-card__title { font-size: var(--fs-md); margin: 2px 0; font-family: var(--font-display); }
.tool-card__desc { font-size: var(--fs-sm); color: var(--ink-2); flex: 1 1 auto; line-height: 1.7; }
.tool-card__cta { color: var(--accent); font-weight: 700; font-size: var(--fs-sm); font-family: var(--font-display); }

/* ==============================================================
   26. 証券会社・FX会社・取引所 比較（ロゴ／表／カード）
   ============================================================== */
/* ブランドロゴ（公式ロゴ画像＋社名ワードマークのフォールバック） */
.broker-logo { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; vertical-align: middle; }
.broker-logo__icon { width: 24px; height: 24px; object-fit: contain; border-radius: 5px; flex: 0 0 auto; }
.broker-logo__text { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--bc, var(--accent)); white-space: nowrap; }
.broker-cell { min-width: 150px; }
/* 比較テーブル */
.broker-table th, .broker-table td { vertical-align: middle; }
.broker-table .num { white-space: nowrap; }
/* 比較カード */
.broker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.broker-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.broker-card__logo { display: flex; }
.broker-card__feature { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; flex: 1 1 auto; margin: 0; }
.broker-card__spec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.broker-card__spec li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-xs); }
.broker-card__spec li span { color: var(--ink-3); }
.broker-card__spec li b { font-weight: 700; text-align: right; }
.broker-card .x-cta--block { margin-top: 4px; }

/* ==============================================================
   27. データ更新時刻／銘柄概要
   ============================================================== */
.data-updated { font-size: var(--fs-xs); color: var(--ink-3); margin: 8px 0 0; font-family: var(--font-mono); }
.chart-hero__updated { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; font-family: var(--font-mono); }
.instrument-intro .entry-content p { margin: 0 0 10px; line-height: 1.9; color: var(--ink-2); }
.instrument-intro .entry-content p:last-child { margin-bottom: 0; }

/* ==============================================================
   28. フッター関連リンク（SEO・提携サイト／BitTradeチャート）
   ============================================================== */
.footer-partners { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; }
.footer-partners__inner { display: grid; gap: 18px; }
.footer-partners__group { min-width: 0; }
.footer-partners__title { font-size: var(--fs-sm); font-weight: 700; margin: 0 0 10px; color: rgba(255,255,255,.92); font-family: var(--font-display); }
.partner-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.partner-links a { color: rgba(255,255,255,.66); font-size: var(--fs-xs); text-decoration: none; }
.partner-links a:hover { color: #fff; text-decoration: underline; }
.partner-links--cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 18px; }
@media (max-width: 600px){ .partner-links--cols { grid-template-columns: repeat(2, 1fr); } }