@charset "UTF-8";

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

/* pageheader  */
.page-header {
  height:15rem;
}

.page-header .img {
 background-image:url(../img/home/mainvisual.webp);
 background-size: cover;
 background-position: 0 -2rem;
}

.page-header .page-title-area .page-title .en {
  font-size: var(--font-lg);
  font-weight: 500;
}

.page-header .page-title-area .page-title .ja {
  font-size: var(--font-md);
} 

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

.inner{
 padding:1rem  0rem;
}

 h1,h2,h3,h4,h5{
 margin:1.5rem 0;
 color: var(--light-gold);
}


ul{
  margin:1rem 0;
}


/*-------------------------------------------
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;
}

/*post-header*/
#content .post-header{
  margin:1rem;
}

#content .eyecatch .img{
  width:20rem;
  height:20rem;
  margin:0 auto;
  position:relative;
}

#content .eyecatch .img img{
  width:100%;
  height:100%;
  object-fit:contain;
}

#content .eyecatch .img::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow:inset 0px 0px 20px 20px var(--black);
}

/*pagenavi*/

#content .page-nav{
  display:flex;
  justify-content: space-evenly;
  width:fit-content;
  margin:0 auto;
}

#content .page-nav li{
  background-color: var(--light-gold);
  font-size:var(--font-md);
  margin:1rem;
  padding:0.5rem 1rem;
  border-radius: 5px;
}

#content .page-nav li a{
  color:var(--black);
}

/*関連記事*/
#content .yarpp-related{
  margin-bottom:2rem;
}







/*-------------------------------------------
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) {

/*-------------------------------------------
共通設定(sm)
-------------------------------------------*/
.page-header .img {
 background-position: 0 -10rem;
}

/*-------------------------------------------
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;
}



}