/*一般投稿記事　ヒーリング基礎*/

@charset "UTF-8";

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

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


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

h2 {
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 1.8em;
  color: #5c4b3b;
  background: linear-gradient(to right, #fdf6e3, #fcefe0);
  padding: 0.5em 1em;
  border-left: 5px solid #d4a373;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}


p.bold{
  font-size:var(--font-lg);
  font-weight: 600;;
}
ul{
  margin:1rem 0;
}


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

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

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

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

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

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

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

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

/*post-tags,post-categories設定*/

#main .post-tags,#main .post-categories{
 display:flex;
 flex-wrap: wrap;
}

#main .post-tags li,#main .post-categories li {
  padding:0.3rem;
}

#main .post-tags li a,#main .post-categories li a{
  display:inline-block;
  font-size:var(--font-sm);
  background-color: var(--accent);
  padding:0.2rem 0.3rem;
  color:black;
  font-weight:500;
}

/*pagenavi*/

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

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

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

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

#main .top-to-banner{
  width:100%;
  text-align: center;
  margin:1rem 0;
}



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

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

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

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

#main{
  width:100%;
}

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

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

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

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

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



}