@charset "utf-8";

/* ------------------------------
 みどりの通信Webマガジン（PC）
------------------------------ */
/* -- 一覧ページ -- */
.midoriList {
	display: flex;
	flex-flow: row wrap;
	gap: 40px 3.172%;
}
.midoriList li {
	width: 31.220%;
}
.midoriList li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}
.midoriList li a .midoriImg {
	position: relative;
}
.midoriList li a .midoriImg img {
	border-radius: 15px;
}
.midoriList .date {
    position: absolute;
    width: 105px;
    height: 31px;
    line-height: 1;
    background-color: #F6F9FA;
    border-radius: 0 15px 0 0;
    padding: 13px 10px 2px 1px;
    bottom: -1px;
    left: 0;
    z-index: 1;
}
.midoriList .date::before,
.midoriList .date::after {
	content: "";
	position: absolute;
	width: 30px;
    height: 30px;
	background: transparent;
    border-radius: 15px;
	box-shadow: -15px 15px 0 0 #F6F9FA;
    bottom: 0;
    left: 105px;
	overflow: hidden;
    z-index: -1;
}
.midoriList .date::after {
	bottom: 31px;
    left: 0;
}
.midoriList li a .title {
	position: relative;
	font-size: 1.8rem;
	line-height: 1.5;
    display: -webkit-box;
	text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
	overflow: hidden;
}
.contents:has(.pageLink) .mainContents,
.contents:has(.pageLink) .sideContents {
	padding-top: 0;
}
.dateBox + .cms_block .pageLink {
	margin-top: 73px;
}
/* ----------------------
 みどりの通信Webマガジン（SP）
---------------------- */
@media screen and (max-width: 767px) {
	/* -- 一覧ページ -- */
	.midoriList {
		gap: 30px 5.18%;
	}
	.midoriList li {
		width: 47.41%;
	}
	.midoriList li a {
		gap: 15px;
	}
	.midoriList li a .title {
		font-size: 1.6rem;
	}
	.midoriList li a .midoriImg img {
		border-radius: 10px;
	}
	.midoriList .date {
		border-radius: 0 10px 0 0;
	}
	.midoriList .date::before,
	.midoriList .date::after {
		width: 20px;
		height: 20px;
		border-radius: 10px;
		box-shadow: -10px 10px 0 0 #F6F9FA;
	}
}