/* ============================================================
* kabu365 redesign CSS bundle (auto-generated)
* Source files: themes/editorial-red.css, tokens.css, phase1..phase8.css, phase9_mobile.css
* Generator: scripts/build-css.sh
* Do NOT edit this file directly — edit the source phase files and
* re-run `bash scripts/build-css.sh`.
* ============================================================ */
/* ----- themes/editorial-red.css ----- */
/* kabu365.net theme — Editorial Red (default)
- 既存ブランド色 #c1232b を継承した、紙面風 × 朱赤アクセントのテーマ
- このファイルだけ差し替えれば、サイト全体の配色を変更できる
- 別テーマを作る場合は同じ構造で themes/foo.css を作り、header.tmpl の link を切替
- 基本トークン (typography / layout / motion) は tokens.css 側で固定 */
:root {
/* Color: paper × ink (紙白 × 墨黒) */
--k365-paper: #faf8f2;
--k365-paper-deep: #f1ecdf;
--k365-paper-warm: #f5f1e6;
--k365-ink: #0c0c0c;
--k365-ink-soft: #2a2a2a;
--k365-ink-mute: #5a5852;
--k365-ink-faint: #908d85;
/* Color: data semantics (株式情報の伝統に従い「数値増加=朱赤、減少=緑」) */
--k365-signal-up: #c1232b;
--k365-signal-down: #0f4f3c;
--k365-signal-flat: #908d85;
--k365-signal-warn: #c89a3c;
--k365-signal-info: #1d3f8a;
/* Brand */
--k365-brand-red: #c1232b;
--k365-brand-red-deep: #931619;
/* セマンティック別名 (コンポーネントはこちらを参照する設計推奨) ----------
例: 配色を青基調にしたい時は、
--k365-brand-primary を別の色に変えるだけで全コンポーネントが追従する */
--k365-brand-primary: var(--k365-brand-red);
--k365-brand-primary-deep: var(--k365-brand-red-deep);
--k365-brand-primary-on: #ffffff; /* primary 上のテキスト色 */
--k365-brand-accent: var(--k365-signal-warn); /* 補助アクセント (現在=黄金) */
/* Surface */
--k365-surface-base: var(--k365-paper);
--k365-surface-deep: var(--k365-paper-deep);
--k365-surface-warm: var(--k365-paper-warm);
--k365-surface-inverse: var(--k365-ink);
--k365-text-base: var(--k365-ink);
--k365-text-soft: var(--k365-ink-soft);
--k365-text-mute: var(--k365-ink-mute);
--k365-text-faint: var(--k365-ink-faint);
--k365-text-on-inverse: var(--k365-paper);
/* Rule (細罫線) */
--k365-rule-strong: #0c0c0c;
--k365-rule: rgba(12, 12, 12, 0.18);
--k365-rule-faint: rgba(12, 12, 12, 0.08);
}
/* ----- tokens.css ----- */
/* kabu365.net redesign — design tokens (Phase 1)
このファイルは "色以外" のトークン (typography / layout / motion) のみ定義する。
配色は themes/*.css に分離されており、テーマファイルを差し替えるだけで全体の色を変更できる。
テーマ切替手順:
1. themes/editorial-red.css をコピーして themes/foo.css を作る
2. 必要な変数 (--k365-brand-*, --k365-signal-*, --k365-paper, --k365-ink 等) を書き換える
3. header.tmpl の を foo.css に変更
4. それだけで全ページの配色が切り替わる (CSS変数なのでビルド不要) */
:root {
/* === Typography ===
見出し=明朝 (Noto Serif JP)、本文=ゴシック (Noto Sans JP)、
数値=等幅 (JetBrains Mono)、特集の数字=セリフ斜体 (Bodoni Moda) */
--k365-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", serif;
--k365-font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif;
--k365-font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;
--k365-font-display: "Bodoni Moda", "Noto Serif JP", serif;
/* === Layout === */
--k365-max: 1380px;
--k365-gutter: clamp(16px, 2vw, 28px);
/* === Motion === */
--k365-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--k365-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
/* === Spacing scale (拡張余地として定義、Phase 2 以降のコンポーネントで利用予定) === */
--k365-space-xs: 4px;
--k365-space-sm: 8px;
--k365-space-md: 16px;
--k365-space-lg: 24px;
--k365-space-xl: 40px;
/* === Radius === */
--k365-radius-none: 0;
--k365-radius-sm: 2px;
--k365-radius-md: 4px;
/* === Z-index === */
--k365-z-nav: 50;
--k365-z-tooltip: 100;
--k365-z-modal: 200;
}
/* === Body baseline (モック準拠) ===
モック側で適用されているアンチエイリアス系プロパティ + 紙面の paper 背景色を当てる。
Bootstrap デフォルト白背景 (#fff) を paper (#faf8f2) で覆い、紙面の「肉色」トーンに統一 */
body {
background-color: var(--k365-paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "palt" 1;
}
/* ----- phase1.css ----- */
/* kabu365.net redesign — Phase 1 (masthead + ticker)
- 既存ナビ (赤い Bootstrap navbar) は手付かず
- 既存ページのレイアウトに干渉しないよう、すべて k365- prefix
- 後フェーズで他コンポーネント (KPI / heatmap / data-table 等) を別 CSS で追加 */
/* ===== Wrap ===== */
.k365-wrap {
max-width: var(--k365-max);
margin: 0 auto;
padding: 0 var(--k365-gutter);
}
/* ===== Masthead (新聞題字) ===== */
.k365-masthead {
border-bottom: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
padding: 14px 0 8px;
font-family: var(--k365-font-sans);
color: var(--k365-ink);
}
.k365-masthead-grid {
display: grid;
/* ロゴ中央寄せに戻す。左カラムは空のスペーサーを置いて 1fr auto 1fr のバランスを維持 */
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.k365-masthead-brand { display: flex; flex-direction: column; align-items: center; }
.k365-masthead-meta {
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--k365-ink-mute);
text-transform: uppercase;
line-height: 1.5;
}
.k365-masthead-meta--right { text-align: right; }
.k365-masthead-meta strong { color: var(--k365-ink); font-weight: 600; }
.k365-masthead-logo {
font-family: var(--k365-font-serif);
font-weight: 900;
font-size: clamp(28px, 4.6vw, 52px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--k365-ink);
text-decoration: none;
white-space: nowrap;
display: inline-block;
}
.k365-masthead-logo:hover { color: var(--k365-ink); text-decoration: none; }
.k365-masthead-logo .k365-logo-mark {
display: inline-block;
color: var(--k365-brand-red);
font-style: italic;
transform: skew(-6deg);
margin-right: 2px;
}
.k365-masthead-logo .k365-logo-tld {
/* ".net" は本体ロゴより小さめ + 色を抑えて補助情報として見せる */
display: inline-block;
color: var(--k365-ink);
font-family: var(--k365-font-serif);
font-weight: 700;
font-style: normal;
font-size: 0.45em;
margin-left: 4px;
vertical-align: 0.55em;
letter-spacing: 0;
}
.k365-masthead-tag {
text-align: center;
font-family: var(--k365-font-serif);
font-style: italic;
font-size: 12px;
color: var(--k365-ink-mute);
margin-top: 2px;
letter-spacing: 0.05em;
}
@media (max-width: 720px) {
.k365-masthead-grid {
grid-template-columns: 1fr;
text-align: center;
}
.k365-masthead-meta,
.k365-masthead-meta--right { text-align: center; }
}
/* ===== Live ticker ===== */
.k365-ticker {
background: var(--k365-ink);
color: var(--k365-paper);
border-bottom: 1px solid var(--k365-ink);
overflow: hidden;
padding: 7px 0;
position: relative;
}
.k365-ticker::before,
.k365-ticker::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 32px;
z-index: 2;
pointer-events: none;
}
.k365-ticker::before { left: 0; background: linear-gradient(90deg, var(--k365-ink), transparent); }
.k365-ticker::after { right: 0; background: linear-gradient(-90deg, var(--k365-ink), transparent); }
.k365-ticker-track {
display: flex;
/* シームレスループ: JS 側で track 子要素を2倍複製し、requestAnimationFrame で
transform: translateX を毎フレーム更新する。
元は CSS animation (k365-ticker-scroll) で動かしていたが、iOS Safari で
- prefers-reduced-motion (省電力 / 視差を減らす設定) で完全停止
- sticky :hover (タップ後に :hover 状態が残り animation-play-state: paused になる)
- will-change + transform animation の停止バグ
のいずれかに引っかかってモバイルで動かない事例が出たため、JS 駆動へ移行。
parent gap は使わない (set 末尾の隙間が狂って黒帯になる)。各 item の margin-right で
間隔を持たせ、set 末尾も同じ間隔を内包させる。 */
white-space: nowrap;
}
.k365-ticker-item {
font-family: var(--k365-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 10px;
margin-right: 48px;
color: var(--k365-paper);
}
.k365-ticker-label {
color: var(--k365-ink-faint);
font-size: 10px;
letter-spacing: 0.12em;
}
.k365-ticker-val {
color: var(--k365-paper);
font-weight: 600;
}
.k365-ticker-val.k365-up { color: #ff8a8a; }
.k365-ticker-val.k365-down { color: #6dd6a8; }
.k365-ticker-pulse {
display: inline-block;
width: 8px; height: 8px;
background: #ff5d5d;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 93, 93, 0.7);
animation: k365-pulse 2s infinite;
}
@keyframes k365-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 93, 93, 0.6); }
70% { box-shadow: 0 0 0 12px rgba(255, 93, 93, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 93, 93, 0); }
}
@media (prefers-reduced-motion: reduce) {
/* ticker-track は JS 駆動 (rAF) のため CSS animation 制御の対象外。
pulse のみ CSS animation を残しているのでこちらだけ停止する。 */
.k365-ticker-pulse { animation: none !important; }
}
/* ===== 既存赤ナビとの間隔調整 (Phase 4 で完全置換予定) =====
既存 navbar.tmpl は .navbar.navbar-dark のスタイルを使っている。
masthead+ticker を上に挟んだだけなので、特に余白追加はせずデフォルト挙動に任せる */
/* ----- phase2.css ----- */
/* kabu365.net redesign — Phase 2 (Hero + KPI + Heatmap + Sparklines)
- トップページ専用に追加されるセクションのスタイル
- 既存 index.tmpl のセクションは触らずに上に追加 (差し戻し簡単) */
/* ===== Hero (新聞ヘッドライン風) ===== */
.k365-hero {
padding: clamp(20px, 3.5vw, 40px) 0 clamp(14px, 2.4vw, 24px);
border-bottom: 4px double var(--k365-rule-strong);
margin-bottom: clamp(20px, 3vw, 32px);
}
.k365-hero-eyebrow {
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--k365-brand-red);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.k365-hero-eyebrow::before {
content: "";
width: 32px;
height: 2px;
background: var(--k365-brand-red);
display: inline-block;
}
.k365-hero-title {
/* モック .hero-title 準拠: 下 lede まで 18px 空ける (旧 14px だと詰まり、lede が h1 に張り付いて見えていた) */
font-family: var(--k365-font-serif);
font-weight: 900;
font-size: clamp(26px, 4.6vw, 52px);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 18px;
color: var(--k365-ink);
}
.k365-hero-title em {
font-style: italic;
color: var(--k365-brand-red);
font-family: var(--k365-font-display);
font-weight: 700;
}
.k365-hero-lede {
/* モック .hero-lede の computed (Chrome inspect 実測) に合わせる: clamp(15px, 1.4vw, 18px)。
旧 14-16px だと細く・色が薄く見えていた。color は #2a2a2a で従来から同一 */
font-family: var(--k365-font-serif);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.7;
color: var(--k365-ink-soft);
max-width: 62ch;
margin: 0 0 24px;
}
/* ===== KPI Strip ===== */
.k365-kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--k365-rule-strong);
border-bottom: 1px solid var(--k365-rule-strong);
}
.k365-kpi {
padding: 14px 18px;
border-right: 1px solid var(--k365-rule);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--k365-paper);
}
.k365-kpi:last-child { border-right: 0; }
.k365-kpi-label {
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k365-ink-mute);
}
.k365-kpi-value {
font-family: var(--k365-font-display);
font-weight: 700;
font-size: clamp(22px, 3vw, 34px);
line-height: 1;
color: var(--k365-ink);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.k365-kpi-value .k365-unit {
font-family: var(--k365-font-sans);
font-size: 0.5em;
font-weight: 500;
color: var(--k365-ink-mute);
margin-left: 4px;
}
.k365-kpi-sub {
font-family: var(--k365-font-mono);
font-size: 11px;
color: var(--k365-ink-mute);
letter-spacing: 0.04em;
}
.k365-kpi-sub a {
color: var(--k365-brand-red);
text-decoration: none;
}
.k365-kpi-sub a:hover { text-decoration: underline; }
@media (max-width: 720px) {
.k365-kpi-strip { grid-template-columns: repeat(2, 1fr); }
.k365-kpi { border-bottom: 1px solid var(--k365-rule); }
.k365-kpi:nth-child(2) { border-right: 0; }
.k365-kpi:nth-last-child(-n+2) { border-bottom: 0; }
}
/* ===== Section head (article style) ===== */
.k365-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: clamp(28px, 4vw, 48px) 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--k365-rule-strong);
flex-wrap: wrap;
}
.k365-section-head h2 {
font-family: var(--k365-font-serif);
font-weight: 900;
font-size: clamp(18px, 2.2vw, 24px);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--k365-ink);
}
.k365-section-head h2 .k365-num {
font-family: var(--k365-font-display);
font-style: italic;
color: var(--k365-brand-red);
margin-right: 8px;
font-size: 0.85em;
}
.k365-section-head .k365-section-meta {
font-family: var(--k365-font-mono);
font-size: 11px;
color: var(--k365-ink-mute);
letter-spacing: 0.04em;
}
.k365-section-head .k365-section-meta a {
color: var(--k365-brand-red);
text-decoration: none;
}
.k365-section-head .k365-section-meta a:hover { text-decoration: underline; }
/* ===== Heatmap =====
34 セル (33業種 + 業種未分類) は cols が割り切れない時に最終行に空きが出る。
container 背景を paper にして空きセルを目立たせない + cell の右下罫線で網目を作る。
container 自体には上左の罫線、cell には右下の罫線を持たせて重複なく綺麗な格子になる。
最終行の空きスペースの右/下端は cell の border が隣接して埋めるため違和感なし。 */
.k365-heatmap {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0;
background: var(--k365-paper);
/* container 側は上と左のみ。cell が右下に border を持つので重複しない。
最終行の空きスペースは右下が開放されるが paper と同色なので違和感なし */
border-top: 1px solid var(--k365-rule-strong);
border-left: 1px solid var(--k365-rule-strong);
}
.k365-heat-cell {
background: var(--k365-paper);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
color: var(--k365-ink);
position: relative;
overflow: hidden;
min-height: 80px;
transition: transform 0.18s var(--k365-ease-out);
border-right: 1px solid var(--k365-rule-strong);
border-bottom: 1px solid var(--k365-rule-strong);
}
.k365-heat-cell:hover {
transform: translateY(-2px);
z-index: 2;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
color: var(--k365-ink);
}
.k365-heat-cell .k365-heat-name {
font-family: var(--k365-font-sans);
font-size: 12px;
font-weight: 600;
color: var(--k365-ink-soft);
z-index: 1;
position: relative;
}
.k365-heat-cell .k365-heat-delta {
font-family: var(--k365-font-mono);
font-size: 16px;
font-weight: 700;
z-index: 1;
position: relative;
font-variant-numeric: tabular-nums;
color: var(--k365-ink);
}
.k365-heat-cell .k365-heat-count {
font-family: var(--k365-font-mono);
font-size: 10px;
color: var(--k365-ink-mute);
letter-spacing: 0.04em;
margin-top: auto;
z-index: 1;
position: relative;
}
/* WCAG: 旧実装は ::before に opacity を当てる構造で、Lighthouse / axe-core が
背景色を解釈できず color-contrast audit が常に fail する false positive を
引き起こしていた (Accessibility 94 の唯一の指摘要素)。
要素本体に rgba background-color を直接当てる形に変更し、軽い段階 (level=2/-2)
ではテキストを黒へ落として実コントラストも 4.5:1 を確保する (2026-05) */
.k365-heat-cell[data-level="3"] { background-color: rgba(193, 35, 43, 0.9); }
.k365-heat-cell[data-level="2"] { background-color: rgba(193, 35, 43, 0.55); }
.k365-heat-cell[data-level="1"] { background-color: rgba(193, 35, 43, 0.22); }
.k365-heat-cell[data-level="0"] { background-color: var(--k365-paper-deep); }
.k365-heat-cell[data-level="-1"] { background-color: rgba(15, 79, 60, 0.22); }
.k365-heat-cell[data-level="-2"] { background-color: rgba(15, 79, 60, 0.55); }
.k365-heat-cell[data-level="-3"] { background-color: rgba(15, 79, 60, 0.9); }
/* a11y (2026-05 追改): axe で再計測したところ、count 行のみ:
level=3 → #f7e1e2 on #c7383f = 4.13:1 (rgba 0.85 が原因で 4.5:1 落ち)
level=2 → #5a5852 (ink-mute) on #db8385 = 2.57:1 (淡赤背景に mute は通らない)
いずれも WCAG AA 落ちのため、count を:
level=3/-3 → 純白 (#fff on 濃赤 = 5.25:1)
level=2/-2 → ink (#0c0c0c on 淡赤/淡緑 = 7+ :1) と name/delta もまとめて指定 */
.k365-heat-cell[data-level="3"] .k365-heat-name,
.k365-heat-cell[data-level="-3"] .k365-heat-name,
.k365-heat-cell[data-level="3"] .k365-heat-delta,
.k365-heat-cell[data-level="-3"] .k365-heat-delta,
.k365-heat-cell[data-level="3"] .k365-heat-count,
.k365-heat-cell[data-level="-3"] .k365-heat-count { color: #fff; }
.k365-heat-cell[data-level="2"] .k365-heat-name,
.k365-heat-cell[data-level="-2"] .k365-heat-name,
.k365-heat-cell[data-level="2"] .k365-heat-delta,
.k365-heat-cell[data-level="-2"] .k365-heat-delta,
.k365-heat-cell[data-level="2"] .k365-heat-count,
.k365-heat-cell[data-level="-2"] .k365-heat-count { color: var(--k365-ink); }
@media (max-width: 560px) {
.k365-heatmap { grid-template-columns: repeat(2, 1fr); }
.k365-heat-cell { min-height: 70px; padding: 10px 12px; }
.k365-heat-cell .k365-heat-delta { font-size: 14px; }
}
/* ===== Sparkline (TOP10カードに埋め込む) ===== */
.k365-spark {
width: 56px;
height: 18px;
color: var(--k365-ink-mute);
flex-shrink: 0;
}
.k365-spark.k365-up { color: var(--k365-signal-up); }
.k365-spark.k365-down { color: var(--k365-signal-down); }
@media (max-width: 560px) {
.k365-spark { display: none; } /* スマホでは情報密度を下げる */
}
/* TOP10 既存の Bootstrap カード/テーブルにスパークラインを足すための調整 */
.k365-spark-cell {
display: inline-flex;
align-items: center;
gap: 8px;
vertical-align: middle;
}
/* ----- phase3.css ----- */
/* kabu365.net redesign — Phase 3 (Stock detail page)
- 銘柄ヘッダー (stock-masthead) と KPI ストリップ (stat-board) のみ
- 既存 chart / 公表履歴 / 関連銘柄カードはそのまま温存 */
/* ===== Stock masthead (銘柄ヘッダー) ===== */
.k365-stock-masthead {
border-top: 4px solid var(--k365-ink);
border-bottom: 1px solid var(--k365-rule);
padding: 24px 0 20px;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-top: 16px;
margin-bottom: 16px;
background: var(--k365-paper);
}
.k365-stock-eyebrow {
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--k365-ink-mute);
margin-bottom: 10px;
}
.k365-stock-eyebrow .k365-stock-code {
color: var(--k365-brand-red);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.12em;
margin-right: 12px;
}
.k365-stock-name {
font-family: var(--k365-font-serif);
font-weight: 900;
font-size: clamp(24px, 3.6vw, 40px);
line-height: 1.15;
margin: 0 0 6px;
letter-spacing: -0.02em;
color: var(--k365-ink);
}
.k365-stock-name-en {
font-family: var(--k365-font-display);
font-style: italic;
font-size: 14px;
color: var(--k365-ink-mute);
margin-bottom: 10px;
}
.k365-stock-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.k365-stock-tag {
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid var(--k365-rule-strong);
padding: 4px 8px;
color: var(--k365-ink-soft);
text-decoration: none;
background: var(--k365-paper);
}
.k365-stock-tag:hover {
background: var(--k365-ink);
color: var(--k365-paper);
}
@media (max-width: 720px) {
.k365-stock-masthead {
grid-template-columns: 1fr;
}
}
/* ===== Stat board (4-up KPI on stock detail) ===== */
.k365-stat-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
margin-top: 16px;
margin-bottom: 24px;
}
.k365-stat-board .k365-stat {
padding: 16px 18px;
border-right: 1px solid var(--k365-rule);
display: flex;
flex-direction: column;
gap: 6px;
}
.k365-stat-board .k365-stat:last-child { border-right: 0; }
.k365-stat-board .k365-stat-label {
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k365-ink-mute);
}
.k365-stat-board .k365-stat-value {
font-family: var(--k365-font-display);
font-weight: 700;
font-size: clamp(22px, 2.8vw, 32px);
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--k365-ink);
white-space: nowrap;
}
.k365-stat-board .k365-stat-value.k365-up { color: var(--k365-signal-up); }
.k365-stat-board .k365-stat-value.k365-down { color: var(--k365-signal-down); }
.k365-stat-board .k365-stat-value .k365-unit {
font-family: var(--k365-font-sans);
font-size: 0.5em;
font-weight: 500;
color: var(--k365-ink-mute);
margin-left: 2px;
}
.k365-stat-board .k365-stat-sub {
font-family: var(--k365-font-mono);
font-size: 11px;
color: var(--k365-ink-mute);
letter-spacing: 0.04em;
}
@media (max-width: 720px) {
.k365-stat-board { grid-template-columns: repeat(2, 1fr); }
.k365-stat-board .k365-stat {
border-bottom: 1px solid var(--k365-rule);
}
.k365-stat-board .k365-stat:nth-child(2) { border-right: 0; }
.k365-stat-board .k365-stat:nth-last-child(-n+2) { border-bottom: 0; }
.k365-stat-board .k365-stat-value { font-size: clamp(18px, 5vw, 24px); }
}
/* ===== Seller breakdown grid (個別銘柄ページ "01. 直近公表日の内訳 — 機関投資家別")
モック .seller-grid / .seller-card の k365 ポートで紙面の罫線グリッド風 ===== */
.k365-seller-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0;
background: var(--k365-paper);
margin-top: 16px;
margin-bottom: 16px;
}
.k365-seller-card {
background: var(--k365-paper);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
/* 各カードが 4 辺の罫線を box-shadow で自前で持つ。
container 側の border にしない理由: カードが 1 枚しかない場合に
container の border が grid 全幅に伸びて、右側に余分な横線として見えるため。
box-shadow なら隣接カードでは shadow が重なって視覚的に 1px に、
単独カードでは綺麗な箱で閉じる */
box-shadow: 0 0 0 1px var(--k365-rule-strong);
/* shadow が次セルに被るので、shadow が次セルの内容にかぶらないよう少し内側に z-index 上げ */
position: relative;
}
.k365-seller-card .k365-seller-top {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.k365-seller-card .k365-seller-ratio {
font-family: var(--k365-font-display, var(--k365-font-serif));
font-weight: 700;
font-size: 24px;
line-height: 1;
letter-spacing: -0.01em;
}
.k365-seller-card .k365-seller-delta {
font-family: var(--k365-font-mono);
font-size: 12px;
font-weight: 600;
}
.k365-seller-card .k365-seller-delta.k365-up { color: var(--k365-signal-up); }
.k365-seller-card .k365-seller-delta.k365-down { color: var(--k365-signal-down); }
.k365-seller-card .k365-seller-shares {
font-family: var(--k365-font-mono);
font-size: 12px;
color: var(--k365-ink-mute);
}
.k365-seller-card .k365-seller-shares strong { color: var(--k365-ink); font-weight: 700; }
.k365-seller-card .k365-seller-name {
font-size: 13px;
color: var(--k365-ink);
text-decoration: none;
border-top: 1px solid var(--k365-rule-faint);
padding-top: 8px;
}
.k365-seller-card .k365-seller-name:hover { color: var(--k365-brand-red); }
/* 機関名の右上に小さく出る「→ この銘柄のみ」フィルタ動線 (2026-05) */
.k365-seller-card .k365-seller-filter {
display: block;
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--k365-ink-mute);
text-decoration: none;
margin-top: 2px;
}
.k365-seller-card .k365-seller-filter:hover { color: var(--k365-brand-red); }
/* ===== Chart wrap (個別銘柄ページ "残高比率の推移" の枠)
モック .chart-wrap の k365 ポート、紙面風の罫線枠 ===== */
.k365-chart-wrap {
border: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
margin-top: 24px;
margin-bottom: 16px;
}
.k365-chart-wrap .k365-chart-head {
border-bottom: 1px solid var(--k365-rule);
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
background: var(--k365-paper-deep);
}
.k365-chart-wrap .k365-chart-head .k365-chart-title {
font-family: var(--k365-font-serif);
font-weight: 800;
font-size: 16px;
color: var(--k365-ink);
}
.k365-chart-wrap .k365-chart-head .k365-chart-meta {
font-family: var(--k365-font-mono);
font-size: 11px;
color: var(--k365-ink-mute);
}
.k365-chart-wrap .k365-chart-body { padding: 20px; }
.k365-chart-wrap .k365-chart-foot {
border-top: 1px solid var(--k365-rule-faint);
padding: 10px 20px;
font-family: var(--k365-font-mono);
font-size: 11px;
color: var(--k365-ink-mute);
line-height: 1.6;
}
.k365-chart-wrap .k365-chart-foot ul { margin: 0; padding-left: 18px; }
/* ----- phase4.css ----- */
/* kabu365.net redesign — Phase 4 (table pages: ranking / daily / delta / inout / perpbr)
- 既存 Bootstrap table の上に被せる軽量上書きスタイル
- tablesorter は引き続き jQuery 側で動作する (id ベース)
- 名前空間 k365- で衝突回避 */
/* ===== Filter bar (絞り込みフォーム) ===== */
.k365-filter-bar {
border: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
padding: 14px 18px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px 14px;
margin-bottom: 18px;
align-items: end;
}
.k365-filter-bar label {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k365-ink-mute);
margin: 0;
}
.k365-filter-bar select,
.k365-filter-bar input[type="date"] {
border: 0;
border-bottom: 1px solid var(--k365-rule-strong);
background: transparent;
padding: 6px 0;
font-family: var(--k365-font-sans);
font-size: 14px;
color: var(--k365-ink);
outline: none;
border-radius: 0;
}
.k365-filter-bar select:focus,
.k365-filter-bar input[type="date"]:focus { border-bottom-color: var(--k365-brand-red); }
.k365-filter-bar button {
background: var(--k365-ink);
color: var(--k365-paper);
border: 0;
padding: 14px 18px;
font-family: var(--k365-font-sans);
font-size: 13px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.04em;
transition: background 0.15s var(--k365-ease-out);
min-height: 44px;
white-space: nowrap;
border-radius: 0;
}
.k365-filter-bar button:hover { background: var(--k365-brand-red); }
@media (max-width: 991px) {
.k365-filter-bar { grid-template-columns: repeat(3, 1fr); }
.k365-filter-bar button { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.k365-filter-bar { grid-template-columns: 1fr 1fr; }
.k365-filter-bar button { grid-column: 1 / -1; }
}
/* ===== Data table wrap (横スクロール対応) ===== */
.k365-data-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
margin-bottom: 16px;
/* 右端にスクロール可能ヒント */
background-image:
linear-gradient(90deg, var(--k365-paper), var(--k365-paper)),
linear-gradient(90deg, var(--k365-paper), var(--k365-paper)),
linear-gradient(90deg, rgba(12,12,12,0.10), rgba(12,12,12,0)),
linear-gradient(-90deg, rgba(12,12,12,0.10), rgba(12,12,12,0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-color: var(--k365-paper);
background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
background-attachment: local, local, scroll, scroll;
}
.k365-data-table-wrap table {
margin-bottom: 0 !important;
border: 0 !important;
min-width: 720px;
}
/* sellers (空売り者一覧) — モバイル (<=720px) でだけ table を viewport に
収め、長い英語社名セル (.k365-cell-truncate) を ellipsis 切り詰めにする。
デスクトップは無修飾 (= 既定の min-width:720px) のまま影響なし。 (2026-05-04) */
@media (max-width: 720px) {
.k365-data-table-wrap--narrow {
background-image: none;
/* base の overflow-x:auto を打ち消す。--narrow は table-layout:fixed +
width:100% で必ず viewport 内に収まる前提なので横スクロールを完全に殺す
(border / sub-pixel レンダリングで 1px 越えても swipe させない) */
overflow-x: hidden;
}
/* table-layout:fixed + 端 2 列を最小幅で固定し、残り全部を .k365-cell-truncate に
配分。max-width:0 / table-layout:auto では切り詰め列の幅が小さくなり過ぎ、
表示できるはずの文字まで ellipsis されていた (2026-05-04) */
.k365-data-table-wrap--narrow table {
min-width: 0;
width: 100%;
table-layout: fixed;
}
.k365-data-table-wrap--narrow th:first-child,
.k365-data-table-wrap--narrow td:first-child {
width: 36px;
}
.k365-data-table-wrap--narrow th:last-child,
.k365-data-table-wrap--narrow td:last-child {
/* 「保有銘柄数」ヘッダ (5 文字 × 9.5px + letter-spacing 0.06em + padding) が
56px だと折り返してヘッダが縦書き気味になっていたので 76px に拡張 */
width: 76px;
}
.k365-data-table-wrap--narrow .k365-cell-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.k365-data-table-wrap--narrow .k365-cell-truncate a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* セル padding をモバイルでさらに圧縮し、文字表示領域を稼ぐ
(phase9_mobile の 8px 10px → 6px 8px) */
.k365-data-table-wrap--narrow td,
.k365-data-table-wrap--narrow th {
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* ===== 縦スクロール版 (公表履歴のように行数が伸び得るテーブル用) =====
- max-height + overflow-y で章のサイズを固定、ページを肥大させない
- thead を position: sticky で常時固定し、ソート・列見出しを参照しやすく
- tablesorter のソートは DOM 並び替えなので影響なし
- モバイルは 60vh、PC は固定 560px (PC は十分に行が見える) */
.k365-data-table-wrap--scroll {
/* 機関ページの「最新公表日の動き」が 152 件 / 業種分布も 33 業種規模で、
560px だと約 10 行しか見えず縦スクロール頻度が高かった。
PC で約 15 行が見える 800px に拡張 (2026-05) */
max-height: 800px;
overflow-y: auto;
}
@media (max-width: 720px) {
.k365-data-table-wrap--scroll { max-height: 60vh; }
}
.k365-data-table-wrap--scroll table thead th {
position: sticky;
top: 0;
z-index: 2;
/* sticky 時に下罫線が隠れることがあるので box-shadow で補強 */
box-shadow: 0 1px 0 0 var(--k365-rule-strong);
}
/* ===== Data table (Bootstrap .table.table-bordered の上に被せる) ===== */
.k365-data-table-wrap table thead th {
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k365-ink-mute) !important;
text-align: left;
padding: 12px 16px !important;
border: 0 !important;
border-bottom: 1px solid var(--k365-rule-strong) !important;
background-color: var(--k365-paper-deep) !important;
font-weight: 600;
white-space: nowrap;
}
.k365-data-table-wrap table tbody td {
padding: 11px 16px !important;
font-family: var(--k365-font-sans);
font-size: 13px;
border: 0 !important;
border-bottom: 1px solid var(--k365-rule-faint) !important;
vertical-align: middle;
background: var(--k365-paper);
white-space: nowrap;
}
/* 長い投資信託名などはセル内で折返しを許可し、テーブルの横スクロールを回避する */
.k365-data-table-wrap table tbody td .k365-name-text { white-space: normal; }
.k365-data-table-wrap table tbody tr:hover td {
background: var(--k365-paper-deep);
}
.k365-data-table-wrap table tbody tr:last-child td {
border-bottom: 0 !important;
}
/* セル内のリンク色 */
.k365-data-table-wrap table tbody td a {
color: var(--k365-brand-red);
text-decoration: none;
}
.k365-data-table-wrap table tbody td a:hover {
text-decoration: underline;
}
/* ===== Rank cell (1位=朱赤、2位=黄金、3位=紺) ===== */
/* `.k365-data-table-wrap table tbody td` が specificity (0,3,0) で
font-family / font-size を上書きしてしまうため、k365-rank-cell も同等以上の
セレクタで書いてモック (Bodoni Moda 18px italic) を効かせる */
.k365-data-table-wrap table tbody td.k365-rank-cell,
.k365-rank-cell {
font-family: var(--k365-font-display);
font-style: italic;
font-size: 18px;
color: var(--k365-ink-mute);
width: 40px;
font-variant-numeric: tabular-nums;
/* 順位 / NO 列は中央寄せで統一 (2026-05) */
text-align: center;
}
.k365-data-table-wrap table thead th.k365-rank-head,
.k365-rank-head { text-align: center; }
.k365-data-table-wrap table tbody td.k365-rank-cell.k365-top1,
.k365-rank-cell.k365-top1 { color: var(--k365-brand-red); font-weight: 700; }
.k365-data-table-wrap table tbody td.k365-rank-cell.k365-top2,
.k365-rank-cell.k365-top2 { color: var(--k365-signal-warn); font-weight: 700; }
.k365-data-table-wrap table tbody td.k365-rank-cell.k365-top3,
.k365-rank-cell.k365-top3 { color: var(--k365-signal-info); font-weight: 700; }
/* ===== Code cell ===== */
.k365-code-cell {
font-family: var(--k365-font-mono);
font-weight: 700;
color: var(--k365-brand-red) !important;
font-size: 13px;
}
/* ===== Pill (市場区分タグ) ===== */
.k365-pill {
display: inline-block;
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.05em;
padding: 2px 8px;
border: 1px solid var(--k365-rule);
color: var(--k365-ink-soft);
white-space: nowrap;
background: var(--k365-paper);
}
/* code.tmpl の備考セル「新規 / 解消」: 上昇 = ブランド赤, 下降 = シグナルダウン色 */
.k365-pill.k365-up {
color: var(--k365-signal-up);
border-color: var(--k365-signal-up);
}
.k365-pill.k365-down {
color: var(--k365-signal-down);
border-color: var(--k365-signal-down);
}
/* ===== Ratio bar (比率の視覚化) ===== */
.k365-ratio-bar {
display: inline-block;
width: 80px;
height: 6px;
background: var(--k365-paper-deep);
margin-right: 10px;
vertical-align: middle;
overflow: hidden;
position: relative;
}
.k365-ratio-bar::after {
content: "";
position: absolute;
inset: 0;
width: var(--k365-bar, 0%);
background: var(--k365-brand-red);
}
/* 数値セル */
.k365-num-cell {
font-family: var(--k365-font-mono);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
/* ===== Pager (Bootstrap pagination は維持しつつ装飾) ===== */
.k365-pager {
display: flex;
justify-content: center;
gap: 4px;
margin: 24px 0;
font-family: var(--k365-font-mono);
font-size: 12px;
}
.k365-pager .page-link {
border-radius: 0 !important;
border-color: var(--k365-rule) !important;
color: var(--k365-ink) !important;
padding: 8px 14px !important;
letter-spacing: 0.05em;
}
.k365-pager .page-item.active .page-link,
.k365-pager .page-item.disabled .page-link {
background: var(--k365-ink) !important;
color: var(--k365-paper) !important;
border-color: var(--k365-ink) !important;
}
.k365-pager .page-link:hover {
background: var(--k365-ink) !important;
color: var(--k365-paper) !important;
border-color: var(--k365-ink) !important;
}
/* tablesorter のソート矢印は既存テーマ image を使うので変更しない */
/* ----- phase5.css ----- */
/* kabu365.net redesign — Phase 5 (Ad placements: native style)
- 既存の派手な虹グラデバナーを廃し、紙面の特集記事 / インラインCTAに置換
- 名前空間 k365- で衝突回避
- 「広告」ラベルは保持 (信頼性 / 法令準拠) */
/* ===== ad-inline (テーブルページや銘柄ページの本文中、コンパクトな帯) ===== */
.k365-ad-inline {
border: 1px solid var(--k365-rule-strong);
border-left: 6px solid var(--k365-signal-down);
padding: 16px 20px;
background: var(--k365-paper-warm);
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
margin: 18px 0;
position: relative;
font-family: var(--k365-font-sans);
}
.k365-ad-inline.k365-ad-letsreal {
border-left-color: var(--k365-signal-warn);
}
.k365-ad-label {
position: absolute;
top: 6px;
right: 8px;
font-family: var(--k365-font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
/* a11y: ink-faint (#908d85) は paper-warm 上で 2.93:1 と WCAG 落ち。
ink-mute (#5a5852) に上げて 6.6:1 を確保 (2026-05) */
color: var(--k365-ink-mute);
}
.k365-ad-inline .k365-ad-text {
flex: 1;
padding-right: 50px;
}
.k365-ad-inline .k365-ad-text strong {
display: block;
font-family: var(--k365-font-serif);
font-weight: 800;
font-size: 16px;
margin-bottom: 4px;
color: var(--k365-ink);
line-height: 1.4;
}
.k365-ad-inline .k365-ad-text span {
font-size: 12px;
color: var(--k365-ink-mute);
line-height: 1.6;
}
.k365-ad-inline .k365-ad-cta {
background: var(--k365-signal-down);
color: var(--k365-paper);
padding: 12px 20px;
font-family: var(--k365-font-sans);
font-size: 12px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
/* a11y/perf 2026-05: bundle.css 非同期化 + Bootstrap 切り出し後、 background transition の
初回適用が一部 Chromium / Lighthouse で currentTime=0 から進まず、CTA が透明のまま
「コントラスト 1.06 で WCAG 落ち」と axe に判定される事象を確認。hover 時の即時切替で十分なため
transition を削除 (色の切替自体は :hover 規則で即反映) */
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
letter-spacing: 0.04em;
}
.k365-ad-inline .k365-ad-cta:hover {
background: var(--k365-brand-red-deep);
color: var(--k365-paper);
}
.k365-ad-inline.k365-ad-letsreal .k365-ad-cta {
background: var(--k365-signal-warn);
}
.k365-ad-inline.k365-ad-letsreal .k365-ad-cta:hover {
background: #a37a26;
}
@media (max-width: 720px) {
.k365-ad-inline {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 18px 16px 16px;
}
.k365-ad-inline .k365-ad-text {
padding-right: 50px;
}
.k365-ad-inline .k365-ad-cta {
width: 100%;
text-align: center;
}
}
/* ===== ad-feature (トップページの紙面特集風 2カラム) ===== */
.k365-ad-feature {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
margin-top: 24px;
margin-bottom: 24px;
position: relative;
}
.k365-ad-feature .k365-ad-label {
background: var(--k365-paper);
padding: 3px 8px;
border: 1px solid var(--k365-rule);
color: var(--k365-ink-mute);
z-index: 2;
}
.k365-ad-feature .k365-ad-body {
padding: clamp(20px, 3vw, 36px);
display: flex;
flex-direction: column;
justify-content: center;
}
.k365-ad-feature .k365-ad-visual {
background: var(--k365-ink);
color: var(--k365-paper);
padding: clamp(20px, 3vw, 36px);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.k365-ad-feature .k365-ad-visual::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 12px);
pointer-events: none;
}
.k365-ad-feature .k365-ad-eyebrow {
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--k365-brand-red);
font-weight: 600;
margin-bottom: 10px;
}
.k365-ad-feature h2,
.k365-ad-feature .k365-ad-feature-title {
font-family: var(--k365-font-serif);
font-weight: 900;
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.25;
margin: 0 0 14px;
letter-spacing: -0.01em;
color: var(--k365-ink);
}
.k365-ad-feature p {
font-family: var(--k365-font-serif);
font-size: 14px;
line-height: 1.7;
color: var(--k365-ink-soft);
margin: 0 0 20px;
}
.k365-ad-feature .k365-ad-feature-cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--k365-ink);
color: var(--k365-paper);
padding: 14px 22px;
font-family: var(--k365-font-sans);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: background 0.15s var(--k365-ease-out);
letter-spacing: 0.02em;
min-height: 44px;
border: 0;
cursor: pointer;
}
.k365-ad-feature .k365-ad-feature-cta:hover {
background: var(--k365-brand-red);
color: var(--k365-paper);
}
.k365-ad-feature .k365-ad-feature-cta .arrow {
font-family: var(--k365-font-mono);
transition: transform 0.18s var(--k365-ease-out);
}
.k365-ad-feature .k365-ad-feature-cta:hover .arrow {
transform: translateX(4px);
}
.k365-ad-feature .k365-ad-visual-badge {
font-family: var(--k365-font-display);
font-style: italic;
font-weight: 700;
font-size: clamp(40px, 6vw, 80px);
line-height: 1;
color: var(--k365-paper);
z-index: 1;
}
.k365-ad-feature .k365-ad-visual-sub {
font-family: var(--k365-font-serif);
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin-top: 12px;
z-index: 1;
}
/* バリアント別カラー */
.k365-ad-feature.k365-variant-letsreal .k365-ad-visual { background: #1a1d2b; }
.k365-ad-feature.k365-variant-letsreal .k365-ad-visual-badge { color: var(--k365-signal-warn); }
.k365-ad-feature.k365-variant-record .k365-ad-visual { background: #103a30; }
.k365-ad-feature.k365-variant-record .k365-ad-visual-badge { color: #fefae6; }
@media (max-width: 720px) {
.k365-ad-feature { grid-template-columns: 1fr; }
/* モバイルではビジュアルを上に統一 */
.k365-ad-feature .k365-ad-visual { order: -1; min-height: 140px; padding: 20px; }
.k365-ad-feature .k365-ad-visual-badge { font-size: clamp(32px, 10vw, 56px); }
.k365-ad-feature .k365-ad-body { padding: 20px; }
.k365-ad-feature h2,
.k365-ad-feature .k365-ad-feature-title { font-size: clamp(18px, 5vw, 24px); }
.k365-ad-feature p { font-size: 13px; }
.k365-ad-feature .k365-ad-feature-cta { width: 100%; justify-content: center; }
}
/* ----- phase6.css ----- */
/* kabu365.net redesign — Phase 6 (residual mockup parity)
- ウォッチリスト
- movers-grid (TOP10 左右並び)
- 紙面記事コラム (article)
- 新フッター 3カラム
- セクション番号 (k365-section-head 拡張)
- ratio-bar 細バー
- 新 primary-nav (sticky 横スクロール) */
/* ===== Watchlist ===== */
.k365-watchlist {
border: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
margin-bottom: 16px;
}
.k365-watchlist-empty {
padding: 28px 20px;
text-align: center;
color: var(--k365-ink-mute);
font-family: var(--k365-font-serif);
font-style: italic;
font-size: 14px;
line-height: 1.7;
}
.k365-watchlist-empty strong {
font-style: normal;
color: var(--k365-brand-red);
}
.k365-watchlist-hint {
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--k365-ink-faint);
text-transform: uppercase;
display: block;
margin-top: 8px;
font-style: normal;
}
.k365-watchlist-list { list-style: none; margin: 0; padding: 0; }
.k365-watchlist-list li {
display: grid;
/* code | 銘柄名 | 残高比率 (label+value) | 前回比 (label+value) | 削除ボタン */
grid-template-columns: 64px 1fr 110px 110px auto;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-top: 1px solid var(--k365-rule-faint);
}
.k365-watchlist-metric {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
line-height: 1.1;
}
.k365-watchlist-metric-label {
font-family: var(--k365-font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k365-ink-mute);
}
.k365-watchlist-ratio,
.k365-watchlist-delta {
font-family: var(--k365-font-mono);
font-variant-numeric: tabular-nums;
font-size: 13px;
text-align: right;
white-space: nowrap;
}
.k365-watchlist-ratio { font-weight: 700; color: var(--k365-ink); }
.k365-watchlist-delta { color: var(--k365-ink-mute); }
.k365-watchlist-delta.k365-up { color: var(--k365-signal-up); }
.k365-watchlist-delta.k365-down { color: var(--k365-signal-down); }
@media (max-width: 720px) {
.k365-watchlist-list li {
grid-template-columns: 56px 1fr 88px 88px auto;
gap: 8px;
padding: 10px 12px;
}
}
.k365-watchlist-list li:first-child { border-top: 0; }
.k365-watchlist-code {
font-family: var(--k365-font-mono);
font-weight: 700;
color: var(--k365-brand-red);
font-size: 13px;
}
.k365-watchlist-name {
font-size: 13px;
color: var(--k365-ink-soft);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.k365-watchlist-name:hover { color: var(--k365-brand-red); text-decoration: underline; }
.k365-watchlist-remove {
background: transparent;
border: 0;
color: var(--k365-ink-faint);
font-family: var(--k365-font-mono);
font-size: 16px;
cursor: pointer;
padding: 4px 10px;
min-width: 44px;
min-height: 32px;
}
.k365-watchlist-remove:hover { color: var(--k365-brand-red); }
/* ウォッチリスト追加ボタン (個別銘柄ページ) */
.k365-watch-add-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1px solid var(--k365-rule-strong);
color: var(--k365-ink);
padding: 10px 16px;
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s var(--k365-ease-out), color 0.15s var(--k365-ease-out);
min-height: 44px;
}
.k365-watch-add-btn:hover {
background: var(--k365-ink);
color: var(--k365-paper);
}
.k365-watch-add-btn.k365-is-added {
background: var(--k365-brand-red);
color: var(--k365-paper);
border-color: var(--k365-brand-red);
}
.k365-watch-add-btn .k365-icon { font-size: 14px; line-height: 1; }
/* Visit greeting (section meta 内のテキスト) */
.k365-visit-greeting strong {
font-weight: 700;
}
/* ===== Movers grid (TOP10 左=増加 / 右=減少 / 関連リンクの 1 全幅+2x2 連結) ===== */
.k365-movers-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
/* seller-grid と同じく外周は top + left のみ。right と bottom は各 child の
border-right / border-bottom が担う。最終行が埋まらない時の空セルが罫で囲われない */
border-top: 1px solid var(--k365-rule-strong);
border-left: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
margin-bottom: 16px;
}
.k365-movers-grid > * {
border-right: 1px solid var(--k365-rule-strong);
border-bottom: 1px solid var(--k365-rule-strong);
}
.k365-movers-col-head {
padding: 12px 16px;
border-bottom: 1px solid var(--k365-rule-strong);
display: flex;
justify-content: space-between;
align-items: baseline;
background: var(--k365-paper-deep);
}
.k365-movers-col-head .k365-movers-title {
font-family: var(--k365-font-serif);
font-weight: 800;
font-size: 15px;
}
.k365-movers-col-head .k365-movers-title.k365-up { color: var(--k365-signal-up); }
.k365-movers-col-head .k365-movers-title.k365-down { color: var(--k365-signal-down); }
.k365-movers-col-head .k365-movers-more {
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--k365-ink-soft);
}
.k365-movers-col-head .k365-movers-more:hover { color: var(--k365-brand-red); }
.k365-movers-list { list-style: none; margin: 0; padding: 0; }
.k365-movers-row {
display: grid;
grid-template-columns: 28px 64px 1fr auto auto;
align-items: center;
gap: 10px;
padding: 10px 16px;
text-decoration: none;
color: var(--k365-ink);
transition: background-color 0.12s var(--k365-ease-out);
}
/* 行間の faint 罫線は TOP10 のように list 内で連続スタックされた時のみ適用。
関連リンク (movers-grid 直下に row が並ぶ) では grid 側の罫線が担うので不要 */
.k365-movers-list .k365-movers-row { border-top: 1px solid var(--k365-rule-faint); }
.k365-movers-list .k365-movers-row:first-child { border-top: 0; }
.k365-movers-row:hover { background: var(--k365-paper-deep); }
.k365-movers-rank {
font-family: var(--k365-font-mono);
font-size: 11px;
/* WCAG AA: ink-faint (#908d85) は paper 上で 3.12:1 で 4.5:1 未達のため ink-mute (#5a5852, 6.36:1) に変更 */
color: var(--k365-ink-mute);
font-variant-numeric: tabular-nums;
}
.k365-movers-code {
font-family: var(--k365-font-mono);
font-size: 13px;
font-weight: 700;
color: var(--k365-brand-red);
}
.k365-movers-name {
font-family: var(--k365-font-sans);
font-size: 13px;
font-weight: 500;
color: var(--k365-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.k365-movers-spark {
width: 56px;
height: 18px;
color: var(--k365-ink-mute);
flex-shrink: 0;
}
.k365-movers-spark.k365-up { color: var(--k365-signal-up); }
.k365-movers-spark.k365-down { color: var(--k365-signal-down); }
.k365-movers-delta {
font-family: var(--k365-font-mono);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
min-width: 64px;
}
.k365-movers-delta.k365-up { color: var(--k365-signal-up); }
.k365-movers-delta.k365-down { color: var(--k365-signal-down); }
@media (max-width: 720px) {
.k365-movers-grid { grid-template-columns: 1fr; }
/* モバイルでは単列。各 child の border-right は grid の右辺、border-bottom は行 divider を兼ねる */
.k365-movers-row { grid-template-columns: 24px 56px 1fr auto; gap: 8px; padding: 9px 12px; }
.k365-movers-spark { display: none; }
}
/* ===== Article column (空売り残高情報とは の紙面風) ===== */
.k365-article {
padding: 24px 0;
column-count: 2;
column-gap: 32px;
column-rule: 1px solid var(--k365-rule);
font-family: var(--k365-font-serif);
font-size: 14px;
line-height: 1.85;
color: var(--k365-ink-soft);
}
.k365-article p { margin: 0 0 14px; break-inside: avoid; }
.k365-article p:first-child::first-letter {
font-family: var(--k365-font-display);
float: left;
font-size: 4.6em;
line-height: 0.85;
padding: 6px 8px 0 0;
color: var(--k365-brand-red);
font-weight: 700;
}
.k365-article .k365-article-foot {
column-span: all;
font-family: var(--k365-font-mono);
font-size: 11px;
color: var(--k365-ink-mute);
margin-top: 12px;
letter-spacing: 0.04em;
}
/* a11y: 記事内 / mono 注釈内リンクは Bootstrap デフォルト #0d6efd を継承して 4.23:1 (paper 背景) と WCAG 落ち。
ink (=#0c0c0c) に下線で 18:1 を確保 (2026-05) */
.k365-article a,
.k365-mono a {
color: var(--k365-ink);
text-decoration: underline;
text-underline-offset: 2px;
}
.k365-article a:hover,
.k365-article a:focus,
.k365-mono a:hover,
.k365-mono a:focus {
color: var(--k365-brand-red);
}
@media (max-width: 720px) {
.k365-article { column-count: 1; column-rule: 0; }
}
/* ===== New footer (3-column + colophon) ===== */
.k365-site-footer {
/* モック .site-footer 完全一致: margin-top と padding を揃える */
margin-top: clamp(60px, 8vw, 100px);
border-top: 4px double var(--k365-rule-strong);
padding: 32px 0 40px;
background: var(--k365-paper);
font-family: var(--k365-font-sans);
}
.k365-site-footer .k365-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 32px;
}
.k365-footer-colophon {
/* モック .colophon 準拠: margin はブラウザデフォルト (上下 1em) に任せ、上 8px の余分を削除 */
font-family: var(--k365-font-serif);
font-style: italic;
font-size: 13px;
color: var(--k365-ink-mute);
line-height: 1.7;
max-width: 50ch;
}
.k365-footer-title {
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k365-ink-mute);
margin: 0 0 10px;
}
.k365-site-footer ul { list-style: none; padding: 0; margin: 0; }
.k365-site-footer li { margin-bottom: 6px; }
.k365-site-footer a {
font-size: 13px;
text-decoration: none;
color: var(--k365-ink-soft);
}
.k365-site-footer a:hover { color: var(--k365-brand-red); }
.k365-footer-legal {
/* モック .legal 準拠: margin-top 28px (旧 24px から 4px 拡大) */
margin-top: 28px;
padding-top: 16px;
border-top: 1px solid var(--k365-rule-faint);
font-size: 11px;
color: var(--k365-ink-mute);
line-height: 1.7;
}
.k365-footer-legal a {
/* legal 文中のリンクは「リンクとわかる」表示に: 文中サイズ継承 + 下線 + 青 */
/* WCAG AA: #0d6efd は paper 上で 4.24:1 で 4.5:1 未達のため一段濃い #0a58ca (5.95:1) に変更 */
font-size: inherit;
color: #0a58ca;
text-decoration: underline;
}
.k365-footer-legal a:hover { color: #0843a0; }
@media (max-width: 720px) {
.k365-site-footer .k365-footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* ===== Section number (k365-section-head は phase2.css にある。num の表示は既存) ===== */
/* ===== Ranking table ratio-bar =====
td に display: flex を付けると table-cell 挙動が崩れて行高が縮み、
その列だけ底辺の border-bottom が他列と 7px ずれる。
td は table-cell のままにして、bar / strong は vertical-align: middle で揃える */
.k365-ratio-cell {
font-family: var(--k365-font-mono);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.k365-ratio-cell .k365-ratio-bar {
display: inline-block;
width: 80px;
height: 6px;
background: var(--k365-paper-deep);
overflow: hidden;
position: relative;
vertical-align: middle;
margin-right: 8px;
}
.k365-ratio-cell .k365-ratio-bar::after {
content: "";
position: absolute;
inset: 0;
width: var(--k365-bar, 0%);
background: var(--k365-brand-red);
}
.k365-ratio-cell strong {
font-weight: 700;
min-width: 56px;
text-align: right;
}
@media (max-width: 720px) {
.k365-ratio-cell .k365-ratio-bar { display: none; }
}
/* ===== New primary nav (Phase 4 で先送りした完全置換用) =====
既存 .navbar.navbar-dark[style="background-color: #c1232b;"] を非表示にし、
新 .k365-primary-nav を表示する切替は navbar.tmpl で制御 */
.k365-primary-nav {
border-bottom: 1px solid var(--k365-rule);
background: var(--k365-paper);
position: sticky;
top: 0;
z-index: 50;
/* backdrop-filter は position:fixed の含有ブロックを生成し、検索ドロップダウンが
想定外の y 位置に飛ぶため除去 (背景は不透明 paper で十分視認可能) */
}
.k365-primary-nav-inner {
/* モック準拠: 左右 padding を持たない (padding: 6px 0)。
これによりビューポートが 1380px 未満のとき、最初のリンクの左端が
breadcrumb / hero のテキスト左端より少し外側にせり出し、紙面の見出しらしい配置になる。
1380px 超では max-width で中央寄せ */
display: flex;
align-items: center;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
padding: 6px 0;
max-width: var(--k365-max);
margin: 0 auto;
}
.k365-primary-nav-inner::-webkit-scrollbar { display: none; }
.k365-nav-link {
font-family: var(--k365-font-sans);
font-size: 13px;
font-weight: 500;
color: var(--k365-ink-soft);
padding: 10px 14px;
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color 0.18s var(--k365-ease-out), border-color 0.18s var(--k365-ease-out);
}
.k365-nav-link:hover { color: var(--k365-brand-red); }
.k365-nav-link.k365-is-active {
color: var(--k365-ink);
border-bottom-color: var(--k365-brand-red);
font-weight: 700;
}
.k365-nav-search {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--k365-rule-strong);
padding: 4px 0;
min-width: 240px;
position: relative;
}
.k365-nav-search input {
flex: 1;
border: 0;
background: transparent;
font-family: var(--k365-font-sans);
font-size: 13px;
padding: 6px 4px;
outline: none;
color: var(--k365-ink);
min-width: 100px;
}
.k365-nav-search input::placeholder { color: var(--k365-ink-faint); }
.k365-nav-search-icon {
font-family: var(--k365-font-mono);
font-size: 12px;
color: var(--k365-ink-mute);
letter-spacing: 0.05em;
}
.k365-nav-search-results {
/* position: fixed にして primary-nav-inner の overflow-x:auto によるクリッピングを回避。
top / left / width は JS で input.getBoundingClientRect() から動的に設定 */
position: fixed;
background: var(--k365-paper);
border: 1px solid var(--k365-rule-strong);
z-index: 1050;
max-height: 400px;
overflow-y: auto;
display: none;
}
.k365-nav-search-results.k365-active { display: block; }
.k365-nav-search-results .k365-search-item {
display: block;
padding: 8px 12px;
text-decoration: none;
color: var(--k365-ink);
border-top: 1px solid var(--k365-rule-faint);
font-size: 13px;
}
.k365-nav-search-results .k365-search-item:first-child { border-top: 0; }
.k365-nav-search-results .k365-search-item:hover { background: var(--k365-paper-deep); }
.k365-nav-search-results .k365-search-item .k365-search-code {
font-family: var(--k365-font-mono);
font-weight: 700;
color: var(--k365-brand-red);
margin-right: 8px;
}
@media (max-width: 720px) {
.k365-nav-search { min-width: 0; width: 100%; padding-bottom: 6px; margin: 6px 0; }
.k365-primary-nav-inner { flex-wrap: wrap; }
}
/* 旧 Bootstrap 赤ナビは 2026-10 に HTML ごと外したので、隠すための規則も外した */
/* ----- phase7.css ----- */
/* kabu365.net redesign — Phase 7
- サブページ (ranking / delta / inout / perpbr / code 等) 共通の breadcrumb と page hero
- 旧 Bootstrap breadcrumb / page-header (h4 + text-muted) を紙面風スタイルに置換
- ヘッダ / フッタは別フェーズで構築済みのため、ここでは「ページ内冒頭」のみを担う */
/* ===== Breadcrumb (モノスペース簡素ナビ) ===== */
.k365-breadcrumb {
/* モック準拠: 上にナビ (sticky) があるため breadcrumb は十分な padding-top で離す。
ナビ直下に詰まらないよう 24px 取り、下は hero 側で 24px 取るので 12px */
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--k365-ink-mute);
text-transform: uppercase;
padding: 24px 0 12px;
line-height: 1.6;
}
.k365-breadcrumb a {
color: var(--k365-ink-mute);
text-decoration: none;
transition: color 0.12s var(--k365-ease-out);
}
.k365-breadcrumb a:hover { color: var(--k365-brand-red); }
.k365-breadcrumb .k365-breadcrumb-sep {
margin: 0 8px;
color: var(--k365-ink-faint);
}
.k365-breadcrumb [aria-current="page"] {
color: var(--k365-ink);
font-weight: 600;
}
/* ===== Page hero (compact) — ranking / delta / inout などサブページ共通
モック ranking.html: section.hero に `padding: 24px 0 16px` の inline style と一致させる
下端の 4px double 罫線が紙面の見出し下罫を再現する */
.k365-page-hero {
padding: 24px 0 16px;
margin-bottom: 20px;
border-bottom: 4px double var(--k365-rule-strong);
}
.k365-page-hero-eyebrow {
/* モック準拠: brand-red 文字色 + 32x2px の横棒 ::before、下方の h1 まで 14px 空ける */
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--k365-brand-red);
font-weight: 600;
text-transform: uppercase;
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 12px;
}
.k365-page-hero-eyebrow::before {
content: "";
display: inline-block;
width: 32px;
height: 2px;
background: var(--k365-brand-red);
flex-shrink: 0;
}
.k365-page-hero-title {
/* モック ranking 準拠: hero-title compact (28→44px)、lede まで 18px 空ける */
font-family: var(--k365-font-serif);
font-weight: 900;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--k365-ink);
margin: 0 0 18px;
}
.k365-page-hero-title em {
font-style: italic;
color: var(--k365-brand-red);
font-family: var(--k365-font-display, var(--k365-font-serif));
}
.k365-page-hero-sub {
font-family: var(--k365-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--k365-ink-mute);
margin: 8px 0 0;
}
@media (max-width: 720px) {
.k365-page-hero { padding: 16px 0 14px; }
}
/* ===== Page hero lede (長文説明) — モック .hero-lede と一致 ===== */
.k365-page-hero-lede {
font-family: var(--k365-font-serif);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.7;
color: var(--k365-ink-soft);
margin: 0 0 24px;
max-width: 62ch;
}
.k365-page-hero-lede strong {
/* モック準拠: strong は太字のみで色は本文 (ink-soft) を継承。
色を ink (#0c0c0c) に上書きすると周囲とコントラストがつきすぎ、強調が浮いてしまう */
font-weight: 700;
}
/* ===== Pager (紙面風ページネーション) — 旧 Bootstrap pagination の置き換え ===== */
.k365-pager {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin-top: 28px;
margin-bottom: 28px;
font-family: var(--k365-font-mono);
font-size: 12px;
}
.k365-pager a,
.k365-pager span {
padding: 8px 14px;
border: 1px solid var(--k365-rule);
text-decoration: none;
color: var(--k365-ink);
letter-spacing: 0.05em;
background: var(--k365-paper);
transition: background-color 0.12s var(--k365-ease-out), color 0.12s var(--k365-ease-out);
}
.k365-pager a:hover {
background: var(--k365-ink);
color: var(--k365-paper);
border-color: var(--k365-ink);
}
.k365-pager .k365-current {
background: var(--k365-ink);
color: var(--k365-paper);
border-color: var(--k365-ink);
font-weight: 700;
}
.k365-pager .k365-disabled {
/* a11y: ink-faint (#908d85) on paper-deep (#f1ecdf) = 2.81:1 で WCAG AA 落ち。
ink-mute (#5a5852) で 6.3:1 を確保。「無効」感は cursor + background + アンダーライン無しで維持 (2026-05) */
color: var(--k365-ink-mute);
cursor: not-allowed;
background: var(--k365-paper-deep);
}
/* ----- phase8.css ----- */
/* kabu365.net redesign — Phase 8
- 日次公表一覧 (/karauri/daily) 用の専用コンポーネント
- 旧 Bootstrap カード/list-group をすべて k365 系に置換するための補助スタイル */
/* ===== Daily grid (左サイド: 公表日+空売り者 / 右メイン: 4 カテゴリ集計) ===== */
.k365-daily-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 28px;
align-items: start;
}
.k365-daily-side { position: sticky; top: 64px; }
.k365-daily-main { display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 992px) {
.k365-daily-grid { grid-template-columns: 1fr; gap: 20px; }
.k365-daily-side { position: static; }
}
/* 詰めた section-head (日次の左サイド向け) */
.k365-section-head-tight { padding-bottom: 8px; margin-top: 18px; margin-bottom: 10px; }
/* ===== 公表日入力行 ===== */
.k365-daily-date-row {
display: flex;
gap: 8px;
align-items: stretch;
margin-bottom: 4px;
}
.k365-daily-date-input {
flex: 1 1 auto;
border: 0;
border-bottom: 1px solid var(--k365-rule-strong);
background: transparent;
padding: 6px 0;
font-family: var(--k365-font-sans);
font-size: 14px;
color: var(--k365-ink);
height: 40px;
}
.k365-daily-date-input:focus {
outline: none;
border-bottom-color: var(--k365-brand-red);
}
.k365-daily-date-btn {
flex: 0 0 auto;
border: 0;
background: var(--k365-ink);
color: var(--k365-paper);
font-family: var(--k365-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
padding: 0 18px;
cursor: pointer;
height: 40px;
transition: background-color 0.12s var(--k365-ease-out);
}
.k365-daily-date-btn:hover { background: var(--k365-brand-red); color: var(--k365-paper); }
/* ===== モバイル用セラー select ===== */
.k365-daily-mobile-select { display: none; }
@media (max-width: 992px) {
.k365-daily-mobile-select { display: flex; gap: 8px; margin-bottom: 10px; }
.k365-daily-mobile-dropdown {
flex: 1 1 auto;
border: 0;
border-bottom: 1px solid var(--k365-rule-strong);
background: transparent;
padding: 6px 0;
font-family: var(--k365-font-sans);
font-size: 14px;
height: 40px;
}
.k365-daily-seller-list { display: none; }
}
/* ===== セラーリスト (PC) — 紙面の細い一覧表 ===== */
.k365-daily-seller-list {
border: 1px solid var(--k365-rule-strong);
background: var(--k365-paper);
max-height: 70vh;
overflow-y: auto;
}
.k365-daily-seller-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 0;
border-bottom: 1px solid var(--k365-rule-faint);
background: transparent;
padding: 9px 14px;
font-family: var(--k365-font-sans);
font-size: 13px;
color: var(--k365-ink);
text-align: left;
cursor: pointer;
transition: background-color 0.12s var(--k365-ease-out);
}
.k365-daily-seller-row:last-child { border-bottom: 0; }
.k365-daily-seller-row:hover { background: var(--k365-paper-deep); color: var(--k365-brand-red); }
.k365-daily-seller-row.k365-is-active {
background: var(--k365-ink);
color: var(--k365-paper);
font-weight: 600;
}
.k365-daily-seller-row.k365-is-active .k365-daily-seller-count {
background: var(--k365-paper);
color: var(--k365-ink);
}
.k365-daily-seller-name {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 10px;
}
.k365-daily-seller-count {
flex: 0 0 auto;
font-family: var(--k365-font-mono);
font-size: 11px;
background: var(--k365-brand-red);
color: var(--k365-paper);
padding: 2px 8px;
border-radius: 999px;
min-width: 32px;
text-align: center;
}
/* ===== カテゴリ別セクション間隔 ===== */
.k365-daily-cat { margin: 0; }
.k365-daily-cat .k365-section-head h2 em {
font-style: italic;
color: var(--k365-brand-red);
font-family: var(--k365-font-display, var(--k365-font-serif));
}
.k365-daily-cat .k365-section-head h2 .k365-num {
color: var(--k365-brand-red);
font-family: var(--k365-font-display, var(--k365-font-serif));
font-size: 1.15em;
margin-right: 8px;
}
/* ===== Sector daily 専用ページ (/karauri/sector/:gyoshu) のカード =====
業種ヒートマップから飛んだ先で、銘柄ごとの内訳 (機関単位の delta) を見せるためのカード。
各カードは header (銘柄概要 + 集計) + 機関明細テーブルの 2 段構成 */
.k365-sector-card {
border-top: 1px solid var(--k365-rule-strong);
padding: 16px 0 8px;
}
.k365-sector-card:last-of-type { border-bottom: 1px solid var(--k365-rule-strong); }
.k365-sector-card-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 16px 24px;
margin-bottom: 10px;
}
.k365-sector-card-title {
display: flex;
align-items: baseline;
gap: 12px;
flex: 1 1 280px;
min-width: 0;
}
.k365-sector-card-code {
font-family: var(--k365-font-mono);
font-weight: 700;
font-size: 18px;
color: var(--k365-brand-red);
text-decoration: none;
letter-spacing: 0.02em;
}
.k365-sector-card-code:hover { text-decoration: underline; }
.k365-sector-card-name {
font-family: var(--k365-font-serif);
font-weight: 700;
font-size: clamp(16px, 2vw, 20px);
color: var(--k365-ink);
}
.k365-sector-card-stats {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.k365-sector-card-stat {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 72px;
}
.k365-sector-card-stat-label {
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k365-ink-mute);
}
.k365-sector-card-stat-value {
font-family: var(--k365-font-display, var(--k365-font-serif));
font-weight: 700;
font-size: 18px;
line-height: 1.2;
font-variant-numeric: tabular-nums;
color: var(--k365-ink);
}
.k365-sector-card-stat-value.k365-up { color: var(--k365-signal-up); }
.k365-sector-card-stat-value.k365-down { color: var(--k365-signal-down); }
@media (max-width: 720px) {
.k365-sector-card-head { gap: 8px 12px; }
.k365-sector-card-stats { gap: 12px; width: 100%; }
}
/* ===== 読み方ガイド (Terminal-style guide tab + 2列パネル) =====
業種ヒートマップなど、初見ユーザに読解の手引きを与えるためのコンポーネント。
見出しと本体 (図/グリッド) の間に細い monospace タブを置き、開くとガイドパネルが
ターミナル/雑誌スプレッド風に展開する。/ なのでキーボード/タッチ
全対応 + JS なし */
.k365-guide {
margin: 0 0 16px;
/* k365-section-head の下罫線に密着させるため top margin は無し */
}
/* タブ自体 — 細い monospace バー。閉じている時は十字罫線の交点に座るような出で立ち */
.k365-guide > summary {
list-style: none;
cursor: pointer;
/* fit-content + flex で「タブ幅は中身分・縦マージンは block と同じ振る舞い」にする
(inline-flex だとインラインの line-box が間に挟まり margin-bottom: -1px が効かない) */
display: flex;
width: fit-content;
align-items: center;
gap: 12px;
padding: 8px 14px 8px 12px;
border: 1px solid var(--k365-rule-strong);
border-top: 0; /* 上の section-head の下罫線と一体化 */
background: var(--k365-paper);
font-family: var(--k365-font-mono);
font-size: 12px;
line-height: 1;
letter-spacing: 0.06em;
color: var(--k365-ink);
text-transform: none;
user-select: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
/* 矩形のシャープさを保つため角丸無し */
/* タブの下辺とパネルの上辺を 1px に重ねるため負のマージン */
margin-bottom: -1px;
position: relative;
z-index: 1;
}
.k365-guide > summary::-webkit-details-marker { display: none; }
.k365-guide > summary::marker { content: ''; }
.k365-guide > summary:focus-visible {
outline: 2px solid var(--k365-brand-red);
outline-offset: 2px;
}
/* タブ内のパーツ */
.k365-guide-tab-marker {
font-weight: 700;
color: var(--k365-brand-red);
font-feature-settings: 'tnum';
/* font-size は下のルールで 0 にして実体テキストを隠すため、width は em ではなく px 固定 */
width: 26px;
display: inline-block;
text-align: left;
}
.k365-guide-tab-label {
font-family: var(--k365-font-serif);
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
color: var(--k365-ink);
}
.k365-guide-tab-en {
color: var(--k365-ink-mute);
font-size: 11px;
letter-spacing: 0.16em;
border-left: 1px solid var(--k365-rule);
padding-left: 12px;
}
/* hover / open 状態 */
.k365-guide > summary:hover {
background: var(--k365-ink);
color: var(--k365-paper);
}
.k365-guide > summary:hover .k365-guide-tab-label,
.k365-guide > summary:hover .k365-guide-tab-en { color: var(--k365-paper); }
.k365-guide > summary:hover .k365-guide-tab-en { border-left-color: rgba(255,255,255,0.3); }
.k365-guide > summary:hover .k365-guide-tab-marker { color: var(--k365-paper); }
.k365-guide[open] > summary {
background: var(--k365-ink);
color: var(--k365-paper);
border-color: var(--k365-ink);
}
.k365-guide[open] > summary .k365-guide-tab-label,
.k365-guide[open] > summary .k365-guide-tab-en { color: var(--k365-paper); }
.k365-guide[open] > summary .k365-guide-tab-en { border-left-color: rgba(255,255,255,0.3); }
.k365-guide[open] > summary .k365-guide-tab-marker {
color: var(--k365-paper);
/* タブが開いたら [+] の見た目を [−] っぽく擬似変更 */
}
.k365-guide[open] > summary .k365-guide-tab-marker::before {
content: '[−]';
font-family: inherit;
}
.k365-guide[open] > summary .k365-guide-tab-marker > * { display: none; }
/* 単純化のため擬似要素ではなく文字の置換を別途 — 実体テキストは [+] のままで CSS で隠す */
.k365-guide > summary .k365-guide-tab-marker { font-size: 0; }
.k365-guide > summary .k365-guide-tab-marker::before {
content: '[+]';
font-size: 12px;
}
.k365-guide[open] > summary .k365-guide-tab-marker::before { content: '[−]'; }
/* ===== ガイド パネル ===== */
.k365-guide-panel {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
border: 1px solid var(--k365-rule-strong);
/* tab は inline-flex で幅が短いため、上辺の罫線はパネル側で引いて
タブの margin-bottom: -1px で 1px 重ねる */
background: var(--k365-paper);
/* 開閉アニメ — fade のみ。translateY(-4px) を入れると details の display 切替直後に
Chrome の compositor が transform: translateY(-4px) を残したまま animation を進めず、
新しく追加したパネル border-top がサマリタブを横切って描画される問題があったため除去。 */
animation: k365-guide-fade-in 220ms ease-out;
}
/* 1段組バリアント: 凡例のみで右列を持たないとき */
.k365-guide-panel-single { grid-template-columns: 1fr; }
@keyframes k365-guide-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.k365-guide-col {
padding: 18px 22px 20px;
}
.k365-guide-col + .k365-guide-col {
border-left: 1px solid var(--k365-rule);
}
.k365-guide-col-head {
font-family: var(--k365-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--k365-ink-mute);
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--k365-rule);
text-transform: uppercase;
}
/* 凡例 — カラースウォッチ + 説明 */
.k365-guide-legend {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--k365-font-sans);
font-size: 13px;
line-height: 1.5;
color: var(--k365-ink);
}
.k365-guide-legend li {
display: grid;
grid-template-columns: 32px 1fr;
align-items: center;
gap: 12px;
}
.k365-guide-legend strong { font-weight: 700; }
/* スウォッチは heatmap セルの色と一致させる (data-level 共通) */
.k365-guide-swatch {
width: 28px;
height: 16px;
border: 1px solid var(--k365-rule);
background: var(--k365-paper);
position: relative;
overflow: hidden;
}
.k365-guide-swatch::before {
content: '';
position: absolute;
inset: 0;
background: var(--k365-heat, transparent);
opacity: var(--k365-heat-strength, 0);
}
.k365-guide-swatch[data-level="3"] { --k365-heat: var(--k365-signal-up); --k365-heat-strength: 0.9; }
.k365-guide-swatch[data-level="1"] { --k365-heat: var(--k365-signal-up); --k365-heat-strength: 0.22; }
.k365-guide-swatch[data-level="0"] { --k365-heat: var(--k365-paper-deep); --k365-heat-strength: 1; }
.k365-guide-swatch[data-level="-1"] { --k365-heat: var(--k365-signal-down); --k365-heat-strength: 0.22; }
.k365-guide-swatch[data-level="-3"] { --k365-heat: var(--k365-signal-down); --k365-heat-strength: 0.9; }
/* 用語定義 (+0.23pt / 1銘柄 / pt の意味) — METRICS 列 */
.k365-guide-defs {
margin: 0 0 4px;
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 14px;
align-items: baseline;
font-size: 12px;
line-height: 1.55;
}
.k365-guide-defs dt {
font-family: var(--k365-font-display, var(--k365-font-serif));
font-weight: 700;
font-size: 13px;
color: var(--k365-brand-red);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.k365-guide-defs dd {
margin: 0;
color: var(--k365-ink);
}
.k365-guide-defs em {
font-style: italic;
color: var(--k365-ink);
font-weight: 600;
}
/* 段階の境目 — 色スウォッチ + 範囲表記。dl の grid 配置で揃える */
.k365-guide-thresholds {
margin: 0 0 4px;
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 14px;
align-items: center;
font-family: var(--k365-font-mono);
font-size: 12px;
line-height: 1.5;
color: var(--k365-ink);
}
.k365-guide-thresholds dt {
display: inline-flex;
gap: 2px;
}
.k365-guide-thresholds dt .k365-guide-swatch {
width: 16px;
height: 12px;
}
.k365-guide-thresholds dd {
margin: 0;
color: var(--k365-ink-mute);
font-variant-numeric: tabular-nums;
}
.k365-guide-thresholds em {
font-style: normal;
font-weight: 700;
color: var(--k365-ink);
}
/* 読み解き Tips — ▸ + 短い文 */
.k365-guide-tips {
list-style: none;
margin: 0 0 12px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
font-family: var(--k365-font-sans);
font-size: 13px;
line-height: 1.65;
color: var(--k365-ink);
}
.k365-guide-tips li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 4px;
}
.k365-guide-tip-num {
color: var(--k365-brand-red);
font-weight: 700;
font-size: 13px;
line-height: 1.65;
text-align: center;
}
.k365-guide-tips em {
font-style: italic;
color: var(--k365-brand-red);
font-weight: 600;
}
.k365-guide-note {
margin: 0;
font-family: var(--k365-font-mono);
font-size: 11px;
line-height: 1.6;
color: var(--k365-ink-mute);
padding-top: 10px;
border-top: 1px dashed var(--k365-rule);
letter-spacing: 0.02em;
}
/* 凡例直下の説明文 — 「その日 業種に属する銘柄ごとに〜」の集計ロジック説明 */
.k365-guide-desc {
margin: 8px 0 12px;
font-family: var(--k365-font-sans);
font-size: 12.5px;
line-height: 1.7;
color: var(--k365-ink);
}
.k365-guide-desc em {
font-style: italic;
font-weight: 600;
color: var(--k365-ink);
}
/* レスポンシブ: 720px 未満は 1カラム積み */
@media (max-width: 720px) {
.k365-guide-panel { grid-template-columns: 1fr; }
.k365-guide-col + .k365-guide-col {
border-left: 0;
border-top: 1px solid var(--k365-rule);
}
.k365-guide-col { padding: 16px 18px; }
.k365-guide > summary { width: 100%; justify-content: flex-start; }
.k365-guide-tab-en { display: none; }
}
/* sector ページの機関明細テーブル: 各カードでカラム位置を揃えるため固定レイアウト */
.k365-sector-seller-table {
table-layout: fixed;
width: 100%;
}
.k365-sector-seller-table .k365-col-seller { width: auto; }
.k365-sector-seller-table .k365-col-num { width: 120px; }
.k365-sector-seller-table .k365-num-cell { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.k365-sector-seller-table .k365-col-num { width: 90px; }
}
/* ----- phase9_mobile.css ----- */
/* kabu365.net redesign — Phase 9 (Mobile refinement)
------------------------------------------------------
目的: iPhone SE (375x667) を含む狭いビューポートで
1) 既存の崩れ (CSS Grid 子要素のオーバーフロー) を解消
2) 情報密度を上げる (font/padding/gap の階層を細密化、heatmap 3列化、footer 2列化)
3) PC 版に一切影響を与えない (全ルールを @media (max-width: ...) で囲む)
配置順序: bundle.css の後に link されるので、同 specificity でも cascade で勝つ。
差し戻したい場合は header.tmpl からこのファイルの を 1 行外すだけで完全リバート可能。
------------------------------------------------------ */
/* =====================================================================
A. 崩れ修正 (max-width: 991px) — Grid item の auto-min-content による
ページ全体の横スクロール発生を防ぐ
--------------------------------------------------------------------- */
/* ---- A-1. ranking / delta / inout の filter-bar -----
原因: