:root {
  /* カスタムプライマリカラーの定義 */
  --md-primary-fg-color: #182848;
  --md-primary-fg-color--light: #2d4a75;
  --md-primary-fg-color--dark: #0f1a2e;

  /* Mermaid 図の基本配色。ノードごとの色分けは mkdocs.base.yml の diagram_styles で定義する */
  --md-mermaid-font-family: "Noto Sans JP", sans-serif;
  --md-mermaid-edge-color: #5b6781;
  --md-mermaid-node-bg-color: #f4f6fb;
  --md-mermaid-node-fg-color: #182848;
  --md-mermaid-label-bg-color: #ffffff;
  --md-mermaid-label-fg-color: #182848;
}

/* 図は中央に寄せる */
.md-typeset .mermaid {
  margin: 1.5em 0;
  text-align: center;
}

/* 担当者で色分けした図の凡例。色は mkdocs.base.yml の diagram_styles と合わせる */
.md-typeset .diagram-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.2em;
  margin-top: -0.8em;
  font-size: 0.7rem;
  color: #4a5568;
}

.md-typeset .diagram-legend span::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4em;
  border: 1.5px solid;
  border-radius: 3px;
  vertical-align: -0.1em;
}

.md-typeset .diagram-legend .lg-shop::before {
  background: #fff3dc;
  border-color: #c77700;
}

.md-typeset .diagram-legend .lg-admin::before {
  background: #e1eeff;
  border-color: #1f6fd0;
}

.md-typeset .diagram-legend .lg-ops::before {
  background: #ece6fa;
  border-color: #6b46c1;
}

.md-typeset .diagram-legend .lg-partner::before {
  background: #e2f5ea;
  border-color: #1e8e5a;
}

/* 「画面の見方」の画面構成図 */
.md-typeset .screen-mock {
  max-width: 34rem;
  margin: 1.5em auto;
  border: 1.5px solid #182848;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.65rem;
  line-height: 1.4;
  color: #182848;
  background: #ffffff;
}

.md-typeset .screen-mock .sm-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.4em;
  border-radius: 50%;
  background: #e8590c;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
}

.md-typeset .screen-mock .sm-header {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.6em 0.8em;
  background: #182848;
  color: #ffffff;
}

.md-typeset .screen-mock .sm-header > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.md-typeset .screen-mock .sm-logo {
  font-weight: 700;
}

.md-typeset .screen-mock .sm-search {
  flex: 1;
  min-width: 0;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  background: #ffffff;
  color: #6b7280;
  overflow: hidden;
}

.md-typeset .screen-mock .sm-account i {
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #9aa5bd;
}

.md-typeset .screen-mock .sm-body {
  display: flex;
  min-height: 13rem;
}

.md-typeset .screen-mock .sm-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  flex: none;
  width: 30%;
  padding: 0.7em 0.8em;
  border-right: 1px solid #cfd6e4;
  background: #f4f6fb;
}

.md-typeset .screen-mock .sm-group {
  margin-top: 0.4em;
  font-weight: 700;
}

.md-typeset .screen-mock .sm-item {
  padding: 0.1em 0.6em;
  border-radius: 4px;
}

.md-typeset .screen-mock .sm-current {
  background: #cfdaf3;
}

.md-typeset .screen-mock .sm-work {
  flex: 1;
  min-width: 0;
  padding: 0.7em 0.9em;
}

.md-typeset .screen-mock .sm-title {
  margin: 0.3em 0 0.6em;
  font-size: 0.8rem;
  font-weight: 700;
}

.md-typeset .screen-mock .sm-filter {
  display: flex;
  gap: 0.5em;
  margin-bottom: 0.7em;
}

.md-typeset .screen-mock .sm-filter span {
  flex: 1;
  min-height: 1.8em;
  padding: 0.2em 0.5em;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
}

.md-typeset .screen-mock .sm-table div {
  height: 1.5em;
  border-bottom: 1px solid #e3e8f1;
}

.md-typeset .screen-mock .sm-table .sm-th {
  background: #eef1f7;
  border-bottom: 1px solid #cfd6e4;
}