html {
  font-size: 62.5%;
}
html {
  cursor: unset;
}
a,
a:link,
a:visited {
  color: #fb3a50;
  text-decoration: none;
}
a:hover {
  color: #fc7383;
}
.article {
  width: calc(100% - 26rem);
}
.article h2 {
  border-bottom: #cac9cf solid 1px;
}
.article .headline__anchor {
  font-size: 70%;
  vertical-align: super;
}
.article p {
  line-height: 1.8;
}
.article p > code {
  font-family: 'Source Code Pro', monospace;
  background-color: #e7ddd0;
  margin: 0.2rem;
  padding: 0.2rem 0.3rem;
}
.article blockquote {
  border-left: 0.5rem solid #bdbbc3;
  color: #62606c;
  padding: 0.5rem 0 0.5rem 2rem;
  margin: 2rem 0;
}
.article__inner {
  margin: 0 1.5rem;
}
.body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6em;
  color: #1f1f1f;
  background-color: #fefdfb;
}
.footer__inner {
  height: 20rem;
  background-color: #ebc084;
  margin: 0 auto;
  min-width: 32rem;
  max-width: 144rem;
}
.header__inner {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  min-width: 32rem;
  max-width: 144rem;
  height: 20rem;
  overflow-y: hidden;
  background-size: cover;
  background-image: url("/img/background.svg");
  background-position: 50% 36%;
}
.header__yantene {
  width: 40%;
  height: 100%;
  position: absolute;
  right: 10%;
  bottom: 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-image: url("/img/yantene.svg");
  background-position: 50% 10%;
}
.header__snow-list {
  display: flex;
  justify-content: space-around;
}
.header__snow {
  animation: snowing 30s linear infinite, swinging 20s linear infinite;
  width: min(1.8vw, calc(144rem * 18 / 1000));
  height: min(1.8vw, calc(144rem * 18 / 1000));
  border-radius: 50%;
  background-color: #f5f5f5;
}
.header__snow:nth-of-type(1) {
  animation-delay: -28.548100735234947s;
}
.header__snow:nth-of-type(2) {
  animation-delay: -16.409025579627833s;
}
.header__snow:nth-of-type(3) {
  animation-delay: -15.736226949201583s;
}
.header__snow:nth-of-type(4) {
  animation-delay: -18.26961840027093s;
}
.header__snow:nth-of-type(5) {
  animation-delay: -7.083160158346198s;
}
.header__snow:nth-of-type(6) {
  animation-delay: -24.86588520448839s;
}
.header__snow:nth-of-type(7) {
  animation-delay: -4.376291517624898s;
}
.header__snow:nth-of-type(8) {
  animation-delay: -25.534126132923426s;
}
.header__snow:nth-of-type(9) {
  animation-delay: -14.149530585984989s;
}
.header__snow:nth-of-type(10) {
  animation-delay: -14.185101431597717s;
}
.header__snow:nth-of-type(11) {
  animation-delay: -29.556748832246633s;
}
.header__snow:nth-of-type(12) {
  animation-delay: -13.873064341498427s;
}
.header__snow:nth-of-type(13) {
  animation-delay: -22.151821432492778s;
}
.header__snow:nth-of-type(14) {
  animation-delay: -3.153855151718763s;
}
.header__snow:nth-of-type(15) {
  animation-delay: -13.376250869460812s;
}
@-moz-keyframes swinging {
  25% {
    margin-right: min(1.8vw, calc(144rem * 18 / 1000));
  }
  75% {
    margin-left: min(1.8vw, calc(144rem * 18 / 1000));
  }
}
@-webkit-keyframes swinging {
  25% {
    margin-right: min(1.8vw, calc(144rem * 18 / 1000));
  }
  75% {
    margin-left: min(1.8vw, calc(144rem * 18 / 1000));
  }
}
@-o-keyframes swinging {
  25% {
    margin-right: min(1.8vw, calc(144rem * 18 / 1000));
  }
  75% {
    margin-left: min(1.8vw, calc(144rem * 18 / 1000));
  }
}
@keyframes swinging {
  25% {
    margin-right: min(1.8vw, calc(144rem * 18 / 1000));
  }
  75% {
    margin-left: min(1.8vw, calc(144rem * 18 / 1000));
  }
}
@-moz-keyframes snowing {
  0% {
    margin-top: calc(-1 * min(1.8vw, calc(144rem * 18 / 1000)));
  }
  100% {
    margin-top: 20rem;
  }
}
@-webkit-keyframes snowing {
  0% {
    margin-top: calc(-1 * min(1.8vw, calc(144rem * 18 / 1000)));
  }
  100% {
    margin-top: 20rem;
  }
}
@-o-keyframes snowing {
  0% {
    margin-top: calc(-1 * min(1.8vw, calc(144rem * 18 / 1000)));
  }
  100% {
    margin-top: 20rem;
  }
}
@keyframes snowing {
  0% {
    margin-top: calc(-1 * min(1.8vw, calc(144rem * 18 / 1000)));
  }
  100% {
    margin-top: 20rem;
  }
}
.hljs {
  display: block;
  margin: 0 -1.5rem 1rem;
  padding: 2rem 2rem;
  font-family: 'Source Code Pro', monospace;
  overflow-x: auto;
  color: #c3c6c4;
  background: #323639;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: bold;
}
.hljs-title,
.hljs-name {
  color: #efc371;
}
.hljs-comment,
.hljs-meta,
.hljs-meta .hljs-keyword {
  color: #71787f;
}
.hljs-number,
.hljs-symbol,
.hljs-literal,
.hljs-deletion,
.hljs-link {
  color: #c66;
}
.hljs-string,
.hljs-doctag,
.hljs-addition,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #b5bc67;
}
.hljs-attribute,
.hljs-code,
.hljs-selector-id {
  color: #b092b9;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-bullet,
.hljs-tag {
  color: #80a1bc;
}
.hljs-subst,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #89bdb5;
}
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-quote,
.hljs-section,
.hljs-selector-class {
  color: #dd925f;
}
.main__inner {
  display: flex;
  background-color: #fdf8f2;
  margin: 0 auto;
  min-width: 32rem;
  max-width: 144rem;
}
.sidebar {
  width: 26rem;
  font-size: 1.4rem;
  background-color: #f9ebd8;
}
.taglist {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.4rem;
  list-style-type: none;
  padding: 0;
  margin: 0 -0.5rem;
}
.taglist__item {
  padding: 0 0.5rem;
  margin: 0 0.5rem 0.5rem;
  border: solid #fb3a50 1px;
  border-radius: 4px;
}
.taglist__item:hover {
  opacity: 0.5;
}
.timestamp {
  margin-bottom: 1rem;
}
.timestamp__published,
.timestamp__modified {
  display: block;
  color: #4d4d4d;
  font-size: 1.4rem;
  text-align: right;
}
.toc {
  margin: 0;
  padding: 1.5rem;
  position: sticky;
  background-color: #f6e4ca;
  overflow-y: auto;
  max-height: calc(100vh - 20rem);
  top: 0;
}
.toc-child {
  padding-inline-start: 2rem;
}
.toc-item {
  list-style-type: none;
}
.toc-link {
  display: block;
  margin-bottom: 0.2rem;
  padding: 0.3rem 0;
  padding-left: 0.3rem;
}
.toc-link__current {
  background-color: #f1d2a7;
}
.toc-link:hover {
  background-color: #f4dbb9;
}
.toc-link:link,
.toc-link:visited {
  text-decoration: none;
}
