.button {
  background: var(--background, none);
  color: var(--color, currentColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  height: 2em;
  padding: 0 .6em;
  font: var(--text-caption-bold);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--animation-duration);
  box-sizing: border-box;
  vertical-align: middle;
  flex: 0 0 auto;
  text-decoration: none;
}

.button::-moz-focus-inner {
    border: 0;
  }

.button.is-small {
    font: var(--text-caption-mini-bold);
    text-transform: uppercase;
  }

.button.is-big {
    height: 3em;
    padding: 0 1em;
  }

.button.is-primary {
    --color: var(--color-background-1);
    --color-hover: var(--color-background-1);
    --background: var(--color-primary);
    --background-hover: var(--color-primary-1);
  }

.button.is-secondary {
    --color: var(--color-foreground-1);
    --color-hover: var(--color-foreground-1);
    --color-active: var(--color-background);
    --background: var(--color-background-1);
    --background-hover: var(--color-background-2);
    --background-active: var(--color-primary);
  }

.button.is-secondary.is-active {
      color: var(--color-active);
      background: var(--background-active);
    }

.button input {
    accent-color: var(--accent);
  }

.button:hover {
    color: var(--color-hover, currentColor);
    background: var(--background-hover, none);
  }

.button:disabled {
    cursor: default;
    background: none;
    opacity: .1;
  }

.button.has-icon {
    padding: 0;
    width: 40px;
    height: 40px;
  }

.button.has-icon svg {
      width: 30px;
      height: 30px;
      fill: currentColor;
    }

.button.has-icon path {
      fill: currentColor;
    }

.button-theme {
  background: none;
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 1px var(--color-background-3);
  padding: 0 .6em;
  font: var(--text-callout);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  vertical-align: middle;
}

.button-theme:hover {
    background: var(--color-background-2);
  }

[data-theme="light"] .button-theme .is-light,
[data-theme="dark"] .button-theme .is-dark {
  display: block;
}

[data-theme="light"] .button-theme .is-dark,
[data-theme="dark"] .button-theme .is-light {
  display: none;
}

.selector {
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  height: 2em;
  border: solid 2px var(--color-background-2);
  background: none;
  color: var(--color-foreground-1);
  background-color: var(--color-background);
  /* Chevron gray-light */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22,23.5857864 L27.2928932,18.2928932 C27.6834175,17.9023689 28.3165825,17.9023689 28.7071068,18.2928932 C29.0976311,18.6834175 29.0976311,19.3165825 28.7071068,19.7071068 L22.7071068,25.7071068 C22.3165825,26.0976311 21.6834175,26.0976311 21.2928932,25.7071068 L15.2928932,19.7071068 C14.9023689,19.3165825 14.9023689,18.6834175 15.2928932,18.2928932 C15.6834175,17.9023689 16.3165825,17.9023689 16.7071068,18.2928932 L22,23.5857864 Z" fill="%23BBC2CE"></path></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  border-radius: var(--border-radius-small);
  font: var(--text-caption-bold);
  padding: 0 40px 0 1em;
  transition-property: background-color, color, box-shadow, border-color;
  transition-duration: var(--animation-duration);
  outline: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: initial;
  max-width: 100%;
}

.selector:hover {
      background-color: var(--color-background-1);
      border-color: var(--color-background-2);
  }

.tag {
  --color: var(--color-foreground-1);
  --background: var(--color-background-1);

  background: var(--background);
  color: var(--color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  height: 2em;
  padding: 0 .2em;
  font: var(--text-caption-mini-bold);
  letter-spacing: 0;
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  vertical-align: middle;
  flex: 0 0 auto;
}

.navbar-container {
  background-color: var(--color-background-a);
  position: sticky;
  top: 0;
  padding: 0 var(--margin);
  z-index: 10;
  border-bottom: solid 1px var(--color-background-2);
}

.navbar {
  max-width: var(--max-width);
  margin: auto;
  display: flex;
  justify-content: space-between;
  height: 45px;
  -moz-column-gap: var(--column-gap-1);
       column-gap: var(--column-gap-1);
}

.navbar-logo {
  display: flex;
  align-self: center;
  align-items: center;
  color: var(--color-foreground-1);
  -moz-column-gap: 10px;
       column-gap: 10px;
  text-decoration: none;
  font: var(--text-navbar-bold);
  letter-spacing: var(--text-title-spacing);
}

@media (max-width: 820px) {

.navbar-logo > span.title {
      display: none;
  }
    }

.navbar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  font: var(--text-navbar);
  letter-spacing: var(--text-caption-spacing);
  overflow-x: auto;
  flex: 1 1 auto;
  width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  will-change: scroll-position;
}

.navbar-menu li {
    display: flex;
  }

.navbar-menu li:first-child {
      margin-left: auto;
    }

.navbar-menu a {
    color: var(--color-foreground);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 1em;
    white-space: nowrap;
  }

.navbar-menu a:hover {
      background-image: linear-gradient(var(--color-foreground), var(--color-foreground));
      background-repeat: no-repeat;
      background-size: calc(100% - 2em) 1px;
      background-position: center bottom;
    }

.navbar-menu a.is-selected {
      color: var(--color-foreground-1);
      background: var(--color-background-1);
    }

// 検索用
.navbar-search {
  --docsearch-searchbox-background: var(--color-background-2);
  --docsearch-text-color: var(--color-foreground-1);
  --docsearch-searchbox-focus-background: var(--color-background-1);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--color-foreground-1);
  align-self: center;
  padding: 0;
  margin: 0;
  min-width: 173px;
  min-height: 36px;
}

@media (max-width: 768px) {
  .navbar-search {
    min-width: auto;
    min-height: auto;
  }

  .DocSearch-Container {
    position: fixed !important; /* This overrides the docsearch modal `position: absolute`, fixes position issue on chrome (mobile) */
  }
}

.footer-container {
  background: var(--color-background-1);
}

.footer {
  font: var(--text-caption);
  color: var(--color-foreground-1);
  max-width: var(--max-width);
  margin: auto;
  text-align: center;
  padding: 0 var(--margin);
}

.footer-toggle-theme {
  margin: 0;
  padding: 12px 0;
}

.footer-toggle-theme a {
    color: currentColor;
  }

.footer-links {
  margin: 0;
  list-style: none;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  border-bottom: solid 1px var(--color-background-3);
}

.footer-links a {
    color: currentColor;
    cursor: pointer;
    text-decoration: underline;
  }

/*!
  GitHub theme for Highlight.js

  Based on the "github" and "github-dark" themes for Highlight.js
  - https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
  - https://github.com/highlightjs/highlight.js/blob/main/src/styles/github-dark.css
  
  Modified by Lume authors & contributors
*/

:root[data-theme="light"] {
  --color-1: #d73a49;
  --color-2: #6f42c1;
  --color-3: #005cc5;
  --color-4: #032f62;
  --color-5: #e36209;
  --color-6: #6a737d;
  --color-7: #22863a;
  --color-8: #24292e;
  --color-9: #005cc5;
  --color-10: #735c0f;
  --color-11: #22863a;
  --color-12: #f0fff4;
  --color-13: #b31d28;
  --color-14: #ffeef0;
}

:root[data-theme="dark"] {
  --color-1: #ff7b72;
  --color-2: #d2a8ff;
  --color-3: #79c0ff;
  --color-4: #a5d6ff;
  --color-5: #ffa657;
  --color-6: #8b949e;
  --color-7: #7ee787;
  --color-8: #c9d1d9;
  --color-9: #5b97f1;
  --color-10: #f2cc60;
  --color-11: #aff5b4;
  --color-12: #033a16;
  --color-13: #ffdcd7;
  --color-14: #67060c;
}

.hljs {
  display: block;
  color: var(--color-black);
  background: var(--color-background-1);
  border-radius: var(--border-radius);
  border: solid 1px var(--color-background-2);
  overflow-x: auto;
  padding: 1em !important;
}

.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:var(--color-1)}

.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:var(--color-2)}

.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:var(--color-3)}

.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:var(--color-4)}

.hljs-built_in,.hljs-symbol{color:var(--color-5)}

.hljs-code,.hljs-comment,.hljs-formula{color:var(--color-6)}

.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:var(--color-7)}

.hljs-subst{color:var(--color-8)}

.hljs-section{color:var(--color-9);font-weight:600}

.hljs-bullet{color:var(--color-10)}

.hljs-emphasis{color:var(--color-8);font-style:italic}

.hljs-strong{color:var(--color-8);font-weight:600}

.hljs-addition{color:var(--color-11);background-color:var(--color-12)}

.hljs-deletion{color:var(--color-13);background-color:var(--color-14)}

lume-code {
  display: block;
}

lume-code .hljs {
    border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
    border-top: 0 !important;
  }

lume-code .lume-code-menu {
    position: relative;
    display: flex;
    list-style: none;
    padding: 0 1em 0 88px;
    margin: 0;
    background: var(--color-background-2);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow-x: auto;
    -moz-column-gap: 1px;
         column-gap: 1px;
  }

lume-code .lume-code-menu li {
      margin: 0;
      white-space: nowrap;
    }

lume-code .lume-code-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 88px;
    height: 100%;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="54" height="14" viewBox="0 0 54 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="7" fill="%23FF5533"/><circle cx="27" cy="7" r="7" fill="%23E6CF5C"/><circle cx="47" cy="7" r="7" fill="%237ACC52"/></svg>');
    background-repeat: no-repeat;
    background-position: 16px 14px;
  }

.lume-code-tab {
  --background: var(--color-background-2);
  --background-hover: var(--color-background-3);

  display: block;
  border: none;
  border-radius: 0;
  padding: 10px 1em;
  font: var(--text-caption);
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--animation-duration);
  background: var(--color-background-2);
  color: var(--color-foreground-1);
}

.lume-code-tab:hover {
    background: var(--color-background-1);
    color: var(--color-foreground);
  }

.lume-code-tab.is-active {
    background: var(--color-background-1);
    color: var(--color-foreground);
    font: var(--text-caption-bold);
  }

.toc {
  font: var(--text-caption);
  color: var(--color-foreground-1);
  margin: 0;
}

.toc ol,
  .toc ul {
    padding-left: 1.5em;
  }

.toc a {
    color: currentColor;
  }

.site {
  margin: 0;
  padding: 0;
}

.site-image {
  display: block;
}

.site-image img {
    --shadow-color: rgba(0, 0, 0, 0.05);
    display: block;
    max-width: 100%;
    height: auto;
    transition: transform var(--animation-duration);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 2px var(--shadow-color),
                0 1px 4px var(--shadow-color),
                0 1px 8px var(--shadow-color),
                0 1px 10px var(--shadow-color),
                0 1px 12px var(--shadow-color),
                0 1px 14px var(--shadow-color);
  }

.site-image:hover {
    z-index: 1;
  }

.site-image:hover img {
      transform: scale(1.1);
    }

.site-description {
  font: var(--text-caption);
  color: var(--color-foreground-1);
}

.site-description p {
    margin: .3em 0;
  }

.site-image + .site-description {
  margin-top: 1em;
}

.site-name {
  font: var(--text-caption-bold);
  color: var(--color-foreground);
  text-decoration: none;
}

.site-name:hover {
    text-decoration: underline;
  }

/* Theme light mode */

:root[data-theme="light"] .site-image img {
  --shadow-color: rgba(0, 0, 0, 0.05);
}

/* Theme dark mode */

:root[data-theme="dark"] .site-image img {
  --shadow-color: rgba(0, 0, 0, 0.3);
}

.tip {
  font: var(--text-caption);
  letter-spacing: 0;
  color: var(--color-tip-foreground);
  background-color: var(--color-tip);
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M20 27a1 1 0 0 1 .117 1.993L20 29H10a1 1 0 0 1-.117-1.993L10 27h10ZM14.735 1.003a11 11 0 0 1 7.054 19.653c-.45.348-.73.866-.78 1.423l-.009.168V23a2 2 0 0 1-1.85 1.995L19 25h-8a2 2 0 0 1-1.995-1.85L9 23v-.751a2.013 2.013 0 0 0-.778-1.584A10.984 10.984 0 0 1 4 12.062C3.967 6.095 8.773 1.143 14.735 1.003ZM15.059 3l-.277.003C9.91 3.117 5.973 7.174 6 12.052a8.984 8.984 0 0 0 3.215 6.844l.415.338a4.014 4.014 0 0 1 1.363 2.781l.007.231V23h8v-.759a4.035 4.035 0 0 1 1.38-3.016l.404-.33A9 9 0 0 0 15.06 3Zm1.008 2.1.116.012a6.99 6.99 0 0 1 5.719 5.712 1 1 0 1 1-1.972.337 4.99 4.99 0 0 0-4.082-4.077 1 1 0 0 1 .219-1.985Z" fill="gray"/></svg>');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-blend-mode: var(--background-blend-mode);
  border: solid 1px var(--color-tip-1);
  padding: .5em 1em .5em 50px;
  border-radius: var(--border-radius-small);
  margin: 2em 0 !important;
}

.tip + .tip {
    margin-top: -1.5em !important;
  }

:root[data-theme="light"] .tip {
  --color-tip: var(--color-yellow-800);
  --color-tip-foreground: var(--color-yellow-200);
  --color-tip-1: var(--color-yellow-750);
  --background-blend-mode: difference;
}

:root[data-theme="dark"] .tip {
  --color-tip-foreground: var(--color-brown-600);
  --color-tip: var(--color-brown-160);
  --color-tip-1: var(--color-brown-200);
  --background-blend-mode: screen;
}