@charset "utf-8";

/*-------------------------------------------
aside(PC)
-------------------------------------------*/

#sidebar{
 width:30%;
 height:auto;
 background: var(--back2);
 padding:0 0.5rem;
}

/*ロゴ*/
#sidebar .logo{
 width:100%;
 margin:1rem auto;
 text-align:center;
}
#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 .search-field{
 border-radius:5px;
 margin-left:1rem;
 width:90%;
 height:2rem;
 border:1px solid var(--black);
 background:var(--white);
}

#sidebar .search-submit{
  width:fit-content;
  height:fit-content;
  background:var(--accent);
  border:1px solid var(--black);
}

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


#sidebar .category-list .list-flex li a,
#sidebar .archive-list .list-flex li a{
  font-size:var(--font-md);
  font-weight: 500;
  margin-left:0rem;
  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:var(--black);
 position:absolute;
 top:0.8rem;
 left:-1rem;
}

/*tag*/
#sidebar .tag{
   padding: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(--accent);
  border:1px solid var(--black);
  padding:0.2rem 0.3rem;
  color:black;
  font-weight:500;
}



/*新規投稿　人気記事*/
#sidebar .new-post,
#sidebar .popular-post{
  padding: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;
  padding:0.3rem;
}

#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;
  padding:0;
}

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



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

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


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

#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;
}

}