/* 見出しはM PLUS 2 */
/* .md-typeset h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}
.md-typeset h2,
.md-typeset h3 {
  font-family: "M PLUS 2", sans-serif;
  font-weight: 500;
} */

[data-md-color-scheme="slate"] .md-typeset__table tr:nth-child(2n) {
  background-color: hsla(var(--md-hue), 25%, 25%, 1);
}

/* サーチボタンの右側に余白を追加 */
.md-header__button.md-icon[for="__search"] {
  margin-right: 5em;
}

.glightbox-clean .gclose {
  top: 33px !important;
  right: 21px !important;
}

.md-typeset {
  /* font-size: 0.75rem !important; */
}

.md-source-file {
  margin-top: 2.5em;
}

.glightbox img {
  max-width: 480px;
  height: auto;
  display: block;
  margin: auto;
}

.glightbox img.wide-image {
  width: 640px !important;
  max-width: 640px !important;
  height: auto;
  display: block;
  margin: auto;
}

.md-typeset__table {
  width: 100%;
}

.md-typeset__table table:not([class]) {
  display: table;
}

th,
td {
  border: 1px solid var(--md-typeset-table-color);
  border-spacing: 0;
  border-bottom: none;
  border-left: none;
  border-top: none;
}

.md-typeset__table {
  line-height: 1;
}

.md-typeset__table table:not([class]) {
  border-right: none;
}

.md-typeset__table table:not([class]) td,
.md-typeset__table table:not([class]) th {
  padding: 10px;
}

.md-typeset__table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

[data-md-color-scheme="slate"] .md-typeset__table tr:nth-child(2n) {
  background-color: hsla(var(--md-hue), 25%, 25%, 1);
}

/* Mermaid diagram styles - ensure readable size */
.mermaid {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  margin: 1em 0;
}

/* Ensure Mermaid SVG has a minimum readable size */
.mermaid svg {
  min-width: 800px;
  max-width: 100%;
  height: auto;
  display: block;
  font-size: 16px !important;
}

/* Increase font size for Mermaid text elements */
.mermaid .nodeLabel,
.mermaid .edgeLabel {
  font-size: 14px !important;
}

/* For smaller screens, allow horizontal scrolling */
@media (max-width: 768px) {
  .mermaid svg {
    min-width: 700px;
  }
}
