/* カブシルベ 共通スタイル
*
* プロトタイプ(prototype/index.html)で確認した見た目をそのまま使う。
* 見出しは明朝体、上昇は赤・下落は緑（日本の株式表記の慣習）。
* ライト/ダークの両テーマとスマートフォン幅に対応。
*/
:root{
--ground:#F6F7F5;
--surface:#FFFFFF;
--surface-2:#ECEFEA;
--ink:#18222C;
--ink-2:#4A5560;
--ink-3:#77818B;
--rule:#D9DDD6;
--rule-strong:#BFC6BC;
--indigo:#1E4D7B;
--indigo-ink:#143755;
--indigo-soft:#E5ECF3;
--up:#C0392B;
--down:#2E7D5B;
--warn:#A9741B;
--warn-soft:#F6EEDC;
--serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
--sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium",system-ui,sans-serif;
--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
--gut:20px;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ground:#12181D; --surface:#1A222A; --surface-2:#222C35;
--ink:#E9ECE8; --ink-2:#B2BAC0; --ink-3:#848E96;
--rule:#2C3740; --rule-strong:#3E4A54;
--indigo:#82B5DD; --indigo-ink:#A8CCE9; --indigo-soft:#1B2E3E;
--up:#E8776B; --down:#5FB78D; --warn:#D6A44E; --warn-soft:#2E2718;
}
}
:root[data-theme="dark"]{
--ground:#12181D; --surface:#1A222A; --surface-2:#222C35;
--ink:#E9ECE8; --ink-2:#B2BAC0; --ink-3:#848E96;
--rule:#2C3740; --rule-strong:#3E4A54;
--indigo:#82B5DD; --indigo-ink:#A8CCE9; --indigo-soft:#1B2E3E;
--up:#E8776B; --down:#5FB78D; --warn:#D6A44E; --warn-soft:#2E2718;
}
*{box-sizing:border-box}
body{
margin:0; background:var(--ground); color:var(--ink);
font-family:var(--sans); font-size:15px; line-height:1.85;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.4; text-wrap:balance; margin:0}
p{margin:0}
a{color:var(--indigo); text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--indigo); outline-offset:2px; border-radius:2px}
table{border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums}
/* ---------- prototype banner ---------- */
.proto{
background:var(--warn-soft); border-bottom:1px solid var(--warn);
color:var(--ink); font-size:12.5px; line-height:1.6;
}
.proto .in{max-width:1080px; margin:0 auto; padding:9px var(--gut); display:flex; gap:10px; align-items:flex-start}
.proto b{color:var(--warn)}
/* ---------- header ---------- */
header.site{
position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
background:var(--surface); border-bottom:1px solid var(--rule);
}
.hwrap{max-width:1080px; margin:0 auto; padding:0 var(--gut);
display:flex; align-items:center; gap:18px; min-height:60px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; padding:10px 0; text-decoration:none; color:inherit}
.mark{width:28px; height:28px; flex:0 0 28px}
.brand .nm{font-family:var(--serif); font-size:21px; font-weight:700; letter-spacing:.06em; line-height:1}
.brand .tg{font-size:10.5px; color:var(--ink-3); letter-spacing:.14em; line-height:1; margin-top:5px}
/* メインのナビ。
以前は button 向けに書いてあったが、HTML は a なので当たっておらず、
4つのリンクが素の下線テキストとして続けて並び、1本のリンクに見えていた。
アイコンを添え、1つずつが独立した行き先だと分かる形にする。 */
nav.main{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; padding-bottom:6px}
nav.main a{
display:flex; align-items:center; gap:7px;
font-size:13.5px; color:var(--ink-2); text-decoration:none;
padding:8px 12px; border-radius:7px;
border:1px solid transparent;
white-space:nowrap;
}
nav.main a svg{
width:17px; height:17px; flex:0 0 17px;
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
color:var(--ink-3);
}
nav.main a:hover{color:var(--ink); background:var(--surface-2); text-decoration:none}
nav.main a:hover svg{color:var(--indigo)}
/* いま見ているページ。角丸の箱に下線を引くと端が曲がって歪むので、
下線ではなく面と枠で示す。 */
nav.main a[aria-current="page"]{
color:var(--indigo-ink); font-weight:700;
background:var(--surface-2); border-color:var(--rule);
}
nav.main a[aria-current="page"] svg{color:var(--indigo)}
nav.main a:focus-visible{outline:2px solid var(--indigo); outline-offset:1px}
/* ---------- layout ---------- */
main{max-width:1080px; margin:0 auto; padding:0 var(--gut) 8px}
.view{padding-block:30px; display:flex; flex-direction:column; gap:38px}
.stack{display:flex; flex-direction:column; gap:14px}
.eyebrow{font-size:11.5px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase}
.lede{color:var(--ink-2); max-width:62ch}
h1.page{font-size:clamp(27px,5.2vw,38px); letter-spacing:.02em}
h2.sec{font-size:20px; letter-spacing:.03em; padding-bottom:9px; border-bottom:2px solid var(--ink); display:inline-block}
.sechead{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
border-bottom:1px solid var(--rule); margin-bottom:4px}
.sechead h2{border:0; padding-bottom:9px; margin-bottom:-1px; border-bottom:2px solid var(--ink)}
.meta{font-size:12px; color:var(--ink-3)}
/* ---------- market strip ---------- */
.mkt{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.mkt div{background:var(--surface); padding:13px 15px}
.mkt .k{font-size:11.5px; color:var(--ink-3); letter-spacing:.08em}
.mkt .v{font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1.3}
.mkt .d{font-size:12.5px; font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
/* ---------- 数字の読み方カード ---------- */
/* 1枚に1つの指標だけを載せる。まとめて長文にすると、
初心者はどこが何の話か分からなくなるため。 */
.reads{display:grid; gap:14px}
.read{background:var(--surface); border:1px solid var(--rule);
border-left:3px solid var(--indigo); padding:17px 18px}
.read-head{display:flex; align-items:baseline; justify-content:space-between;
gap:14px; flex-wrap:wrap; margin-bottom:10px}
.read-head h3{font-size:16px; letter-spacing:.02em; margin:0}
.read-fig{text-align:right; white-space:nowrap}
.read-fig .k{display:block; font-size:11px; color:var(--ink-3); letter-spacing:.08em}
.read-fig .v{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums;
letter-spacing:-.01em}
.read p{margin:0 0 9px; color:var(--ink-2); font-size:14px; line-height:1.9}
.read p:last-child{margin-bottom:0}
@media (max-width:640px){
.read-head{flex-direction:column; gap:4px}
.read-fig{text-align:left}
}
/* ---------- このサイトにしか無いもの（トップ冒頭） ---------- */
.uniq{display:grid; gap:14px}
.uniq h3{font-size:17px; letter-spacing:.02em; margin:0}
.uniq p{margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.9}
.uniq table.data{font-size:13.5px}
/* ---------- 危なさの分解 ---------- */
/* 段階は色だけで示さない。色が見えない人にも伝わるよう、
必ず「低い」「高い」という言葉を添える。色はその補助。 */
.riskmark{
display:inline-block; margin-left:8px; padding:1px 8px; border-radius:11px;
font-family:var(--sans); font-size:11.5px; font-weight:700;
letter-spacing:.04em; vertical-align:2px; white-space:nowrap;
border:1px solid currentColor;
}
.riskmark.r1{color:var(--down)}
.riskmark.r2{color:var(--down)}
.riskmark.r3{color:var(--ink-3)}
.riskmark.r4{color:var(--warn)}
.riskmark.r5{color:var(--up)}
.read.risk-4{border-left-color:var(--warn)}
.read.risk-5{border-left-color:var(--up)}
/* ---------- signpost cards ---------- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.post{background:var(--surface); border:1px solid var(--rule); border-top:3px solid var(--indigo);
padding:18px 17px; display:flex; flex-direction:column; gap:12px}
.post .term{font-size:11.5px; color:var(--ink-3); letter-spacing:.1em}
.post h3{font-size:19px}
.post .cnt{font-size:31px; font-weight:700; font-family:var(--sans); font-variant-numeric:tabular-nums; line-height:1}
.post .cnt span{font-size:13px; font-weight:400; color:var(--ink-3); margin-left:3px}
.post .why{font-size:13.5px; color:var(--ink-2); line-height:1.8}
/* 「載せていない会社」の断り。本文より控えめだが、読み飛ばされない程度に */
.post .why.omit{margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
font-size:12.5px; color:var(--ink-3)}
.post .why.omit b{display:block; color:var(--ink-2); margin-bottom:2px}
.picks{display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--rule); padding-top:11px}
.pick{display:flex; align-items:baseline; gap:9px; font-size:13.5px}
.pick .code{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.pick .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* ---------- risk meter ---------- */
.risk{display:inline-flex; gap:3px; align-items:center; vertical-align:middle}
.risk i{width:13px; height:7px; background:var(--rule-strong); display:block}
.risk i.on{background:var(--warn)}
.risklab{font-size:11.5px; color:var(--ink-3); margin-left:5px}
/* ---------- generic blocks ---------- */
.panel{background:var(--surface); border:1px solid var(--rule); padding:20px 19px}
.quiet{background:var(--surface-2); border:1px solid var(--rule); padding:16px 17px; font-size:13.5px; color:var(--ink-2); line-height:1.85}
.note{border-left:3px solid var(--warn); background:var(--warn-soft); padding:13px 15px; font-size:13px; line-height:1.8}
.kv{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:13.5px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0}
/* ---------- table ---------- */
.tw{overflow-x:auto; border:1px solid var(--rule); background:var(--surface)}
table.data{font-size:13.5px; min-width:520px}
table.data th,table.data td{padding:10px 13px; text-align:right; border-bottom:1px solid var(--rule); white-space:nowrap}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data thead th{background:var(--surface-2); font-weight:700; font-size:12px; color:var(--ink-2); letter-spacing:.04em}
table.data tbody tr:last-child td{border-bottom:0}
table.data tfoot td{background:var(--surface-2); font-weight:700; border-top:2px solid var(--rule-strong)}
.hint{font-size:12px; color:var(--ink-3); display:block; font-weight:400; line-height:1.6}
/* ---------- verdict rows ---------- */
.verdicts{display:flex; flex-direction:column; border:1px solid var(--rule); background:var(--surface)}
.verdict{display:grid; grid-template-columns:96px 46px 1fr; gap:14px; align-items:start;
padding:15px 16px; border-bottom:1px solid var(--rule)}
.verdict:last-child{border-bottom:0}
.verdict .lab{font-size:13px; color:var(--ink-2); font-weight:700}
.verdict .lab small{display:block; font-weight:400; color:var(--ink-3); font-size:11px}
.mk{font-family:var(--serif); font-size:25px; line-height:1; text-align:center}
.mk.o{color:var(--up)} .mk.t{color:var(--warn)} .mk.x{color:var(--ink-3)}
.verdict p{font-size:13.5px; color:var(--ink-2)}
/* ---------- ad slot ---------- */
.ad{border:1px dashed var(--rule-strong); background:var(--surface-2);
display:grid; place-items:center; text-align:center; padding:22px 16px; gap:3px}
.ad b{font-size:12.5px; color:var(--ink-2); letter-spacing:.06em}
.ad small{font-size:11px; color:var(--ink-3)}
.ad.lead{min-height:110px}
/* ---------- glossary ---------- */
.oneline{font-family:var(--serif); font-size:clamp(19px,3.6vw,25px); line-height:1.65; color:var(--ink)}
.example{border:1px solid var(--rule); background:var(--surface); padding:17px}
.example .row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dotted var(--rule); font-size:14px}
.example .row:last-child{border-bottom:0}
.example .row b{font-variant-numeric:tabular-nums}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{font-size:12.5px; border:1px solid var(--rule-strong); padding:4px 10px; color:var(--ink-2); background:var(--surface)}
ul.relist{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
ul.relist li{display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:6px 18px;
padding:13px 0; border-bottom:1px solid var(--rule); align-items:baseline}
ul.relist li a{font-weight:600; color:var(--indigo); text-decoration:none}
ul.relist li a:hover{text-decoration:underline}
ul.relist li span{font-size:13.5px; color:var(--ink-2); line-height:1.7}
@media (max-width:560px){ ul.relist li{grid-template-columns:1fr} }
/* ---------- promises ---------- */
ol.promise{list-style:none; margin:0; padding:0; counter-reset:p; display:flex; flex-direction:column; gap:0}
ol.promise li{counter-increment:p; display:grid; grid-template-columns:34px 1fr; gap:14px;
padding:15px 0; border-bottom:1px solid var(--rule)}
ol.promise li:last-child{border-bottom:0}
ol.promise li::before{content:counter(p,decimal-leading-zero); font-family:var(--mono); font-size:12px;
color:var(--indigo); padding-top:4px}
ol.promise b{display:block; font-family:var(--serif); font-size:16px; margin-bottom:3px}
ol.promise span{font-size:13.5px; color:var(--ink-2)}
/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule); background:var(--surface); margin-top:20px}
.fwrap{max-width:1080px; margin:0 auto; padding:30px var(--gut) calc(34px + env(safe-area-inset-bottom,0px));
display:flex; flex-direction:column; gap:20px}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:26px}
.fgrid h4{font-size:12px; letter-spacing:.12em; color:var(--ink-3); font-family:var(--sans); font-weight:700; margin-bottom:9px}
.fgrid ul{list-style:none; margin:0; padding:0; font-size:13px; display:flex; flex-direction:column; gap:6px}
.disc{font-size:11.5px; color:var(--ink-3); line-height:1.85; border-top:1px solid var(--rule); padding-top:16px}
.linkbtn{font:inherit; font-size:13.5px; background:none; border:0; padding:0; color:var(--indigo);
cursor:pointer; text-decoration:underline; text-underline-offset:3px}
@media (max-width:860px){
.posts{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
:root{--gut:16px}
.mkt{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr}
.verdict{grid-template-columns:76px 34px 1fr; gap:10px}
/* 携帯では4つを1行に収める。文字を小さくし、アイコンの上に置く */
nav.main{gap:2px; width:100%; justify-content:space-between}
nav.main a{flex-direction:column; gap:3px; padding:6px 4px; font-size:11px; flex:1}
nav.main a svg{width:20px; height:20px; flex:0 0 20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
/* ---------- 用語記事の本文 ---------- */
/* Markdownから生成した本文。見出し・段落・表・箇条書きに間隔を与える。 */
.article{display:flex; flex-direction:column; gap:4px}
.article h2{font-size:19px; letter-spacing:.02em; margin:26px 0 10px;
padding-bottom:8px; border-bottom:1px solid var(--rule)}
.article h2:first-child{margin-top:0}
.article h3{font-size:16px; margin:20px 0 8px}
.article p{margin:0 0 14px; line-height:1.95}
.article ul,.article ol{margin:0 0 16px; padding-left:1.4em;
display:flex; flex-direction:column; gap:6px}
.article li{line-height:1.85}
.article strong{font-weight:700}
.article table{margin:6px 0 18px; font-size:13.5px; border:1px solid var(--rule)}
.article th,.article td{padding:9px 12px; border-bottom:1px solid var(--rule); text-align:left}
.article thead th{background:var(--surface-2); font-size:12px; color:var(--ink-2)}
.article tbody tr:last-child td{border-bottom:0}
.article blockquote{margin:0 0 16px; padding:12px 16px;
border-left:3px solid var(--indigo); background:var(--surface-2)}
.article a{color:var(--indigo)}
/* ---------- ランキング表 ---------- */
table.rank .rk{font-family:var(--mono); font-size:12px; color:var(--ink-3); width:3em}
table.rank tbody tr:nth-child(-n+3) .rk{color:var(--indigo); font-weight:700; font-size:14px}
table.rank .sub,table.data .sub{display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px}
table.rank .lead-metric{font-weight:700; font-size:15px; color:var(--ink)}
table.rank td{vertical-align:top}
/* ---------- 入口カード ---------- */
.gates{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gate{display:flex; flex-direction:column; gap:8px; padding:17px 16px;
background:var(--surface); border:1px solid var(--rule); border-top:3px solid var(--indigo);
text-decoration:none; color:inherit}
.gate:hover{border-color:var(--rule-strong)}
.gate h3{font-size:16.5px; line-height:1.45}
.gate p{font-size:12.5px; color:var(--ink-2); line-height:1.75}
.gate .top{font-size:12px; color:var(--ink-3); border-top:1px solid var(--rule);
padding-top:9px; margin-top:auto}
.gate .top b{color:var(--ink); font-weight:700}
/* ---------- 市場サマリーの数字 ---------- */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
background:var(--rule); border:1px solid var(--rule)}
.facts div{background:var(--surface); padding:14px 15px}
.facts .k{font-size:11.5px; color:var(--ink-3); letter-spacing:.06em}
.facts .v{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.35}
.facts .n{font-size:11.5px; color:var(--ink-3)}
/* ---------- トップページの検索ボックス ---------- */
.findbox{display:flex; flex-direction:column; gap:7px}
.findbox label{font-size:12.5px; color:var(--ink-3)}
.findrow{display:flex; gap:8px; max-width:560px}
.findbox input{flex:1; min-width:0; font:inherit; font-size:16px; padding:12px 14px;
border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink)}
.findbox button{font:inherit; font-size:15px; font-weight:700; padding:12px 24px;
background:var(--indigo); border:1px solid var(--indigo); color:#fff; cursor:pointer;
white-space:nowrap}
.findbox button:hover{filter:brightness(1.12)}
/* ---------- 検索と絞り込み ---------- */
.finder{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.finder label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-3)}
.finder input,.finder select{font:inherit; font-size:14px; padding:9px 11px;
border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink); min-width:150px}
.finder input{min-width:230px}
.hits{font-size:13px; color:var(--ink-2)}
#more{font:inherit; font-size:14px; padding:11px 22px; background:var(--surface);
border:1px solid var(--rule-strong); color:var(--ink); cursor:pointer}
#more:hover{border-color:var(--indigo); color:var(--indigo-ink)}
@media (max-width:860px){
.gates{grid-template-columns:1fr 1fr}
.facts{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.gates{grid-template-columns:1fr}
.finder input,.finder select{min-width:0; width:100%}
.finder label{width:100%}
}
/* ---------- 用語の一覧 ---------- */
/* 400語規模を想定。1行1語ではなく格子状に並べ、走査しやすくする。 */
.glist{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
background:var(--rule); border:1px solid var(--rule)}
.gitem{display:flex; flex-direction:column; gap:3px; padding:13px 15px;
background:var(--surface); text-decoration:none; color:inherit}
.gitem:hover{background:var(--surface-2)}
.gitem b{font-family:var(--serif); font-size:15.5px; color:var(--indigo-ink)}
.gitem span{font-size:12px; color:var(--ink-2); line-height:1.7}
.gsec[hidden]{display:none}
@media (max-width:860px){ .glist{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .glist{grid-template-columns:1fr} }
/* ---------- 仮想チャート（scripts/chartgen.py が生成する SVG） ----------
* 色は dataviz の検証ツールで確認した値。
* 陽線と陰線（赤と緑）は色覚特性によって見分けにくい組み合わせのため、
* 塗りの有無という第二の手掛かりを必ず併用している。
* 日本のローソク足の伝統的な描き方（白抜きの陽線・塗りの陰線）と一致する。 */
:root{
--ch-up:#C0392B; --ch-dn:#1B7F56;
--ch-s1:#2F6FB5; --ch-s2:#B8791F; --ch-s3:#7E57C2;
--ch-px:#4A5560; --ch-grid:#E7EAE4; --ch-axis:#BFC6BC;
--ch-band:rgba(169,116,27,.10); --ch-gap:rgba(192,57,43,.12);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ch-up:#DC6A55; --ch-dn:#39A279;
--ch-s1:#4E93CE; --ch-s2:#BE8A2C; --ch-s3:#9070C8;
--ch-px:#9AA4AD; --ch-grid:#273139; --ch-axis:#3E4A54;
--ch-band:rgba(214,164,78,.13); --ch-gap:rgba(232,119,107,.15);
}
}
:root[data-theme="dark"]{
--ch-up:#DC6A55; --ch-dn:#39A279;
--ch-s1:#4E93CE; --ch-s2:#BE8A2C; --ch-s3:#9070C8;
--ch-px:#9AA4AD; --ch-grid:#273139; --ch-axis:#3E4A54;
--ch-band:rgba(214,164,78,.13); --ch-gap:rgba(232,119,107,.15);
}
figure.chart{margin:22px 0; padding:0}
figure.chart svg{
display:block; width:100%; height:auto;
background:var(--surface); border:1px solid var(--rule);
}
figure.chart .g{stroke:var(--ch-grid); stroke-width:1}
figure.chart .ax{stroke:var(--ch-axis); stroke-width:1}
figure.chart .lvl{stroke:var(--ch-axis); stroke-width:1.5; stroke-dasharray:5 4}
figure.chart .bnd{fill:var(--ch-band)}
figure.chart .gap{fill:var(--ch-gap)}
figure.chart .wick{stroke-width:1.5}
figure.chart .wick.up,figure.chart .body.up{stroke:var(--ch-up)}
figure.chart .wick.dn,figure.chart .body.dn{stroke:var(--ch-dn)}
/* 陽線＝白抜き／陰線＝塗りつぶし。色に頼らない区別 */
figure.chart .body{stroke-width:2}
figure.chart .body.up{fill:var(--surface)}
figure.chart .body.dn{fill:var(--ch-dn)}
figure.chart .ln{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
figure.chart .ln.px{stroke:var(--ch-px); stroke-width:1.5}
figure.chart .ln.s1{stroke:var(--ch-s1)}
figure.chart .ln.s2{stroke:var(--ch-s2)}
figure.chart .ln.s3{stroke:var(--ch-s3)}
figure.chart .bar{fill:var(--ch-axis)}
figure.chart .bar.qty{fill:var(--ch-s1)}
figure.chart .mk{fill:var(--surface); stroke:var(--ink); stroke-width:2}
figure.chart text{font-family:var(--sans); fill:var(--ink-2)}
figure.chart .note{font-size:13px; fill:var(--ink); font-weight:600}
figure.chart .axl{font-size:12px; fill:var(--ink-3)}
figure.chart .tag{font-size:12.5px; font-weight:600}
figure.chart .tag.px{fill:var(--ch-px)}
figure.chart .tag.s1{fill:var(--ch-s1)}
figure.chart .tag.s2{fill:var(--ch-s2)}
figure.chart .tag.s3{fill:var(--ch-s3)}
figure.chart .clegend{
display:flex; flex-wrap:wrap; gap:6px 16px; padding:9px 12px;
border:1px solid var(--rule); border-top:0; background:var(--surface-2);
font-size:12.5px; color:var(--ink-2); line-height:1.6;
}
figure.chart .li{display:flex; align-items:center; gap:6px}
figure.chart .lk{width:15px; height:11px; flex:none; border-radius:1px}
figure.chart .lk.up{border:2px solid var(--ch-up); background:var(--surface)}
figure.chart .lk.dn{background:var(--ch-dn)}
figure.chart .lk.ln{height:0; border-top:2px solid currentColor}
figure.chart .lk.ln.px{color:var(--ch-px)}
figure.chart .lk.ln.s1{color:var(--ch-s1)}
figure.chart .lk.ln.s2{color:var(--ch-s2)}
figure.chart .lk.ln.s3{color:var(--ch-s3)}
figure.chart .lk.vol{background:var(--ch-axis)}
figure.chart .lk.qty{background:var(--ch-s1)}
figure.chart figcaption{
margin-top:9px; font-size:13px; color:var(--ink-2); line-height:1.75;
}
figure.chart .cnote{
display:block; margin-top:3px; font-size:12px; color:var(--ink-3);
}
@media (max-width:560px){
figure.chart .note{font-size:15px}
figure.chart .axl,figure.chart .tag{font-size:14px}
}
figure.chart .lead{stroke:var(--ch-axis); stroke-width:1; stroke-dasharray:2 3}
figure.chart .step{stroke-width:4; stroke-linecap:round}
figure.chart .step.up{stroke:var(--ch-up)}
figure.chart .step.dn{stroke:var(--ch-dn)}
figure.chart .drop{stroke:var(--ch-axis); stroke-width:1.5; stroke-dasharray:3 3}
figure.chart .step.nu{stroke:var(--ch-px)}
/* --- ウォーターフォール／タイムライン／積み上げ --- */
:root{
--ch-tot:#2F6FB5; --ch-sub:#8A9199; --ch-loss:#1B7F56; --ch-akaji:#C0392B; --ch-own:#2F6FB5; --ch-debt:#B8791F;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ch-tot:#4E93CE; --ch-sub:#78838C; --ch-loss:#39A279; --ch-akaji:#DC6A55; --ch-own:#4E93CE; --ch-debt:#BE8A2C;
}
}
:root[data-theme="dark"]{
--ch-tot:#4E93CE; --ch-sub:#78838C; --ch-loss:#39A279; --ch-akaji:#DC6A55; --ch-own:#4E93CE; --ch-debt:#BE8A2C;
}
/* 色の指定がない種別でも黒い棒にならないようにする。
これまで .wf.add / .stk.sub / .wf.s3 で3度、黒い棒が出ている */
figure.chart .wf, figure.chart .stk{fill:var(--ch-sub)}
figure.chart .wf.tot{fill:var(--ch-tot)}
figure.chart .wf.s1{fill:var(--ch-s1)}
figure.chart .wf.s2{fill:var(--ch-s2)}
figure.chart .wf.s3{fill:var(--ch-s3)}
figure.chart .stk.s1{fill:var(--ch-s1)}
figure.chart .stk.s2{fill:var(--ch-s2)}
figure.chart .stk.s3{fill:var(--ch-s3)}
figure.chart .wf.add{fill:var(--ch-s3)}
figure.chart .wf.sub{fill:var(--ch-sub)}
figure.chart .wf.loss{fill:var(--ch-loss)}
/* 会計上の赤字。値下がりを表す .loss（緑）とは別の色にする。
日本語で「赤字」と呼んでいるものを緑で描くと、意味が逆に伝わる。
株価の値下がりが緑なのは日本の相場の慣習どおりで、そちらは変えない。 */
figure.chart .wf.akaji{fill:var(--ch-akaji)}
figure.chart .wlink{stroke:var(--ch-axis); stroke-width:1; stroke-dasharray:3 3}
figure.chart .wval{font-size:12px; font-weight:600; fill:var(--ink)}
figure.chart .dot{fill:var(--ch-sub)}
figure.chart .clegend .lk.dt{width:9px; height:9px; border-radius:50%}
figure.chart .clegend .lk.dt.s1{background:var(--ch-s1)}
figure.chart .clegend .lk.dt.s2{background:var(--ch-s2)}
figure.chart .clegend .lk.dt.s3{background:var(--ch-s3)}
figure.chart .dot.s1{fill:var(--ch-s1)}
figure.chart .dot.s2{fill:var(--ch-s2)}
figure.chart .dot.s3{fill:var(--ch-s3)}
figure.chart .hbar{fill:var(--ch-sub); opacity:.42}
figure.chart .hbar.vol{fill:var(--ch-s2); opacity:.42}
figure.chart .stk.own{fill:var(--ch-own)}
figure.chart .stk.debt{fill:var(--ch-debt)}
figure.chart .stk.add{fill:var(--ch-s3)}
figure.chart .stk.sub{fill:var(--ch-sub)}
figure.chart .stk.loss{fill:var(--ch-loss)}
figure.chart .tlaxis{stroke:var(--ch-axis); stroke-width:2}
figure.chart .tldot{fill:var(--surface); stroke:var(--ch-axis); stroke-width:2.5}
figure.chart .tldot.on{fill:var(--ch-tot); stroke:var(--ch-tot)}
figure.chart .tlday{font-size:12.5px; font-weight:600; fill:var(--ink-2)}
figure.chart .tlday.on{fill:var(--ink)}
figure.chart .tlnote{font-size:11.5px; fill:var(--ink-3)}
figure.chart .tlnote.on{fill:var(--ink-2)}
figure.chart .lk.tot{background:var(--ch-tot)}
figure.chart .lk.add{background:var(--ch-s3)}
figure.chart .lk.sub{background:var(--ch-sub)}
figure.chart .lk.loss{background:var(--ch-loss)}
figure.chart .lk.own{background:var(--ch-own)}
figure.chart .lk.debt{background:var(--ch-debt)}
/* 凡例の補足文には色見本を付けない。系列と紛らわしくなるため */
figure.chart .li:has(> .lk.memo){color:var(--ink-3)}
figure.chart .focus{fill:none; stroke:var(--ch-tot); stroke-width:2; stroke-dasharray:4 3}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) figure.chart .zone.hot{fill:rgba(220,106,85,.10)}
:root:not([data-theme="light"]) figure.chart .zone.cold{fill:rgba(57,162,121,.10)}
}
:root[data-theme="dark"] figure.chart .zone.hot{fill:rgba(220,106,85,.10)}
:root[data-theme="dark"] figure.chart .zone.cold{fill:rgba(57,162,121,.10)}
figure.chart .zone.hot{fill:rgba(192,57,43,.07)}
figure.chart .zone.cold{fill:rgba(27,127,86,.07)}
figure.chart .hist.up{fill:var(--ch-up)}
figure.chart .hist.dn{fill:var(--ch-dn)}
figure.chart .ln.band{stroke:var(--ch-s3); stroke-width:1.5; stroke-dasharray:4 3}
figure.chart .tag.band{fill:var(--ch-s3)}
figure.chart .ln.guide{stroke:var(--ch-s2); stroke-width:1.5; stroke-dasharray:6 4}
figure.chart .lk.band{height:0; border-top:2px dashed var(--ch-s3)}
/* 本文中の用語リンク。読みの流れを止めない程度の主張に留める */
.article a.xref{
color:var(--indigo); text-decoration:underline;
text-decoration-color:var(--rule-strong); text-decoration-thickness:1px;
text-underline-offset:3px;
}
.article a.xref:hover{text-decoration-color:var(--indigo)}
/* 板（注文の一覧）の図 */
figure.chart .ihead{font-size:12px; fill:var(--ink-3)}
figure.chart .irow{fill:none}
figure.chart .irow.hit{fill:var(--surface-2)}
figure.chart .igap{stroke:var(--ch-up); stroke-width:2; stroke-dasharray:5 3}
figure.chart .igaptext{font-size:13px; font-weight:600; fill:var(--ch-up)}
figure.chart .inum{font-size:13.5px; font-variant-numeric:tabular-nums}
figure.chart .inum.sell{fill:var(--ch-dn)}
figure.chart .inum.buy{fill:var(--ch-up)}
figure.chart .iprice{font-size:13.5px; font-weight:600; fill:var(--ink);
font-variant-numeric:tabular-nums}
figure.chart .lk.sell{background:var(--ch-dn)}
figure.chart .lk.buy{background:var(--ch-up)}
figure.chart .cloud{stroke:none}
figure.chart .cloud.up{fill:rgba(47,111,181,.15)}
figure.chart .cloud.dn{fill:rgba(184,121,31,.15)}
figure.chart .lk.cloud{background:rgba(47,111,181,.35)}
figure.chart .lk.guide{height:0; border-top:2px dashed var(--ch-s2)}