@charset "utf-8";

/* ページヘッダー画像 */

/* .page-header{
  width:100%;
  height:20rem;
  margin-top:5rem;
  position:relative;
  box-shadow: 2px 2px 1px var(--black);
}

.page-header .img{
  width:100%;
  height:100%;
  background-image:url(../img/mainvisual/mainvisual2.webp);
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
} 

.page-header .page-title-area {
  position:absolute;
  top:0px;
  left:0;
  background-color:var(--black);
  opacity:0.5;
  width:30%;
  height:100%;
  padding:1rem;
  display: flex;
  align-items: center;
}

.page-header .page-title-area .page-title .en{
  display: block;
  font-size:var(--font-lg);
  font-weight: 600;
  color:var(--white);
  letter-spacing: 0.05em;
}

.page-header .page-title-area .page-title .ja{
  display: block;
  font-size:var(--font-md);
  color:var(--white);
} */

/* 共通 */

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

main{
 width:70%;
 height:auto;

 padding:1rem;
 margin-right: 1rem;
}


main .bread-crumbs {
 margin:1rem 0 1rem 1rem;
}

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


/* postlist */

#postlist {
  margin-top:0rem;
}

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

#postlist .list-flex li .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 .inner{
 position:relative;
}

#postlist .list-flex li .inner .img{
 width:100%;
 height:15rem;
}

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

#postlist .list-flex li .inner .category{
  width:fit-content;
  padding:0.1rem;
  position:absolute;
  top:0.5rem;
  left:0.5rem;
  background: var(--white);
  font-size: var(--font-sm);
}

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

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



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

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


}