/* <system section="background" selected="default"> */
/* default */
/* </system> */
@charset "UTF-8";
/*
  Theme: Newtopia
  Author: newt239
  Description: newt239.dev のデザインを移植したテーマ（Based on Hatena Blog Theme Boilerplate, MIT License）
  Responsive: yes
*/
:root {
  color-scheme: light;
  --text: 48 42 37;
  --text-muted: 110 100 90;
  --text-faint: 122 114 104;
  --bg: 255 248 240;
  --bg-accent: 216 226 240;
  --bg-warm: 240 220 196;
  --accent: 74 136 224;
  --accent-dark: 26 72 120;
  --highlight: 162 132 32;
  --surface: 246 240 232;
  --surface-hover: 236 230 222;
  --border: 240 234 228;
  --focus-ring: 255 0 0;
  --focus-bg: 255 255 0;
}

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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

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

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

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

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

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

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

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

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

html,
body {
  font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, -apple-system, sans-serif;
  color: rgb(var(--text));
  background-color: rgb(var(--bg));
  line-height: 1.6;
}

a {
  color: rgb(var(--accent));
}
a:hover {
  color: rgb(var(--accent-dark));
}
a.keyword {
  text-decoration: none;
  border-bottom: 1px dotted rgb(var(--border));
  color: rgb(var(--text));
}

h1, h2, h3, h4, h5, h6 {
  color: rgb(var(--text));
  line-height: 1.3;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: rgb(var(--text));
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: rgb(var(--accent-dark));
}

#container,
#footer {
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 768px) {
  #container,
  #footer {
    width: 720px;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) {
  #container,
  #footer {
    width: 940px;
  }
}

#content-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) {
  #content-inner {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  #wrapper {
    width: 480px;
  }
}
@media (min-width: 992px) {
  #wrapper {
    width: 600px;
  }
}

@media (min-width: 768px) {
  #box2 {
    width: 200px;
  }
}
@media (min-width: 992px) {
  #box2 {
    width: 300px;
  }
}

#blog-title {
  margin: 2em 0;
  text-align: center;
}
@media (min-width: 768px) {
  #blog-title {
    margin: 3em 0;
    text-align: left;
  }
}

#title {
  margin: 0;
  font-size: 1.5rem;
}
@media (min-width: 992px) {
  #title {
    font-size: 1.7rem;
  }
}
#title a {
  color: rgb(var(--text));
}

#blog-description {
  font-weight: normal;
  font-size: 0.8rem;
  margin: 1em 0 0;
}

.header-image-enable #blog-title {
  margin: 0 0 2em;
}
.header-image-enable #blog-title-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.header-image-enable #blog-title-content {
  margin-left: 10px;
  margin-right: 10px;
}

#top-editarea {
  margin-bottom: 1em;
}

.breadcrumb {
  font-size: 0.9rem;
}

.entry {
  position: relative;
  margin-bottom: 4em;
}

.entry-header {
  padding-bottom: 1em;
  margin-bottom: 2em;
  border-bottom: 1px solid rgb(var(--border));
  position: relative;
}

.date {
  margin-bottom: 0.5em;
  font-size: 0.9rem;
}
.date a {
  color: rgb(var(--text-muted));
  text-decoration: none;
}
.date a:hover {
  text-decoration: underline;
}

.entry-title {
  margin: 0 0 0.3em;
  font-size: 1.5rem;
}
@media (min-width: 992px) {
  .entry-title {
    font-size: 1.6rem;
  }
}

.categories {
  margin: 0.5em 0;
  font-size: 0.9rem;
}
.categories a {
  margin-right: 0.5em;
}

.entry-header-menu {
  position: absolute;
  top: 0;
  right: 0;
}

.entry-content img,
.entry-content video {
  max-width: 100%;
  height: auto;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin: 1em 0 0.8em 0;
}
.entry-content h1 {
  font-size: 1.5rem;
}
@media (min-width: 992px) {
  .entry-content h1 {
    font-size: 1.7rem;
  }
}
.entry-content h2 {
  font-size: 1.4rem;
}
@media (min-width: 992px) {
  .entry-content h2 {
    font-size: 1.5rem;
  }
}
.entry-content h3 {
  font-size: 1.2rem;
}
@media (min-width: 992px) {
  .entry-content h3 {
    font-size: 1.3rem;
  }
}
.entry-content h4 {
  font-size: 1.1rem;
}
.entry-content h5 {
  font-size: 1rem;
}
.entry-content h6 {
  font-size: 0.9rem;
}
.entry-content ul,
.entry-content ol,
.entry-content dd {
  margin: 0 0 1em 1.5em;
  padding: 0;
}
.entry-content ul li ul, .entry-content ul li ol,
.entry-content ol li ul,
.entry-content ol li ol,
.entry-content dd li ul,
.entry-content dd li ol {
  margin-bottom: 0;
}
.entry-content table {
  border-collapse: collapse;
  border-spacing: 0;
  border-bottom: 1em;
  margin-bottom: 1em;
  width: 100%;
  overflow: auto;
  display: block;
  font-size: 0.8rem;
}
@media (min-width: 992px) {
  .entry-content table {
    font-size: 0.9rem;
  }
}
.entry-content table th,
.entry-content table td {
  border: 1px solid rgb(var(--border));
  padding: 5px 10px;
}
.entry-content table th {
  background: rgb(var(--surface));
}
.entry-content blockquote {
  border: 1px solid rgb(var(--border));
  margin: 0 0 10px;
  padding: 20px;
}
.entry-content blockquote p:first-of-type {
  margin-top: 0;
}
.entry-content blockquote p:last-of-type {
  margin-bottom: 0;
}
.entry-content pre,
.entry-content code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Menlo", "Monaco", monospace;
}
.entry-content pre {
  background: rgb(var(--surface));
  border: none;
  white-space: pre-wrap;
  text-overflow: ellipsis;
  line-height: 1.3;
  font-size: 0.8rem;
  padding: 10px;
}
.entry-content pre > code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background-color: transparent;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Menlo", "Monaco", monospace;
}
.entry-content code {
  font-size: 90%;
  margin: 0 2px;
  padding: 0px 5px;
  background-color: rgb(var(--surface));
  border-radius: 3px;
}
.entry-content hr {
  width: 50%;
  border: 0;
  border: none;
  border-top: 1px solid rgb(var(--border));
  margin: 2em auto;
}
.entry-content .table-of-contents {
  padding: 1em 1em 1em 2em;
  margin: 1em 0;
  border: 1px solid rgb(var(--border));
}

.entry-footer .social-buttons {
  margin-bottom: 1em;
}

.entry-footer-section {
  color: rgb(var(--text-muted));
  font-size: 0.9rem;
}
.entry-footer-section a {
  color: rgb(var(--text-muted));
}

.comment-box {
  margin: 1em 0;
}
.comment-box .comment {
  list-style: none;
  margin: 0 0 15px 0;
  padding: 0;
  line-height: 1.7;
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .comment-box .comment {
    font-size: 0.9rem;
  }
}
.comment-box .entry-comment {
  padding: 10px 0 10px 60px;
  border-bottom: 1px solid rgb(var(--border));
  position: relative;
}
.comment-box .entry-comment:first-child {
  border-top: 1px solid rgb(var(--border));
}
.comment-box .read-more-comments {
  padding: 10px 0;
}
.comment-box .hatena-id-icon {
  position: absolute;
  top: 10px;
  left: 0;
  width: 50px !important;
  height: 50px !important;
  border-radius: 3px;
}

.comment-user-name {
  margin: 0 0 0.4em 0;
  font-weight: bold;
}

.comment-content {
  margin: 0 0 0.4em 0;
  word-wrap: break-word;
  color: rgb(var(--text));
  font-size: 0.85rem;
}
.comment-content p {
  margin: 0 0 0.6em 0;
}

.comment-metadata {
  color: rgb(var(--text-muted));
  margin: 0;
  font-size: 0.8rem;
}
.comment-metadata a {
  color: rgb(var(--text-muted));
}

.leave-comment-title {
  padding: 0.6em 1em;
  font-size: 0.85rem;
  border: 1px solid rgb(var(--border));
}

.pager {
  margin: 2em 0;
  display: flex;
  justify-content: space-between;
}

.hatena-module {
  box-sizing: border-box;
  margin-bottom: 3em;
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .hatena-module {
    font-size: 0.9rem;
  }
}

.hatena-module-title {
  margin-bottom: 0.6em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid rgb(var(--border));
  font-size: 1rem;
  font-weight: bold;
}
.hatena-module-title a {
  color: rgb(var(--text));
  text-decoration: none;
}
.hatena-module-title a:hover {
  text-decoration: underline;
}

.hatena-module-profile .profile-icon {
  float: left;
  margin: 0 10px 10px 0;
}
.hatena-module-profile .id {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.hatena-module-profile .profile-description p {
  margin-top: 0;
}

.hatena-urllist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hatena-urllist li {
  padding: 0.5em 0;
}
.hatena-urllist li:last-child {
  padding-bottom: 0;
}
.hatena-urllist li a {
  text-decoration: none;
}
.hatena-urllist li a:hover {
  text-decoration: underline;
}
.hatena-urllist .urllist-category-link {
  font-size: 0.7rem;
  padding: 0.1em 0.3em;
}
.hatena-urllist .urllist-date-link a {
  color: rgb(var(--text-muted));
}
.hatena-urllist .urllist-entry-body {
  margin-top: 0.3em;
}

.hatena-module-search-box .search-form {
  border: 1px solid rgb(var(--border));
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.hatena-module-search-box .search-module-input {
  flex: 1 0;
  padding: 5px;
  color: rgb(var(--text));
  background: none;
  border: none;
  outline: none;
  height: 20px;
}
.hatena-module-search-box .search-module-button {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath 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%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E") no-repeat center;
  background-size: 20px 20px;
  border: none;
  outline: none;
  color: transparent;
  overflow: hidden;
  opacity: 0.5;
  cursor: pointer;
}
.hatena-module-search-box .search-module-button:hover {
  opacity: 0.85;
}

.page-about .entry-content dt {
  font-weight: bold;
  border-bottom: 1px solid rgb(var(--border));
  margin-bottom: 0.5em;
}
.page-about .entry-content dd {
  margin-left: 0;
  margin-bottom: 2em;
}

.archive-header-category {
  text-align: center;
}

.page-archive .archive-entry {
  margin-bottom: 3em;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.3;
}
.page-archive .entry-title {
  margin: 0.3em auto;
}
.page-archive .entry-thumb {
  width: 80px;
  height: 80px;
  background-size: cover;
}
@media (min-width: 768px) {
  .page-archive .entry-thumb {
    width: 120px;
    height: 120px;
  }
}
.page-archive .entry-description {
  margin: 0;
  font-size: 0.85rem;
}
@media (min-width: 768px) {
  .page-archive .entry-description {
    font-size: 0.9rem;
  }
}
.page-archive .social-buttons {
  display: block;
  margin-top: 0.3em;
}

#footer {
  margin-top: 2em;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgb(var(--text-muted));
}
#footer a {
  color: rgb(var(--text-muted));
}
#footer p {
  margin: 0.5em auto;
}

body {
  font-size: 1.125rem;
  line-height: 1.75;
  font-feature-settings: "palt";
}

::selection {
  background-color: rgb(var(--text));
  color: rgb(var(--bg));
}

#container a:focus-visible,
#container button:focus-visible,
#footer a:focus-visible {
  color: rgb(var(--focus-ring)) !important;
  background-color: rgb(var(--focus-bg)) !important;
  background-image: none !important;
  outline: 2px solid rgb(var(--focus-ring));
  outline-offset: 2px;
}

a {
  text-decoration: none;
}

#container a,
#footer a {
  transition: opacity 0.2s, color 0.2s, background-color 0.2s, border-color 0.2s;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

@media (min-width: 1200px) {
  #container,
  #footer {
    width: 1080px;
  }
  #wrapper {
    width: 720px;
  }
}
#blog-title {
  margin: 2rem 0 1.75rem;
  padding-bottom: 1.25rem;
  text-align: left;
  border-bottom: 1px solid rgb(var(--border));
}

#blog-title-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
}

#title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}
@media (min-width: 992px) {
  #title {
    font-size: 2rem;
  }
}
#title a {
  color: rgb(var(--text));
}
#title a:hover {
  color: rgb(var(--text));
  opacity: 0.5;
}

#blog-description {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgb(var(--text-muted));
}

#top-editarea {
  margin-bottom: 1.5rem;
}

.breadcrumb {
  font-size: 0.875rem;
  color: rgb(var(--text-muted));
  margin-bottom: 1.5rem;
}
.breadcrumb a {
  color: rgb(var(--text-muted));
}
.breadcrumb a:hover {
  color: rgb(var(--accent));
}

.entry {
  margin-bottom: 4rem;
}

.entry-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.5rem;
}

.date {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.date a {
  color: rgb(var(--text-muted));
}
.date a:hover {
  color: rgb(var(--accent));
  text-decoration: none;
}

.entry-title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 992px) {
  .entry-title {
    font-size: 2rem;
  }
}
.entry-title .entry-title-link {
  display: inline;
  padding: 0.25rem 0.5rem;
  background-color: rgb(var(--text));
  color: rgb(var(--bg));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 0.2s;
}
.entry-title .entry-title-link:hover {
  background-color: rgb(var(--accent-dark));
  color: rgb(var(--bg));
}

.categories {
  margin: 0.75rem 0 0;
}
.categories a {
  display: inline-block;
  margin: 0 0.375rem 0.375rem 0;
  padding: 0.125rem 0.75rem;
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 2rem;
  font-size: 0.875rem;
  color: rgb(var(--text-muted));
}
.categories a:hover {
  background-color: rgb(var(--surface-hover));
  border-color: rgb(var(--accent));
  color: rgb(var(--accent));
}

.entry-content {
  line-height: 2;
}
.entry-content a {
  margin: 0 0.125rem;
  color: rgb(var(--accent));
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.25rem;
}
.entry-content a:hover {
  color: rgb(var(--accent));
  opacity: 0.5;
}
.entry-content a.keyword {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgb(var(--text-faint));
}
.entry-content a.keyword:hover {
  color: inherit;
}
.entry-content a:has(img) {
  margin: 0;
  text-decoration: none;
}
.entry-content ul,
.entry-content ol,
.entry-content dd {
  margin: 0 0 1rem 1.5rem;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
  margin: 2.5rem 0 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.entry-content h1 {
  font-size: 1.75rem;
}
.entry-content h2 {
  font-size: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(var(--text-muted)/0.25);
}
.entry-content h3 {
  font-size: 1.25rem;
}
.entry-content h4 {
  font-size: 1.125rem;
}
.entry-content h5 {
  font-size: 1rem;
}
.entry-content h6 {
  font-size: 0.875rem;
  color: rgb(var(--text-muted));
}
.entry-content img,
.entry-content video {
  border-radius: 0.5rem;
}
.entry-content blockquote {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  background-color: rgb(var(--surface));
  border: none;
  border-left: 3px solid rgb(var(--accent));
  border-radius: 0 0.5rem 0.5rem 0;
}
.entry-content blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgb(var(--text-muted));
}
.entry-content pre {
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.75;
  font-feature-settings: normal;
}
.entry-content code {
  margin: 0 0.125rem;
  background-color: rgb(var(--surface));
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 1rem;
  color: rgb(var(--accent-dark));
}
.entry-content pre > code {
  font-size: 0.875rem;
  color: rgb(var(--text));
}
.entry-content table {
  font-size: 0.875rem;
}
.entry-content table th,
.entry-content table td {
  border: 1px solid rgb(var(--border));
  padding: 0.5rem 0.75rem;
}
.entry-content table th {
  background-color: rgb(var(--surface));
}
.entry-content hr {
  width: 100%;
  border-top: 1px solid rgb(var(--border));
  margin: 2.5rem auto;
}
.entry-content .table-of-contents {
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 0.75rem;
  padding: 1.25rem 1.25rem 1.25rem 2.5rem;
  font-size: 1rem;
}
.entry-content .table-of-contents li {
  margin: 0.25rem 0;
}
.entry-content .table-of-contents a {
  color: rgb(var(--text));
  text-decoration: none;
}
.entry-content .table-of-contents a:hover {
  color: rgb(var(--accent));
  opacity: 1;
}
.entry-content .footnote-number {
  position: relative;
  top: -0.375rem;
  margin: 0 0.125rem;
  font-size: 0.75rem;
  line-height: 1;
  text-decoration: none;
}
.entry-content div.footnote,
.entry-content .footnotes {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--border));
  font-size: 0.875rem;
  color: rgb(var(--text-muted));
}
.entry-content div.footnote .footnote-number,
.entry-content .footnotes .footnote-number {
  position: static;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.entry-content p.footnote {
  margin: 0.25rem 0;
  padding: 0;
  border: none;
  font-size: inherit;
}
.entry-content .synComment {
  color: rgb(var(--text-muted));
}
.entry-content .synStatement {
  color: rgb(var(--accent-dark));
  font-weight: 700;
}
.entry-content .synType {
  color: rgb(var(--accent-dark));
}
.entry-content .synIdentifier {
  color: rgb(var(--text));
}
.entry-content .synConstant {
  color: #7d6418;
}
.entry-content .synPreProc {
  color: #7d6418;
}
.entry-content .synSpecial {
  color: rgb(var(--accent-dark));
}

a.entry-see-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid rgb(var(--text));
  border-radius: 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--text));
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
a.entry-see-more:hover {
  background-color: rgb(var(--text));
  color: rgb(var(--bg));
  opacity: 1;
}

.entry-footer {
  margin-top: 2.5rem;
}
.entry-footer .social-buttons {
  margin-bottom: 1rem;
}

.entry-footer-section {
  color: rgb(var(--text-muted));
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.entry-footer-section a {
  color: rgb(var(--text-muted));
}
.entry-footer-section a:hover {
  color: rgb(var(--accent));
}

.comment-box {
  margin: 1rem 0;
}
.comment-box .comment {
  font-size: 0.875rem;
  margin: 0 0 1rem;
}
.comment-box .entry-comment {
  border-bottom: 1px solid rgb(var(--border));
}
.comment-box .entry-comment:first-child {
  border-top: 1px solid rgb(var(--border));
}
.comment-box .hatena-id-icon {
  border-radius: 0.5rem;
}

.comment-user-name {
  margin: 0 0 0.5rem;
}

.comment-content {
  font-size: 0.875rem;
}
.comment-content p {
  margin: 0 0 0.5rem;
}

.comment-metadata {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.leave-comment-title {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background-color: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 2rem;
  font-size: 0.875rem;
  color: rgb(var(--text));
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.leave-comment-title:hover {
  background-color: rgb(var(--surface-hover));
  border-color: rgb(var(--accent));
  color: rgb(var(--accent));
}

.pager {
  margin: 2rem 0;
  gap: 1rem;
}
.pager .pager-prev,
.pager .pager-next {
  max-width: calc(50% - 0.5rem);
}
.pager a {
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: rgb(var(--surface));
  border-radius: 0.75rem;
  color: rgb(var(--text));
  font-size: 1rem;
  transition: background-color 0.2s;
}
.pager a:hover {
  background-color: rgb(var(--surface-hover));
  color: rgb(var(--text));
}
.pager .pager-next a {
  text-align: right;
}

.hatena-module {
  background-color: rgb(var(--surface));
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}

.hatena-module-title {
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(var(--text-muted));
}
.hatena-module-title a {
  color: inherit;
}
.hatena-module-title a:hover {
  color: rgb(var(--accent));
  text-decoration: none;
}

.hatena-module-body a,
.hatena-urllist li a {
  margin: 0 0.125rem;
  color: rgb(var(--accent));
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.25rem;
}

.hatena-module-body a:hover,
.hatena-urllist li a:hover {
  color: rgb(var(--accent));
  opacity: 0.5;
  text-decoration: underline;
  text-decoration-style: dashed;
}

.hatena-module-body a:has(img) {
  margin: 0;
  text-decoration: none;
}

.hatena-urllist li {
  padding: 0.375rem 0;
}
.hatena-urllist .urllist-category-link {
  display: inline-block;
  margin: 0.25rem 0 0;
  padding: 0 0.625rem;
  background-color: rgb(var(--bg));
  border: 1px solid rgb(var(--border));
  border-radius: 2rem;
  font-size: 0.75rem;
  color: rgb(var(--text-muted));
  text-decoration: none;
}
.hatena-urllist .urllist-date-link a {
  font-variant-numeric: tabular-nums;
}
.hatena-urllist .urllist-entry-body {
  margin-top: 0.25rem;
}

.recent-entries-entry-image {
  border-radius: 0.375rem;
}

.hatena-module-profile .profile-icon {
  border-radius: 0.5rem;
}

.hatena-module-search-box .search-form {
  background-color: rgb(var(--bg));
  border: 1px solid rgb(var(--border));
  border-radius: 0.625rem;
  transition: border-color 0.2s;
}
.hatena-module-search-box .search-form:focus-within {
  border-color: rgb(var(--accent));
}
.hatena-module-search-box .search-module-input {
  padding: 0.5rem 0.625rem;
  height: auto;
}
.hatena-module-search-box .search-module-button {
  margin-right: 0.25rem;
}

.archive-entries {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.archive-entry {
  display: flow-root;
  margin: 0;
  padding: 1.25rem;
  background-color: rgb(var(--surface));
  border-radius: 0.75rem;
  line-height: 1.75;
  transition: background-color 0.2s;
}
.archive-entry:hover {
  background-color: rgb(var(--surface-hover));
}
.archive-entry .date {
  position: static;
  margin-bottom: 0.25rem;
}
.archive-entry .entry-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.archive-entry .entry-title .entry-title-link {
  padding: 0;
  background: none;
  color: rgb(var(--text));
}
.archive-entry .entry-title .entry-title-link:hover {
  background: none;
  color: rgb(var(--accent));
}
.archive-entry .categories {
  margin: 0 0 0.5rem;
}
.archive-entry .categories a {
  background-color: rgb(var(--bg));
}
.archive-entry .entry-thumb-link {
  float: left;
  margin: 0 1rem 0.5rem 0;
}
.archive-entry .entry-thumb {
  border-radius: 0.5rem;
}
.archive-entry .entry-description {
  margin: 0;
  font-size: 0.875rem;
  color: rgb(var(--text));
}

.archive-header-category {
  text-align: left;
  margin-bottom: 1rem;
}

.page-about .entry-content dt {
  border-bottom: 1px solid rgb(var(--border));
}

#footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(var(--text-muted)/0.25);
  color: rgb(var(--text-muted));
  font-size: 0.875rem;
}
#footer a {
  color: rgb(var(--text-muted));
}
#footer a:hover {
  color: rgb(var(--accent));
}

#bottom-editarea {
  margin-top: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}