/* <system section="theme" selected="14945776032088160769"> */
@charset "UTF-8";

/*
  Theme: Swifty
  Author: guitarrapc_tech
  Responsive: yes
  Description:
    自分の好きな配色を選べるワンカラムのテーマです。シンプルなのに読みやすい、ダークモードも対応！

    [https://swifty.hatenablog.jp/entry/2026/10/09/195900:title=こちらの記事]で導入方法を紹介しています。

    ** 特徴
    - 大きな画面で目次がいつも表示されます
    - ダークモード対応
    - はてなのヘッダーメニューとブログのヘッダーを1つにまとめ、「読者になる」をヘッダーの右端に置きます。
    - コードブロックは、ハイライトを種類ごとに色分けし、上の帯に言語名を表示します。

    ** JavaScriptのカスタマイズで使える機能
    - ヘッダーにボタンを追加して、ライト・ダーク・自動を選べるようにします。
    - 目次を開け閉めできるようにします。長い目次は、いま読んでいる見出しまで目次の中をスクロールするようになります。
    - コードブロックの上の帯に、コピーと折り返しの切り替えのボタンが付きます。
    - GitHubと同じアラート記法(> [!NOTE] など)を、種類ごとの色・アイコン・タイトルを付けた囲みで表示します。

    ** カスタマイズ
    配色テーマはデザインCSSに1行書くと切り替えられます。書き方と配色ごとの色は、[https://swifty.hatenablog.jp/entry/2026/10/09/200331:title=カスタマイズガイド]で紹介しています。

    - 既定のmintのほかに、blue、pink、yellow、purple、beige、dusty-pink、apricot、navy、pink-green、ink、zenn、qiitaがあります。
    - ダークモードはデフォルトでOSに合わせて変わりますが、常にライト、常にダークにも固定できます。

    ** デモページ
    https://swifty.hatenablog.jp/

    ** ソースコード
    [https://github.com/guitarrapc/hatenablog-theme-swifty:title=GitHub]で公開しています(MITライセンス)。

    ** 変更履歴:
    - 2026/10/12: [https://github.com/guitarrapc/hatenablog-theme-swifty/releases/tag/v1.2.0:title=v1.2.0] はてなブログProの「ブログにヘッダを表示しない」でも、ブログタイトル下にHTMLを貼ればヘッダーに「読者になる」ボタンを置けるように対応。目次のスクロールの制御を厳密化。
    - 2026/10/11: [https://github.com/guitarrapc/hatenablog-theme-swifty/releases/tag/v1.1.0:title=v1.1.0] ink、zenn、qiitaの配色テーマを追加。
    - 2026/10/10: [https://github.com/guitarrapc/hatenablog-theme-swifty/releases/tag/v1.0.1:title=v1.0.1] ダークモードで、はてなスターと共有ボタン(はてなブックマーク・Facebook・LINE)のまわりが白く塗られる問題を修正。
    - 2026/10/10: [https://github.com/guitarrapc/hatenablog-theme-swifty/releases/tag/v1.0.0:title=v1.0.0] 初回リリース。
  Released under the MIT License.
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

:root {
  --background: #f2f6f5;
  --surface: #fff;
  --surface-header: #fff;
  --surface-muted: #f4f8f7;
  --text-body: #2b3836;
  --text-header: #172321;
  --text-light: #5b6b67;
  --link: #0b7268;
  --link-hover: #075a52;
  --accent: #3cc4b0;
  --accent-strong: #1fa593;
  --accent-line: #92dccf;
  --accent-soft: #e9f8f5;
  --accent-soft-hover: #d2f1eb;
  --border: #e1ebe8;
  --border-strong: #c9d8d4;
  --border-quote: #7e8e8a;
  --shadow: rgba(23, 35, 33, 0.06);
  --code-text: #24312f;
  --code-keyword: #7b3fb3;
  --code-preproc: #4a4fbf;
  --code-type: #0a7350;
  --code-function: #0e6e95;
  --code-constant: #9a5b00;
  --code-special: #b2316b;
  --code-comment: #5f6e68;
  --code-diff-added: #0a7350;
  --code-diff-added-bg: #e3f5ea;
  --code-diff-removed: #b42318;
  --code-diff-removed-bg: #fcebeb;
  --alert-note: #0969da;
  --alert-tip: #1a7f37;
  --alert-important: #8250df;
  --alert-warning: #9a6700;
  --alert-caution: #d1242f;
  --content-max: 824px;
  --toc-width: 220px;
  --toc-gap: 40px;
  --toc-rail-width: 40px;
  --toc-rail-gap: 24px;
  --toc-sticky-top: 24px;
  --radius: 16px;
  --radius-small: 8px;
  --toc-label: "目次";
  --share-label: "この記事を共有";
  --comment-label: "コメント";
  --pager-prev-label: "前の記事";
  --pager-next-label: "次の記事";
  --header-gap: 32px;
  --gutter: 0px;
  --card-padding-block: 28px;
  --card-padding-inline: 16px;
}
@media (min-width: 768px) {
  :root {
    --header-gap: 48px;
    --gutter: 24px;
    --card-padding-block: 40px;
    --card-padding-inline: 40px;
  }
}
:root {
  --layout-max: calc(var(--content-max) + var(--toc-width) + var(--toc-gap) + var(--card-padding-inline) * 2 + 2px);
  --header-gutter: max(var(--gutter), 16px);
}

/*
 * 配色の切り替え (theme-design-spec.md の「配色の切り替え」を参照)。
 * コンテナのスタイルクエリは、要素自身ではなく祖先の値で判定する。:root の --swifty-scheme で判定できるのは
 * その子の body からなので、切り替えた配色の変数は body に置く(ページの背景も body に置く)。
 * スタイルクエリに対応していないブラウザでは、既定の配色のまま表示する。
 * テーマは --swifty-scheme を宣言しない(書かれていなければ既定の配色)。テーマが既定値を宣言すると、
 * デザインCSSがテーマより前に読み込まれるとき(開発用ブログなど)に、デザインCSSの指定がテーマの既定値に負けるため
 */
@container style(--swifty-scheme: blue) {
  body {
    --background: #f3f4f6;
    --surface-muted: #f6f7f9;
    --text-body: #2a2f37;
    --text-header: #161a20;
    --text-light: #5a6270;
    --link: #1a5fc8;
    --link-hover: #154c9e;
    --accent: #4a8ff0;
    --accent-strong: #2f74e0;
    --accent-line: #a8c8f8;
    --accent-soft: #edf3fd;
    --accent-soft-hover: #dce8fb;
    --border: #e2e5ea;
    --border-strong: #c9ced6;
    --border-quote: #7d8592;
    --shadow: rgba(17, 24, 39, 0.06);
    --code-text: #24292f;
    --code-comment: #5a6270;
  }
}
@container style(--swifty-scheme: pink) {
  body {
    --background: #f7f1f3;
    --surface-muted: #faf5f7;
    --text-body: #3a2e33;
    --text-header: #21181c;
    --text-light: #6b5a61;
    --link: #b3245e;
    --link-hover: #8c1a48;
    --accent: #f07fa8;
    --accent-strong: #d6457f;
    --accent-line: #f5b3cb;
    --accent-soft: #fdedf3;
    --accent-soft-hover: #fbdbe7;
    --border: #efe4e8;
    --border-strong: #ddccd2;
    --border-quote: #958389;
    --shadow: rgba(48, 24, 34, 0.06);
    --code-text: #30262a;
    --code-comment: #6b5a61;
  }
}
@container style(--swifty-scheme: yellow) {
  body {
    --background: #f7f4e9;
    --surface-muted: #fbf9f2;
    --text-body: #37322a;
    --text-header: #1e1b16;
    --text-light: #665e4b;
    --link: #8a5a00;
    --link-hover: #6b4500;
    --accent: #f2c230;
    --accent-strong: #b07c00;
    --accent-line: #ebcb62;
    --accent-soft: #fdf5d8;
    --accent-soft-hover: #f9e9b0;
    --border: #ebe5d5;
    --border-strong: #d9cfb6;
    --border-quote: #8e8570;
    --shadow: rgba(45, 38, 20, 0.06);
    --code-text: #2f2b24;
    --code-comment: #665e4b;
  }
}
@container style(--swifty-scheme: purple) {
  body {
    --background: #f4f2f8;
    --surface-muted: #f8f6fb;
    --text-body: #322d3b;
    --text-header: #1b1822;
    --text-light: #615a6e;
    --link: #6a3fc4;
    --link-hover: #522f9c;
    --accent: #a586ec;
    --accent-strong: #8361dc;
    --accent-line: #c9b6f3;
    --accent-soft: #f3eefd;
    --accent-soft-hover: #e7dcfb;
    --border: #e6e2ee;
    --border-strong: #d0cadc;
    --border-quote: #8a8397;
    --shadow: rgba(32, 24, 48, 0.06);
    --code-text: #2a2632;
    --code-comment: #615a6e;
  }
}
@container style(--swifty-scheme: beige) {
  body {
    --background: #f4ebda;
    --surface: #fffcf6;
    --surface-muted: #faf5eb;
    --text-body: #262724;
    --text-header: #1a1b19;
    --text-light: #63645c;
    --link: #4f644e;
    --link-hover: #3b4c3a;
    --accent: #a6b5a5;
    --accent-strong: #728771;
    --accent-line: #c4cfc3;
    --accent-soft: #eef2ec;
    --accent-soft-hover: #e0e7de;
    --border: #e9dfcc;
    --border-strong: #d6cab3;
    --border-quote: #8d8778;
    --shadow: rgba(38, 39, 36, 0.06);
    --code-text: #262724;
    --code-comment: #63645c;
  }
}
@container style(--swifty-scheme: dusty-pink) {
  body {
    --background: #e6e8f1;
    --surface-muted: #f5f5f9;
    --text-body: #22292c;
    --text-header: #161b1d;
    --text-light: #575d63;
    --link: #85525b;
    --link-hover: #683d45;
    --accent: #ccb3b7;
    --accent-strong: #a3747c;
    --accent-line: #ccb3b7;
    --accent-soft: #f7f0f1;
    --accent-soft-hover: #eee1e3;
    --border: #dfe1ea;
    --border-strong: #c8cbd8;
    --border-quote: #858a96;
    --shadow: rgba(34, 41, 44, 0.06);
    --code-text: #22292c;
    --code-comment: #575d63;
  }
}
@container style(--swifty-scheme: apricot) {
  body {
    --background: #efddd5;
    --surface-muted: #fcf3ef;
    --text-body: #482019;
    --text-header: #331510;
    --text-light: #76524a;
    --link: #9a4134;
    --link-hover: #7f3326;
    --accent: #cf7f72;
    --accent-strong: #b8665a;
    --accent-line: #e2a89e;
    --accent-soft: #fcebe7;
    --accent-soft-hover: #f7d8d0;
    --border: #f0e2dc;
    --border-strong: #dfc6bc;
    --border-quote: #9e7c73;
    --shadow: rgba(72, 32, 25, 0.06);
    --code-text: #482019;
    --code-comment: #76524a;
  }
}
@container style(--swifty-scheme: navy) {
  body {
    --background: #fbfeff;
    --surface-muted: #f3f6f9;
    --text-body: #30343a;
    --text-header: #1c1f24;
    --text-light: #5b616a;
    --link: #135389;
    --link-hover: #0d3a61;
    --accent: #135389;
    --accent-strong: #135389;
    --accent-line: #9fb8d2;
    --accent-soft: #e9f0f7;
    --accent-soft-hover: #d5e2ef;
    --border: #e3e8ee;
    --border-strong: #cbd3dc;
    --border-quote: #7f8792;
    --shadow: rgba(19, 40, 64, 0.07);
    --code-text: #30343a;
    --code-comment: #5b616a;
  }
}
@container style(--swifty-scheme: pink-green) {
  body {
    --background: #fdf7f5;
    --surface-muted: #fbf2f0;
    --text-body: #515d46;
    --text-header: #333c2b;
    --text-light: #626b58;
    --link: #b43f45;
    --link-hover: #8f2f35;
    --accent: #cb5457;
    --accent-strong: #cb5457;
    --accent-line: #e7a2a3;
    --accent-soft: #fbeaea;
    --accent-soft-hover: #f6d5d6;
    --border: #f2e4e0;
    --border-strong: #e0ccc6;
    --border-quote: #7f8875;
    --shadow: rgba(81, 93, 70, 0.07);
    --code-text: #3f4836;
    --code-comment: #626b58;
  }
}
@container style(--swifty-scheme: ink) {
  body {
    --background: #fafafa;
    --surface-muted: #f5f5f5;
    --text-body: #1b1b1b;
    --text-header: #111111;
    --text-light: #666666;
    --link: #0969da;
    --link-hover: #05458a;
    --accent: #0969da;
    --accent-strong: #0969da;
    --accent-line: #bfdcff;
    --accent-soft: #ecf5ff;
    --accent-soft-hover: #dcecff;
    --border: #e5e5e5;
    --border-strong: #d0d0d0;
    --border-quote: #858585;
    --shadow: rgba(0, 0, 0, 0.07);
    --code-text: #1b1b1b;
    --code-comment: #666666;
  }
}
@container style(--swifty-scheme: zenn) {
  body {
    --background: #edf2f7;
    --surface-muted: #f5f9fc;
    --text-body: #2e2e2e;
    --text-header: #1a1a1a;
    --text-light: #5f6b75;
    --link: #0868ce;
    --link-hover: #0656ac;
    --accent: #3ea8ff;
    --accent-strong: #0f83fd;
    --accent-line: #bfdcff;
    --accent-soft: #ecf5ff;
    --accent-soft-hover: #e0efff;
    --border: #d6e3ed;
    --border-strong: #acbcc7;
    --border-quote: #788793;
    --shadow: rgba(36, 60, 90, 0.06);
    --code-text: #2e2e2e;
    --code-comment: #5f6b75;
  }
}
@container style(--swifty-scheme: qiita) {
  body {
    --background: #f5f6f6;
    --surface-muted: #f5f6f6;
    --text-body: #212121;
    --text-header: #141414;
    --text-light: #666666;
    --link: #357a00;
    --link-hover: #2b6300;
    --accent: #55c500;
    --accent-strong: #409500;
    --accent-line: #aae280;
    --accent-soft: #f0fae9;
    --accent-soft-hover: #dff4cf;
    --border: #dfe0e0;
    --border-strong: #bcbdbd;
    --border-quote: #7a7d7d;
    --shadow: rgba(0, 0, 0, 0.06);
    --code-text: #212121;
    --code-comment: #666666;
  }
}
/*
 * ダークテーマ (theme-design-spec.md の「ダークテーマ」を参照)。
 * OSのダークモードに合わせる。デザインCSSの --swifty-color-mode で、常にライト(light)・常にダーク(dark)にもできる。
 * 配色の切り替えと同じく、:root の値をスタイルクエリで判定して、ダークの変数を body に置く。
 * OSのダークモードはメディアクエリでしか分からないので、テーマの内部用の変数(--swifty-os-color-mode)に移し、
 * 「ダークにするか」を1つのスタイルクエリで判定する。
 * 印刷では使わない(@media screen)。紙は白地で、明るい文字が読めなくなるため
 */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --swifty-os-color-mode: dark;
    color-scheme: dark;
  }
}
body {
  color-scheme: light;
}

@media screen {
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) {
    body {
      --code-keyword: #d2a8ff;
      --code-preproc: #a5b4fc;
      --code-type: #7ee787;
      --code-function: #79c0ff;
      --code-constant: #f0b45a;
      --code-special: #ff9bce;
      --code-diff-added: #7ee2a8;
      --code-diff-added-bg: #173a2a;
      --code-diff-removed: #ffa8a0;
      --code-diff-removed-bg: #47201e;
      --shadow: rgba(0, 0, 0, 0.35);
      --alert-note: #4493f8;
      --alert-tip: #3fb950;
      --alert-important: #ab7df8;
      --alert-warning: #d29922;
      --alert-caution: #f85149;
      --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2382908c' d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3C/svg%3E");
      --background: #0e1614;
      --surface: #161e1c;
      --surface-muted: #1d2523;
      --surface-header: #161e1c;
      --text-body: #d9e4e1;
      --text-header: #edf3f2;
      --text-light: #82908c;
      --link: #31bca9;
      --link-hover: #9ff1e1;
      --accent: #31bca9;
      --accent-strong: #099b8a;
      --accent-line: #057a6c;
      --accent-soft: #12352f;
      --accent-soft-hover: #1a433c;
      --border: #2d3533;
      --border-strong: #464f4d;
      --border-quote: #697471;
      --button-solid: #048475;
      --button-solid-hover: #077366;
      --code-text: #d9e4e1;
      --code-comment: #82908c;
      color-scheme: dark;
    }
    html body {
      background: var(--background);
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: blue) {
    body {
      --background: #111419;
      --surface: #191c22;
      --surface-muted: #202329;
      --surface-header: #191c22;
      --text-body: #dde1ea;
      --text-header: #eff2f7;
      --text-light: #868b95;
      --link: #6fa6f5;
      --link-hover: #cae0ff;
      --accent: #6fa6f5;
      --accent-strong: #5187d3;
      --accent-line: #4069a4;
      --accent-soft: #1f2e44;
      --accent-soft-hover: #2a3b54;
      --border: #303339;
      --border-strong: #4a4d54;
      --border-quote: #6d727a;
      --button-solid: #3f74bf;
      --button-solid-hover: #3065af;
      --code-text: #dde1ea;
      --code-comment: #868b95;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: pink) {
    body {
      --background: #181214;
      --surface: #21191c;
      --surface-muted: #282023;
      --surface-header: #21191c;
      --text-body: #e8dee2;
      --text-header: #f6f0f2;
      --text-light: #94878b;
      --link: #e580a4;
      --link-hover: #ffcfde;
      --accent: #e580a4;
      --accent-strong: #c36285;
      --accent-line: #984d68;
      --accent-soft: #40242e;
      --accent-soft-hover: #502f3a;
      --border: #383033;
      --border-strong: #534a4d;
      --border-quote: #796e72;
      --button-solid: #b45478;
      --button-solid-hover: #a3456a;
      --code-text: #e8dee2;
      --code-comment: #94878b;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: yellow) {
    body {
      --background: #15140e;
      --surface: #1d1c15;
      --surface-muted: #25231c;
      --surface-header: #1d1c15;
      --text-body: #e4e1d9;
      --text-header: #f3f2ec;
      --text-light: #8e8b7f;
      --link: #edc14d;
      --link-hover: #fee29f;
      --accent: #f6c330;
      --accent-strong: #edc14d;
      --accent-line: #816507;
      --accent-soft: #372d11;
      --accent-soft-hover: #45391a;
      --border: #35332c;
      --border-strong: #4f4d46;
      --border-quote: #747268;
      --button-solid: #8f7002;
      --button-solid-hover: #7e6201;
      --code-text: #e4e1d9;
      --code-comment: #8e8b7f;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: purple) {
    body {
      --background: #151318;
      --surface: #1d1b21;
      --surface-muted: #242228;
      --surface-header: #1d1b21;
      --text-body: #e2e0e8;
      --text-header: #f2f1f6;
      --text-light: #8e8a95;
      --link: #ac92ec;
      --link-hover: #e1d7ff;
      --accent: #ac92ec;
      --accent-strong: #8e74cb;
      --accent-line: #6f5b9e;
      --accent-soft: #302942;
      --accent-soft-hover: #3d3552;
      --border: #343138;
      --border-strong: #4e4c53;
      --border-quote: #737079;
      --button-solid: #8166bc;
      --button-solid-hover: #7257ac;
      --code-text: #e2e0e8;
      --code-comment: #8e8a95;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: beige) {
    body {
      --background: #16130e;
      --surface: #1e1b15;
      --surface-muted: #26221c;
      --surface-header: #1e1b15;
      --text-body: #e5e1d9;
      --text-header: #f4f1ec;
      --text-light: #908a7f;
      --link: #8faf8d;
      --link-hover: #cee6cd;
      --accent: #8faf8d;
      --accent-strong: #71906f;
      --accent-line: #597057;
      --accent-soft: #283127;
      --accent-soft-hover: #333e33;
      --border: #36322c;
      --border-strong: #504d46;
      --border-quote: #747067;
      --button-solid: #5e7c5c;
      --button-solid-hover: #506d4e;
      --code-text: #e5e1d9;
      --code-comment: #908a7f;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: dusty-pink) {
    body {
      --background: #121319;
      --surface: #1a1b21;
      --surface-muted: #212229;
      --surface-header: #1a1b21;
      --text-body: #dfe1e9;
      --text-header: #f0f1f7;
      --text-light: #888a95;
      --link: #c6959e;
      --link-hover: #f8d3d9;
      --accent: #c6959e;
      --accent-strong: #a67780;
      --accent-line: #825e64;
      --accent-soft: #372a2c;
      --accent-soft-hover: #463538;
      --border: #313239;
      --border-strong: #4b4d54;
      --border-quote: #6e7079;
      --button-solid: #956770;
      --button-solid-hover: #855961;
      --code-text: #dfe1e9;
      --code-comment: #888a95;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: apricot) {
    body {
      --background: #19120f;
      --surface: #211a17;
      --surface-muted: #28211e;
      --surface-header: #211a17;
      --text-body: #e9dfdb;
      --text-header: #f6f0ee;
      --text-light: #948882;
      --link: #dd8c7e;
      --link-hover: #fed2ca;
      --accent: #dd8c7e;
      --accent-strong: #bc6e61;
      --accent-line: #92564d;
      --accent-soft: #3e2723;
      --accent-soft-hover: #4e322e;
      --border: #38312e;
      --border-strong: #534b48;
      --border-quote: #796f6b;
      --button-solid: #ab5f53;
      --button-solid-hover: #9b5045;
      --code-text: #e9dfdb;
      --code-comment: #948882;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: navy) {
    body {
      --background: #0e1517;
      --surface: #161d20;
      --surface-muted: #1d2427;
      --surface-header: #161d20;
      --text-body: #d9e3e7;
      --text-header: #edf3f5;
      --text-light: #808d92;
      --link: #6daae6;
      --link-hover: #c5e1ff;
      --accent: #6daae6;
      --accent-strong: #4f8bc5;
      --accent-line: #3f6c99;
      --accent-soft: #1f2f40;
      --accent-soft-hover: #283c50;
      --border: #2c3437;
      --border-strong: #464f52;
      --border-quote: #697477;
      --button-solid: #3d78b1;
      --button-solid-hover: #2d69a1;
      --code-text: #d9e3e7;
      --code-comment: #808d92;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: pink-green) {
    body {
      --background: #11150d;
      --surface: #191e15;
      --surface-muted: #20251c;
      --surface-header: #191e15;
      --text-body: #dde4d8;
      --text-header: #eff3ec;
      --text-light: #878f80;
      --link: #eb8180;
      --link-hover: #fed1cf;
      --accent: #eb8180;
      --accent-strong: #c86363;
      --accent-line: #9c4e4e;
      --accent-soft: #422424;
      --accent-soft-hover: #52302f;
      --border: #30352b;
      --border-strong: #4a4f45;
      --border-quote: #6d7467;
      --button-solid: #b95556;
      --button-solid-hover: #a84648;
      --code-text: #dde4d8;
      --code-comment: #878f80;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: ink) {
    body {
      --code-keyword: #ff8fa3;
      --code-preproc: #bc8cff;
      --code-function: #38c7ff;
      --code-constant: #ffc56d;
      --code-special: #939bc1;
      --alert-caution: #ff7b72;
      --background: #1a1f27;
      --surface: #20262f;
      --surface-muted: #272f3b;
      --surface-header: #20262f;
      --text-body: #e6edf3;
      --text-header: #f0f6fc;
      --text-light: #959ea8;
      --link: #58a6ff;
      --link-hover: #b6d7ff;
      --accent: #58a6ff;
      --accent-strong: #1a85ff;
      --accent-line: #2f64a8;
      --accent-soft: #1f3757;
      --accent-soft-hover: #27436b;
      --border: #333a45;
      --border-strong: #4f5866;
      --border-quote: #7d8794;
      --button-solid: #0969da;
      --button-solid-hover: #0757b8;
      --code-text: #e6edf3;
      --code-comment: #959ea8;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: zenn) {
    body {
      --background: #081d35;
      --surface: #0d223a;
      --surface-muted: #0b2c53;
      --surface-header: #0d223a;
      --text-body: #ecf5ff;
      --text-header: #f5faff;
      --text-light: #a4bcd5;
      --link: #3ea8ff;
      --link-hover: #a8d6ff;
      --accent: #3ea8ff;
      --accent-strong: #0f83fd;
      --accent-line: #0868ce;
      --accent-soft: #09376d;
      --accent-soft-hover: #05458a;
      --border: #2e445c;
      --border-strong: #3d5674;
      --border-quote: #8f9faa;
      --button-solid: #0868ce;
      --button-solid-hover: #0656ac;
      --code-text: #ecf5ff;
      --code-comment: #a4bcd5;
    }
  }
  @container (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light)))) and style(--swifty-scheme: qiita) {
    body {
      --alert-note: #58a6ff;
      --alert-important: #b392f0;
      --alert-caution: #ff7b72;
      --background: #1d2020;
      --surface: #2f3232;
      --surface-muted: #3a3c3c;
      --surface-header: #2f3232;
      --text-body: #eeeeee;
      --text-header: #f8f8f8;
      --text-light: #bcbdbd;
      --link: #8ad74f;
      --link-hover: #c7ecab;
      --accent: #55c500;
      --accent-strong: #4cb100;
      --accent-line: #357a00;
      --accent-soft: #254f08;
      --accent-soft-hover: #2b6300;
      --border: #494b4b;
      --border-strong: #5e6060;
      --border-quote: #9c9e9e;
      --button-solid: #357a00;
      --button-solid-hover: #2b6300;
      --code-text: #eeeeee;
      --code-comment: #bcbdbd;
    }
  }
  /*
   * ライトでもコードブロックを暗い地にする配色(ink・zenn・qiita。theme-design-spec.md の「配色の切り替え」を参照)。
   * コードブロックの中だけ、配色の変数を暗い地の色に置き換える。帯・ボタン・ハイライトはどれも配色の変数で色を決めているので、
   * コードブロックのスタイル(_codeblock.scss)は変えずに、そろって暗い地の色になる。
   * ダークでも同じ色にする配色(zenn・qiita)のほかは、ダークのときは置き換えず、body に置いたダークの配色をそのまま使う。
   * 印刷では置き換えない(@media screen)。紙は白地で、明るい文字が読めなくなるため
   */
  @container style(--swifty-scheme: ink) and (not (style(--swifty-color-mode: dark) or (style(--swifty-os-color-mode: dark) and (not style(--swifty-color-mode: light))))) {
    .entry-content pre:not(.lang-aa),
    .code-block {
      --code-keyword: #ff8fa3;
      --code-preproc: #bc8cff;
      --code-type: #7ee787;
      --code-function: #38c7ff;
      --code-constant: #ffc56d;
      --code-special: #939bc1;
      --code-diff-added: #7ee2a8;
      --code-diff-added-bg: #173a2a;
      --code-diff-removed: #ffa8a0;
      --code-diff-removed-bg: #47201e;
      --code-text: #e6edf3;
      --code-comment: #959ea8;
      --surface: #141d2b;
      --surface-muted: #1a2638;
      --border: #2a3c52;
      --border-strong: #465872;
      --text-light: #959ea8;
      --link: #58a6ff;
      --accent-soft: #1e3454;
      color-scheme: dark;
    }
    .entry-content pre:not(.lang-aa):focus-visible {
      outline-offset: -2px;
    }
  }
  @container style(--swifty-scheme: zenn) {
    .entry-content pre:not(.lang-aa),
    .code-block {
      --code-keyword: #f97583;
      --code-preproc: #79b8ff;
      --code-type: #85e89d;
      --code-function: #b392f0;
      --code-constant: #9ecbff;
      --code-special: #ffab70;
      --code-diff-added: #7ee2a8;
      --code-diff-added-bg: #173a2a;
      --code-diff-removed: #ffa8a0;
      --code-diff-removed-bg: #47201e;
      --code-text: #e1e4e8;
      --code-comment: #a0aab5;
      --surface: #323e52;
      --surface-muted: #151e2c;
      --border: #323e52;
      --border-strong: #56637a;
      --text-light: #b8c2cc;
      --link: #79b8ff;
      --accent-soft: #1a2a45;
      color-scheme: dark;
    }
    .entry-content pre:not(.lang-aa):focus-visible {
      outline-offset: -2px;
    }
  }
  @container style(--swifty-scheme: qiita) {
    .entry-content pre:not(.lang-aa),
    .code-block {
      --code-keyword: #ebd247;
      --code-preproc: #ff8095;
      --code-type: #7bb7e6;
      --code-function: #8bdf4c;
      --code-constant: #3bbfbf;
      --code-special: #b08cf6;
      --code-diff-added: #7ee2a8;
      --code-diff-added-bg: #173a2a;
      --code-diff-removed: #ffa8a0;
      --code-diff-removed-bg: #47201e;
      --code-text: #e3e3e3;
      --code-comment: #979797;
      --surface: #2f3232;
      --surface-muted: #1d2020;
      --border: #3a3c3c;
      --border-strong: #5e6060;
      --text-light: #bcbdbd;
      --link: #8ad74f;
      --accent-soft: #254f08;
      color-scheme: dark;
    }
    .entry-content pre:not(.lang-aa):focus-visible {
      outline-offset: -2px;
    }
  }
}
[data-hatena-star-container],
.social-buttons iframe {
  color-scheme: light;
}

html {
  scroll-padding-top: 24px;
}

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif, "Segoe UI Emoji";
  color: var(--text-body);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

/*
 * 既定の背景色。ユーザーの背景設定が勝つようカスケードレイヤーに入れる
 * (theme-design-spec.md の「背景色・背景画像」を参照)。
 * html には置かない。html に背景がなければ body の背景がページ全体(キャンバス)に広がるので、
 * body に置いた切り替え後の配色の背景も、はてなの背景設定(body に出力される)もページ全体に効く
 */
@layer swifty-background {
  body {
    background-color: var(--background);
  }
}
a {
  color: var(--link);
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--link-hover);
}
a.keyword {
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
  color: var(--text-body);
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-header);
  line-height: 1.4;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  text-decoration: none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  color: var(--link);
}

/*
 * ページ全体の配置 (theme-design-spec.md の「レイアウト」を参照)
 * ヘッダーとフッターは画面幅いっぱいの帯、それ以外はカードの外端に揃えて中央に置くワンカラム
 */
#top-editarea,
#top-box,
#content {
  box-sizing: border-box;
  max-width: calc(var(--layout-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* タイトル下HTML */
#top-editarea {
  margin-top: 16px;
}

#top-box {
  margin-top: 16px;
}

.breadcrumb {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding-inline: var(--card-padding-inline);
  color: var(--text-light);
}
@media (min-width: 768px) {
  .breadcrumb {
    padding-inline: 0;
  }
}
.breadcrumb a {
  color: var(--link);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.breadcrumb-gt {
  font-size: 0;
}
.breadcrumb-gt::before {
  content: "/";
  content: "/"/"";
  margin-inline: 0.15em;
  font-size: 0.75rem;
  color: var(--text-light);
}

/*
 * 記事ページのパンくず(theme-design-spec.md の「記事」の「パンくずとカテゴリ」を参照)。
 * 記事ページのパンくず(トップ / 最初のカテゴリ / 記事のタイトル)はカテゴリとタイトルに重なるので表示せず、パンくずの位置(タイトルの上)にカテゴリを置く(_entry.scss)。
 * はてなはパンくずの構造化データ(BreadcrumbList)を別の script で出力するので、表示を隠しても検索エンジン向けの情報は残る
 */
body.page-entry #top-box {
  display: none;
}

/*
 * デザインCSSで :root { --swifty-entry-breadcrumb: show; } と書くと、記事ページでもパンくずを表示する。
 * パンくずを記事のカードの上端に入れ、タイトルのすぐ上に置く。
 * パンくず(#top-box)と記事(#content の中)はHTMLでは離れているので、パンくずをカードの上端の形にし、
 * 記事のカードの上の枠と角丸をなくして、1枚のカードに見せる。継ぎ目に影が出ないよう、パンくずは下側、記事は上側の影を切る。
 * スタイルクエリに対応していないブラウザでは、切り替えは効かず、パンくずを表示しない
 */
@container style(--swifty-entry-breadcrumb: show) {
  body.page-entry #top-box {
    display: block;
  }
  @media screen {
    body.page-entry:has(#top-box .breadcrumb) .breadcrumb {
      box-sizing: border-box;
      background-color: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
      margin: 0 0 -1px;
      padding: var(--card-padding-block) var(--card-padding-inline) 1px;
      border-bottom: 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      clip-path: inset(-48px -48px 0 -48px);
    }
  }
  @media screen and (max-width: 767px) {
    body.page-entry:has(#top-box .breadcrumb) .breadcrumb {
      border-inline: none;
      border-radius: 0;
    }
  }
  @media screen {
    body.page-entry:has(#top-box .breadcrumb) .breadcrumb .breadcrumb-child:last-child,
    body.page-entry:has(#top-box .breadcrumb) .breadcrumb .breadcrumb-gt:has(+ .breadcrumb-child:last-child) {
      display: none;
    }
    body.page-entry:has(#top-box .breadcrumb) #content {
      margin-top: 0;
    }
    body.page-entry:has(#top-box .breadcrumb) .entry {
      border-top: 0;
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      padding-top: 14px;
      clip-path: inset(0 -48px -48px -48px);
    }
  }
}
#content {
  margin-top: 16px;
  margin-bottom: 48px;
}

#content-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#wrapper,
#box2 {
  width: 100%;
}

#footer {
  padding: 32px var(--header-gutter) 40px;
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-light);
}
#footer a {
  color: var(--text-light);
}
#footer p {
  margin: 0.5em auto;
}
#footer .guest-footer .btn-register {
  padding: 0.6em 1.6em;
  border-radius: 999px;
  background-color: var(--button-solid, var(--link));
}
#footer .guest-footer .btn-register:hover {
  background-color: var(--button-solid-hover, var(--link-hover));
}

/*
 * 画面外の描画を後回しにして、最初の表示を軽くする
 * (theme-design-spec.md の「描画の後回し」を参照)
 */
.entry-content > :not(:nth-child(-n+5), .footnotes, .footnote, ul, ol, :empty, .toc-panel), #box2 {
  content-visibility: auto;
  contain-intrinsic-size: auto 100px;
}

#box2 {
  contain-intrinsic-size: auto 1200px;
}

/*
 * ヘッダー (theme-design-spec.md の「ヘッダー」を参照)
 * はてなのヘッダーメニュー(白の帯、テーマから変えられない)の直下に、ブログのヘッダーを同じ白の帯として続ける。
 * はてなの「読者になる」ボタンはブログのヘッダーの右端に置き、2段で1つのヘッダーに見せる
 */
body {
  --hatena-globalheader-height: 37px;
  --blog-header-height: 64px;
  --subscribe-space: 112px;
  --header-actions-space: var(--subscribe-space);
}
@media (min-width: 768px) {
  body {
    --blog-header-height: 76px;
  }
}
body.globalheader-ng-enabled {
  --hatena-globalheader-height: 56px;
}
body.globalheader-off, body.hide-global-header {
  --hatena-globalheader-height: 0px;
}

#blog-title {
  margin: 0 0 var(--header-gap);
  background-color: var(--surface-header);
  border-bottom: 1px solid var(--border);
}

#blog-title-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--blog-header-height);
  max-width: calc(var(--layout-max) + var(--header-gutter) * 2);
  margin-inline: auto;
  padding: 10px calc(var(--header-gutter) + var(--header-actions-space)) 10px var(--header-gutter);
}

#blog-title-content {
  min-width: 0;
}

#title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  #title {
    font-size: 1.3rem;
  }
}
#title a {
  color: var(--text-header);
  text-decoration: none;
}
#title a:hover {
  color: var(--link);
}

#blog-description {
  margin: 0.1em 0 0;
  font-size: 0.8125rem;
  font-weight: normal;
  line-height: 1.5;
  color: var(--text-light);
}

/*
 * はてなの「読者になる」の帯。
 * はてなはスマホでは見出し付きの帯(ブログのアイコン・タイトル・ボタン)、PCではボタンだけを右上に浮かせる。
 * どちらの幅でもボタンだけをブログのヘッダーの右端へ移し、ヘッダーのタイトルと重複するアイコンとタイトルは出さない
 */
.blog-controlls {
  position: absolute;
  top: var(--hatena-globalheader-height);
  right: max(var(--header-gutter), (100% - var(--layout-max)) / 2);
  display: flex;
  align-items: center;
  height: var(--blog-header-height);
  padding: 0;
  background-color: transparent;
}

.blog-controlls-blog-icon,
.blog-controlls-title {
  display: none;
}

/*
 * スマホでは、ボタンをタイトルの右ではなく、タイトルの下の説明の行の右に置く。
 * タイトルの右にボタン2つ分(約170px)を空けると、393pxの画面でもタイトルに残る幅が約200pxになり、短いタイトルでも折り返すため。
 * タイトルは幅いっぱいを使い、説明の右にボタンのぶん空ける。「読者になる」はアンカー位置指定でタイトルの下に合わせる
 * (当てる条件は header-actions-beside-description)
 */
@supports (anchor-name: --swifty-blog-title) {
  @media screen and (max-width: 767px) {
    body:not(.header-image-enable, .header-image-only) #blog-title-inner {
      padding: 12px var(--header-gutter);
    }
    body:not(.header-image-enable, .header-image-only) #title {
      anchor-name: --swifty-blog-title;
    }
    body:not(.header-image-enable, .header-image-only) #blog-description {
      box-sizing: border-box;
      min-height: 34px;
      margin-top: 4px;
      padding-block: calc((34px - 1.5em) / 2);
      padding-right: calc(var(--header-actions-space) + 8px);
    }
    body:not(.header-image-enable, .header-image-only) #title:last-child {
      margin-bottom: 38px;
    }
    body:not(.header-image-enable, .header-image-only) .blog-controlls {
      position-anchor: --swifty-blog-title;
      top: calc(anchor(bottom) + 4px);
      height: 34px;
    }
  }
}
.blog-controlls .blog-controlls-subscribe-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 16px;
  border: 1px solid var(--accent-strong);
  border-radius: 999px;
  background-color: var(--surface-header);
  color: var(--link);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}
.blog-controlls .blog-controlls-subscribe-btn:visited {
  color: var(--link);
}
.blog-controlls .blog-controlls-subscribe-btn:hover {
  background-color: var(--accent-soft);
  color: var(--link-hover);
}

/*
 * ヘッダ画像を設定したとき。
 * はてなは #blog-title-inner に画像を背景として当て、高さを200pxにする。画像をヘッダーの帯の中のカードとして置く
 */
.header-image-enable #blog-title,
.header-image-only #blog-title {
  padding-block: 16px;
  background-color: var(--surface-header);
}
.header-image-enable #blog-title-inner,
.header-image-only #blog-title-inner {
  width: calc(100% - var(--header-gutter) * 2);
  max-width: var(--layout-max);
  padding: 0 24px 20px;
  align-items: flex-end;
  background-size: cover;
  border-radius: var(--radius-small);
}
.header-image-enable .blog-controlls,
.header-image-only .blog-controlls {
  top: calc(var(--hatena-globalheader-height) + 28px);
  right: calc(max(var(--header-gutter), (100% - var(--layout-max)) / 2) + 12px);
  height: auto;
}

/*
 * はてなブログProの「ブログにヘッダを表示しない」のとき (theme-design-spec.md の「ヘッダー」を参照)
 * はてなはヘッダーメニューを隠すだけでなく、「読者になる」の帯(.blog-controlls)も出力しないので、ヘッダーのボタンがなくなる
 * (hatena-blog-html-structure.md の「ヘッダーメニューと「読者になる」」)。
 * 代わりに、はてなが出力するのと同じHTML(nav.blog-controlls の中の a.blog-controlls-subscribe-btn。リンク先はブログの購読ページ)を
 * 「ブログタイトル下」に貼ってもらう。上の指定がそのまま効き、同じ場所に同じ形で出る。
 * ここでは、ヘッダーメニューを表示しているとき(はてなの「読者になる」がヘッダーにある)に貼ったものを重ねて出さないようにするだけ。
 * 設定を切り替えても貼り直さなくてよい
 */
body:not(.globalheader-off) #top-editarea .blog-controlls {
  display: none;
}

/*
 * ダークモードの切り替えボタン (js/dark-mode.js。component-specs.md の「ダークモードの切り替え」を参照)
 * スクリプトが <html> に data-swifty-color-mode-toggle を付けたら、ブログのヘッダーの右端、「読者になる」の左隣にボタンの場所を空ける
 * (スマホでは、タイトルの下の説明の行の「読者になる」の左隣)。
 * 場所はスクリプトが読み込まれた時点で空けるので、後からボタンが入ってもタイトルの折り返しは変わらない。
 * ダークテーマはスタイルクエリで切り替えるので(_core.scss)、スタイルクエリに対応していないブラウザではボタンも場所も出さない
 */
:root {
  --swifty-style-queries: supported;
}

.color-mode-toggle {
  display: none;
}

@container style(--swifty-style-queries: supported) {
  html[data-swifty-color-mode-toggle] body {
    --header-actions-space: calc(var(--subscribe-space) + 42px);
  }
  html[data-swifty-color-mode-toggle] #blog-title-inner {
    position: relative;
  }
  .color-mode-toggle {
    position: absolute;
    top: 0;
    right: calc(var(--header-gutter) + var(--subscribe-space));
    display: flex;
    align-items: center;
    height: var(--blog-header-height);
  }
  @supports (anchor-name: --swifty-blog-title) {
    @media screen and (max-width: 767px) {
      body:not(.header-image-enable, .header-image-only) .color-mode-toggle {
        position-anchor: --swifty-blog-title;
        top: calc(anchor(bottom) + 4px);
        height: 34px;
      }
    }
  }
  :is(.header-image-enable, .header-image-only) .color-mode-toggle {
    top: 12px;
    right: calc(12px + var(--subscribe-space));
    height: auto;
  }
}
.color-mode-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background-color: var(--surface-header);
  color: var(--text-light);
  cursor: pointer;
}
.color-mode-toggle-button svg {
  width: 18px;
  height: 18px;
}
.color-mode-toggle-button:hover, .color-mode-toggle-button[aria-expanded=true] {
  border-color: var(--accent-strong);
  color: var(--link);
}
.color-mode-toggle-button:hover {
  background-color: var(--accent-soft);
}

.color-mode-toggle-menu {
  position: absolute;
  top: calc(50% + 17px + 6px);
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background-color: var(--surface);
  box-shadow: 0 8px 24px var(--shadow);
}
.color-mode-toggle-menu[hidden] {
  display: none;
}

.color-mode-toggle-option {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-height: 36px;
  padding: 0 0.75em;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-body);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.color-mode-toggle-option svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-light);
}
.color-mode-toggle-option:hover {
  background-color: var(--accent-soft);
}
.color-mode-toggle-option[aria-pressed=true] {
  color: var(--link);
  font-weight: 700;
}
.color-mode-toggle-option[aria-pressed=true] svg {
  color: var(--link);
}
.color-mode-toggle-option[aria-pressed=true]::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") no-repeat center/contain;
}
@media (forced-colors: active) {
  .color-mode-toggle-option[aria-pressed=true]::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

/*
 * 本文の見出しの役割ごとの形 (theme-design-spec.md の「見出しと引用」を参照)。
 * 見出しの段は記事の書き方で変わるので、段ではなく役割で形を決める。
 * 同じ見出しに別の役割が後から当たっても前の形が残らないよう、役割ごとに変わる指定はすべての役割で書く
 */
/*
 * 記事 (theme-design-spec.md の「記事」を参照)
 * 記事は1枚のカードにし、本文は --content-max の幅で中央に置く。
 * 1200px以上では、目次の有無に関わらず本文の右に目次の列を取る(_table_of_contents.scss)
 */
.entry {
  box-sizing: border-box;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
}
@media (max-width: 767px) {
  .entry {
    border-inline: none;
    border-radius: 0;
  }
}
.entry {
  position: relative;
  margin: 0 0 16px;
  padding: var(--card-padding-block) var(--card-padding-inline);
}

.entry-inner > * {
  max-width: var(--content-max);
  margin-inline: auto;
}

/*
 * 記事のヘッダー: 1行目にカテゴリ、2行目にタイトル、その下に日付を置く。
 * はてなのHTMLは日付 → タイトル → カテゴリの順なので order で並べ替える。
 * パンくずを表示する設定(--swifty-entry-breadcrumb: show)では、カテゴリを日付の横に置く
 */
.entry-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.entry-header .entry-title {
  flex-basis: 100%;
}

.entry-categories {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  line-height: 1.5;
}
.entry-categories a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--link);
  text-decoration: none;
}
.entry-categories a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.entry-categories a:not(:last-child) {
  margin-right: 1.6em;
}
.entry-categories a:not(:last-child)::after {
  content: "/";
  content: "/"/"";
  position: absolute;
  left: calc(100% + 0.5em);
  color: var(--text-light);
}
.entry-categories {
  order: -1;
  flex-basis: 100%;
}

@container style(--swifty-entry-breadcrumb: show) {
  body.page-entry .entry-categories {
    order: 2;
    flex-basis: auto;
  }
}
.entry-title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .entry-title {
    font-size: 2.125rem;
  }
}

.entry-header .date {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  order: 1;
  margin: 0;
  color: var(--text-light);
}
.entry-header .date a {
  color: var(--text-light);
  text-decoration: none;
}
.entry-header .date a:hover {
  color: var(--link);
  text-decoration: underline;
}

/*
 * 「編集する」ボタン。ブログ主がログインしているとき、はてなのスクリプトが、記事にマウスを乗せた時点で記事のヘッダーに足す。
 * 1行目の右端に重ねて置く
 */
.entry-header-menu {
  position: absolute;
  top: 0;
  right: 0;
}
.entry-header-menu a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 36px;
  padding: 0.4em 1.2em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.entry-header-menu a:hover {
  border-color: var(--accent-strong);
  background-color: var(--accent-soft);
  color: var(--link-hover);
  text-decoration: none;
}
.entry-header-menu a {
  min-height: 28px;
  padding-inline: 12px;
  font-size: 0.75rem;
}

.entry-header:has(> .entry-header-menu) > .entry-categories, .entry-header:has(> .entry-header-menu):not(:has(> .entry-categories)) > .entry-title {
  padding-right: calc(3rem + 24px + 2px + 12px);
}

@container style(--swifty-entry-breadcrumb: show) {
  body.page-entry .entry-header:has(> .entry-header-menu) > .entry-categories {
    padding-right: 0;
  }
  body.page-entry .entry-header:has(> .entry-header-menu) > .entry-title {
    padding-right: calc(3rem + 24px + 2px + 12px);
  }
}
/*
 * 記事の本文
 * 余白は下方向(margin-bottom)と見出しの上(padding-top)だけで作る。
 * 目次を本文の横に置くときは本文をグリッドにするため、マージンの相殺に頼ると目次の有無で間隔が変わる
 * (theme-design-spec.md の「本文の余白」を参照)
 */
.entry-content {
  --flow-space: 1.6rem;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.entry-content > * {
  margin-top: 0;
  margin-bottom: var(--flow-space);
}
.entry-content > :last-child,
.entry-content > :empty:not(hr) {
  margin-bottom: 0;
}
.entry-content > :empty {
  margin-top: 0;
}
.entry-content a {
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.entry-content a:hover {
  text-decoration-color: currentColor;
}
.entry-content {
  /* 見出し (theme-design-spec.md の「見出しと引用」を参照) */
}
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6 {
  --heading-space: 1.4rem;
  position: relative;
  margin-bottom: 1.5rem;
  padding-top: var(--heading-space);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.entry-content > :is(h1, h2, h3, h4, h5, h6):first-child {
  --heading-space: 0px;
}
.entry-content > h1 {
  --band-padding: .4em;
  padding-left: 0.75em;
}
.entry-content > h1::before {
  content: "";
  position: absolute;
  top: var(--heading-space);
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: 3px;
  background-color: var(--accent);
}
.entry-content > h1 {
  padding-top: calc(var(--heading-space) + var(--band-padding));
  padding-bottom: var(--band-padding);
  border-bottom: 0;
  background: linear-gradient(90deg, var(--accent-soft), transparent 80%) left bottom/100% calc(100% - var(--heading-space)) no-repeat;
  font-size: 1.45rem;
}
@media (min-width: 768px) {
  .entry-content > h1 {
    font-size: 1.6rem;
  }
}
.entry-content > h2 {
  padding: var(--heading-space) 0 0.35em;
  border-bottom: 2px dashed var(--accent-line);
  background: none;
  font-size: 1.3rem;
}
@media (min-width: 768px) {
  .entry-content > h2 {
    font-size: 1.375rem;
  }
}
.entry-content > h2::before {
  content: none;
}
.entry-content > h3 {
  padding-left: 0.75em;
}
.entry-content > h3::before {
  content: "";
  position: absolute;
  top: calc(var(--heading-space) + 0.15em);
  bottom: 0.15em;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background-color: var(--accent);
}
.entry-content > h3 {
  padding-top: var(--heading-space);
  padding-bottom: 0;
  border-bottom: 0;
  background: none;
  font-size: 1.175rem;
}
@media (min-width: 768px) {
  .entry-content > h3 {
    font-size: 1.175rem;
  }
}
.entry-content > h4 {
  padding: var(--heading-space) 0 0;
  border-bottom: 0;
  background: none;
  font-size: 1.05rem;
}
@media (min-width: 768px) {
  .entry-content > h4 {
    font-size: 1.05rem;
  }
}
.entry-content > h4::before {
  content: none;
}
.entry-content > h5,
.entry-content > h6 {
  padding: var(--heading-space) 0 0;
  border-bottom: 0;
  background: none;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .entry-content > h5,
  .entry-content > h6 {
    font-size: 1rem;
  }
}
.entry-content > h5::before,
.entry-content > h6::before {
  content: none;
}

/*
 * 記事でいちばん上に使われている見出しの段を帯にし、その下の段を破線、縦棒と続ける。
 * 書き方によって大見出しの段が違うため(マークダウンの「#」はh1、「##」はh2、はてな記法と見たままモードはh3)、
 * どの書き方でも大見出しが帯になるようにする(theme-design-spec.md の「見出しと引用」を参照)
 */
.entry-content:has(> h1) > h1 {
  --band-padding: .4em;
  padding-left: 0.75em;
}
.entry-content:has(> h1) > h1::before {
  content: "";
  position: absolute;
  top: var(--heading-space);
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: 3px;
  background-color: var(--accent);
}
.entry-content:has(> h1) > h1 {
  padding-top: calc(var(--heading-space) + var(--band-padding));
  padding-bottom: var(--band-padding);
  border-bottom: 0;
  background: linear-gradient(90deg, var(--accent-soft), transparent 80%) left bottom/100% calc(100% - var(--heading-space)) no-repeat;
  font-size: 1.45rem;
}
@media (min-width: 768px) {
  .entry-content:has(> h1) > h1 {
    font-size: 1.6rem;
  }
}
.entry-content:has(> h1) > h2 {
  padding: var(--heading-space) 0 0.35em;
  border-bottom: 2px dashed var(--accent-line);
  background: none;
  font-size: 1.3rem;
}
@media (min-width: 768px) {
  .entry-content:has(> h1) > h2 {
    font-size: 1.375rem;
  }
}
.entry-content:has(> h1) > h2::before {
  content: none;
}
.entry-content:has(> h1) > h3 {
  padding-left: 0.75em;
}
.entry-content:has(> h1) > h3::before {
  content: "";
  position: absolute;
  top: calc(var(--heading-space) + 0.15em);
  bottom: 0.15em;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background-color: var(--accent);
}
.entry-content:has(> h1) > h3 {
  padding-top: var(--heading-space);
  padding-bottom: 0;
  border-bottom: 0;
  background: none;
  font-size: 1.175rem;
}
@media (min-width: 768px) {
  .entry-content:has(> h1) > h3 {
    font-size: 1.175rem;
  }
}
.entry-content:has(> h1) > h4 {
  padding: var(--heading-space) 0 0;
  border-bottom: 0;
  background: none;
  font-size: 1.05rem;
}
@media (min-width: 768px) {
  .entry-content:has(> h1) > h4 {
    font-size: 1.05rem;
  }
}
.entry-content:has(> h1) > h4::before {
  content: none;
}
.entry-content:has(> h1) > h5 {
  padding: var(--heading-space) 0 0;
  border-bottom: 0;
  background: none;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .entry-content:has(> h1) > h5 {
    font-size: 1rem;
  }
}
.entry-content:has(> h1) > h5::before {
  content: none;
}
.entry-content:has(> h1) > h6 {
  padding: var(--heading-space) 0 0;
  border-bottom: 0;
  background: none;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .entry-content:has(> h1) > h6 {
    font-size: 1rem;
  }
}
.entry-content:has(> h1) > h6::before {
  content: none;
}

.entry-content:not(:has(> h1)):has(> h2) > h2 {
  --band-padding: .4em;
  padding-left: 0.75em;
}
.entry-content:not(:has(> h1)):has(> h2) > h2::before {
  content: "";
  position: absolute;
  top: var(--heading-space);
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: 3px;
  background-color: var(--accent);
}
.entry-content:not(:has(> h1)):has(> h2) > h2 {
  padding-top: calc(var(--heading-space) + var(--band-padding));
  padding-bottom: var(--band-padding);
  border-bottom: 0;
  background: linear-gradient(90deg, var(--accent-soft), transparent 80%) left bottom/100% calc(100% - var(--heading-space)) no-repeat;
  font-size: 1.45rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1)):has(> h2) > h2 {
    font-size: 1.6rem;
  }
}
.entry-content:not(:has(> h1)):has(> h2) > h3 {
  padding: var(--heading-space) 0 0.35em;
  border-bottom: 2px dashed var(--accent-line);
  background: none;
  font-size: 1.3rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1)):has(> h2) > h3 {
    font-size: 1.375rem;
  }
}
.entry-content:not(:has(> h1)):has(> h2) > h3::before {
  content: none;
}
.entry-content:not(:has(> h1)):has(> h2) > h4 {
  padding-left: 0.75em;
}
.entry-content:not(:has(> h1)):has(> h2) > h4::before {
  content: "";
  position: absolute;
  top: calc(var(--heading-space) + 0.15em);
  bottom: 0.15em;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background-color: var(--accent);
}
.entry-content:not(:has(> h1)):has(> h2) > h4 {
  padding-top: var(--heading-space);
  padding-bottom: 0;
  border-bottom: 0;
  background: none;
  font-size: 1.175rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1)):has(> h2) > h4 {
    font-size: 1.175rem;
  }
}
.entry-content:not(:has(> h1)):has(> h2) > h5 {
  padding: var(--heading-space) 0 0;
  border-bottom: 0;
  background: none;
  font-size: 1.05rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1)):has(> h2) > h5 {
    font-size: 1.05rem;
  }
}
.entry-content:not(:has(> h1)):has(> h2) > h5::before {
  content: none;
}
.entry-content:not(:has(> h1)):has(> h2) > h6 {
  padding: var(--heading-space) 0 0;
  border-bottom: 0;
  background: none;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1)):has(> h2) > h6 {
    font-size: 1rem;
  }
}
.entry-content:not(:has(> h1)):has(> h2) > h6::before {
  content: none;
}

.entry-content:not(:has(> h1, > h2)) > h3 {
  --band-padding: .4em;
  padding-left: 0.75em;
}
.entry-content:not(:has(> h1, > h2)) > h3::before {
  content: "";
  position: absolute;
  top: var(--heading-space);
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: 3px;
  background-color: var(--accent);
}
.entry-content:not(:has(> h1, > h2)) > h3 {
  padding-top: calc(var(--heading-space) + var(--band-padding));
  padding-bottom: var(--band-padding);
  border-bottom: 0;
  background: linear-gradient(90deg, var(--accent-soft), transparent 80%) left bottom/100% calc(100% - var(--heading-space)) no-repeat;
  font-size: 1.45rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1, > h2)) > h3 {
    font-size: 1.6rem;
  }
}
.entry-content:not(:has(> h1, > h2)) > h4 {
  padding: var(--heading-space) 0 0.35em;
  border-bottom: 2px dashed var(--accent-line);
  background: none;
  font-size: 1.3rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1, > h2)) > h4 {
    font-size: 1.375rem;
  }
}
.entry-content:not(:has(> h1, > h2)) > h4::before {
  content: none;
}
.entry-content:not(:has(> h1, > h2)) > h5 {
  padding-left: 0.75em;
}
.entry-content:not(:has(> h1, > h2)) > h5::before {
  content: "";
  position: absolute;
  top: calc(var(--heading-space) + 0.15em);
  bottom: 0.15em;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background-color: var(--accent);
}
.entry-content:not(:has(> h1, > h2)) > h5 {
  padding-top: var(--heading-space);
  padding-bottom: 0;
  border-bottom: 0;
  background: none;
  font-size: 1.175rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1, > h2)) > h5 {
    font-size: 1.175rem;
  }
}
.entry-content:not(:has(> h1, > h2)) > h6 {
  padding: var(--heading-space) 0 0;
  border-bottom: 0;
  background: none;
  font-size: 1.05rem;
}
@media (min-width: 768px) {
  .entry-content:not(:has(> h1, > h2)) > h6 {
    font-size: 1.05rem;
  }
}
.entry-content:not(:has(> h1, > h2)) > h6::before {
  content: none;
}

.entry-content {
  /* リスト */
}
.entry-content ul,
.entry-content ol {
  padding-left: 1.6em;
}
.entry-content li + li,
.entry-content li > ul,
.entry-content li > ol {
  margin-top: 0.35em;
}
.entry-content ul > li::marker {
  color: var(--accent-strong);
}
.entry-content ol > li::marker {
  color: var(--link);
  font-weight: 700;
}
.entry-content dl dt {
  font-weight: 700;
}
.entry-content dl dd {
  margin: 0 0 1em;
  padding-left: 1em;
}
.entry-content dl > :last-child {
  margin-bottom: 0;
}
.entry-content {
  /* 画像・埋め込み */
}
.entry-content img,
.entry-content video {
  max-width: 100%;
  height: auto;
}
.entry-content img.hatena-fotolife {
  border-radius: var(--radius-small);
}
.entry-content iframe {
  max-width: 100%;
}
.entry-content figure {
  margin-inline: 0;
}
.entry-content figcaption {
  margin-top: 0.5em;
  font-size: 0.8125rem;
  color: var(--text-light);
  text-align: center;
}
.entry-content .hatena-asin-detail .asin-detail-buy {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 36px;
  padding: 0.4em 1.2em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.entry-content .hatena-asin-detail .asin-detail-buy:hover {
  border-color: var(--accent-strong);
  background-color: var(--accent-soft);
  color: var(--link-hover);
  text-decoration: none;
}
.entry-content .hatena-asin-detail .asin-detail-buy {
  justify-content: center;
}
.entry-content {
  /* 表。はみ出す場合は表の中で横にスクロールする */
}
.entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.6;
}
.entry-content th,
.entry-content td {
  min-width: 5em;
  padding: 0.5em 0.9em;
  border: 1px solid var(--border);
  overflow-wrap: break-word;
}
.entry-content th {
  background-color: var(--surface-muted);
  color: var(--text-header);
  font-weight: 700;
}
.entry-content {
  /* 引用 */
}
.entry-content blockquote {
  margin-inline: 0;
  padding: 1em 1.25em;
  border-left: 3px solid var(--border-quote);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--surface-muted);
}
.entry-content blockquote > :first-child {
  margin-top: 0;
}
.entry-content blockquote > :nth-last-child(1 of :not(.js-requote-button)) {
  margin-bottom: 0;
}
.entry-content blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--text-light);
}
.entry-content {
  /* 折りたたみ */
}
.entry-content details {
  padding: 0 1.1em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.entry-content details > summary {
  padding-block: 0.7em;
  font-weight: 700;
  cursor: pointer;
}
.entry-content details > summary::marker {
  color: var(--accent-strong);
}
.entry-content details[open] {
  padding-bottom: 1em;
}
.entry-content details[open] > summary {
  margin-bottom: 0.8em;
  border-bottom: 1px solid var(--border);
}
.entry-content hr {
  height: 1px;
  margin-inline: 0;
  border: 0;
  background-color: var(--border);
}
.entry-content {
  /* 脚注。マークダウンは div.footnotes (区切りの hr と ol)、はてな記法は div.footnote (p.footnote) */
}
.entry-content > .footnotes,
.entry-content > .footnote {
  padding-top: 1em;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-light);
}
.entry-content > .footnotes > hr,
.entry-content > .footnote > hr {
  display: none;
}
.entry-content > .footnotes > ol,
.entry-content > .footnote > ol {
  margin: 0;
}
.entry-content > .footnotes > :first-child,
.entry-content > .footnotes > hr + *,
.entry-content > .footnote > :first-child,
.entry-content > .footnote > hr + * {
  margin-top: 0;
}
.entry-content > .footnotes > :last-child,
.entry-content > .footnote > :last-child {
  margin-bottom: 0;
}

/* About ページ */
.page-about .entry-content dt {
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5em;
}
.page-about .entry-content dd {
  padding-left: 0;
  margin-bottom: 2em;
}
.page-about .entry-content dd:last-child {
  margin-bottom: 0;
}

/*
 * 記事下 (theme-design-spec.md の「記事」の「記事下の段」を参照)
 * 記事下の段(この記事を共有・記事下のブログパーツ・コメント欄)は、どれも上にだけ線を引き、線から16px空けて見出しを置く。
 * 段の間は線1本で区切られ、はてなの設定や記事によって段が抜けても、線は2本並ばない。
 * 最初の段だけ、上(本文やスター)から32px空ける
 */
.entry-footer {
  margin-top: 48px;
  font-size: 0.875rem;
}
.entry-footer .social-buttons:not(:has(> .social-button-item)) {
  display: none;
}
.entry-footer:not(:has(.social-buttons > .social-button-item)) .customized-footer {
  margin-top: 32px;
}
.entry-footer:has(.social-buttons > .social-button-item, .customized-footer .hatena-module) .comment-box {
  margin-top: 0;
}

/*
 * この記事を共有 (theme-design-spec.md の「記事」の「この記事を共有」を参照)
 * はてなのソーシャルボタン(.social-buttons)を、見出し(--share-label)の付いた1つの段にする。
 * リンクで出力されるボタンは、テーマのアイコン(文字色で描くロゴ)と名前に揃える。
 * はてなブックマーク・Facebook・LINE は、各サービスのスクリプトが差し込む iframe で、中身は変えられない。
 * はてなの設定でボタンを1つも出さないときは段を作らない。印刷ではソーシャルボタンを出さないので(_print.scss)、画面だけにする
 */
@media screen {
  .entry-footer .social-buttons:has(> .social-button-item) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin: 32px 0 0;
    padding-block: 16px;
    border-top: 1px solid var(--border);
  }
  .entry-footer .social-buttons:has(> .social-button-item)::before {
    display: flex;
    align-items: center;
    min-height: 32px;
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    content: var(--share-label);
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .entry-footer .social-buttons:has(> .social-button-item)::before {
    flex-basis: 100%;
  }
}
@media screen {
  .entry-footer .social-buttons:has(> .social-button-item) > .social-button-item {
    display: flex;
    align-items: center;
    margin: 0;
  }
  .entry-footer .social-buttons:has(> .social-button-item) .fb-share-button {
    display: flex;
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 2px;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button])::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: no-repeat center/contain;
            mask: no-repeat center/contain;
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]) {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
  }
}
@media screen and (forced-colors: active) {
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button])::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
@media screen {
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):hover {
    border-bottom-color: var(--accent-strong);
    color: var(--link);
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is(.entry-share-button-twitter)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is(.entry-share-button-twitter)::after {
    content: "X";
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is(.entry-share-button-mastodon)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E");
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is(.entry-share-button-mastodon)::after {
    content: "Mastodon";
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is(.entry-share-button-bluesky)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z'/%3E%3C/svg%3E");
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is(.entry-share-button-bluesky)::after {
    content: "Bluesky";
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is(.entry-share-button-misskey)::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.91076 16.8915c-1.03957.0038-1.93213-.6294-2.35267-1.366-.22516-.3217-.66989-.4364-.6761 0v2.0148c0 .8094-.29152 1.5097-.87581 2.1002-.56755.573-1.25977.8595-2.0779.8595-.80014 0-1.49298-.2865-2.07727-.8601C.28408 19.05 0 18.3497 0 17.5403V6.45968c0-.62378.17553-1.18863.52599-1.69455.36657-.52284.83426-.88582 1.4018-1.08769a2.84574 2.84574 0 0 1 1.00049-.17742c.90125 0 1.65239.35421 2.25281 1.06262l2.99713 3.51572c.06699.05016.263.43696.73192.43696.47016 0 .6916-.3868.75796-.43758l2.9717-3.5151c.6178-.70841 1.377-1.06262 2.2782-1.06262.3337 0 .6675.05893 1.0012.17742.5669.20187 1.0259.56422 1.377 1.08769.3665.50592.5501 1.07077.5501 1.69455V17.5403c0 .8094-.2915 1.5097-.8758 2.1002-.5675.573-1.2604.8595-2.0779.8595-.8008 0-1.493-.2865-2.0779-.8601-.5669-.5899-.8504-1.2902-.8504-2.0996v-2.0148c-.0496-.5499-.5303-.2032-.7009 0-.4503.8431-1.31369 1.3616-2.35264 1.366ZM21.447 8.60998c-.7009 0-1.3015-.24449-1.8019-.73348-.4838-.50571-.7257-1.11277-.7257-1.82118s.2419-1.30711.7257-1.79611c.5004-.50571 1.101-.75856 1.8019-.75856.7009 0 1.3017.25285 1.8025.75856.5003.489.7505 1.0877.7505 1.79611 0 .70841-.2502 1.31547-.7505 1.82118-.5008.48899-1.1016.73348-1.8025.73348Zm.0248.50655c.7009 0 1.2935.25285 1.7777.75856.5003.50571.7505 1.11301.7505 1.82181v6.2484c0 .7084-.2502 1.3155-.7505 1.8212-.4838.489-1.0764.7335-1.7777.7335-.7005 0-1.3011-.2445-1.8019-.7335-.5003-.5057-.7505-1.1128-.7505-1.8212v-6.2484c0-.7084.2502-1.3157.7505-1.82181.5004-.50571 1.101-.75856 1.8019-.75856Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.91076 16.8915c-1.03957.0038-1.93213-.6294-2.35267-1.366-.22516-.3217-.66989-.4364-.6761 0v2.0148c0 .8094-.29152 1.5097-.87581 2.1002-.56755.573-1.25977.8595-2.0779.8595-.80014 0-1.49298-.2865-2.07727-.8601C.28408 19.05 0 18.3497 0 17.5403V6.45968c0-.62378.17553-1.18863.52599-1.69455.36657-.52284.83426-.88582 1.4018-1.08769a2.84574 2.84574 0 0 1 1.00049-.17742c.90125 0 1.65239.35421 2.25281 1.06262l2.99713 3.51572c.06699.05016.263.43696.73192.43696.47016 0 .6916-.3868.75796-.43758l2.9717-3.5151c.6178-.70841 1.377-1.06262 2.2782-1.06262.3337 0 .6675.05893 1.0012.17742.5669.20187 1.0259.56422 1.377 1.08769.3665.50592.5501 1.07077.5501 1.69455V17.5403c0 .8094-.2915 1.5097-.8758 2.1002-.5675.573-1.2604.8595-2.0779.8595-.8008 0-1.493-.2865-2.0779-.8601-.5669-.5899-.8504-1.2902-.8504-2.0996v-2.0148c-.0496-.5499-.5303-.2032-.7009 0-.4503.8431-1.31369 1.3616-2.35264 1.366ZM21.447 8.60998c-.7009 0-1.3015-.24449-1.8019-.73348-.4838-.50571-.7257-1.11277-.7257-1.82118s.2419-1.30711.7257-1.79611c.5004-.50571 1.101-.75856 1.8019-.75856.7009 0 1.3017.25285 1.8025.75856.5003.489.7505 1.0877.7505 1.79611 0 .70841-.2502 1.31547-.7505 1.82118-.5008.48899-1.1016.73348-1.8025.73348Zm.0248.50655c.7009 0 1.2935.25285 1.7777.75856.5003.50571.7505 1.11301.7505 1.82181v6.2484c0 .7084-.2502 1.3155-.7505 1.8212-.4838.489-1.0764.7335-1.7777.7335-.7005 0-1.3011-.2445-1.8019-.7335-.5003-.5057-.7505-1.1128-.7505-1.8212v-6.2484c0-.7084.2502-1.3157.7505-1.82181.5004-.50571 1.101-.75856 1.8019-.75856Z'/%3E%3C/svg%3E");
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is(.entry-share-button-misskey)::after {
    content: "Misskey";
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is([data-hatenablog-tumblr-share-button])::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z'/%3E%3C/svg%3E");
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button]):is([data-hatenablog-tumblr-share-button])::after {
    content: "Tumblr";
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button])[data-hatenablog-tumblr-share-button] {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    text-indent: 0 !important;
    gap: 0;
    font-size: 0;
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button])[data-hatenablog-tumblr-share-button]::before, .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button])[data-hatenablog-tumblr-share-button]::after {
    font-size: 0.8125rem;
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button])[data-hatenablog-tumblr-share-button]::before {
    margin-right: 6px;
  }
  .entry-footer .social-buttons:has(> .social-button-item) a:is(.entry-share-button-twitter, .entry-share-button-mastodon, .entry-share-button-bluesky, .entry-share-button-misskey, [data-hatenablog-tumblr-share-button])[data-hatenablog-tumblr-share-button]::after {
    content: "Tumblr";
    content: "Tumblr"/"";
  }
}
.entry-footer-section {
  display: none;
}

/*
 * コメント欄 (theme-design-spec.md の「記事」の「コメント欄」を参照)
 * この記事を共有の段と同じく、見出し(--comment-label)を左に、「コメントを書く」を右に置く。
 * コメントがあれば見出しの下に並べ、「コメントを書く」はその後に置く(HTMLの順のまま。キーボードで移る順と見た目の順を揃える)
 */
.comment-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.comment-box::before {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  content: var(--comment-label);
  margin-right: auto;
}
.comment-box > :not(.leave-comment-title) {
  flex-basis: 100%;
}
.comment-box .comment {
  margin: 0;
  padding: 0;
  list-style: none;
}
.comment-box .comment:not(:has(> .entry-comment)) {
  display: none;
}
.comment-box .entry-comment {
  position: relative;
  padding: 12px 0 12px 44px;
}
.comment-box .entry-comment:not(:has(.hatena-id-icon))::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: var(--surface-muted);
}
.comment-box .read-more-comments {
  padding: 4px 0 4px 44px;
}
.comment-box .read-more-comments a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.comment-box .read-more-comments a::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: no-repeat center/contain;
          mask: no-repeat center/contain;
}
@media (forced-colors: active) {
  .comment-box .read-more-comments a::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.comment-box .read-more-comments a:hover {
  border-bottom-color: var(--accent-strong);
  color: var(--link);
}
.comment-box .read-more-comments a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.comment-user-name {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}
.comment-user-name a {
  color: var(--text-header);
  text-decoration: none;
}
.comment-user-name a:hover {
  color: var(--link);
  text-decoration: underline;
}
.comment-user-name .hatena-id-icon {
  position: absolute;
  top: 12px;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.comment-content {
  margin: 2px 0 6px;
  overflow-wrap: anywhere;
  color: var(--text-body);
  line-height: 1.8;
}
.comment-content p {
  margin: 0 0 0.5em;
}
.comment-content p:last-child {
  margin-bottom: 0;
}

.comment-metadata {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-light);
}
.comment-metadata a {
  color: var(--text-light);
}

.leave-comment-title {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.leave-comment-title::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: no-repeat center/contain;
          mask: no-repeat center/contain;
}
@media (forced-colors: active) {
  .leave-comment-title::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.leave-comment-title:hover {
  border-bottom-color: var(--accent-strong);
  color: var(--link);
}
.leave-comment-title {
  margin-left: auto;
}
.leave-comment-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1H7l-3 2.5v-2.5h-.5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1H7l-3 2.5v-2.5h-.5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

/*
 * 前後の記事 (theme-design-spec.md の「記事」の「前後の記事」を参照)
 * 記事ページでは、記事のカードの最後の段(記事下の段と同じく、上の線・見出し・記事のタイトル)にする。
 * はてなは前後の記事(.pager-permalink)を記事のカード(.entry)の外、すぐ後ろに出力するので、
 * パンくずと同じく、カードの下端の形(背景・枠・下の角丸・影)を付けて記事のカードの下につなげ、1枚のカードに見せる。
 * 継ぎ目に影が出ないよう、記事は下側、前後の記事は上側の影を切る
 */
@media screen {
  #main-inner > .entry:has(+ .pager-permalink) {
    margin-bottom: 0;
    padding-bottom: 17px;
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    clip-path: inset(-48px -48px 0 -48px);
  }
}
@container style(--swifty-entry-breadcrumb: show) {
  body.page-entry:has(#top-box .breadcrumb) #main-inner > .entry:has(+ .pager-permalink) {
    clip-path: inset(0 -48px);
  }
}
.pager-permalink {
  box-sizing: border-box;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
}
@media (max-width: 767px) {
  .pager-permalink {
    border-inline: none;
    border-radius: 0;
  }
}
.pager-permalink {
  --pager-inline: max(var(--card-padding-inline), calc((100% - 2px - var(--content-max)) / 2));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
  margin: -1px 0 16px;
  padding: 0 var(--pager-inline) var(--card-padding-block);
  border-top: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  clip-path: inset(0 -48px -48px -48px);
}
@media (max-width: 767px) {
  .pager-permalink {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pager-permalink::before {
  content: "";
  grid-column: 1/-1;
  margin-bottom: -16px;
  border-top: 1px solid var(--border);
}
.pager-permalink .pager-arrow {
  display: none;
}
.pager-permalink > .pager-prev {
  grid-column: 1;
}
.pager-permalink > .pager-next {
  grid-column: -2;
  text-align: right;
}
.pager-permalink a {
  display: flex;
  flex-direction: column;
  color: var(--text-header);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pager-permalink a::before {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.pager-permalink a:hover {
  color: var(--link);
  text-decoration: underline;
}
.pager-permalink .pager-prev a::before {
  content: "← " var(--pager-prev-label);
  content: "← " var(--pager-prev-label)/var(--pager-prev-label);
}
.pager-permalink .pager-next a {
  align-items: flex-end;
}
.pager-permalink .pager-next a::before {
  content: var(--pager-next-label) " →";
  content: var(--pager-next-label) " →"/var(--pager-next-label);
}

/* 記事を全文で並べるページ(トップページの記事の表示など)のページャー。記事の一覧のカードにつなげるもの(_archive.scss)は除く */
.pager:not(.pager-permalink, .archive-entries + .pager) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding-inline: var(--card-padding-inline);
}
@media (min-width: 768px) {
  .pager:not(.pager-permalink, .archive-entries + .pager) {
    padding-inline: 0;
  }
}
.pager:not(.pager-permalink, .archive-entries + .pager) a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 36px;
  padding: 0.4em 1.2em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.pager:not(.pager-permalink, .archive-entries + .pager) a:hover {
  border-color: var(--accent-strong);
  background-color: var(--accent-soft);
  color: var(--link-hover);
  text-decoration: none;
}
.pager:not(.pager-permalink, .archive-entries + .pager) a {
  max-width: 100%;
  border-color: var(--border);
  border-radius: var(--radius-small);
  color: var(--text-header);
  overflow-wrap: anywhere;
}
.pager:not(.pager-permalink, .archive-entries + .pager) .pager-next {
  margin-left: auto;
  text-align: right;
}

/*
 * コード (theme-design-spec.md の「コードブロック」を参照)
 * ハイライトははてなのコードブロック(サーバー側で synXxx のクラスを付ける)をそのまま使い、色だけをテーマで決める。
 * はてなのアスキーアート(pre.lang-aa)は、はてなが等幅でないフォントで整えているので対象にしない
 */
.entry-content code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background-color: var(--accent-soft);
  color: var(--code-text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "BIZ UDGothic", monospace;
  font-size: 0.875em;
  letter-spacing: 0;
}
.entry-content pre:not(.lang-aa) {
  padding: 1em 1.125rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-muted);
  color: var(--code-text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "BIZ UDGothic", monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0;
  white-space: pre;
  overflow-wrap: normal;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.entry-content pre:not(.lang-aa) > code {
  padding: 0;
  background: none;
  font-size: inherit;
}
.entry-content {
  /*
   * はてなのコードブロック(pre.code)は上に帯を付け、言語名(data-lang)を出す。
   * 帯はJavaScriptの有無や言語の有無に関わらず常に取る。後からボタンが入っても高さが変わらず、表示がずれないため
   */
}
.entry-content pre.code:not(.lang-aa) {
  padding-top: 0;
}
.entry-content pre.code:not(.lang-aa)::before {
  content: attr(data-lang);
  display: block;
  position: sticky;
  left: -1.125rem;
  height: 2.25rem;
  margin: 0 -1.125rem 1em;
  padding: 0 1.125rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 2.25rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.entry-content .synStatement {
  color: var(--code-keyword);
}
.entry-content .synPreProc {
  color: var(--code-preproc);
}
.entry-content .synType {
  color: var(--code-type);
}
.entry-content .synIdentifier {
  color: var(--code-function);
}
.entry-content .synConstant {
  color: var(--code-constant);
}
.entry-content .synSpecial {
  color: var(--code-special);
}
.entry-content .synComment {
  color: var(--code-comment);
}
.entry-content .synTodo {
  color: var(--code-keyword);
  font-weight: 700;
}
.entry-content .synError {
  color: var(--code-special);
  -webkit-text-decoration: underline wavy;
          text-decoration: underline wavy;
  text-decoration-thickness: 1px;
}
.entry-content .synUnderlined {
  text-decoration: underline;
}
.entry-content {
  /*
   * diff。はてなは追加の行を synIdentifier、削除の行を synSpecial で囲む。
   * 色だけに頼らないよう行頭の+/-を残したまま、行を枠の内側いっぱいに塗る
   */
}
.entry-content pre.code.lang-diff .synType {
  color: var(--code-text);
  font-weight: 700;
}
.entry-content pre.code.lang-diff .synIdentifier,
.entry-content pre.code.lang-diff .synSpecial {
  display: inline-block;
  box-sizing: border-box;
  min-width: calc(100% + 2.25rem);
  margin-inline: -1.125rem;
  padding-inline: 1.125rem;
}
.entry-content pre.code.lang-diff .synIdentifier {
  background-color: var(--code-diff-added-bg);
  color: var(--code-diff-added);
}
.entry-content pre.code.lang-diff .synSpecial {
  background-color: var(--code-diff-removed-bg);
  color: var(--code-diff-removed);
}

/*
 * js/codeblock.js がコードブロックを .code-block で包み、上の帯の右端にボタン(折り返し・コピー)を置く。
 * ボタンは帯の中に収まるので、コードに重ならず、ホバーしなくても常に見える
 */
:where(.code-block) {
  position: relative;
  margin-block: 1em;
}

.code-block > pre.code {
  margin: 0;
}

.code-block-toolbar {
  position: absolute;
  top: 1px;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.25rem;
}

.code-block-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 28px;
  padding: 0 0.6em;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text-light);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.code-block-button::before {
  content: "";
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
  background-color: currentColor;
  -webkit-mask: no-repeat center/contain;
          mask: no-repeat center/contain;
}
@media (forced-colors: active) {
  .code-block-button::before {
    forced-color-adjust: none;
    background-color: ButtonText;
  }
}
.code-block-button:hover {
  border-color: var(--border);
  background-color: var(--surface-muted);
  color: var(--link);
}

.code-block-copy::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 10.5V3.5a1 1 0 0 1 1-1h7'/%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 10.5V3.5a1 1 0 0 1 1-1h7'/%3E%3Crect x='5.5' y='5.5' width='8' height='8' rx='1.5'/%3E%3C/svg%3E");
}

.code-block-copy.is-copied {
  color: var(--link);
}
.code-block-copy.is-copied::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}

.code-block-copy.is-failed {
  color: var(--code-special);
}

.code-block-wrap::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h11'/%3E%3Cpath d='M2.5 8h9a2 2 0 0 1 0 4h-3'/%3E%3Cpath d='M10 10.5 8.5 12l1.5 1.5'/%3E%3Cpath d='M2.5 12h3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h11'/%3E%3Cpath d='M2.5 8h9a2 2 0 0 1 0 4h-3'/%3E%3Cpath d='M10 10.5 8.5 12l1.5 1.5'/%3E%3Cpath d='M2.5 12h3'/%3E%3C/svg%3E");
}

.code-block-wrap[aria-pressed=true] {
  border-color: var(--border);
  background-color: var(--accent-soft);
  color: var(--link);
}

.code-block > pre.code.is-wrapped {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-block-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * GitHubのアラート記法(> [!NOTE] など)を js/alert.js で変換した引用のスタイル
 * (theme-design-spec.md の「アラート記法」、component-specs.md の「アラート記法」を参照)。
 * 左の縦棒は見出しだけの印なので、アラートは左に線を立てず、種類の色の枠で囲んだ淡い色の箱にする
 */
.entry-content blockquote.markdown-alert {
  padding: 0.8em 1.1em;
  border: 1px solid var(--alert-color);
  border-radius: var(--radius);
  background-color: color-mix(in srgb, var(--alert-color) 4%, var(--surface));
  color: var(--text-body);
}
.entry-content blockquote.markdown-alert > .markdown-alert-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.35em;
  color: var(--alert-color);
  font-weight: 700;
}
.entry-content blockquote.markdown-alert > .markdown-alert-title::before {
  content: "";
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
@media (forced-colors: active) {
  .entry-content blockquote.markdown-alert > .markdown-alert-title::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.entry-content blockquote.markdown-alert > .markdown-alert-title + * {
  margin-top: 0;
}
.entry-content blockquote.markdown-alert.markdown-alert-note {
  --alert-color: var(--alert-note);
}
.entry-content blockquote.markdown-alert.markdown-alert-note > .markdown-alert-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 7.25v3.75'/%3E%3Cpath d='M8 4.9v.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 7.25v3.75'/%3E%3Cpath d='M8 4.9v.01'/%3E%3C/svg%3E");
}
.entry-content blockquote.markdown-alert.markdown-alert-tip {
  --alert-color: var(--alert-tip);
}
.entry-content blockquote.markdown-alert.markdown-alert-tip > .markdown-alert-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.75 10.5A4.5 4.5 0 1 1 10.25 10.5V12h-4.5z'/%3E%3Cpath d='M6.5 14.5h3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.75 10.5A4.5 4.5 0 1 1 10.25 10.5V12h-4.5z'/%3E%3Cpath d='M6.5 14.5h3'/%3E%3C/svg%3E");
}
.entry-content blockquote.markdown-alert.markdown-alert-important {
  --alert-color: var(--alert-important);
}
.entry-content blockquote.markdown-alert.markdown-alert-important > .markdown-alert-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7.5L4.5 14v-2.5h-1a1 1 0 0 1-1-1z'/%3E%3Cpath d='M8 4.9v2.85'/%3E%3Cpath d='M8 9.6v.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7.5L4.5 14v-2.5h-1a1 1 0 0 1-1-1z'/%3E%3Cpath d='M8 4.9v2.85'/%3E%3Cpath d='M8 9.6v.01'/%3E%3C/svg%3E");
}
.entry-content blockquote.markdown-alert.markdown-alert-warning {
  --alert-color: var(--alert-warning);
}
.entry-content blockquote.markdown-alert.markdown-alert-warning > .markdown-alert-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5a1 1 0 0 1 1.74 0l5.63 9.99a1 1 0 0 1-.87 1.49H2.37a1 1 0 0 1-.87-1.49z'/%3E%3Cpath d='M8 6.25v3'/%3E%3Cpath d='M8 11.4v.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.13 2.5a1 1 0 0 1 1.74 0l5.63 9.99a1 1 0 0 1-.87 1.49H2.37a1 1 0 0 1-.87-1.49z'/%3E%3Cpath d='M8 6.25v3'/%3E%3Cpath d='M8 11.4v.01'/%3E%3C/svg%3E");
}
.entry-content blockquote.markdown-alert.markdown-alert-caution {
  --alert-color: var(--alert-caution);
}
.entry-content blockquote.markdown-alert.markdown-alert-caution > .markdown-alert-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.3 1.75h5.4l3.55 3.55v5.4l-3.55 3.55H5.3l-3.55-3.55V5.3z'/%3E%3Cpath d='M8 4.9v3.6'/%3E%3Cpath d='M8 10.9v.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.3 1.75h5.4l3.55 3.55v5.4l-3.55 3.55H5.3l-3.55-3.55V5.3z'/%3E%3Cpath d='M8 4.9v3.6'/%3E%3Cpath d='M8 10.9v.01'/%3E%3C/svg%3E");
}

/*
 * 目次 (theme-design-spec.md の「目次」を参照)
 * はてなが本文中に出力する ul.table-of-contents を、JavaScriptを使わずに
 * 広い画面では本文の横に常に表示し、狭い画面では書かれた位置にそのまま表示する
 */
.entry-content .table-of-contents {
  margin-inline: 0;
  padding: 0.75em 0 1em;
  border: 0;
  border-block: 1px solid var(--border);
  border-radius: 0;
  background: none;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  scroll-target-group: auto;
}
.entry-content .table-of-contents::before {
  content: var(--toc-label);
  display: block;
  margin-bottom: 0.75em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-light);
}
.entry-content .table-of-contents ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.entry-content .table-of-contents li {
  margin: 0;
}
.entry-content .table-of-contents a {
  display: block;
  padding: 0.3em 0 0.3em 0.9em;
  border-left: 2px solid var(--border);
  color: var(--text-body);
  text-decoration: none;
}
.entry-content .table-of-contents a:hover {
  border-left-color: var(--border-strong);
  color: var(--link);
}
.entry-content .table-of-contents ul a {
  padding-left: calc(0.9em + 1em);
}
.entry-content .table-of-contents ul ul a {
  padding-left: calc(0.9em + 2em);
}
.entry-content .table-of-contents ul ul ul a {
  padding-left: calc(0.9em + 3em);
}
.entry-content .table-of-contents ul ul ul ul a {
  padding-left: calc(0.9em + 4em);
}
.entry-content .table-of-contents ul ul ul ul ul a {
  padding-left: calc(0.9em + 5em);
}
.entry-content .table-of-contents ul a {
  color: var(--text-light);
}
.entry-content .table-of-contents a:target-current {
  border-left-color: var(--accent-strong);
  color: var(--link);
  font-weight: 700;
}

/*
 * 目次の開閉 (js/toc-toggle.js。component-specs.md の「目次の開閉」を参照)
 * JavaScriptが ul.table-of-contents を details.toc-panel で包み、開閉はブラウザの details に任せる。
 * 見出し(目次)は summary に出し、目次のリスト自体の箱と見出しはなくす
 */
.entry-content .toc-panel {
  margin-inline: 0;
  padding: 0;
  border: 0;
  border-block: 1px solid var(--border);
  border-radius: 0;
  background: none;
}
.entry-content .toc-panel[open] {
  padding-bottom: 0;
}
.entry-content .toc-panel > .table-of-contents {
  margin: 0;
  padding: 0 0 1em;
  border: 0;
  border-radius: 0;
  background: none;
}
.entry-content .toc-panel > .table-of-contents::before {
  content: none;
}
.entry-content .toc-panel > .toc-panel-summary {
  margin: 0;
  padding-block: 0.75em;
  border-bottom: 0;
}

@media not screen and (min-width: 1200px) {
  .entry-header:has(+ .entry-content > :is(.table-of-contents, .toc-panel):first-child) {
    margin-bottom: 0;
    border-bottom: 0;
  }
}
.toc-panel-summary {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 28px;
  list-style: none;
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.toc-panel-summary::-webkit-details-marker {
  display: none;
}
.toc-panel-summary::before, .toc-panel-summary::after {
  content: "";
  flex: none;
  width: 1.4em;
  height: 1.4em;
  background-color: currentColor;
  -webkit-mask: no-repeat center/contain;
          mask: no-repeat center/contain;
}
@media (forced-colors: active) {
  .toc-panel-summary::before, .toc-panel-summary::after {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.toc-panel-summary::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5.5 4h8'/%3E%3Cpath d='M5.5 8h8'/%3E%3Cpath d='M5.5 12h8'/%3E%3Cpath d='M2.5 4h.01'/%3E%3Cpath d='M2.5 8h.01'/%3E%3Cpath d='M2.5 12h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5.5 4h8'/%3E%3Cpath d='M5.5 8h8'/%3E%3Cpath d='M5.5 12h8'/%3E%3Cpath d='M2.5 4h.01'/%3E%3Cpath d='M2.5 8h.01'/%3E%3Cpath d='M2.5 12h.01'/%3E%3C/svg%3E");
}
.toc-panel-summary::after {
  margin-left: auto;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  transition: rotate 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .toc-panel-summary::after {
    transition: none;
  }
}
.toc-panel-summary:hover {
  color: var(--link);
}

.toc-panel-label::before {
  content: var(--toc-label);
}

.toc-panel[open] > .toc-panel-summary::after {
  rotate: 180deg;
}

/*
 * 広い画面では本文の横に目次の列を足す。
 * 本文をグリッドにして直下の要素をすべて1列目に、目次だけを2列目に置き、1000行($toc-row-span)にまたがらせて position: sticky で止める。
 * 目次を閉じると目次の列を細い帯の幅に縮め、そのぶん本文を広げる。
 * 紙は横向きでも幅が足りることがあるが、止める・中でスクロールする目次は紙では途中が切れるので、画面だけにする
 */
@media screen and (min-width: 1200px) {
  .entry {
    --toc-column: var(--toc-width);
    --toc-column-gap: var(--toc-gap);
  }
  .entry .entry-inner > * {
    max-width: calc(var(--content-max) + var(--toc-width) + var(--toc-gap));
  }
  .entry .entry-inner > .entry-footer {
    padding-right: calc(var(--toc-column) + var(--toc-column-gap));
  }
  .entry:not(:has(> .entry-inner > .entry-content > :is(.table-of-contents, .toc-panel))) > .entry-inner > .entry-content {
    padding-right: calc(var(--toc-width) + var(--toc-gap));
  }
  .entry:has(> .entry-inner > .entry-content > .toc-panel:not([open])) {
    --toc-column: var(--toc-rail-width);
    --toc-column-gap: var(--toc-rail-gap);
  }
  .entry + .pager-permalink {
    --pager-inline: max(var(--card-padding-inline), calc((100% - 2px - var(--content-max) - var(--toc-width) - var(--toc-gap)) / 2));
    padding-right: calc(var(--pager-inline) + var(--toc-width) + var(--toc-gap));
  }
  .entry:has(> .entry-inner > .entry-content > .toc-panel:not([open])) + .pager-permalink {
    padding-right: calc(var(--pager-inline) + var(--toc-rail-width) + var(--toc-rail-gap));
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--toc-column);
    -moz-column-gap: var(--toc-column-gap);
         column-gap: var(--toc-column-gap);
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > * {
    grid-column: 1;
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > :is(.table-of-contents, .toc-panel) {
    grid-column: 2;
    grid-row: 1/span 1000;
    align-self: start;
    position: sticky;
    top: var(--toc-sticky-top);
    box-sizing: border-box;
    max-height: calc(100vh - var(--toc-sticky-top) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 4px;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > :is(.table-of-contents, .toc-panel):first-child + :is(h1, h2, h3, h4, h5, h6) {
    --heading-space: 0px;
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > .toc-panel[open] > .toc-panel-summary::after {
    rotate: -90deg;
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > .toc-panel > .table-of-contents {
    padding-bottom: 0;
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > .toc-panel[open] > .toc-panel-summary {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 0.25em;
    padding-block: 0.5em;
    background-color: var(--surface);
    box-shadow: 0 -4px 0 var(--surface);
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > .toc-panel:not([open]):hover {
    border-top-color: var(--accent-strong);
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > .toc-panel:not([open]) > .toc-panel-summary {
    flex-direction: column;
    gap: 0.6em;
    min-height: 0;
    padding-block: calc(0.5em + (28px - 1.4em) / 2) 0.9em;
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > .toc-panel:not([open]) > .toc-panel-summary::after {
    display: none;
  }
  .entry-content:has(> :is(.table-of-contents, .toc-panel)) > .toc-panel:not([open]) > .toc-panel-summary .toc-panel-label {
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
  }
}
body > .floating-toc {
  display: none;
}

/*
 * 記事の一覧(トップページの一覧表示、アーカイブ、カテゴリー) (theme-design-spec.md の「記事の一覧」を参照)
 */
.archive-header-category,
.archive-heading,
.archive-entries-sort {
  padding-inline: var(--card-padding-inline);
}
@media (min-width: 768px) {
  .archive-header-category,
  .archive-heading,
  .archive-entries-sort {
    padding-inline: 0;
  }
}

.archive-header-category,
.archive-heading {
  margin: 8px 0 16px;
  font-size: 1.25rem;
  text-align: left;
}

.archive-header-category .archive-heading {
  margin: 0;
  padding-inline: 0;
}

/*
 * 記事の一覧は1枚のカードにし、記事の間を線で区切る(記事のカード・ブログのカードと同じく、1枚のカードの中を段で区切る)。
 * 広い画面では左の列に日付とカテゴリ、右の列にタイトル・概要・スター、右端にサムネイルを置く。
 * スマホでは日付・カテゴリ・タイトルの順に縦に並べ、サムネイルは右上に小さく置く
 */
.archive-entries {
  box-sizing: border-box;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
}
@media (max-width: 767px) {
  .archive-entries {
    border-inline: none;
    border-radius: 0;
  }
}
.archive-entries {
  margin-bottom: 16px;
  padding: 8px var(--card-padding-inline);
}

.page-archive .archive-entry {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  grid-template-areas: "date title thumb" "categories title thumb" ". body thumb" ". tags thumb" ". social thumb";
  grid-template-rows: auto 1fr;
  -moz-column-gap: 32px;
       column-gap: 32px;
  row-gap: 4px;
  align-items: start;
  margin: 0;
  padding: 28px 0;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .page-archive .archive-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "date thumb" "categories thumb" "title thumb" "body body" "tags tags" "social social";
    grid-template-rows: none;
    -moz-column-gap: 12px;
         column-gap: 12px;
    padding: 20px 0;
  }
}
.page-archive .archive-entry + .archive-entry {
  border-top: 1px solid var(--border);
}
.page-archive .archive-entry:not(:has(.entry-thumb:not([style*="og-image-1500.png"]))) {
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-areas: "date title" "categories title" ". body" ". tags" ". social";
}
@media (max-width: 767px) {
  .page-archive .archive-entry:not(:has(.entry-thumb:not([style*="og-image-1500.png"]))) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "date" "categories" "title" "body" "tags" "social";
  }
}
.page-archive .archive-entry:not(:has(.entry-thumb:not([style*="og-image-1500.png"]))) .entry-thumb-link {
  display: none;
}
.page-archive .archive-entry .archive-entry-header,
.page-archive .archive-entry .archive-entry-body {
  display: contents;
}
.page-archive .archive-entry .archive-date {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  grid-area: date;
  padding-top: 0.5em;
  line-height: 1.5;
  color: var(--text-light);
}
@media (max-width: 767px) {
  .page-archive .archive-entry .archive-date {
    padding-top: 0;
  }
}
.page-archive .archive-entry .archive-date a {
  color: var(--text-light);
  text-decoration: none;
}
.page-archive .archive-entry .entry-title {
  grid-area: title;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .page-archive .archive-entry .entry-title {
    font-size: 1.0625rem;
  }
}
.page-archive .archive-entry .categories {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  line-height: 1.5;
}
.page-archive .archive-entry .categories a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--link);
  text-decoration: none;
}
.page-archive .archive-entry .categories a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.page-archive .archive-entry .categories a:not(:last-child) {
  margin-right: 1.6em;
}
.page-archive .archive-entry .categories a:not(:last-child)::after {
  content: "/";
  content: "/"/"";
  position: absolute;
  left: calc(100% + 0.5em);
  color: var(--text-light);
}
.page-archive .archive-entry .categories {
  grid-area: categories;
}
.page-archive .archive-entry .entry-thumb-link {
  grid-area: thumb;
}
.page-archive .archive-entry .entry-thumb {
  float: none;
  width: 160px;
  height: 106px;
  margin: 0;
  border-radius: var(--radius-small);
  background-size: cover;
  background-position: center;
}
@media (max-width: 767px) {
  .page-archive .archive-entry .entry-thumb {
    width: 72px;
    height: 72px;
  }
}
.page-archive .archive-entry .entry-description {
  grid-area: body;
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--text-light);
}
.page-archive .archive-entry .archive-entry-tags-wrapper {
  grid-area: tags;
}
.page-archive .archive-entry .archive-entry-tags-wrapper:not(:has(a)) {
  display: none;
}
.page-archive .archive-entry .social-buttons {
  grid-area: social;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/*
 * 一覧のページャー(前のページ・次のページ)は、記事ページの前後の記事(_entry.scss)と同じく、
 * 一覧のカードの下につなげて最後の段にする。継ぎ目の影は、一覧は下側、ページャーは上側を切る
 */
@media screen {
  #main-inner > .archive-entries:has(+ .pager) {
    margin-bottom: 0;
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    clip-path: inset(-48px -48px 0 -48px);
  }
  #main-inner > .archive-entries + .pager {
    box-sizing: border-box;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
    margin: -1px 0 16px;
    padding: 0 var(--card-padding-inline) 24px;
    border-top: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    clip-path: inset(0 -48px -48px -48px);
  }
}
@media screen and (max-width: 767px) {
  #main-inner > .archive-entries + .pager {
    border-inline: none;
    border-radius: 0;
  }
}
@media screen {
  #main-inner > .archive-entries + .pager::before {
    content: "";
    grid-column: 1/-1;
    border-top: 1px solid var(--border);
  }
  #main-inner > .archive-entries + .pager > .pager-prev {
    grid-column: 1;
  }
  #main-inner > .archive-entries + .pager > .pager-next {
    grid-column: -2;
    text-align: right;
  }
  #main-inner > .archive-entries + .pager a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 2px;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
  }
  #main-inner > .archive-entries + .pager a::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: no-repeat center/contain;
            mask: no-repeat center/contain;
  }
}
@media screen and (forced-colors: active) {
  #main-inner > .archive-entries + .pager a::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
@media screen {
  #main-inner > .archive-entries + .pager a:hover {
    border-bottom-color: var(--accent-strong);
    color: var(--link);
  }
  #main-inner > .archive-entries + .pager .pager-prev a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3'/%3E%3Cpath d='M7 4 3 8l4 4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3'/%3E%3Cpath d='M7 4 3 8l4 4'/%3E%3C/svg%3E");
  }
  #main-inner > .archive-entries + .pager .pager-next a {
    flex-direction: row-reverse;
  }
  #main-inner > .archive-entries + .pager .pager-next a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='m9 4 4 4-4 4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3Cpath d='m9 4 4 4-4 4'/%3E%3C/svg%3E");
  }
}
/*
 * ブログパーツ (theme-design-spec.md の「ブログパーツ」を参照)
 * ワンカラムなので、サイドバー(#box2)は本文の下に1枚のカードにして置く。
 * 中は記事下の段(この記事を共有・コメント欄)と同じく、ブログパーツごとに上の線と見出しを付けた段にする。
 * ブログパーツの高さはまちまちなので、段組みにして上から詰める(グリッドだと行ごとに隙間が空く)。
 * 記事下(関連記事)のブログパーツは記事のカードの中にあるので、記事下の段にする(_entry.scss の「記事下」)
 */
#box2-inner {
  box-sizing: border-box;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
}
@media (max-width: 767px) {
  #box2-inner {
    border-inline: none;
    border-radius: 0;
  }
}
#box2-inner {
  -moz-columns: 260px 3;
       columns: 260px 3;
  -moz-column-gap: 48px;
       column-gap: 48px;
  padding: 24px var(--card-padding-inline) 32px;
}

#box2 .hatena-module {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin: 0;
  padding: 16px 0 24px;
  border-top: 1px solid var(--border);
}

.hatena-module {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.7;
}

.hatena-module:has(> .hatena-module-body > .hatena-urllist:only-child):not(:has(> .hatena-module-body > .hatena-urllist > li)) {
  display: none;
}

.hatena-module-title {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--text-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}
.hatena-module-title a {
  color: inherit;
  text-decoration: none;
}
.hatena-module-title a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* ブログパーツのリスト(.hatena-urllist) */
.hatena-urllist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hatena-urllist > li {
  padding: 0.4em 0;
}
.hatena-urllist > li:first-child {
  padding-top: 0;
}
.hatena-urllist > li:last-child {
  padding-bottom: 0;
}
.hatena-urllist.urllist-with-thumbnails > li {
  padding-block: 0.6em;
}
.hatena-urllist.urllist-with-thumbnails > li:first-child {
  padding-top: 0;
}
.hatena-urllist.urllist-with-thumbnails > li:last-child {
  padding-bottom: 0;
}
.hatena-urllist a {
  color: var(--text-body);
  text-decoration: none;
}
.hatena-urllist a:hover {
  color: var(--link);
  text-decoration: underline;
}
.hatena-urllist .urllist-date-link,
.hatena-urllist .urllist-date-link a {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-light);
}
.hatena-urllist .urllist-date-link a,
.hatena-urllist .archive-module-year-title,
.hatena-urllist .archive-module-month-title {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.hatena-urllist .urllist-categories {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.hatena-urllist .urllist-category-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-light);
  font-size: 0.75rem;
}
.hatena-urllist .urllist-category-link + .urllist-category-link::before {
  content: "・";
  content: "・"/"";
}
.hatena-urllist .urllist-entry-body {
  margin-top: 0.3em;
  color: var(--text-light);
}

/*
 * サムネイル付きのリスト(最新記事・関連記事・注目記事)。サムネイルを左に、タイトルを右に置き、その下に日付・カテゴリ・はてなブックマーク数を1行に並べる。
 * はてなはサムネイルを float: left にしている。
 * 画像のない記事には、はてなが仮の画像(「Hatena Blog」の灰色の画像)を出すので、そのときはサムネイルを出さず、文字だけにする
 */
.urllist-with-thumbnails .urllist-item-inner {
  display: grid;
  grid-template-columns: 56px auto minmax(0, 1fr) auto;
  grid-template-areas: "image title title title" "image date categories bookmarks" "image body body body";
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
.urllist-with-thumbnails .urllist-item-inner:not(:has(> .urllist-image-link > img:not([src*="og-image-1500.png"]))) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "title title title" "date categories bookmarks" "body body body";
}
.urllist-with-thumbnails .urllist-item-inner:not(:has(> .urllist-image-link > img:not([src*="og-image-1500.png"]))) > .urllist-image-link {
  display: none;
}
.urllist-with-thumbnails .urllist-item-inner .urllist-image-link {
  grid-area: image;
  align-self: start;
}
.urllist-with-thumbnails .urllist-item-inner .urllist-image {
  float: none;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: var(--radius-small);
  -o-object-fit: cover;
     object-fit: cover;
}
.urllist-with-thumbnails .urllist-item-inner .urllist-title-link {
  grid-area: title;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-header);
}
.urllist-with-thumbnails .urllist-item-inner .urllist-date-link {
  grid-area: date;
}
.urllist-with-thumbnails .urllist-item-inner .bookmark-widget-counter {
  grid-area: bookmarks;
}
.urllist-with-thumbnails .urllist-item-inner .urllist-categories {
  grid-area: categories;
}
.urllist-with-thumbnails .urllist-item-inner .urllist-entry-body {
  grid-area: body;
}

.customized-footer .hatena-module {
  padding-block: 16px;
  border-top: 1px solid var(--border);
}

.customized-footer .hatena-module-related-entries .related-entries {
  display: grid;
  gap: 16px 24px;
}
@media (min-width: 768px) {
  .customized-footer .hatena-module-related-entries .related-entries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.customized-footer .hatena-module-related-entries .related-entries > li {
  padding: 0;
  border-top: 0;
}

/* もっと見る */
.urllist-see-more {
  margin-top: 0.5em;
  text-align: right;
}
.urllist-see-more a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.urllist-see-more a::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: no-repeat center/contain;
          mask: no-repeat center/contain;
}
@media (forced-colors: active) {
  .urllist-see-more a::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.urllist-see-more a:hover {
  border-bottom-color: var(--accent-strong);
  color: var(--link);
}
.urllist-see-more a::before {
  display: none;
}

/* Profile module */
.hatena-module-profile .profile-icon {
  float: left;
  margin: 0 12px 8px 0;
  border-radius: 50%;
}
.hatena-module-profile .id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
  margin-bottom: 0.5em;
  font-weight: 700;
}
.hatena-module-profile .id a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.hatena-module-profile .profile-description p {
  margin-top: 0;
}
.hatena-module-profile .profile-about a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.hatena-module-profile .profile-about a::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: no-repeat center/contain;
          mask: no-repeat center/contain;
}
@media (forced-colors: active) {
  .hatena-module-profile .profile-about a::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.hatena-module-profile .profile-about a:hover {
  border-bottom-color: var(--accent-strong);
  color: var(--link);
}
.hatena-module-profile .profile-about a::before {
  display: none;
}
.hatena-module-profile .profile-activities,
.hatena-module-profile .profile-activities * {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-light);
  font-style: normal;
}
.hatena-module-profile .profile-activities {
  opacity: 1;
}

/* Category module: カテゴリの丸いラベルを並べる */
.hatena-module-category .hatena-urllist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hatena-module-category .hatena-urllist > li {
  padding: 0;
  border-top: 0;
}
.hatena-module-category .hatena-urllist a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0.75em;
  border-radius: 999px;
  background-color: var(--accent-soft);
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.hatena-module-category .hatena-urllist a:hover {
  background-color: var(--accent-soft-hover);
  color: var(--link-hover);
}
.hatena-module-category .hatena-urllist a {
  font-weight: normal;
  font-size: 0.8125rem;
  color: var(--text-body);
}
.hatena-module-category .hatena-urllist a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

/*
 * 月別アーカイブ: 年の開閉の三角は、文字より目立たない小さな印にする。
 * 押せる範囲は24px四方にする(WCAG 2.5.8)。内側の余白で広げ、同じだけ外側の余白を負にして、三角の位置と行の高さは変えない
 * (年は、三角との間の空白のぶん数px右に寄る)。
 * 右は年との間の空白の幅までにして、年のリンクに重ねない。
 * はてなの opacity: .6 は戻して、色の薄さは --text-light で表す(3:1以上)。
 * はてなの指定(.hatena-urllist .archive-module-year .archive-module-button)と詳細度を揃える
 */
.hatena-module-archive .archive-module-year .archive-module-button {
  display: inline-block;
  width: 11px;
  margin: -7px -3px -7px -10px;
  padding: 7px 3px 7px 10px;
  opacity: 1;
  color: var(--text-light);
  font-size: 0.5rem;
}

/* Recent comments module */
.hatena-module-recent-comments .recent-comments > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "title title" "user time";
  -moz-column-gap: 8px;
       column-gap: 8px;
  align-items: center;
}
.hatena-module-recent-comments .recent-comments > li > a {
  grid-area: title;
  color: var(--text-header);
}
.hatena-module-recent-comments .recent-comments > li > .recent-comment-time {
  grid-area: time;
}
.hatena-module-recent-comments .user-id {
  grid-area: user;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-light);
  font-size: 0.75rem;
}
.hatena-module-recent-comments .user-id .hatena-id-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.hatena-module-recent-comments .recent-comment-time {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", Meiryo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-light);
  font-style: normal;
  opacity: 1;
}

/* Search module */
.hatena-module-search-box .search-form {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2px 6px 2px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--surface);
}
.hatena-module-search-box .search-form:has(.search-module-input:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.hatena-module-search-box .search-module-input {
  flex: 1 0;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-body);
  outline: none;
}
.hatena-module-search-box .search-module-button {
  flex: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent no-repeat center;
  background-image: var(--icon-search, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%235b6b67' d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3C/svg%3E"));
  background-size: 18px 18px;
  color: transparent;
  overflow: hidden;
  cursor: pointer;
}
.hatena-module-search-box .search-module-button:hover {
  background-color: var(--accent-soft);
}

/*
 * 印刷用スタイル (theme-design-spec.md の「印刷」を参照)
 * style.scssの最後に読み込み、各コンポーネントの指定を!importantなしで上書きする。
 * 後から読み込んでも、画面用の指定より詳細度が低いと負けるので、そのときは #main-inner を付けて詳細度を上げる
 */
@media print {
  /* テーマが置く操作専用のUI */
  .code-block-toolbar,
  .color-mode-toggle {
    display: none;
  }
  /* はてなが置く操作専用のUI */
  #globalheader-container,
  .blog-controlls,
  .entry-header-menu,
  .hatena-star-container,
  #main-inner .social-buttons,
  .leave-comment-title,
  .read-more-comments {
    display: none;
  }
  .comment-box:not(:has(.entry-comment)) {
    display: none;
  }
  /* ナビゲーション */
  #box2,
  #entry-footer-secondary-modules,
  #main-inner .pager {
    display: none;
  }
  .entry {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .entry-content pre:not(.lang-aa),
  .entry-content pre:not(.lang-aa) > code {
    white-space: pre-wrap;
    word-break: break-all;
    overflow: visible;
  }
  .entry-content details:not([open]) > *:not(summary) {
    display: block;
  }
  .entry-content details::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .entry-content > :not(:nth-child(-n+5), .footnotes, .footnote, ul, ol, :empty, .toc-panel), #box2 {
    content-visibility: visible;
  }
}
/* </system> */

#title a {
  font-family: 'Kaushan Script', cursive, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Helvetica Neue", "Helvetica", "Noto Sans JP", "Meiryo", sans-serif, "Segoe UI Emoji";
}

:root { --swifty-scheme: ink; }