/*********************************************************************************************************************************

	地域・環境への活動報告、働く人を支える活動報告

*********************************************************************************************************************************/

body{
	background-color:#f4f4f4;
}


#main_message{
	padding:100px 50px !important;
	width:1100px;
	max-width:1100px;
	margin: 0 auto;
}

/*セレクトBOX（カテゴリー選択）･････････････････････････････････････*/
#catSelector02{
	display:inline-block;
	margin-bottom:50px;
	width: 1100px;
}
	#catSelector02>span{/*カテゴリー：*/
		width:auto;
		margin-right:0.5em;
		font-size:14px;
		font-weight:bold;
		float:right;
	}
	#catSelector02>select{
		width:20.0em;
		padding:4px 10px;
		color:#007545;
		font-size:16px;
		border:none !important;
		background:white url(../images/ico/ico_catSelector_arrow_g.png) right 9px center no-repeat;
		float:right;
	}


/*地域・環境への活動報告 一覧リスト････････････････････････････････*/
#listBlog02{
	display:inline-block;
	width:100%;
}
	#listBlog02_list,
	#listBlog02_list *{
		display:inline-block;
		width:100%;
	}
	#listBlog02_list{
		width: 1100px;
	}
		#listBlog02_list>li{/*カード*/
			height:380px;
			width:346px;
			margin-left:31px;
			float:left;
		}
		#listBlog02_list>li:nth-of-type(3n+1){/*3の倍数+1番目(1,4,7…)*/
			margin-left:0;
		}
			#listBlog02_list>li>a{
				height:100%;
			}
			#listBlog02_list>li>a:hover{
				opacity:1;
			}

				#listBlog02_list>li>a:hover>div>img,
				#listBlog02_list>li>a:hover>span{/*カテゴリー*/
						opacity: 0.7;
					}
				#listBlog02_list>li>a:hover p,
				#listBlog02_list>li>a:hover span{
					opacity:0.7;
					color: var(--Green_01);
				}
			#listBlog02_list>li>a:hover div>img{/*サムネイル画像*/
				transform:scale(1.2);/*拡大・縮小*/
				transition:0.4s ease-out;/*秒*/
				transform-origin:center center;/*軸*/
			}
				#listBlog02_list>li>a>div{/*サムネイル画像*/
					z-index:10;
					position:relative;
					height:208px;
					width:100%;
					overflow:hidden;
				}
					#listBlog02_list>li>a>div>img{
						z-index:20;
						position:absolute;
						top:0;
						left:0;
						right:auto;
						bottom:auto;
						height:208px;
						width:100%;
						object-fit:cover;
						object-position:center center;

						/*a:hoverからの戻りアニメ*/
						transform:scale(1.0);/*拡大・縮小*/
						transition:0.4s ease-out;/*秒*/
					}
				#listBlog02_list>li>a>p{/*記事タイトル*/
					height:61px;
					width:100%;
					margin-top:18px;
					font-size:16px;
					/*line-height:1.5em;*/
					overflow-y:hidden;
					letter-spacing: 0;
				}
				#listBlog02_list>li>a>span{/*カテゴリー*/
					width:100%;
					margin-top:16px;
					color:gray;
					font-size:12px;
					line-height:1.0em;
				}

/*ページネーション ････････････････････････････････*/
.pagenation{
	width: 1100px!important;
}










/*********************************************************************************************************************************

		メディアクエリ（ ～500px以下：モバイル対応 ）

*********************************************************************************************************************************/
@media(max-width:500px){
	#main_message{
		padding: 0!important;
		width: calc(100% - 50px)!important;
		margin: 0 auto;
	}

	/*セレクトBOX（カテゴリー選択）･････････････････････････････････････*/
	#catSelector02{
		width: 100%;
	}

	/*地域・環境への活動報告 一覧リスト････････････････････････････････*/
		#listBlog02_list{
			width: 100%;
		}

			#listBlog02_list>li{
				height: auto;
				width: 100%;
				margin-left: 0;
			}

			#listBlog02_list>li:not(:first-child){
				margin-top: 40px;
			}

				#listBlog02_list>li>a>div,
				#listBlog02_list>li>a>div>img{
					height: auto;
					aspect-ratio: 1.591 / 1;
				}

					#listBlog02_list>li>a>p{
						height: auto;
					}

	/*ページネーション ････････････････････････････････*/
	.pagenation{
		width: 100%!important;
	}
}