/*-------------------------------------------
投稿記事一覧表示用（home.php archive.php archive-member_column.php)
-------------------------------------------*/

@charset "UTF-8";

/*-------------------------------------------
共通設定
-------------------------------------------*/

/* pageheader  */
.page-header{
  width:10px;
}



.page-header .img {
 background-image:url(../img/home/mainvisual.webp);
filter:  brightness(1.3) 

}



.lg-wrapper{
  display:flex;
  padding:0 1rem;
}

/*-------------------------------------------
content
-------------------------------------------*/

#content{
  width:70%;
  padding:0 0.5rem;
}

/*パンくず*/
#content ul.bread-crumbs{
  display:flex;
  border:1px solid var(--light-gold);
}

#content ul.bread-crumbs li{
  display:inline-block;
  margin-left:2rem;
}

/*リスト*/
#content .post-list{
  margin-top:2rem;
}

#content .post-list a{
  display:flex;
  flex-direction: column;
}

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

#content .post-list .list-flex li{
  position:relative;
}

#content .post-list .list-flex .img{
  width:100%;
  height:10rem;
}

#content .post-list .list-flex .img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

#content .post-list .list-flex .text .category{
    position:absolute;
    top:0;
    display:flex;
}

#content .post-list .list-flex .text .category li{
    padding:0.2rem 0.2rem;
    font-size:var(--font-sm);
    display:inline-block;
    margin-right:0.2rem;
    border-radius:10px;
}

#content .post-list .list-flex .text .date{
 font-size: var(--font-sm);
}

#content .post-list .list-flex .text .title{
 font-size: var(--font-md);
}


/*-------------------------------------------
aside
-------------------------------------------*/
#sidebar{
    width:30%;
    padding:0 0.5rem;
    border-left:1px solid var(--light-gold);
}

/*ロゴ*/
#sidebar .logo{
 width:100%;
}

#sidebar .logo a{
 display:block;
}

/* 検索窓 */
#sidebar .search-form{
    width:100%;
    padding:0.5rem;
    margin:1rem 0;
}

#sidebar .search-wrap{
  display:flex;
  align-items: center;
}

#sidebar .btn-search{
  width:2rem;
  height:2rem;
}

#sidebar .search-box{
 border-radius:5px;
 margin-left:1rem;
 width:100%;
 height:3rem;
 background-color: var(--white);
}


/*tag*/
#sidebar .tag{
   padding:1rem;
}

#sidebar .tag h3{
  border-bottom: 3px double var(--light-gold);
  margin-bottom: 1rem;
}

#sidebar .tag .tag-list{
 display:flex;
 flex-wrap: wrap;
}

#sidebar .tag .tag-list li {
  padding:0.3rem;
}

#sidebar .tag .tag-list li a{
  display:inline-block;
  font-size:var(--font-sm);
  background-color: var(--silver);
  padding:0.2rem 0.3rem;
  color:black;
  font-weight:500;
}

/*アーカイブ　カテゴリー*/
#sidebar .category-list,
#sidebar .archive-list{
  padding:1rem;
}

#sidebar .category-list h3,
#sidebar .archive-list h3{
 border-bottom: 3px double white;
 margin-bottom: 1rem;
}

#sidebar .category-list .list-flex li a,
#sidebar .archive-list .list-flex li a{
  font-size:var(--font-md);
  font-weight: 500;
  margin-left:2rem;
  position:relative;
}

#sidebar .category-list .list-flex li a::before,
#sidebar .archive-list .list-flex li a::before{

 content:"";
 width:10px;
 height:1px;
 background-color: aliceblue;
 position:absolute;
 top:0.8rem;
 left:-1rem;

}


/*新規投稿　人気記事*/
#sidebar .new-post,
#sidebar .popular-post{
  padding:1rem;
}

#sidebar .new-post h3,
#sidebar .popular-post h3{
  border-bottom: 3px double white;
  margin-bottom: 1rem;
}

#sidebar .new-post .new-post-list li,
#sidebar .popular-post .post-list li{
 margin-bottom:5px;
}

#sidebar .new-post .new-post-list li a,
#sidebar .popular-post .post-list li a{
 display:flex;
 align-items: center;
 background-color: var(--light-gold);
 color:var(--black);
}

#sidebar .new-post .new-post-list li .img,
#sidebar .popular-post .post-list li .img{
  width:30%;
  height:5rem;
  flex-shrink:0;
  margin-right:1rem;
}

#sidebar .new-post .new-post-list li .img img,
#sidebar .popular-post .post-list li .img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

#sidebar .new-post .new-post-list li .text,
#sidebar .popular-post .post-list li .text{
  width:70%;
  display:grid;
  place-items: left;
} 

#sidebar .new-post .new-post-list li .text date,
#sidebar .popular-post .post-list li .text date{
  font-size:var(--font-sm);
  font-weight: 500;
}

#sidebar .new-post .new-post-list li .text .post-title,
#sidebar .popular-post .post-list li .text .post-title{
  font-size:var(--font-sm);
  font-weight: 500;
}


#sidebar .popular-post .post-list li .text .view{
  font-size:var(--font-sm);
  font-weight: 500;
  display:inline;
}



/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {


/*-------------------------------------------
content(sm)
-------------------------------------------*/

.lg-wrapper{
  padding:0rem;
  flex-direction: column;
}

#content{
  width:100%;
}

#content .post-list .list-flex{
  grid-template-columns: repeat(2,1fr);
}

#content .post-list .list-flex .text .category{
    position:absolute;
    top:0;
    display:flex;
}

#content .post-list .list-flex .text .category li{
    padding:0.2rem 0.2rem;
    font-size:var(--font-sm);
    display:inline-block;
    background-color:antiquewhite;
    color:black;
    margin-right:0.2rem;
    border-radius:10px;
}

#content .post-list .list-flex .text .date{
 font-size: var(--font-sm);
}

#content .post-list .list-flex .text .title{
 font-size: var(--font-sm);
}


/*-------------------------------------------
aside(sm)
-------------------------------------------*/

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

#sidebar{
    width:100%;
    padding:0 0.5rem;
    border-left:none;
    margin:2rem 0;
}

/*ロゴ*/
#sidear .logo{
    width:100%;
    padding:1rem;   
}

#sidear .logo .img{
    width:100%; 
}

#sidear .logo .img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*アーカイブ　カテゴリー*/
#sidebar .category-list,
#sidebar .archive-list{
  padding:0 0.5rem;
}

#sidebar .category-list li,
#sidebar .archive-list li{
  padding:1rem;
}

/*新規投稿　人気記事*/
#sidebar .new-post,
#sidebar .popular-post{
  padding:0.5rem;
}



}