@charset "utf-8";

#wrapper{
    background: #333;
}
.inner{
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
}

.flex{
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
}

#postwrap{
    width: 62%;
    background: #fff;
    padding: 2%;
}

#postwrap .title{
    display: block;
    text-align: center;
    margin:30px 0 40px;
}


#postwrap .title h2 {
    font-size: 3.5rem;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 5px;
}

#postwrap .title p {
    font-size: 1.0rem;
    margin-left: 5px;
    letter-spacing: 2px;
}

#postwrap h3{
    font-size: 1.3rem;
    margin-bottom: 15px;
}

#postwrap .date{
    font-size: 0.9rem;
    margin-bottom: 10px;
}

#postwra .textbox p{
    line-height: 1.5;
}

#postwrap .post-list .flex{
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}


#postwrap .post-list img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}

#postwrap .post-photo{
    width: 25%;
}

#postwrap .textbox{
    width: 73%;
}

#postwrap .textbox p{
    line-height: 1.6;
}

#postwrap .textbox .read{
   margin-top: 10px;
   display: inline-block;
}



#sidebar{
  width: 28%; 
  background: #f2efe9;
  padding: 2%;     
}

#sidebar .widget{
  margin-bottom: 30px;     
}

#sidebar .widget h2{
  margin-bottom: 15px; 
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #d2bd9b;/*左線*/    
}

#sidebar .widget ul li{
  list-style: none;
  margin-bottom: 10px;    
}



footer{
  background: #fff;     
}

@media screen and (max-width: 768px) {
    
    #postwrap{
        width: 100%;
        margin-bottom: 50px;
        padding: 20px;
    }

    #postwrap .title h2 {
        font-size: 2.0rem;
    }

    #postwrap h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
        line-height: 1.6;
    }

     #postwrap h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
        line-height: 1.6;
    }


    #postwrap .post-photo {
        width: 100%;
        margin-bottom: 20px;
    }

    #postwrap .textbox{
        width: 100%;
    }



    #postwrap .post-list .flex {
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 50px;
        border-bottom: 1px solid #333;
    }
    #sidebar{
      width: 100%;  
      padding: 20px;    
    }
    
}