/* 月次前年比ダッシュボード。すべて .myoy 配下に閉じており、埋め込み先のCSSに干渉しない。
   配色は役割トークンで定義。濃色は OS設定・ホストの data-theme・data-myoy-theme のいずれかで切り替わる。 */
.myoy {
  color-scheme: light;
  --plane: #f2f6fa;
  --surface: #ffffff;
  --ink: #101822;
  --ink-2: #4c5768;
  --muted: #6b7789;
  --grid: #dce8f0;
  --axis: #b9cddc;
  --ring: rgba(26, 42, 74, .14);
  --wash: rgba(26, 42, 74, .06);
  --s1: #2980b9; --s2: #eb6834; --s3: #8a5cd0; --s4: #eda100;
  --pos: #1c8a4e; --neg: #d03b3b; --mix: #b27800;
  --cool: #2980b9; --warm: #e0622b; /* 気温の高低（良し悪しではない） */
  --div-mid: #eef3f8; --div-pos: #11613a; --div-neg: #9c2323;
  --focus: #2980b9;
  --brand-ink: #1a2a4a; --mark-bg: #1a2a4a; --mark-c1: #2e86c1; --mark-c2: #5dade2; --brand-rule: #dce8f0; /* せんデータの色（濃紺・青・淡青・罫） */
  --ic-cal: #7a5cd6; --ic-price: #b27800; --ic-plane: #138f97; --ic-temp: #d1543a; --ic-rain: #2980b9; --ic-pop: #1f9d6a;
  font: 14px/1.6 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  color: var(--ink);
  background: var(--plane);
  padding-block: 24px 32px;
  padding-inline: clamp(16px, 3vw, 32px);
  position: relative;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  line-break: strict;
}
/* 見出し・タグ・短い文は文節で折り返す（「前年超|え」のような切れ方を防ぐ。未対応のブラウザは通常の折り返し）。長い文章は通常の折り返しのまま */
.myoy h1, .myoy h2, .myoy .head-lead, .myoy .top-cell .st { word-break: auto-phrase; }
.myoy .notes p { text-wrap: pretty; }
.myoy .top-cell .d { word-break: keep-all; } /* 「36|社」のように社数が割れないようにする（空白の位置で折り返す） */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .myoy:where(:not([data-myoy-theme="light"])) {
    color-scheme: dark;
    --plane: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --ring: rgba(255, 255, 255, .10); --wash: rgba(255, 255, 255, .06);
    --s1: #5dade2; --s2: #d95926; --s3: #a584e6; --s4: #c98500;
    --pos: #3cb872; --neg: #e66767; --mix: #d99a1e; --cool: #85c1e9; --warm: #f0845f;
    --div-mid: #383835; --div-pos: #86d8a8; --div-neg: #f09a9a;
    --focus: #5dade2;
    --brand-ink: #d7e6f5; --mark-bg: #24406e; --mark-c1: #5dade2; --mark-c2: #85c1e9; --brand-rule: var(--grid); /* 濃色では紺を明るくする */
    --ic-cal: #a18cf0; --ic-price: #e0a53a; --ic-plane: #3fc0c6; --ic-temp: #f0845f; --ic-rain: #5dade2; --ic-pop: #4cc592;
  }
}
:root[data-theme="dark"] .myoy:where(:not([data-myoy-theme="light"])),
.myoy[data-myoy-theme="dark"] {
  color-scheme: dark;
  --plane: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --ring: rgba(255, 255, 255, .10); --wash: rgba(255, 255, 255, .06);
  --s1: #5dade2; --s2: #d95926; --s3: #a584e6; --s4: #c98500;
  --pos: #3cb872; --neg: #e66767; --mix: #d99a1e; --cool: #85c1e9; --warm: #f0845f;
  --div-mid: #383835; --div-pos: #86d8a8; --div-neg: #f09a9a;
  --focus: #5dade2;
  --brand-ink: #d7e6f5; --mark-bg: #24406e; --mark-c1: #5dade2; --mark-c2: #85c1e9; --brand-rule: var(--grid); /* 濃色では紺を明るくする */
  --ic-cal: #a18cf0; --ic-price: #e0a53a; --ic-plane: #3fc0c6; --ic-temp: #f0845f; --ic-rain: #5dade2; --ic-pop: #4cc592;
}

/* 配色の切り替え（色覚への配慮）: 良し悪しを青・赤にする */
.myoy[data-palette="blue"] { --pos: #2980b9; --div-pos: #17557f; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .myoy[data-palette="blue"]:where(:not([data-myoy-theme="light"])) { --pos: #5dade2; --div-pos: #85c1e9; }
}
.myoy[data-myoy-theme="dark"][data-palette="blue"] { --pos: #5dade2; --div-pos: #85c1e9; }
.myoy *, .myoy *::before, .myoy *::after { box-sizing: border-box; }
.myoy [hidden] { display: none !important; }
.myoy .wrap { max-width: 1180px; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; }
.myoy button, .myoy select { font: inherit; color: inherit; }
.myoy :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 冒頭のまとめ */
.myoy .top { gap: 12px; }
.myoy .top-title { display: flex; align-items: center; gap: 6px; }
.myoy .top-h { font-size: 20px; line-height: 1.5; font-weight: 700; margin: 0; text-wrap: balance; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.myoy .head .top-pub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.myoy .top-pub .k { letter-spacing: .04em; white-space: nowrap; }
.myoy .top-pub .v { font-weight: 700; color: var(--ink); white-space: nowrap; }
.myoy .top-pub .pbar { display: inline-block; width: 72px; height: 7px; border-radius: 4px; background: var(--wash); overflow: hidden; }
.myoy .top-pub .pbar i { display: block; height: 100%; background: var(--ink-2); }
.myoy .top-grid { display: grid; grid-template-columns: max-content repeat(3, minmax(104px, 1fr)); gap: 12px 20px; align-items: start; }
.myoy .top-row { display: contents; } /* 行ごとに箱を作らず、同じ格子に並べる（売上・客数・客単価の位置がそろう） */
.myoy .top-k { font-size: 13px; font-weight: 700; color: var(--ink-2); padding-top: 14px; white-space: nowrap; }
.myoy .top-cell { min-width: 0; }
.myoy .top-cell .k { font-size: 11.5px; color: var(--ink-2); letter-spacing: .04em; }
.myoy .top-cell .n { font-size: 26px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.myoy .top-cell .n.pos { color: var(--pos); } .myoy .top-cell .n.neg { color: var(--neg); }
.myoy .top-cell .d { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.myoy .top-cell .st { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.myoy .top-cell .st.pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.myoy .top-cell .st.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
@media (max-width: 640px) {
  .myoy .top-h { font-size: 17px; }
  .myoy .top-grid { grid-template-columns: max-content repeat(3, minmax(86px, 1fr)); gap: 10px 12px; }
  .myoy .top-cell .n { font-size: 22px; }
}
@media (max-width: 460px) { /* 区分名を1行に出して、下に3つを並べる */
  .myoy .top-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  .myoy .top-k { grid-column: 1 / -1; padding-top: 4px; }
}
/* 見出し */
.myoy .head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--brand-rule); }
.myoy .head .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.myoy .head .mark svg { display: block; width: 30px; height: 30px; }
.myoy .head .mark .mk-bg { fill: var(--mark-bg); }
.myoy .head .mark .mk-g rect { fill: #ffffff; }
.myoy .head .mark .mk-g rect.mk-a { fill: var(--mark-c1); opacity: 1; }
.myoy .head .mark .mk-g rect.mk-b { fill: var(--mark-c2); opacity: 1; }
.myoy .head h1 { color: var(--brand-ink); }
.myoy .head .head-lead { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-2); }
.myoy h1 { font-size: 22px; line-height: 1.3; margin: 0; font-weight: 700; letter-spacing: .01em; text-wrap: balance; }
.myoy .asof { color: var(--ink-2); font-size: 13px; }
.myoy .head .palette { margin-left: auto; flex-direction: row; align-items: center; gap: 6px; }
.myoy h2 { font-size: 15px; margin: 0; font-weight: 700; color: var(--brand-ink); }
.myoy .sub { color: var(--ink-2); font-size: 12.5px; margin: 2px 0 0; }

/* フィルター行 */
.myoy .filters { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: end; }
.myoy .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.myoy .field > span { font-size: 11.5px; color: var(--ink-2); letter-spacing: .04em; }
.myoy .seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--axis); border-radius: 8px; overflow: hidden; background: var(--surface); }
.myoy .seg button { border: 0; background: transparent; padding: 6px 12px; cursor: pointer; font-size: 13px; line-height: 1.4; border-right: 1px solid var(--grid); }
.myoy .seg button:last-child { border-right: 0; }
.myoy .seg button:hover { background: var(--wash); }
.myoy .seg button[aria-pressed="true"] { background: var(--brand-ink); color: var(--surface); }
.myoy select { border: 1px solid var(--axis); border-radius: 8px; background: var(--surface); padding: 6px 10px; font-size: 13px; max-width: 100%; }

/* ページ内ナビ */
/* ナビと表示条件をまとめて上に固定する（どこまでスクロールしても月・区分などを切り替えられる） */
.myoy .wrap > .bar { /* 上端の切り替えバー。企業別の横棒（.rank-row .bar）と名前が重なるので子セレクタで絞る */  position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 6px; background: var(--plane); padding: 8px 0; margin: -4px 0; border-bottom: 1px solid var(--grid); }
.myoy .bar .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.myoy .bar .field { flex-direction: row; align-items: center; gap: 6px; }
.myoy .bar .field > span { font-size: 11.5px; white-space: nowrap; }
.myoy .bar .seg button { padding: 3px 10px; font-size: 12.5px; }
.myoy .bar select { padding: 3px 8px; font-size: 12.5px; }
.myoy .nav { display: flex; flex-wrap: wrap; gap: 4px; }
.myoy .nav:empty { display: none; }
.myoy .nav button { border: 1px solid transparent; background: transparent; padding: 4px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.myoy .nav button:hover { background: var(--wash); }
.myoy .nav button[aria-current="true"] { background: var(--brand-ink); color: var(--surface); }
.myoy .wrap > * { scroll-margin-top: calc(var(--bar-h, 96px) + 8px); }

/* 今月の概況 */
.myoy .hero-title { font-size: 18px; }
.myoy .hero-lead { margin: 6px 0 0; font-size: 13.5px; line-height: 1.7; max-width: 80ch; }
.myoy .hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .myoy .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.myoy .hero-chart-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.myoy .hero-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.myoy .hero-k { font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; margin-top: 4px; }
.myoy .hero-chart2 { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: flex-start; }
.myoy .donut { text-align: center; }
.myoy .donut .k { font-size: 12px; font-weight: 700; margin-top: 2px; }
.myoy .donut .d { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.myoy .hero-chart2 svg text.dn { font-size: 19px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.myoy .hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.myoy .hcard { border-left: 3px solid var(--c, var(--axis)); padding: 2px 0 2px 10px; min-width: 0; }
.myoy .hcard .k { font-size: 11.5px; color: var(--ink-2); letter-spacing: .04em; }
.myoy .hcard .n { font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.myoy .hcard .n.pos { color: var(--pos); } .myoy .hcard .n.neg { color: var(--neg); }
.myoy .hcard .d { font-size: 12px; color: var(--ink-2); }
.myoy .hero-env { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.myoy .hero-env:empty { display: none; }
.myoy .hero-movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; }
.myoy .hero-movers .k { font-size: 11.5px; color: var(--ink-2); margin-bottom: 2px; }
.myoy .chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0; background: transparent; padding: 2px 4px; width: 100%; text-align: left; cursor: pointer; border-radius: 4px; font-size: 12.5px; }
.myoy .chip:hover { background: var(--wash); }
.myoy .chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myoy .chip .chg { font-variant-numeric: tabular-nums; font-weight: 700; flex: none; }
.myoy .chip .chg.pos { color: var(--pos); } .myoy .chip .chg.neg { color: var(--neg); }
.myoy .hero-chart { width: 100%; }

/* 環境指標 */
.myoy .env-wrap { display: flex; flex-direction: column; gap: 8px; }
.myoy .env-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.myoy .env-title { font-size: 13px; font-weight: 700; }
.myoy .env-title .env-month { font-weight: 400; color: var(--ink-2); margin-left: 6px; }
.myoy .field.inline { flex-direction: row; align-items: center; gap: 8px; }
.myoy .seg.mini button { padding: 2px 8px; font-size: 11.5px; }
.myoy .tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.myoy .fb-dot { fill: var(--surface); opacity: .9; }
.myoy .heat svg text.hv { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.myoy .heat svg text.gv { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.myoy .heat svg text.gv.pos { fill: var(--pos); } .myoy .heat svg text.gv.neg { fill: var(--neg); }
.myoy .heat-labels .g .gm { margin-left: 6px; font-size: 10px; letter-spacing: 0; color: var(--muted); opacity: .8; }
.myoy .scale .fbk { display: inline-block; width: 12px; height: 10px; border-radius: 2px; background: var(--div-pos); position: relative; }
.myoy .scale .fbk::after { content: ''; position: absolute; left: 4px; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--surface); }
.myoy .warm { color: var(--warm); } .myoy .cool { color: var(--cool); }
.myoy .pos-ink { color: var(--pos); } .myoy .neg-ink { color: var(--neg); }
.myoy .cpi-sub { font-size: 12.5px; color: var(--ink-2); }
.myoy .temp-diff, .myoy .rain-diff, .myoy .jnto-diff { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.myoy .env { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.myoy .env-tile { background: var(--surface); border: 1px solid var(--ring); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.myoy .env-tile .k { font-size: 11.5px; color: var(--ink-2); letter-spacing: .04em; }
.myoy .env-tile .n { font-size: 22px; font-weight: 700; line-height: 1.2; }
.myoy .env-tile .d { font-size: 12px; color: var(--ink-2); }
.myoy .env-chart { margin-top: 6px; }
.myoy .env-chart svg.envc { width: 100%; height: auto; display: block; overflow: visible; }
.myoy .env-chart svg.envc text.envc-ax { fill: var(--ink-2); }
.myoy .envc-leg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; font-size: 11px; color: var(--ink-2); }
.myoy .envc-leg i { display: inline-block; width: 12px; border-top: 2px solid var(--c, var(--ink-2)); vertical-align: middle; margin-right: 4px; }
.myoy .env-reg { display: flex; flex-direction: column; gap: 8px; }
.myoy .env-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; }
.myoy .env-reg .env-sub { margin-top: 6px; }
.myoy .env-sub .field.inline { font-weight: 400; letter-spacing: 0; }
.myoy .env-reg .reg-note:empty { display: none; }
/* 地域の地図（47都道府県のタイル。気温と雨の前年差） */
.myoy .env-reg .reg-name { margin-left: 8px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.myoy .env-reg .reg-name:empty { display: none; }
.myoy .env-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.myoy .env-map[hidden] { display: none; }
.myoy .rmap { margin: 0; background: var(--surface); border: 1px solid var(--ring); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.myoy .rmap .rt { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.myoy .rmap svg { width: 100%; max-width: 460px; height: auto; display: block; margin-inline: auto; overflow: visible; }
.myoy .rmap text { font-variant-numeric: tabular-nums; pointer-events: none; }
.myoy .rmap text.tn { font-size: 7.5px; font-weight: 700; }
.myoy .rmap text.tv { font-size: 8px; }
.myoy .rmap text.rk { font-size: 10px; font-weight: 700; }
.myoy .rmap text.rl { font-size: 9.5px; fill: var(--ink-2); }
.myoy .rmap g.tile { cursor: pointer; outline: none; }
.myoy .rmap g.tile:hover rect, .myoy .rmap g.tile:focus-visible rect { stroke: var(--ink-2); stroke-width: 1.5; }
.myoy .rmap g.tile.on rect { stroke: var(--ink); stroke-width: 2.5; }
.myoy .rleg { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.myoy .rleg i { width: 22px; height: 9px; border-radius: 2px; display: inline-block; }
.myoy .rleg span { margin-left: 8px; }
.myoy .pop-month { border-top: 1px dashed var(--grid); padding-top: 4px; margin-top: 2px; }
.myoy .cal-main { display: flex; align-items: baseline; gap: 8px; }
.myoy .cal-diff { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.myoy .cal-diff.pos { color: var(--pos); } .myoy .cal-diff.neg { color: var(--neg); }

/* 急上昇・急下降 */
.myoy .mover-list { display: flex; flex-direction: column; }
.myoy .mover { display: grid; grid-template-columns: 14px minmax(80px, 1fr) 52px 52px 60px; gap: 8px; align-items: center; border: 0; background: transparent; text-align: left; padding: 3px 4px; border-radius: 6px; cursor: pointer; min-height: 26px; font-size: 13px; }
.myoy .mover:hover { background: var(--wash); }
.myoy .mover .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--axis); }
.myoy .mover[aria-pressed="true"] .dot { border-color: transparent; background: var(--c); }
.myoy .mover .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myoy .mover .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.myoy .mover .chg { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.myoy .mover .chg.pos { color: var(--pos); } .myoy .mover .chg.neg { color: var(--neg); }
.myoy .mover-head { display: grid; grid-template-columns: 14px minmax(80px, 1fr) 52px 52px 60px; gap: 8px; padding: 0 4px 4px; font-size: 11px; color: var(--muted); }
.myoy .mover-head span:nth-child(n+3) { text-align: right; }

/* 業界統計 */
.myoy .cols.assoc { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.myoy .assoc-table { font-size: 12.5px; }
.myoy .assoc-table th, .myoy .assoc-table td { padding: 4px 8px; }
.myoy .assoc-table td.num { font-weight: 600; }
.myoy .assoc-table td.up { color: var(--pos); } .myoy .assoc-table td.down { color: var(--neg); }
.myoy .assoc-table tr.sub td:first-child { padding-left: 20px; color: var(--ink-2); }
.myoy .assoc-table tr.total td { font-weight: 700; }
.myoy .assoc-table tr.sub2 td:first-child { padding-left: 34px; }
.myoy .cols.ew { grid-template-columns: minmax(0, 1fr); } /* 景気ウォッチャーのDIと現場の声は縦に並べる */
.myoy .ew-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px; background: var(--grid); }
.myoy .ew-bar .m0, .myoy .ew-mark.m0 { background: var(--pos); }
.myoy .ew-bar .m1, .myoy .ew-mark.m1 { background: color-mix(in srgb, var(--pos) 50%, var(--surface)); }
.myoy .ew-bar .m2, .myoy .ew-mark.m2 { background: var(--axis); }
.myoy .ew-bar .m3, .myoy .ew-mark.m3 { background: color-mix(in srgb, var(--neg) 50%, var(--surface)); }
.myoy .ew-bar .m4, .myoy .ew-mark.m4 { background: var(--neg); }
.myoy .ew-list { display: flex; flex-direction: column; gap: 8px; }
.myoy .ew-item { padding-top: 8px; border-top: 1px solid var(--grid); }
.myoy .ew-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.myoy .ew-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; font-size: 12px; color: var(--ink); }
.myoy .ew-mark.m0, .myoy .ew-mark.m4 { color: var(--surface); }
.myoy .ew-item p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.65; }
.myoy .ew-src { font-size: 11.5px; color: var(--ink-2); }
@media (max-width: 760px) { .myoy .cols.ew { grid-template-columns: 1fr; } }
.myoy .ew-head { flex-wrap: wrap; } .myoy .ew-head .kw { margin: 0; font-size: 11px; padding: 0 7px; }
.myoy .kwc { display: flex; flex-direction: column; gap: 8px; }
.myoy .kwc .tile-head { flex-wrap: wrap; } .myoy .kwc h2 { white-space: nowrap; }
.myoy .kwc-cloud { padding: 8px; background: var(--wash); border-radius: 10px; min-height: 80px; }
.myoy .kwc-svg { display: block; width: 100%; height: auto; max-height: 560px; }
.myoy .kwc-w { font-weight: 700; text-anchor: middle; dominant-baseline: central; cursor: pointer; transition: opacity .15s; outline: none; }
.myoy .kwc-w.pos { fill: color-mix(in srgb, var(--pos) 72%, var(--surface)); } .myoy .kwc-w.pos.big { fill: var(--pos); }
.myoy .kwc-w.neg { fill: color-mix(in srgb, var(--neg) 72%, var(--surface)); } .myoy .kwc-w.neg.big { fill: var(--neg); }
.myoy .kwc-w.mix { fill: var(--ink-2); }
.myoy .kwc-w:hover { opacity: .7; } .myoy .kwc-w:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.myoy .kwc-sel { fill: var(--surface); stroke-width: 2; }
.myoy .kwc-sel.pos { stroke: var(--pos); } .myoy .kwc-sel.neg { stroke: var(--neg); } .myoy .kwc-sel.mix { stroke: var(--ink-2); }
.myoy .kwc-svg.has-on .kwc-w { opacity: .3; } .myoy .kwc-svg.has-on .kwc-w.on { opacity: 1; }
.myoy .kwc-voices { display: flex; flex-direction: column; gap: 8px; }
.myoy .kwc-voices:empty { display: none; }
.myoy .kwc-h { font-size: 12.5px; font-weight: 700; }
.myoy .badge { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--axis); color: var(--ink-2); margin-left: 6px; }

/* 判断（好調・両論・苦戦）の色。コメント表と景気ウォッチャーで共通 */
.myoy .tone { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.myoy .tone.t-pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.myoy .tone.t-neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.myoy .tone.t-mix { color: var(--mix); background: color-mix(in srgb, var(--mix) 14%, transparent); }
.myoy .tone.t-na { color: var(--muted); background: var(--wash); font-weight: 500; }
.myoy .tone-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--grid); max-width: 520px; }
.myoy .tone-bar .t-pos { background: var(--pos); } .myoy .tone-bar .t-neg { background: var(--neg); }
.myoy .tone-bar .t-mix { background: var(--mix); } .myoy .tone-bar .t-na { background: var(--axis); }
.myoy .tone-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.myoy .cm-filters { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.myoy .cm-table { font-size: 12.5px; }
.myoy .cm-table td { vertical-align: top; white-space: normal; padding: 8px 10px; }
.myoy .cm-table td.cm-tone, .myoy .cm-table td.cm-co { white-space: nowrap; }
.myoy .cm-table td.cm-fac { min-width: 84px; }
.myoy .cm-table td.cm-text { min-width: 320px; line-height: 1.65; }
.myoy .cm-table td.cm-text p { margin: 0 0 4px; }
.myoy .cm-table details summary { font-size: 11.5px; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.myoy .cm-table a { font-size: 11.5px; color: var(--ink-2); }
.myoy .cm-table mark { background: color-mix(in srgb, var(--s4) 30%, transparent); color: inherit; border-radius: 2px; }
.myoy .fac { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--axis); color: var(--ink-2); margin: 0 4px 4px 0; white-space: nowrap; }

/* 各社のコメント */
.myoy .cm-list { margin-top: 0; }
.myoy .cm-item { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--grid); min-width: 0; }
.myoy .cm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.myoy .cm-name { border: 0; background: transparent; padding: 0; font-weight: 700; font-size: 13px; cursor: pointer; text-align: left; }
.myoy .cm-name:hover { text-decoration: underline; }
.myoy .cm-name .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, transparent); border: 1.5px solid var(--c, var(--axis)); margin-right: 6px; vertical-align: 1px; }
.myoy .cm-val { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.myoy .cm-item p { margin: 0; font-size: 12.5px; line-height: 1.65; }
.myoy .cm-item mark { background: color-mix(in srgb, var(--s4) 30%, transparent); color: inherit; border-radius: 2px; }
.myoy .cm-item a { font-size: 11.5px; color: var(--ink-2); }

/* パネル */
.myoy .cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.myoy .panel { background: var(--surface); border: 1px solid var(--ring); border-radius: 10px; padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 860px) { .myoy .cols { grid-template-columns: minmax(0, 1fr); } }

/* ランキング（100を基準にした左右の棒） */
.myoy .rank { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; margin-inline: -6px; padding-inline: 6px; }
.myoy .rank-row { display: grid; grid-template-columns: 14px minmax(84px, 38%) minmax(0, 1fr) 56px; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left; padding: 3px 4px; border-radius: 6px; cursor: pointer; min-height: 26px; }
.myoy .rank-row:hover { background: var(--wash); }
.myoy .rank-row .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--axis); }
.myoy .rank-row[aria-pressed="true"] .dot { border-color: transparent; background: var(--c); }
.myoy .rank-row[aria-pressed="true"] .nm { font-weight: 700; }
.myoy .rank-row .nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myoy .rank-row .track { position: relative; height: 12px; }
.myoy .rank-row .track::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--axis); }
.myoy .rank-row .bar { position: absolute; top: 0; height: 12px; min-width: 2px; }
.myoy .rank-row .bar.pos { left: calc(50% + 1px); background: var(--pos); border-radius: 0 4px 4px 0; }
.myoy .rank-row .bar.neg { right: calc(50% + 0px); background: var(--neg); border-radius: 4px 0 0 4px; }
.myoy .rank-row .val { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.myoy .rank-row.na .val, .myoy .rank-row.na .nm { color: var(--muted); }
.myoy .hint { font-size: 12px; color: var(--ink-2); min-height: 1.6em; }

/* 推移 */
.myoy .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); }
.myoy .legend span { display: inline-flex; align-items: center; gap: 6px; }
.myoy .legend i { width: 16px; height: 0; border-top: 2px solid var(--c); display: inline-block; }
.myoy .legend i.dash { border-top-style: dashed; }
.myoy .chart { width: 100%; }
.myoy svg { display: block; max-width: 100%; }
.myoy svg text { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.myoy svg text.lbl { fill: var(--ink-2); font-size: 12px; }

/* ヒートマップ */
.myoy .heat { align-items: start; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 8px; }
/* 月の見出し。上端の切り替えバーの下に張り付く */
.myoy .heat-head { display: grid; gap: 0 8px; position: sticky; top: var(--bar-h, 96px); z-index: 4; background: var(--surface); margin-bottom: -12px; padding-top: 2px; border-bottom: 1px solid var(--grid); }
.myoy .heat-head-scroll { overflow: hidden; min-width: 0; }
.myoy .heat-head svg { display: block; max-width: none; }
.myoy .heat-head text { font-size: 11px; fill: var(--ink-2); }
.myoy .heat-head text.hy { font-weight: 700; fill: var(--ink); }
.myoy .heat-head text.hm.sel { font-weight: 700; fill: var(--ink); }
.myoy .heat-labels.heat-labels-r { display: none; }
.myoy .heat-labels.heat-labels-r .c, .myoy .heat-labels.heat-labels-r .ref { text-align: left; padding: 0 0 0 4px; }
@media (min-width: 900px) { .myoy .heat-labels.heat-labels-r { display: flex; } }
.myoy .heat-labels { display: flex; flex-direction: column; padding-top: 4px; }
.myoy .heat-labels .g { height: 22px; font-size: 11px; color: var(--muted); letter-spacing: .06em; display: flex; align-items: end; padding-bottom: 2px; white-space: nowrap; }
.myoy .heat-labels .c { text-align: right; height: 18px; padding-right: 4px; font-size: 12px; line-height: 18px; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myoy .heat-scroll { overflow-x: auto; min-width: 0; }
.myoy .heat-scroll svg { max-width: none; }
.myoy .heat-labels > * { flex: none; }
.myoy .heat-labels .g.stat { color: var(--ink-2); font-weight: 700; letter-spacing: .02em; }
.myoy .heat-labels .ref { height: 18px; line-height: 18px; font-size: 11.5px; color: var(--ink-2); font-style: italic; padding-left: 13px; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myoy .heat svg rect.refcell { stroke: var(--ink-2); stroke-width: 1; }
.myoy .scale { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.myoy .scale .ramp { display: flex; }
.myoy .scale .ramp i { width: 18px; height: 10px; display: block; }
.myoy .scale .brk { width: 0; height: 14px; border-left: 2px solid var(--ink); display: inline-block; margin-left: 12px; }
.myoy .scale .na { width: 14px; height: 10px; border: 1px dashed var(--axis); display: inline-block; margin-left: 12px; }
@media (max-width: 560px) { /* 数値の欄を広く取るため、社名・業態名は6文字ほどで切る */
  .myoy .heat-labels .c, .myoy .heat-labels .ref { max-width: 78px; font-size: 11.5px; }
  .myoy .heat-labels .g { display: block; max-width: 78px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; }
  .myoy .heat-labels .g .gm { display: none; }
}

/* 表 */
.myoy details > summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.myoy .table-wrap { overflow-x: auto; margin-top: 12px; }
.myoy table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.myoy th, .myoy td { padding: 6px 10px; border-bottom: 1px solid var(--grid); text-align: left; white-space: nowrap; }
.myoy th { color: var(--ink-2); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; position: sticky; top: 0; background: var(--surface); }
.myoy td.num, .myoy th.num { text-align: right; font-variant-numeric: tabular-nums; }
.myoy td.scope { color: var(--ink-2); white-space: normal; min-width: 180px; }

/* 吹き出し */
.myoy .tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--ring); box-shadow: 0 6px 20px rgba(0, 0, 0, .16); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; max-width: 280px; line-height: 1.45; }
.myoy .tip .t { color: var(--ink-2); font-size: 11.5px; margin-bottom: 4px; }
.myoy .tip .r { display: grid; grid-template-columns: 14px auto 1fr; gap: 6px; align-items: center; }
.myoy .tip .r i { width: 12px; border-top: 2px solid var(--c, var(--axis)); }
.myoy .tip .r b { font-variant-numeric: tabular-nums; }
.myoy .tip .r span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myoy .tip .s { color: var(--muted); font-size: 11.5px; margin-top: 4px; }

.myoy .notes { font-size: 12px; color: var(--ink-2); }
.myoy .notes p { margin: 0 0 4px; break-inside: avoid; }
@media (min-width: 900px) { .myoy .notes { column-count: 2; column-gap: 32px; } } /* 広い画面は2段にして、1行を読みやすい長さに保ったまま幅を使う */
@media (prefers-reduced-motion: no-preference) { .myoy .rank-row .bar { transition: width .25s ease; } }

/* アイコン */
.myoy .has-ico { display: flex; align-items: center; gap: 6px; }
.myoy .ico { flex: none; width: 18px; height: 18px; padding: 3px; box-sizing: content-box; border-radius: 6px; fill: none; stroke: var(--ic, var(--ink-2)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--ic, var(--ink-2)) 13%, transparent); }
.myoy h2.has-ico .ico { width: 16px; height: 16px; }
.myoy .env-tile > .k.has-ico, .myoy .temp-tile .k > span.has-ico { font-weight: 600; color: var(--ink); }
.myoy .env-tile { border-top: 3px solid var(--tile-c, var(--ring)); }
.myoy .cal-tile { --tile-c: var(--ic-cal); } .myoy .cpi-tile { --tile-c: var(--ic-price); } .myoy .jnto-tile { --tile-c: var(--ic-plane); }
.myoy .temp-tile { --tile-c: var(--ic-temp); } .myoy .rain-tile { --tile-c: var(--ic-rain); } .myoy .pop-tile { --tile-c: var(--ic-pop); }

/* 読みの一文 */
.myoy .read { font-size: 12.5px; color: var(--ink); line-height: 1.55; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--grid); }

/* 業態DI */
.myoy .di-table { font-size: 12.5px; }
.myoy .di-table td { padding: 5px 10px; }
.myoy .di-table tbody tr { cursor: pointer; }
.myoy .di-table tbody tr:hover td { box-shadow: inset 0 0 0 999px var(--wash); }
.myoy .di-table tr.total td { font-weight: 700; border-top: 1px solid var(--axis); }
.myoy .di-table tr.sub td:first-child { padding-left: 22px; }
.myoy .di-table tr.on td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.myoy .di-table td.di-v { font-weight: 700; font-size: 13.5px; min-width: 64px; }
.myoy .di-table td.up { color: var(--pos); } .myoy .di-table td.down { color: var(--neg); }
.myoy .spark { display: block; }

/* せんデータの見立て */
.myoy .hero-note { border-left: 3px solid var(--ink); padding: 4px 0 4px 12px; margin-top: 10px; max-width: 86ch; }
.myoy .hero-note-k { font-size: 11.5px; color: var(--ink-2); letter-spacing: .06em; font-weight: 700; }
.myoy .hero-note-t p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.75; }

/* スマホ幅: コメント表を1社1枚のカードに、ナビは横に流す */
@media (max-width: 640px) {
  .myoy .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .myoy .bar .filters { gap: 6px 10px; }
  .myoy .nav button { flex: none; }
  .myoy .cm-table thead { display: none; }
  .myoy .cm-table, .myoy .cm-table tbody { display: block; width: 100%; min-width: 0; }
  .myoy .cm-table tr.cm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
  .myoy .cm-table tr.cm-detail { display: block; }
  .myoy .cm-table td { display: block; padding: 0; border: 0; min-width: 0; white-space: normal; }
  .myoy .cm-table td.cm-co { grid-column: 1 / -1; }
  .myoy .cm-table td.cm-kw::before { content: attr(data-h); display: block; font-size: 11px; color: var(--muted); }
}

/* 好調・不調ワード */
.myoy .kw { display: inline-block; font-size: 12px; padding: 1px 8px; margin: 0 4px 4px 0; border-radius: 999px; white-space: nowrap; }
.myoy .kw.pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 11%, transparent); }
.myoy .kw.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 11%, transparent); }
.myoy .kw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 4px; }
.myoy .kw-top .sub { margin: 0 6px 0 0; }
.myoy .muted { color: var(--muted); }
.myoy .cm-table th:nth-child(2) { color: var(--pos); } .myoy .cm-table th:nth-child(3) { color: var(--neg); }
.myoy .cm-table td.cm-kw { white-space: normal; min-width: 180px; padding-top: 7px; }
.myoy .cm-table tr.cm-row:hover td { background: var(--wash); }
.myoy .cm-src { margin-left: 8px; font-size: 11.5px; color: var(--ink-2); }
.myoy .cm-table td.cm-kw { max-width: 360px; }
.myoy .cm-table td.cm-kw .kw { white-space: normal; }