@font-face {
  font-family: "NotoSansCJKjp-Jxck";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src:
    local("NotoSansCJKjp-Bold.otf"),
    local("NotoSansJP-Bold.otf"),
    url("//jxck.io/assets/font/NotoSansCJKjp-Jxck-Regular-201802.woff2") format("woff");
}

@font-face {
  font-family: "NotoSansCJKjp-Jxck";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src:
    local("NotoSansCJKjp-Bold.otf"),
    local("NotoSansJP-Bold.otf"),
    url("//jxck.io/assets/font/NotoSansCJKjp-Jxck-Bold-201802.woff2") format("woff");
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans", "Noto Sans CJK JP", "NotoSansCJKjp-Jxck", sans-serif;
  color: #222;
  background-color: #fefefe;
}

code {
  font-family: monospace, "Noto Sans", "Noto Sans CJK JP", "NotoSansCJKjp-Jxck", sans-serif;
}

iframe {
  display: block;
  max-width: 100%;
  margin: 1em 0;
}

.archive {
  font-size: 1.2em;
  line-height: 2em;
}

.archive ul {
  margin: 0;
}

.archive time {
  padding-right: 0.5em;
}

.archive time::after {
  content: ":";
}

.archive .tags {
  font-size: 0.8em;
  margin-left: 1em;
}

.tags a {
  margin: 0 0.2em;
}

img {
  max-width: 100%;
  height: auto;
}

audio {
  width: 70%;
}

@media screen and (max-device-width: 480px) {
  audio {
    width: 100%;
  }
}