@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700;800&display=swap');
/* kabu 共通の見た目（全ページ）。色はすべて tokens.css の変数を使う（直書きしない）。
   スマホ（768px 未満）はサイドバーを常時表示せず、左上のボタンで開くドロワーにする（ボタンと開閉は nav.js）。 */
.kabu-burger{display:none;position:fixed;top:12px;left:12px;z-index:70;width:44px;height:44px;border-radius:12px;border:2px solid var(--frame);background:var(--card);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;box-shadow:2px 2px 0 var(--frame);font-size:20px;line-height:1;padding:0}.kabu-burger:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--frame)}.kabu-backdrop{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--frame) 45%,transparent);z-index:55}
@media (max-width:767px){  .kabu-burger{display:flex}  body.kabu-nav-open .kabu-backdrop{display:block}  .sidebar{position:fixed !important;top:0;left:0;height:100vh !important;width:238px !important;    flex-direction:column !important;align-items:stretch !important;gap:13px !important;padding:60px 16px 18px !important;    transform:translateX(-100%);transition:transform .22s ease,box-shadow .22s ease;z-index:60;overflow-y:auto;    box-shadow:none}  body.kabu-nav-open .sidebar{box-shadow:6px 0 24px color-mix(in srgb,var(--frame) 35%,transparent)}  .sidebar .brand{padding-left:4px !important}  body.kabu-nav-open .sidebar{transform:none}  body.kabu-nav-open .kabu-burger{background:var(--side-2);color:var(--card);border-color:var(--side-line);box-shadow:none}  .sidebar .nav-label{display:block !important}  .sidebar .nav-spacer{display:block !important;flex:0 0 4px !important}  .sidebar .nav-foot{display:flex !important}  .sidebar .nav-group{flex-direction:column !important;gap:3px !important}  .sidebar .nav-item{width:100% !important;white-space:normal;justify-content:flex-start}  .sidebar .nav-item .lbl{display:inline !important}  .sidebar .nav-item.active::before{display:block !important}  .main{padding-top:62px !important}}
/* 768px 未満: JS が読み込まれる前でもサイドバーを画面外に置く（常時表示しない） */
@media (max-width:767px){
  .app{grid-template-columns:1fr !important}
  .sidebar{position:fixed !important;transform:translateX(-100%)}
  body.kabu-nav-open .sidebar{transform:none}
}
/* 図の領域は無地（方眼模様を敷かない） */
.chartbox,.panel,.card-chart,.sk-wrap,.lcw{background-image:none}
/* 図を載せる面は無地のカード（ページ地の方眼を図の後ろに出さない） */
.lcw,.hb,.yb,.sk-wrap{background:var(--card);border:1px solid var(--card-line);border-radius:12px;padding:10px 12px}
.chartbox .sk-wrap{border:0;padding:0}
/* ページの地は無地（方眼模様を出さない）。各ページの CSS より優先する */
html,body,.app,.main{background-image:none !important}
/* 図のカードは白＋1px の枠線でページ地と区別する（影はつけない） */
.chartbox,.panel,.chart-card{background:var(--card) !important;border:1px solid var(--card-line) !important;box-shadow:none !important}
/* ナビ（B）: 第1階層5つ＋開いているグループの中身（nav.js が描画） */
.sidebar .nav-main{display:flex;flex-direction:column;gap:3px}
.sidebar .nav-top{font-size:14px !important;font-weight:700 !important}
.sidebar .nav-subs{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px 12px;padding-left:10px;border-left:1px solid var(--side-line)}
.sidebar .nav-sub{display:block;padding:6px 8px;border-radius:8px;color:var(--side-text);font-family:'JetBrains Mono',monospace;font-size:12.5px;text-decoration:none;line-height:1.3}
.sidebar .nav-sub:hover{background:var(--side-2);color:var(--side-text-hi)}
.sidebar .nav-sub.on{color:var(--side-text-hi);background:var(--side-3)}
/* グループ内のタブ列（探す・学ぶ・マイデータ） */
.kabu-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 18px;padding:2px 0 8px;border-bottom:1px solid var(--card-line)}
.kabu-tabs::-webkit-scrollbar{display:none}
.kabu-tabs a{flex:none;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;padding:7px 12px;border:1px solid var(--card-line);border-radius:999px;background:var(--card)}
.kabu-tabs a:hover{border-color:var(--outline)}
.kabu-tabs a.on{background:var(--accent);color:var(--on-accent);border-color:var(--frame)}
@media (max-width:767px){.kabu-tabs{margin-top:4px}}
.sidebar .nav-subs:not(.open){display:none}
/* 専門用語のひとこと解説（nav.js の terms） */
.kterm{position:relative;display:inline}
.kterm-b{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;border-bottom:1.5px dotted var(--text-sub)}
.kterm-b:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.kterm-tip{position:absolute;z-index:30;left:0;top:calc(100% + 6px);width:min(300px,78vw);background:var(--card);color:var(--ink);border:1.5px solid var(--frame);border-radius:10px;box-shadow:3px 3px 0 var(--frame);padding:10px 12px;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:13px;font-weight:400;line-height:1.6;text-align:left;white-space:normal;letter-spacing:0;text-transform:none}
.kterm-tip b{display:block;font-size:13px;margin-bottom:2px}
.kterm-tip a{color:var(--link);font-weight:700;white-space:nowrap}

/* やさしい／くわしい（P2-5）: html[data-mode="pro"] のときだけ .m-pro を出す。既定はやさしい。保存と切り替えは tokens.js と銘柄ページのスイッチ */
.m-pro,.m-pro-b{display:none}
html[data-mode="pro"] .m-pro{display:inline}html[data-mode="pro"] .m-pro-b{display:block}html[data-mode="pro"] .m-easy{display:none}
.modesw{display:inline-flex;border:1.5px solid var(--frame);border-radius:999px;overflow:hidden;margin:10px 0 2px;font-size:13px}
.modesw button{font:inherit;font-weight:700;padding:6px 14px;min-height:36px;border:0;background:var(--card);color:var(--ink);cursor:pointer}
.modesw button+button{border-left:1.5px solid var(--frame)}
.modesw button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.kterm-tip .kf,.kterm-tip .kc{display:block;margin-top:4px;font-size:12.5px;color:var(--text-sub)}.kterm-tip .kf i,.kterm-tip .kc i{font-style:normal;color:var(--ink);font-weight:600}

/* ロゴ＝ホームへ戻るリンク（サイドバー）と、スマホの ☰ の横のロゴ */
a.brand{text-decoration:none;color:inherit;cursor:pointer;border-radius:10px}a.brand:hover .brand-name{text-decoration:underline;text-underline-offset:4px}
a.brand:focus-visible,.kabu-home:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kabu-home{display:none}
@media (max-width:767px){.kabu-home{display:flex;align-items:center;gap:7px;position:absolute;top:12px;left:64px;z-index:60;height:44px;padding:0 14px;border:2px solid var(--frame);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none;box-shadow:2px 2px 0 var(--frame);font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:18px}
.kabu-home .brand-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);border:1.5px solid var(--frame)}}

/* レイアウトの統一（2026-09-26）: 本文は必ずサイドバーのすぐ右から（中央寄せにしない）・左右の余白 36px・幅は2種類
   読むページ 920px ／ 一覧・ダッシュボード 1240px（html[data-wide]・tokens.js がパスで判定）。スマホ（767px 以下）は各ページの設定のまま */
@media (min-width:768px){
  .main{box-sizing:border-box;margin-left:0 !important;margin-right:0 !important;padding-left:36px !important;padding-right:36px !important;max-width:920px !important;width:100%}
  html[data-wide] .main{max-width:1240px !important}
  .main>.wrap{max-width:none !important;margin:0 !important;padding-left:0 !important;padding-right:0 !important}
}


/* ===================================================================
   デザインシステム v2（2026-10）: 文字・見出し・カード・チップ・表・動き をサイト全体でそろえる。
   色は tokens.css の変数だけを使う。各ページの CSS（h1{...} など要素セレクタ）より詳細度を上げて上書きする。
   =================================================================== */
:root{
  --f-display:'Fraunces','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  --f-body:'Hanken Grotesk','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo','Noto Sans JP',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --lift:translate(-2px,-2px);
}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}

/* 見出し: 英字は Fraunces、日本語は Noto Serif JP（palt に対応）。文節で改行し、約物を詰める */
.main h1{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,1.9vw + 15px,44px);line-height:1.2;letter-spacing:-.012em;font-feature-settings:"palt";word-break:auto-phrase;text-wrap:balance;margin-top:6px}
.main h1 .tk{font-family:var(--f-mono);letter-spacing:-.03em}
.main{counter-reset:ksec}
.main h2{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,.5vw + 17px,26px);line-height:1.3;letter-spacing:-.005em;font-feature-settings:"palt";word-break:auto-phrase;text-wrap:balance;
  display:block;border-bottom:0;margin-top:56px;padding-top:16px;border-top:1px solid var(--line-2);counter-increment:ksec}
.main h2::before{content:counter(ksec,decimal-leading-zero);display:block;font-family:var(--f-mono);font-weight:700;font-size:11.5px;letter-spacing:.16em;color:var(--cost);margin-bottom:8px}
.main h3{font-feature-settings:"palt";word-break:auto-phrase;text-wrap:balance}
.main p,.main li{text-wrap:pretty}

/* リンクのカード（探す・一覧・銘柄の5つの質問・計算ツールなど）: 静止は細い枠、触れると太枠の影で浮く */
.main :is(.xc,.idx-card,.q5c,.h5,.tool-card,a.hub){transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);will-change:transform}
.main :is(.xc,.idx-card,.h5,.tool-card,a.hub):hover{transform:var(--lift);border-color:var(--frame);box-shadow:4px 4px 0 var(--frame)}
.main .q5c:hover{transform:var(--lift);box-shadow:6px 6px 0 var(--frame)}
.main :is(.xc,.idx-card,.q5c,.h5,.tool-card,a.hub):active{transform:none;box-shadow:1px 1px 0 var(--frame)}

/* チップ（銘柄・タグ）: 等幅・丸角・触れると黄の面 */
.main :is(a.chip,a.hub-chip){transition:background-color .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.main :is(a.chip,a.hub-chip):hover{background:var(--accent-tint);border-color:var(--frame);transform:translateY(-1px)}

/* 表: 数字は桁をそろえ、見出し行は等幅の小さい大文字 */
.main table{font-variant-numeric:tabular-nums}
.main th{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--text-sub)}

/* 本文のリンク: 下線を細く離して引き、触れると黄の帯 */
.main p a:not([class]),.main li a:not([class]){text-decoration-thickness:1px;text-underline-offset:3px;transition:background-color .15s var(--ease)}
.main p a:not([class]):hover,.main li a:not([class]):hover{background:var(--accent-tint);text-decoration-thickness:2px}

/* タブ列: 端をぼかして、続きがあることを見せる */
.kabu-tabs{-webkit-mask-image:linear-gradient(90deg,var(--frame) calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,var(--frame) calc(100% - 28px),transparent 100%)}
.kabu-tabs.is-scrolled{-webkit-mask-image:linear-gradient(90deg,transparent 0,var(--frame) 22px,var(--frame) calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,var(--frame) 22px,var(--frame) calc(100% - 28px),transparent 100%)}
.kabu-tabs a{transition:background-color .15s var(--ease),border-color .15s var(--ease)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* アイコン（scripts/lib/icons.mjs・nav.js の kIco）: 文字の高さにそろえて置く */
.ico{display:inline-block;vertical-align:-.15em;flex:none}
.kabu-burger .ico{width:22px;height:22px}

/* 銘柄ページの冒頭（build-stocks の .sx-head）: 銘柄名を大きく、その横に主要な数字4つ */
.sx-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 28px;padding:4px 0 20px;border-bottom:2px solid var(--frame);margin:2px 0 10px}
.sx-head h1{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:8px 0 8px}
.sx-head h1 .tk{font-family:var(--f-mono);font-weight:700;font-size:clamp(46px,3.4vw + 12px,68px);line-height:.95;letter-spacing:-.045em;color:var(--ink)}
.sx-head h1 .nm{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,.8vw + 14px,28px);line-height:1.2;color:var(--text-sub);letter-spacing:-.01em}
.sx-head .sub{margin:0;font-size:13px;color:var(--text-sub);line-height:1.6}
.sx-head .sub b{color:var(--ink);font-weight:700}
.sx-kpi{display:grid;grid-template-columns:repeat(4,auto);margin:0;background:var(--card);border:1.5px solid var(--frame);border-radius:14px;box-shadow:4px 4px 0 var(--frame);overflow:hidden}
.sx-k{padding:12px 18px 13px;min-width:104px}
.sx-k+.sx-k{border-left:1px solid var(--line-2)}
.sx-k dt{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-sub);white-space:nowrap}
.sx-k dd{margin:4px 0 0;font-family:var(--f-mono);font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sx-k dd small{font-size:14px;margin-left:1px;color:var(--text-sub);font-weight:500}
.sx-k .sx-w{display:block;margin-top:5px;font-size:11px;color:var(--text-sub);white-space:nowrap}
.sx-k.is-fund dd{color:var(--pos)}.sx-k.is-price dd{color:var(--cost)}
.sx-src{font-size:12px !important;color:var(--text-sub);margin:0 0 6px}
@media (max-width:1100px){.sx-head{grid-template-columns:1fr}.sx-kpi{justify-self:start}}
@media (max-width:640px){.sx-kpi{grid-template-columns:1fr 1fr;width:100%}.sx-k+.sx-k{border-left:0}.sx-k:nth-child(2n){border-left:1px solid var(--line-2)}.sx-k:nth-child(n+3){border-top:1px solid var(--line-2)}.sx-k dd{font-size:22px}}
.main .q5c{word-break:auto-phrase}

/* 枠（カード）の中の見出しには番号と区切り線をつけない */
.main .card>h2{border-top:0;padding-top:0;margin-top:0;counter-increment:none}.main .card>h2::before{content:none}

/* 表の横スクロール枠（nav.js が包む） */
.kabu-tscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* 画面に入ってきたらふわっと出す（nav.js が .kabu-in をつける。つかなければ普通に見える） */
.kabu-in{animation:kabuIn .6s var(--ease) both}
@keyframes kabuIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 共通フッター（nav.js）: サイドバーと同じ濃い色で、ページの終わりを締める */
.kabu-foot{margin:72px 0 8px;background:var(--side-bg);color:var(--side-text);border-radius:22px;padding:32px 32px 24px;font-family:var(--f-body)}
.kabu-foot a{color:var(--side-text);text-decoration:none}
.kabu-foot a:hover{color:var(--side-text-hi);text-decoration:underline;text-underline-offset:3px}
.kf-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;padding-bottom:22px;border-bottom:1px solid var(--side-line)}
.kf-brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:30px;color:var(--side-text-hi) !important;text-decoration:none !important}
.kf-brand .brand-dot{width:14px;height:14px;border-radius:50%;background:var(--accent)}
.kf-tag{margin:0;font-family:var(--f-display);font-size:16px;line-height:1.7;color:var(--side-text-hi);font-feature-settings:"palt";text-align:right}
.kf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:22px 0}
.kf-cols b{display:block;margin-bottom:8px;font:700 11px var(--f-mono);letter-spacing:.14em;color:var(--side-label)}
.kf-cols a{display:block;padding:4px 0;font-size:14px}
.kf-legal{margin:0;padding-top:16px;border-top:1px solid var(--side-line);font-size:12px;color:var(--side-label);line-height:1.7}
@media (max-width:640px){.kabu-foot{padding:24px 20px 18px;border-radius:18px}.kf-cols{grid-template-columns:1fr 1fr}.kf-tag{text-align:left}}

/* スマホの上部バー: 半透明＋ぼかしの帯の上に ☰ とロゴ（本文に浮いたボタンが重ならないように） */
@media (max-width:767px){
  body::before{content:'';position:fixed;left:0;right:0;top:0;height:68px;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-2);z-index:64}
  .kabu-home{position:fixed !important;z-index:70 !important}
  .kabu-backdrop{z-index:66 !important}
  .sidebar{z-index:68 !important}
  .kabu-burger{z-index:72 !important}
}

/* 一覧のカード（銘柄一覧・ガイド一覧）: 静止は細い枠、触れたときだけ太枠と影（太枠と影は要約・数字のカード専用） */
.main .idx-card{border:1px solid var(--card-line);box-shadow:none}
.main .idx-card .t{letter-spacing:-.01em}
/* 一覧の区分見出し（銘柄一覧のセクター・ガイド一覧のカテゴリ） */
.main .idx-cat{display:flex;align-items:center;gap:12px;margin:34px 0 12px;font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:0;text-transform:none;font-feature-settings:"palt"}
.main .idx-cat::after{content:'';flex:1;height:1px;background:var(--line-2)}

/* 銘柄ページ: 冒頭の操作の行（表示の詳しさ・株格・ビューア）と、予定・動きをまとめた枠 */
.headbar{gap:10px 16px !important;margin:14px 0 12px !important}
.headbar .modesw{margin:0}
.headbar .kk-badge{margin:0 !important}
.headbar .to-viewer{margin-left:auto}
.sx-info{margin:0 0 18px;background:var(--card);border:1px solid var(--card-line);border-radius:14px;overflow:hidden}
.sx-info .nextq{margin:0 !important;border:0 !important;border-radius:0 !important;padding:12px 16px !important;border-bottom:1px solid var(--line) !important}
.sx-info .nextq:last-child{border-bottom:0 !important}
.sx-info .stateline{margin:0 !important;padding:10px 16px !important;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px}
.sx-info .stateline a,.sx-info .stateline span{border:0 !important;padding:0 !important;color:var(--ink)}
.sx-info .stateline .ico,.sx-info .nextq .ico{color:var(--text-sub)}
@media (max-width:640px){.headbar .to-viewer{margin-left:0}}

/* テープ風のラベル（銘柄のセクター・ガイドのシリーズ名）: 形はそのまま、色はブランドの黄の淡色1つにそろえる */
.main span.tape,.main span.eyebrow{background:var(--accent-tint)}

/* ページ移動の切り替え（対応ブラウザだけ・サイドバーは動かさない） */
@view-transition{navigation:auto}
.sidebar{view-transition-name:kabu-side}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ===== デザイン v2・2周目（2026-10）: 太枠を「要約・主要な数字・結論」だけに絞る ===== */
/* 解説の箱: 白地＋左端の黄の線（注記の形）。太枠と影はやめる */
.main .commentary{border:1px solid var(--card-line) !important;border-left:4px solid var(--accent) !important;border-radius:4px 14px 14px 4px !important;box-shadow:none !important;padding:16px 20px 16px 18px !important}
/* 主要指標: 1枚の表のように細い線で区切ったマス目 */
.main .stats{gap:1px !important;background:var(--line-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.main .stats .stat{border:0 !important;border-radius:0 !important;box-shadow:none !important;background:var(--card);padding:14px 16px 15px}
.main .stats .stat .k{font-size:11px;letter-spacing:.06em}
.main .stats .stat .v{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* 証券口座の案内（PR）と広告の枠: 本文より目立たせない */
.main .brokers,.main .ad-slot{border:1px solid var(--card-line) !important;box-shadow:none !important;border-radius:14px !important}

/* チップ（タグ状の小さなリンク）: 細い枠の丸いピル型。影はつけない（影はボタンと要約のカードだけ） */
.main :is(a.chip,a.hub-chip,a.earn-chip,a.rel-chip){border:1px solid var(--card-line) !important;box-shadow:none !important;border-radius:999px !important;background:var(--card) !important;color:var(--ink) !important;transition:background-color .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.main :is(a.chip,a.hub-chip,a.earn-chip,a.rel-chip):hover{background:var(--accent-tint) !important;border-color:var(--frame) !important;transform:translateY(-1px)}
.main a.hub-chip[data-tk],.main a.earn-chip b{color:var(--link) !important}