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

		【部品】リスト系・固定ページの部品

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


/*セレクトBOX（カテゴリー選択）･････････････････････････････････････*/
#catSelector{
	display:inline-block;
	width:100%;
	max-width:1000px;
	margin-bottom:50px;
}
	#catSelector>span{/*カテゴリー：*/
		width:auto;
		margin-right:0.5em;
		font-size:17px;
		font-weight:bold;
		float:right;
	}
	#catSelector>select{
		width:15.0em;
		padding-left:0.8em;
		font-size:17px;
		float:right;
		background:white url(images/ico/ico_catSelector_arrow.png) right 9px center no-repeat;
	}


/*ブログ一覧リスト･････････････････････････････････････････････････*/
#listBlog{
	display:inline-block;
	width:100%;
}
	#listBlog_list,
	#listBlog_list *{
		display:inline-block;
		width:100%;
	}
	#listBlog_list{
		width:1000px;
		max-width:1000px;
	}
		#listBlog_list>li{/*カード*/
			height:370px;
			width:33.33333333333333%;
			border-right:solid 1px var(--Gray_02);
			border-bottom:solid 1px var(--Gray_02);
			box-sizing:border-box;
			float:left;
		}
		#listBlog_list>li:nth-of-type(-n+3){/*上から3番目まで*/
			border-top:solid 1px var(--Gray_02);
		}
		#listBlog_list>li:nth-of-type(3n+1){/*3の倍数+1番目(1,4,7…)*/
			border-left:solid 1px var(--Gray_02);
		}
			#listBlog_list>li>a{
				position:relative;
				height:100%;
				background-color:white;
			}
			#listBlog_list>li>a:hover{
				opacity:1;
				color:var(--Cyan_02);
			}
			#listBlog_list>li>a:hover div>img{/*サムネイル画像*/
				transform:scale(1.2);/*拡大・縮小*/
				transition:0.4s ease-out;/*秒*/
				transform-origin:center center;/*軸*/
			}
				#listBlog_list>li>a>div{
					z-index:10;
					position:absolute;
					top:0;
					left:0;
					right:auto;
					bottom:auto;
					height:208px;
					width:100%;
					overflow:hidden;
				}
					#listBlog_list>li>a>div>span{/*カテゴリー*/
						z-index:30;
						position:absolute;
						top:0;
						left:0;
						right:auto;
						bottom:auto;
						width:auto;
						padding:2px 18px;
						color:white;
						background-color:var(--Category_01);
					}
					#listBlog_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;/*秒*/
					}
				#listBlog_list>li>a>p{
					position:absolute;
					top:228px;
					left:30px;
					right:auto;
					bottom:auto;
					height:102px;
					width:calc(100% - 60px);
					font-weight:bold;
				}
				#listBlog_list>li>a>span{
					position:absolute;
					top:auto;
					left:30px;
					right:auto;
					bottom:25px;
					width:calc(100% - 60px);
					color:gray;
					font-size:14px;
					line-height:1.0em;
				}


/*お知らせ一覧リスト････････････････････････････････････････････････*/
#listNews{
	display:inline-block;
	width:100%;
}
	#listNews_list,
	#listNews_list *{
		display:inline-block;
		width:100%;
	}
	#listNews_list{
		width:1000px;
		max-width:1000px;
		box-sizing:border-box;
		background-color:var(--Gray_00);
	}
		#listNews_list>li:nth-of-type(n+2){/*2番目以降*/
			border-top:solid 1px var(--Gray_03);
			box-sizing:border-box;
		}
			#listNews_list>li>a{
				position:relative;
				height:130px;
			}
			#listNews_list>li>a:hover{
				opacity:1;
			}
				#listNews_list>li>a>p{
					position:absolute;
					height:100%;
					width:250px;
					border-right:solid 1px var(--Gray_01);
					box-sizing:border-box;
					overflow:hidden;
					float:left;
				}
					#listNews_list>li>a>p>span{/*タグ名*/
						z-index:99;
						display:inline-block;
						position:absolute;
						top:0;
						left:0;
						width:auto;
						max-width:100%;
						padding:2px 18px;
						color:white;
						background-color:var(--Category_01);
					}
					#listNews_list>li>a>p>img{/*サムネイル画像*/
						position:absolute;
						height:100%;
						width:100%;
						object-fit:cover;
						object-position:center center;
					}
					#listNews_list>li>a>p>img:hover{
						opacity:1;
					}
					#listNews_list>li>a:hover p>img{
						transform:scale(1.2);/*拡大・縮小*/
						transition:0.4s ease-out;/*秒*/
						transform-origin:center center;/*軸*/
					}
					#listNews_list>li>a>div{/*日付・テキスト*/
						height:130px;
						width:calc(100% - 250px);
						padding:18px 37px;
						box-sizing:border-box;
						overflow:hidden;
						float:right;
					}
						#listNews_list>li>a>div>span{
							color:var(--Gray_03);
						}
						#listNews_list>li>a:hover div>span{
							color:var(--Cyan_03);
						}
						#listNews_list>li>a>div>p{
							margin-top:4px;
							text-align-last:left;
						}
						#listNews_list>li>a:hover div>p{
							color:var(--Cyan_04);
						}


	/*ラベル（カテゴリー・タグ・タクソノミー）の背景色･･････････････*/
	span.blogCat_1,
	span.blogCat_11,
	span.blogCat_21,
	span.blogCat_31,
	span.blogCat_41{/*1,11,21,31,41番目のカテゴリー*/
		background-color:var(--Category_01) !important;
	}
	span.blogCat_2,
	span.blogCat_12,
	span.blogCat_22,
	span.blogCat_32,
	span.blogCat_42{/*2,12,22,32,42番目のカテゴリー*/
		background-color:var(--Category_02) !important;
	}
	span.blogCat_3,
	span.blogCat_13,
	span.blogCat_23,
	span.blogCat_33,
	span.blogCat_43{/*3,13,23,33,43番目のカテゴリー*/
		background-color:var(--Category_03) !important;
	}
	span.blogCat_4,
	span.blogCat_14,
	span.blogCat_24,
	span.blogCat_34,
	span.blogCat_44{/*4,14,24,34,44番目のカテゴリー*/
		background-color:var(--Category_04) !important;
	}
	span.blogCat_5,
	span.blogCat_15,
	span.blogCat_25,
	span.blogCat_35,
	span.blogCat_45{/*5,15,25,35,45番目のカテゴリー*/
		background-color:var(--Category_05) !important;
	}
	span.blogCat_6,
	span.blogCat_16,
	span.blogCat_26,
	span.blogCat_36,
	span.blogCat_46{/*6,16,26,36,46番目のカテゴリー*/
		background-color:var(--Category_06) !important;
	}
	span.blogCat_7,
	span.blogCat_17,
	span.blogCat_27,
	span.blogCat_37,
	span.blogCat_47{/*7,17,27,37,47番目のカテゴリー*/
		background-color:var(--Category_07) !important;
	}
	span.blogCat_8,
	span.blogCat_18,
	span.blogCat_28,
	span.blogCat_38,
	span.blogCat_48{/*8,18,28,38,48番目のカテゴリー*/
		background-color:var(--Category_08) !important;
	}
	span.blogCat_9,
	span.blogCat_19,
	span.blogCat_29,
	span.blogCat_39,
	span.blogCat_49{/*9,19,29,39,49番目のカテゴリー*/
		background-color:var(--Category_09) !important;
	}
	span.blogCat_10,
	span.blogCat_20,
	span.blogCat_30,
	span.blogCat_40,
	span.blogCat_50{/*10,20,30,40,50番目のカテゴリー*/
		background-color:var(--Category_10) !important;
	}


/*よくあるご質問（FAQ一覧）･････････････････････････････････････････*/
.listFAQ{
	display:inline-block;
	width:100%;
}
	.listFAQ_list,
	.listFAQ_list *{
		display:inline-block;
		width:100%;
	}
	.listFAQ_list{
		width:1100px;
		max-width:1100px;
	}
		.listFAQ_list>li{
			background-color:white;
		}
		.listFAQ_list>li:nth-of-type(n+2){/*2番目以降*/
			margin-top:18px !important;
		}
			.listFAQ_list>li>p{
				position:relative;
				width:calc(100% - 192px);
				padding:21px 86px 21px 106px;
				font-size:15px;
				text-align:left;
				text-align-last:left;
			}
			.listFAQ_list>li>p.listFAQ_f{/*質問*/
				pointer-events:auto;
				cursor:pointer;
				background:url(images/ico/ico_faqQuestion.png) left 45px top 21px no-repeat;
			}
			.listFAQ_list>li>p.listFAQ_a{/*回答*/
				display:none;
				background-image:url(images/ico/ico_faqAnswer.png), url(images/ico/line_w988.png);
				background-position:left 45px top 21px, center top;
				background-repeat:no-repeat, no-repeat;	
				/*background:url(images/ico/ico_faqAnswer.png) left 45px top 21px no-repeat; //A*/
			}
				.listFAQ_list>li>p>span{/* ＞ */
					position:absolute;
					top:0;
					left:auto;
					right:68px;
					bottom:0;
					margin:auto;
					height:13px;
					width:13px;
					background:url(images/ico/ico_faqPlus.png) center center no-repeat;
				}

				/*faqArrow アニメーション･･････････････････････････*/
				.faqArrow_90deg{
					transform-origin:center center;/*基準点*/
					animation:faqArrow_90deg 0.25s ease-out forwards;
				}
				.faqArrow_0deg{
					transform-origin:center center;/*基準点*/
					animation:faqArrow_0deg 0.25s ease-out forwards;
				}

				@keyframes faqArrow_90deg{
					from{/*デフォルト*/
						transform:rotate(0deg);
					}
					to{
						transform:rotate(90deg);
					}
				}
				@keyframes faqArrow_0deg{
					from{/*デフォルト*/
						transform:rotate(90deg);
					}
					to{
						transform:rotate(0deg);
					}
				}
				/*･････････････････････････････････････････････････*/




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

		メディアクエリ（ ～1000px以下 ）

*********************************************************************************************************************************/
@media(max-width:1000px){


	/*セレクトBOX（カテゴリー選択）･････････････････････････････････････*/
	#catSelector{
		width:95%;
		margin-left:2.5%;
	}


	/*ブログ一覧リスト･････････････････････････････････････････････････*/
	#listBlog #catSelector{
		margin-left:0;
	}
	#listBlog_list{
		width:667px;
		max-width:667px;
	}
		#listBlog_list>li{/*カード*/
			width:50%;
		}
		#listBlog_list>li:nth-of-type(-n+3){/*上から3番目まで*/
			border-top:none;
		}
		#listBlog_list>li:nth-of-type(3n+1){/*3の倍数+1番目(1,4,7…)*/
			border-left:none;
		}
		#listBlog_list>li:nth-of-type(-n+2){/*上から2番目まで*/
			border-top:solid 1px var(--Gray_02);
		}
		#listBlog_list>li:nth-of-type(2n+1){/*2の倍数+1番目(1,3,5…)*/
			border-left:solid 1px var(--Gray_02);
		}


	/*お知らせ一覧リスト････････････････････････････････････････････････*/
	#listNews_list{
		width:100%;
	}
		#listNews_list>li>a{
			height:auto;
			min-height:130px;
		}
			#listNews_list>li>a>div{/*日付・テキスト*/
				height:auto;
				min-height:130px;
			}


	/*よくあるご質問（FAQ一覧）････････････････････････････････････････*/
	.listFAQ_list{
		width:95%;
		margin-left:2.5%;
	}

}




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

		メディアクエリ（ ～750px以下 ）

*********************************************************************************************************************************/
@media(max-width:750px){
}




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

		メディアクエリ（ ～500px以下 ）

*********************************************************************************************************************************/
@media(max-width:500px){


	/*セレクトBOX（カテゴリー選択）･････････････････････････････････････*/
	#catSelector{
		width:450px;
		margin-top:50px;
		margin-left:25px;

		/*表示順の変更*/
		display:flex;
		flex-direction:column;
		-webkit-flex-direction:column;
	}
		#catSelector>span{/*セレクトエリア*/
			font-size:23px;
			order:1; -ms-flex-order:1;/*表示順*/
		}
		#catSelector>select{/*セレクトエリア*/
			font-size:23px;
			order:2; -ms-flex-order:2;/*表示順*/
			border:solid 1px var(--Gray_03) !important;
		}


	/*ブログ一覧リスト･････････････････････････････････････････････････*/
	#listBlog #catSelector{
		margin-left:25px;
	}
	#listBlog_list{
		width:450px;
		max-width:450px;
	}
		#listBlog_list>li{/*カード*/
			width:100%;
			border:solid 1px var(--Gray_02);
		}
		#listBlog_list>li:nth-of-type(-n+3){/*上から3番目まで*/
			border-top:solid 1px var(--Gray_02);
		}
		#listBlog_list>li:nth-of-type(3n+1){/*3の倍数+1番目(1,4,7…)*/
			border-left:solid 1px var(--Gray_02);
		}
		#listBlog_list>li:nth-of-type(n+2){/*2番目以降*/
			margin-top:48px;
		}
			#listBlog_list>li>a:hover{
				color:black;
			}
			#listBlog_list>li>a:hover div>img{/*サムネイル画像*/
				transform:scale(1.0);/*拡大・縮小*/
				transition:0;/*秒*/
			}
				#listBlog_list>li>a>span{
					font-size:21px;
				}


	/*お知らせ一覧リスト････････････････････････････････････････････････*/
	#listNews_list{
		width:450px;
		max-width:450px;
		border:none;
		background-color:white;
	}
		#listNews_list>li:nth-of-type(n+2){/*2番目以降*/
			margin-top:48px;
		}
		#listNews_list>li{
			border:solid 1px var(--Gray_03);
			box-sizing:border-box;
		}
			#listNews_list>li>a{
				height:auto;
			}
				#listNews_list>li>a>p{
					width:100%;
				}
					#listNews_list>li>a>p>img{
						height:208px;
					}
					#listNews_list>li>a:hover p>img{/*サムネイル画像*/
						transform:scale(1.0);/*拡大・縮小*/
						transition:0s ease-out;/*秒*/
					}
					#listNews_list>li>a>div{/*日付・テキスト*/
						height:auto;
						width:100%;
						margin-top:208px;
						padding:20px 30px;
					}
						#listNews_list>li>a:hover div>span{
							color:var(--Gray_03);
						}
						#listNews_list>li>a>div>p{
							color:black;
							font-weight:bold;
						}
						#listNews_list>li>a:hover div>p{
							color:black;
						}


	/*よくあるご質問（FAQ一覧）････････････････････････････････････････*/
	.listFAQ_list{/*リスト*/
		width:450px;
		max-width:450px;
		margin-left:0;
		border:solid 1px var(--Gray_03);
		box-sizing:border-box;
	}
		.listFAQ_list>li:nth-of-type(n+2){/*2番目以降*/
			border-top:solid 1px var(--Gray_03);
		}
			.listFAQ_list>li>p{
				font-size:19px;
			}
			.listFAQ_list>li>p.listFAQ_f{/*質問*/
				width:calc(100% - 114px);
				padding:21px 48px 21px 66px;
			}
			.listFAQ_list>li>p.listFAQ_a{/*回答*/
				width:calc(100% - 50px);
				padding:21px 25px 21px 25px;
				border-top:solid 1px var(--Gray_03);
			}

}