@charset "UTF-8";

/*
======== context ======================================

Last Updated:YYMMDD
Summary:全ページ共有で利用する各要素デザイン

* contents area内で適用

- hn
- link
- list
- number list
- box
- table
- dl
- text
- form
=======================================================
*/

/*-----------------------------------------------------
dl
-------------------------------------------------------*/

#contentsArea .consumerList{
	margin:.5em 0 1em 0;
}

.consumerList dt{
	float:left;
	padding: 0 0 4px 0;
	font-size:1.2em;
	font-weight:bold;
	margin:0;
}

.consumerList dd{
	padding: 3px 0 8px 11em;
	margin:0;

}


#contentsArea .consumerList02{
	margin:.5em 0 70px 0;
}

.consumerList02 dt{
	clear:both;
	float:left;
	padding: 0 0 4px 0;
	font-size:1.2em;
	font-weight:bold;
	margin:0;
}

.consumerList02 dd{
	padding: 3px 0 8px 10em;
	margin:0;

}

.consumerList02 dd a{
	background:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%229%22%20viewBox%3D%220%200%206%209%22%3E%3Cpath%20d%3D%22M14.2%2C18.2a1%2C1%2C0%2C0%2C1-.659-1.753l3.14-2.747-3.14-2.747a1%2C1%2C0%2C1%2C1%2C1.317-1.505l4%2C3.5a1%2C1%2C0%2C0%2C1%2C0%2C1.505l-4%2C3.5A1%2C1%2C0%2C0%2C1%2C14.2%2C18.2Z%22%20transform%3D%22translate(-13.2%20-9.2)%22%20fill%3D%22%23004697%22%2F%3E%3C%2Fsvg%3E") no-repeat left .6em;
	padding : 0 0 0 10px;
	margin: 0 0 0 10px;
	display:block;
}

#contentsArea .memberList{
	margin:.5em 0 1em 0;
}

.memberList dt{
	float:left;
	padding: 0 0 4px 5em;
	margin:0;
	position:relative;
}

.memberList dt .leader{
	position:absolute;
	top:0;
	left:0;
	font-weight:bold;
}

.memberList dd{
	padding: 3px 0 8px 15em;
	margin:0;

}

#contentsArea .documentList{
	margin:.5em 1em 1em 1em;
}

.documentList dt a{
	background:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%229%22%20viewBox%3D%220%200%206%209%22%3E%3Cpath%20d%3D%22M14.2%2C18.2a1%2C1%2C0%2C0%2C1-.659-1.753l3.14-2.747-3.14-2.747a1%2C1%2C0%2C1%2C1%2C1.317-1.505l4%2C3.5a1%2C1%2C0%2C0%2C1%2C0%2C1.505l-4%2C3.5A1%2C1%2C0%2C0%2C1%2C14.2%2C18.2Z%22%20transform%3D%22translate(-13.2%20-9.2)%22%20fill%3D%22%23004697%22%2F%3E%3C%2Fsvg%3E") no-repeat left .6em;
	padding : 0 0 0 12px;
	margin:0;
	display:block;
}

.documentList dd{
	margin: 0 0 1em 50px;
}

/*------------------------------------------------------
top bannerList(4col)
------------------------------------------------------*/
#contentsArea ul.consumerInfoList,
#contentsArea ul.consumerInfoList li{
	margin:0;
	padding:0;
}

#contentsArea ul.consumerInfoList{
	margin-top: 20px;
	margin-bottom: 15px;
	text-align: center;
}

#contentsArea ul.consumerInfoList li{
	list-style-type: none;
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 24%;
	margin-bottom: 10px;
}

/*------------------------------------------------------
bannerList(3col)
------------------------------------------------------*/
#contentsArea ul.consumerBannerList3col,
#contentsArea ul.consumerBannerList3col li{
	margin:0;
	padding:0;
}

#contentsArea ul.consumerBannerList3col{
	margin-top: 20px;
	margin-bottom: 15px;
	text-align: center;
}

#contentsArea ul.consumerBannerList3col li{
	list-style-type: none;
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 30%;
	margin-bottom: 10px;
}


/*-----------------------------------------------------
p
-------------------------------------------------------*/
#contentsArea .consumerList p{
	margin:.5em 0;

}


/************************************************************************************
smaller than 767 SP
*************************************************************************************/
@media screen and (max-width: 767px) {

/*------------------------------------------------------
bannerList(3col)
------------------------------------------------------*/

	#contentsArea ul.consumerBannerList3col li{
		width: 30%;
		margin-bottom: 10px;
	}

	#contentsArea ul.consumerBannerList3col li img{
		width: 90%;
		height: auto;
	}
}


/************************************************************************************
smaller than 680 SP
*************************************************************************************/
@media screen and (max-width: 680px) {
/*------------------------------------------------------
top bannerList(4col)
------------------------------------------------------*/
	#contentsArea ul.consumerInfoList li img{
		width: 95%;
		height: auto;
	}
}


/************************************************************************************
smaller than 480 SP
*************************************************************************************/
@media screen and (max-width: 480px) {
/*------------------------------------------------------
consumerInfoList(2col)
------------------------------------------------------*/
	#contentsArea ul.consumerInfoList li{
		width: 48%;
	}

/*------------------------------------------------------
bannerList(3col)
------------------------------------------------------*/
	#contentsArea ul.consumerBannerList3col{
		text-align: left;
	}

	#contentsArea ul.consumerBannerList3col li{
		width: 48%;
		text-align: center;
	}

	#contentsArea ul.consumerBannerList3col li img{
		width: 100%;
	}
}