@layer my-overrides {
  /* Yu Gothic UIで括弧が貫通する不具合に対応 */
  /* Chromium 141で修正らしいのでそのうち外すかも */
  /* https://issues.chromium.org/issues/331123676 */
  /* https://forest.watch.impress.co.jp/docs/serial/yajiuma/2009377.html */
  :root {
    text-spacing-trim: space-all;
  }

  /* メインコンテンツ部分の幅を拡大する */
  @media (min-width: 72rem) {
    :root {
      --sl-content-width: min(calc(100vw - 32rem), 72rem);
    }
  }

  /* ページ内リンクのスクロールがスムーズに移行するようにする */
  html {
    scroll-behavior: smooth;
  }

  /* 外部リンクにアイコンを追加 */
  a.is-external-link::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h7v2H5v14h14v-7h2v7q0 .825-.587 1.413T19 21zm4.7-5.3l-1.4-1.4L17.6 5H14V3h7v7h-2V6.4z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* ページ内リンクのリンク先が上下どちらにあるかをわかりやすくするアイコンを追加 */
  a.is-anchor-up::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5.825L6.4 10.4L5 9l7-7l7 7l-1.4 1.425l-4.6-4.6V13h-2zM11 18v-3h2v3zm0 4v-2h2v2z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  a.is-anchor-down::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 22l-7-7l1.4-1.425l4.6 4.6V11h2v7.175l4.6-4.575L19 15zM11 9V6h2v3zm0-5V2h2v2z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* aside中のblockquoteのスタイルがasideのスタイルに引きずられて変な色になる問題を修正 */
  .starlight-aside blockquote a {
    color: var(--sl-color-text-accent);
  }
  .starlight-aside blockquote {
    background-color: var(--sl-color-bg);
  }

  /* 複数行ナビゲーションでハイライトが一行分しか覆わない問題を修正 */
  /* 本体プラグインアップデートにより現状不要だが、プラグイン側の実装が怪しいので保存 */
  /* .sidebar-content {
    & [aria-current='page'],
    & [aria-current='page']:hover,
    & [aria-current='page']:focus {
      &::before {
        bottom: 0;
        height: auto;
      }
    }
  }
  .right-sidebar {
    & starlight-toc li {
      & > a {
        &:not([aria-current='true']):is(:hover, :focus-visible) {
          &::after {
            height: auto;
          }
        }
      }
    }
  } */

  /* 多階層サイドバーで縦線が途切れる問題を修正 */
  /* ちょっと不格好に見えるので要再修正 */
  .sidebar-content {
    details {
      margin-bottom: 0;
    }
  }
  .sidebar-content {
    summary + ul {
      margin: 0;
    }
  }

  /* FireFoxで見出しが折り返されるとき下線がおかしくなる問題を修正 */
  /* https://bugzilla.mozilla.org/show_bug.cgi?id=489100 */
  .sl-markdown-content h2 {
    display: inline-block;
  }

  /* ↑でdisplay: inline-blockを設定したせいでh2の謎のmarginが発生するのをキャンセル*/
  .sl-markdown-content h2 {
    margin-block: 0;
  }

  /* 表の幅が大きくなった時にスクロールできるようにする */
  .sl-markdown-content table {
    overflow-x: auto;
  }
  .sl-markdown-content table * {
    word-break: keep-all;
  }

  /* 画像のキャプション化のスタイル */
  .sl-markdown-content > div.pictures {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-evenly;
    padding-block-start: 1rem;
  }
  .sl-markdown-content > div.pictures > figure.image-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .sl-markdown-content > div.pictures > figure.image-column > img {
    width: 100%;
    height: auto;
    max-height: 300px;
    max-width: 100%;
    object-fit: contain;
  }
  .sl-markdown-content > div.pictures > figure.image-column > figcaption {
    text-align: center;
    padding-block-start: 4px;
  }

  :root:has(.preview-dialog[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
  .preview-dialog::backdrop {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 0.9);
    backdrop-filter: blur(4px);
  }
  .preview-dialog {
    margin: auto;
    position: fixed;
    /* max-width: 64rem; */
    /* width: auto; */
    /* max-height: 90vh; */
    background-color: rgb(255 255 255 / 0.05);
    padding: 1.5rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1rem;
    overflow: visible;
  }
  .preview-close-btn {
    display: grid;
    place-items: center;
    position: absolute;
    top: -1rem;
    right: -1rem;
    z-index: 10;
    color: white;
    background: rgb(255 255 255 / 0.1);
    border: none;
    outline: none;
    border-radius: 50%;
    padding: 0.75rem;
  }
  .preview-close-btn:hover {
    background-color: rgb(255 255 255 / 0.2);
  }
  .preview-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .preview-image {
    max-width: 90vw;
    max-height: 85svh;
    object-fit: contain;
  }
  .preview-menu-wrapper {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: 1.5rem;
  }
  .preview-context-btn {
    display: grid;
    place-items: center;
    border: none;
    background-color: rgb(255 255 255 / 0.1);
    border-radius: 50%;
    padding: 0.625rem;
  }
  .preview-context-btn:hover {
    background-color: rgb(255 255 255 / 0.2);
  }

  /* kbdタグ */
  .sl-markdown-content kbd {
    background: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
    border: 1px solid #5f5f5f;
    border-bottom-width: 3px;
    border-bottom-color: #424242;
    border-radius: 5px;
    color: #e0e0e0;
    display: inline-block;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1;
    margin: 0 3px;
    padding: 5px 9px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* heroが画面幅が小さい端末で幅を貫通する問題を修正 */
  .hero {
    padding: clamp(0.5rem, 2vw, 1rem) min(6vw, 4rem);
    @media (max-width: 48rem) {
      padding-inline: 0;
    }
  }

  /* 画像の角が見切れる問題を修正 */
  [data-has-hero] .hero > img,
  .hero img {
    border-radius: 0;
  }

  /* アイコンだぞ:heart: */
  .heart {
    transform: translateX(0.15em) translateY(0.15em);
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23dd2e44' d='M35.885 11.833c0-5.45-4.418-9.868-9.867-9.868c-3.308 0-6.227 1.633-8.018 4.129c-1.791-2.496-4.71-4.129-8.017-4.129c-5.45 0-9.868 4.417-9.868 9.868c0 .772.098 1.52.266 2.241C1.751 22.587 11.216 31.568 18 34.034c6.783-2.466 16.249-11.447 17.617-19.959c.17-.721.268-1.469.268-2.242'/%3E%3C/svg%3E");
  }
}
/* 以下要らん */

/* Dark mode colors. */
/* :root {
  --sl-color-accent-low: #0e204f;
  --sl-color-accent: #1b4cff;
  --sl-color-accent-high: #afc8ff;
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #eeeeee;
  --sl-color-gray-2: #c2c2c2;
  --sl-color-gray-3: #8b8b8b;
  --sl-color-gray-4: #585858;
  --sl-color-gray-5: #383838;
  --sl-color-gray-6: #272727;
  --sl-color-black: #181818;
} */
/* Light mode colors. */
/* :root[data-theme='light'] {
  --sl-color-accent-low: #c4d7ff;
  --sl-color-accent: #1e50ff;
  --sl-color-accent-high: #0f2975;
  --sl-color-white: #181818;
  --sl-color-gray-1: #272727;
  --sl-color-gray-2: #383838;
  --sl-color-gray-3: #585858;
  --sl-color-gray-4: #8b8b8b;
  --sl-color-gray-5: #c2c2c2;
  --sl-color-gray-6: #eeeeee;
  --sl-color-gray-7: #f6f6f6;
  --sl-color-black: #ffffff;
} */

/*
Wikijs .links-listのフォールバック

---------無理！！！！！！！！！----------
すべての条件：
1. ulの直下にはli以外の要素が存在してはいけない
2. すべてのliの直下にaが存在していなければならない
3. liの直下にa以外の要素が存在してはいけない
4. aの中にはemのみが存在してよい（emはなくてもよい）
*/

/* main ul:not(:has(> :not(li))) { */
/* background-color: red; */
/* padding-top: 60px; */
/* } */

/* main li:not(:has(> a)) { */
/* text-decoration: line-through; */
/* } */

/* main ul:not(:has(> :not(li))):not(:has(> li:not(:has(> a)))) { */
/* text-decoration: overline; */
/* display: none; */
/* } */
/* main ul > li:not(has()) { */
/* background-color: blue; */
/* } */
/* ul要素のセレクタ - 4つの条件すべてに合致する場合のみ */
/* ul:not(:has(> :not(li))):not(:has(> li:not(:has(> a)))):not(:has(> li:has(> :not(a)))):not(:has(> li > a:has(:not(em)))) { */
/* ulのスタイル */
/* background-color: red; */
/* } */

/* li要素のセレクタ - 4つの条件すべてに合致する場合のみ */
/* ul:not(:has(> :not(li))):not(:has(> li:not(:has(> a)))):not(:has(> li:has(> :not(a)))):not(:has(> li > a:has(:not(em)))) > li { */
/* liのスタイル */
/* } */

/* a要素のセレクタ - 4つの条件すべてに合致する場合のみ */
/* ul:not(:has(> :not(li))):not(:has(> li:not(:has(> a)))):not(:has(> li:has(> :not(a)))):not(:has(> li > a:has(:not(em)))) > li > a { */
/* aのスタイル */
/* } */

/* em要素のセレクタ - 4つの条件すべてに合致する場合のみ */
/* ul:not(:has(> :not(li))):not(:has(> li:not(:has(> a)))):not(:has(> li:has(> :not(a)))):not(:has(> li > a:has(:not(em)))) > li > a > em { */
/* emのスタイル */
/* } */
