.grid {
	display: grid;
	gap: 20px;		/* 隣接するアイテム間余白 */
	padding: 10px;
	border: 1px solid #dedede;
}
.grid_item {
	border: 1px solid black;
	text-align: center;
	padding: 5px;
	height: 80vh;
}
.grid_item a:hover {
	text-decoration: none;
}

p.title {
	color: blue;
	text-decoration: underline;
	height: 15%;
	font-size: 1.5rem;
}
p.image {
	height: 65%;
}
p.image img {
	width: 100%;
	height: 100%;
	/* object-fit: contain; */
	object-fit: cover;
}
p.text {
	color: black;
	text-align: left;
	padding-top: 10px;
}

.small {
	font-size: small;
}

.image-multi .text .small a {
	word-wrap: break-word;
}

p.totop {
	margin-top: 20px;
	text-align: right;
	color: blue;
	text-decoration: underline;
}

/* flexboxの子要素を下揃え */
.flex_end {
	align-items: flex-end;
}


/* @media screen and (min-width: 1200px), print { */
@media screen and (min-width: 768px), print {
	.grid {
		grid-template-columns: repeat(4, 1fr);	/* 均等4カラム指定 */
	}
	.grid_item {
		height: 40vh;
	}
	p.title {
		font-size: clamp(0.8rem, 1.3vw, 1.1rem);
	}
	p.text {
		font-size: clamp(0.7rem, 1.3vw, 1.0rem);
		padding-top: 5px;
	}
}