@charset "UTF-8";
/*
  Theme: sakubun (beta)
  Author: akawakami
  Responsive: yes
  Description:
    A clean and simple blog theme designed to prioritize immersion in the text.
*/

/* ========================================
   CSS Variables
   ======================================== */
:root {
  /* Colors */
  --color-text: #333;
  --color-border: #ddd;
  --color-bg: #fff;
  --color-bg-alt: #f6f6f6;
  --color-bg-blockquote: #f7f7f7;

  /* Typography */
  --font-family-base:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Yu Gothic UI',
    'Yu Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
    'Meiryo', sans-serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, 'Cascadia Code', 'JetBrains Mono', 'Menlo',
    'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', Courier, monospace;
  --line-height-base: 1.65;
  --line-height-heading: 1.6;
  --line-height-content: 1.8;
  --size-text-10: 0.625rem;
  --size-text-11: 0.6875rem;
  --size-text-12: 0.75rem;
  --size-text-13: 0.8125rem;
  --size-text-14: 0.875rem;
  --size-text-15: 0.9375rem;
  --size-text-16: 1rem;
  --size-text-18: 1.125rem;
  --size-text-20: 1.25rem;
  --size-text-22: 1.375rem;
  --size-text-28: 1.75rem;

  /* Letter Spacing */
  --letter-spacing-text: 0.05em;
  --letter-spacing-heading: 0.1em;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 6rem;

  /* Layout */
  --contents-maxwidth: calc(40ic + (var(--spacing-lg) * 2));

  /* Border */
  --border-radius: 8px;
}

/* ========================================
   Font Faces
   ======================================== */
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W0);
  font-weight: 100;
}
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W1);
  font-weight: 200;
}
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W2);
  font-weight: 300;
}
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W3);
  font-weight: 400;
}
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W4);
  font-weight: 500;
}
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W5);
  font-weight: 600;
}
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W6);
  font-weight: 700;
}
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W7);
  font-weight: 800;
}
@font-face {
  font-family: 'Hiragino Sans';
  src: local(HiraginoSans-W8);
  font-weight: 900;
}
@font-face {
  font-family: 'Hiragino Sans W9';
  src: local(HiraginoSans-W9);
  font-weight: 900;
}

/* ========================================
   Normalize
   ======================================== */
html {
  line-height: 1.15;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

hr {
  height: 0;
  overflow: visible;
}

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

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  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'] {
  appearance: button;
}

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type='checkbox'],
[type='radio'] {
  padding: 0;
}

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

[hidden] {
  display: none;
}

/* ========================================
   Base Styles
   ======================================== */
body,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
dd,
figure {
  font-size: inherit;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

p {
  margin: var(--spacing-md) 0;
}

li {
  list-style: none;
}

html {
  font-family: var(--font-family-base);
}

body {
  font-size: var(--size-text-14);
  color: var(--color-text);

  @media (max-width: 768px) {
    font-size: var(--size-text-12);
  }
}

a {
  color: var(--color-text);
}

h1,
h2 {
  & a {
    text-decoration: none;
  }
}

footer {
  text-align: center;
}

@layer overrides;

/* ========================================
   Layout
   ======================================== */
#container {
  position: relative;
}

#footer {
  padding: var(--spacing-md) 0;
  background-color: #eee;

  & .copyright {
    font-size: var(--size-text-12);
    letter-spacing: var(--letter-spacing-text);
    margin: 0;
    text-align: center;
  }
}

.profile-icon,
.hatena-id-icon {
  width: 24px !important;
  height: auto !important;
  vertical-align: middle;
  border-radius: 50%;
}

#box2 {
  background-color: var(--color-bg-alt);
}

#box2-inner {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);

  & > *:not(:has(*)) {
    display: none;
  }

  @media (max-width: 768px) {
    padding: var(--spacing-lg);
    gap: var(--spacing-lg);
  }
}

/* ========================================
   Typography
   ======================================== */

h1 {
  font-size: var(--size-text-22);
  font-weight: bold;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-text);
  margin: var(--spacing-xl) 0 var(--spacing-md) 0;

  @media (max-width: 768px) {
    font-size: var(--size-text-18);
  }
}

h2 {
  font-size: var(--size-text-20);
  font-weight: bold;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-text);
  margin: var(--spacing-xl) 0 var(--spacing-md) 0;

  @media (max-width: 768px) {
    font-size: var(--size-text-16);
  }
}

h3 {
  font-size: var(--size-text-18);
  font-weight: bold;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-text);
  margin: var(--spacing-lg) 0 var(--spacing-md) 0;

  @media (max-width: 768px) {
    font-size: var(--size-text-14);
  }
}

h4 {
  font-size: var(--size-text-15);
  font-weight: bold;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-text);
  margin: var(--spacing-lg) 0 var(--spacing-md) 0;

  @media (max-width: 768px) {
    font-size: var(--size-text-14);
  }
}

h5 {
  font-size: var(--size-text-14);
  font-weight: bold;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-text);
  margin: var(--spacing-lg) 0 var(--spacing-md) 0;
}

h6 {
  font-size: var(--size-text-14);
  font-weight: normal;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-text);
  margin: var(--spacing-lg) 0 var(--spacing-md) 0;
}

p,
ul,
dl,
ol {
  font-size: var(--size-text-15);
  font-weight: normal;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-text);

  @media (max-width: 768px) {
    font-size: var(--size-text-14);
  }
}

blockquote {
  font-weight: inherit;
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-text);

  & p {
    font-size: var(--size-text-14);

    @media (max-width: 768px) {
      font-size: var(--size-text-13);
    }
  }
}

/* ========================================
   Common Styles
   ======================================== */

/* Category Label - 共通スタイル */
.page-archive .categories a,
.hatena-module-category .hatena-urllist li a,
.entry-categories a {
  font-size: var(--size-text-12);
  text-decoration: none;
  background-color: var(--color-bg);
  border: 1px solid var(--color-text);
  padding: 3px var(--spacing-sm);
  border-radius: var(--border-radius);
  user-select: none;
  white-space: nowrap;

  @media (max-width: 768px) {
    font-size: var(--size-text-11);
  }
}

.hyphen {
  display: none;
}

.date-year::after {
  content: '年';
}

.date-month::after {
  content: '月';
}

.date-day::after {
  content: '日';
}

section {
  margin: var(--spacing-xl) auto;
  padding: 0 var(--spacing-lg);
  width: 100%;
  max-width: var(--contents-maxwidth);
}

.breadcrumb {
  display: none;
}

/* ========================================
   Pager
   ======================================== */
.pager {
  width: 100%;
  max-width: var(--contents-maxwidth);
  margin: var(--spacing-xl) auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  justify-content: center;

  @media (max-width: 768px) {
    margin: var(--spacing-lg) auto;
  }
}

.pager-arrow {
  display: none;
}

.pager-prev,
.pager-next {
  display: flex;
  align-items: center;
  position: relative;
}

.pager-prev {
  margin-right: var(--spacing-lg);
  padding-left: 20px;

  &::before {
    content: '';
    width: var(--spacing-sm);
    height: var(--spacing-sm);
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color: var(--color-text);
    transform: rotate(-45deg);
    display: inline-block;
    position: absolute;
    left: 0;
  }
}

.pager-next {
  padding-right: 20px;

  &::after {
    content: '';
    width: var(--spacing-sm);
    height: var(--spacing-sm);
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: var(--color-text);
    transform: rotate(45deg);
    display: inline-block;
    position: absolute;
    right: 0;
  }
}

/* ========================================
   Search
   ======================================== */
.search-form,
.search-result-form {
  background-color: var(--color-bg);
  display: flex;
  align-items: stretch;

  &:has(input:focus) {
    outline: 3px solid var(--color-text);
  }
  & .search-module-input,
  & .search-result-input {
    font-size: var(--size-text-14);
    font-weight: normal;
    line-height: 1;
    letter-spacing: var(--letter-spacing-text);
    padding: var(--spacing-md);
    border: none;
    background-color: transparent;
    flex-grow: 1;
    appearance: none;
    outline: none;

    @media (max-width: 768px) {
      font-size: var(--size-text-13);
    }
  }

  & .search-module-button,
  & .search-result-button {
    font-size: var(--size-text-14);
    font-weight: normal;
    line-height: 1;
    letter-spacing: var(--letter-spacing-text);
    color: var(--color-bg);
    background-color: var(--color-text);
    padding: 0 var(--spacing-md);
    margin: 3px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    appearance: none;
    outline: none;

    @media (max-width: 768px) {
      font-size: var(--size-text-13);
    }
  }
}

.search-result {
  margin: 0 auto 80px;
  padding: 0 var(--spacing-lg);
  width: 100%;
  max-width: var(--contents-maxwidth);

  & + p {
    text-align: center;
    margin: 80px 0;
  }
}

.search-result-form {
  max-width: inherit;
  border: none;

  & .search-result-input {
    color: inherit;
    height: inherit;
    width: inherit;
  }

  & .search-result-button {
    position: inherit;
    text-indent: inherit;
    width: inherit;
    height: inherit;
    opacity: inherit;
    top: inherit;
    right: inherit;
    background-image: none;
  }
}

/* ========================================
   Blog Title
   ======================================== */
.page-index,
.page-archive,
.page-about {
  & #blog-title {
    text-align: center;
    display: block;
    margin: var(--spacing-xxl) auto var(--spacing-xl);
    padding: 0 var(--spacing-lg);

    @media (max-width: 768px) {
      margin: var(--spacing-xl) auto var(--spacing-lg);
    }
  }

  & #blog-title-content {
    & #title {
      font-size: var(--size-text-28);
      font-weight: bold;
      line-height: 2;
      letter-spacing: 0.25em;
      margin: 0;
      padding: 0 0 6px 0;
      display: inline;
      border-bottom: 3px solid var(--color-text);

      & a {
        color: var(--color-text);
        margin-right: -0.25em;
      }
    }

    & #blog-description {
      font-size: var(--size-text-15);
      font-weight: normal;
      line-height: var(--line-height-base);
      letter-spacing: var(--letter-spacing-text);
      font-variant-ligatures: none;
      font-feature-settings: 'pkna' 1;
      line-break: strict;
      overflow-wrap: anywhere;
      margin: var(--spacing-lg) 0;

      @media (max-width: 768px) {
        font-size: var(--size-text-14);
      }
    }
  }
}

/* トップページ */
.page-index {
  .entry {
    &::before {
      content: '＊';
      width: 100%;
      text-align: center;
      font-size: var(--size-text-22);
      font-weight: bold;
      display: block;
      margin: 1em auto;
    }
  }
  .entry-inner:first-child .entry-header {
    margin: var(--spacing-xl) auto;
  }
}

.page-archive,
.page-entry,
.page-about {
  & #bottom-editarea footer {
    margin: 0 auto;
    padding: 24px 0 var(--spacing-lg);
    background-color: var(--color-bg-alt);
  }
}

/* ========================================
   Archive Page
   ======================================== */
.page-archive {
  & #main-inner {
    margin-top: var(--spacing-xxl);
  }

  & .archive-heading {
    font-size: var(--size-text-22);
    font-weight: bold;
    line-height: var(--line-height-heading);
    text-align: center;
    letter-spacing: var(--letter-spacing-heading);
    max-width: 560px;
    margin: var(--spacing-xxl) auto var(--spacing-xl);
    padding: 0 var(--spacing-lg);

    @media (max-width: 768px) {
      font-size: var(--size-text-18);
      margin: var(--spacing-xl) auto var(--spacing-lg);
    }
  }

  & .archive-entry {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto 1fr auto;
    gap: var(--spacing-xs) var(--spacing-md);

    & .entry-thumb {
      width: 160px;
      height: auto;
      float: inherit;
      margin-right: initial;
      background-size: cover;
      aspect-ratio: 40 / 21;

      @media (max-width: 768px) {
        width: 80px;
        aspect-ratio: 1 / 1;
      }
    }
  }

  & .archive-entry-header {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  & .archive-entry-body {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  & .categories {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    grid-column: 1 / 2;
    grid-row: 3 / 4;

    & a {
      border: none;
      padding: 0;
      background-color: transparent;

      &::before {
        content: '[ ';
        display: inline;
      }
      &::after {
        content: ' ]';
        display: inline;
      }
    }
  }

  & .entry-thumb-link {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
  }

  & .social-buttons {
    display: none;
  }

  & .archive-date {
    font-weight: bold;
    margin-bottom: var(--spacing-sm);

    & a {
      text-decoration: none;
    }
  }

  & .entry-title {
    font-size: var(--size-text-18);
    font-weight: bold;
    line-height: var(--line-height-heading);
    text-align: left;

    @media (max-width: 768px) {
      font-size: var(--size-text-16);
    }
  }

  & .entry-description {
    font-size: var(--size-text-14);
    letter-spacing: var(--letter-spacing-text);
    margin: 0;
    overflow-wrap: break-word;
  }
}

.page-archive-category-name {
  & .entry-content {
    & h1 {
      font-size: var(--size-text-22);
      font-weight: bold;
      line-height: var(--line-height-heading);
      text-align: center;
      letter-spacing: var(--letter-spacing-heading);
      max-width: calc(var(--contents-maxwidth) - 80px);
      margin: 80px auto 56px;
      padding: 0 var(--spacing-lg);

      @media (max-width: 768px) {
        font-size: var(--size-text-18);
      }
    }

    & p {
      text-align: center;
      margin-bottom: 80px;
    }
  }
}

/* ========================================
   Entry Header Menu
   ======================================== */
.entry-header-menu {
  position: fixed;
  top: 50px;
  right: 20px;

  @media (max-width: 768px) {
    position: absolute;
  }

  & a {
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--color-text);
    border-radius: 16px;
  }
}

.globalheader-off {
  & .entry-header-menu {
    top: 24px;
  }
}

/* ========================================
   Static Page
   ======================================== */
.page-static_page {
  & .entry-header {
    margin: 80px auto;

    @media (max-width: 768px) {
      margin: 96px auto var(--spacing-xl);
    }
  }

  & .entry-title {
    text-align: center;
  }
}

/* ========================================
   About Page
   ======================================== */
.page-about {
  & .entry-content {
    & dl {
      max-width: calc(var(--contents-maxwidth) - 80px);
      text-align: center;
      margin: 80px auto 56px;
      padding: 0 var(--spacing-lg);
    }

    & dt {
      font-size: var(--size-text-15);
      font-weight: bold;
      line-height: var(--line-height-base);
      letter-spacing: var(--letter-spacing-text);
      margin-top: 24px;

      @media (max-width: 768px) {
        font-size: var(--size-text-14);
      }
    }

    & dd {
      font-size: var(--size-text-14);
      font-weight: normal;
      line-height: var(--line-height-base);
      letter-spacing: var(--letter-spacing-text);

      @media (max-width: 768px) {
        font-size: var(--size-text-13);
      }
    }

    & .profile-icon {
      margin: var(--spacing-xs);
    }
  }

  & .about-subscription-count {
    display: block;
    margin-bottom: var(--spacing-sm);
  }
}

/* ========================================
   Modules
   ======================================== */
.hatena-module {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.hatena-module-title {
  font-size: var(--size-text-18);
  font-weight: bold;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-text);
  margin: 0 0 var(--spacing-md) 0;

  @media (max-width: 768px) {
    font-size: var(--size-text-16);
  }

  & a {
    text-decoration: none;
  }
}

.hatena-module-body {
  & p,
  & ul,
  & dl,
  & ol {
    font-size: var(--size-text-13);
    font-weight: normal;
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-text);
  }
}

.hatena-module-category {
  & .hatena-urllist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    @media (max-width: 768px) {
      justify-content: initial;
    }

    & li {
      margin: 0 var(--spacing-sm) var(--spacing-sm) 0;
    }
  }
}

.hatena-follow-button-box {
  display: flex;
  justify-content: center;
  margin: var(--spacing-lg) 0;
}

.hatena-module-custom-blogtitle-link {

  &::before {
    content: '＊';
    width: 100%;
    text-align: center;
    font-size: var(--size-text-22);
    font-weight: bold;
    display: block;
    margin: 1em auto;
  }
}

.hatena-urllist {
  /* 基本スタイル（全バリエーション共通） */
  & li {
    margin-bottom: var(--spacing-sm);

    &:last-child {
      margin-bottom: 0;
    }

    & ul {
      margin-top: var(--spacing-xs);
      margin-bottom: var(--spacing-md);
    }

    & li {
      margin-bottom: var(--spacing-xs);
    }
  }

  & .urllist-title-link {
    font-size: var(--size-text-14);
    font-weight: normal;
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-text);

    @media (max-width: 768px) {
      font-size: var(--size-text-13);
    }
  }

  & .urllist-title,
  & .urllist-entry-body {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }

  & .urllist-entry-body {
    font-size: var(--size-text-14);
    letter-spacing: var(--letter-spacing-text);
  }

  /* カード型レイアウト（サムネイル付き / サムネイルなし両対応） */
  &.urllist-with-thumbnails {
    & li {
      margin-bottom: var(--spacing-md);
    }
    & .urllist-item {
      text-align: left;
      padding: var(--spacing-md) !important;
      border: 1px solid var(--color-border) !important;
      border-radius: var(--border-radius);

      @media (max-width: 768px) {
        width: calc(100% + var(--spacing-xl));
        margin-left: calc((var(--spacing-xl) / 2) * -1);
      }
    }

    & .urllist-item-inner {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-auto-rows: auto 1fr auto;
      gap: var(--spacing-xs) var(--spacing-md);

      /* 画像がない場合は1列レイアウト */
      &:not(:has(.urllist-image-link)) {
        grid-template-columns: 1fr;

        & .urllist-title-link,
        & .urllist-entry-body,
        & .urllist-date-link {
          grid-column: 1 / 2;
        }
      }
    }

    & .urllist-title {
      font-size: var(--size-text-16);
      font-weight: bold;
    }

    & .urllist-title-link {
      text-decoration: none;
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }

    & .urllist-entry-body {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    & .urllist-image {
      vertical-align: middle;
      margin: 0;
    }

    & .urllist-image-link {
      display: block;
      grid-column: 1 / 2;
      grid-row: 1 / 4;
    }

    & .urllist-date-link {
      font-size: var(--size-text-14);
      grid-column: 2 / 3;
      grid-row: 3 / 4;

      & > a {
        text-decoration: none;
      }
    }
  }
}

.hatena-module-profile {
  & .profile-icon-link {
    display: inline-block;
  }

  & .id {
    margin-left: var(--spacing-xs);
  }
}

.archive-module-hide-button,
.archive-module-show-button {
  font-size: 0;
  line-height: 1;

  &::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -5px;
    margin-right: var(--spacing-xs);
    display: inline-block;
  }
}

.archive-module-hide-button::before {
  border-width: 8.7px 5px 0 5px;
  border-color: #000 transparent transparent transparent;
}

.archive-module-show-button::before {
  border-width: 5px 0 5px 8.7px;
  border-color: transparent transparent transparent #000;
}

/* ========================================
   Entry Page
   ======================================== */
.page-entry,
.page-static_page {
  & #blog-title {
    display: none;
  }
}

.entry-header {
  margin: var(--spacing-xxl) auto var(--spacing-xl);
  padding: 0 var(--spacing-lg);
  width: 100%;
  max-width: var(--contents-maxwidth);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-md);

  @media (max-width: 768px) {
    margin: var(--spacing-xl) auto var(--spacing-lg);
  }
}

.entry-date {
  font-size: var(--size-text-14);
  font-weight: normal;
  line-height: var(--line-height-base);
  text-align: center;
  letter-spacing: var(--letter-spacing-text);
  order: 1;

  @media (max-width: 768px) {
    font-size: var(--size-text-13);
  }

  & a {
    font-weight: bold;
    text-decoration: none;
  }
}

.entry-title {
  font-size: var(--size-text-22);
  font-weight: bold;
  line-height: var(--line-height-heading);
  text-align: center;
  letter-spacing: var(--letter-spacing-heading);
  width: 100%;
  margin: 0;
  order: 2;

  @media (max-width: 768px) {
    font-size: var(--size-text-18);
  }
}

.entry-categories {
  font-size: var(--size-text-13);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  order: 3;
  gap: var(--spacing-xs);

  & a {
    border: none;
    padding: 0;
    background-color: transparent;

    &::before {
      content: '[ ';
      display: inline;
    }
    &::after {
      content: ' ]';
      display: inline;
    }
  }
}

.entry-inner {
  display: flex;
  flex-direction: column;
}

.entry-content,
.entry-footer {
  margin: 0 auto var(--spacing-xl);
  padding: 0 var(--spacing-lg);
  max-width: var(--contents-maxwidth);
  overflow-wrap: break-word;

  @media (max-width: 768px) {
    margin: 0 auto var(--spacing-lg);
  }

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }
}

.entry-content {
  width: fit-content;

  &:has(.entry-paywalled-notice),
  &:has(.codoc-continue) {
    width: 100%;
  }
}

.entry-footer {
  width: 100%;

  & .google-afc-image {
    margin: var(--spacing-xl) auto;

    @media (max-width: 768px) {
      margin: var(--spacing-lg) auto;
    }
  }
}

.entry-see-more {
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  user-select: none;

  &::before,
  &::after {
    content: '';
    border-bottom: 2px dotted var(--color-text);
    height: 0;
    flex-grow: 1;
  }
}

/* ========================================
   Entry Content
   ======================================== */
.entry-content {
  font-variant-ligatures: none;
  font-feature-settings: 'pkna' 1;
  line-height: var(--line-height-content);
  line-break: strict;
  overflow-wrap: anywhere;

  & img,
  & video {
    max-width: 100%;
    width: 100%;
    height: auto;

    @media (max-width: 768px) {
      max-width: inherit !important;
      width: calc(100% + var(--spacing-xl));
      margin-left: calc((var(--spacing-xl) / 2) * -1);
    }
  }

  & p,
  & ul,
  & dl,
  & ol {
    text-align: justify;
    line-height: var(--line-height-content);
  }

  & p,
  & ul,
  & dl {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);

    & img {
      vertical-align: middle;
    }

    & span > img:first-child {
      margin-top: 0;
    }
  }

  & ul,
  & dl,
  & ol {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  & li {
    margin-left: 1em;

    & ul {
      margin-top: var(--spacing-sm);
      margin-bottom: 0;
    }

    & li {
      margin-top: 2px;
    }
  }

  & ol li {
    list-style: decimal;
  }

  & > ul li {
    list-style: disc;

    & > ul li {
      list-style: circle;

      & > ul li {
        list-style: disc;
      }
    }
  }

  & > p:first-child > span img {
    @media (max-width: 768px) {
      margin-top: -16px;
    }
  }

  & dt {
    font-weight: bold;
    margin-top: var(--spacing-sm);
  }

  & blockquote {
    margin: 0;
    padding: calc(var(--spacing-md) * 1.5);
    background-color: var(--color-bg-blockquote);
    border-radius: var(--border-radius);

    @media (max-width: 768px) {
      width: calc(100% + var(--spacing-xl));
      margin-left: calc((var(--spacing-xl) / 2) * -1);
    }

    & > *:first-child {
      margin-top: 0;

      & li,
      & dt {
        margin-top: 0;
      }
    }

    & > *:last-child {
      margin-bottom: 0;
    }
  }

  & pre,
  & code {
    font-family: var(--font-family-mono);
  }

  & .code-block-wrapper {
    position: relative;
    margin-bottom: 1em;

    @media (max-width: 768px) {
      width: calc(100% + var(--spacing-xl));
      margin-left: calc((var(--spacing-xl) / 2) * -1);
    }
  }

  & .code-copy-button {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    cursor: pointer;
    opacity: 0;
    transition:
      opacity 0.2s,
      background 0.2s,
      color 0.2s;

    & svg {
      width: 16px;
      height: 16px;
    }

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
    }

    &.copied {
      color: #4ade80;
      border-color: #4ade80;
    }
  }

  & .code-block-wrapper:hover .code-copy-button {
    opacity: 1;
  }

  & pre {
    color: #fff;
    background: #000;
    border: none;
    white-space: pre;
    overflow: auto;
    font-size: var(--size-text-12);
    line-height: 1.3;
    padding: var(--spacing-md);
    width: 100%;
    max-height: 18em;
    max-height: calc(1lh * 20);
    border-radius: var(--border-radius);
    margin-bottom: 0;

    .code-block-wrapper & {
      @media (max-width: 768px) {
        border-radius: 0;
      }
    }

    & > code {
      margin: 0;
      padding: 0;
      white-space: pre;
      border: none;
      background-color: transparent;
      font-family: var(--font-family-mono);
    }
  }

  & code {
    font-size: 90%;
    margin: 0 2px;
    padding: 0px 5px;
    background-color: var(--color-bg-alt);
    border-radius: var(--border-radius);
  }

  & table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
    width: 100%;
    overflow: auto;
    display: block;

    & th,
    & td {
      border: 1px solid var(--color-border);
      padding: 0.25em 0.5em;
    }

    & th {
      background: var(--color-bg-alt);
    }
  }

  & hr {
    width: 100%;
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2em auto;
  }

  & .table-of-contents {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

    @media (max-width: 768px) {
      width: calc(100% + var(--spacing-xl));
      margin-left: calc((var(--spacing-xl) / 2) * -1);
    }
    & li {
      font-size: var(--size-text-14);
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}

/* list-style for .section and blockquote */
.section > ul li,
blockquote > ul li {
  list-style: disc;

  & > ul li {
    list-style: circle;

    & > ul li {
      list-style: disc;
    }
  }
}

/* Syntax Highlighting */
.synSpecial {
  color: #c000c0;
}
.synType {
  color: #57ff57;
}
.synComment {
  color: #4f80e5;
}
.synPreProc {
  color: #9355e6;
}
.synIdentifier {
  color: #51cfcf;
}
.synConstant {
  color: #f66;
}
.synStatement {
  color: #d88a17;
}

/* ========================================
   Entry Footer
   ======================================== */
.entry-footer {
  display: flex;
  justify-content: center;
  flex-direction: column;

  & .google-afc-image {
    margin: 24px auto;
  }
}

.entry-footer-section {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.entry-footer-time {
  margin-left: var(--spacing-sm);
}

.entry-tags-wrapper:not(:has(.entry-tags *)) {
  display: none;
}

.social-buttons {
  display: flex;
  justify-content: center;
}

.customized-footer {
  margin-top: var(--spacing-xl);

  @media (max-width: 768px) {
    margin-top: var(--spacing-lg);
  }
  &:not(:has(*)) {
    display: none;
  }
}

.entry-footer-modules {
  & .hatena-module {
    max-width: inherit !important;
  }
}

.entry-comment {
  padding: var(--spacing-md) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-md);

  @media (max-width: 768px) {
    width: calc(100% + var(--spacing-xl));
    margin-left: calc((var(--spacing-xl) / 2) * -1);
  }
  & *:first-child {
    margin-top: 0;
  }
  & .comment-metadata {
    font-size: var(--size-text-14);
    margin-bottom: 0;
  }
}

.comment-user-id {
  font-size: var(--size-text-14);
  color: var(--color-text);
  margin-left: var(--spacing-xs);
}

.hatena-star-container {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

/* ========================================
   Comments
   ======================================== */
.comment {
  text-align: left;

  & li:last-child {
    margin-bottom: var(--spacing-lg);
  }
}

.comment-box {
  margin-top: var(--spacing-lg);
}

.leave-comment-title {
  line-height: var(--spacing-md);
  font-weight: bold;
  text-decoration: none;
  padding: 6px 12px;
  border: 2px solid var(--color-text);
  border-radius: 16px;
  display: inline-block !important;
}

/* ========================================
   No Entry
   ======================================== */
.no-entry h1 {
  font-size: var(--size-text-22);
  font-weight: bold;
  line-height: var(--line-height-heading);
  text-align: center;
  letter-spacing: var(--letter-spacing-heading);
  padding-top: 80px;

  @media (max-width: 768px) {
    font-size: var(--size-text-18);
  }
}

/* ========================================
   Hatena ASIN Detail
   ======================================== */
.hatena-asin-detail {
  padding: var(--spacing-sm) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  gap: var(--spacing-md) !important;
  border-radius: var(--border-radius);

  @media (max-width: 768px) {
    width: calc(100% + var(--spacing-xl));
    margin-left: calc((var(--spacing-xl) / 2) * -1);
  }

  & .hatena-asin-detail-image-link,
  & > a {
    flex-basis: 120px !important;
    height: 120px !important;

    @media (max-width: 768px) {
      flex-basis: 100px !important;
      height: 100px !important;
    }
  }

  & > a .hatena-asin-detail-image {
    max-width: 120px !important;

    @media (max-width: 768px) {
      max-width: 100px !important;
    }
  }

  & .hatena-asin-detail-info {
    margin: var(--spacing-sm) 0;
    align-items: flex-start;

    & .hatena-asin-detail-title {
      font-size: var(--size-text-18) !important;
      margin: 0 0 var(--spacing-sm);

      @media (max-width: 768px) {
        font-size: var(--size-text-15) !important;
      }
    }

    & .hatena-asin-detail-meta {
      font-size: var(--size-text-14) !important;

      & li {
        margin-left: 0 !important;
      }
    }

    & ul li {
      margin-left: 0 !important;
    }

    & .asin-detail-buy {
      font-size: var(--size-text-14) !important;
      font-weight: normal;
      line-height: 1;
      text-decoration: underline;
      padding: 0;
      background-color: transparent;
      width: fit-content !important;
      position: relative;
      margin-top: var(--spacing-md);

      @media (max-width: 768px) {
        margin-top: var(--spacing-sm);
      }

      &::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-left: 5px;
        vertical-align: middle;
        background-color: currentColor;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23000'%3E%3Cpolyline points='3 0.5 9.5 0.5 9.5 7' stroke-miterlimit='10'/%3E%3Cline x1='0.35' y1='9.65' x2='9.5' y2='0.5' stroke-miterlimit='10'/%3E%3C/svg%3E");
        mask-size: contain;
        mask-repeat: no-repeat;
      }
    }
  }
}

/* ========================================
   Embed
   ======================================== */
iframe.embed-card {
  max-width: inherit !important;
  margin: var(--spacing-lg) 0 var(--spacing-sm) !important;

  @media (max-width: 768px) {
    margin: var(--spacing-md) 0 var(--spacing-sm) !important;
  }
}

.hatena-citation {
  margin: calc(var(--spacing-xs) * -1) 0 var(--spacing-lg);

  @media (max-width: 768px) {
    margin: calc(var(--spacing-sm) * -1) 0 var(--spacing-md);
    
  }
}

/* ========================================
   Movie / Slide Wrap
   ======================================== */
.movie-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.slide-wrap {
  position: relative;
  padding-bottom: 75%; /* 4:3 */
  height: 0;
  overflow: hidden;
}

.movie-wrap,
.slide-wrap {
  box-shadow: 0 8px 12px -6px rgba(0, 0, 0, 0.5);

  & iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);

    & + .hatena-citation {
      display: none;
    }
  }
}

/* ========================================
   Codoc
   ======================================== */
.entry-paywalled-notice {
  width: 100%;
}

.entry-codoc-continue-divider {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);

  &::before,
  &::after {
    content: '';
    border-bottom: 2px dotted var(--color-text);
    height: 0;
    flex-grow: 1;
  }
  & > span {
    background-color: transparent;
    color: var(--color-text);
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
  }
}

.codoc-continue {
  opacity: 0.5;
  user-select: none;

  &:has(.codoc-continue-count) {
    opacity: 1;
  }

  &::before,
  &::after {
    height: 0;
    border-top: 2px dotted var(--color-text);
  }
}

.codoc-more {
  &::before {
    content: '（';
  }

  &::after {
    content: '）';
  }
}

.codoc-subscription-list li {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.codoc-like:not(:has(*)) {
  display: none;
}

.codoc-copyright .codoc-copyright-about {
  border: none;
  padding: 0;

  &:hover {
    background-color: transparent;
  }
}

.entry-paywalled-notice-heading {
  &::before,
  &::after {
    height: 0;
    border-top: 2px dotted var(--color-text);
  }
}

/* Codoc overrides (for !important rules from external codoc CSS) */
@layer overrides {
  .entry-codoc-continue-divider {
    border-bottom: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .codoc-continue {
    padding: 0 !important;
    margin: 0 auto var(--spacing-xl) !important;

    &::before,
    &::after {
      background-color: transparent !important;
    }
  }

  .codoc-more {
    color: var(--color-text) !important;
    margin-bottom: var(--spacing-xl) !important;
  }

  .codoc-subscription-list {
    & li {
      border: 1px solid var(--color-border) !important;
    }

    & .codoc-btn {
      font-size: var(--size-text-14) !important;
      font-weight: bold !important;
      background: var(--color-text) !important;

      &:hover {
        background: #000 !important;
      }
    }
  }

  .codoc-subscription-icon img {
    @media (max-width: 768px) {
      margin-left: 0 !important;
    }
  }

  .codoc-subscription-price {
    color: var(--color-text) !important;
  }

  .codoc-subscription-articlelist > a {
    color: var(--color-text) !important;
    padding: 0 !important;

    &::before {
      display: none !important;
    }

    &::after {
      content: '';
      width: var(--spacing-sm);
      height: var(--spacing-sm);
      border-width: 1px 1px 0 0;
      border-style: solid;
      border-color: var(--color-text);
      transform: rotate(135deg);
      display: block;
      margin: var(--spacing-sm) auto 0;
    }
  }

  .codoc-subscription-articlelist-login a {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    display: block;
    max-width: 580px;
    height: 40px;
    margin: 0 auto;
    padding: 0 !important;
    width: 100%;
    text-decoration: none !important;
    text-align: center;
    line-height: 40px;
    font-size: var(--size-text-14);
    font-weight: bold;
    border-radius: 6px;

    &::before {
      display: none !important;
    }
  }

  .codoc-copyright .codoc-copyright-about {
    border: none !important;
    padding: 0 !important;

    &:hover {
      background-color: transparent !important;
    }
  }

  .entry-paywalled-notice-heading {
    &::before,
    &::after {
      height: 0 !important;
      background-color: transparent !important;
    }
  }
}