// 本文
.article {
  padding: var(--article-padding);
  word-break: break-word;

  @include media-mobile {
    padding: var(--article-padding-mobile);

    $top-padding: calc(var(--header-height) - var(--font-size-mobile));
    $top-padding-minus: calc(#{$top-padding} * -1);

    h1[id]::before,
    h2[id]::before,
    h3[id]::before,
    h4[id]::before,
    h5[id]::before,
    h6[id]::before {
      content: "";
      display: block;
      height: var(--top-padding);
      margin-top: var(--top-padding-minus);
    }
  }

  > .body {
    dl {
      display: inline-grid;
      grid-template-columns: auto 1fr;
      display: -ms-inline-grid;
      -ms-grid-columns: auto 1fr;
    }

    dt {
      grid-column: 1;
      -ms-grid-column: 1;
      font-style: italic;
      font-weight: bold;
    }

    dd {
      grid-column: 2;
      -ms-grid-column: 2;
      margin-bottom: 0.5em;
    }

    h2, h3, h4, h5, h6 {
      font-weight: bold;
      line-height: 1.1em;
      margin: 1rem 0;
    }

    h2 {
      border-bottom: var(--article-h2-border-bottom);
      font-size: var(--article-h2-font-size);
    }

    h3 {
      border-bottom: var(--article-h3-border-bottom);
      font-size: var(--article-h3-font-size);
    }

    h4 {
      border-bottom: var(--article-h4-border-bottom);
      font-size: var(--article-h4-font-size);
    }

    h5 {
      border-bottom: var(--article-h5-border-bottom);
      font-size: var(--article-h5-font-size);
    }

    h6 {
      border-bottom: var(--article-h6-border-bottom);
      font-size: var(--article-h6-font-size);
    }

    p {
      margin: 1em 0;
    }

    pre {
      overflow: auto;
      white-space: pre-wrap;
    }

    table {
      border: var(--border-common);
      border-collapse: collapse;

      td, th {
        border: var(--border-common);
        padding: 0.5em;
      }
    }

    code {
      background: var(--article-code-bg);
      border: var(--article-code-border);
      border-radius: var(--article-code-border-radius);
      color: var(--article-code-color);
      font-family: var(--article-code-font-family);

      line-height: 2;
      overflow: auto;
      padding: 0 0.5em;
      word-break: break-all;
      word-wrap: break-word;
    }

    pre code {
      display: block;
      padding: var(--article-pre-code-padding);
    }

    dl dt {
      font-style: normal;
    }
  }
}