@charset "UTF-8"; /* * 株ニュースラボ — daily report article styles * Applied to
generated by core/wordpress/. * Mobile-first; expands at >=640px / >=900px. */ :root { --knl-up: #16a34a; --knl-down: #dc2626; --knl-neutral: #64748b; --knl-accent: #2563eb; --knl-bg-soft: #f8fafc; --knl-bg-card: #ffffff; --knl-border: #e2e8f0; --knl-text: #0f172a; --knl-text-muted: #475569; --knl-radius: 8px; } .knl-article { color: var(--knl-text); line-height: 1.7; } /* Override Cocoon's default H2/H3 banner styling. Cocoon decorates h2 with a gray bar background; we replace it with a flat left-accent treatment. !important on background-* is needed because Cocoon's selector specificity is competitive with ours. */ .knl-article h2, .knl-article h3 { background: none !important; background-color: transparent !important; background-image: none !important; border: none; border-radius: 0; box-shadow: none; color: var(--knl-text); } article.knl-article h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; padding: 0 0 0 0.6rem; border-left: 4px solid var(--knl-accent); } article.knl-article h3 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; padding: 0; font-weight: 700; color: var(--knl-text); } .knl-article a { color: var(--knl-accent); } /* ----- Summary card (今日の結論) ----- */ .knl-summary-card { background: var(--knl-bg-soft); border: 1px solid var(--knl-border); border-radius: var(--knl-radius); padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; } article.knl-article .knl-summary-card h2 { margin: 0 0 0.5rem; border-left: none; padding: 0; font-size: 1.1rem; } .knl-article .knl-summary-card ul { margin: 0; padding-left: 1.5rem; list-style: disc; } .knl-article .knl-summary-card li { margin: 0.3rem 0; } /* ----- KPI grid (市場サマリー) ----- */ .knl-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; margin: 0.5rem 0 1.5rem; } .knl-kpi { background: var(--knl-bg-card); border: 1px solid var(--knl-border); border-radius: var(--knl-radius); padding: 0.6rem 0.8rem; display: flex; flex-direction: column; } .knl-kpi .label { font-size: 0.8rem; color: var(--knl-text-muted); } .knl-kpi .value { font-size: 1.15rem; font-weight: 700; } .knl-kpi .value small { font-size: 0.8rem; font-weight: 500; margin-left: 0.4rem; color: var(--knl-text-muted); } .knl-kpi.up .value small { color: var(--knl-up); } .knl-kpi.down .value small { color: var(--knl-down); } /* ----- Tables with horizontal scroll (mobile-friendly) ----- */ .knl-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0 1.5rem; border: 1px solid var(--knl-border); border-radius: var(--knl-radius); } .knl-table-scroll table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.92rem; } .knl-table-scroll th, .knl-table-scroll td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--knl-border); text-align: left; white-space: nowrap; } .knl-table-scroll th { background: var(--knl-bg-soft); font-weight: 600; color: var(--knl-text-muted); } .knl-table-scroll td.num, .knl-table-scroll th.num { text-align: right; font-variant-numeric: tabular-nums; } .knl-table-scroll td.up { color: var(--knl-up); font-weight: 600; } .knl-table-scroll td.down { color: var(--knl-down); font-weight: 600; } .knl-table-scroll tr:last-child td { border-bottom: none; } /* Reason column: long text wraps so the table doesn't horizontally explode. */ .knl-table-scroll th.knl-reason-col, .knl-table-scroll td.knl-reason-col { white-space: normal; min-width: 220px; max-width: 360px; line-height: 1.55; vertical-align: top; } /* US Top10 numeric importance score (replaces 10-star strings). */ .knl-score { display: inline-block; min-width: 2.2em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--knl-text); } /* US Top10 news cell: stacked title + meta row. */ .knl-table-scroll td.knl-news-cell { white-space: normal; min-width: 260px; max-width: 520px; line-height: 1.5; vertical-align: top; } .knl-news-title { display: block; font-weight: 600; margin-bottom: 0.25rem; } a.knl-news-title { color: var(--knl-accent); text-decoration: none; } a.knl-news-title:hover { text-decoration: underline; } .knl-news-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; font-size: 0.85rem; } .knl-source-name { color: var(--knl-text-muted); font-size: 0.8rem; margin-left: 0.2rem; } /* ----- Card grid (Zack's Screening / 隠れた重要開示) ----- */ .knl-card-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 0.5rem 0 1.5rem; } @media (min-width: 900px) { .knl-card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } .knl-card { background: var(--knl-bg-card); border: 1px solid var(--knl-border); border-radius: var(--knl-radius); padding: 0.9rem 1rem; margin: 0; } .knl-card-header { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .knl-card-header .knl-rank { font-size: 0.78rem; font-weight: 700; background: var(--knl-accent); color: #fff; padding: 0.1rem 0.5rem; border-radius: 999px; } .knl-card-header .knl-ticker { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; color: var(--knl-text-muted); } .knl-card-header .knl-name { font-size: 1.05rem; } .knl-metrics { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 0.6rem; } .knl-material, .knl-card p { margin: 0.4rem 0; } .knl-check { background: var(--knl-bg-soft); border-radius: 6px; padding: 0.55rem 0.7rem; margin-top: 0.5rem; font-size: 0.95rem; } .knl-check strong { display: block; font-size: 0.85rem; color: var(--knl-text-muted); margin-bottom: 0.2rem; } .knl-check p { margin: 0; } /* ----- Badges ----- */ .knl-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--knl-bg-soft); color: var(--knl-text-muted); border: 1px solid var(--knl-border); font-variant-numeric: tabular-nums; } .knl-badge-positive { background: #ecfdf5; color: var(--knl-up); border-color: #bbf7d0; } .knl-badge-negative { background: #fef2f2; color: var(--knl-down); border-color: #fecaca; } .knl-badge-volume { background: #eff6ff; color: var(--knl-accent); border-color: #bfdbfe; } .knl-badge-theme { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; } /* 「確認」バッジ: 単なる弱色 pill ではなく、編集側が裏取り済みであることを 読者へ強く伝える視覚的シグナル。ソリッド塗り＋先頭にチェックマーク。 */ .knl-badge-confirm { background: var(--knl-accent); color: #fff; border-color: var(--knl-accent); font-weight: 700; letter-spacing: 0.02em; } .knl-badge-confirm::before { content: "✓ "; font-weight: 900; } /* ----- Checklist (明日見るポイント) ----- */ .knl-checklist { list-style: none; padding-left: 0; margin: 0.5rem 0 1rem; } .knl-checklist li { position: relative; padding: 0.4rem 0 0.4rem 1.6rem; border-bottom: 1px dashed var(--knl-border); } .knl-checklist li::before { content: "☐"; position: absolute; left: 0.2rem; top: 0.4rem; color: var(--knl-accent); font-size: 1.05rem; } .knl-checklist li:last-child { border-bottom: none; } /* ----- Signal eval section (retrospective: 先週の検証仮説の答え合わせ) ----- */ .knl-signal-eval { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--knl-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; } /* ----- Signals today section (prospective: 本日の検証対象). Different accent color from signal-eval so readers immediately see the past vs future split. ----- */ .knl-signals-today { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--knl-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; } article.knl-article .knl-signals-today h2 { margin-top: 0; border-left-color: var(--knl-accent); } .knl-note { font-size: 0.82rem; color: var(--knl-text-muted); margin-top: 0.6rem; line-height: 1.5; } .knl-note-inline { font-size: 0.85rem; color: var(--knl-text-muted); margin-left: 0.4rem; } /* Intro paragraph for prediction sections — sets reader expectation upfront. */ .knl-section-intro { background: rgba(255, 255, 255, 0.6); border-left: 3px solid var(--knl-accent); padding: 0.5rem 0.8rem; margin: 0 0 0.8rem; font-size: 0.92rem; line-height: 1.55; border-radius: 0 4px 4px 0; } article.knl-article .knl-signal-eval h2 { margin-top: 0; border-left-color: #f59e0b; } /* Highlight whole rows for hit/miss (background) plus emphasize the judgment cell (last column) with stronger color. */ article.knl-article .knl-signal-eval table tr.knl-eval-hit td { background: #ecfdf5; } article.knl-article .knl-signal-eval table tr.knl-eval-miss td { background: var(--knl-bg-soft); } article.knl-article .knl-signal-eval table tr.knl-eval-hit td:last-child { color: var(--knl-up); font-weight: 700; } article.knl-article .knl-signal-eval table tr.knl-eval-miss td:last-child { color: var(--knl-text-muted); } /* Inline span variants kept for non-table contexts. */ .knl-signal-eval .knl-eval-hit { color: var(--knl-up); font-weight: 700; } .knl-signal-eval .knl-eval-miss { color: var(--knl-text-muted); } /* 3-level judgment cells inside the eval table. - knl-jhit → green ✓ (hit) - knl-jmiss → grey ✗ (miss) - knl-jna → muted "—" (not applicable, e.g. direction_match on volatile) */ .knl-table-scroll th.knl-judgment-col, .knl-table-scroll td.knl-judgment-col { text-align: center; white-space: normal; font-weight: 700; font-size: 1rem; min-width: 4em; font-variant-numeric: tabular-nums; } .knl-table-scroll th.knl-judgment-col { font-weight: 600; font-size: 0.78rem; line-height: 1.25; } .knl-table-scroll td.knl-jhit { color: var(--knl-up); } .knl-table-scroll td.knl-jmiss { color: var(--knl-text-muted); opacity: 0.7; } .knl-table-scroll td.knl-jna { color: var(--knl-text-muted); opacity: 0.4; } /* P5.5-5 v2: scenario cards / confidence badges / horizon-grouped panels. The signals_today section now renders cards (vs the old table) so each prediction shows scenario / confidence / rationale / tomorrow-check / invalidation in a scannable layout. */ .knl-scenario-cards { display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin: 0.5rem 0 1rem; } .knl-scenario-card { background: rgba(255, 255, 255, 0.85); } .knl-scenario-card .knl-card-header { gap: 0.4rem; } .knl-scenario-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.8rem; margin: 0.4rem 0 0.6rem; font-size: 0.92rem; } .knl-scenario-dl dt { color: var(--knl-text-muted); font-weight: 600; } .knl-scenario-dl dd { margin: 0; font-weight: 500; } /* R11 (D29 完全準拠): 個別記事のシナリオカードヘッダー。 * 旧 scenario_badge / confidence_badge / .knl-badge-horizon 3バッジから * 「方向(テキスト+色) / 信頼度(A/B/C 背景色) / 期間(プレーン)」3要素に変更。 * フロントの進行中シナリオ表 (.knl-active-table .knl-col-*) と表現を揃え、 * サイト内で同じシグナルが同じ見た目になるようにする。 */ .knl-scenario-card .knl-scenario-meta { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; } .knl-scenario-card .knl-direction { font-weight: 700; font-size: 0.92rem; white-space: nowrap; } .knl-scenario-card .knl-direction.direction-up { color: var(--knl-up); } .knl-scenario-card .knl-direction.direction-down { color: var(--knl-down); } .knl-scenario-card .knl-direction.direction-na { color: var(--knl-text-muted); } .knl-scenario-card .knl-conf { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 4px; font-weight: 700; font-size: 0.85rem; line-height: 1.2; min-width: 1.6em; text-align: center; } .knl-scenario-card .knl-conf.conf-a { background: #15803d; color: #fff; } .knl-scenario-card .knl-conf.conf-b { background: #ea580c; color: #fff; } .knl-scenario-card .knl-conf.conf-c { background: #6b7280; color: #fff; } .knl-scenario-card .knl-conf.conf-na { background: #cbd5e1; color: #334155; } .knl-scenario-card .knl-horizon { font-size: 0.85rem; color: var(--knl-text-muted); font-weight: 500; white-space: nowrap; } /* P5.5-7 v3.1: scenario subnote shown when 反落警戒 collapses to 下方向 etc. Visually distinct from the rationale block (which is more detailed) — this sits between the badges and the dl, in italic muted tone. */ .knl-scenario-subnote { margin: 0.2rem 0 0.5rem; font-size: 0.88rem; color: var(--knl-text-muted); font-style: italic; padding-left: 0.5rem; border-left: 2px solid var(--knl-border); } /* Confidence badges (A=accent solid, B=accent outline, C=muted) */ .knl-badge-conf-a { background: var(--knl-accent); color: #fff; border-color: var(--knl-accent); font-weight: 700; } .knl-badge-conf-b { background: #eff6ff; color: var(--knl-accent); border-color: #bfdbfe; font-weight: 700; } .knl-badge-conf-c { background: var(--knl-bg-soft); color: var(--knl-text-muted); border-color: var(--knl-border); } .knl-badge-horizon { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; } /* Per-horizon answer panels stack inside the eval section. */ .knl-eval-panel { margin-top: 1rem; padding-top: 0.6rem; border-top: 1px dashed #fde68a; } .knl-eval-panel:first-child { margin-top: 0; padding-top: 0; border-top: none; } article.knl-article .knl-eval-panel h3 { font-size: 1rem; margin: 0 0 0.4rem; } /* ----- Track record KPI (過去30日成績) — embedded inside signal-eval section. Sits below the eval table to anchor the week-over-week claim with a rolling-window credibility metric. */ .knl-track-record { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed #fde68a; } article.knl-article .knl-track-record h3 { font-size: 1rem; margin: 0 0 0.3rem; color: var(--knl-text); } .knl-track-record-period { font-size: 0.82rem; color: var(--knl-text-muted); margin: 0 0 0.6rem; } .knl-sample-warn { display: inline-block; margin-left: 0.6rem; padding: 0.05rem 0.5rem; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .knl-track-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0.4rem 0 0.8rem; } .knl-track-kpi-grid-secondary { margin-top: 0.2rem; } .knl-track-record .knl-kpi { background: rgba(255, 255, 255, 0.7); } /* 主指標（的中率±2.5%）を視覚的に強調する */ .knl-track-record .knl-kpi-primary { border-color: var(--knl-accent); box-shadow: inset 0 0 0 1px var(--knl-accent); } .knl-track-record .knl-kpi-primary .value { color: var(--knl-accent); } .knl-track-by-dir { list-style: none; padding: 0; margin: 0.3rem 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.92rem; } .knl-track-by-dir li { margin: 0; } .knl-track-by-dir strong { color: var(--knl-text-muted); font-weight: 600; } /* ----- Related / CTA / Disclaimer ----- */ .knl-related { background: var(--knl-bg-soft); border-radius: var(--knl-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; } article.knl-article .knl-related h2 { margin-top: 0; border-left-color: var(--knl-neutral); } .knl-related ul { margin: 0; padding-left: 1.25rem; } .knl-cta { border: 2px solid var(--knl-accent); border-radius: var(--knl-radius); padding: 1rem 1.25rem; text-align: center; margin: 1.5rem 0; } .knl-cta a { display: inline-block; background: var(--knl-accent); color: #fff; padding: 0.5rem 1.2rem; border-radius: 6px; text-decoration: none; font-weight: 600; } .knl-disclaimer { font-size: 0.82rem; color: var(--knl-text-muted); border-top: 1px solid var(--knl-border); padding-top: 0.8rem; margin-top: 2rem; } /* ----- Ticker links inside tables/cards ----- */ .knl-article a.knl-ticker-link { color: var(--knl-accent); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .knl-article a.knl-ticker-link:hover { text-decoration: underline; } /* ------------------------------------------------------------------ * * Affiliate / PR disclosure + ad-zone label * * The site-wide footer disclosure (.knl-affiliate-disclosure) is * injected by functions.php on every page via get_footer. * * Sidebar / inline ad zones use the .knl-ad-zone container with a * .knl-pr-label badge. Wrap any affiliate banner / link in this so the * "PR" tag is consistent and the styling matches the rest of the site. * Sample widget HTML lives in wordpress/cocoon-child/sidebar_ad_widget.html. * * Design notes: * - Footer disclosure uses muted text + thin top border so it doesn't * compete with the article CTA / privacy links Cocoon already renders. * - PR label is intentionally small (11px) and high-contrast so users * can identify ads at a glance per Japanese 景表法 / GDN policy norms. * ------------------------------------------------------------------ */ .knl-affiliate-disclosure { margin: 0 auto; padding: 16px 20px; max-width: 1100px; border-top: 1px solid var(--knl-border); background: var(--knl-bg-soft); font-size: 12px; line-height: 1.7; color: var(--knl-text-muted); } .knl-affiliate-disclosure p { margin: 0; } .knl-ad-zone { margin: 16px 0; padding: 12px; background: var(--knl-bg-card); border: 1px solid var(--knl-border); border-radius: var(--knl-radius); position: relative; } .knl-ad-zone-note { margin: 8px 0 0; font-size: 11px; color: var(--knl-text-muted); line-height: 1.5; } .knl-ad-zone img { max-width: 100%; height: auto; display: block; } .knl-ad-zone a { display: inline-block; } .knl-pr-label { display: inline-block; padding: 2px 8px; margin-bottom: 8px; background: var(--knl-text-muted); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; border-radius: 3px; vertical-align: middle; } .knl-pr-label[data-variant="ad"]::before { content: "広告"; } .knl-pr-label:not([data-variant])::before, .knl-pr-label[data-variant="pr"]::before { content: "PR"; } /* ------------------------------------------------------------------ * * Reading-guide internal links — appears at the bottom of every JP/US * daily article (just before the disclaimer) to surface the /guide/* * pages and improve site-wide回遊. * * Visual priority is intentionally low: thin border + soft tint so it * feels like a "see also" sidebar item, not a CTA. The link text is * accent-blue (matches the article's Cocoon links) so readers know it's * clickable, but no button styling so it doesn't compete with the CTA * macro that may sit just above. * ------------------------------------------------------------------ */ .knl-guide-links { margin: 24px 0; padding: 14px 16px; border: 1px solid var(--knl-border); border-radius: var(--knl-radius); background: var(--knl-bg-soft); } .knl-guide-links-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--knl-text); } .knl-guide-links-title::before { content: "📘 "; margin-right: 2px; } .knl-guide-links-lead { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: var(--knl-text-muted); } .knl-guide-links-list { list-style: none; padding: 0; margin: 0; } .knl-guide-links-list li { padding: 4px 0; font-size: 14px; line-height: 1.6; } .knl-guide-links-list li::before { content: "→ "; color: var(--knl-text-muted); font-weight: 700; } .knl-guide-links-list a { color: var(--knl-accent); text-decoration: none; } .knl-guide-links-list a:hover { text-decoration: underline; } /* ------------------------------------------------------------------ * * Site header — background image (X-header style banner) * * Image: 2172×724 px (3:1), text-centered. Applied to `.header-in` * (the inner title block ONLY) — NOT `.header-container`, because * the container also wraps the global nav below the header and a * background there makes the image consume the entire header+nav * area and turns the nav unreadable. * * Heights are picked to keep the image proportional without dominating * the page: * desktop : ~160px * mobile : ~90px * (The image's center text falls within the visible band at these * heights with `background-size: cover; background-position: center`.) * ------------------------------------------------------------------ */ #header-in.header-in, .header-in { background-image: url('/wp-content/uploads/2026/05/knl_x_header.png'); background-repeat: no-repeat; /* `contain`: 画像全体を中央に表示。クロップなし。両端の余白は ヘッダーのデフォルト白色のまま。画像はネイビーの帯として中央に 配置される (= バナー的な見せ方)。 */ background-size: contain; background-position: center center; min-height: 220px; position: relative; } @media (max-width: 768px) { #header-in.header-in, .header-in { min-height: 110px; } } /* Visually hide Cocoon's default tagline + site-name + site-description * inside the header, so they don't overlap the background image's * own brand text. DOM is preserved (clip-path technique) for screen * readers and structured-data scrapers. */ .header-in .tagline, .header-in .site-name-text, .header-in .site-description, .header-in .logo-header, .header-in .header-logo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===================================================================== * UI redesign sprint 2 (R4-R8 + R9 + R10改 + R11) * Front page (slug=home) and article-top KPI badges. * Only the variant chunks are scoped via .knl-front-page or .knl-article; * the shared kpi/scenario styles are body-wide so they work in either. * ===================================================================== */ /* ----- KPI badges (R4 hero / R9 mini / R16 sidebar) ----- * The macro emits the section + 3 anchors on one line specifically to * dodge WordPress' wpautop, which otherwise turns blank-line separators * between `` tags into empty `

` siblings — that produced a * 6-cell checkerboard (3 badges + 3 phantom

's) inside the grid. * Defense-in-depth: any stray

/
sneaking in is forced into * display:contents so it is invisible to grid layout, and empty

's * are hidden outright. */ .knl-kpi-section { display: grid; gap: 0.75rem; margin: 1rem 0; } .knl-kpi-section > p, .knl-kpi-section > br { display: contents; /* don't let wpautop hijack a grid cell */ } .knl-kpi-section > p:empty { display: none; } .knl-kpi-section.knl-kpi-hero { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; } .knl-kpi-section.knl-kpi-mini { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; } .knl-kpi-section.knl-kpi-sidebar { grid-template-columns: 1fr; gap: 0.5rem; } @media (max-width: 600px) { /* Keep all three KPI badges side-by-side on mobile instead of stacking * vertically. The labels are short enough that 3-up still reads cleanly, * and stacked badges took up too much above-the-fold space on phones * (especially for the article mini-KPI variant). Padding / font sizes * are dialed down so the badges fit comfortably in a phone column. */ .knl-kpi-section.knl-kpi-hero, .knl-kpi-section.knl-kpi-mini { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } .knl-kpi-section.knl-kpi-hero .knl-kpi-badge, .knl-kpi-section.knl-kpi-mini .knl-kpi-badge { padding: 0.55rem 0.5rem; border-left-width: 3px; } .knl-kpi-section.knl-kpi-hero .knl-kpi-label, .knl-kpi-section.knl-kpi-mini .knl-kpi-label { font-size: 0.65rem; min-height: 2.4em; } .knl-kpi-section.knl-kpi-hero .knl-kpi-value { font-size: 1.25rem; } .knl-kpi-section.knl-kpi-mini .knl-kpi-value { font-size: 1.05rem; } .knl-kpi-section.knl-kpi-hero .knl-kpi-meta, .knl-kpi-section.knl-kpi-mini .knl-kpi-meta { font-size: 0.6rem; } } /* F4: badge gets a flat-blue left border + soft shadow so it reads as a * card rather than a bordered box. Inner layout switches to flex column * (F1) so the value sits in a fixed vertical slot regardless of whether * the label wraps to 1 or 2 lines. */ .knl-kpi-badge { display: flex; flex-direction: column; justify-content: space-between; background: var(--knl-bg-card); border: 1px solid var(--knl-border); border-left: 4px solid var(--knl-accent); border-radius: var(--knl-radius); padding: 1rem 1.25rem; text-decoration: none !important; color: var(--knl-text); text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .knl-kpi-badge:hover { border-color: var(--knl-accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18); } /* F1: label region is a fixed-height flex centerer so 1-line and * 2-line labels both reserve the same vertical space. The inner * `
` is honoured because flex column-wrap stays line-based. */ .knl-kpi-label { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.6em; /* 2行分のラベルを確実に収める */ font-size: 0.78rem; color: var(--knl-text-muted); line-height: 1.4; margin-bottom: 0.25rem; text-align: center; } .knl-kpi-value { display: block; font-size: 2rem; font-weight: 700; color: var(--knl-accent); line-height: 1.1; } .knl-kpi-section.knl-kpi-mini .knl-kpi-value { font-size: 1.4rem; } .knl-kpi-section.knl-kpi-sidebar .knl-kpi-value { font-size: 1.5rem; } .knl-kpi-meta { display: block; font-size: 0.72rem; color: var(--knl-text-muted); margin-top: 0.2rem; } .knl-kpi-disclaimer { font-size: 0.72rem; color: var(--knl-text-muted); line-height: 1.5; margin: 0.5rem 0 0; text-align: center; } .knl-kpi-section.knl-kpi-mini + .knl-kpi-disclaimer { text-align: left; } /* R9 mini: hero より控えめなパディング/余白で、記事タイトル直下に置いても * 結論カードまでの流れを邪魔しない。border-left-width も hero(4px) より * 細くして「ヘッダー的存在」を弱める。 */ .knl-kpi-section.knl-kpi-mini { margin: 0.5rem 0 1rem; gap: 0.5rem; } .knl-kpi-section.knl-kpi-mini .knl-kpi-badge { padding: 0.7rem 0.9rem; border-left-width: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .knl-kpi-section.knl-kpi-mini .knl-kpi-label { min-height: 2.2em; font-size: 0.72rem; margin-bottom: 0.15rem; } .knl-kpi-section.knl-kpi-mini .knl-kpi-meta { font-size: 0.66rem; margin-top: 0.15rem; } /* ----- Front page hero (R4) ----- * F2: deep navy gradient per 03_sprint2_top_page.md spec. Tagline and * CTAs flip to white text since the dark backdrop kills the previous * accent-on-light palette. KPI badges keep their white card surface * (intentional contrast — they need to read as data, not chrome). */ .knl-front-page .knl-hero { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); border: 1px solid #1e40af; border-radius: 12px; padding: 2rem 1.5rem 1.5rem; margin-bottom: 1.5rem; color: #fff; } .knl-front-page .knl-hero-inner { max-width: 960px; margin: 0 auto; } /* F21 (D33): hero copy is now the page

. Cocoon's parent theme * decorates h1 with banner backgrounds, left borders, and large block * margins by default — those would clash with the navy hero, so we * override aggressively. The font sizing keeps the same visual weight * as the previous

design (≈ 1.65rem main / ≈ 1.08rem sub). */ .knl-front-page h1.knl-hero-tagline, .knl-front-page .knl-hero-tagline { font-size: 1.65rem; line-height: 1.45; color: #fff !important; margin: 0 0 1.5rem; padding: 0 !important; text-align: center; font-weight: 700; letter-spacing: 0.01em; background: none !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0; box-shadow: none; } .knl-front-page .knl-hero-tagline-sub { display: block; margin-top: 0.6rem; font-size: 1.05rem; /* visually distinct sub-line */ font-weight: 400; color: rgba(255, 255, 255, 0.9); letter-spacing: 0; line-height: 1.5; } .knl-front-page .knl-hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 1.25rem; } /* F7: equal-width CTA buttons. The hero needs the two CTAs to read as * a balanced pair — different label lengths shouldn't drive different * widths. Mobile drops to full-width column-stacked for thumb reach. * F11: tighten vertical padding (12px → 8px) so the buttons read as * inline call-outs rather than oversized blocks. */ .knl-cta-primary, .knl-cta-secondary { display: inline-block; flex: 0 0 auto; min-width: 200px; padding: 8px 24px; border-radius: var(--knl-radius); font-weight: 600; line-height: 1.4; text-decoration: none !important; font-size: 15px; text-align: center; transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; } @media (max-width: 768px) { /* Mobile: stack vertically with a tighter gap. The 0.75rem (12px) * row-gap from the desktop layout reads as a chunky empty band * once the buttons go full-width. 0.4rem ≈ 6px keeps the buttons * visually grouped without touching. */ .knl-front-page .knl-hero-ctas { flex-direction: column; gap: 0.4rem; } .knl-cta-primary, .knl-cta-secondary { width: 100%; min-width: auto; } } /* On a navy hero, the primary CTA is white-on-navy — same visual * weight as the standalone Cocoon CTA we replaced. */ .knl-cta-primary { background: #fff; color: #1e3a8a !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .knl-cta-primary:hover { background: #f1f5f9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); } /* Secondary is the outlined variant — translucent fill so the gradient * shows through, white border + label. */ .knl-cta-secondary { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.85); } .knl-cta-secondary:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); } /* The KPI disclaimer that lives inside the hero needs white text too, * otherwise the muted-gray default is unreadable on navy. */ .knl-front-page .knl-hero .knl-kpi-disclaimer { color: rgba(255, 255, 255, 0.85); } /* ----- Section header pattern (used across R5/R6/R7/R8) ----- * F8: tame the ~100px gap that Cocoon's parent theme adds via h2/section * defaults. Cocoon decorates `

` with a banner margin-top (~50px) and * its `.entry-content > section` with its own block-margin; both stack * on top of our intended ~16px gap, giving ~100px of dead space below * each section title. We pin the spacing to the section-header element * itself and zero out the children Cocoon would otherwise inflate. */ /* Section spacing — owned by the section element itself. * Earlier versions zeroed out section margins and put 32px on the * section-header's margin-top. That worked until wpautop started * dropping empty

blocks between sections, which collapsed the * gap because the empty

took precedence as the section's * first child. Pinning the gap on the section avoids that race. */ .knl-front-page > section, .knl-front-page section { margin: 32px 0 0; } .knl-front-page > .knl-hero, .knl-front-page > section:first-child { margin-top: 0; } .knl-front-page .knl-section-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 16px; /* gap above belongs to

, not the header */ } .knl-front-page .knl-section-header h2 { font-size: 1.2rem; margin: 0 !important; padding: 0 0 0 0.6rem; border-left: 4px solid var(--knl-accent); background: none !important; } /* Kill any phantom

wpautop drops at section boundaries. Without * this the section-title-to-content gap inflates on "最新の記事" and * the bottom of "進行中のシナリオ" gets a ghost paragraph between * the table and the section note. */ .knl-front-page p:empty { display: none !important; } .knl-front-page section > p:not(.knl-section-intro):not(.knl-section-note):not(.knl-recent-ret):not(.knl-latest-excerpt):not(.knl-latest-date):not(.knl-archive-excerpt) { display: contents; } .knl-front-page section > *:first-child, .knl-front-page .knl-section-header + * { margin-top: 0; } .knl-section-more { font-size: 0.85rem; color: var(--knl-accent); text-decoration: none !important; white-space: nowrap; } .knl-section-more:hover { text-decoration: underline !important; } .knl-section-intro { font-size: 0.9rem; color: var(--knl-text-muted); margin: 0 0 0.75rem; } .knl-section-note { font-size: 0.78rem; color: var(--knl-text-muted); margin-top: 0.75rem; } /* ----- R5 active scenarios widget — F9 table form ----- * Decision: card → 6-column table. Readers' top question is "when do I * get the answer?" — putting 判定日 in a fixed column with the highlight * cell + a 信号機-coloured 残り column makes that legible at a glance, * and the layout scales to 5+ rows without re-flowing. Mobile collapses * to 4 columns (drops 出した日 and 中間) inside .knl-table-scroll. */ /* F15 round 5: stop fighting Cocoon's parent-theme table block-margins * and brute-force the spacing inside .knl-active-widget. Round 4 * narrowed `.knl-table-scroll` margins but the gap still showed — * Cocoon's `.entry-content table` and `.entry-content p` carry their * own defaults that beat our specificity, plus there's nothing * stopping `

` itself from adding a trailing padding. The * only reliable fix is to pin every spacing knob to zero with * !important and rebuild a tight 8px gap on the section-note alone. */ /* F15 round 6: tighten the last-row cell padding so the table's bottom * edge hugs the data. Round 5 left `padding-bottom: 0.7rem` on the * last row to keep the cell rhythm — that turned out to be the * residual ~11px white strip the user could still see. We drop to * 0.35rem (about half), which keeps the text from sitting right on * the table's edge while removing most of the gap. */ .knl-active-widget { padding-bottom: 0 !important; } .knl-active-widget .knl-table-scroll, .knl-active-widget .knl-active-table-wrap, .knl-active-widget .knl-active-table, .knl-active-widget .knl-active-table tbody { margin-bottom: 0 !important; padding-bottom: 0 !important; } .knl-active-widget .knl-active-table tr:last-child td { padding-bottom: 0.35rem !important; } .knl-active-widget > .knl-section-note { margin: 8px 0 0 !important; } .knl-active-widget > *:last-child { margin-bottom: 0 !important; } .knl-active-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.5; } .knl-active-table thead th { text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--knl-text-muted); background: var(--knl-bg-soft); padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--knl-border); white-space: nowrap; } .knl-active-table tbody td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--knl-border); vertical-align: middle; } .knl-active-table tbody tr:last-child td { border-bottom: none; } .knl-active-table .knl-col-ticker { font-variant-numeric: tabular-nums; } .knl-active-table .knl-col-ticker .knl-ticker { display: inline-block; width: 4ch; font-weight: 700; color: var(--knl-text); margin-right: 0.4rem; } .knl-active-table .knl-col-ticker .knl-name { color: var(--knl-text); } .knl-active-table .knl-col-scenario { white-space: nowrap; } .knl-active-table .knl-col-scenario .knl-direction-icon { font-size: 1rem; margin-right: 0.3rem; vertical-align: middle; } .knl-active-table .knl-col-scenario .knl-badge { margin-right: 0.2rem; } /* F14 (D29): one attribute per column. Direction is text + colour * (no badge), confidence uses a coloured cell background to read at * a glance, period is plain "1日 / 5日 / 20日". */ .knl-active-table .knl-col-direction { font-weight: 600; white-space: nowrap; } .knl-active-table .knl-col-direction.direction-up { color: var(--knl-up); } .knl-active-table .knl-col-direction.direction-down { color: var(--knl-down); } .knl-active-table .knl-col-direction.direction-na { color: var(--knl-text-muted); } .knl-active-table .knl-col-confidence { font-weight: 700; text-align: center; white-space: nowrap; } .knl-active-table .knl-col-confidence.conf-a { background: #15803d; color: #fff; } .knl-active-table .knl-col-confidence.conf-b { background: #ea580c; color: #fff; } .knl-active-table .knl-col-confidence.conf-c { background: #6b7280; color: #fff; } .knl-active-table .knl-col-confidence.conf-na { background: #cbd5e1; color: #334155; } .knl-active-table .knl-col-horizon { white-space: nowrap; font-size: 0.88rem; color: var(--knl-text-muted); text-align: center; } .knl-active-table .knl-col-issued, .knl-active-table .knl-col-due { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.88rem; } /* Highlight 判定日 — that's the answer-day readers care about. */ .knl-active-table .knl-col-due { background: #fef3c7; font-weight: 700; color: #78350f; } /* 信号機 colours for 残り (urgency at a glance). */ .knl-active-table .knl-col-remaining { white-space: nowrap; font-weight: 600; font-size: 0.88rem; text-align: center; } .knl-active-table .knl-col-remaining.remaining-hot { background: #fee2e2; color: #991b1b; } .knl-active-table .knl-col-remaining.remaining-warm { background: #fef3c7; color: #92400e; } .knl-active-table .knl-col-remaining.remaining-cool { background: #f1f5f9; color: var(--knl-text-muted); } .knl-active-table .knl-col-progress { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .knl-active-table .knl-col-progress.up { color: var(--knl-up); } .knl-active-table .knl-col-progress.down { color: var(--knl-down); } /* Mobile (F14): trim to 4 essential columns. Drop 出した日 / 期間 / 中間, * and stack 方向 + 信頼度 visually inside the direction cell so * 銘柄 / 方向(+conf) / 判定日 / 残り is what the reader sees. The * .knl-table-scroll wrapper is still in play as a safety net for very * narrow viewports. */ @media (max-width: 640px) { .knl-active-table .knl-col-issued, .knl-active-table .knl-col-horizon, .knl-active-table .knl-col-progress { display: none; } /* Compact the confidence cell into a small inline pill that sits next * to the direction text rather than its own column. */ .knl-active-table .knl-col-confidence { background: transparent !important; color: inherit !important; font-size: 0.78rem; padding-left: 0; padding-right: 0.4rem; } .knl-active-table .knl-col-confidence::before { content: '・'; } .knl-active-table thead th, .knl-active-table tbody td { padding: 0.5rem 0.5rem; } } /* Legacy R5 card CSS (pre-F9). Retained for non-front-page contexts * that still mount .knl-active-cards. The home page uses the table * form above. */ .knl-front-page .knl-active-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } @media (max-width: 768px) { .knl-front-page .knl-active-cards { grid-template-columns: 1fr; } } .knl-active-card { background: var(--knl-bg-card); border: 1px solid var(--knl-border); border-left: 4px solid var(--knl-neutral); border-radius: var(--knl-radius); padding: 0.85rem 1rem; } .knl-active-card-a { border-left-color: #15803d; } .knl-active-card-b { border-left-color: #ea580c; } .knl-active-card-c { border-left-color: #6b7280; } .knl-active-card-header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; } .knl-active-card-header .knl-ticker { font-size: 0.78rem; color: var(--knl-text-muted); } .knl-active-card-header .knl-name { font-size: 1rem; } .knl-active-card-meta { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; } .knl-active-card-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; font-size: 0.85rem; margin: 0; } .knl-active-card-dl dt { color: var(--knl-text-muted); font-weight: 600; } .knl-active-card-dl dd { margin: 0; } .knl-active-card-dl dd.up { color: var(--knl-up); font-weight: 700; } .knl-active-card-dl dd.down { color: var(--knl-down); font-weight: 700; } /* ----- R6 recent judged cards ----- * F15: cards used to grow vertically because each was a grid item * stretched by `align-items: stretch`. Switching the row alignment to * `start` lets cards size to their content, eliminating the empty * white strip below shorter cards. */ .knl-front-page .knl-recent-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; gap: 0.6rem; } .knl-recent-card { background: var(--knl-bg-card); border: 1px solid var(--knl-border); border-radius: var(--knl-radius); padding: 0; overflow: hidden; transition: border-color 0.15s, transform 0.15s; } .knl-recent-card:hover { border-color: var(--knl-accent); transform: translateY(-1px); } .knl-recent-card-link { display: flex; align-items: stretch; text-decoration: none !important; color: inherit; } .knl-recent-status { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.6rem 0; color: #fff; } .knl-recent-card-hit .knl-recent-status { background: var(--knl-up); } .knl-recent-card-partial .knl-recent-status { background: #ea580c; } .knl-recent-card-miss .knl-recent-status { background: var(--knl-down); } .knl-recent-card-na .knl-recent-status { background: var(--knl-neutral); } .knl-status-icon { font-size: 1.6rem; line-height: 1; font-weight: 700; } .knl-status-label { font-size: 0.7rem; margin-top: 0.15rem; } .knl-recent-body { flex: 1 1 auto; padding: 0.6rem 0.85rem; } .knl-recent-head { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.3rem; } .knl-direction-icon { font-size: 1.05rem; } .knl-direction-up { color: var(--knl-up); } .knl-direction-down { color: var(--knl-down); } .knl-direction-volatile { color: #9333ea; } .knl-recent-head .knl-ticker { font-size: 0.75rem; color: var(--knl-text-muted); } .knl-recent-head .knl-name { font-size: 0.95rem; } .knl-recent-meta { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.35rem; } .knl-recent-ret { margin: 0; font-size: 0.85rem; line-height: 1.5; } .knl-recent-ret .up { color: var(--knl-up); } .knl-recent-ret .down { color: var(--knl-down); } .knl-recent-ret small { color: var(--knl-text-muted); display: block; font-size: 0.72rem; } /* F15 (round 2): the wpautop hardening. The first round (margin-bottom:0 * on trailing children, align-items:start on the grid) wasn't enough — * WordPress was still injecting empty

elements inside the * wrapper, padding the card height * by ~1.5em per phantom paragraph. The template now emits each card on * a single line (mirrors the kpi_badges pattern), and the rules below * stay as a safety net in case anything ever leaks through: * - empty

the layout would have stretched → hidden * - any

/
wpautop slips into the card link → display:contents * so they don't take up flex/grid space */ .knl-recent-card p:empty, .knl-recent-card-link p:empty, .knl-recent-body > p:empty { display: none; } .knl-recent-card-link > p:not(.knl-recent-ret), .knl-recent-body > p:not(.knl-recent-ret), .knl-recent-card > p:not(.knl-recent-ret), .knl-recent-card-link > br, .knl-recent-body > br { display: contents; } .knl-recent-card .knl-recent-body > *:last-child, .knl-recent-body .knl-recent-ret { margin-bottom: 0; } .knl-recent-card-link { min-height: 0; } .knl-recent-card { align-self: start; } /* ----- R8 latest pair (JP / US) ----- * F15 (round 3): same wpautop hardening as R6. align-items: start lets * each card collapse to its own content height, and the inner card * markup is now emitted as a single line in the template so empty

* elements never get injected between the eyecatch and the body *

. */ .knl-latest-pair-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0.85rem; } @media (max-width: 768px) { .knl-latest-pair-grid { grid-template-columns: 1fr; } } .knl-latest-card { background: var(--knl-bg-card); border: 1px solid var(--knl-border); border-radius: var(--knl-radius); overflow: hidden; align-self: start; transition: border-color 0.15s; } .knl-latest-card .knl-latest-body > *:last-child { margin-bottom: 0; } .knl-latest-card:hover { border-color: var(--knl-accent); } .knl-latest-eyecatch { display: block; line-height: 0; background: #f1f5f9; } .knl-latest-eyecatch img { width: 100%; height: auto; display: block; aspect-ratio: 1200 / 675; object-fit: cover; } .knl-latest-body { padding: 0.75rem 1rem 1rem; } .knl-latest-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; margin-bottom: 0.4rem; color: var(--knl-text-muted); } .knl-badge-market-jp { background: #1e40af; color: #fff; padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700; } .knl-badge-market-us { background: #b91c1c; color: #fff; padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700; } .knl-latest-time { font-size: 0.72rem; } .knl-latest-title { font-size: 1rem; line-height: 1.5; margin: 0 0 0.4rem; } .knl-latest-title a { color: var(--knl-text); text-decoration: none !important; } .knl-latest-title a:hover { color: var(--knl-accent); } .knl-latest-excerpt { font-size: 0.85rem; color: var(--knl-text-muted); margin: 0 0 0.3rem; line-height: 1.5; } .knl-latest-date { font-size: 0.75rem; color: var(--knl-text-muted); margin: 0; } /* ----- R7 latest archive ----- */ .knl-latest-archive-list { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 0.85rem; } @media (max-width: 900px) { .knl-latest-archive-list { grid-template-columns: 1fr; } } .knl-archive-card { background: var(--knl-bg-card); border: 1px solid var(--knl-border); border-radius: var(--knl-radius); overflow: hidden; align-self: start; } .knl-archive-card .knl-archive-body > *:last-child { margin-bottom: 0; } .knl-archive-card:hover { border-color: var(--knl-accent); } .knl-archive-eyecatch { display: block; line-height: 0; background: #f1f5f9; } .knl-archive-eyecatch img { width: 100%; height: auto; display: block; aspect-ratio: 1200 / 675; object-fit: cover; } .knl-archive-body { padding: 0.7rem 0.9rem 0.85rem; } .knl-archive-meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; color: var(--knl-text-muted); margin-bottom: 0.3rem; } .knl-archive-date { font-size: 0.72rem; } .knl-archive-title { font-size: 0.95rem; line-height: 1.5; margin: 0 0 0.3rem; } .knl-archive-title a { color: var(--knl-text); text-decoration: none !important; } .knl-archive-title a:hover { color: var(--knl-accent); } .knl-archive-excerpt { font-size: 0.82rem; color: var(--knl-text-muted); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ----- Front page footer note ----- */ .knl-front-footer-note { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--knl-border); text-align: center; } /* ----- Active scenario / recent confidence badges (shared) ----- */ .knl-badge-conf-a { background: #15803d; color: #fff; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; } .knl-badge-conf-b { background: #ea580c; color: #fff; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; } .knl-badge-conf-c { background: #6b7280; color: #fff; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; } .knl-badge-conf-na { background: #cbd5e1; color: #334155; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; } .knl-badge-horizon { background: #f3f4f6; color: #374151; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; } .knl-badge-scenario { background: #e0e7ff; color: #1e40af; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; } /* ----- R10改 結論カード (二段構造) ----- */ .knl-conclusion-card { background: var(--knl-bg-soft); border: 1px solid var(--knl-border); border-radius: var(--knl-radius); padding: 1.1rem 1.25rem; margin: 1rem 0 1.5rem; } .knl-conclusion-card h2.nocontents { margin: 0 0 0.6rem; font-size: 1.15rem; border-left: 4px solid var(--knl-accent); padding-left: 0.6rem; } .knl-conclusion-card h2 small { font-weight: 400; font-size: 0.78rem; color: var(--knl-text-muted); margin-left: 0.5rem; } .knl-conclusion-summary > ul { margin: 0; padding-left: 1.25rem; } .knl-conclusion-hooks { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px dashed var(--knl-border); } .knl-conclusion-hooks h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--knl-text); } .knl-conclusion-hooks ul { margin: 0; padding-left: 1.25rem; font-size: 0.92rem; line-height: 1.7; } .knl-conclusion-anchors { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.85rem; } /* Compact inline-flex pill, sized to its content but with a shared * min-width across siblings so the two anchors («シナリオを見る ↓» / * «答え合わせを見る ↓») visually line up despite their different * character counts. */ .knl-anchor-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 11em; padding: 0.4rem 0.9rem; background: #fff; border: 1px solid var(--knl-accent); color: var(--knl-accent) !important; border-radius: 4px; font-size: 0.85rem; line-height: 1.4; text-decoration: none !important; transition: background 0.15s; } .knl-anchor-btn:hover { background: var(--knl-accent); color: #fff !important; } /* F5 (round 2 — F21/D33): hide the WP-standard page

("株ニュースラボ * ｜シナリオと達成率を記録する投資データサイト") and publish-date row * whenever the front-page shell is rendered. The hero now carries an * actual

(.knl-hero-tagline), so the WP entry-title would be a * second

and a duplicate copy of the same phrase. * * Two selectors so the rule fires both ways: * - body.home .entry-title — once /home/ is set as homepage * - body:has(.knl-front-page) ... — also catches direct-URL * previews before the cutover, because the hero shell uniquely * identifies this page. `:has()` is widely supported in 2026 * (Chrome 105+, Safari 15.4+, Firefox 121+). */ body.home .entry-title, body.home .article-header, body.home .date-tags, body.home .post-date, body.home .post-update, body.home .entry-meta, body:has(.knl-front-page) .entry-title, body:has(.knl-front-page) .article-header, body:has(.knl-front-page) .date-tags, body:has(.knl-front-page) .post-date, body:has(.knl-front-page) .post-update, body:has(.knl-front-page) .entry-meta { display: none !important; } /* ------------------------------------------------------------------ * * R17 + R30: Enhanced site-wide footer block (.knl-footer) * * Sits just below .knl-affiliate-disclosure and just above Cocoon's * standard footer, on every page. Three regions: * * .knl-featured-in — R30 media-mention placeholder. Auto-hides * whenever the logo list is empty so the slot * is invisible until real logos are uploaded. * Empty

+
    markup ships in functions.php * so admins can add logos via WP media without * template edits. * .knl-footer-disclaimer — R17 enhanced disclaimer. The first line * (AI/non-advisory) repeats D11's wording so * the same phrase appears in hero, mini-KPI, * and footer. Cookie/AdSense notice + privacy * link follow. * .knl-footer-links — flat link list (about/guide/disclaimer/ * privacy/contact). R14 moves お問い合わせ * out of the global nav so it's reachable * only from here. * * Reuses --knl-* tokens for visual consistency with the rest of the * site. Width is capped at 1100px to align with the affiliate disclosure. * ------------------------------------------------------------------ */ /* Footer content rendered via Cocoon's footer widget area (D39). * Cocoon already wraps widget output in its full-width
    * band and centers inner content with .footer-in.wrap, so we don't need * to break out of the parent or center children manually. We just style * the inner block-level layout (spacing, typography). */ .knl-footer { color: var(--knl-text-muted); font-size: 13px; line-height: 1.7; } /* Force Cocoon's 3-column footer-widgets layout into a single full-width * column. Cocoon does not expose a "1 column" footer setting in this * version, and we only use one of the three slots, so we collapse the * layout instead of leaving two empty thirds beside our content. Empty * slots are hidden so they don't reserve vertical space. */ .footer-widgets { display: block; margin: 0; padding: 0; } .footer-widgets .footer-left, .footer-widgets .footer-center, .footer-widgets .footer-right { width: 100%; float: none; display: block; margin: 0; padding: 0; } .footer-widgets .footer-left:empty, .footer-widgets .footer-center:empty, .footer-widgets .footer-right:empty { display: none; } /* The footer-menu nav slot (#navi-footer) is rendered by Cocoon even * when its menu location is unassigned, leaving an empty

の間も詰める。 */ .knl-track-summary > *:last-child { margin-bottom: 0 !important; } /* details (knl-track-history) 内も同様。
の閉じタグまでの余白を ゼロ化して、ブラウザ defaults の details 余白だけが残るようにする。 */ .knl-track-history > *:last-child { margin-bottom: 0 !important; } /* セクション直下の

(方向別 / 信頼度別 / 月別) の上余白は Cocoon defaults を尊重するが、表直後の

がカツカツに見えないよう最低限 確保。具体値は signal-eval 等の他セクションと統一感を保つ。 */ .knl-track-summary h2 { margin-top: 1.4rem; } .knl-track-summary > h2:first-child { margin-top: 0.6rem; } /* page 直下の

「全シナリオ履歴」(= .knl-track-summary 直後) は .knl-track-summary > *:last-child margin-bottom: 0 で密着しすぎるため、 明示的に margin-top を確保する。Cocoon の H2 styling (左ボーダー帯) が表に密着して見える問題を解消。 */ .knl-track-record-page > h2 { margin-top: 1.8rem; } /* ============================================================ * * R16 (D52): サイドバーウィジェット (KPI / 進行中 Top3 / ガイド) * * 中身は Python cron (apps.scenarios.sidebar_publish) が生成し * wp_options.knl_sidebar_snippet_html に保存。 KNL_Sidebar_Widget * (cocoon-child/widgets/knl-sidebar-widget.php) が echo するだけ。 * * デザイン方針: * - PC 右サイドバー / モバイル下部縦積み (Cocoon の sidebar layout に従う) * - フロントページ KPI と統一感を持たせるが、サイドバーは控えめなトーン * - 1 ウィジェット = 3 セクション (KPI / 進行中 / ガイド) を縦並び * ============================================================ */ .knl-sidebar-widget .knl-sidebar-section { margin: 0 0 1.2rem; padding: 0.9rem 1rem; background: #ffffff; border: 1px solid #e5e7eb; border-radius: var(--knl-radius); } .knl-sidebar-widget .knl-sidebar-section:last-child { margin-bottom: 0; } .knl-sidebar-widget .knl-sidebar-section h3 { margin: 0 0 0.6rem; padding: 0 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--knl-text); border-bottom: 2px solid var(--knl-accent); } .knl-sidebar-widget .knl-sidebar-empty { margin: 0; font-size: 0.85rem; color: var(--knl-text-muted); } /* --- KPI mini card --- */ .knl-sidebar-kpi-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.4rem; } .knl-sidebar-kpi-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 0.3rem 0.5rem; background: var(--knl-bg-soft); border-radius: 4px; margin: 0; } .knl-sidebar-kpi-list .label { font-size: 0.78rem; color: var(--knl-text-muted); } .knl-sidebar-kpi-list .value { font-size: 1rem; font-weight: 700; color: var(--knl-accent); } .knl-sidebar-kpi .knl-sidebar-period { margin: 0.4rem 0 0.2rem; font-size: 0.72rem; color: var(--knl-text-muted); } .knl-sidebar-kpi .knl-sidebar-note { margin: 0.3rem 0 0; font-size: 0.7rem; color: var(--knl-text-muted); line-height: 1.4; } /* --- Active scenarios Top3 --- */ .knl-sidebar-active-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .knl-sidebar-active-list .knl-sidebar-active-item { margin: 0; } .knl-sidebar-active-list a { display: block; padding: 0.5rem 0.6rem; background: var(--knl-bg-soft); border-radius: 4px; text-decoration: none; color: var(--knl-text); transition: background 0.15s; } .knl-sidebar-active-list a:hover { background: #e0e7ff; } .knl-sidebar-active-list .ticker { display: inline-block; font-weight: 700; font-size: 0.85rem; color: var(--knl-accent); margin-right: 0.4rem; } .knl-sidebar-active-list .name { display: inline; font-size: 0.85rem; font-weight: 600; } .knl-sidebar-active-list .meta { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--knl-text-muted); line-height: 1.4; } .knl-sidebar-active .knl-sidebar-link { margin: 0.4rem 0 0; font-size: 0.8rem; text-align: right; } .knl-sidebar-active .knl-sidebar-link a { color: var(--knl-accent); text-decoration: none; font-weight: 600; } .knl-sidebar-active .knl-sidebar-link a:hover { text-decoration: underline; } /* --- Guide links --- */ .knl-sidebar-guide ul { list-style: none; margin: 0; padding: 0; } .knl-sidebar-guide li { margin: 0; padding: 0.35rem 0; border-bottom: 1px dashed #f1f5f9; } .knl-sidebar-guide li:last-child { border-bottom: none; } .knl-sidebar-guide a { display: block; font-size: 0.85rem; color: var(--knl-text); text-decoration: none; } .knl-sidebar-guide a::before { content: "›"; margin-right: 0.4rem; color: var(--knl-accent); font-weight: 700; } .knl-sidebar-guide a:hover { color: var(--knl-accent); }