@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
body {
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  color: #333333;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.articleArea {
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template: "left header header header header header" 100px "left ...... ...... ...... ...... ......" 70px "left ...... main   ...... aside  ......" 1fr "left ...... ...... ...... ...... ......" 100px "left footer footer footer footer footer" 40px/250px minmax(40px, 1fr) minmax(0, 700px) 50px 270px minmax(40px, 1fr);
}
@media screen and (max-width: 1200px) {
  .articleArea {
    max-width: 1000px;
    width: 100%;
    grid-template: "header header header header header" 100px "...... ...... ...... ...... ......" 50px "...... main   ...... aside  ......" 1fr "...... ...... ...... ...... ......" 50px "footer footer footer footer footer" 40px/minmax(40px, 1fr) minmax(0, 700px) 50px 250px minmax(40px, 1fr);
  }
}
@media screen and (max-width: 900px) {
  .articleArea {
    max-width: 800px;
    width: 100%;
    grid-template: "... header ..." 100px "... ...... ..." 50px "... main   ..." 1fr "... ...... ..." 50px "... footer ..." 40px/20px minmax(0, 1fr) 20px;
  }
}
.articleArea header {
  grid-area: header;
}
.articleArea main {
  grid-area: main;
}
.articleArea aside {
  grid-area: aside;
}
.articleArea footer {
  grid-area: footer;
}
.articleArea .tocSidebar {
  grid-area: left;
  left: 0;
}
@media screen and (max-width: 1200px) {
  .articleArea .tocSidebar {
    left: -300px;
    transition: all 0.5s;
  }
  .articleArea .tocSidebar.open {
    left: 0;
    transition: all 0.5s;
  }
}
@media screen and (max-width: 1200px) {
  .articleArea .mask.open {
    background-color: #000000;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    cursor: pointer;
    transition: all 0.5s;
  }
}

.topArea {
  width: 900px;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template: "header" 100px "......" 70px "main  " 1fr "......" 50px "footer" 40px/1fr;
}
@media screen and (max-width: 1100px) {
  .topArea {
    max-width: 800px;
    width: 100%;
    grid-template: "... header ..." 100px "... ...... ..." 50px "... main   ..." 1fr "... ...... ..." 50px "... footer ..." 40px/20px minmax(0, 1fr) 20px;
  }
}
.topArea header {
  grid-area: header;
}
.topArea main {
  grid-area: main;
}
.topArea footer {
  grid-area: footer;
}

header {
  background-color: #F9FBFF;
  box-shadow: 0 0 0 100vmax #F9FBFF;
  -webkit-clip-path: inset(0 -100vmax);
          clip-path: inset(0 -100vmax);
  text-align: center;
}
header .headerCopy {
  font-size: 0.9em;
  margin-bottom: 0.5em;
}
header .headerLogo {
  height: 25px;
}
header .headerTitle {
  font-weight: bold;
  font-size: 1.8em;
}
header a {
  text-decoration: none;
  color: #333333;
}

.tocSidebar {
  background-color: #FFFFFF;
  width: 250px;
  height: 100vh;
  border-right: 1px solid #DFDFDF;
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  position: fixed;
  top: 0;
  overflow-y: scroll;
  z-index: 10;
}
.tocSidebar .thumbnail {
  width: 100%;
  border: 1px solid #F5F5F5;
  border-radius: 10px;
}
.tocSidebar ul {
  padding: 0;
  list-style: none;
}
.tocSidebar ul li {
  font-size: 0.9em;
  margin: 10px 0;
}
.tocSidebar ul li a {
  display: flex;
  text-decoration: none;
}
.tocSidebar ul li a .number {
  font-weight: bold;
  color: #BDBDBD;
  margin-right: 0.7em;
}
.tocSidebar ul li a .title {
  color: #BDBDBD;
}
.tocSidebar ul li.active a .number {
  color: #42A5F5;
}
.tocSidebar ul li.active a .title {
  color: #333333;
  font-weight: bold;
}
.tocSidebar ul li:hover a .title {
  font-weight: bold;
}

.main a {
  color: #42A5F5;
}
.main .infoArea {
  margin-bottom: 1em;
  font-size: 0.9em;
}
.main .infoArea .date {
  margin-right: 1em;
}
.main .infoArea .tag {
  background-color: #42A5F5;
  color: #ffffff;
  margin-right: 0.5em;
  padding: 0 0.8em;
  border-radius: 1em;
  text-decoration: none;
}
.main h1 {
  color: #42A5F5;
  font-size: 2em;
  font-weight: 700;
  margin: 0 0 24px;
}
.main h2 {
  color: #42A5F5;
  font-size: 1.2em;
  font-weight: 400;
  margin: 64px 0 24px;
  padding: 10px 0;
  border-top: #42A5F5 dashed 1px;
  border-bottom: #42A5F5 dashed 1px;
}
.main h3 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 40px 0 16px;
}
.main p {
  margin: 0 0 20px 0;
  line-height: 2em;
  text-align: justify;
}
.main ul li, .main ol li {
  line-height: 2em;
}
.main figure {
  margin: 0 0 40px 0;
}
.main img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.main table {
  margin: 0 0 30px 0;
  line-height: 1em;
  border-collapse: collapse;
}
.main table thead {
  background-color: #f8f7f3;
}
.main table th {
  background-color: #f8f7f3;
  white-space: nowrap;
}
.main table tbody tr:hover {
  background-color: #FAFAFA;
}
.main table th, .main table td {
  border: 1px solid #E0E0E0;
  padding: 0.6em 0.7em;
}
.main table th p, .main table td p {
  margin: 0;
  line-height: 1.5em;
  text-align: left;
}
.main blockquote {
  color: #9E9E9E;
  font-size: 0.9em;
  margin: 0 0 30px 0;
  padding-left: 1.5em;
  line-height: 2em;
  border-left: #E0E0E0 solid 5px;
}
.main pre {
  width: 100%;
  margin: 0 0 30px 0;
  border-radius: 5px;
  overflow-x: scroll;
}
.main pre code {
  line-height: 1.7em;
}
.main code {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "monospace", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.main details {
  margin-bottom: 30px;
  border: solid 1px #BDBDBD;
}
.main details summary {
  font-weight: bold;
  margin: 0;
  padding: 10px;
}
.main details .content {
  overflow: hidden;
}
.main details .content_inner {
  padding: 10px 10px 0 10px;
}
.main .cp_embed_wrapper {
  margin-bottom: 20px;
}
.main iframe {
  border: none;
}
.main strong {
  font-style: normal;
  font-weight: bold;
  margin: 0 0.3em;
  background: linear-gradient(transparent 70%, #ff6 60%);
}
.main em {
  font-style: normal;
  margin: 0 0.2em;
  padding: 0.2em 0.4em;
  background-color: #F5F5F5;
  border: #E0E0E0 solid 1px;
  cursor: pointer;
}
.main em.blind {
  color: transparent;
}
.main .card {
  display: grid;
  grid-template: "thumbnail ... title      " "thumbnail ... description" 1fr/200px 20px 1fr;
  text-decoration: none;
  padding: 1em;
  padding-left: 0;
}
@media screen and (max-width: 600px) {
  .main .card {
    grid-template: "thumbnail ... title      " "thumbnail ... description" 1fr/150px 10px 1fr;
  }
}
.main .card:hover {
  background: #FFFFFF;
  box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
}
.main .card .cardThumbnail {
  grid-area: thumbnail;
}
.main .card .cardTitle {
  grid-area: title;
  color: #424242;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.5em;
  line-height: 1.5em;
}
.main .card .cardDescription {
  grid-area: description;
  color: #9E9E9E;
  font-size: 0.9em;
  line-height: 24px;
  height: 72 em;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
@media screen and (max-width: 600px) {
  .main .card .cardDescription {
    height: 48 em;
    -webkit-line-clamp: 2;
  }
}
.main .prevNextLink {
  display: flex;
  justify-content: space-between;
  margin: 60px 0 30px 0;
}
.main .prevNextLink .prevLink, .main .prevNextLink .nextLink {
  max-width: 35%;
}
.main .prevNextLink .nextLink {
  text-align: right;
}
.main .prevNextLink .caption {
  font-weight: bold;
}
.main .schedule table {
  width: 100%;
}
.main .schedule table td:nth-child(1), .main .schedule table th:nth-child(1) {
  width: 2em;
}
.main .schedule table td:nth-child(2), .main .schedule table th:nth-child(2) {
  width: 5.5em;
}

@media screen and (max-width: 900px) {
  .aside {
    display: none;
  }
}
.aside .reference {
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
  padding: 16px 13px 13px;
  font-size: 0.9em;
  position: sticky;
  top: 3em;
}
.aside .reference .referenceTitle {
  font-weight: bold;
  margin-bottom: 1em;
}
.aside .toc ul, .aside .toc ol {
  padding-left: 0;
}
.aside .toc ul li, .aside .toc ol li {
  margin: 5px 0;
  padding: 5px;
  border-radius: 5px;
}
.aside .toc ul li a, .aside .toc ol li a {
  display: block;
  color: #333333;
  text-decoration: none;
}
.aside .toc ul li a::before, .aside .toc ol li a::before {
  background-color: transparent;
}
.aside .toc ul li:hover, .aside .toc ol li:hover {
  background-color: #E3F2FD;
}
.aside .toc ul li.active, .aside .toc ol li.active {
  background-color: #42A5F5;
}
.aside .toc ul li.active a, .aside .toc ol li.active a {
  color: #ffffff;
  font-weight: 400;
}

.footer {
  color: #BDBDBD;
  background-color: #F9FBFF;
  box-shadow: 0 0 0 100vmax #F9FBFF;
  -webkit-clip-path: inset(0 -100vmax);
          clip-path: inset(0 -100vmax);
  font-size: 0.8em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
form p.form-title {
  font-weight: bold;
  width: 100%;
  margin-bottom: 1em;
  text-align: center;
}
form p.error-message {
  color: #FF0000;
  font-size: 0.9em;
}
form input {
  margin: 10px 0;
}
form input[type=password] {
  width: 100%;
  height: 3em;
  border: #42A5F5 solid 1px;
  border-radius: 10px;
  padding: 0 0.5em;
}
form input[type=submit] {
  display: block;
  background-color: #64B5F6;
  color: #FFFFFF;
  border: none;
  height: 2.5em;
  padding: 0 4em;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1em;
}
form input[type=submit]:hover {
  background-color: #42A5F5;
}

.contentsList {
  margin-top: 40px;
}
.contentsList .contentsHeader {
  background-color: #f8f7f3;
  font-weight: bold;
  border-bottom: 1px solid #E0E0E0;
  padding: 5px;
}
.contentsList .contentInfo {
  text-decoration: none;
  border-bottom: 1px solid #E0E0E0;
  padding: 0.5em 0;
  display: grid;
  grid-template: "number title      " "number description"/2.5em 1fr;
}
.contentsList .contentInfo:hover {
  background-color: #FAFAFA;
}
.contentsList .contentInfo .number {
  grid-area: number;
  font-weight: bold;
}
.contentsList .contentInfo .title {
  grid-area: title;
  color: #333333;
  font-weight: bold;
}
.contentsList .contentInfo .description {
  grid-area: description;
  color: #9E9E9E;
  font-size: 0.9em;
  margin-top: 8px;
}

.category-description {
  display: grid;
  grid-template: "thumbnail ... title" "thumbnail ... description" 1fr/30% 20px 1fr;
}
@media screen and (max-width: 700px) {
  .category-description {
    grid-template: "thumbnail  " "..........." 20px "title      " "description"/1fr;
  }
}
.category-description img {
  grid-area: thumbnail;
  border-radius: 10px;
}
.category-description h1 {
  grid-area: title;
}
.category-description p {
  grid-area: description;
}

.toggle-button {
  display: block;
  position: fixed;
  top: 30px;
  left: 30px;
  width: 30px;
  height: 30px;
  z-index: 3;
  cursor: pointer;
}
.toggle-button span {
  position: absolute;
  display: block;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333333;
  border-radius: 4px;
}
.toggle-button span:nth-child(1) {
  top: 4px;
}
.toggle-button span:nth-child(2) {
  top: 14px;
}
.toggle-button span:nth-child(3) {
  bottom: 4px;
}/*# sourceMappingURL=style.css.map */