/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

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

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

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


/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 5px;	/*角を少しだけ丸く*/
	padding: 0rem;	/*ボックス内の余白。２文字分。*/
}

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

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

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


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	background: #111;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*ナンバー（01?03の飾り番号）*/
.list-grid1 .list .num {
	position: absolute;
	left: -20px;		/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -30px;			/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
	font-family: "MonteCarlo", cursive;	/*フォント指定*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
}

/*引用符（“）の装飾*/
.list-grid1 .list h4.kazari::before {
	content: "“";	/*わかりづらいですが、中央にあるのが引用符でこの文字を出力しています。*/
	position: absolute;
	left: -1rem;	/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -40px;		/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
}

/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	font-size: 1.4rem;	/*文字サイズを140%に*/
	line-height: 1.6;	/*行間*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.9rem;	/*文字サイズを90%に*/
	line-height: 1.6;	/*行間*/
	font-weight: normal;
}

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
	color: #999;	/*文字色*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
	margin: 0 auto;
	width: 100px;		/*画像サイズ*/
	margin-top: -40px;	/*本来の場所より上にずらす*/
}

/*bg1内のfigureへの追加設定*/
.bg1 .list-grid1 .list figure.icon {
	filter: grayscale(100%) brightness(90%);	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
}

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

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure.icon {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}

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