/* .post-taxonomy {
  display: flex;
} */

.post-category .category {
  border-radius: 32px;
  border: 1px solid var(--fct-gold);
  background: #FFF;
  padding: 3px 16px;
  margin-right: 10px;
  font-size: var(--fz14);
}

.post-tags a {
  display: inline-block;
  border-radius: 30px;
  background: #EFEFEF;
  padding: 3px 16px;
  margin-right: 10px;
  font-size: var(--fz12);
  text-wrap: nowrap;
  margin-bottom: 4px;
}

.post-container {
  padding-bottom: 64px;
}

.post-container time {
  color: #4E4E4E;
}

.post-contents {
  width: 100%;
  max-width: 1200px;
  margin: 42px auto 0;
  font-feature-settings: "palt" off;
}

.post-contents .eyecatch {
  max-width: 800px;
  height: auto;
  aspect-ratio: 800 / 500;
  margin: 0 auto;
}

.post-contents .eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.post-contents h2 {
  font-size: var(--fz22);
  font-weight: 900;
  line-height: 120%;
  margin-top: 40px;
}

.post-contents h3 {
  font-size: var(--fz20);
  font-weight: 700;
}

.post-contents h4 {
  font-size: var(--fz20);
  font-weight: 700;
  line-height: 180%;
  margin-top: 40px;
}

.post-contents h5 {
  font-size: var(--fz20);
  font-weight: 700;
  line-height: 180%;
  margin-top: 40px;
}

.post-contents h5::before {
  content: '';
  display: inline-block;
  height: 2px;
  width: 24px;
  background: var(--gold);
  position: relative;
  bottom: 6px;
  margin-right: 16px;
}

.post-contents h6 {
  font-size: var(--fz18);
  font-weight: 700;
  line-height: 180%;
  margin-top: 40px;
}

.post-contents p {
  margin-top: 40px;
}

.post-contents p:has(img) {
  text-align: center;
}
.post-contents img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-contents a {
  color: #114D9A;
  text-decoration: underline;
}

.post-contents table {
  border: 1px solid #111;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  overflow-wrap: break-word;
}

.post-contents table p {
  font-size: inherit;
  margin: 0;
}

.post-contents table th,
.post-contents table td {
  border: 1px solid #111;
  padding: 4px;
}
.post-contents table td:nth-child(2) p {
  font-size: inherit;
  margin-top: 0px !important;
}

.post-contents .link-btn-gold {
  text-decoration: none;
  color: inherit;
}

.back-to-list {
  width: 283px;
  text-decoration: none;
  color: inherit;
}

.post-contents ol {
  list-style-type: decimal;
  list-style-position: inside;
}


@media (min-width:768px) {
  .post-container {
    padding-bottom: 134px;
  }

  .post-contents h2 {
    font-size: var(--fz32);
  }

  .post-contents h3 {
    font-size: var(--fz28);
  }

  .post-contents h4 {
    font-size: var(--fz24);
    font-weight: 700;
    line-height: 180%;
    margin-top: 40px;
  }

  .post-contents h5 {
    font-size: var(--fz22);
  }

  .post-contents h6 {
    font-size: var(--fz22);
  }

  .post-contents p {
    font-size: var(--fz20);
    margin-top: 40px;
  }
  .post-contents ol,
  .post-contents ul {
    font-size: var(--fz20);
  }

  .post-contents table th,
  .post-contents table td {
    border: 1px solid #111;
    padding: 12px;
  }

}

/* Columns */
.post-contents .index-area {
  padding: 20px;
  background: var(--beige);
  margin-top: 20px;
}

.post-contents .index-area hgroup {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #D7D7D7;
  position: relative;
  padding-top: 4px;
}

.post-contents .index-area hgroup::before {
  content: '';
  display: block;
  width: 90px;
  height: 1px;
  background: #222;
  position: absolute;
  top: 0;
  left: 0;
}

.post-contents .index-area hgroup h2 {
  font-size: var(--fz24);
  font-weight: 700;
  color: var(--gold);
}

.post-contents .index-area hgroup p {
  font-size: var(--fz14);
  font-weight: 700;
  margin-top: 0;
}

.post-contents .index-area ul {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
}

.post-contents .index-area ul a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 0.08em;
}

.post-contents .post-columns .heading-2 {
  margin-top: 20px;
  font-size: var(--fz24);
  font-weight: 900;
}

.post-contents .post-columns .paragraph {
  margin-top: 20px;
}

.post-contents .post-img {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.post-contents .post-img img {
  width: 100%;
  height: auto;
}

.post-contents .post-img figcaption {
  color: #5A5A5A;
  font-size: var(--fz14);
  margin-top: 4px;
}

@media (min-width:768px) {
  .post-contents .index-area {
    padding: 50px 86px;
    margin-top: 100px;
  }

  .post-contents .index-area hgroup {
    gap: 30px;
  }

  .post-contents .index-area hgroup::before {
    width: 140px;
  }

  .post-contents .index-area hgroup h2 {
    font-size: var(--fz46);
  }

  .post-contents .index-area hgroup p {
    font-size: 1rem;
  }

  .post-contents .index-area ul {
    margin-top: 24px;
    gap: 12px;
    font-size: var(--fz20);
  }

  .post-contents .post-columns .heading-2 {
    margin-top: 100px;
    font-size: calc(34 / 16 * 1rem);
  }

  .post-contents .post-contents p {
    margin-top: 40px;
  }

  .post-contents .post-img {
    margin-top: 40px;
  }

  .post-contents .post-img:has(figure:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }

  .post-contents .post-img figcaption {
    font-size: 1rem;
    margin-top: 10px;
  }
  .post-contents .post-img {
    max-width: 800px;
    margin: 40px auto 0;
  }
}

/***************************************
Related articles
***************************************/

.list-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px 10px;
}

.list-articles .img-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 125;
}

.list-articles {
  line-height: 1.6;
}

.list-articles .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.list-articles .category {
  border-radius: 18px;
  background: #FFF;
  padding: 3px 10px;
  color: #7E6A20;
  font-size: 12px;
  font-weight: 700;
  margin-left: 10px;
}

.list-articles .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.list-articles .tags .tag {
  font-size: var(--fz12);
  border-radius: 27px;
  background: #EFEFEF;
  padding: 3px 12px 4px 12px;
}

@media (min-width:768px) {
  .list-articles {
    gap: 30px 20px;
  }
}

@media (min-width:1200px) {
  .list-articles {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }
  .list-articles>li {
    display: flex;
    gap: 10px;
  }

  .list-articles .img-wrapper {
    width: 200px;
    height: auto;
  }

  .list-articles>li>div {
    flex: 1;
  }

  .list-articles .article-texts>div:first-child {
    display: flex;
    flex-direction: column-reverse;
  }


}

/***************************************
Interview
***************************************/
.interviewee {
  padding: 20px;
  margin-top: 20px;
  background: var(--beige);
}

.interviewee .img-wrapper {
  width: 148px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.interviewee .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.interviewee .interviewee-name {
  font-size: var(--fz18);
  font-weight: 700;
}

.interviewee .interviewee-detail {
  margin-top: 10px;
}

.post-interview .question {
  display: flex;
  gap: 10px;
}

.post-interview .question::before {
  content: '';
  width: 20px;
  height: 2px;
  background: #BFA74A;
  margin-top: 12px;
}

.post-interview .question span {
  flex: 1;
}

@media (min-width:768px) {
  .interviewee {
    padding: 30px;
    margin-top: 40px;
    display: flex;
    align-items: flex-start;
    gap: 23px;
  }

  .interviewee .interviewee-desc {
    flex: 1;
  }

  .interviewee .interviewee-name {
    font-size: var(--fz20);
    margin-top: 0;
  }

  .interviewee .interviewee-detail {
    font-size: 1rem;
  }


  .post-interview .question::before {
    width: 40px;
    margin-top: 18px;
  }

}

/***************************************
documents
***************************************/

.post-contents.documents h2 {
  font-size: var(--fz20);
  font-weight: 700;
  line-height: 180%;
  margin-top: 40px;
  border-bottom: none !important;
}
.post-contents.documents h2::before {
  content: '';
  display: inline-block;
  height: 2px;
  width: 24px;
  background: var(--gold);
  position: relative;
  bottom: 6px;
  margin-right: 16px;
}
.documents table {
  border: none !important;
  width: 100% !important;
  margin: 38px 0;
}
.documents .post-contents table tr {
  border: none !important;
}
.documents .post-contents table td {
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 2px solid #fff;
  height: auto !important;
}
.documents .post-contents table td:nth-child(2) {
  width: auto !important;
  vertical-align: middle;
}
.documents .post-contents table td:nth-child(2) p {
  font-size: inherit;
  margin-top: 0px !important;
}
.documents table td[rowspan] {
  background: #F8F7F2;
  font-size: var(--fz18);
  font-weight: bold;
  color: var(--dark-gold);
  white-space: nowrap;
  width: 30% !important;
  text-align: left !important;
  border-bottom: 2px solid #fff;
}
.documents table:not(:has(td[rowspan])) td:first-child {
  background: #F8F7F2;
  font-weight: 700;
  color: var(--dark-gold);
  width: 30% !important;
  border-bottom: 1px solid #fff;
}
.documents table td p {
  font-size: inherit;
  margin-top: 0px !important;
}
.post-contents.documents p {
  margin-top: 20px;
}
.post-contents.documents li {
  border-bottom: none !important;
}
@media screen and (max-width: 768px) {
  .documents table td:first-child {
    width: auto !important;
  }
  .documents table td[rowspan] {
    white-space: wrap;
    width: 30% !important;
  }
}