@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------
 *
 *						style_top.css
 *
 *-------------------------------------------------------------*/
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					top contents
	 * ---------- ---------- ---------- ---------- ---------- */
	 	#mainContents					{ /*width: 1100px;*/ margin: 0 auto; overflow: hidden; padding-left: 300px; } 
		#mainContents.top				{ position: relative; }
		.bgWhite						{ background:#fff; padding-bottom: 160px; }
		.bgWhite >div					{ max-width:1200px; margin:0 auto; }
		.bgGray							{ width:100%; margin:0 auto; padding-top: 72px; margin-top: -72px; }
		
		#mainImage 						{ position: relative; }
		#mainImage #catchCopy			{ position: absolute; right: 10%; color: #fff; bottom: 8.5%; font-size: 185%; font-family: toppan-bunkyu-mincho-pr6n, serif; }
		#mainImage #catchCopy p.fLine		{ margin-left: -20%; }
		#mainImage #catchCopy p.sLine		{ margin-left: -3%; }
		.contentsBox					{ overflow: hidden; margin: 0 7.14% 300px auto; width: 81.8%; }
	/* ---------- ---------- ---------- ---------- ----------
	 *					top image
	 * ---------- ---------- ---------- ---------- ---------- */
		
		#mainImage .mainCatch			{ position: absolute; width: 880px; top:49%; left: 58%; transform: translate(-50%,-50%); }
		#mainImage .mainCatch .pcDisp img	{ width: 70%; }
		.mainCatch .mainCatch_pc01		{ margin: 16px 0; animation: mainCatch_pc01 8s ease-in .0s normal forwards; opacity: 0; }
		
	/* ---------- ---------- ---------- ---------- ----------
	 *					top main catch
	 * ---------- ---------- ---------- ---------- ---------- */
	 
		#topCatch						{ box-sizing:border-box; background: #fff; border-top: 10px solid; border-image: linear-gradient(to right, #a291db 0%, #00407d 100%);	border-image-slice: 1; /*position: absolute; bottom: 0; width: 100%;*/ }
		#topCatch h3					{ font-size:116%; padding: 25px 0; }
		
	/* ---------- ---------- ---------- ---------- ----------
	 *					topArea
	 * ---------- ---------- ---------- ---------- ---------- */
		.topArea01						{ }
		.topArea02						{ margin: 115px auto 0; overflow: hidden; }
		.topArea03						{ margin: 115px auto 0; overflow: hidden; }
		.topArea04						{ margin: 115px auto 0; overflow: hidden; }
		
		
		
		
		
		.backNumber						{ text-align: right; border-bottom: 1px solid #d9d9d9; line-height: 32px; }
		
	/* ---------- ---------- ---------- ---------- ----------
	 *					top Foundation
	 * ---------- ---------- ---------- ---------- ---------- */
		.imgArea01						{ float: right; width: 84.4%; }
		.imgArea02						{ width: 100%;; float: right; }
		.imgArea03						{ width: 100%; float: right; }
		.imgArea04						{ width: 75.4%; text-align: right; }
		.imgArea01 img					{ width: 100%; }
		.imgArea02 img					{ width: 75.4%; }
		.imgArea03 img					{ width: 67.2%; }

		.frameArea01					{ width: 27%; }
		.frameArea02					{ float: right;margin:-38% 13% 0 0; } 
		.frameArea03					{ float: right; margin:-28% 19% 0 0; } 
		
		.list01							{ width: 225px; height: 289px; border: 1px solid #cccccc; padding: 30px 18% 30px 30px; position: relative; background-color: #fff; /*display: inline-block;*/ margin: 58px 0 0 0; box-sizing: border-box; white-space: nowrap; }
	 	.list01 h2						{ color: #003067; font-weight: 400; font-family: toppan-bunkyu-mincho-pr6n, serif; font-style: normal; }
		.list01 li						{ list-style: none; margin-top: 19px; line-height: 32px; }
		.list01 li a					{ color: #ccb50f;  }
		.list01 li:nth-child(2)			{ margin-top: 8%; }
		.list01 li:nth-child(3)			{ margin-top: 19px; }
		.list01 li:nth-child(4)			{ margin-top: 17px; }
		.list01 li:nth-child(5)			{ margin-top: 16px; }
		
		.list02							{ border: 1px solid #cccccc; padding: 30px 15.6% 30px 30px; float: right; position: relative; background-color: #fff; display: inline-block; box-sizing: border-box; white-space: nowrap; height: 187px; }
	 	.list02 h2						{ color: #003067; font-weight: 400; font-family: toppan-bunkyu-mincho-pr6n, serif; font-style: normal; }
		.list02 li						{ list-style: none; margin-top: 19px; }
		.list02 li:nth-child(2)			{ margin-top: 10%; }
		.list02 li:nth-child(3)			{ margin-top: 12%; }
		.list02 li a					{ color: #ccb50f;  }
		
		.list03							{ border: 1px solid #cccccc; padding: 30px 16.6% 30px 30px; /*float: right;*/ position: relative; background-color: #fff; display: inline-block; box-sizing: border-box; white-space: nowrap; height: 136px; }
	 	.list03 h2						{ color: #003067; font-weight: 400; font-family: toppan-bunkyu-mincho-pr6n, serif; font-style: normal;  line-height: 24px; }
		.list03 li						{ list-style: none; margin-top: 35px; }
		.list03 li:nth-child(2)			{ margin-top: 32px;  line-height: 15px; }
		.list03 li a					{ color: #ccb50f;  }
		
		
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					top topics
	 * ---------- ---------- ---------- ---------- ---------- */
		#areaTopics						{ padding:100px 0 0; margin-bottom: 90px; }

	/* ---------- ---------- ---------- ---------- ----------
	 *					top solution
	 * ---------- ---------- ---------- ---------- ---------- */
		

		

/*-------------------------------------------------------------
 *
 *						style_top.css(ver.SP)
 *
 *-------------------------------------------------------------*/
 	@media screen and ( max-width:900px ) {

		/* ---------- ---------- ---------- ---------- ----------
		*					top contents
		* ---------- ---------- ---------- ---------- ---------- */
		
		#mainContents						{ padding: 0; }
		#mainImage #catchCopy				{ font-size: 145%; }
		
		.floatRight							{ float: none; }
		
		.contentsBox						{ margin-bottom: 330px; width: 100%; }
		
		
		
		
		
		.topArea01							{ margin: 0 7.14% 80px auto; width: 81.8%; }
		.topArea03							{ width: 81.8%; margin: 80px auto 0; }
		.topArea04							{ width: 81.8%; margin: 80px auto 0; }
		
		
		
		
		.imgArea01							{ float: none; width: 100%; }
		.imgArea04							{ float: right; }
		
		
		.imgArea02 img						{ width: 95%; }
		.imgArea03 img						{ width: 74.2%; }
		
		.frameArea02						{ margin: -28% 0 0 0; }
		.frameArea03						{ margin: -15% 0 0 20%; float: left; }
		
		
		.list01								{ margin: -100px 0 0 30%; height: 235px; padding: 30px 0 10px 30px; }
		.list01 li:nth-child(2)				{ margin-top: 5%; }
		.list01 li:nth-child(3)				{ margin-top: 2%; }
		.list01 li:nth-child(4)				{ margin-top: 2%; }
		.list01 li:nth-child(5)				{ margin-top: 2%; }
		
		.list02								{ height: 165px; width: 238px; padding: 30px 15.6% 20% 30px; }
		.list02 li:nth-child(2)				{ margin-top: 11px; }
		.list02 li:nth-child(3)				{ margin-top: 8%; }
		
		
		.list03								{ height: 125px; padding: 30px 16.6% 22.7% 30px; }
		.list03 li:nth-child(2)				{ margin-top: 24px; }
		
		
				

		/* ---------- ---------- ---------- ---------- ----------
		*					top solution
		* ---------- ---------- ---------- ---------- ---------- */
			#areaSol						{ padding:90px 20px; }
			
			


	 }
	 
	 
		/* Chrome & Safari & Edge */
		@media screen and( max-width:900px ) and (-webkit-min-device-pixel-ratio:0){
			.list01 li a	{color:red;}

	}
	
		/* Chromeの場合 */
		
		@media screen and ( max-width:900px ) {

		
		
			:lang(x)::-internal-media-controls-overlay-cast-button, {
			}

		}
		
		

		
		

	 
	@media screen and ( max-width:750px ) {
		
		#mainImage #catchCopy				{ font-size: 115%; }
		
		
	}
	


	


	@media screen and ( max-width:500px ) {
		
		
		.frameArea03						{ margin: -27% 0 0 10%; }
		
		
		.imgArea03 img						{ width: 87.2%; }
		
		
		
	}