@charset "utf-8";

@font-face {
  font-family: "TheSansMonoCd";
  src: url("/fonts/TheSansMonoCdOffice-Regular.woff2") format("woff2"),
       url("/fonts/TheSansMonoCdOffice-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TheSansMonoCd";
  src: url("/fonts/TheSansMonoCdOffice-Bold.woff2") format("woff2"),
       url("/fonts/TheSansMonoCdOffice-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TheSansMonoCd";
  src: url("/fonts/TheSansMonoCdOffice-Italic.woff2") format("woff2"),
       url("/fonts/TheSansMonoCdOffice-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "TheSansMonoCd";
  src: url("/fonts/TheSansMonoCdOffice-BoldItalic.woff2") format("woff2"),
       url("/fonts/TheSansMonoCdOffice-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --body-font-size: 1rem;
  --body-line-height: 1.75;
  --body-leading: calc(var(--body-font-size) * var(--body-line-height));
  --body-indent: calc(var(--body-font-size) * 2);

  --body-font-family: "TsukuGoPr5-R", sans-serif;
  --body-font-weight: 400;
  --body-bold-font-family: "TsukuGoPro-B", sans-serif;
  --body-bold-font-weight: 700;
  --code-font-family: "TheSansMonoCd", "UDKakugoC80Pro-R", monospace;
  --code-font-weight: 400;
  --code-font-width-ratio: 5/10;
  --code-bold-font-family: "TheSansMonoCd", "UDKakugoC80Pro-B", monospace;
  --code-bold-font-weight: 700;

  --color-text-muted: hsl(0, 0%, 46%);
  --color-divider: hsl(0, 0%, 88%);
}

@media (orientation: portrait) {
  @media (min-width: 20em) {
    :root {
      --body-width: 18rem;
      --image-width-medium: 15rem;
      --image-width-small: 12rem;
    }
  }

  @media (min-width: 22.5em) {
    :root {
      --body-width: 20rem;
      --image-width-medium: 16rem;
    }
  }

  @media (min-width: 25em) {
    :root {
      --body-width: 22rem;
      --image-width-medium: 17rem;
    }
  }

  @media (min-width: 30em) {
    :root {
      --body-width: 26rem;
      --image-width-medium: 21rem;
      --image-width-small: 16rem;
    }
  }

  @media (min-width: 37.5em) {
    :root {
      --body-width: 32rem;
      --image-width-medium: 24rem;
    }
  }
}

@media (orientation: landscape) {
  @media (min-width: 30em) {
    :root {
      --body-width: 24rem;
      --image-width-medium: 20rem;
      --image-width-small: 16rem;
    }
  }

  @media (min-width: 35em) {
    :root {
      --body-width: 28rem;
      --image-width-medium: 22rem;
    }
  }

  @media (min-width: 40em) {
    :root {
      --body-width: 32rem;
      --image-width-medium: 24rem;
    }
  }
}

@media (min-width: 45em) {
  :root {
    --body-width: 36rem;
    --image-width-medium: 28rem;
    --image-width-small: 20rem;
  }
}

@media (min-width: 48em) {
  :root {
    --body-margin-left: 6rem;
  }
}

:not(:lang(ja)) {
  font-kerning: auto;
}

:target {
  scroll-margin-top: var(--scroll-margin-top, var(--body-leading));
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-kerning: none;
  line-break: normal;
  overflow-wrap: break-word;
  hanging-punctuation: allow-end;

  width: var(--body-width, auto);
  max-width: calc(100% - 2rem);
  margin:
    var(--body-leading)
    auto
    calc(var(--body-leading) * 3)
    var(--body-margin-left, auto);
}

main {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows:
    var(--body-leading)
    var(--body-leading)
    minmax(calc(var(--body-leading) * 3), auto)
    calc(var(--body-leading) * 3)
    auto
    calc(var(--body-leading) * 3);
  grid-template-areas:
    "meta"
    "."
    "title"
    "."
    "body"
    ".";
}

main > article {
  display: contents;
}

h1 {
  grid-area: title;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0;
}

h2 {
  --scroll-margin-top: calc(var(--body-leading) * 2);
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  font-size: 1rem;
  margin-top: calc(var(--body-leading) * 2);
  margin-bottom: calc(var(--body-leading) * 1);
  text-align: center;
}

h2::after {
  content: "\2015";
  display: block;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
}

h3 {
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  font-size: 1rem;
  margin-top: calc(var(--body-leading) * 1);
  margin-bottom: 0;
}

h3 + p {
  margin-top: 0;
}

hr {
  color: inherit;
  height: auto;
  border: 0;
  text-align: center;
  margin-top: calc(var(--body-leading) / 2);
  margin-bottom: calc(var(--body-leading) / 2 * -1);
}

hr::before {
  content: "\ff0a"; /* FULLWIDTH ASTERISK */
}

p,
ol,
ul,
dl {
  margin-top: var(--body-leading);
  margin-bottom: 0;
}

p:not(.Credit):not([role="note"]) + p {
  margin-top: 0;
  text-indent: var(--body-indent);
}

ol,
ul,
dl {
  padding-left: var(--body-indent);
}

ol p, ul p, dl p,
ol ol, ul ol, dl ol,
ol ul, ul ul, dl ul,
ol dl, ul dl, dl dl {
  margin-top: 0;
}

ul li {
  list-style-type: none;
  position: relative;
}

ul li:before {
  content: "\2013";
  position: absolute;
  right: 100%;
  margin-right: 0.5em;
}

dt {
  text-indent: calc(var(--body-indent) * -1);
}

dd {
  margin-left: 0;
}

blockquote {
  margin: 0 0 0 var(--body-indent);
}

code, kbd, samp {
  font-family: var(--code-font-family);
  font-weight: var(--code-font-weight);
}

code b, code strong,
kbd b, kbd strong,
samp b, samp strong,
h1 code, h1 kbd, h1 samp,
h2 code, h2 kbd, h2 samp,
h3 code, h3 kbd, h3 samp,
b code, b kbd, b samp,
strong code, strong kbd, strong samp {
  font-family: var(--code-bold-font-family);
  font-weight: var(--code-bold-font-weight);
}

pre {
  font-family: inherit;
  padding-left: var(--body-indent);
  margin-top: var(--body-leading);
  margin-bottom: 0;
  overflow: auto;
  overflow-wrap: normal;
  -webkit-overflow-scrolling: touch;
}

code, kbd, samp {
  line-height: 0;
  margin-left: 0.125em;
  margin-right: 0.125em;
}

pre code,
pre kbd,
pre samp {
  margin-left: 0;
  margin-right: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.125em;
}

a[href^="#fn:"],
a[href^="#fnref:"] {
  color: var(--color-text-muted);
}

img {
  max-width: var(--image-width, 100%);
  height: auto;
}

iframe {
  max-width: 100%;
}

small {
  font-size: 100%;
  color: var(--color-text-muted);
}

sup,
sub {
  font-size: 80%;
  line-height: 0;
}

b, strong {
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
}

del {
  text-decoration-line: line-through;
  color: var(--color-text-muted);
}

ins {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

figure {
  margin: calc(var(--body-leading) * 2) auto;
}

figure img {
  box-shadow: 0 0 0 1px var(--color-divider);
}

figure img.-small {
  --image-width: var(--image-width-small);
}

figcaption {
  color: var(--color-text-muted);
}

table {
  display: block;
  overflow: auto;
  text-align: left;
  padding-left: var(--body-indent);
  margin-top: calc(var(--body-leading) * 2);
  margin-bottom: calc(var(--body-leading) * 2);
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

caption {
  caption-side: bottom;
  text-align: left;
  color: var(--color-text-muted);
}

th, td {
  padding: 0 2em 0 0;
  vertical-align: baseline;
  white-space: nowrap;
}

th {
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
}

thead th {
  vertical-align: bottom;
}

tbody > tr:first-child > *,
tbody > tr:last-child > * {
  background-image: linear-gradient(var(--color-divider) 0 100%);
  background-size: auto 1px;
  background-repeat: no-repeat;
}

tbody > tr:first-child > * {
  padding-top: var(--body-leading);
  background-position: left 0 top calc(var(--body-leading) / 2);
}

tbody > tr:last-child > * {
  padding-bottom: var(--body-leading);
  background-position: left 0 bottom calc(var(--body-leading) / 2);
}

.Content {
  grid-area: body;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.Content > :first-child {
  margin-top: 0;
}

.Content > :last-child {
  margin-bottom: 0;
}

.Credit {
  margin-top: 0;
  margin-left: calc(var(--body-indent) * 2);
  text-align: right;
}

.Footnotes dt {
  float: left;
  margin-left: calc(var(--body-indent) * -1);
  margin-right: 1em;
  text-indent: 0;
}

.Logo {
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  margin-top: 0;
}

.PostList li,
.ReferenceList li {
  text-indent: calc(var(--body-indent) * -1);
}

.PostList li::before,
.ReferenceList li::before {
  content: normal;
}

.PostList__meta {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.PostList__separator {
  font-family: var(--code-font-family);
  font-size: calc(1em / (var(--code-font-width-ratio)));
  line-height: 0;
  pointer-events: none;
}

.PageMeta {
  grid-area: meta;
  color: var(--color-text-muted);
}

.SiteFooter::before {
  content: "\30fb"; /* KATAKANA MIDDLE DOT */
  display: block;
}

.SiteFooter ul {
  padding-left: 0;
}

.SiteFooter ul li::before {
  content: normal;
}