body {
  background-color: #f6f6f6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #00375c;
}

a {
  color: #ffffff;
}

.p-text--1 {
  color: #ee4f8f;
}
.p-text--2 {
  color: #f2dc62;
}
.p-text--3 {
  color: #f4b069;
}
.p-text--4 {
  color: #a7d364;
}
.p-text--5 {
  color: #22b1dd;
}
.p-text--6 {
  color: #be2d88;
}
/* Decoration */
.p-file-index {
  position: relative;
  display: block;
  padding-left: 16px;
}
.p-file-index::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 8px;
  height: 100%;
  border: 1px solid #bdbfbf;
  border-radius: 4px;
  content: "";
}
.p-file-index.front::before {
  background-color: #ee4f8f;
}
.p-file-index.lang::before {
  background-color: #f2dc62;
}
.p-file-index.db::before {
  background-color: #f4b069;
}
.p-file-index.os::before {
  background-color: #a7d364;
}
.p-file-index.tools::before {
  background-color: #22b1dd;
}
.p-file-index.other::before {
  background-color: #be2d88;
}

.p-file-symbol {
  position: relative;
  display: inline-block;
  height: 2.5em;
  width: 2.5em;
  margin: 3px;
  border: 1px solid #bdbfbf;
  background-color: #a1f7ff;
  vertical-align: middle;
}

.p-file-symbol::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px); /* 外側の線になる要素の幅を指定する*/
  height: calc(100% + 8px); /* 外側の線になる要素の高さを指定する */
  border: 1px solid #000; /* 外側の線になる一本線の枠線をひく*/
}

.p-file-symbol--red {
  position: relative;
  display: inline-block;
  height: 2.5em;
  width: 2.5em;
  margin: 3px;
  border: 1px solid #bdbfbf;
  background-color: #db4437;
  vertical-align: middle;
}
.p-file-symbol--red::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px); /* 外側の線になる要素の幅を指定する*/
  height: calc(100% + 8px); /* 外側の線になる要素の高さを指定する */
  border: 1px solid #000; /* 外側の線になる一本線の枠線をひく*/
}

/* End of Decoration */

.l-container {
  padding-left: 0;
  padding-right: 0;
}

/* Header */
.b-header {
  padding: 0.5rem 0;
  background-color: #006e91;
  box-shadow: 0 3px 10px 0 rgba(98, 122, 130, 0.5);
  z-index: 99;
}

.b-navbar {
  padding: 0 1rem;
  align-items: center;
}

.b-navbar > ul {
  margin-bottom: 0;
}

.e-logo {
  width: 32px;
  height: auto;
}

.e-branding {
  font-size: 1.75rem;
  font-family: "Candal", sans-serif;
  color: #ffffff;
  text-align: left;
  margin: 0 0 0 0.5rem;
}

.e-branding:hover {
  text-decoration: none;
}

@media (max-width: 63.9375em) {
  .c-hamburger {
    position: relative;
    width: 38px;
    height: 38px;
    border: none;
    outline: none;
    background: transparent !important;
    outline: none;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  .c-hamburger__line {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    margin: auto;
    width: 18px;
    height: 2px;
    background-color: #ffffff;
    -webkit-transition: inherit;
    transition: inherit;
  }
  .c-hamburger__line::before,
  .c-hamburger__line::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: inherit;
    -webkit-transition: inherit;
    transition: inherit;
  }

  .c-hamburger__line::before {
    top: -5px;
  }

  .c-hamburger__line::after {
    top: 5px;
  }

  .c-hamburger[aria-expanded="true"] .c-hamburger__line {
    background-color: transparent;
  }

  .c-hamburger[aria-expanded="true"] .c-hamburger__line::before,
  .c-hamburger[aria-expanded="true"] .c-hamburger__line::after {
    top: 0;
    background-color: #ffffff;
  }

  .c-hamburger[aria-expanded="true"] .c-hamburger__line::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .c-hamburger[aria-expanded="true"] .c-hamburger__line::after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

/* Header */
/* Breadcrumbs */
.b-breadcrumbs {
  padding: 0.5em;
  margin: 0 1rem -2rem 1rem;
}
.c-breadcrumbs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-breadcrumbs__item {
  display: inline;
  color: #536878;
}

.c-breadcrumbs__item a {
  color: #536878;
}

.c-breadcrumbs__item:nth-child(n + 2)::before {
  margin: 0 5px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "/\00a0";
}
/* Breadcrumbs */

.b-contents {
  margin: 2rem 0;
}

.c-nav__item > a {
  color: #536878;
  text-decoration: none;
}
.c-nav__item > a:hover {
  color: #536878;
}
.c-nav__item > a:visited {
  color: #536878;
}
.c-nav__item {
  list-style: none;
}

/* Top page Contents */
.b-new {
  padding: 0 2rem 1rem;
  margin: 0 1rem;
  background-color: #ffffff;
}

.b-new h1 {
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
  padding-top: 2rem;
}
/* Top page Contents */

/* Second page Contents */
.b-toc {
  padding: 0 2rem;
  margin: 0 1rem;
  background-color: #ffffff;
}

.b-toc h1 {
  position: relative;
  vertical-align: middle;
  margin-top: 0;
  padding-top: 2rem;
  font-size: 2rem;
  border-bottom: 2px solid #ccc;
}

.b-toc h1::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: "";
  width: 20%;
  border-bottom: 2px solid #777;
}

.e-terms {
  position: relative;
  border-bottom: 2px dotted #ccc;
}

.e-terms::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: "";
  width: 20%;
  border-bottom: 2px solid #777;
}

.e-toc-title {
  color: #536878;
}
/* End of Second page Contents */

/* Single page */
.b-post {
  padding: 0 2rem;
  margin: 0 1rem;
  min-width: 0;
  background-color: #ffffff;
}

.b-post-header > h1 {
  margin: 2rem 0 0 0;
}

.b-post a {
  color: #f4b069;
}

.b-post h2 {
  display: inline-block;
  position: relative;
  border-left: solid 5px #8c7851;
  padding-left: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.b-post h2::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: solid 5px #eaddcf;
}
/* End of Single page */

/** Right side bar **/
.b-r-sidebar {
  display: none;
}
/** End of Right side bar **/

.b-excerpt {
  margin-left: 1.25em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.b-excerpt-title {
  margin: 0;
  padding-left: 1rem;
}

.e-excerpt-title {
  font-size: 1.5rem;
  color: #00375c;
  text-align: center;
  text-decoration: none;
}

.b-excerpt-body {
  padding-left: 1rem;
}

.b-excerpt-body > a {
  color: #006e91;
}
.b-excerpt-body > p {
  margin-bottom: 0;
}

/* meta info */
.b-meta-info {
  font-size: 0.75rem;
  color: #b0bec5;
}

.p-mi {
  display: inline-block;
  font: normal normal normal 14px/1 "Material Icons";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.p-mi-edit:before {
  content: "\e3c9";
}
/* End of meta info */

/* Related Links */
.b-Related-link {
  margin: 0 1rem;
  padding-left: 1rem;
  background-color: #ffffff;
}

.e-item-name {
  display: inline-block;
  margin-top: 0;
  padding-top: 2rem;
  padding-left: 1rem;
  padding-bottom: 0;
  vertical-align: middle;
}
/* End of Related Links */

/* Media */
.b-media {
  margin: 0 1rem;
  background-color: #f6f6f6;
}

.m-left-space {
  padding-left: 1rem;
}

.p-media-title {
  margin-top: 1rem;
  padding-left: 1rem;
  border-top: 1px solid #00375c;
  border-bottom: 1px solid #00375c;
}
/* Media */

/* Category */
.b-category {
  margin: 0 1rem 0;
  padding: 0 1rem;
  background-color: #ffffff;
}
.p-category-title {
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.p-category-item {
  display: inline-block;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
  background-color: #006e91;
  text-align: center;
  border: solid 1px #006e91;
  border-radius: 1em;
}
/* Category */

/* Footer */
.b-footer {
  background-color: #00375c;
}

.b-footer p {
  color: #ffffff;
  text-align: center;
  font-size: 80%;
}
/* Footer */

/* Contents Navigation Display sm */
.b-contents-nav {
  position: absolute;
  padding-top: 2rem;
  padding-left: 2rem;
  width: 100vw;
  background-color: #ffffff;
  transform: translateX(100%);
  transition: all 0.5s 0s ease;
  z-index: 999;
}

.is-drawerActive .b-contents-nav {
  transform: translateX(0);
}
/* Contents Navigation Display sm */

@media (min-width: 40em) {
}
@media (min-width: 64em) {
  .e-logo {
    width: 50px;
    height: auto;
  }

  .e-branding {
    font-size: 2.8125rem;
    font-family: "Candal", sans-serif;
    color: #ffffff;
    text-align: left;
    margin: 0 0 0 0.5rem;
  }

  .b-contents-nav {
    position: static;
    margin-left: 1rem;
    padding: 2rem 0 1rem 2rem;
    width: 17rem;
    font-size: 0.88rem;
    transform: translateX(0);
    z-index: 0;
  }
  /** Right side bar **/
  .b-r-sidebar {
    display: block;
    margin-right: 1rem;
    width: 315px;
    height: auto;
    background-color: #ffffff;
  }
  /** Right side bar **/
  /** Ranking **/
  .c-ranking-header {
    display: block;
    padding: 0 1rem;
    color: #ffffff;
    background-color: #006e91;
  }
  .c-ranking-panel {
    counter-reset: li;
  }
  .c-ranking-panel {
    margin-left: 0;
    padding: 1rem 1rem 0.5rem 1rem;
  }

  .c-ranking-summary {
    position: relative;
    list-style: none;
    padding-left: 30px;
    margin-bottom: 1em;
  }

  .c-ranking-summary__title a {
    font-size: 1rem;
    color: #00375c;
  }
  .c-ranking-summary::before {
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 10px;
    height: 100%;
    font-size: 1.5em;
    border-right: solid 1px #011729;
    counter-increment: li;
    content: counter(li);
  }
  .c-ranking-summary__meta {
    font-size: 0.75rem;
    color: #b0bec5;
  }
  /** Ranking **/
}