/* <system section="background" selected="default"> */
/* default */
/* </system> */
@charset "UTF-8";
/*=== 一般 ====*/
/*-- 共通 --*/
:root {
  --background: var(--color-gray95);
  --background-content: var(--color-gray100);

  --background-important: var(--color-red90);
  --background-emphasis: var(--color-yellow90);
  --background-code: var(--color-gray05);

  --foreground-separator: var(--color-gray90);

  --foreground-comment-odd: var(--color-blue90);
  --foreground-comment-even: var(--color-yellow90);

  --foreground-title: var(--color-gray0);
  --foreground-content: var(--color-gray20);
  --foreground-content-focused: var(--color-gray50);
  --foreground-clickable: var(--color-blue40);
  --foreground-clickable-focused: var(--color-blue60);

  --foreground-emphasis: var(--color-gray0);
  --foreground-added: var(--color-green60);
  --foreground-removed: var(--color-orange60);
  --foreground-unrelated: var(--color-gray60);
  --foreground-quote: var(--color-magenta60);
  --foreground-code: var(--color-gray100);

  --frame-width: 6px;
  --frame-radius: 1.5rem;

  --container-spacing-side: calc(var(--frame-width) * 2);

  --text-height: 2em;
  --text-height-subtext: 1.6em;

  --text-header-level-1: 1.6em;
  --text-header-level-2: 1.4em;
  --text-header-level-3: 1.3em;
  --text-header-level-4: 1.2em;
  --text-header-level-5: 1.1em;
  --text-header-level-6: 1.0em;
  --text-header-level-7: 0.8em;
  --text-header-level-8: 0.6em;
}

/*-- リンク --*/
/* 通常 */
#container a, #footer a {
  & {
    text-decoration: underline;
  }

  &:link, &:visited {
    color: var(--foreground-clickable);
  }

  &:hover, &:active {
    color: var(--foreground-clickable-focused);
  }
}

/* タイトル */
#title a,
#container .entry-title a,
#container .pager span a {
  & {
    text-decoration: none;
  }

  &:link, &:visited {
    color: var(--foreground-title);
  }

  &:hover, &:active {
    color: var(--foreground-content-focued);
    text-decoration: underline;
  }
}

/* 日付けリンク */
#container .archive-entry .archive-entry-header .archive-date::before,
#container .entry .entry-header .entry-date::before,
.customized-footer .related-entries .related-entries-item-inner .related-entries-date-link::before {
  display: inline;
  content: 'Date:';
  font-weight: bold;
  margin-right: .125em;
}

/* カテゴリリンク */
#container .archive-entry .categories,
#container .entry .entry-header .entry-categories {
  a {
    display: inline-block;
  }

  a::before {
    display: inline;
    content: '🌵';
  }
}

/* タグ */
#container .entry-tags-wrapper,
#container .archive-entry-tags-wrapper {
  margin: var(--container-spacing-side) 0;
}

#container .entry-tags .entry-tag-link,
#container .archive-entry-tags .archive-entry-tag-link {
  & {
    padding: 0;
    margin-right: .25em;
    text-decoration: none;
  }

  &:hover, &:active {
    background-color: transparent;
    text-decoration: underline;
  }
}

#container .entry-tag .entry-tag-link {
  border: none;
}

#container .entry-tag-link > *,
#container .archive-entry-tag-link > * {
  font-size: var(--text-header-level-6);
  line-height: var(--text-height-subtext);
  margin: 0;
  background: transparent;
}

/*-- 水平線 --*/
#container .archive-entry-header::after,
#container .entry .entry-header::after,
#container .entry .entry-content hr,
#container .entry .entry-content h1::after,
#container .comment .comment-user-name::after,
#footer h3::after,
#box2 .hatena-module-title::after {
  display: block;
  content: '';
  height: var(--frame-width);
  border: none;
  border-radius: var(--frame-width);
  background-color: var(--foreground-separator);
  margin: var(--frame-width) 0;
}

/*-- はてなID --*/
#container [data-user-name] {
  .user-name-paren,
  .user-name-hatena-id {
    display: none;
  }
}

/*-- 検索 --*/
#container .search-result .search-result-form {
  & {
    border: calc(var(--frame-width) / 2) solid var(--foreground-separator);
    border-radius: calc(var(--frame-width) / 2);
    max-width: 100%;
    : 100%;
  }

  &:hover,
  &:focus-visible,
  &:focus-within {
    border-color: var(--foreground-clickable-focused);
  }
}

.page-archive span.highlight {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: var(--foreground-title);
  background: linear-gradient(transparent 70%, var(--background-emphasis) 70%);
}

/*=== 全体設定 ===*/
html,
body {
  background-color: var(--background);
  color: var(--foreground-content);
  font-size: 16px;
  height: 100%;
}

/*-- コンテナ --*/
#container #wrapper,
#top-box,
#box2,
#footer {
  max-width: 45rem;
  margin: 0 auto calc(var(--container-spacing-side) * 4) auto;
  padding: var(--container-spacing-side) calc(var(--container-spacing-side));
}

#container {
  min-height: 100%;
}

#container #wrapper,
#container #box2,
#footer {
  background-color: var(--background-content);
}

/*-- コンテンツ（枠） --*/
#container #wrapper,
#container #box2,
#footer {
  border-color: var(--foreground-separator);
  border-style: solid;
}

#container #wrapper,
#container #box2 {
  border-width: var(--frame-width);
  border-radius: var(--frame-radius);
}

#footer {
  border-width: var(--frame-width) var(--frame-width) 0 var(--frame-width);
  border-radius: var(--frame-radius) var(--frame-radius) 0 0;
}

/*-- 記事ヘッダ --*/
#container .archive-entry-header,
#container .entry .entry-header,
.customized-footer .related-entries .related-entries-item-inner {
  display: flex;
  flex-direction: column;
}

#container .archive-entry-header .entry-title,
#container .entry .entry-header .entry-title,
.customized-footer .related-entries .related-entries-item-inner .related-entries-title-link {
  order: 1;
  margin-top: 0;
  margin-bottom: 0;
}

#container .archive-entry-header .archive-date,
#container .entry .entry-header .entry-date,
.customized-footer .related-entries .related-entries-item-inner .related-entries-date-link {
  order: 2;
  margin: var(--frame-width) 0;
}

#container .archive-entry-header::after,
#container .entry .entry-header::after,
.customized-footer .related-entries .related-entries-item-inner .related-entries-entry-body {
  order: 3;
}

#container .entry .entry-header .entry-categories {
  order: 4;
}

#container .archive-entry .categories,
#container .entry .entry-categories {
  & {
    text-align: right;
  }

  & a {
    margin-left: .25rem;
  }
}

/*=== コンポーネント ===*/
/*-- ブログタイトル --*/
#blog-title {
  & {
    text-align: center;
    margin: 4rem 0 4em 0;
  }

  #title {
    font-size: var(--text-header-level-6);
  }

  #blog-description {
    font-size: var(--text-header-level-7);
    font-weight: normal;
  }
}

/*-- パンくずリスト --*/
#top-box .breadcrumb {
  & {
    font-size: var(--text-header-level-7);
  }

  .breadcrumb-gt {
    display: none;
  }

  .breadcrumb-child::before {
    display: inline;
    content: '↯';
  }
}

/*-- 一覧タイトル --*/
#main-inner .archive-header-category {
  margin: 0;
}

#main-inner .archive-heading {
  font-size: var(--text-header-level-7);
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 2em;
}

.page-about #container .entry .entry-content h1,
#main-inner .no-entry .entry-content h1 {
  margin-top: 0;
}

/*-- 本文 --*/
#container .entry .entry-content,
#box2 .hatena-module-html .hatena-module-body {
  #avatar {
    width: 256px;
    height: 256px;
    margin: 0 auto;
  }

  & > * {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  p {
    line-height: var(--text-height);
  }

  p,
  li,
  dt,
  dd,
  h2,
  h3,
  h4,
  h5,
  h6 {
    /* 重要ポイントに使う */
    strong {
      font-weight: bold;
      background: linear-gradient(transparent 70%, var(--background-important) 70%);
    }

    /* 移調したい箇所に使う */
    em {
      text-emphasis-color: var(--foreground-emphasis);
      text-emphasis-style: dot;
      font-weight: inherit;
      font-style: normal;
    }

    /* 注視させたい時に使う */
    b {
      font-weight: bold;
    }

    /* 異なる文脈で使う */
    i {
      font-style: italic;
    }

    /* 定義用語に使う*/
    dfn {
      font-style: italic;
      text-decoration: underline double 1px;
    }

    /* 既に関連が無くなった箇所に使う */
    s {
      text-decoration: line-through;
      color: var(--foreground-unrelated);
    }

    /* 無効な箇所に使う*/
    del {
      text-decoration: line-through;
      text-decoration-color: var(--foreground-removed);
      text-decoration-thickness: 3px;
    }

    /* 追記に使う */
    ins {
      text-decoration: underline;
      text-decoration-color: var(--foreground-added);
      text-decoration-thickness: 3px;
    }

    /* 注記などをする時に使う */
    small {
      font-size: 0.8rem;
    }

    /* 引用文に使う */
    q {
      text-decoration: underline;
      text-decoration-color: var(--foreground-quote);
      text-decoration-thickness: 3px;
    }

    /* コード */
    code {
      font-size: var(--text-header-level-6);
      font-family: monospace;

      background-color: var(--background);
      border: 1px solid var(--foreground-separator);

      margin: .1em .25em;
      padding: 0 .25em;
    }

    /* 振り仮名 */
    rt {
      font-size: var(--text-header-level-8);
      margin-bottom: calc(var(--text-header-level-8) / 4 * -1);
    }
  }

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

  h1 {
    font-size: var(--text-header-level-1);
  }

  h2 {
    font-size: var(--text-header-level-2);
  }

  h3 {
    font-size: var(--text-header-level-3);
  }

  h4 {
    font-size: var(--text-header-level-4);
  }

  h5 {
    font-size: var(--text-header-level-5);
  }

  h6 {
    font-size: var(--text-header-level-6);
  }

  ul,
  ol {
    margin-left: 1rem;
    padding-left: 1rem;
  }

  ul > li {
    list-style: disc;
    line-height: var(--text-height-subtext);
  }

  ol > li {
    list-style: decimal;
    line-height: var(--text-height-subtext);
  }

  li > ul,
  li > ol {
    margin-left: 0;
    margin-bottom: 0;
  }

  dl dt {
    line-height: var(--text-line-height);
  }

  dl dd {
    line-height: var(--text-line-height);
    margin-left: 1em;
  }

  dl dt {
    font-size: .8rem;
    font-weight: bold;
  }

  dl dd::before {
    display: inline;
    content: '🌵';
    margin-right: .25em;
  }

  blockquote {
    & {
      position: relative;
      margin-left: calc(1em - (var(--frame-width)*2));
      margin-right: 0;
      padding-left: .75em;
    }

    &::before {
      position: absolute;
      display: block;
      content: '';
      width: calc( var(--frame-width) / 1.5);
      border-radius: calc( var(--frame-width) / 1.5);
      top: 0;
      left: 0;
      bottom: 0;
      background-color: var(--foreground-quote);
    }
  }

  p:has(a img.http-image) {
    .http-image {
      display: block;
      margin-left: auto;
      margin-right: auto;
      border-radius: calc(var(--frame-width) / 2);
    }

    & > a + a {
      display: block;
      text-align: center;
      font-size: 0.8rem;
      color: var(--foreground-title);
    }
  }

  .table-of-contents {
    &::before {
      display: block;
      content: '目次';
      font-size: var(--text-header-level-2);
      font-weight: bold;
      margin-bottom: 1em;
      margin-left: calc(var(--text-header-level-2) * -1 / 2);
    }

    & {
      margin-left: 0;
    }

    & li {
      list-style-type: circle;
    }
  }

  .embed-card.embed-blogcard,
  .embed-card.embed-webcard,
  .hatena-bookmark-comment-embed {
    margin-bottom: 0 !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  .embed-card.embed-blogcard + a,
  .embed-card.embed-webcard + a,
  .hatena-bookmark-comment-embed + script + a {
    font-size: var(--text-header-level-7);
    color: var(--foreground-title);
  }

  .hatena-asin-detail {
    .asin-detail-buy {
      color: var(--color-gray100);
      background-color: #ff9900;
    }
  }

  dd .js-about-subscriber {
    display: inline-block;
  }
}

/*-- コメント --*/
#container .comment-box {
  .comment {
    & {
      position: relative;
      margin-left: calc(1em - (var(--frame-width)*2));
      margin-right: 0;
      padding-left: .75em;
    }

    li {
      display: block;
    }

    .comment-user-name {
      .hatena-id-icon {
        width: 32px;
        height: 32px;
        float: left;
        margin-right: .5em;
      }

      .comment-user-id {
        line-height: 32px;
      }

      &::after {
        clear: left;
        height: calc( var(--frame-width) / 1.5);
      }
    }

    .entry-comment::before {
      position: absolute;
      display: block;
      content: '';
      width: calc( var(--frame-width) / 1.5);
      border-radius: calc( var(--frame-width) / 1.5);
      top: 0;
      left: -1em;
      bottom: 0;
      background-color: var(--foreground-comment-odd);
    }

    .entry-comment:nth-child(2n)::before {
      background-color: var(--foreground-comment-even);
    }
  }
}

/*-- コードブロック --*/
#container .entry .entry-content pre > .hljs,
#box2 .hatena-module-html .hatena-module-body pre > .hljs {
  & {
    display: block;
    padding: 1em;

    font-family: monospace;

    color: var(--foreground-code);
    background-color: var(--background-code);

    border-radius: var(--frame-width);
    overflow-x: scroll;
  }

  .hljs-comment {
    color: var(--color-gray75);
  }

  .hljs-meta {
    color: var(--color-purple95);
  }

  .hljs-string,
  .hljs-number {
    color: var(--color-yellow95);
  }

  .hljs-literal {
    color: var(--color-green95);
  }

  .hljs-attr {
    color: var(--color-green95);
  }

  .hljs-keyword {
    color: var(--color-blue85);
    font-weight: bold;
  }

  .hljs-variable,
  .hljs-operator {
    font-weight: bold;
  }

  .hljs-section {
    color: var(--color-blue85);
    font-weight: bold;
  }

  .hljs-title.class_,
  .hljs-constant_ {
    font-weight: bold;
  }

  .hljs-title.function_ {
    color: var(--color-green95);
  }

  .hljs-tag {
    color: var(--color-green95);
    font-weight: bold;
  }
}

/*-- ページャ --*/
#container .pager {
  & {
    display: flex;
    margin: calc(var(--container-spacing-side) / 2) var(--container-spacing-side);
  }

  & span {
    display: block;
    width: 50%;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  & span .pager-arrow {
    display: none;
  }

  & .pager-next {
    margin-left: auto;
    text-align: right;
  }

  & .pager-next a::after {
    display: inline;
    content: '▷';
  }

  & .pager-prev {
    margin-right: auto;
    text-align: left;
  }

  & .pager-prev a::before {
    display: inline;
    content: '◁';
  }
}


/*-- サイドバー --*/
#box2 {
  .hatena-module {
    & {
      margin-bottom: calc(var(--container-spacing-side) * 3);
    }

    .hatena-module-title {
      font-size: var(--text-header-level-6);
      font-weight: bold;
      margin-bottom: .5em;
    }

    .hatena-module-body {
      .hatena-urllist {
        & {
          padding-left: 1em;
        }

        li {
          line-height: var(--text-height-subtext);
        }
      }
    }

    &.hatena-module-profile {
      & {
        margin-bottom: .5em;
      }

      .profile-icon-link {
        float: left;
        margin-right: .5em;
      }

      .id {
        line-height: 64px;
      }

      .profile-activities {
        clear: left;
        font-style: normal;
      }

      .hatena-follow-button-box {
        float: left;
        line-height: 2em;
        margin-right: .5em;
      }

      .profile-about {
        line-height: 2em;
      }

      &::after {
        display: block;
        content: '';
        clear: both;
      }
    }

    &.hatena-module-custom-profile {
      .search-form {
        & {
          display: flex;
          max-width: 100%;
          margin: 1em 0;
          outline: calc(var(--frame-width) / 2) solid var(--foreground-separator);
          border-radius: calc(var(--frame-width) / 2);
          padding: var(--frame-width) calc(var(--frame-width) / 2);
        }

        &:hover, &:focus-visible, &:focus-within {
          outline-color: var(--foreground-clickable-focused);
        }

        .search-module-input,
        .search-module-button {
          background-color: var(--background-content);
          border: none;
          outline: none;
        }

        .search-module-input {
          width: 100%;
          border-right: 1px solid var(--foreground-separator);
        }
      }
    }

    &.hatena-module-archive .hatena-urllist {
      padding-left: 0em;
    }
  }
}

/*-- フッタ --*/
#footer #footer-inner {
  .footer-address {
    float: left;
    margin-right: .5em;
  }
}

/*=== モバイル対応 ===*/
@media screen and (max-width: 45rem) {
  #container #wrapper,
  #top-box,
  #box2,
  #footer {
    margin-left: var(--container-spacing-side);
    margin-right: var(--container-spacing-side);
  }

  #box2 .hatena-module-custom-profile .hatena-module-body ul:last-child li {
    & {
      font-size: var(--text-header-level-7);
      margin-bottom: 1em;
    }

    a {
      display: block;
      font-size: var(--text-header-level-5);
    }
  }
  
  #footer #footer-inner .footer-address {
    float: unset;
    margin-right: unset;
  }
}