@charset "utf-8";
@import url("sidebar.css");    /* サイドバー読み込み */
/* @import url("mv-ryujin.css");  メインビジュアル読み込み */

/* 共通 */

.lg-wrapper{
 width: 95%;
 height:auto;
 margin:0 auto;
 padding:1rem;
 display:flex;
}

main{
 width:70%;
 height:auto;
 background: white;
 padding:0.5rem;
 margin-right: 1rem;
 border-radius: 30px;
}

/* セクションタイトル */
h2.section-title{
 margin-bottom:2rem;
}

/* パンくずリスト */
main .bread-crumbs {
 margin:1rem 0 1rem 1rem;
}

main .bread-crumbs li a{
 color:black;
}

/* meinvisual部分*/
/* #header .mainvisual{
    width:100%;
    margin-left:1rem;
    background-image: url("../img/home/ryujin.webp");
    background-position: center center;
    position:relative;
    height:500px;
    background-size:cover;
    border-radius: 30px;
} */

/* postlist */

#postlist .list-flex{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:1rem;
}

#postlist .list-flex li .img .category,
#postlist .list-flex li .text .date,
#postlist .list-flex li .text .title
{
 color:black;
  font-size: var(--font-sm);
}

#postlist .list-flex li {
 width:100%;
}

#postlist .list-flex li .img{
 width:100%;
 position:relative;
}

#postlist .list-flex li .img .category{
  width:100px;
  padding:0.1rem;
  position:absolute;
  top:0;
  background: white;
}

#postlist .list-flex li .img img{
  width:100%;
  height:12rem;
  object-fit: cover;
  /* border-radius: 30px; */
}

#postlist .list-flex li .text .date{
  margin:0.5rem 0 0.5rem 0.5rem;
}

#postlist .list-flex li .text .title{
  margin-top:-1rem;
}

/* ページネーション */
#postlist  .pagenation{
  width:100%;
  text-align:center;
}


/*-------------------------------------------
スマートフォン
-------------------------------------------*/

@media screen and (max-width: 767px) {


.lg-wrapper{
 width: 100%;
 padding:0.5rem;
 flex-direction: column;
}

main{
 width:100%;
 padding:0.5rem;
 margin-right: 0rem;
}

aside{
 width:100%;
 padding:0.5rem;
}

#postlist .list-flex{
 grid-template-columns:repeat(2,1fr);
 gap:0.5rem;
}


}