@charset "utf-8";
#single_post_content{
  width: calc(100% - 320px - 80px);
}
.article header .meta a{
  text-decoration: underline;
}
#single_post_content .gallery li{
  width: calc((100% - 1.2rem) / 4);
}
#single_post_content .gallery li a{
  display: block;
  aspect-ratio: 1/1;
}


#single_post_side{
  width: 320px;
  position: relative;
}
#side_popular{
  position: sticky;
  top: calc(7rem + var(--header-top-h));
  transition: top var(--header-dur) var(--header-ease);
}
body.scroll #side_popular{
  top: 7rem;
}
.side_postlist li a .image{
  width: 25%;
}
.side_postlist li a .text{
  width: 70%;
}

.single_post_stock_list{
  border-bottom: 1px solid var(--color-lightgray);
}
.single_post_stock_list li{
  border-top: 1px solid var(--color-lightgray);
}
.single_post_stock_list li a .image{
  width: 40%;
}
.single_post_stock_list li a .text{
  width: calc(60% - 32px);
}

.linkcard .image{
  width: 40%;
}
.linkcard .text{
  width: 60%;
  padding: 0 3.2rem;
}

.writer .image{
  width: 35%;
}
.writer .text{
  width: 65%;
  padding: 0 4rem;
}

/*------------------------------------------------
tab
--------------------------------------------------*/
@media only screen and (max-width: 1080px) {
  #single_post_content{
    width: calc(60% - 40px);
  }
  #single_post_side{
    width: 40%;
  }
  #side_popular{
    top: 104px;
  }
  .linkcard .text .ex{
    display: none;
  }
}


/*------------------------------------------------
tab_narrow
--------------------------------------------------*/
@media only screen and (max-width: 768px) {
  #single_post_content{
    width: 100%;
  }
  #single_post_side{
    width: 100%;
  }
  #side_popular{
    position: relative;
    top: auto !important;
    margin-top: 6.4rem;
  }
  .writer{
    flex-direction: column-reverse;
  }
  .writer .image{
    width: 100%;
  }
  .writer .text{
    width: 100%;
    padding: 5vw;
  }

}

/*------------------------------------------------
sp
--------------------------------------------------*/
@media only screen and (max-width: 540px) {
  #single_post_content header .meta{
    font-size: 1.2rem;
  }
  .side_postlist li a .text .meta{
    font-size: 1.2rem;
  }
  .linkcard .image{
    width: 100%;
  }
  .linkcard .text{
    width: 100%;
    padding: 1.6rem 2.4rem;
  }
}