/* <system section="theme" selected="14729835035331262339"> */
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=JetBrains+Mono:wght@400;600&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");

/* Responsive: yes */

/*! normalize (minimal) */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background: transparent; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
dfn { font-style: italic; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 0; }
hr { box-sizing: content-box; height: 0; }
pre { overflow: auto; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }

.clearfix:after { display: block; visibility: hidden; font-size: 0; height: 0; clear: both; content: "."; }

/* =========================================================
   Tokens
   ========================================================= */
:root {
  --bg:        #fff3df;
  --paper:     #ffffff;
  --ink:       #2a1a12;
  --ink-soft:  #7a6252;

  --o:         #ff7a1a;
  --o-deep:    #e8590c;
  --o-light:   #ffb066;
  --o-pale:    #ffe6c7;
  --yellow:    #ffd23f;
  --pink:      #ff6b9d;
  --mint:      #35d0b5;
  --blue:      #4d8bff;

  --line:      3px solid var(--ink);
  --pop:       6px 6px 0 var(--ink);
  --pop-sm:    4px 4px 0 var(--ink);
  --pop-xs:    2px 2px 0 var(--ink);

  --f-display: 'Dela Gothic One', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --f-body:    'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  --f-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
}

/* =========================================================
   Base
   ========================================================= */
html {
  scroll-behavior: smooth;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(255, 122, 26, .22) 2px, transparent 2.5px);
  background-size: 26px 26px;
}
html, body { color: var(--ink); }
body {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--pink); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

a { color: var(--ink); transition: color .15s ease, background .15s ease; }
a:visited { color: var(--ink); }
a:hover { color: var(--o-deep); }

h1, h2, h3, h4, h5, h6 { font-family: var(--f-body); font-weight: 900; line-height: 1.45; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: inherit; text-decoration: none; }

mark { background: var(--yellow); color: var(--ink); padding: 0 .25em; border-radius: 4px; }

/* =========================================================
   Layout  (#content > #content-inner > #wrapper > #main  /  #box2)
   ========================================================= */
#container { width: 100%; }
#content { width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
#content-inner { position: relative; }
#container #content:after { display: block; visibility: hidden; font-size: 0; height: 0; clear: both; content: "."; }
.globalheader-off #container { padding-top: 0; }

#main { width: calc(100% - 372px); float: left; min-width: 0; }
#box2 { width: 340px; float: right; }
#box1:empty { display: none; }
#top-box { display: none; }

/* =========================================================
   Header
   ========================================================= */
#blog-title {
  position: relative;
  margin: 0 0 56px;
  padding: 64px 20px 78px;
  text-align: center;
  background-color: var(--o);
  border-bottom: var(--line);
  overflow: hidden;
}
#blog-title::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 7% 34%,  var(--yellow) 0 46px, transparent 47px),
    radial-gradient(circle at 93% 62%, var(--pink)   0 70px, transparent 71px),
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.4) 0 28px, transparent 29px),
    radial-gradient(circle at 19% 88%, rgba(255,255,255,.35) 0 22px, transparent 23px),
    radial-gradient(circle at 60% 94%, var(--mint) 0 26px, transparent 27px),
    radial-gradient(rgba(42,26,18,.16) 2px, transparent 2.5px);
  background-size: auto, auto, auto, auto, auto, 24px 24px;
}
#blog-title::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: linear-gradient(90deg, var(--yellow) 0 25%, var(--pink) 0 50%, var(--mint) 0 75%, var(--blue) 0);
  border-top: var(--line);
}
#blog-title-inner, #blog-title-content { position: relative; z-index: 1; }
#title { margin: 0; line-height: 1.25; }
#title a {
  display: inline-block;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(28px, 5.2vw, 54px);
  color: #fff; letter-spacing: .04em; text-decoration: none;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  transition: transform .25s cubic-bezier(.3, 1.8, .5, 1);
}
#title a:hover { color: #fff; transform: rotate(-2.5deg) scale(1.05); }
#blog-description {
  display: inline-block; margin: 20px 0 0; padding: 4px 18px;
  font-size: 13px; font-weight: 700; line-height: 1.6;
  color: var(--yellow); background: var(--ink); border-radius: 999px;
  transform: rotate(-1.5deg);
}
.header-image-enable #blog-title::before { display: none; }
.header-image-enable #title { padding-top: 40px; }

/* =========================================================
   Entry card (記事 / 一覧)
   ========================================================= */
.entry,
.archive-entry {
  --c: var(--o);
  position: relative;
  margin: 0 0 40px;
  background: var(--paper);
  border: var(--line);
  border-radius: 26px;
  box-shadow: var(--pop);
  animation: rise .55s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.archive-entry:nth-of-type(5n+2) { --c: var(--pink); }
.archive-entry:nth-of-type(5n+3) { --c: var(--mint); }
.archive-entry:nth-of-type(5n+4) { --c: var(--blue); }
.archive-entry:nth-of-type(5n+5) { --c: var(--yellow); }

/* ウィンドウ風バー */
.entry::before,
.archive-entry::before {
  content: "";
  display: block; height: 26px;
  background-color: var(--c);
  background-image:
    radial-gradient(circle at 22px 13px, #fff 0 3.5px, var(--ink) 4px 5.5px, transparent 6px),
    radial-gradient(circle at 42px 13px, #fff 0 3.5px, var(--ink) 4px 5.5px, transparent 6px),
    radial-gradient(circle at 62px 13px, #fff 0 3.5px, var(--ink) 4px 5.5px, transparent 6px);
  border-bottom: var(--line);
  border-radius: 22px 22px 0 0;
}
.entry-inner { padding: 0; }

/* 一覧(アーカイブ・カテゴリ) — はてな標準の float レイアウトを活かす */
.archive-entry { padding: 0 30px 24px; transition: transform .18s ease, box-shadow .18s ease; }
.archive-entry::before { margin: 0 -30px 20px; }
.archive-entry:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.archive-entry:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.page-archive .archive-entry:after { clear: both; }
.archive-entry-header { margin: 0; }

.page-archive .archive-entry .entry-thumb-link { float: right; display: block; margin: 6px 0 14px 22px; }
.page-archive .archive-entry .entry-thumb {
  float: none; margin: 0;
  width: 150px; height: 150px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: var(--line); border-radius: 18px; box-shadow: var(--pop-xs);
  transition: transform .2s ease;
}
.page-archive .archive-entry .entry-thumb-link:hover .entry-thumb { transform: rotate(3deg) scale(1.04); }

.entry-header { position: relative; box-sizing: border-box; padding: 26px 34px 6px; margin: 0 0 10px; }

/* 日付 */
.date { position: relative; display: block; font-weight: 700; }
.date a {
  display: inline-block;
  padding: 2px 16px 2px 12px;
  font-size: 13px; line-height: 1.8; letter-spacing: .06em;
  color: var(--ink); text-decoration: none;
  background: var(--yellow);
  border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--pop-xs);
  transition: transform .15s ease, box-shadow .15s ease;
}
.date a::before {
  content: ""; display: inline-block; box-sizing: border-box;
  width: 11px; height: 11px; margin-right: 8px; vertical-align: -1px;
  background: var(--o); border: 2px solid var(--ink); border-radius: 50%;
}
.date time { display: inline; font-size: inherit; color: inherit; }
.date time:before, .date time:after { content: none; }
.date a:hover { transform: translate(-1px, -1px) rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }

/* タイトル */
.entry-title {
  margin: 14px 0 12px;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.55; letter-spacing: .02em;
  word-wrap: break-word; overflow-wrap: anywhere;
  color: var(--ink);
}
.entry-title a {
  background: linear-gradient(transparent 62%, var(--yellow) 62% 92%, transparent 92%);
  padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background .2s ease;
}
.entry-title a:hover { background: linear-gradient(transparent 62%, var(--pink) 62% 92%, transparent 92%); color: var(--ink); }
.archive-entry .entry-title { font-size: clamp(18px, 2.3vw, 25px); }

/* カテゴリ */
.categories { font-size: 12px; margin: 6px 0 0; line-height: 2; }
.categories a {
  display: inline-block; margin: 2px 4px 2px 0; padding: 0 13px 1px; line-height: 1.8;
  color: var(--ink); font-weight: 900; text-decoration: none !important;
  background: var(--o-light);
  border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--pop-xs);
  transition: transform .15s cubic-bezier(.3, 1.8, .5, 1), box-shadow .15s ease;
}
.categories a:nth-child(4n+2) { background: var(--pink); }
.categories a:nth-child(4n+3) { background: var(--mint); }
.categories a:nth-child(4n+4) { background: var(--blue); color: #fff; }
.categories a:before { content: "#"; padding: 0 2px 0 0; opacity: .7; }
.categories a:hover { transform: translate(-1px, -2px) rotate(-3deg); box-shadow: 3px 3px 0 var(--ink); }

.entry-description { margin: 12px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.archive-entry-body { margin-top: 4px; }

/* タグ(記事・一覧) */
.entry-tags-wrapper, .archive-entry-tags-wrapper { margin: .8em 0; }
.entry-tags a, .archive-entry-tag .archive-entry-tag-link {
  display: inline-flex; align-items: center; margin: 0 6px 6px 0; padding: 0 12px; line-height: 1.8;
  font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none;
  background: var(--o-pale); border: 2px solid var(--ink); border-radius: 999px;
}
.entry-tags a:hover, .archive-entry-tag .archive-entry-tag-link:hover { background: var(--yellow); color: var(--ink); }

/* 編集ボタン(ログイン時) */
.entry-header-menu { position: absolute; bottom: 0; left: -64px; }
.entry-header-menu a {
  display: inline-block; padding: 3px 12px; line-height: 18px; font-size: 12px; font-weight: 900;
  color: var(--ink); background: var(--yellow);
  border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--pop-xs);
  text-decoration: none !important;
}
.entry-header-menu a:hover { background: var(--o-light); }

.btn {
  display: inline-block; padding: 6px 18px; line-height: 18px; font-size: 13px; font-weight: 900;
  color: var(--ink); background: var(--yellow);
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: var(--pop-xs);
  text-decoration: none !important; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: 4px 4px 0 var(--ink); background: var(--o-light); }
.btn-small { padding: 2px 12px !important; font-size: 11px !important; }
.btn-large { padding: 13px 28px; font-size: 17px; line-height: normal; }

/* =========================================================
   Entry content (本文)
   ========================================================= */
.entry-content {
  padding: 10px 34px 28px; margin: 0;
  font-size: 16px; line-height: 2;
  border-bottom: 3px dashed var(--o-light);
  overflow-wrap: anywhere;
}
.entry-content p { margin: 0 0 1.25em; }
.entry-content strong, .entry-content b { font-weight: 900; background: linear-gradient(transparent 62%, rgba(255, 210, 63, .85) 62%); }

.entry-content a {
  text-decoration: underline; text-decoration-color: var(--o);
  text-decoration-thickness: .16em; text-underline-offset: .2em;
  border-radius: 4px;
}
.entry-content a:hover { background: var(--yellow); color: var(--ink); }
.entry-content a:has(> img),
.entry-content a:has(> div),
.entry-content a.keyword,
.entry-content .itunes-embed a,
.entry-content cite a { text-decoration: none; }
.entry-content a:has(> img):hover, .entry-content a:has(> div):hover,
.entry-content .itunes-embed a:hover { background: transparent; }
a.keyword { text-decoration: none; border-bottom: 2px dotted var(--pink); color: inherit; }
a.keyword:hover { background: transparent; color: var(--pink); }

.entry-content img { max-width: 100%; height: auto; }
.entry-content img:not(.emoji):not([class*="icon"]):not([class*="star"]):not([width="16"]):not([height="16"]) {
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--pop-sm);
}
.entry-content .images-row { gap: 6px; margin: 14px 0; }

.entry-content ul, .entry-content ol { padding-left: 1.7em; margin: 0 0 1.25em; }
.entry-content li { margin: .3em 0; }
.entry-content ul li::marker { color: var(--o); font-size: 1.2em; }
.entry-content ol li::marker { color: var(--pink); font-weight: 900; }
.entry-content hr { border: 0; border-top: 4px dotted var(--o-light); height: 0; margin: 2.4em 0; }

.entry-content cite.hatena-citation { display: block; margin: -.4em 0 1.2em; font-size: 13px; font-style: normal; color: var(--ink-soft); }
.entry-content iframe { max-width: 100%; border-radius: 16px; }

/* 見出し(本文内だけに適用) */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 { margin: 2em 0 .9em; line-height: 1.5; scroll-margin-top: 20px; }
.entry-content h1 { font-size: 160%; }
.entry-content h2 { font-size: 150%; }
.entry-content h3 { font-size: 140%; }
.entry-content h4 { font-size: 125%; }
.entry-content h5 { font-size: 110%; }
.entry-content h6 { font-size: 100%; }

.entry-content h2 {
  position: relative;
  padding: .55em 4.6em .55em 1.1em;
  color: #fff; background: var(--ink);
  border-radius: 18px; box-shadow: 5px 5px 0 var(--o);
}
.entry-content h2::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; background: var(--yellow); box-shadow: -22px 0 0 var(--pink), -44px 0 0 var(--mint);
}

.entry-content h3 {
  position: relative;
  padding: .55em 1em .55em 2.9em;
  color: var(--ink); background: var(--o);
  border: var(--line); border-radius: 20px; box-shadow: var(--pop-sm);
}
.entry-content h3::before {
  content: "★";
  position: absolute; left: .75em; top: 50%; transform: translateY(-50%) rotate(-12deg);
  display: grid; place-items: center; width: 1.5em; height: 1.5em;
  font-size: .85em; line-height: 1; color: var(--ink); background: var(--yellow);
  border: 2px solid var(--ink); border-radius: 50%;
}

.entry-content h4 {
  padding: .35em .9em;
  background: var(--o-pale);
  border-left: 10px solid var(--pink);
  border-radius: 4px 16px 16px 4px;
}
.entry-content h5 { position: relative; padding-left: 1.4em; }
.entry-content h5::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .8em; height: .8em; box-sizing: border-box;
  background: var(--mint); border: 2px solid var(--ink); border-radius: 50%;
}
.entry-content h6 { color: var(--o-deep); }

/* テーブル */
.entry-content table {
  border-collapse: separate; border-spacing: 0; margin: 0 0 1.5em; max-width: 100%;
  border: var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--pop-sm); background: #fff;
}
.entry-content table img { max-width: none; }
.entry-content table th, .entry-content table td { padding: 8px 16px; border-bottom: 2px dashed var(--o-pale); border-right: 2px dashed var(--o-pale); }
.entry-content table tr > *:last-child { border-right: 0; }
.entry-content table tr:last-child > * { border-bottom: 0; }
.entry-content table th { background: var(--ink); color: var(--yellow); border-color: rgba(255,255,255,.2); }
.entry-content table tbody tr:nth-child(even) td { background: #fff8ec; }

/* 目次 */
.entry-content .table-of-contents {
  position: relative; margin: 2.6em 0 1.8em;
  padding: 1.6em 1.6em 1em 3em;
  background: #fff9e6; border: var(--line); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--pink); color: var(--ink);
}
.entry-content .table-of-contents::before {
  content: "目次";
  position: absolute; top: -20px; left: 22px;
  padding: 2px 22px 4px;
  font-family: var(--f-display); font-size: 17px; line-height: 1.6; letter-spacing: .15em; color: var(--ink);
  background: var(--yellow); border: var(--line); border-radius: 999px;
  box-shadow: var(--pop-xs); transform: rotate(-3deg);
}
.entry-content .table-of-contents::after { content: none; }
.entry-content .table-of-contents li { margin: .2em 0 .6em; list-style-type: decimal; line-height: 1.7; font-weight: 900; color: var(--o-deep); }
.entry-content .table-of-contents li ul { margin: .3em 0 .3em .2em; padding-left: 1.2em; }
.entry-content .table-of-contents li ul li { list-style-type: none; font-weight: 500; margin: .1em 0; color: var(--ink); }
.entry-content .table-of-contents li ul li::before { content: "●"; font-size: .6em; margin-right: .7em; color: var(--o); vertical-align: .2em; }
.entry-content .table-of-contents li ul li ul li { font-size: 92%; }
.entry-content .table-of-contents a { color: inherit; text-decoration: none; background: linear-gradient(transparent 80%, var(--o-light) 80%); }
.entry-content .table-of-contents a:hover { background: var(--yellow); }

/* 引用 */
.entry-content blockquote {
  position: relative; margin: 1.8em 0;
  padding: 22px 26px 22px 66px;
  background: #fff4c7; border: var(--line); border-radius: 24px; box-shadow: var(--pop-sm);
  color: var(--ink); font-style: normal;
}
.entry-content blockquote:before {
  content: "“"; position: absolute; top: 6px; left: 16px;
  font-family: var(--f-display); font-size: 70px; line-height: 1; color: var(--o);
  text-shadow: 2px 2px 0 var(--ink);
}
.entry-content blockquote:after { content: none; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite { display: block; margin-top: .6em; text-align: right; font-size: .9em; font-style: normal; color: var(--ink-soft); }

/* コード */
.entry-content pre {
  margin: 0 0 1.6em; padding: 54px 22px 20px;
  white-space: pre; color: var(--ink);
  font-family: var(--f-mono); font-size: 14px; line-height: 1.7;
  border: var(--line); border-radius: 18px; box-shadow: 5px 5px 0 var(--o);
  background:
    radial-gradient(circle at 24px 18px, var(--pink) 0 6px,   transparent 7px),
    radial-gradient(circle at 46px 18px, var(--yellow) 0 6px, transparent 7px),
    radial-gradient(circle at 68px 18px, var(--mint) 0 6px,   transparent 7px),
    linear-gradient(var(--o-pale) 0 35px, var(--ink) 35px 38px, #fffaf0 38px);
}
.entry-content pre > code { margin: 0; padding: 0; white-space: pre; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: inherit; }
.entry-content code {
  margin: 0 3px; padding: 1px 8px;
  font-family: var(--f-mono); font-size: .88em; color: var(--o-deep);
  background: #fff0d6; border: 2px solid var(--o-light); border-radius: 8px;
}

/* =========================================================
   Entry footer
   ========================================================= */
.entry-footer { padding: 14px 34px 22px; margin: 0; }
.entry-footer-section { margin: 1em 0; text-align: right; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.entry-footer-section a { color: var(--ink-soft); }
.entry-footer-section a:hover { color: var(--o-deep); }
.entry-footer .social-buttons { margin: 14px 0; }
.entry-footer .hatena-star-container { margin: 6px 0 10px; }
.entry-footer-modules { margin: 0; }

/* =========================================================
   Comments — アイコンがしゃべっているフキダシ
   DOM:  ul.comment > li.entry-comment
           > p.comment-user-name (img.hatena-id-icon, a.comment-user-id, span.comment-nickname)
           + div.comment-content + p.comment-metadata
   ========================================================= */
.comment-box { position: relative; margin: 8px 0 40px; padding: 0 10px; }
.entry .comment-box, .entry-inner .comment-box { padding: 0 34px; }
.comment-box::before {
  content: "COMMENTS";
  display: inline-block; margin: 0 0 4px; padding: 3px 22px 5px;
  font-family: var(--f-display); font-size: 15px; line-height: 1.5; letter-spacing: .14em; color: var(--ink);
  background: var(--mint); border: var(--line); border-radius: 999px;
  box-shadow: var(--pop-xs); transform: rotate(-2deg);
}
.comment { margin: 0; padding: 18px 0 0; list-style: none; }

li.entry-comment {
  --bub: #fff1c2;
  position: relative;
  list-style: none; overflow: visible;
  margin: 28px 0 28px 100px;
  min-height: 64px;
  padding: 16px 24px 14px;
  background: var(--bub);
  border: var(--line); border-radius: 26px; box-shadow: var(--pop-sm);
  transform-origin: 0 24px;
  animation: bubble .55s cubic-bezier(.3, 1.6, .5, 1) backwards;
  transition: transform .18s ease, box-shadow .18s ease;
}
li.entry-comment:nth-child(2) { animation-delay: .08s; }
li.entry-comment:nth-child(3) { animation-delay: .16s; }
li.entry-comment:nth-child(4) { animation-delay: .24s; }
li.entry-comment:nth-child(5) { animation-delay: .32s; }
li.entry-comment:nth-child(n+6) { animation-delay: .4s; }
li.entry-comment:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }

/* しっぽ(外枠 + 中身) */
li.entry-comment::before,
li.entry-comment::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
li.entry-comment::before { top: 22px; left: -25px; border-width: 12px 22px 12px 0; border-color: transparent var(--ink) transparent transparent; }
li.entry-comment::after  { top: 25px; left: -19px; border-width: 9px 19px 9px 0;  border-color: transparent var(--bub) transparent transparent; }

/* アイコン(li基準で外に出す) */
li.entry-comment .comment-user-name { position: static; }
li.entry-comment .hatena-id-icon {
  position: absolute;
  top: 6px; left: -92px;
  width: 64px !important; height: 64px !important;
  box-sizing: border-box; object-fit: cover;
  margin: 0; padding: 0; float: none;
  background: var(--yellow);
  border: var(--line); border-radius: 50%; box-shadow: var(--pop-sm);
  animation: talk 2.6s ease-in-out infinite;
}
li.entry-comment:hover .hatena-id-icon { animation: talk-fast .42s ease-in-out infinite; }

/* 名前 */
li.entry-comment .comment-user-name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
  margin: 0 0 8px; padding: 0 0 6px;
  font-size: 14px; line-height: 1.6; font-weight: 900;
  border-bottom: 2px dashed rgba(42, 26, 18, .18);
}
li.entry-comment .comment-user-name a { color: var(--o-deep); text-decoration: none; }
li.entry-comment .comment-user-name a:hover { color: var(--ink); text-decoration: underline wavy; }
li.entry-comment .user-name-nickname { font-size: 15px; color: var(--ink); }
li.entry-comment .user-name-hatena-id,
li.entry-comment .user-name-paren { font-size: 12px; font-weight: 700; color: var(--ink-soft); }

li.entry-comment .comment-content { font-size: 15px; line-height: 1.85; color: var(--ink); overflow-wrap: anywhere; }
li.entry-comment .comment-content p { margin: 0 0 .6em; padding: 0; font-size: inherit; }
li.entry-comment .comment-content p:last-child { margin-bottom: 0; }

li.entry-comment .comment-metadata {
  margin: 8px 0 0; padding: 0;
  font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.6;
  color: var(--ink-soft); text-align: right;
}
li.entry-comment .comment-metadata a { color: inherit; text-decoration: none; }

/* 偶数は反対側からしゃべる */
li.entry-comment:nth-child(even) { --bub: #ffe1ec; margin: 28px 100px 28px 0; transform-origin: 100% 24px; }
li.entry-comment:nth-child(even)::before { left: auto; right: -25px; border-width: 12px 0 12px 22px; border-color: transparent transparent transparent var(--ink); }
li.entry-comment:nth-child(even)::after  { left: auto; right: -19px; border-width: 9px 0 9px 19px;  border-color: transparent transparent transparent var(--bub); }
li.entry-comment:nth-child(even) .hatena-id-icon { left: auto; right: -92px; background: var(--pink); }
li.entry-comment:nth-child(3n) { --bub: #d9f7ee; }
li.entry-comment:nth-child(3n):not(:nth-child(even))::after { border-right-color: var(--bub); }
li.entry-comment:nth-child(3n):nth-child(even)::after { border-left-color: var(--bub); }

.read-more-comments { margin: 0 0 20px; text-align: center; }
.read-more-comments a { display: inline-block; padding: 4px 20px; font-weight: 900; text-decoration: none; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--pop-xs); }

.permalink { position: relative; }

/* コメントを書く */
.leave-comment-title {
  position: relative; display: flex; justify-content: center; align-items: center;
  margin: 12px auto 0; max-width: 280px; padding: 12px 28px;
  font-weight: 900; font-size: 15px; letter-spacing: .06em; color: var(--ink);
  background: var(--o); border: var(--line); border-radius: 999px; box-shadow: var(--pop-sm);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.leave-comment-title:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); background: var(--yellow); color: var(--ink); }
.leave-comment-title:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

.comment-box textarea,
.comment-box input[type="text"], .comment-box input[type="url"], .comment-box input[type="email"] {
  width: 100%; box-sizing: border-box; padding: 12px 16px;
  background: #fff; border: var(--line); border-radius: 16px; outline: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
.comment-box textarea:focus, .comment-box input[type="text"]:focus { box-shadow: 4px 4px 0 var(--o); transform: translate(-2px, -2px); }
.comment-box input[type="submit"], .comment-box button {
  padding: 8px 26px; font-weight: 900; color: var(--ink); background: var(--yellow);
  border: var(--line); border-radius: 999px; box-shadow: var(--pop-xs);
}
.comment-box input[type="submit"]:hover, .comment-box button:hover { background: var(--o-light); }

/* =========================================================
   Modules (サイドバー / 本文内モジュール)
   ========================================================= */
.hatena-module {
  --tc: var(--o);
  margin: 0 0 28px; line-height: 1.8;
  background: var(--paper);
  border: var(--line); border-radius: 24px; box-shadow: var(--pop);
  overflow: hidden;
  animation: rise .55s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.hatena-module:nth-child(5n+2) { --tc: var(--yellow); }
.hatena-module:nth-child(5n+3) { --tc: var(--pink); }
.hatena-module:nth-child(5n+4) { --tc: var(--mint); }
.hatena-module:nth-child(5n+5) { --tc: var(--blue); }

.hatena-module-title {
  box-sizing: border-box; position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 11px 18px 9px;
  font-family: var(--f-display); font-weight: 400; font-size: 15px; line-height: 1.5; letter-spacing: .08em; color: var(--ink);
  background: var(--tc); border-bottom: var(--line);
}
.hatena-module-title:before {
  content: ""; flex: none; box-sizing: border-box; width: 13px; height: 13px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 50%;
}
.hatena-module-title a { color: var(--ink); text-decoration: none; }
.hatena-module-title a:hover { color: var(--ink); text-decoration: underline wavy; }

.hatena-module-body { padding: 14px 18px 16px; font-size: 15px; line-height: 1.6; background: var(--paper); }
.hatena-module-body h3, .hatena-module-body h4 { margin: .6em 0 .4em; font-size: 1.05em; }

/* 記事フッター内のモジュールはカードにしない */
.entry-footer-modules .hatena-module {
  margin: 0 0 14px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; animation: none;
}
.entry-footer-modules .hatena-module-title {
  display: block; padding: 2px 0 2px 12px; margin: 0 0 8px;
  background: none; border: 0; border-left: 8px solid var(--pink); border-radius: 2px;
  font-size: 15px; letter-spacing: .04em;
}
.entry-footer-modules .hatena-module-title:before { display: none; }
.entry-footer-modules .hatena-module-body { padding: 0; background: none; font-size: inherit; }

/* リスト */
.hatena-urllist { list-style: none; margin: 0; padding: 0; }
.hatena-urllist li { padding: 9px 8px; line-height: 1.55; border-bottom: 2px dashed var(--o-pale); border-radius: 12px; transition: background .15s ease; }
.hatena-urllist li:first-child { padding-top: 9px; }
.hatena-urllist li:last-child { border-bottom: 0; }
.hatena-urllist li:hover { background: #fff6e8; }
.hatena-urllist li a { text-decoration: none; font-weight: 700; }
.hatena-urllist li a:hover { color: var(--o-deep); }
.hatena-urllist .urllist-date-link { font-size: 12px; color: var(--ink-soft); }
.hatena-urllist .urllist-date-link a { font-weight: 500; }
.hatena-urllist .urllist-title-link { font-size: 14px; line-height: 1.5; }
.hatena-urllist .archive-module-year, .hatena-urllist .archive-module-month { border-bottom: 0; padding-top: 4px; padding-bottom: 4px; }
.hatena-urllist .archive-module-year:hover { background: none; }

/* サムネイル付きリスト(ランキング・最新記事) */
.urllist-with-thumbnails li .urllist-image,
.hatena-urllist li .urllist-image {
  float: left; width: 72px; height: 72px; max-width: none; object-fit: cover;
  margin: 2px 12px 8px 0;
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: var(--pop-xs);
}
.hatena-urllist .bookmark-widget-counter { font-size: 12px; }

/* プロフィール */
.hatena-module-profile .profile-icon {
  float: left; width: 64px; height: 64px; object-fit: cover; margin: 0 14px 10px 0;
  border: var(--line); border-radius: 50%; box-shadow: 3px 3px 0 var(--o);
}
.hatena-module-profile .id { display: block; margin-bottom: 6px; font-weight: 900; font-size: 105%; }
.hatena-module-profile .id a { text-decoration: none; }
.hatena-module-profile .profile-description { font-size: 14px; color: var(--ink); }
.hatena-module-profile .profile-description p { margin-top: 0; }

/* 検索 */
.hatena-module-search-box .search-form {
  position: relative; box-sizing: border-box; width: 100%; height: 2.8em; padding: 3px 14px; overflow: hidden;
  background: #fff; border: var(--line); border-radius: 999px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.hatena-module-search-box .search-form:focus-within { box-shadow: 4px 4px 0 var(--o); transform: translate(-2px, -2px); }
.hatena-module-search-box .search-module-input { width: 88%; height: 22px; padding: 5px; color: var(--ink); background: none; border: none; outline: none; }
.hatena-module-search-box .search-module-button {
  position: absolute; top: 7px; right: 8px; width: 40px;
  text-indent: -9999px; border: none; outline: none; opacity: .7;
  background: transparent url(https://cdn.blog.st-hatena.com/images/theme/search.png) no-repeat right center;
}
.hatena-module-search-box .search-module-button:hover { opacity: 1; }

/* =========================================================
   Pager
   ========================================================= */
.pager { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 2.2em 6px 2em 0; }
.pager:after { content: none; }
.pager .pager-prev, .pager .pager-next { float: none; max-width: 100%; width: auto; }
.pager .pager-prev { margin-right: auto; text-align: left; }
.pager .pager-next { margin-left: auto; text-align: right; }
.pager a {
  position: relative; display: inline-block; max-width: 100%; box-sizing: border-box; padding: .35em 1.3em;
  font-weight: 900; line-height: 1.6; color: var(--ink); text-decoration: none; white-space: normal;
  background: var(--yellow); border: var(--line); border-radius: 22px; box-shadow: var(--pop-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pager a:hover { background: var(--o); color: var(--ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.pager a:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.pager .pager-arrow { font-weight: 900; }

/* =========================================================
   Footer
   ========================================================= */
#footer {
  position: relative; clear: both;
  margin-top: 90px; padding: 52px 20px 40px;
  text-align: center; font-size: 13px; line-height: 1.7; color: #ffe9cc;
  background: var(--ink); border-top: var(--line);
}
#footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: linear-gradient(90deg, var(--yellow) 0 25%, var(--pink) 0 50%, var(--mint) 0 75%, var(--blue) 0);
}
#footer p { margin: 0; }
#footer a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
#footer a:hover { color: var(--o-light); }

.page-about dt { margin-bottom: 6px; font-size: 16px; font-weight: 900; border-bottom: 3px dashed var(--o-light); }
.page-about dd { margin: 0 0 30px; }

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--o-pale); border-left: 2px solid var(--ink); }
::-webkit-scrollbar-thumb { background: var(--o); border: 3px solid var(--ink); border-radius: 999px; }

/* =========================================================
   Animations
   ========================================================= */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes bubble {
  0%   { opacity: 0; transform: scale(.4) translateX(-14px); }
  100% { opacity: 1; transform: none; }
}
@keyframes talk {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-4px) rotate(3deg); }
}
@keyframes talk-fast {
  0%, 100% { transform: translateY(0) rotate(-7deg) scale(1.04); }
  50%      { transform: translateY(-6px) rotate(7deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  #content { padding: 0 20px; }
  #main, #box2 { width: 100%; float: none; }
}

@media (max-width: 767px) {
  :root { --pop: 4px 4px 0 var(--ink); --pop-sm: 3px 3px 0 var(--ink); }
  #globalheader-container { position: static; }
  #content { padding: 0 14px; }
  #blog-title { margin-bottom: 36px; padding: 44px 14px 58px; }
  #blog-title::before { background-image: radial-gradient(circle at 93% 70%, var(--pink) 0 40px, transparent 41px), radial-gradient(rgba(42,26,18,.16) 2px, transparent 2.5px); background-size: auto, 24px 24px; }
  #main, #box2 { width: 100%; float: none; }
  .entry-header-menu { left: 0; top: -34px; }

  .entry, .archive-entry { border-radius: 20px; margin-bottom: 30px; }
  .entry::before, .archive-entry::before { border-radius: 16px 16px 0 0; }
  .archive-entry { padding: 0 18px 20px; }
  .archive-entry::before { margin: 0 -18px 16px; }
  .page-archive .archive-entry .entry-thumb { width: 96px; height: 96px; }
  .page-archive .archive-entry .entry-thumb-link { margin-left: 14px; }
  .entry-header { padding: 20px 18px 4px; }
  .entry-content { padding: 8px 18px 22px; font-size: 15.5px; }
  .entry-footer { padding: 12px 18px 18px; }
  .entry-content h2 { padding-right: 4.2em; }
  .entry-content blockquote { padding: 20px 20px 20px 52px; }
  .entry-content blockquote:before { left: 10px; font-size: 54px; }
  .entry-content .table-of-contents { padding: 1.5em 1.1em 1em 2.2em; }

  .comment-box, .entry .comment-box, .entry-inner .comment-box { padding: 0 12px; }
  li.entry-comment { margin: 24px 0 24px 72px; padding: 14px 16px 12px; }
  li.entry-comment:nth-child(even) { margin: 24px 72px 24px 0; }
  li.entry-comment .hatena-id-icon { width: 44px !important; height: 44px !important; left: -68px; top: 8px; }
  li.entry-comment:nth-child(even) .hatena-id-icon { left: auto; right: -68px; }
  li.entry-comment::before { top: 20px; left: -21px; border-width: 10px 18px 10px 0; }
  li.entry-comment::after  { top: 23px; left: -15px; border-width: 7px 15px 7px 0; }
  li.entry-comment:nth-child(even)::before { left: auto; right: -21px; border-width: 10px 0 10px 18px; }
  li.entry-comment:nth-child(even)::after  { left: auto; right: -15px; border-width: 7px 0 7px 15px; }
}
/* </system> */