@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

:root {
  font-family: "Noto Sans JP", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body,
button,
input,
textarea,
[role="textbox"] {
  font-family: "Noto Sans JP", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ri-mermaid-block {
  margin: 1rem 0;
}

.ri-mermaid-rendered {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  color-scheme: light;
}

.ri-mermaid-rendered svg {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: none;
  height: auto;
  background: #ffffff;
}

.ri-mermaid-rendered svg .edgePaths path,
.ri-mermaid-rendered svg .edgePath path,
.ri-mermaid-rendered svg .flowchart-link,
.ri-mermaid-rendered svg line,
.ri-mermaid-rendered svg path.relation {
  stroke: #334155 !important;
}

.ri-mermaid-rendered svg marker path,
.ri-mermaid-rendered svg marker polygon {
  fill: #334155 !important;
  stroke: #334155 !important;
}

.ri-mermaid-rendered svg .edgeLabel,
.ri-mermaid-rendered svg .edgeLabel p,
.ri-mermaid-rendered svg .label,
.ri-mermaid-rendered svg text,
.ri-mermaid-rendered svg tspan {
  color: #0f172a !important;
  fill: #0f172a !important;
}

.ri-mermaid-rendered svg .label rect,
.ri-mermaid-rendered svg .edgeLabel rect {
  fill: #ffffff !important;
  opacity: 0.92 !important;
}

.ri-mermaid-rendered svg .node rect,
.ri-mermaid-rendered svg .node polygon,
.ri-mermaid-rendered svg .node circle,
.ri-mermaid-rendered svg .node ellipse {
  fill: #f8fafc !important;
  stroke: #334155 !important;
}

.ri-mermaid-source {
  margin-top: 0.5rem;
}

.ri-mermaid-source summary {
  cursor: pointer;
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
}

.ri-mermaid-error {
  color: #991b1b;
  font-size: 0.875rem;
}