main{
	background:var(--bg-lightgray);
}
#sec_diarylist{
	padding:80px 0;
}

#sec_diarylist .wrapper{
	display:flex;
	gap:45px;
	justify-content:center;
}
.list_area{
	max-width:866px;
}
.list_area a{
	color:var(--textbase);
}
.list_area article{
	display:grid;
	gap:30px;
	grid-template-areas:
	     "main_img text text text"
	     "main_img photo_1  photo_2 photo_3";

	border-bottom:1px solid var(--textbase);
	padding:30px;
	align-items: flex-start;
}
.main_img{
	grid-area: main_img;
	max-width:150px;
}
.text{
	grid-area: text;
}
.photo_1{
	grid-area: photo_1;
	max-width:120px;
}
.photo_2{
	grid-area: photo_2;
	max-width:120px;
}
.photo_3{
	grid-area: photo_3;
	max-width:120px;
}
time{
	font-size:1.3rem;
	font-weight:600;
}

.list_area article h3{
	font-size:2.4rem;
	margin-top:10px;
}

.list_area article p{
	font-size:1.4rem;
	padding:15px 0;
}
.list_area article .photo{
	align-items: flex-start;
	display:flex;
	gap:10px;
}
.list_area article .photo img{
	max-width:120px;
}
.side_index{
	max-width:295px;
	border-left:8px solid #eee;
	padding-left:25px;
}
.side_index h4{
	font-family:var(--serif);
	font-size:1.4rem;
	color:#98A6B5;
	padding:20px 8px;
	border-bottom:1px solid #eee;
}
.side_index a{
	display:block;
	font-size:1.4rem;
	margin:8px 0;
}


.side_index .catlist a{
	font-size:1.4rem;
	position: relative;
	margin:10px 0;
	display:block;
	padding-left:30px;
}
.side_index .catlist a:before{
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    content: "";
}

.bnr_olddiary{
	margin:30px 0;
}

/*------------------------------------------
responsive
------------------------------------------*/
@media screen and (max-width: 1078px) {


}

@media screen and (max-width: 767px) {
	#sec_diarylist {
	    padding: 30px 0;
	}
	.side_index{
		display:none;
	}
	.list_area article h3{
		font-size:1.8rem;
		margin-top:10px;
	}
	.list_area article{
		flex-direction:column;
	}
	.list_area article>img{
		width:80%;
		margin:auto;
	}
	.list_area article .photo img{
		max-width:100px;
	}

	.list_area article{
		display:grid;
		gap:10px;
		grid-template-areas:
		     "text text"
		     "main_img photo_1"
		     "photo_2 photo_3";
		padding:15px 15px 30px;
		justify-content:flex-start;
		grid-template-columns:1fr 1fr;
	}
	.list_area article>a{
		max-width:50vw;
	}
	.main_img{
		max-width:100%;
	}
	.list_area article .photo_1{
		max-width:50vw;
	}
	.list_area article .photo_2{
		max-width:50vw;
	}
	.list_area article .photo_3{
		max-width:50vw;
	}
}