@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-title: var(--color-gray00);
  --foreground-content: var(--color-gray20);
  --foreground-content-focused: var(--color-gray50);
  --foreground-clickable: var(--color-blue40);
  --foreground-clickable-focused: var(--color-blue60);
  
  --foreground-posts: var(--color-blue90);
  --foreground-echos: var(--color-green90);
  --foreground-notes: var(--color-yellow90);

  --foreground-emphasis: var(--color-gray00);
  --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 .entry-header .entry-title a,
#container .archive-entry .archive-entry-header .entry-title a,
.customized-footer .related-entries .related-entries-item-inner .related-entries-title-link {
  & {
    text-decoration: none;
  }

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

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

#title a {
  &:link, &:visited {
    text-decoration: underline !important;
  }
}

/* 日付けリンク */
#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,
#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;
}

#container .archive-entry-header:has(a[href^="https://the.kalaclista.com/posts/"])::after,
#container .entry .entry-header:has(a[href^="https://the.kalaclista.com/posts/"])::after {
  background-color: var(--foreground-posts);
}

#container .archive-entry-header:has(a[href^="https://the.kalaclista.com/echos/"])::after,
#container .entry .entry-header:has(a[href^="https://the.kalaclista.com/echos/"])::after {
  background-color: var(--foreground-echos);
}

#container .archive-entry-header:has(a[href^="https://the.kalaclista.com/notes/"])::after,
#container .entry .entry-header:has(a[href^="https://the.kalaclista.com/notes/"])::after {
  background-color: var(--foreground-notes);
}

/*-- はてなID --*/
#container [data-user-name="nyarla-net"] {
  .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);
  }

  &: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%);
}

/*-- コンテナ枠 --*/
/*
  - ホーム
  - 日付けヘッダ
  - カテゴリヘッダ
  - 記事（固有リンク・ページ）
  - 検索結果
  - 検索結果（該当なし）
  - ページャ
  - サイドバー
  - フッタ
*/
#container .archive-entries,
#container #main-inner > .archive-heading,
#container .archive-header-category,
#container .entry,
#container .search-result,
#container .search-result + p,
#container .pager,
#box2 #box2-inner,
#footer #footer-inner {
  background-color: var(--background-content);

  border: var(--frame-width) solid var(--foreground-separator);
  border-radius: var(--frame-radius);
}

/* 枠設定上書き */
#container .pager {
  border-radius: calc(var(--frame-radius) / 2);
}

#container #main-inner > .archive-heading,
#container #main-inner > .search-result,
#container .archive-header-category {
  & + .archive-entries {
    border-top: none;
    border-radius: 0 0 var(--frame-radius) var(--frame-radius);
  }
}

#container #main-inner > .search-result + p {
  border-top: none;
  border-radius: 0 0 var(--frame-radius) var(--frame-radius);
}

#container #main-inner > .archive-heading,
#container #main-inner > .search-result,
#container .archive-header-category,
#footer #footer-inner {
  border-bottom: none;
  border-radius: var(--frame-radius) var(--frame-radius) 0 0;
}

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

/*-- コンテナレイアウト --*/
#container #content-inner {
  & {
    display: flex;
  }

  #wrapper {
    margin-right: var(--container-spacing-side);
    margin-left: auto;
  }

  #box2 {
    margin-left: var(--container-spacing-side);
    margin-right: auto;
  }
}

/*-- コンテナサイズ --*/
/*
  - ホーム
  - カテゴリヘッダ
  - 記事（固有リンク・ページ）
  - 検索結果
  - ページャ
*/
#container .archive-entries,
#container .archive-header-category,
#container .entry,
#container .search-result,
#container .pager {
  & {
    width: 45em;
    margin-bottom: calc(var(--container-spacing-side) * 2);
  }

  & > * {
    margin: var(--container-spacing-side) calc(var(--container-spacing-side) * 2);
  }
}

#container .entry {
  margin-bottom: calc(var(--container-spacing-side) * 2);
  padding-bottom: var(--container-spacing-side);
}

#container .search-result + p {
  width: calc(45em - (var(--container-spacing-side) * 4));
  margin-top: 0;
  padding: var(--container-spacing-side) calc(var(--container-spacing-side) * 2);
}

/* トップヘッダ */
#top-box {
  width: calc(45em + 16em + (var(--container-spacing-side) * 3));
  margin: -2rem auto 1rem auto;
  line-height: 1rem;
}

/* 日付けヘッダ */
#container .archive-heading {
  margin: 0;
  padding: var(--container-spacing-side) calc(var(--container-spacing-side) * 2);
}

/* 検索ページヘッダ */
#container .search-result {
  padding: var(--container-spacing-side) 0;
}

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

  & 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-prev {
    margin-right: auto;
    text-align: left;
  }
}

/* サイトバー */
#box2 #box2-inner {
  width: 13em;
  padding: var(--container-spacing-side) calc(var(--container-spacing-side) * 2);
  margin-bottom: calc(var(--container-spacing-side) * 2);
}

#box2 .hatena-module-title {
  text-align: center;
}

#box2 .hatena-module-body {
  margin: var(--container-spacing-side) 0;
}

/* フッタ */
#footer #footer-inner {
  margin: 0 auto;
  width: calc(45em + 16em - (var(--frame-width) * 2));
  padding: var(--container-spacing-side) calc(var(--container-spacing-side) * 2);
}

#footer .guest-footer {
  margin: 0;
}

/* コンテナサイズ上書き */
#container #main-inner > .archive-heading,
#container #main-inner > .search-result,
#container .archive-header-category {
  & + .archive-entries {
    margin-top: 0;
  }
}

#container #main-inner > .archive-heading,
#container #main-inner > .search-result,
#container .archive-header-category {
  margin-bottom: 0;
}

#container .archive-header-category .archive-description {
  margin-bottom: 0;
}

#container .archive-header-category {
  margin-bottom: 0;
}

#container .search-result-form {
  margin-bottom: 0;
}

#container .archive-entries .archive-entry:first-child,
#container .entry-inner {
  margin-top: 0;
}

#container .search-result .archive-heading {
  padding-top: 0;
}

/*=== コンポーネント ===*/
/*-- トップヘッダ --*/
#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 .breadcrumb-gt {
  display: none;
}

#top-box .breadcrumb .breadcrumb-child::before {
  display: inline;
  content: '✨';
  margin-right: .25em;
  margin-left: .25em;
}

/*-- 記事ヘッダ --*/
#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-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;
  }
}

/*-- 日付けヘッダ --*/
#container #main-inner > .archive-heading {
  font-size: var(--text-header-level-6);
}

/*-- カテゴリヘッダ --*/
#container .archive-header-category .archive-heading {
  font-size: var(--text-header-level-6);
}

#container .archive-header-category .archive-description {
  font-size: var(--text-header-level-7);
}

/* 検索ヘッダ */
#container .search-result .archive-heading {
  font-size: var(--text-header-level-6);
}

/*-- 記事コンテンツ --*/
/* 記事一覧 */
#container .archive-entry .entry-thumb {
  float: right;
  margin: 1em 0 0 .25em;
}

#container .archive-entry .entry-description {
  line-height: var(--text-height-subtext);
}

#container .archive-entry .entry-description::after {
  display: block;
  content: '';
  clear: both;
}

/* コンテンツ一般 */
#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;
    }

    /* 既に関連が無くなった箇所に使う */
    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: 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: -1em;
    }

    & {
      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 .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;
  }
}

/* 特定ページ */
[class*="static-page-posts"],
[class*="static-page-echos"],
[class*="static-page-notes"] {
  #container .entry .entry-content {
    ul {
      padding-left: 0;
    }

    ul > li {
      margin-bottom: 1rem;
    }

    ul > li > time {
      font-size: .8rem;
      line-height: 1rem;
    }

    ul > li > a {
      display: block;
    }

    nav {
      margin-top: 2rem;
    }
  }
}

/*-- 記事フッタ --*/
#container .social-buttons {
  .star-container {
    order: 1;
  }
  .bookmark-widget-counter {
    order: 2;
  }
  
  .bookmark-widget-counter img {
    vertical-align: bottom;
  }
}

#entry-footer-primary-modules .hatena-module {
  .hatena-module-title {
      font-size: var(--text-header-level-3);
      font-weight: bold;
      margin: 1em 0;
  }
}
.customized-footer {
  .hatena-module {
    .hatena-module-title {
      font-size: var(--text-header-level-3);
      font-weight: bold;
      margin: 1em 0;
    }

    .related-entries {
      padding: 0;
    }

    .related-entries .related-entries-item-inner {
      & {
        position: relative;
        padding-left: 1em;
        margin-bottom: var(--container-spacing-side);
      }

      &:after {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--frame-width);
        border-radius: var(--frame-width);
        background-color: var(--foreground-added);
      }
      
      &:has(a[href^="https://the.kalaclista.com/posts/"])::after {
        background-color: var(--foreground-posts);
      }
      
      &:has(a[href^="https://the.kalaclista.com/echos/"])::after {
        background-color: var(--foreground-echos);
      }
      
      &:has(a[href^="https://the.kalaclista.com/notes/"])::after {
        background-color: var(--foreground-notes);
      }

      .related-entries-title-link {
        font-weight: bold;
        line-height: var(--text-height-text);
      }

      .related-entries-entry-body {
        line-height: var(--text-height-subtext);
      }
      
      .related-entries-image-link {
        display: none;
      }
    }
  }
}

/*-- サイドバー --*/
#box2 {
  .hatena-module-body {
    font-size: var(--text-header-level-7);
    margin-bottom: calc(var(--container-spacing-side) * 2);
  }

  .hatena-module-body {
    p {
      --text-height: 1.5em;
    }
  }

  .hatena-module-profile {
    .hatena-module-body {
      & > span,
      & > a,
      & .profile-activities {
        display: block;
        text-align: center;
      }
      
      .hatena-follow-button-box {
        width: calc(var(--text-header-level-7) * 15);
        margin: var(--text-height-subtext) auto;
      }
      
      .profile-about {
        text-align: center;
      }
    }
  }
  
  .hatena-module-custom-accounts .hatena-module-body ul {
    margin-left: 0;
  }
  
  .hatena-module-custom-history {
    details ul {
      margin: 0;
    }
  }

  .hatena-module-links,
  .hatena-module-recent-entries,
  .hatena-module-category {
    .hatena-module-body {
      .hatena-urllist {
        padding-left: 1em;
        line-height: var(--text-height);
      }
    }
  }

  .search-form {
    & {
      display: flex;
      max-width: 100%;
      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);
    }
  }
}

/*-- フッタ --*/
#footer h3 {
  font-size: var(--text-header-level-1);
}

#footer .guest-footer-btn-container .guest-footer-btn:last-child::before {
  display: inline;
  content: '✨';
  margin-right: .25em;
}

#footer .footer-address {
  float: left;
  margin-right: .25em;
}

#footer .footer-address::after {
  display: inline;
  content: '🌵';
  margin-right: .25em;
  margin-left: .25em;
}

#footer .footer-address a {
  & {
    text-decoration: none;
  }

  &:link, &:visited,
  &:hover, &:active {
    span {
      text-decoration: underline;
    }
  }
}

#footer .footer-address a img {
  vertical-align: middle;
  margin-right: .25em;
}

#footer .services {
  margin: 0;
}

#footer #footer-inner::after {
  display: block;
  content: '';
  clear: both;
}

/*==== モバイル対応（後で整理する） ====*/
@media screen and (max-width: 1280px) {
  /* flexbox を解除 */
  #container #content-inner {
    & {
      display: block;
    }

    #wrapper, #box2 {
      width: auto;
      margin: 0 auto;
    }
  }

  #container .entry .entry-content .hatena-asin-detail {
    display: block;
  }

  #container .entry .entry-content .hatena-asin-detail .hatena-asin-detail-info {
    margin-left: 0;
  }

  #container .customized-footer .related-entries-title-link,
  #container .customized-footer .related-entries-entry-body {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 最大幅を45remに */
  #top-box,
  #container .archive-entries,
  #container .archive-header-category,
  #container .entry,
  #container .search-result,
  #container .pager,
  #box2 #box2-inner {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  #container .search-result + p {
    width: auto;
  }

  #top-box,
  #container,
  #box2,
  #footer {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
  }

  #top-box .breadcrumb {
    margin-left: var(--frame-width);
    margin-right: var(--frame-width);
  }

  #footer #footer-inner {
    width: auto;
  }

  #container,
  #footer {
    padding: 0 calc(var(--container-spacing-side) * 2);
  }

  #footer {
    .guest-footer-btn-container {
      text-align: center;
    }

    .guest-footer-btn-container .guest-footer-btn + .guest-footer-btn::after {
      display: inline;
      content: '✨';
    }

    .footer-address {
      float: none;
      text-align: center;
      margin-bottom: var(--container-spacing-side);
    }

    .footer-address::after {
      margin: calc(var(--container-spacing-side) * 2) 0;
    }
  }
}

@media screen and (max-width: 400px) {
  :root {
    --container-spacing-side: var(--frame-width);
  }
}