#content {
  background-color: #F9FAFB;
}

#content .ast-container {
  padding: 0 1%;
  justify-content: space-between;
  align-items: flex-start;
}

.p-post {
  width: 75%;
  padding-top: min(calc(60 / 1240 * 100vw), 60px);
  padding-bottom: min(calc(60 / 1240 * 100vw), 60px);
}


.p-post__wrapper {
  padding: min(calc(40 / 1240 * 100vw), 40px) min(calc(30 / 1240 * 100vw), 30px);
  background-color: #fff;
}

.p-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  line-height: 2;
  margin-top: 2em;
  font-weight: bold;
}

.p-post__author .avatar {
  border-radius: 50%;
}

.post-categories {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.5em;
  margin: 0;
}

.post-categories li {
  background-color: #1133e5;
  color: #fff;
  padding: 0 1.5em;
  border-radius: 15px;
  list-style: none;
}

.post-categories li a {
  color: #fff;
}

.p-post__content {
  margin-top: 2em;
}

.p-post__content h2 {
  padding-top: 15px;
}

.p-post__content h2,
.p-post__content h3,
.p-post__content h4 {
  padding-bottom: 16px;
}

.p-post__thumbnail {
  height: min(calc(450 / 1240 * 100vw), 450px);
  margin-bottom: 2em;
  text-align: center;
}

.p-post__thumbnail img {
  height: 100%;
  object-fit: cover;
}

/* 目次のスタイル　*/

.toc {
  border-left: 4px solid #1133e5;
  padding-left: 2em;
  margin-bottom: 1.75em;
}

.toc-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.toc-toggle a {
  font-size: 0.8em;
  color: #000;
  font-weight: normal;
  padding-left: 0.5em;
}

.toc-list {
  margin: 0;
  padding-left: 1em;
}

.toc-list ol {
  list-style: disc;
}

.toc-list a {
  color: #000;
}

/* 執筆者情報（再利用ブロック）のスタイル　*/
.author_contents {
  border: 1px solid #000;
  padding: 4% 3%;
}

.author_intro figure {
  border: 1px solid #777;
  border-radius: 50%;
  width: min(calc(200 / 1240 * 100vw), 200px);
  height: min(calc(200 / 1240 * 100vw), 200px);
  justify-self: center;
}

.author_intro img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 関連記事のスタイル　*/
.p-post__related {
  margin-top: 6%;
}

.p-post__related__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 4%;
}

.related-post {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 4%;
  color: #000;
  font-weight: bold;
}
.related-thumbnail {
  width: min(calc(100 / 1240 * 100vw), 100px);
  height: min(calc(80 / 1240 * 100vw), 80px);
}

.related-thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.p-post__related__title {
  margin: 0;
}

/* サイドバーのスタイル　*/
.p-post__aside {
  padding-top: min(calc(100 / 1240 * 100vw), 100px);
  padding-left: 2%;
  width: 25%;
}

.p-post__aside__heading {
  padding-bottom: 6%;
}

.p-post__aside__thumbnail {
  display: block;
}

.p-post__aside__thumbnail img {
  width: min(calc(100 / 1240 * 100vw), 100px);
  height: min(calc(70 / 1240 * 100vw), 70px);
  object-fit: cover;
}

.p-post__aside__popular {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 2%;
}

.p-post__aside__popular:not(:first-of-type) {
  margin-top: 5%;
}

.p-post__aside__title {
  width: 70%;
  color: #000;
  font-weight: bold;
}

.p-post__aside__category {
  margin-top: 15%;
}

.p-post__aside__list {
  list-style: none;
  margin: 0;
}

.cat-item {
  padding: 2% 6%;
  background-color: #fff;
}

.cat-item a {
  color: #000;
}

.cat-item:not(:first-of-type) {
  margin-top: 1%;
}

@media (max-width: 921px) {
  .p-post {
    width: 100%;
  }

  .p-post__aside {
    width: 100%;
    padding-top: 10vw;
    padding-bottom: 10vw;
  }

  .p-post__popular__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 4%;
  }

  .p-post__aside__popular {
    align-items: center;
  }

  .p-post__aside__popular:not(:first-of-type) {
    margin-top: 0;
  }

  .p-post__aside__thumbnail img {
    width: min(calc(100 / 1240 * 100vw), 100px);
    height: min(calc(80 / 1240 * 100vw), 80px);
  }
}

@media (max-width: 600px) {
  .p-post__thumbnail {
    height: min(calc(300 / 600 * 100vw), 300px);
  }

  .author_intro figure {
    width: 40vw;
    height: 40vw;
  }

  .author_name {
    margin-top: 5vw;
  }

  .p-post__related {
    margin-top: 10vw;
  }

  .p-post__related__wrapper {
    grid-template-columns: 1fr;
    row-gap: 2vw;
  }

  .related-thumbnail {
    width: 20vw;
    height: 15vw;
  }

  .p-post__popular__wrapper {
    grid-template-columns: 1fr;
    row-gap: 2vw;
  }

  .p-post__aside__thumbnail img {
    width: 20vw;
    height: 15vw;
  }
}
