@charset "UTF-8";
/*=== 一般 ===*/
/*-- 共通 --*/
:root {
  --background: var(--color-gray100);

  --foreground: var(--color-gray10);
  --foreground-link: var(--color-gray15);
  --foreground-old: var(--color-gray50);

  --text-line-height: 2em;
  --text-line-height-secondary: 1.4em;

  --text-level-1: 1.4em;
  --text-level-2: 1.3em;
  --text-level-3: 1.2em;
  --text-level-4: 1.1em;
  --text-level-5: 1.0em;
  --text-level-6: 0.9em;

  --container-spacing-vertical: 4em;
}

body {
  font-size: 16px;
  background-color: var(--background);
  color: var(--foreground);
}

/*-- フォント --*/
#container {
  font-family: 'Klee One', serif;
}

/*-- リンク --*/
#container a {
  &:link, &:visited {
    text-decoration: underline;
    color: var(--foreground-link);
  }

  &:hover, &:active {
    text-decoration-thickness: 2px;
  }
}

#footer .footer-address {
  a:link, a:visited {
    span {
      text-decoration: underline;
      color: var(--foreground-link);
    }
  }

  &:hover, &:active {
    span {
      text-decoration-thickness: 2px;
    }
  }
}

/*-- タイトルリンク --*/
#title a {
  & {
    font-weight: bold;
  }

  &:link, &:visited {
    text-decoration: none;
  }

  &:hover, &:active {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}

/*-- 日付けリンク --*/
#container .archive-entries .archive-date,
#container .entry .entry-date {
  & {
    text-align: center;

    font-size: var(--text-level-7);
    font-family: sans-serif;
  }
}

/*-- タグリンク --*/
.archive-entry-tag .archive-entry-tag-link,
.entry-tag .entry-tag-link {
  & {
    display: inline;
    padding: 0;
    margin-right: .25em;
    line-height: var(--text-line-height-secondary);
    border: none;

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

  &:link, &:visited, &:hover, &:active {
    & {
      text-decoration: none !important;
    }

    & > * {
      text-decoration: underline;
    }
  }

  &:hover, &:active {
    & > * {
      text-decoration-thickness: 2px;
    }
  }

  &:hover {
    background: unset;
  }

  .archive-entry-tag-label,
  .entry-tag-label {
    margin-left: unset;
  }
}

/*-- タイトル --*/
/*=== 全体設定 ===*/
/*-- コンテナサイズ --*/
#container,
#box2,
#footer {
  max-width: 45rem;
  margin: 0 auto;
}

#container #container-inner {
  margin: 0 1em;
}

#box2 {
  margin-top: calc(var(--container-spacing-vertical) *2);
}

.archive-entry {
  margin-bottom: calc(var(--container-spacing-vertical)*2);
}

/*=== コンポーネント ===*/
/*-- ブログタイトル --*/
#blog-title {
  & {
    text-align: center;
    margin: calc(var(--container-spacing-vertical) * 2) 0;
  }

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

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

/*-- パンくずリスト --*/
.breadcrumb {
  text-align: center;
  font-family: monospace;
  margin: calc(var(--container-spacing-vertical) * 2) 0;
}

/*-- 検索結果 --*/
.search-result {
  .archive-heading {
    margin-bottom: var(--text-level-5);
  }

  .search-result-form {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--container-spacing-vertical) *2);

    border-radius: 0;
    border: 1px solid var(--foreground);
  }

  & + p {
    text-align: center;
  }
}

.page-archive span.highlight {
  background: unset;
  font-weight: bold;
  padding: .125em .25em;
  margin: .25em;
  color: var(--foreground);
  border: 1px solid var(--foreground-link);
}

/*-- インデックスタイトル --*/
.archive-heading {
  & {
    font-size: var(--text-level-5);
    text-align: center;
    margin: calc(var(--container-spacing-vertical)*2) 0;
  }
}

/*-- 日付け --*/
#container .archive-entries .archive-date,
#container .entry .entry-date {
  & {
    margin: calc(var(--container-spacing-vertical) / 2) 0;
  }
}

/*-- 記事タイトル --*/
#container .archive-entry .entry-title,
#container .entry .entry-title {
  font-size: var(--text-level-1);
  text-align: center;
}

#container .archive-entry .entry-description {
  margin: calc(var(--container-spacing-vertical)/2) 0;
}

/*-- カテゴリ --*/
#container .archive-entry .categories,
#container .entry .categories {
  & {
    text-align: center;
    margin: calc(var(--container-spacing-vertical) / 2) 0;
  }

  & a {
    margin: 0 calc(var(--text-level-5) / 4);
    font-family: monospace;
    font-weight: normal;
  }
}

/*-- 記事サムネイル --*/
#container .archive-entry .entry-thumb {
  display: none;
}

/*-- コンテンツ --*/
#container .entry .entry-content {
  h2 {
    font-size: var(--text-level-2);
  }

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

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

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

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

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

  ul, ol {
    li {
      line-height: var(--text-line-height-secondary);
    }
  }

  blockquote {
    margin-left: 1em;
    padding-left: 1em;
    border-left: 1px solid var(--foreground);
  }
  
  hr {
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: var(--foreground);
    margin: var(--container-spacing-vertical) 2em;
  }
  
  strong {
    text-decoration: 3px underline var(--foreground) ;
  }
  
  b {
    font-weight: bold;
    text-decoration: underline double var(--foreground) 1px;
  }
  
  em {
    text-emphasis: dot ;
    font-style: normal;
  }
  
  i {
    font-style: italic;
    font-weight: bold;
  }
  
  dfn {
    font-style: italic;
  }
  
  ins {
    text-decoration: underline double;    
  }
  
  del {
    text-decoration: line-through double;
  }
  
  s {
    color: var(--foreground-old);
  }
  
  ruby rt {
    font-size: calc(var(--text-level-6) * 0.75);
    margin-bottom: -0.375em;
  }
  
  .table-of-contents::before {
    display: block;
    content: '目次';
    font-size: var(--text-level-2);
    font-weight: bold;
    margin-left: calc(var(--text-level-2) * -1.5);
    margin-top: 1em;
    margin-bottom: 1em;
  }
  
  .embed-webcard {
    & {
      min-width: 100% !important;
    }

    & + a {
      font-size: var(--text-level-6);
    }
  }
  
  p:has(.http-image) > a:has(.http-image) + a {
    display: block;
    text-align: center;
    font-size: var(--text-level-6);
  }
}

/*-- 404 --*/
#container .no-entry .entry-content {
  text-align: center;
}


/*-- コンテンツフッタ --*/

/*- インデックスフッタ --*/
#container .archive-entry-body .social-buttons {
  .star-container {
    order: 1;
  }
  .bookmark-widget-counter {
    order: 2;
  }
}

/*-- ページャ --*/
.pager {
  & {
    display: flex;
    margin: var(--container-spacing-vertical) 0;
  }
  
  .pager-next, .pager-prev {
    display: block;
    width: 50%;
  }
  
  .pager-next {
    margin-left: auto;
    text-align: right;
  }
  
  .pager-prev {
    margin-right: auto;
    text-align: left ;
  }
}

/*-- サイドバー（フッタ） --*/
#box2 .hatena-module {
  & {
    margin-bottom: calc(var(--container-spacing-vertical) /2);
  }

  .hatena-module-title {
    font-weight: bold;
    margin: 1em 0;
  }

  .hatena-module-body {
    line-height: 1.7em;
  }

  /*-- プロフィール --*/
  &.hatena-module-profile .hatena-module-body {
    .profile-icon-link {
      float: left;
      margin-right: 1em;
    }

    .profile-activities {
      line-height: 64px;
    }

    .profile-description {
      clear: left;
      font-size: var(--text-level-6);
      line-height: var(--text-line-height-secondary);
    }
  }

  /*-- 検索 --*/
  &.hatena-module-search-box {
    .search-form {
      & {
        max-width: 50%;
        padding: .25em .5em;
        display: flex;
        border: 1px solid var(--foreground);
      }

      input {
        padding: .25em .5em;
        border: none;
        background: transparent;
      }

      input[type="text"] {
        width: 100%;
        margin-right: .25em;
      }

      input[type="submit"] {
        width: 3em;
        text-align: center;
      }
    }
  }

  /*-- アーカイブ --*/
  &.hatena-module-archive {
    .hatena-module-body {
      .archive-module-months {
        & li {
          list-style-type: disc !important;
        }
      }
    }
  }
}

/*-- フッタ --*/
#footer-inner {
  & {
    max-width: 45rem;
    margin-right: auto;
    margin-left: auto;
  }

  & > .footer-address {
    float: left;
    margin-right: .75em;
  }
}

/*-- モバイル向け --*/
@media screen and (max-width: 42rem) {
  #box2 .hatena-module.hatena-module-search-box .search-form {
    max-width: unset;
  }

  #footer-inner {
    text-align: center;
  }
  
  #footer-inner > .footer-address {
    float: none;
  }
}