@charset "UTF-8";
/* CSS Document */
/*list-grid5
---------------------------------------------------------------------------*/
.list-grid5-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid5-parts .list-parts {
	display: grid;
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を目一杯使う*/
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のp要素*/
.list-grid5-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid5-parts .list-parts figure {
	margin-bottom: 1rem;	/*画像の下に空けるスペース。1文字分。*/
}
.list-grid5-parts .list-parts figure img {
	box-shadow: 10px 10px 0px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかし幅、最後は色の指定で0,0,0は黒の事で、0.05は色が5%出た状態。*/
	border-radius: 30px;	/*角を丸くするサイズ。丸くしたくなければこの１行を削除。*/
	overflow: hidden;
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid5-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid5-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	/*ブロック全体を囲むブロック*/
	.list-grid5-parts {
		display: grid;
		grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3rem;	/*ブロックの間に空けるマージン的な指定。３文字分。*/
	}

	}/*追加指定ここまで*/


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ブロック全体を囲むブロック*/
	.list-grid5-parts {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

	}/*追加指定ここまで*/