@charset "utf-8";


/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half-kiji .list-kiji {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
}

/*h4*/
.list-half-kiji .list-kiji  h4 {
	font-size: 1.2rem;
	margin-bottom: 2rem;
}

/*画像ブロック共通*/
.list-half-kiji .image-l-kiji, .list-half-kiji .image-r-kiji {
	margin-left: 1rem;margin-right: 1rem;	/*画像の左右に1文字分のスペースを空ける*/
	position: relative;	/*子要素のアイコンを絶対配置する為の設定*/
}

/*テキストブロック*/
.tp-list-half .tp-text {
	flex: 1;
}

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

		/*２カラムを囲むブロック*/
		.list-half-kiji .list-kiji {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
		}
		
		/*画像ブロック共通*/
		.list-half-kiji .image-l-kiji, .list-half-kiji .image-r-kiji {
			width: 50%;			/*幅。下のテキストブロックのwidthと調整して下さい。*/
		}
		
		/*画像を右に配置する場合*/
		.list-half-kiji .image-r-kiji {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half-kiji .image-l-kiji {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

		/*テキストブロック*/
		.list-half-kiji .text-kiji {
			width: 50%;			/*幅。上の「画像ブロック共通」のwidthと調整して下さい。*/
		}

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


/*横長タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal-kiji .list-kiji {
	display: flex;	/*flexボックスを使う指定*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 25px 0;	/*上下、左右へのボックス内の余白*/
}

.list-normal-kiji .list-kiji div {
	flex: 1;
}

/*１つ目のボックスにのみ上に線を入れる*/
.list-normal-kiji .list-kiji:nth-of-type(1) {
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*ボックス内のfigure画像*/
.list-normal-kiji .list-kiji figure {
	width: 20%;			/*画像の幅*/
	margin-right: 20px;	/*画像の右側に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-normal-kiji .list-kiji h4 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	margin-bottom: 10px;	/*下に少し余白を作る*/
	color: #333;			/*文字色*/		
}
.list-normal-kiji .list-kiji h4 a  {
	color: inherit;
}

/*ボックス内のpタグ*/
.list-normal-kiji .list-kiji p {
	margin: 0;
	font-size: 0.7em;		/*文字サイズを親要素の70%に。*/
}


/*list内のtableっぽく見える所
---------------------------------------------------------------------------*/
.list-normal-kiji {
	display: grid;
}

.list-normal-kiji dl.line-kiji {
	display: grid;
	grid-template-columns: repeat(2, auto);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	border-top: 1px solid #ccc;
}

/*見出し(dt)とコメント(dd)*/
.list-normal-kiji dl.line-kiji dt, dl.line-kiji dd {
	border-bottom: 1px solid #ccc;
	padding: 0 0.5rem;
}
/*見出し(dt)*/
.list-normal-kiji dl.line-kiji dt {
	background: rgba(0,0,0,0.05);
}

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

	.list-normal-kiji dl.line-kiji {
		grid-template-columns: repeat(4, auto);	/*4列に*/
	}

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


/*その他
---------------------------------------------------------------------------*/
.mb1rem {margin-bottom: 1rem !important;}