.refes_title{
    margin: 4rem 0 1rem 0 !important;
    padding: 0 !important;
    border-left: 4px solid #3692ca;
    padding-left: 0.5em !important;
    font-weight: 500;
}

.posts_wrap {
    border: 1px solid #0092c3;
    padding: 25px 20px 0 20px;
    border-radius: 4px;
}


.posts_tab{
	display: flex;
	flex-wrap: wrap;
    font-size:0.9rem;
    gap:10px;
}
.posts_tab li a{
	display: block;
	background:#fff;
	padding: 0.3em 1em;
    border-radius: 50px;
    color: #9b9b9b;
    border: 1px solid #bdbdbd;
}

.posts_tab li.active a{
    /* background: linear-gradient(-45deg, #7d8ebe, #b0afcb); */
    color: #FFF;
    border:none;
    background-color: #3692ca;
}


p.post_title {
    font-size: 0.9rem;
    margin: 1em 1em;
    color: #404040;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:30px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.references_wrap{
    position: relative;
}

.refes_grid{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px,1fr) );
    gap: 30px;
}

.refes_grid.no_posts{
    grid-template-columns: repeat( auto-fill, minmax(300px,1fr) );
}

.no_posts li{
    min-height: auto !important;
}
.refes_grid p {
    padding: 0.5em 0 0 0;
    margin: 0em;
    text-align: center;
    font-size: 0.9rem;
}

.refes_grid li{
    /* border:1px solid #e4e4e4; */
    min-height: 250px;
    /* border-radius: 4px; */
    transition: 0.3s;
}

.refes_grid img{
    border-radius: 4px 4px 4px 4px;
    border:1px solid rgba(0,0,0,0.1);
    transition: 0.3s;
}
.no_posts img{
    width: 100%;
    border: 1px solid #0092c3;
}
.refes_grid img:hover{
    scale:1.02;
    box-shadow: 0px 0px 4px 0px rgb(0,0,0,0.05);
}

.doc_button{
    text-align: center;
    display: block;
    /* background: linear-gradient(-45deg, #7d8ebe, #b0afcb); */
    background-color: #fe6f49;
    border-radius: 50px;
    margin: 1.5em 3em;
    padding: 0.2em 0;
    color: #FFF;
    font-size:0.9rem;
    transition: 0.3s;
}

.refes_grid .doc_button:hover{
    scale:1.02;
}

.doc_divider {
    margin-top: 2.5rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.doc_small_title{
    font-size: 0.8em;
    padding-left: 0.5rem;
}

.file_info{
    font-size: 0.85rem; 
    display: block; 
    text-align: center; 
    margin-top: 0.5rem;
    padding:0 0.4em;
    min-height: 3em;
}
.file_info_title{
    display: grid;
    justify-items: center;
    text-align: left;
    color: #333;
    font-weight: 500;
}

.lean_more{
    display:block;
    text-align:right;
    margin-top:2rem;
}
.lean_more a{
    font-size: 0.9rem;
    border: 1px solid #3692ca;
    padding: 0.5em 1em;
    border-radius: 4px;
    color: #3692ca !important;
    transition: 0.1s;
}
.lean_more a:hover{
    background-color:#3692ca;
    box-shadow: 0px 0px 4px 0px rgb(0,0,0,0.05);
    color:#FFF !important;
}


.doc-navigation-wrap{
    display: block;
    position: sticky;
    z-index: 99;
    background-color:#FFF;
    color:#333;
    padding:0.6rem;
    border-radius:10px;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
    width: fit-content;
}
.doc-navigation-wrap .doc-menu{
    display: flex;
    flex-wrap: wrap;
    column-gap:0.8rem;
    row-gap: 0.5rem;
    margin:0;
    cursor: pointer;
    user-select: none;
}

.doc-navigation-wrap .doc-menu li{
    padding: 0.4em 0.8em;
    border-radius: 100px;
    font-weight: 500;
    transition:0.1s;
}

.doc-navigation-wrap .doc-menu li:hover{
    background-color: #daeff5;
    color: #1677b2;
}



@media screen and (max-width:599px){
    .area {
        padding:40px 5px;
    }
    .doc-navigation-wrap .doc-menu{
        row-gap: 0.2rem;
    }
}
@media screen and (max-width:699px){
    .refes_grid li:not(:last-child) {
        border-bottom: 1px dotted rgba(0,0,0,0.3);
        padding-bottom: 1.5rem;
    }
}