/* チャートリスト。見た目は NewChartList（elefolo.com）に合わせる。 */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 数値の入力欄に上下の矢印（スピン）を出さない */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body {
  font-family: Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ ゴシック", sans-serif;
  font-size: 12px;
  white-space: nowrap;
  color: #000;
  background: #fff;
}

button {
  font: inherit;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid lightgray;
  border-bottom-width: 2px;
  background-color: #dddddd;
  cursor: pointer;
  padding: 1px 6px;
  color: #000;
}

button:hover:not(:disabled) {
  background-color: #cfcfcf;
}

button:disabled {
  cursor: default;
}

input, select, textarea {
  font: inherit;
  font-size: 12px;
}

input[type="checkbox"], input[type="radio"] {
  vertical-align: middle;
  margin: 0 2px 0 4px;
}

fieldset {
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  margin: 2px;
  padding: 2px 6px 4px;
}

legend {
  padding: 0 2px;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 6px 0;
}

a {
  color: #00e;
}

.num { text-align: right; }
.small { font-size: smaller; }
.red { color: red; }
.blue { color: blue; }
.plus, .positive { color: red; }
.minus, .negative { color: blue; }
.datetime { font-size: x-small; color: gray; }
.aqua { background-color: aquamarine; }

/* 準備中の機能は灰色で押せない */
.todo, .todo span, label.todo { color: #aaa !important; }
button.todo { cursor: not-allowed; }

/* ---------------------------------------------------------------- 3 分割のレイアウト */

.layout {
  display: grid;
  grid-template-rows: 46px 1fr;
  grid-template-columns: 200px 1fr;
  grid-template-areas: "top top" "left main";
  height: 100vh;
}

.layout.leftHidden {
  grid-template-columns: 0 1fr;
}

.layout.leftHidden .panel-left {
  display: none;
}

.panel {
  border: 1px solid #dfdfdf;
  padding: 5px;
  overflow: auto;
  box-sizing: border-box;
}

.panel-top {
  grid-area: top;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.panel-left {
  grid-area: left;
  overflow-x: hidden;
}

.panel-main {
  grid-area: main;
}

.functionGroup {
  margin-right: 30px;
}

.kabuPlusArea a {
  margin-right: 4px;
}

.kabuPlusArea input {
  width: 6em;
}

.kabuPlusArea button {
  padding: 0 4px;
}

.menuButton {
  background-color: aquamarine;
}

/* ---------------------------------------------------------------- 左メニュー */

.plusMinusButton {
  width: 24px;
  padding: 1px 0;
}

button.codeGroupButton {
  width: 140px;
  margin-bottom: 5px;
  vertical-align: middle;
}

button.codeGroupButtonHalf {
  width: 66px;
  margin-right: 4px;
  margin-bottom: 5px;
  vertical-align: middle;
}

button.codeGroupButton75 {
  width: 100px;
  margin-bottom: 5px;
  margin-right: 4px;
  vertical-align: middle;
}

button.codeGroupButton25 {
  width: 36px;
  margin-bottom: 5px;
  vertical-align: middle;
}

.lastPushCodeGroupButton {
  background: linear-gradient(to right, #ffdbd3, #ffffff);
}

.honjituKessan {
  font-size: smaller;
  line-height: 1.4;
  padding: 4px 0 6px;
}

/* 「予定」「発表済み」の見出しの幅をそろえ、件数の右端を同じ位置にする */
.honjituKessan .kessanRow .label {
  display: inline-block;
  width: 4.5em;
}

.honjituKessan .count {
  display: inline-block;
  min-width: 40px;
  text-align: right;
}

.panel-left input[type="date"] {
  width: 130px;
}

/* ---------------------------------------------------------------- 検索条件 */

.condTop td {
  vertical-align: top;
  text-align: left;
}

.condTop textarea {
  vertical-align: top;
}

.resultSettingSwitchLabel {
  font-weight: bold;
}

/* 見出しの行。右端に［条件の初期化］ */
.resultSettingHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#initializeButton[hidden] {
  display: none;
}

/* 銘柄カードの文字の大きさ（「文字ｻｲｽﾞ」で変える）。カードの中は em で書き、ここを基準にする */
#resultArea {
  font-size: var(--card-font, 12px);
}

#resultArea button {
  font-size: 1em;
}

#displaySettingTableContainer {
  background-color: #e4e4e4;
  padding: 2px;
}

#displaySettingTableContainer > fieldset {
  background-color: #f4f4f4;
}

input.size {
  width: 52px;
}

/* 数字だけを入れる欄は、入りうる半角数字の桁数＋少しの余白の幅にする（枠と内側の余白を含めた幅） */
input.digits2, input.digits3, input.digits4 {
  box-sizing: border-box;
  padding: 1px 3px;
}
input.digits2 { width: calc(2ch + 12px); }
input.digits3 { width: calc(3ch + 12px); }
input.digits4 { width: calc(4ch + 12px); }

.chartCondTable th {
  font-weight: bold;
  padding: 0 4px;
}

.chartCondTable td {
  text-align: center;
  padding: 1px 2px;
}

.chartCondTable .techCell {
  text-align: left;
  white-space: nowrap;
}

/* 表示しないチャートの行は薄く（触れば今までどおり変えられる） */
.chartCondTable tr.chartOff td:not(.chartCheck) {
  opacity: 0.4;
}

.chartCondTable tr.chartOff td:not(.chartCheck):hover {
  opacity: 1;
}

.outerLinkArea {
  text-align: left;
}

.outerLinkArea select {
  margin-right: 2px;
}

.outerLinkSlots {
  margin-left: 12px;
}

.chartCheck {
  white-space: nowrap;
}

.argNums {
  white-space: nowrap;
  padding: 4px;
  background-color: rgb(210, 248, 210);
  border: 1px solid #888;
  border-radius: 5px;
}

.presetButton {
  font-size: smaller;
  padding: 1px 4px;
  margin-right: 2px;
}

/* 線の期間のプリセットは、中身によらず「25,75,200」の幅にそろえる */
.presetButton[data-line-preset] {
  box-sizing: content-box;
  width: 9ch;
  text-align: center;
  white-space: nowrap;
}

.argNum {
  text-align: right;
}

.displaySettingGrid {
  text-align: left;
  overflow-x: auto;
}

.displaySettingRow {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
}

.displayTypeAreaFieldset {
  padding: 2px;
  background-color: #f4f4f4;
}

.sortArea td {
  vertical-align: middle;
}

.fieldContainer {
  border-radius: 5px;
  border: 1px solid gray;
  padding: 2px;
}

.searchButtons {
  margin-top: 4px;
}

/* ---------------------------------------------------------------- 検索結果 */

#infoArea {
  margin: 4px 0;
}

#infoArea .error {
  color: red;
  font-weight: bold;
}

.pager {
  margin: 4px 0;
}

.pager button {
  min-width: 32px;
  margin-right: 2px;
}

.pager button.current {
  background: #ffdbd3;
  font-weight: bold;
}

/* 銘柄カードは折り返しの flex で並べる。行の中で高さがそろうので、1 枚だけ高いカードがあっても下の段が崩れない。 */
#resultArea {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.stockContent {
  flex: none;
  border: thin solid #000;
  padding: 1px 2px;
  margin: 0 1px 1px 0;
  background: #fff;
}

.stockContent a {
  text-decoration: none;
}

.stockContent.displayOfLine {
  display: flex;
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
}

.lineStockInfo {
  width: 200px;
  flex: none;
  white-space: normal;
}

.stockInfoMain .code {
  font-weight: bold;
}

.stockInfoMain .tansin {
  margin-left: 3px;
  font-size: 0.92em;
}

.fav {
  display: inline-block;
  width: 16px;
  text-align: center;
  cursor: pointer;
  color: #bbb;
}

.fav.on {
  color: #f5a000;
}

.erase {
  float: right;
  cursor: pointer;
  color: #888;
  padding: 0 3px;
}

.erase:hover {
  color: red;
}

.isTaisyaku {
  color: red;
}

span.kessan {
  font-size: 90%;
  color: darkorange;
  font-weight: 700;
}

span.toujituKessan {
  font-size: 90%;
  color: red;
  font-weight: 900;
}

.stockInfoSub1 button {
  font-size: 0.92em;
  padding: 0 4px;
}

.outerLink {
  border-radius: 2px;
  border: 1px solid gray;
  margin: 0 2px;
  padding: 0 2px 1px 1px;
  text-decoration: none;
}

.outerLink:hover {
  background-color: yellow;
}

.stockPriceMain {
  white-space: normal;
}

/* タイルではカードの幅に合わせる（自分ではカードを広げない） */
.stockPriceMain.fitCard {
  width: 0;
  min-width: 100%;
}

table.contentTable {
  border-collapse: collapse;
}

table.contentTable > tbody > tr > td {
  vertical-align: top;
  text-align: left;
  padding: 0 2px 2px 0;
}

.chartBox {
  position: relative;
  border: 1px solid #ddd;
  background: #fff;
}

.chartBox .chartTitle {
  position: absolute;
  top: 1px;
  left: 4px;
  z-index: 2;
  font-size: 10px;
  color: #555;
  background: rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

.chartBox .paneLabel {
  position: absolute;
  left: 4px;
  z-index: 2;
  font-size: 10px;
  line-height: 1.2;
  color: #555;
  background: rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

.chartBox .empty {
  padding: 8px;
  color: gray;
}

/* 騰落率背景色 */
.priceBackMinus15 { background: linear-gradient(white, rgb(0, 163, 0)); }
.priceBackMinus10 { background: linear-gradient(white, rgb(50, 168, 50)); }
.priceBackMinus5, .priceBackMinus { background: linear-gradient(white, rgb(89, 155, 89)); }
.priceBackPlus15 { background: linear-gradient(white, #ffa500); }
.priceBackPlus10 { background: linear-gradient(white, #ffbb3c); }
.priceBackPlus5, .priceBackPlus { background: linear-gradient(white, rgb(255, 214, 139)); }

/* 開示一覧 */
.kaijiList {
  overflow: hidden;
  font-size: 0.92em;
  border: 1px solid #ddd;
  background: #fff;
}

.kaijiList .listTitle {
  background-color: rgb(226, 255, 246);
  font-weight: bold;
  padding: 1px 3px;
}

.kaijiRow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px;
}

.kaijiRow.toujitu {
  background-color: lightyellow;
}

.kaijiRow .ymd {
  color: #555;
  margin-right: 4px;
}

.kaijiRow.toujitu .ymd {
  color: red;
}

/* 業績表 */
table.gyosekiTable {
  border-collapse: collapse;
  font-size: 0.92em;
  background-color: white;
}

table.syusei + table.syusei {
  margin-top: 4px;
}

table.gyosekiTable th,
table.gyosekiTable td {
  border: 1px solid #777;
  padding: 0 3px;
}

/* 値・利益率・前期比の段数が列ごとに違っても、行の中で上からそろえる */
table.gyosekiTable td {
  vertical-align: top;
}

table.gyosekiTable tr.headerRow th,
table.gyosekiTable td.gyosekiTableTitleCell {
  background-color: rgb(226, 255, 246);
  text-align: center;
}

table.gyosekiTable td.numCell {
  text-align: right;
  min-width: 52px;
}

table.gyosekiTable tr.forecastRow td {
  background: #f6f6ff;
}

table.gyosekiTable .sub {
  display: block;
  font-size: 90%;
}

table.gyosekiTable .kessanki {
  text-align: left;
}

/* 四半期の表: 同じ決算期の四半期どうしは薄線、決算期の変わり目は太線 */
table.gyosekiTable.shihanki tr:not(.headerRow) td:not(.gyosekiTableTitleCell) {
  border-top-color: #ccc;
  border-bottom-color: #ccc;
}

/* 上の薄線の指定より詳細度を高くして、境界線の色を黒にする */
/* 最終行の下は薄線にせず、表の外枠の線を出す */
table.gyosekiTable.shihanki tr:last-child:not(.headerRow) td:not(.gyosekiTableTitleCell) {
  border-bottom-color: #777;
}

/* 決算の抽出（予定・発表済み）で、その期間に発表された行 */
table.gyosekiTable tr.kessanHit td {
  background-color: #fff2a8;
}

/* 当期累計の「前年同期比」の行は、上を太線で区切る */
table.gyosekiTable tr.yoyRow td {
  border-top: 2px solid #000;
}

table.gyosekiTable.shihanki tr.fyStart:not(.headerRow) td:not(.gyosekiTableTitleCell) {
  border-top: 2px solid #000;
}

.empty {
  color: gray;
}

/* ---------------------------------------------------------------- 案内・ダイアログ */

#guideArea {
  clear: both;
  text-align: left;
  color: #444;
  white-space: normal;
  margin-top: 16px;
}

.dialog {
  border: 1px solid #888;
  border-radius: 6px;
  padding: 12px;
}

.dialogTitle {
  font-weight: bold;
  margin-bottom: 6px;
}

.dialogButtons {
  margin-top: 8px;
  text-align: right;
}

/* スマホ幅: 左メニューは上に畳む */
@media (max-width: 900px) {
  .layout {
    display: block;
    height: auto;
  }
  .panel {
    overflow: visible;
  }
  .panel-top {
    flex-wrap: wrap;
    gap: 4px;
  }
  .condTop textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .condTop td {
    display: block;
  }
  body {
    white-space: normal;
  }
  /* 横に長い設定欄は欄の中だけで横に動かし、ページの幅を画面に収める（ダイアログが画面の外に出ないように） */
  .resultSetting {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
  }
  .dialog {
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
  }
  /* 左メニューはふだん隠し、「メニュー」で開く（開いたまま絞り込みのボタンを押すと閉じる） */
  .layout .panel-left {
    display: none;
  }
  .layout.leftOpen .panel-left {
    display: block;
  }
}

/* スマホ: 銘柄カードを画面の幅に収め、チャート・開示・業績表は縦に積む */
@media (max-width: 600px) {
  #resultArea .stockContent {
    width: 100%;
    margin-right: 0;
    box-sizing: border-box;
    overflow-x: auto;
  }
  .stockContent.displayOfLine {
    display: block;
    min-width: 0;
  }
  .lineStockInfo {
    width: auto;
  }
  table.contentTable,
  table.contentTable > tbody,
  table.contentTable > tbody > tr,
  table.contentTable > tbody > tr > td {
    display: block;
    width: 100%;
  }
  table.contentTable > tbody > tr > td {
    padding-right: 0;
  }
  .chartBox,
  .kaijiList,
  .gyosekiGraph,
  .sinyouChart,
  .layoutBlank {
    width: 100% !important;
    box-sizing: border-box;
  }
  /* 開示・S高ニュースは件数ぶんの高さにする（チャートと同じ高さの空欄を作らない） */
  .kaijiList {
    height: auto !important;
    max-height: 300px;
  }
  .searchButtons button {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------- 業績グラフ・各種ダイアログ */

.gyosekiGraph {
  border: 1px solid #ddd;
  background: #fff;
}

.gyosekiGraph svg {
  display: block;
}

.settingTable th {
  text-align: left;
  padding: 4px 8px 4px 0;
  vertical-align: top;
}

.settingTable td {
  padding: 4px 0;
  white-space: normal;
}

.dialogClose {
  float: right;
}

/* 外部リンク編集の説明（小さいと読みにくいので本文より大きめ） */
.outerLinkNote {
  font-size: 14px;
  white-space: normal;
  margin: 6px 0;
}
#outerLinkDialog .dialogTitle,
#outerLinkDialog button { font-size: 14px; }
/* 入力欄は以前の 2 倍の大きさ（約 1200×420px）。中身は等幅（半角のカンマも W も同じ幅）にして URL を見比べやすく */
#outerLinkText {
  box-sizing: border-box;
  width: min(1200px, 90vw);
  height: min(420px, 60vh);
  font-size: 15px;
  font-family: "BIZ UDGothic", "BIZ UDゴシック", "MS Gothic", "ＭＳ ゴシック", "Osaka-Mono", "Osaka－等幅", monospace;
}

.detailDialog {
  width: 96vw;
  max-width: 96vw;
  box-sizing: border-box;
}

#detailChartBox {
  width: 100%;
  height: calc(92vh - 60px);
  margin-top: 6px;
}

.tableDialog {
  width: min(1400px, 96vw);
}

.tableViewArea {
  max-height: 78vh;
  overflow: auto;
  margin-top: 6px;
}

table.tableView {
  border-collapse: collapse;
  font-size: 0.92em;
}

table.tableView th {
  position: sticky;
  top: 0;
  background: rgb(226, 255, 246);
  cursor: pointer;
  user-select: none;
}

table.tableView th,
table.tableView td {
  border: 1px solid #aaa;
  padding: 1px 4px;
}

table.tableView tbody tr:nth-child(even) {
  background: #f7f7f7;
}

/* 印刷用表示: 検索結果だけを出す */
.printBar {
  display: none;
}

body.printMode .panel-top,
body.printMode .panel-left,
body.printMode #condForm,
body.printMode #condForm + hr,
body.printMode .pager,
body.printMode #guideArea,
body.printMode .erase,
body.printMode .fav,
body.printMode .stockInfoSub1 button {
  display: none !important;
}

body.printMode .layout {
  display: block;
  height: auto;
}

body.printMode .panel-main {
  overflow: visible;
  border: 0;
}

body.printMode .printBar {
  display: block;
  position: fixed;
  top: 4px;
  right: 8px;
  z-index: 10;
}

@media print {
  body.printMode .printBar {
    display: none;
  }
  .stockContent {
    break-inside: avoid;
  }
}

/* スクリーニング（テーマ検索と同じく画面いっぱいに使う） */
.screeningDialog { box-sizing: border-box; height: 96vh; max-height: 96vh; white-space: normal; overflow: hidden; }
.screeningDialog form { display: flex; flex-direction: column; height: 100%; min-width: 0; }
#screeningBody { flex: 0 1 auto; max-height: 55%; min-height: 0; overflow: auto; white-space: normal; }
.screeningDialog fieldset { border: 1px solid #ccc; border-radius: 4px; margin: 0 0 4px; padding: 4px 6px; min-width: 0; }
.screenTop { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; margin-bottom: 4px; }
.screenTopItem { white-space: nowrap; }
.screenTopItem button { font-size: smaller; padding: 1px 4px; }
.screenChoice { display: inline-block; margin-right: 8px; white-space: nowrap; }
.screenSectors { display: flex; gap: 6px; border: 1px solid #ccc; border-radius: 4px; padding: 4px 6px; margin-bottom: 4px; }
.screenSectorButtons { display: flex; flex-direction: column; gap: 2px; flex: none; }
.screenSectorButtons button { white-space: nowrap; }
.screenSectorGroup { display: flex; align-items: start; gap: 4px; }
.screenSectorGroup + .screenSectorGroup { border-top: 1px dotted #ccc; margin-top: 2px; padding-top: 2px; }
.screenSectorGroupName { flex: none; width: 72px; font-size: 12px; padding: 0 2px; white-space: nowrap; }
.screenSectorRow { display: flex; flex-wrap: wrap; }
.screenSectorRow .screenChoice { width: 92px; margin-right: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.screenCondButtons { margin-bottom: 4px; }
.screenCondButtons button { font-size: smaller; }
.screenColumns { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: flex-start; }
.screenColumn table { border-collapse: collapse; }
.screenColumnHead { font-weight: bold; font-size: 12px; }
.screenColumn tr:hover { background: #f4f8fc; }
.screenColumn td { padding: 1px 2px; white-space: nowrap; font-size: 12px; }
.screenColumn td.condItemCaption { padding-right: 4px; }
.screenNum { width: 50px; text-align: right; font-size: 12px; }
.screenPick { font-size: 12px; width: 140px; }
input[type="date"].screenNum { width: 112px; }
.screenSearchRow { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#screeningSearchButton { width: 80%; max-width: 900px; background-color: aquamarine; }
.screenResult { flex: 1 1 0; min-height: 80px; overflow: auto; border: 1px solid #ddd; }
.screenResultTable { border-collapse: collapse; font-size: 12px; }
.screenResultTable th { position: sticky; top: 0; background: #eef3f8; cursor: pointer; padding: 2px 6px; white-space: nowrap; border: 1px solid #ccc; }
.screenResultTable td { padding: 1px 6px; border: 1px solid #ccc; border-top-color: #eee; border-bottom-color: #eee; white-space: nowrap; }
.screenResultTable td a { text-decoration: none; }
.screenResultTable td a:hover { text-decoration: underline; }
.screenResultTable td.num { text-align: right; }
.screenResultTable tr:hover td { background: #f4f8fc; }
.screenSetCodes { width: 100%; margin-top: 4px; }
/* 押せないとき（検索前・該当なし）も色は同じで、薄くして見分ける */
.screenSetCodes { background-color: aquamarine; }
.screenSetCodes:disabled { opacity: 0.45; cursor: not-allowed; }

/* 52 週高値履歴・売買代金ランキング */
.wideDialog {
  width: 96vw;
  max-width: 96vw;
}

.rankingCond .condTitle {
  background: lightblue;
  font-weight: bold;
  padding: 0 4px;
  margin: 0 4px 0 12px;
}

.rankingCond label {
  border: 1px solid lightgray;
  margin-right: 2px;
}

.rankingCond textarea {
  vertical-align: middle;
}

.rankingChart {
  position: relative;
  height: 66vh;
  margin-top: 6px;
}

/* 上段・下段の見出し（チャートの左上に重ねる） */
.rankingChart .paneLabel {
  position: absolute;
  left: 4px;
  z-index: 2;
  padding: 0 2px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  background: rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

/* バブルチャート */
.bubbleCond {
  margin: 4px 0;
}

.bubblePanels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bubblePanel {
  flex: 1 1 420px;
  min-width: 0;
  position: relative;
}

.bubblePanel[hidden] {
  display: none;
}

/* ズームしたとき、グラフの枠の右上に出す */
.bubbleReset {
  position: absolute;
  top: 34px;
  right: 22px;
  z-index: 1;
}

.bubblePresets {
  margin: 2px 0;
}

.bubblePresets button {
  margin-right: 4px;
}

.bubbleGuide {
  margin: 2px 0 6px;
  padding: 2px 6px;
  border-left: 4px solid #2b8a3e;
  background: #ebfbee;
  font-size: 12px;
}

.bubbleGuide:empty {
  display: none;
}

.bubbleClickCond {
  margin: 2px 0 4px;
  padding: 2px 8px;
}

.bubbleClickCond label {
  margin-right: 8px;
}

.bubblePanelCond {
  margin: 2px 0;
}

.bubbleBox {
  position: relative;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: crosshair;
}

.bubbleBox svg {
  display: block;
}

/* ドラッグ中の拡大範囲 */
.bubbleZoomRect {
  position: absolute;
  border: 1px solid #1c7ed6;
  background: rgba(28, 126, 214, 0.12);
  pointer-events: none;
}

.bubbleBox .bubble {
  cursor: pointer;
}

/* レイアウト設定 */
.layoutCond {
  margin: 4px 0;
}

.layoutGrid {
  border-collapse: collapse;
  margin: 6px 0;
}

.layoutGrid th,
.layoutGrid td {
  border: 1px solid #ccc;
  padding: 2px;
}

.layoutPreviewRow {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.layoutPreviewCell {
  border: 1px solid #888;
  background: #eef6ff;
  padding: 8px 10px;
  min-width: 80px;
  text-align: center;
}

.layoutPreviewCell.blank {
  background: #fff;
  border-style: dashed;
  color: #999;
}

/* 信用残・日証金 */
.sinyouBairituRui { font-size: 1em; }
.balanceBox { margin: 2px 0; }
table.balance { border-collapse: collapse; font-size: 0.92em; }
table.balance th, table.balance td { border: 1px solid #aaa; padding: 0 4px; text-align: right; white-space: nowrap; }
table.balance th { background: #e8f4ea; text-align: center; font-weight: normal; }
table.balance th.balance_rowTitle { text-align: left; }
table.balance td:first-child, table.balance td.balanceGap + td { text-align: left; }
table.balance .balanceGap { border: none; width: 6px; padding: 0; }
.sinyouChart { overflow: hidden; }

/* 概要・テーマ */
/* 幅 0 + 最小幅 100% で、カードの幅を広げずにカードいっぱいまで使う */
.stockInfoSub2 { font-size: 1em; line-height: 1.4; margin: 2px 0; white-space: normal; overflow-wrap: anywhere; width: 0; min-width: 100%; }
.gaiyoText { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.themeChips { margin-top: 2px; }
.themeChip { white-space: nowrap; font-size: 0.92em; padding: 0 5px; margin: 1px 2px 1px 0; border-radius: 9px; border: 1px solid #b9c7d8; background: #f2f6fb; cursor: pointer; }
.themeChip.strength3 { background: #ffe8cc; border-color: #f08c00; font-weight: bold; }
.themeChip.strength2 { background: #fff4e6; border-color: #ffc078; }
.themeChip.strength1 { color: #555; }
.themeDialog { box-sizing: border-box; height: 80vh; max-height: 80vh; white-space: normal; overflow: hidden; }
.themeDialog form { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.themeCond { margin: 4px 0 8px; white-space: nowrap; }
.themeCategorySelect { margin-right: 4px; }
.themeQuery { width: 240px; margin-right: 16px; }
.themeStock { margin-bottom: 8px; }
.themeCategory { font-weight: bold; font-size: 12px; margin: 4px 0 2px; }
.themeList { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid #ccc; }
.themeTable { border-collapse: collapse; width: 100%; font-size: 12px; table-layout: fixed; }
.themeTable th:nth-child(1) { width: 50px; }
.themeTable th:nth-child(2) { width: 200px; }
.themeTable th:nth-child(3) { width: 200px; }
.themeTable th:nth-child(4) { width: 50px; text-align: right; }
.themeTable th:nth-child(1), .themeTable td:nth-child(1) { text-align: center; }
/* 目安の列に 240px 残らない幅では、ほかの列を詰める */
@media (max-width: 1100px) {
  .themeTable th:nth-child(1) { width: 32px; }
  .themeTable th:nth-child(2) { width: 160px; }
  .themeTable th:nth-child(3) { width: 130px; }
  .themeTable th:nth-child(4) { width: 50px; }
}
.themeTable th { position: sticky; top: 0; background: #eef2f7; text-align: left; padding: 3px 6px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
.themeTable td { padding: 2px 6px; border-bottom: 1px solid #eee; border-right: 1px solid #e2e2e2; white-space: normal; }
.themeTable th:last-child, .themeTable td:last-child { border-right: none; }
.themeTable td:nth-child(2) { white-space: nowrap; }
.themeTable td:nth-child(4) { text-align: right; padding-right: 10px; }
.themeTable tbody tr { cursor: pointer; }
.themeTable tbody tr:hover { background: #f5f9ff; }
.themeTable tbody tr.checked { background: #e6fff6; }
.themeTable tbody tr.empty td { color: #aaa; cursor: default; }
/* 選んだテーマに当たる銘柄の一覧（テーマ表の下） */
.themeHits { flex: 1; min-height: 80px; overflow-y: auto; border: 1px solid #ccc; border-top: none; }
.themeHitTable { border-collapse: collapse; width: 100%; font-size: 12px; table-layout: fixed; }
.themeHitTable th { position: sticky; top: 0; background: #eef2f7; text-align: left; padding: 3px 6px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
.themeHitTable td { padding: 2px 6px; border-bottom: 1px solid #eee; border-right: 1px solid #e2e2e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.themeHitTable th:last-child, .themeHitTable td:last-child { border-right: none; white-space: normal; }
.themeHitTable th:nth-child(1) { width: 60px; }
.themeHitTable th:nth-child(2) { width: 200px; }
.themeHitTable th:nth-child(3) { width: 90px; }
.themeHitTable th:nth-child(4) { width: 50px; text-align: center; }
.themeHitTable td:nth-child(4) { text-align: center; }
.themeHitTable tbody tr.empty td { color: #aaa; }

.themeFooter { margin-top: 8px; }
.themeFooter .small { display: block; min-height: 1em; margin-bottom: 4px; color: #555; }
.themeFooterButtons { display: flex; gap: 8px; }
.themeFooterButtons button { padding: 6px 0; }
.themeFooterButtons button { flex: 1; }

/* IPO（上場年） */
/* 左メニューのほかのボタン（140px）と同じ幅に収める */
.ipoButtons { display: flex; flex-direction: column; gap: 2px; width: 140px; }
.ipoRow { display: flex; gap: 2px; }
.ipoButton { width: 48px; font-size: 12px; padding: 1px 0; }
.ipoHigh52Button { flex: 1; min-width: 0; font-size: 12px; padding: 1px 0; white-space: nowrap; }
/* 52週高の列の上に (*) を 1 つだけ出す */
.ipoHead { display: flex; align-items: center; gap: 2px; width: 140px; margin-bottom: 2px; }
/* 「IPO」は年の列の上、［全52週高］は 52週高の列の左端にそろえる */
.ipoHead > span:first-child { flex: none; width: 48px; text-align: center; }
.ipoAllButton { flex: none; padding: 1px 4px; }
.ipoHigh52Head { flex: none; }

/* 指標種類（複数選べるチェックボックス） */
.techBoxes {
  white-space: nowrap;
}

.techBoxes label {
  margin-right: 4px;
}

.chartBox .paneLabel .legendName {
  color: #333;
  font-weight: bold;
}

.chartBox .paneLabel > div {
  white-space: nowrap;
}

/* 銘柄管理 */
#codesManagerDialog { width: min(720px, 96vw); }
.codesManagerSave, .codesManagerFile { margin: 6px 0; }
.codesManagerList { max-height: 60vh; overflow: auto; border: 1px solid #ddd; }
.codesManagerTable { border-collapse: collapse; width: 100%; }
.codesManagerTable td { padding: 3px 6px; border-bottom: 1px solid #eee; white-space: nowrap; }
.codesManagerTable td.name { white-space: normal; word-break: break-all; width: 100%; }
.codesManagerTable td.num { text-align: right; }
.codesManagerTable tr:hover { background: #f4f8fc; }
.codesManagerTable .empty { color: #888; padding: 12px; }
.codesManagerTable td.name { min-width: 7em; }
@media (max-width: 600px) {
  .codesManagerTable td.date { display: none; }
}

.displayItemsSwitch {
  text-align: left;
  margin: 2px 0;
}

.displayItemsSwitch .small {
  margin-left: 8px;
  color: #555;
}

/* 開閉のつまみ。チェックボックスは隠して、三角で開いているかを見せる */
.foldToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 1px 4px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background: #f4f4f4;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.foldToggle:hover {
  background: #fff;
}

.foldToggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.foldToggle .foldIcon::before {
  content: '▶';
  display: inline-block;
  width: 1em;
  font-size: 10px;
  text-align: center;
}

.foldToggle:has(input:checked) .foldIcon::before {
  content: '▼';
}

.foldToggle:has(input:focus-visible) {
  outline: 2px solid #4a90d9;
}

/* スクリーニングのプリセットと保存 */
.screenPresetRow,
.screenSaveRow {
  margin: 2px 0 4px;
  font-size: 12px;
}

.screenPresetRow button {
  margin-right: 3px;
  font-weight: normal;
}

#screenPresets {
  margin-left: 12px;
}

/* プリセットの組の名前（ファンダ・テクニカル） */
.screenPresetGroup {
  font-size: 11px;
  font-weight: normal;
  color: #555;
  margin: 0 3px 0 10px;
}

/* オンにしているプリセット */
#screenPresets button.on {
  background: #1c7ed6;
  border-color: #1864ab;
  color: #fff;
}

.screenPresetLabel {
  font-weight: bold;
  margin: 0 4px 0 0;
}

#screenMyPresetsWrap .screenPresetLabel {
  margin-left: 12px;
}

#screenMyPresets button {
  background: #fff3bf;
}

/* プリセット・保存の行と、条件の欄の境目 */
.screenSaveRow {
  padding-bottom: 5px;
  margin-bottom: 6px;
  border-bottom: 2px solid #74c0fc;
}

.screenSaveSep {
  color: #aaa;
  margin: 0 4px;
}

.dialogTitle.screenPresetRow {
  font-size: inherit;
  margin-bottom: 4px;
}

/* 見出しの左端の［全消去］ */
.screenClearAll {
  font-size: smaller;
  margin-right: 6px;
}

.nowrap {
  white-space: nowrap;
}