.common-header-wrapper {
  background-image: url(../img/note/bg-note-header.svg);
}

#note-category li {
  display: inline;
  padding-right: 1em;
}
#note-category li:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f02b";
}

.note-list {
  margin-top: 2em;
}
.note-list h1 {
  margin-bottom: 1em;
}

.note-body {
  columns: 2 auto;
  column-gap: 2em;
  margin: 3em auto;
  width: 90%;
}

.note-body-contents:after {
  font-family: 'Font Awesome 5 Free';
  content: "  \f141";
}

.note-eyecatch {
  display: block;
  padding-top: 1em;
  text-align: center;
}
.note-eyecatch img {
  width: 90%;
}

.note-name {
  background: #eee;
  border-left: 5px #ccc solid;
  padding: .5em 1em;
}

.note-noteUrl {
  display: block;
  text-align: right;
}

.note-publishAt {
  display: block;
  font-size: .8em;
  text-align: right;
}

@media (max-width: 520px) {
  .note-body {
    columns: 1 auto;
    padding: 1em 0;
    width: 100%;
  }
}