@charset "utf-8";

/* ==================================================
  土木工事4D ムービーメーカー
  土木工事4D コラム（共通）
================================================== */
body{
  background: var(--bg-color);
}

.heading{
  font-weight: 700;
}


/* ==================================================
  土木工事4D コラム カテゴリーから探す
================================================== */
.column__taxonomy{
  display: grid;
  align-items: center;
  grid-template-columns: clamp(200px, calc(220 / var(--vw-1600) * 100vw), 220px) auto;
  gap: 16px;
  background: #fff;
  padding: clamp(16px, calc(24 / var(--vw-1600) * 100vw), 24px) clamp(20px, calc(32 / var(--vw-1600) * 100vw), 32px);
  border-radius: var(--bd-radius);
  margin-top: clamp(32px, calc(48 / var(--vw-1600) * 100vw), 48px);
}

.column-taxonomy__title{
  font-size: clamp(16px, calc(18 / var(--vw-1120) * 100vw), 18px);
  font-weight: 700;
}

.column-taxonomy__list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media screen and (max-width: 820px){
  .column__taxonomy{
    grid-template-columns: 1fr;
  }

  .column-taxonomy__title{
    text-align: center;
  }

  .column-taxonomy__list{
    justify-content: center;
  }
}


/* ==================================================
  土木工事4D コラム一覧
================================================== */
.column__wrapper{
  margin-top: 40px;
}

.post-type-archive-column-4d-civil .heading--h1,
.tax-column-4d-civil-cat .heading--h1,
.tax-column-4d-civil-tag .heading--h1{
  font-size: clamp(26px, calc(38 / var(--vw-1600) * 100vw), 38px);
  text-align: center;
}

.column__list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(18px, calc(24 / var(--vw-1600) * 100vw), 24px);
}

.column__item a{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: var(--bd-radius);
  overflow: hidden;
  transition: all .3s ease-in-out;
}

.column__thumb{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.column__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 0 0 32px;
  font-size: var(--size-16);
}

.column__cat{
  width: fit-content;
  font-size: clamp(12px, calc(14 / var(--vw-1120) * 100vw), 14px);
  font-weight: 700;
  letter-spacing: 0;
  border-radius: var(--bd-radius);
  overflow: hidden;
}

.column__item .column__cat{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.column__cat span,
.column__cat a{
  display: block;
  background: var(--yellow);
  padding: 6px 10px;
  transition: all .15s ease-in-out;
}

.column__title{
  flex: 1;
  font-size: clamp(16px, calc(18 / var(--vw-1120) * 100vw), 18px);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.25em 0 1em;
  padding-inline: clamp(16px, calc(20 / var(--vw-1600) * 100vw), 20px);
}

.column__date{
  color: var(--gray2);
  margin-top: auto;
}

.column__item .column__date{
  padding-inline: clamp(16px, calc(20 / var(--vw-1600) * 100vw), 20px);
}

@media (hover: hover){
  .column__item a:hover{
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgb(0 0 0 / .08);
  }

  .column__cat a:hover{
    color: var(--yellow);
    background: var(--bk);
  }
}

@media (hover: none){
  .column__item a:active{
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgb(0 0 0 / .08);
  }

  .column__cat a:active{
    color: var(--yellow);
    background: var(--bk);
  }
}

@media screen and (max-width: 550px){
  .column__list{
    grid-template-columns: 1fr;
  }
}


/* =================================
  ページネーション
================================= */
#pagination {
  margin-top: 60px;
}

#pagination .wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
}

#pagination .wp-pagenavi a,
#pagination .wp-pagenavi span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: var(--bd-radius);
  background: #fff;
  color: #333;
  text-decoration: none;
  transition: all .3s ease;
  box-sizing: border-box;
}

/* hover */
#pagination .wp-pagenavi a:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* current page */
#pagination .wp-pagenavi .current {
  background: #333;
  border-color: #333;
  color: #fff;
  font-weight: bold;
}

/* dots (...) */
#pagination .wp-pagenavi .extend {
  border: none;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
}

/* prev / next */
#pagination .wp-pagenavi .previouspostslink,
#pagination .wp-pagenavi .nextpostslink {
  padding: 0 18px;
  font-weight: 500;
}

/* SP */
@media screen and (max-width: 767px) {
  #pagination {
    margin-top: 40px;
  }

  #pagination .wp-pagenavi {
    gap: 6px;
  }

  #pagination .wp-pagenavi a,
  #pagination .wp-pagenavi span {
    min-width: 40px;
    height: 40px;
    font-size: 14px;
    padding: 0 10px;
  }
}


/* =================================
  土木工事4D コラム 詳細ページ
================================= */
.column__post.section{
  padding-top: clamp(28px, calc(48 / var(--vw-1120) * 100vw), 48px);
}

.column-post__contents{
  background: #fff;
  border-radius: var(--bd-radius);
  padding: var(--size-64) clamp(32px, calc(80 / var(--vw-1600) * 100vw), 80px);
}

.column__post .column__date{
  margin-bottom: 1em;
}

.column__post .heading--h1{
  position: relative;
  font-size: 2.3rem;
  line-height: 1.3;
  padding-bottom: clamp(12px, calc(20 / var(--vw-1120) * 100vw), 20px);
}

.column__post .heading--h1::before,
.column__post .heading--h1::after{
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  height: clamp(3px, calc(4 / var(--vw-1600) * 100vw), 4px);
}

.column__post .heading--h1::before{
  width: 100%;
  background: var(--bg-color);
}

.column__post .heading--h1::after{
  width: 33.3%;
  background: var(--bk);
}

.column__post .column-taxonomy__list{
  font-size: 1rem;
  margin-top: 1em;
}

.column__post .column__taxonomy .column-taxonomy__list{
  margin-top: 0;
}

.column-post__body{
  line-height: 1.6;
  margin-top: var(--size-40);
}

.column-post__thumb{
  max-width: 700px;
  border-radius: var(--bd-radius);
  overflow: hidden;
  margin: 0 auto 2.5rem;
}

.column-post__body a{
  display: inline;
  text-decoration: underline;
  color: var(--blue);
}

@media (hover: hover){
  .column-post__body a:hover{
    opacity: .7;
  }
}

.column-post__body p + p{
  margin-top: 1em;
}

/* 見出し */
.column-post__body .tit{
  font-weight: 700;
  line-height: 1.4;
  margin: 2.75rem 0 1.75rem;
}

.column-post__body .tit.mincho{
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.column-post__body h2.tit{
  font-size: 1.8rem;
}

.column-post__body h3.tit{
  font-size: 1.6rem;
}

.column-post__body h4.tit{
  font-size: 1.4rem;
  line-height: 1.5;
}

.column-post__body h5.tit{
  font-size: 1.2rem;
  line-height: 1.5;
}

.column-post__body h6.tit,
.column-post__body p.tit{
  font-size: 1.15rem;
  line-height: 1.5;
}

.column-post__body .tit.underLine{
  padding: 0.4em 0.5em;
  border-bottom-style: solid;
}

.column-post__body h2.tit.underLine,
.column-post__body h3.tit.underLine,
.column-post__body h4.tit.underLine{
  border-bottom-width: 2px;
}

.column-post__body h5.tit.underLine,
.column-post__body h6.tit.underLine,
.column-post__body p.tit.underLine{
  border-bottom-width: 1px;
}

.column-post__body .tit.leftLine{
  padding: 0.4em 0.75em;
  border-left-style: solid;
}

.column-post__body h2.tit.leftLine,
.column-post__body h3.tit.leftLine{
  border-left-width: 4px;
}

.column-post__body h4.tit.leftLine,
.column-post__body h5.tit.leftLine,
.column-post__body h6.tit.leftLine,
.column-post__body p.tit.leftLine{
  border-left-width: 3px;
}

.column-post__body h6.tit.leftLine,
.column-post__body p.tit.leftLine{
  padding: 0.1em 0.6em;
}

@media screen and (max-width: 820px){
  .column-post__contents{
    padding: clamp(32px, calc(56 / var(--vw-820) * 100vw), 56px) clamp(15px, calc(32 / var(--vw-820) * 100vw), 32px);
  }

  .column__post .column-post__contents .column-taxonomy__list{
    justify-content: flex-start;
  }

  .column__post .heading--h1{
    font-size: 1.8rem;
  }

  .column-post__body h2.tit{
    font-size: 1.5rem;
  }

  .column-post__body h3.tit{
    font-size: 1.4rem;
  }

  .column-post__body h4.tit{
    font-size: 1.3rem;
  }

  .column-post__body h5.tit,
  .column-post__body h6.tit,
  .column-post__body p.tit{
    font-size: 1.05rem;
  }
}


/* YouTube動画 */
.column-post__body .youtube{
  margin: 2rem auto;
  max-width: 750px;
}

/* 画像 */
.column-post__body .img img{
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.column-post__body .img figcaption{
  margin-top: 0.25em;
}

.column-post__body .img.no-fixed img{
  aspect-ratio: unset;
  object-fit: unset;
  height: auto;
}

.column-post__body .wp-block-lazyblock-img.original .img{
  text-align: center;
}

.column-post__body .wp-block-lazyblock-img.original .img img{
  aspect-ratio: unset;
  object-fit: unset;
  width: unset;
  height: auto;
}

/* リスト */
.column-post__body .wp-block-list{
  margin: 1.75rem 0;
  padding-left: 1.25rem;
}

.column-post__body ul.wp-block-list{
  list-style: disc;
}

.column-post__body ol.wp-block-list{
  list-style: decimal;
}

.column-post__body .wp-block-list li{
  list-style: inherit;
}

/* 引用文 */
.column-post__body .wp-block-quote{
  position: relative;
  margin: 2.25rem 0;
  padding: 2.25em 1.25em 0.8em 0.75em;
  border-radius: var(--bd-radius);
  background: var(--bg-color);
  font-style: italic;
  color: var(--gray2);
  border-left: 4px solid var(--orange);
}

.column-post__body .wp-block-quote::before{
  position: absolute;
  content: "\f10d";
  display: inline-block;
  top: 10px;
  left: 15px;
  font-family: "Font Awesome 6 Pro";
  color: var(--orange);
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}

.column-post__body .wp-block-quote p{
  margin: 0.5em 0;
}

.column-post__body .wp-block-quote cite{
  display: block;
  text-align: right;
  color: var(--gray);
  font-size: 0.9em;
}


[class^=lazyblock-] + [class^=lazyblock-]{
  margin-top: 1.75rem;
}

[class^=lazyblock-] + [class^=lazyblock-tit-]{
  margin-top: 2.75rem;
}

[class^=lazyblock-] + [class^=lazyblock-section-]{
  margin-top: 2.75rem;
}

[class^=lazyblock-] .block-section{
  padding-top: var(--size-24);
  padding-bottom: var(--size-24);
}

[class^=lazyblock-] .block-section .tit{
  margin-top: 0;
}

[class^=lazyblock-] .block-section * + .tit{
  margin-top: 2.75rem;
}

.block-section .inner{
  padding-left: clamp(15px, calc(32 / var(--vw-1600) * 100vw), 32px);
  padding-right: clamp(15px, calc(32 / var(--vw-1600) * 100vw), 32px);
}

.wp-block-lazyblock-columns .column_area .lazyblock-inner-blocks{
  display: grid;
  gap: clamp(16px, calc(24 / var(--vw-1600) * 100vw), 24px);
}

.tereko_wrap .wp-block-lazyblock-columns .column_area .lazyblock-inner-blocks{
  direction: rtl;
}

.tereko_wrap .wp-block-lazyblock-columns .column_area .lazyblock-inner-blocks > * {
  direction: ltr;
}

.wp-block-lazyblock-columns .column_area.column02 > .lazyblock-inner-blocks{
  grid-template-columns: repeat(2, 1fr);
}

.wp-block-lazyblock-columns .column_area.column03 > .lazyblock-inner-blocks{
  grid-template-columns: repeat(3, 1fr);
}

.wp-block-lazyblock-columns .column_area.column04 > .lazyblock-inner-blocks{
  gap: clamp(12px, calc(20 / var(--vw-1600) * 100vw), 20px);
  grid-template-columns: repeat(4, 1fr);
}

.wp-block-lazyblock-columns .column_area.column05 > .lazyblock-inner-blocks{
  gap: clamp(10px, calc(16 / var(--vw-1600) * 100vw), 16px);
  grid-template-columns: repeat(5, 1fr);
}

.wp-block-lazyblock-columns .column_area [class^=lazyblock-] + [class^=lazyblock-]{
  margin-top: 0;
}

@media screen and (min-width: 551px) and (max-width: 820px){
  .wp-block-lazyblock-columns .column_area .lazyblock-inner-blocks{
    grid-template-columns: repeat(2, 1fr)!important;
  }
}

@media screen and (max-width: 550px){
  .wp-block-lazyblock-columns .column_area .lazyblock-inner-blocks{
    grid-template-columns: 1fr !important;
  }
}

/* ボタン */
.btn_wrap .btn {
  text-decoration: none;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  align-items: center;
  border-bottom: 5px solid;
  color: inherit;
}
.btn_wrap .btn span {
  margin: auto;
}
.btn_wrap .btn.typ01 {
  border-radius: 0.3rem;
}
.btn_wrap .btn.icon_right i {
  margin: 0 1.5em 0 0;
  order: 1;
}
.btn_wrap .btn.icon_right.icon_line span {
  padding-left: 0.75em;
}
.btn_wrap .btn.icon_left i {
  margin: 0 0 0 1.5em;
}
.btn_wrap .btn.icon_left.icon_line span {
  order: 1;
  padding-right: 0.75em;
}
.btn_wrap .btn.icon_line::after {
  content: "";
  display: block;
  width: 2px;
  height: 75%;
  background-color: #000;
  margin: 0.75em;
}
.btn_wrap .btn:not(.icon_line) span {
  padding: 0 0.75em;
}

@media print, screen and (min-width: 768px) {
  .btn_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
  }
  .btn_wrap .btn {
    margin: 0 0.625rem 0.625rem;
    height: 3.75rem;
    width: 16.25rem;
    max-width: 100%;
  }
  .btn_wrap .btn.typ02 {
    border-radius: 1.875rem;
  }
  .btn_wrap .btn:hover {
    border-bottom-width: 1px;
    translate: 0 4px;
  }
  .btn_wrap:not(:last-child) {
    margin-bottom: 1.75rem;
  }
}
@media only screen and (max-width: 767px) {
  .btn_wrap .btn {
    width: 70%;
    margin: 0 auto;
    height: 3.75rem;
    max-width: 100%;
  }
  .btn_wrap .btn:not(:last-child) {
    margin-bottom: 1.5em;
  }
  .btn_wrap .btn.typ02 {
    border-radius: 1.875rem;
  }
  .btn_wrap:not(:last-child) {
    margin-bottom: 1.75rem;
  }
}

/* フレキブルテーブル */
.column-post__body .wp-block-flexible-table-block-table{
  margin: 1.75rem 0;
}

.column-post__body .wp-block-flexible-table-block-table th{
  font-weight: 700;
}

/* アコーディオン */
.wp-block-accordion{
  margin: 1.75rem 0;
}

.wp-block-accordion-item{
  border: solid 1px var(--bd-color);
  outline: solid 2px transparent;
  border-radius: var(--bd-radius);
  padding: 0.4em 0.75em;
  transition: all .15s ease-in-out;
}

.wp-block-accordion-heading{
  font-size: 1.1rem;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{
  text-decoration: none;
}

.wp-block-accordion-heading__toggle-icon{
  font-size: 1.4em;
  font-weight: 400;
  transition: color .15s ease-in-out;
}

.wp-block-accordion-panel{
  padding-bottom: 0.5em;
}

@media (hover: hover){
  .wp-block-accordion-item:hover{
    border-color: transparent;
    outline: solid 2px var(--yellow);
  }

  .wp-block-accordion-item:hover .wp-block-accordion-heading__toggle-icon{
    color: var(--yellow);
  }
}

@media (hover: none){
  .wp-block-accordion-item:active{
    border-color: transparent;
    outline: solid 2px var(--yellow);
  }

  .wp-block-accordion-item:active .wp-block-accordion-heading__toggle-icon{
    color: var(--yellow);
  }
}


/* ==============================
 * タグ一覧
 ============================== */
.column-tag__list{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, calc(8 / var(--vw-1120) * 100vw), 8px);
  margin-top: var(--size-40);
  font-size: 0.9rem;
}

.column__tag a{
  font-size: 0.9rem;
  color: var(--orange);
  border: solid 1px var(--orange);
  border-radius: var(--bd-radius);
  padding: 2px 12px;
  transition: background .15s ease-in-out;
}

@media (hover: hover){
  .column__tag a:hover{
    background: rgb(255 153 0 / .1);
  }
}


/* ==============================
 * この記事をシェア
 ============================== */
.sns-share {
  margin-top: var(--size-40);
  padding-top: var(--size-32);
  border-top: solid 1px #ddd;
}
.sns-share__title{
  width: fit-content;
  font-size: clamp(16px, calc(18 / var(--vw-1120) * 100vw), 18px);
  font-weight: 700;
  text-align: center;
  margin-inline: auto;
}
.sns-share__title::before{
  content: '＼';
  margin-right: 0.5em;
}
.sns-share__title::after{
  content: '／';
  margin-left: 0.5em;
}
.sns-share .sns-share__list {
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 0.901rem + 1.49vw, 2rem);
  margin-top: calc(clamp(1rem, 0.709rem + 1.24vw, 1.625rem) + (1em - 1lh) / 2);
}
.sns-share .sns-share__list li a img {
  width: clamp(2.375rem, 2.171rem + 0.87vw, 2.813rem);
}
.sns-share .sns-share__list li.copy {
  position: relative;
}
.sns-share .sns-share__list li.copy .copy-btn{
  cursor: pointer;
}
.sns-share .sns-share__list li.copy .success-msg {
  position: absolute;
  display: block;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(0.625rem, 0.567rem + 0.25vw, 0.75rem);
  line-height: 1;
  color: #fff;
  background-color: #4d4d4d;
  border-radius: 4px;
  padding: 0.5rem;
  opacity: 0.7;
  display: none;
}
.sns-share + .btn {
  margin-top: calc(clamp(2.75rem, 2.168rem + 2.48vw, 4rem) + (1em - 1lh) / 2);
}

/* 前の記事・一覧に戻る・次の記事 */
.post-navigation{
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 5.25em 190px 5.25em;
  gap: 2.5em;
  margin-top: var(--size-64);
  font-size: var(--size-16);
}

.post-navigation .link-btn.back{
  max-width: 180px;
  width: 100%;
}

.post-navigation .link-btn.back a{
  padding: clamp(8px, calc(12 / var(--vw-1600) * 100vw), 12px) clamp(8px, calc(16 / var(--vw-1600) * 100vw), 16px);
}

.post-navigation .link-text{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-weight: 700;
}

.post-navigation .link-text.prev{
  text-align: right;
  justify-content: flex-end;
}

.post-navigation .link-text.next{
  text-align: left;
  justify-content: flex-start;
}

.post-navigation .link-text a{
  position: relative;
  transition: all .15s ease-in-out;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--bk);
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}

.post-navigation .link-text.prev a{
  padding-left: 1.25em;
}
.post-navigation .link-text.next a{
  padding-right: 1.25em;
}

.post-navigation .link-text a::before,
.post-navigation .link-text a::after{
  position: absolute;
  transition: all .15s ease-in-out;
}

.post-navigation .link-text.prev a::before{
  content: '←';
  left: 0;
}

.post-navigation .link-text.next a::after{
  content: '→';
  right: 0;
}

@media (hover: hover){
  .post-navigation .link-text.prev a:hover{
    transform: translateX(-0.5em);
  }
  .post-navigation .link-text.next a:hover{
    transform: translateX(0.5em);
  }
  /* .post-navigation .link-text.prev a:hover::before{
    right: calc(100% + 0.5em);
  }
  .post-navigation .link-text.next a:hover::after{
    left: calc(100% + 0.5em);
  } */
}

@media screen and (max-width: 820px){
  .post-navigation{
    grid-template-columns: 1fr 1fr;
    gap: 2em 0;
    justify-items: center;
    margin-top: var(--size-64);
    font-size: var(--size-16);
  }

  .post-navigation .link-btn.back{
    order: 1;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .post-navigation .link-text{
    width: 100%;
  }

  .post-navigation .link-text.prev{
    order: 2;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: left;
    justify-content: flex-start;
  }

  .post-navigation .link-text.next{
    order: 3;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    text-align: right;
    justify-content: flex-end;
  }

  .post-navigation .link-text.prev::after{
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: #ddd;
  }
}

/* CTA */
.cta-4dcm{
  border: dotted 1px var(--bd-color);
  border-radius: var(--bd-radius);
  background: #fafafa;
  padding: clamp(20px, calc(28 / var(--vw-1600) * 100vw), 28px) var(--size-24) clamp(28px, calc(36 / var(--vw-1600) * 100vw), 36px);
  margin-top: var(--size-40);
}
.cta-4dcm__title{
  font-size: clamp(17px, calc(18 / var(--vw-1120) * 100vw), 18px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.75em;
}
.cta-4dcm__desc{
  text-align: center;
}

.cta-4dcm .link-btn{
  max-width: 350px;
  margin: 1.25rem auto 0;
}


/* 関連記事 */
.related-posts{
  margin-top: clamp(56px, calc(80 / var(--vw-1120) * 100vw), 80px);
}
.related-posts__title{
  font-size: var(--size-24);
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: solid 2px var(--bk);
  margin-bottom: 0.75em;
}

.related-post + .related-post{
  margin-top: clamp(16px, calc(24 / var(--vw-1600) * 100vw), 24px);
}

.related-post a{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--size-16) clamp(16px, calc(20 / var(--vw-1120) * 100vw), 20px);
}

.related-post__thumb{
  border-radius: var(--bd-radius);
  overflow: hidden;
}

.related-post__body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: clamp(12px, calc(16 / var(--vw-1120) * 100vw), 16px);
}

.related-post a .column-taxonomy__list{
  margin: 0;
}

.related-post a .column__date{
  font-size: clamp(12px, calc(14 / var(--vw-1120) * 100vw), 14px);
  margin-top: 0;
}

.related-post a .column__cat{
  font-size: clamp(11px, calc(13 / var(--vw-1120) * 100vw), 13px);
}

.related-post a .column__cat span{
  padding: 3px 8px;
}

@media screen and (max-width: 550px){
  .related-post a{
    grid-template-columns: 1fr;
  }
}