:root {
  --dark: #1c1c1c;
  --surface: #f5f5f5;
  --white: #ffffff;
  --text: #242424;
  --muted: #919191;
  --border: #c7c7c7;
  --link: #006fe8;
  --brand: #ffd700;
  --article-width: 900px;
  --index-width: 1200px;
  --sidebar-width: 280px;
  --page-gutter: 20px;
  --font: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ステージングプレビューでも window スクロールにする（iPhoneの端タップで先頭へ戻る / Colorbox） */
html.is-design-staging {
  display: block !important;
  height: auto !important;
  width: 100% !important;
  overflow: visible !important;
}

body.is-design-staging {
  position: static !important;
  overflow: visible !important;
  height: auto !important;
}

.staging-banner-container {
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font);
}

#container {
  overflow-x: clip;
  max-width: 100%;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

#globalheader-container,
#box1,
.custom-header-image { display: none !important; }

#container,
#container-inner,
#content,
#wrapper,
#main,
#main-inner,
article.entry,
.entry-inner,
.archive-entries,
.archive-entry {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  overflow-x: clip;
  box-sizing: border-box;
}

.blog-controlls { display: none; }

.hero-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin: 0 0 32px;
}

.hero-header-link {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: 42px;
}

.hero-header-image {
  display: block;
  width: auto;
  height: 42px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.hero-header-row .blog-controlls-subscribe-btn {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  max-width: 140px;
  min-height: 32px;
  height: auto;
  margin-left: 0;
  padding: 4px 10px;
  overflow: hidden;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  box-sizing: border-box;
}

.hero-header-row .blog-controlls-subscribe-btn * {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* =========================================================
   記事ページ
   ========================================================= */

body.page-entry #blog-title,
body.page-entry #top-box,
body.page-entry #box2 { display: none; }

.article-hero {
  width: 100% !important;
  color: var(--white);
  background: var(--dark);
}

.article-hero-inner {
  width: min(var(--article-width), calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0;
  box-sizing: border-box;
}

.article-hero .entry-header {
  position: static;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

.article-hero .entry-header::before {
  content: "";
  order: 0;
  display: block;
  width: 92px;
  height: 2px;
  margin: 0 0 32px;
  background: var(--brand);
}

.article-hero .entry-title {
  order: 1;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.article-hero .entry-title a,
.article-hero .entry-title a:visited {
  color: var(--white);
  font-size: 42px;
  font-weight: 600;
  line-height: 56px;
  text-decoration: none;
}

.article-hero .hero-tags { order: 2; margin: 0 0 16px; padding: 0; }
.article-hero .entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent;
}

.article-hero .entry-tag,
.article-hero .entry-tag-link,
.article-hero .entry-tag-link:visited,
.article-hero .entry-tag-icon,
.article-hero .entry-tag-label {
  display: inline;
  margin: 0;
  padding: 0 !important;
  color: var(--brand) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  text-decoration: none;
}

.article-hero .entry-date {
  order: 3;
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 21px;
}

.article-hero .entry-date a,
.article-hero .entry-date span,
.article-hero .entry-date time { color: var(--white); }

.hero-meta {
  order: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.hero-meta-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.hero-author,
.hero-author:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}

.article-hero .hero-star,
.article-hero .hatena-star-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  min-height: 20px;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: var(--white);
}

.article-hero .hero-star a,
.article-hero .hatena-star-container a {
  color: var(--white);
}

.article-hero .hero-star img,
.article-hero .hatena-star-container img {
  width: 20px;
  height: 20px;
  margin: 0 4px 0 0;
  border-radius: 50%;
  vertical-align: middle;
}

.hero-author-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.article-hero .hero-share,
.article-hero .social-buttons,
body.page-entry .entry-footer > .social-buttons {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  overflow: visible;
}

.article-hero .social-button-item,
body.page-entry .entry-footer .social-button-item {
  position: static;
  float: none;
  display: flex;
  align-items: flex-start;
  min-width: 20px;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.article-hero .social-button-item iframe,
.article-hero .social-button-item img,
body.page-entry .entry-footer .social-button-item iframe,
body.page-entry .entry-footer .social-button-item img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
}

body.page-entry #content { background: var(--surface); }

body.page-entry article.entry {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body.page-entry .entry-content,
body.page-entry .entry-footer {
  width: min(var(--article-width), calc(100% - 40px));
  margin: 0 auto;
  color: var(--text);
  box-sizing: border-box;
}

body.page-entry .entry-content {
  padding: 48px 0 0;
  font-size: 16px;
  line-height: 24px;
}

body.page-entry .entry-footer { padding: 0 0 48px; }

body.page-entry .entry-content h2 {
  margin: 40px 0 16px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
}

body.page-entry .entry-content h2:first-child { margin-top: 0; }

body.page-entry .entry-content h3 {
  margin: 24px 0 16px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

body.page-entry .entry-content p { margin: 0 0 16px; }
body.page-entry .entry-content a { color: var(--link); text-decoration: underline; }

body.page-entry .entry-content ul,
body.page-entry .entry-content ol,
body.page-entry .entry-content li {
  line-height: 28px;
}

body.page-entry .entry-content code {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

body.page-entry .entry-content pre:not(.mermaid),
body.page-entry .entry-content pre:not(.mermaid) code,
body.page-entry .entry-content pre.code:not(.mermaid) {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

body.page-entry .entry-content pre code {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0;
}

body.page-entry .entry-content img,
body.page-entry .entry-content a img {
  display: block;
  max-width: 80%;
  height: auto;
  margin: 24px auto;
}

body.page-entry .entry-content .embed-wrapper,
body.page-entry .entry-content .embed-wrapper-inner,
body.page-entry .entry-content iframe.embed-card,
body.page-entry .entry-content iframe.embed-blogcard,
body.page-entry .entry-content iframe.embed-webcard,
body.page-entry .entry-content .hatenablogcard {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 24px 0;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  box-sizing: border-box;
}

body.page-entry .entry-content iframe.embed-card,
body.page-entry .entry-content iframe.embed-blogcard,
body.page-entry .entry-content iframe.embed-webcard {
  height: 155px;
}

body.page-entry .entry-content blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 16px;
  color: var(--text);
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid var(--border) !important;
  border-radius: 0;
  box-shadow: none !important;
  font-style: normal;
}

body.page-entry .entry-content blockquote::before,
body.page-entry .entry-content blockquote::after {
  content: none !important;
  display: none !important;
}

body.page-entry .entry-content pre.code:not(.mermaid),
body.page-entry .entry-content pre:not(.mermaid) {
  margin: 24px 0;
  padding: 16px;
  overflow-x: auto;
  color: #1f2328;
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-shadow: none;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px;
  line-height: 1.45;
  -webkit-overflow-scrolling: touch;
}

body.page-entry .entry-content pre.code.mermaid {
  margin: 24px 0;
  padding: 16px;
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: none;
}

body.page-entry .entry-content pre:not(.mermaid) .synComment { color: #59636e; }
body.page-entry .entry-content pre:not(.mermaid) .synStatement { color: #cf222e; }
body.page-entry .entry-content pre:not(.mermaid) .synType { color: #953800; }
body.page-entry .entry-content pre:not(.mermaid) .synIdentifier { color: #0550ae; }
body.page-entry .entry-content pre:not(.mermaid) .synConstant { color: #0a3069; }
body.page-entry .entry-content pre:not(.mermaid) .synSpecial { color: #1f2328; }
body.page-entry .entry-content pre:not(.mermaid) .synPreProc { color: #cf222e; }

body.page-entry .entry-content table {
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  background: var(--white);
}

body.page-entry .entry-content th,
body.page-entry .entry-content td {
  border: 1px solid var(--border) !important;
  padding: 8px 12px;
  color: var(--text);
  background: var(--white);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

body.page-entry .entry-content th {
  background: #f6f8fa;
  font-weight: 600;
}

body.page-entry .entry-footer-section { display: none; }

body.page-entry .entry-footer > .social-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  min-height: 32px;
  overflow: visible;
}

body.page-entry .entry-footer > .hatena-star-container {
  display: none;
}

.entry-footer-html { margin: 0; }

.footer-mascot {
  padding: 80px 0 56px;
  text-align: center;
}

.footer-mascot img {
  display: inline-block;
  width: 57px;
  height: 62px;
  margin: 0;
}

.footer-recruit { margin: 0 0 32px; }

.footer-section-title,
.footer-article-heading,
body.page-entry .hatena-module-related-entries .hatena-module-title,
body.page-entry .hatena-module-recent-entries .hatena-module-title,
body.page-entry .hatena-module-related-entries .hatena-module-title a,
body.page-entry .hatena-module-recent-entries .hatena-module-title a {
  margin: 0 0 24px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.footer-recruit-text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 24px;
}

.footer-recruit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-btn,
.footer-btn:visited,
.sidebar-recruit-button,
.sidebar-recruit-button:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--brand);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 300ms ease, color 300ms ease;
}

.footer-btn,
.footer-btn:visited {
  flex: 1 1 360px;
  min-height: 56px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 24px;
}

.footer-btn:hover,
.footer-btn:hover:visited,
.sidebar-recruit-button:hover,
.sidebar-recruit-button:hover:visited {
  color: var(--text) !important;
  background: #e6c200;
  text-decoration: none;
}

.footer-article-section,
body.page-entry .hatena-module-related-entries,
body.page-entry .hatena-module-recent-entries {
  width: 100%;
  margin: 32px 0 0;
  padding: 0;
  background: transparent;
}

.footer-article-list,
body.page-entry .related-entries,
body.page-entry .recent-entries {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-article-row,
.footer-article-row:visited,
body.page-entry .related-entries-item,
body.page-entry .recent-entries-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 70px;
  margin: 0 0 16px;
  padding: 0 0 16px;
  color: var(--text);
  background: transparent;
  border: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.footer-article-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.footer-article-row:last-child,
body.page-entry .related-entries-item:last-child,
body.page-entry .recent-entries-item:last-child { margin-bottom: 0; }

.footer-article-date,
body.page-entry .related-entries-date-link,
body.page-entry .recent-entries-date-link,
body.page-entry .related-entries-date-link a,
body.page-entry .recent-entries-date-link a,
body.page-entry .related-entries-date-link time,
body.page-entry .recent-entries-date-link time {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 21px;
}

.footer-article-date[hidden],
.footer-article-date:empty { display: none; margin: 0; }

.footer-article-title,
body.page-entry .related-entries-title-link,
body.page-entry .recent-entries-title-link {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  transition: color 300ms ease;
}

.footer-article-row:hover { text-decoration: none; }
.footer-article-row:hover .footer-article-title,
body.page-entry .related-entries-item:hover .related-entries-title-link,
body.page-entry .recent-entries-item:hover .recent-entries-title-link {
  color: var(--brand) !important;
  text-decoration: none;
}

body.page-entry .related-entries-entry-body { display: none !important; }

body.page-entry #footer {
  width: 100% !important;
  margin: 0;
  padding: 48px 0 32px;
  color: var(--white);
  background: var(--dark);
}

body.page-entry #footer-inner {
  display: flex;
  flex-direction: column;
  width: min(var(--article-width), calc(100% - 40px));
  margin: 0 auto;
}

.site-footer-modules {
  width: 100%;
}

.site-footer-modules .hatena-module {
  margin: 0 0 32px;
  background: transparent;
}

.site-footer-modules .hatena-module-title,
.site-footer-modules .hatena-module-title a {
  margin: 0 0 16px;
  color: var(--white);
  background: transparent;
  border: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

.site-footer-modules .search-form {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  margin: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-sizing: border-box;
}

.site-footer-modules .search-module-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 8px 0 16px;
  color: var(--text);
  background: var(--white);
  border: 0;
  font-size: 14px;
  line-height: 42px;
  box-sizing: border-box;
}

.site-footer-modules .search-module-button {
  width: 44px;
  height: 42px;
  margin: 0;
  padding: 0;
  color: transparent;
  text-indent: -999px;
  overflow: hidden;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23242424' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M12.5 12.5L16 16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  border: 0;
}

.site-footer-modules .hatena-urllist { margin: 0; padding: 0; list-style: none; }
.site-footer-modules a,
.site-footer-modules .pager a { color: var(--white); }

.site-footer-modules .hatena-urllist a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  line-height: 21px;
}

.site-footer-modules .pager {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 24px;
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

.site-footer-modules .pager .pager-prev,
.site-footer-modules .pager .pager-next {
  display: block !important;
  float: none !important;
  flex: 1 1 0 !important;
  width: 50% !important;
  max-width: calc(50% - 12px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer-modules .pager .pager-next { text-align: right; }

.site-footer-modules .pager a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 4px;
  width: 100% !important;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  text-decoration: none;
  text-overflow: unset;
  white-space: normal !important;
}

.site-footer-modules .pager .pager-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  word-break: break-word;
}

.site-footer-modules .pager .pager-arrow {
  flex: 0 0 auto;
  white-space: nowrap;
}

.site-footer-modules .pager .pager-next a { justify-content: flex-end; }

body.page-entry #footer .guest-footer { display: none; }

body.page-entry #footer .footer-address,
body.page-entry #footer .services {
  display: block;
  margin: 24px 0 0;
  color: var(--white);
  text-align: center;
}

body.page-entry #footer .footer-address a,
body.page-entry #footer .services a { color: var(--white); }

/* =========================================================
   一覧 / 日付 / 検索
   ========================================================= */

body.page-index #blog-title,
body.page-archive #blog-title {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 196px;
  margin: 0;
  background: var(--dark);
}

body.page-index #blog-title-inner,
body.page-index #content-inner,
body.page-index #footer-inner,
body.page-archive #blog-title-inner,
body.page-archive #content-inner,
body.page-archive #footer-inner {
  width: min(var(--index-width), 100%) !important;
  max-width: var(--index-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
  box-sizing: border-box;
}

body.page-index #blog-title-inner,
body.page-archive #blog-title-inner {
  display: flex;
  align-items: center;
  min-height: 196px;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  background: transparent;
  background-image: none;
}

body.page-index #blog-title-content,
body.page-archive #blog-title-content { display: none; }

body.page-index .hero-header-row,
body.page-index .hero-header-link,
body.page-archive .hero-header-row,
body.page-archive .hero-header-link {
  max-width: 100%;
  min-width: 0;
}

body.page-index .hero-header-row,
body.page-archive .hero-header-row {
  min-height: 100px;
  margin: 0;
}

body.page-index .hero-header-link,
body.page-archive .hero-header-link { height: 100px; }

body.page-index .hero-header-image,
body.page-archive .hero-header-image {
  width: auto;
  max-width: 100% !important;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

body.page-index .date,
body.page-index .entry-date,
body.page-index .archive-date,
body.page-archive .date,
body.page-archive .entry-date,
body.page-archive .archive-date {
  position: static !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
}

body.page-index #content,
body.page-archive #content { background: var(--surface); }

body.page-index #content-inner,
body.page-archive #content-inner {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-top: 40px !important;
  padding-bottom: 64px !important;
}

body.page-index #wrapper,
body.page-index #main,
body.page-index #main-inner,
body.page-index article.entry,
body.page-index .entry-inner,
body.page-index .entry-header,
body.page-index .archive-entries,
body.page-index .archive-entry,
body.page-index .archive-entry-main,
body.page-index .archive-entry-header,
body.page-archive #wrapper,
body.page-archive #main,
body.page-archive #main-inner,
body.page-archive .archive-entries,
body.page-archive .archive-entry,
body.page-archive .archive-entry-main,
body.page-archive .archive-entry-header {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  overflow-x: clip;
  box-sizing: border-box;
}

body.page-index #wrapper,
body.page-index #main,
body.page-index #main-inner,
body.page-archive #wrapper,
body.page-archive #main,
body.page-archive #main-inner {
  flex: 1;
  width: auto !important;
}

body.page-index #box2,
body.page-archive #box2 {
  display: block;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  background: transparent;
  border-radius: 0;
}

body.page-index article.entry,
body.page-index .archive-entry,
body.page-archive .archive-entry {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "thumb meta"
    "stars stars";
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
  margin: 0;
  padding: 20px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body.page-index .archive-entry:not(:has(> a.entry-thumb-link, > .list-thumb)),
body.page-archive .archive-entry:not(:has(> a.entry-thumb-link, > .list-thumb)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "meta"
    "stars";
}

body.page-index article.entry .entry-inner,
body.page-index .archive-entry-main,
body.page-archive .archive-entry-main {
  display: contents;
}

body.page-index article.entry:first-child,
body.page-index .archive-entry:first-child,
body.page-archive .archive-entry:first-child { padding-top: 0; }

body.page-index .entry-content,
body.page-index .entry-footer { display: none; }

body.page-index .archive-entry .social-buttons,
body.page-index .archive-entry .bookmark-widget-counter,
body.page-archive .archive-entry .social-buttons,
body.page-archive .archive-entry .bookmark-widget-counter {
  display: none !important;
}

body.page-index .archive-excerpt-link,
body.page-index .archive-excerpt-link:visited,
body.page-archive .archive-excerpt-link,
body.page-archive .archive-excerpt-link:visited {
  display: block;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

body.page-index .archive-excerpt-link:hover,
body.page-archive .archive-excerpt-link:hover {
  text-decoration: none;
}

@media (min-width: 641px) {
  body.page-index .archive-entry,
  body.page-archive .archive-entry {
    row-gap: 10px;
  }

  body.page-index .archive-entry-header,
  body.page-archive .archive-entry-header {
    gap: 6px;
  }
}

body.page-index .entry-header,
body.page-index .archive-entry-header,
body.page-archive .archive-entry-header {
  grid-area: header;
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.page-index .archive-entry-body,
body.page-archive .archive-entry-body {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.page-index .archive-entry-meta,
body.page-archive .archive-entry-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

body.page-index .archive-entry-tags-wrapper,
body.page-archive .archive-entry-tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.page-index .archive-entry-tags-wrapper:not(:has(.archive-entry-tag)),
body.page-archive .archive-entry-tags-wrapper:not(:has(.archive-entry-tag)) {
  display: none;
}

body.page-index .archive-entry-tags,
body.page-archive .archive-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.page-index .archive-entry-tag,
body.page-index .archive-entry-tag-link,
body.page-index .archive-entry-tag-icon,
body.page-index .archive-entry-tag-label,
body.page-archive .archive-entry-tag,
body.page-archive .archive-entry-tag-link,
body.page-archive .archive-entry-tag-icon,
body.page-archive .archive-entry-tag-label {
  display: inline;
  margin: 0;
  padding: 0 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
}

body.page-index .entry-date,
body.page-index .archive-date,
body.page-archive .archive-date {
  order: 1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 13px;
  line-height: 18px;
}

body.page-index .entry-date a,
body.page-index .entry-date span,
body.page-index .archive-date a,
body.page-index .archive-date span,
body.page-archive .archive-date a,
body.page-archive .archive-date span { color: var(--muted); }

body.page-index .entry-title,
body.page-index .entry-title a,
body.page-index .entry-title-link,
body.page-archive .entry-title,
body.page-archive .entry-title a,
body.page-archive .entry-title-link {
  display: block !important;
  order: 2;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  color: var(--text);
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35 !important;
  text-decoration: none;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  transition: color 300ms ease;
}

body.page-index article.entry:hover .entry-title,
body.page-index article.entry:hover .entry-title a,
body.page-index article.entry:hover .entry-title-link,
body.page-index .archive-entry:hover .entry-title,
body.page-index .archive-entry:hover .entry-title a,
body.page-index .archive-entry:hover .entry-title-link,
body.page-archive .archive-entry:hover .entry-title,
body.page-archive .archive-entry:hover .entry-title a,
body.page-archive .archive-entry:hover .entry-title-link {
  color: var(--brand) !important;
  text-decoration: none;
}

body.page-index .list-excerpt,
body.page-index .entry-description,
body.page-archive .entry-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 22px;
  white-space: normal;
}

body.page-index .list-author,
body.page-index .list-author:visited,
body.page-archive .list-author,
body.page-archive .list-author:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
  text-decoration: none;
}

body.page-index .list-author-icon,
body.page-archive .list-author-icon {
  width: 20px;
  height: 20px;
  object-fit: cover;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
}

body.page-index .list-star,
body.page-index .entry-header .hatena-star-container,
body.page-index .archive-entry > .hatena-star-container,
body.page-index .archive-entry > .star-container,
body.page-archive .list-star,
body.page-archive .archive-entry > .hatena-star-container,
body.page-archive .archive-entry > .star-container {
  grid-area: stars;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100% !important;
  max-width: none !important;
  min-height: 16px;
  margin: 0;
  padding: 0;
  overflow: visible;
  transform: scale(0.8);
  transform-origin: left center;
}

body.page-index .list-star .hatena-star-container,
body.page-index .list-star .hatena-star-star-container,
body.page-archive .list-star .hatena-star-container,
body.page-archive .list-star .hatena-star-star-container {
  display: flex !important;
  flex-wrap: wrap;
  width: auto !important;
  max-width: 100% !important;
}

body.page-index .list-star img,
body.page-index .entry-header .hatena-star-container img,
body.page-archive .list-star img {
  width: 16px;
  height: 16px;
  margin: 0 4px 0 0;
  border-radius: 50%;
  vertical-align: middle;
}

.list-thumb,
a.list-thumb,
a.list-thumb:visited,
body.page-index a.entry-thumb-link,
body.page-archive a.entry-thumb-link,
body.page-entry .related-entries-image-link,
body.page-entry .urllist-image-link {
  display: block;
  float: none !important;
  width: 200px !important;
  margin: 0 !important;
  overflow: hidden;
  background: #ececec;
  text-decoration: none;
}

body.page-index a.entry-thumb-link,
body.page-index .list-thumb,
body.page-archive a.entry-thumb-link,
body.page-archive .list-thumb {
  grid-area: thumb;
  cursor: pointer;
}

.footer-article-row .list-thumb,
.footer-article-row a.list-thumb {
  grid-area: auto;
  flex-basis: 160px;
  width: 160px !important;
}

.list-thumb img,
a.list-thumb img,
body.page-index .entry-thumb,
body.page-archive .entry-thumb,
body.page-index a.entry-thumb-link img,
body.page-archive a.entry-thumb-link img,
body.page-entry .related-entries-image,
body.page-entry .related-entries-image-link img,
body.page-entry .urllist-image img {
  display: block;
  width: 100% !important;
  height: 105px !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
  object-position: center;
  border: 0;
}

.footer-article-row .list-thumb img {
  height: 84px !important;
}

body.page-index a.entry-thumb-link,
body.page-archive a.entry-thumb-link {
  grid-area: thumb;
}

body.page-archive .search-result {
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
  background: transparent;
  border: 0;
}

body.page-archive .archive-heading {
  margin: 0 0 16px;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}

body.page-archive .search-result-form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 480px;
  height: 44px;
  margin: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-sizing: border-box;
}

body.page-archive .search-result-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 8px 0 16px;
  color: var(--text);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 14px;
  line-height: 42px;
  outline: none;
}

body.page-archive .search-result-button {
  flex: 0 0 44px;
  width: 44px;
  height: 42px;
  margin: 0;
  padding: 0;
  color: transparent;
  text-indent: -999px;
  overflow: hidden;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23242424' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M12.5 12.5L16 16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  border: 0;
  cursor: pointer;
}

body.page-index .pager,
body.page-archive .pager {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
  padding: 8px 0 0;
  background: transparent;
  border: 0;
}

body.page-index .pager a,
body.page-archive .pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  text-decoration: none;
}

body.page-index .pager a:hover,
body.page-archive .pager a:hover {
  color: var(--text);
  background: #ececec;
  text-decoration: none;
}

body.page-index #box2 .hatena-module,
body.page-archive #box2 .hatena-module { margin: 0 0 32px; }

body.page-index #box2 .hatena-module-title,
body.page-index #box2 .hatena-module-title a,
body.page-archive #box2 .hatena-module-title,
body.page-archive #box2 .hatena-module-title a {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.sidebar-recruit-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 22px;
}

.sidebar-recruit-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-recruit-button,
.sidebar-recruit-button:visited {
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 21px;
}

body.page-index #box2 .hatena-urllist,
body.page-archive #box2 .hatena-urllist {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-index #box2 .hatena-urllist li,
body.page-archive #box2 .hatena-urllist li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

body.page-index #box2 .hatena-urllist a,
body.page-archive #box2 .hatena-urllist a { color: var(--text); }

body.page-index #box2 .search-form,
body.page-archive #box2 .search-form {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  margin: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-sizing: border-box;
}

body.page-index #box2 .search-module-input,
body.page-archive #box2 .search-module-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 8px 0 16px;
  color: var(--text);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 14px;
  line-height: 42px;
  outline: none;
}

body.page-index #box2 .search-module-input::placeholder,
body.page-archive #box2 .search-module-input::placeholder { color: var(--muted); }

body.page-index #box2 .search-module-button,
body.page-archive #box2 .search-module-button {
  flex: 0 0 44px;
  width: 44px;
  height: 42px;
  margin: 0;
  padding: 0;
  color: transparent;
  text-indent: -999px;
  overflow: hidden;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23242424' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M12.5 12.5L16 16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  border: 0;
  cursor: pointer;
}

body.page-index #footer,
body.page-archive #footer {
  width: 100%;
  padding: 32px 0;
  color: var(--white);
  background: var(--dark);
  text-align: center;
}

body.page-index #footer-inner,
body.page-archive #footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.page-index #footer a,
body.page-archive #footer a { color: var(--white); }

@media (max-width: 1100px) {
  body.page-index #content-inner,
  body.page-archive #content-inner { flex-direction: column; }
  body.page-index #box2,
  body.page-archive #box2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 640px) {
  .article-hero-inner { padding: 24px 0 20px; }
  body.page-entry .hero-header-row { margin-bottom: 16px; }
  .article-hero .entry-header::before { margin: 0 0 16px; }
  .article-hero .entry-title { margin: 0 0 12px; }
  .article-hero .entry-title,
  .article-hero .entry-title a,
  .article-hero .entry-title a:visited {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .article-hero .hero-tags { margin: 0 0 8px; }
  .article-hero .entry-date { margin: 0 0 12px; }
  .hero-meta { flex-direction: column; gap: 12px; }
  .hero-header-row { flex-wrap: wrap; }
  .hero-header-row .blog-controlls-subscribe-btn { max-width: 100%; }
  body.page-entry .entry-content { padding-top: 24px; }

  .footer-mascot { padding: 32px 0 24px; }
  .footer-btn { width: 100%; flex-basis: auto; }
  .footer-article-title { white-space: normal; overflow: visible; }

  body.page-index article.entry,
  body.page-index .archive-entry,
  body.page-archive .archive-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "thumb"
      "meta"
      "stars";
  }

  .footer-article-row {
    flex-direction: column;
  }

  .list-thumb,
  a.list-thumb,
  body.page-index a.entry-thumb-link,
  body.page-archive a.entry-thumb-link,
  .footer-article-row .list-thumb {
    width: 100% !important;
    flex-basis: auto;
  }

  .list-thumb img,
  body.page-index .entry-thumb,
  body.page-archive .entry-thumb,
  .footer-article-row .list-thumb img {
    height: auto !important;
    aspect-ratio: 1200 / 630;
  }

  .site-footer-modules .pager {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .site-footer-modules .pager .pager-prev,
  .site-footer-modules .pager .pager-next {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-footer-modules .pager .pager-next,
  .site-footer-modules .pager .pager-next a {
    justify-content: flex-start;
    text-align: left;
  }

  .site-footer-modules .pager a {
    padding: 2px 0;
  }

  .site-footer-modules .pager .pager-title {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }

  body.page-entry #container,
  body.page-entry #container-inner,
  body.page-entry #content,
  body.page-entry #content-inner,
  body.page-entry #wrapper,
  body.page-entry #main,
  body.page-entry #main-inner,
  body.page-entry article.entry,
  body.page-entry .entry-inner,
  body.page-entry .article-hero,
  body.page-entry .article-hero-inner,
  body.page-entry .entry-content,
  body.page-entry .entry-footer,
  body.page-entry #footer,
  body.page-entry #footer-inner {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip;
    box-sizing: border-box;
  }

  body.page-entry .entry-content img,
  body.page-entry .entry-content a img,
  body.page-entry .entry-content iframe,
  body.page-entry .entry-content video,
  body.page-entry .entry-content svg {
    max-width: 100% !important;
    height: auto;
  }

  body.page-entry .entry-content pre,
  body.page-entry .entry-content table,
  body.page-entry .entry-content .embed-wrapper,
  body.page-entry .entry-content .embed-wrapper-inner {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.page-entry .entry-content th,
  body.page-entry .entry-content td {
    word-break: break-word;
  }

  body.page-index #blog-title,
  body.page-archive #blog-title { min-height: 144px; }
  body.page-index #blog-title-inner,
  body.page-archive #blog-title-inner {
    min-height: 144px;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  body.page-index .hero-header-row,
  body.page-index .hero-header-link,
  body.page-archive .hero-header-row,
  body.page-archive .hero-header-link { min-height: 64px; height: auto; }
  body.page-index .hero-header-image,
  body.page-archive .hero-header-image { max-height: 64px; }
}