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

/*-------------------------------------------------------------
 *
 *							common.css
 *
 *-------------------------------------------------------------*/
	body { font-size:88%; font-family:'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; line-height:1.672; -webkit-text-size-adjust:100%; color:#535d64; overflow-x: hidden; }
	.contentsBox	{ line-height: 1.9; }
	.yumincho		{ font-family :'Yu Mincho','YuMincho', sans-serif; }
	
	a				{ color:#535d64; text-decoration:underline; }
	a:hover			{ color:#535d64; text-decoration:none; }
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					h style
	 * ---------- ---------- ---------- ---------- ---------- */
		h1 { font-size:200%; }
		h2 { font-size:142%; }
		h3 { font-size:127.8%; font-weight:normal; }
		h4 { font-size:106.5%; font-weight:normal; }
		h5 { font-size:100%; }
		h6 { font-size:93%; }
		
	/* ---------- ---------- ---------- ---------- ----------
	 *					font style
	 * ---------- ---------- ---------- ---------- ---------- */
		/*	color	*/
			.colOran						{ color:#ff6600; }
			.colViolet						{ color:#8a2be2; }
			.colBlue						{ color:#004998; }

		/* backgroud */
			.bgGray							{ background: #d6d8dd; }

		/* border */
			.borderLBlue					{ border: 2px solid #e7eff7; }	
		
		/*	weight	*/
			.bold							{ font-weight:bold; }
		
		/*	size	*/
			.sizeS							{ font-size:83%; }
			.sizeM							{ font-size:93%; }
	
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					text position
	 * ---------- ---------- ---------- ---------- ---------- */
		.textRight							{ text-align:right !important; }
		.textLeft							{ text-align:left !important; }
		.textCenter							{ text-align:center !important; }
	
	/* ---------- ---------- ---------- ---------- ----------
	 *						title
	 * ---------- ---------- ---------- ---------- ---------- */
		.titleBlue							{ color: #0075be; font-weight: bold; font-family:'Arial', sans-serif; font-size: 14px; font-style: italic; }
		.titleMain							{ color: #000; font-size: 24px; padding-bottom: 35px; }
		/* 2階層、3階層以下 */
		#mainContents .titleMain			{ font-size: 30px; letter-spacing: 1px; }


	/* ---------- ---------- ---------- ---------- ----------
	 *						title
	 * ---------- ---------- ---------- ---------- ---------- */
	 	.btnArea a,
		button.btnArea 						{ display: block; color: #004998; border: 1px solid #004998; text-align: center; padding: 11px 0 10px; max-width: 260px; background: #fff; letter-spacing: 0.5px; text-decoration: none; }
		.btnArea a:hover,
		button.btnArea:hover				{ background: #e4eaf6; }


	/* ---------- ---------- ---------- ---------- ----------
	 *					flaot style
	 * ---------- ---------- ---------- ---------- ---------- */
		.flowHidden							{ overflow:hidden; }
		.left								{ float:left; }
		.right								{ float:right; }
		.clearB								{ clear:both; }
	
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					list style
	 * ---------- ---------- ---------- ---------- ---------- */
		dl, ul								{ display:flex; flex-wrap:wrap; }
		dt, dd, li							{ box-sizing:border-box; }
		
		/* news */
		.dlType01 dt						{ width:340px; margin:18px 0 0; }
		.dlType01 dd						{ margin:18px 0 0px 340px; }

		/* profile */
		.dlType02							{ display:block; overflow:hidden; }
		.dlType02 dt						{ float:left; width:130px; }
		.dlType02 dd						{ margin:0 0 0 130px; }

		/*	certification	*/
		.dlType03							{ display:block; overflow:hidden; }
		.dlType03 dt						{ float:left; width:1.2em; }
		.dlType03 dd						{ margin:0 0 0 1.2em; }

		.dlType06							{ display:block; overflow:hidden; }
		.dlType06 dt						{ float:left; width:1.7em; }
		.dlType06 dd						{ margin:0 0 0 1.7em; }

		/*	works	*/
		.dlType04							{ display:block; overflow:hidden; }
		.dlType04 dt						{ float:left; width:1.2em; position: relative; }
		.dlType04 dt::before				{ content: ""; width: 6px; height: 6px; display: inline-block; background: #000; border-radius: 50%; position: absolute; top:9px; left: 1px; }
		.dlType04 dd						{ margin:0 0 0 1.2em; }

		/* recruit */
		.dlType05							{ border:1px solid #dce7f4; background: #fff; padding: 20px; }
		.dlType05 dl						{ display:block; overflow:hidden; }
		.dlType05 dt						{ float:left; width:140px; }
		.dlType05 dd						{ margin:0 0 20px 140px; }
		.dlType05 dd:last-child				{ margin-bottom: 0px; }

		.dlType05.scrollArea				{ height: 140px; overflow-y: scroll; }
		.dlType05.scrollArea dt				{ margin-bottom: 5px; }
		.dlType05.scrollArea dd				{ margin:0 0 5px 140px; }
		.dlType05.scrollArea dl:last-child,
		.dlType05.scrollArea dd:last-child	{ margin-bottom: 0; }

		/* solution  Trail Route View*/
		.dlType07							{ display:block; overflow:hidden; font-size: 13px; }
		.dlType07 dt						{ float:left; width:2.5em; }
		.dlType07 dd						{ margin:0 0 0 2.5em; }

		/* mynumber */
		.dlType08							{ display:block; overflow:hidden; }
		.dlType08 dt						{ float:left; width:2.3em; margin-bottom: 30px; }
		.dlType08 dd						{ margin:0 0 0 2.3em; margin-bottom: 30px; }



	/* ---------- ---------- ---------- ---------- ----------
	 *					top topics
	 * ---------- ---------- ---------- ---------- ---------- */
		#areaTopics dl						{ border-bottom:1px solid #dce7f4; display: block; }
		#areaTopics dt					 	{ border-top:1px solid #dce7f4; padding-top: 18px; position: relative; float: left; letter-spacing: 0.5px; }
		#areaTopics dt:first-child			{ margin-top: 0; }
		#areaTopics span.newsTag 			{ padding: 4px 0; font-size: 85%; margin: 0 27px 0 25px; font-weight: normal; position:absolute; right:0; line-height: 1.3; background: #e8e9ec; letter-spacing: 2px; color: #1f1715; text-align: center; width: 170px; box-sizing: border-box; }
		#areaTopics dd						{ border-top:1px solid #dce7f4; padding:18px 0 2px; }
		#areaTopics dd:nth-of-type(1)		{ margin-top: 0; }
		.topics #areaTopics dd:nth-of-type(1)		{ margin-top: 18px; }
		#areaTopics dd:last-child			{ margin-bottom: 18px; }
		#areaTopics dd a					{ text-decoration: none; }
		#areaTopics dd a:hover				{ opacity: 0.8; }

		.topics #areaTopics p				{ color: #004998; font-size: 18px; font-weight: bold; padding-top: 100px; border-top: 1px solid #dce7f4; margin-top: 18px; }
		.topics #areaTopics p:first-child	{ padding-top: 0; border-top: none; margin-top: 0; }

		#areaTopics span.newsTag.fresh		{ background: #8fbfff; color: #fff; }
		#areaTopics span.newsTag.s_fresh	{ background: #004998; color: #fff; transform: scale(0.8,1); width: calc(170px * 1.25); margin-right: 7px; letter-spacing: 0.1px; }


	/* ---------- ---------- ---------- ---------- ----------
	 *					top whyTCS
	 * ---------- ---------- ---------- ---------- ---------- */
		.whyTCS div,
		#whyTCS_common div					{ max-width: 900px; margin: 0 auto; }
		.whyTCS								{ background: #004998; }
		#whyTCS_common						{ background: #d6d8dd; }
		#whyTCS_common div					{ padding: 75px 0; }
		.whyTCS a:hover,
		#whyTCS_common a:hover				{ opacity: 0.8; }
		.whyTCS	img,
		#whyTCS_common img					{ width: 100%; }
		
		
	/* ---------- ---------- ---------- ---------- ----------
	 *					topBusiness
	 * ---------- ---------- ---------- ---------- ---------- */
		.topBusiness						{ text-align:center; padding:140px 0 0; }
		.topBusiness .titleMain				{ font-size: 30px; }
		.topBusiness > h3					{ font-weight:normal; margin:0 0 35px; font-size: 17px; line-height: 1.6; letter-spacing: 0.5px; }
		.topBusiness > h4					{ font-size:100%; padding-bottom: 55px; }

		/* tab */			
		.topBusiness .tabMenu				{ max-width: 1100px; margin: 0 auto; padding: 0 30px; }
		.topBusiness .tabMenu li.topTabItem	{ color:#004998; width: 33.33333%; width: -webkit-calc(100% / 3); padding:16px 0; text-align:center; box-sizing: border-box; cursor: pointer; background-color: #d6d8dd; letter-spacing: 0.25px; }
		.tabMenu li.topTabItem:hover		{ background: #004998; color: #fff; }
		.tabMenu li.topTabItem.open			{ background: #004998; color: #fff; }

		.resp-tabs-container				{ background: #004998; padding-bottom: 107px;}
		.topBusiness.other .resp-tabs-container				{ padding-bottom: 0; }

		.topTabContents						{ max-width: 1100px; margin: 0 auto; padding:75px 0 107px; }
		.topTabContents p					{ color: #fff; text-align: center; font-size: 26px; margin-bottom: 20px; letter-spacing: 1px; }
		.topTabContents ul					{ justify-content: space-between; margin-bottom: 1.8%; }
		.topTabContents li					{ position: relative; overflow:hidden; width: 32%; }
		.topTabContents li a				{ display: block; }
		.topTabContents img					{ width: 100%; transition:1s all; }
		.topTabContents li a:hover img		{ transform:scale(1.2,1.2); transition:1s all; }
		.topTabContents	span				{ position: absolute; color: #fff; bottom: 15px; left: 20px; font-size: 18px; }

		/* tab03 */
		.topTabContents .tab03 ul			{ justify-content: flex-start; }
		.topTabContents .tab03 li			{ width: calc(100% / 5 - 20px); overflow: initial; border: 1px solid rgba(255, 255, 255, 0.5); display: flex; height: 63px; cursor: pointer; margin-right: 25px; }
		.topTabContents .tab03 li:last-child			{ margin-right: 0px; }

		.topTabContents .tab03 li a			{ color: #fff; padding: 20px; display: flex; width: 100%; justify-content: center; align-items: center; line-height: 1.3; text-decoration: none; }
		.topTabContents .tab03 li a:hover,
		.topTabContents .tab03 li.is-active	{ color: #004998; background: #fff; }
		.topTabContents .tab03 li.is-active a { color: #004998; }

		.topTabContents .tab03 li.tabContentsNone			{ border: 1px solid transparent!important; }
		.topTabContents .tab03 li.tabContentsNone a:hover	{ background: transparent; }


		.topTabContents.close				{ display:none; }


	/* ---------- ---------- ---------- ---------- ----------
	 *					table style		
	 * ---------- ---------- ---------- ---------- ---------- */
		table, th, td						{ border-style:solid; border-color:#dee4eb; }
		table								{ border-width:2px 0 0 0; width:100%; }
		th									{ border-width:0 0 2px 0; }
		td									{ border-width:0 0 2px 0; }
		
		table th, table td					{ padding:12px 20px 12px 0; box-sizing:border-box; vertical-align:top; text-align:left; }
		/*table tr td:first-child				{ padding-left:20px; }*/
		
		
		/*	profile, history, etc	*/
			.table1 tr > *					{ padding:15px 15px 15px 20px; }
			.table1 th						{ font-weight:bold; width:220px; }	

	
	/* ---------- ---------- ---------- ---------- ----------
	 *					display style
	 * ---------- ---------- ---------- ---------- ---------- */
		.dispNone, .printDisp				{ display:none; }

		.spDisp_1000						{ display:none !important; }
		.pcDisp								{ display:block; }

		.spDisp_767							{ display:none !important; }
		.pcDisp_767							{ display:block; }

		.spDisp_375							{ display:none !important; }
		.pcDisp_375							{ display:block; }

		.spDisp_320							{ display:none !important; }
		.pcDisp_320							{ display:block; }


	
	/* ---------- ---------- ---------- ---------- ----------
	 *					border style
	 * ---------- ---------- ---------- ---------- ---------- */
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					margin padding
	 * ---------- ---------- ---------- ---------- ---------- */
	 	#top .mTop12						{ margin-top:12px; }
							
	
	/* ---------- ---------- ---------- ---------- ----------
	 *					 white-space
	 * ---------- ---------- ---------- ---------- ---------- */
		.nowrap								{ white-space:nowrap; }
	
	
	
/*-------------------------------------------------------------
 *
 *						common.css(ver.SP)
 *
 *-------------------------------------------------------------*/
 @media screen and ( max-width:1200px ) {
		.topTabContents						{ padding-right: 20px; padding-left: 20px; }
		#topicsListMain						{ padding-right: 15px; padding-left: 15px; }

 }
 @media screen and ( max-width:1000px ) {

		.spDisp_1000						{ display:block !important; }
		.pcDisp								{ display:none; }

	/* ---------- ---------- ---------- ---------- ----------
	 *					topBusiness
	 * ---------- ---------- ---------- ---------- ---------- */
		.whyTCS img, #whyTCS_common img,
		.topTabContents img					{ height: auto; }

		.topTabContents .tab03 li			{ height: 73px; }
		.topTabContents .tab03 li a			{ padding: 20px 5px; }


	

 }


 @media screen and ( max-width:767px ) {
		body								{ font-size:85%; }
		h3 									{ font-size:117.8%; }

		.btnArea a, button.btnArea			{ padding: 8px 0; margin: 0 auto; }

		.spDisp_767							{ display:block !important; }
		.pcDisp_767							{ display:none; }


	/* ---------- ---------- ---------- ---------- ----------
	 *						title
	 * ---------- ---------- ---------- ---------- ---------- */
		.titleBlue							{ font-size: 12px; }
		.titleMain							{ font-size: 20px; line-height: 1.4; padding-top: 3px; padding-right: 20px; padding-left: 20px; }

		/* 2階層、3階層以下 */
		#mainContents .titleMain			{ font-size: 23px; }


	/* ---------- ---------- ---------- ---------- ----------
	 *					topBusiness
	 * ---------- ---------- ---------- ---------- ---------- */
	 	.topBusiness						{ padding: 80px 0 0; }
		.topBusiness .titleMain				{ font-size: 23px; }
		.topBusiness > h3					{ font-size: 16px; padding-right: 20px; padding-left: 20px; }
		.topBusiness > h4					{ padding-right: 20px; padding-left: 20px; }
		.topBusiness .tabMenu				{ padding-right: 20px; padding-left: 20px; }
		.topBusiness .tabMenu li.topTabItem	{ padding: 7px; font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
		.topTabContents						{ padding-top: 45px; padding-bottom: 60px; }
		.topTabContents p					{ font-size: 20px; }
		.topTabContents ul					{ display: block; margin: 0 25px; }
		.topTabContents li					{ width: 100%; margin-bottom: 20px; }

		/* tab03 */
		.topTabContents .tab03				{ overflow: hidden; /*margin-bottom: -140px;*/ }
		.topTabContents .tab03 ul			{ margin: 0; }
		.topTabContents .tab03 li			{ width: calc(100% / 2 - 3%); float: left; margin-right: 3%; margin-bottom: 3%; }
		.topTabContents .tab03 li:last-child{ margin-right: 3%; }

	/* ---------- ---------- ---------- ---------- ----------
	 *					top whyTCS
	 * ---------- ---------- ---------- ---------- ---------- */
	 	.whyTCS div a, #whyTCS_common div a { background:url("./../common/whyTCS_sp.png") no-repeat center center; display: inline-block; }
		.whyTCS div a img, 
		#whyTCS_common div a img 			{ opacity: 0; height: 300px; }

	/* ---------- ---------- ---------- ---------- ----------
	 *					top topics
	 * ---------- ---------- ---------- ---------- ---------- */
		#areaTopics dt						{ float: none; }
		#areaTopics dd						{ border: none; padding-top: 10px; }
		#areaTopics span.newsTag			{ right: inherit; left: 125px; margin-left: 10px; }

			/* ---------- ---------- ---------- ---------- ----------
			*					list style
			* ---------- ---------- ---------- ---------- ---------- */
				.dlType01 dt				{ width: 100%; }
				.dlType01 dd				{ margin: 0; }

				.dlType02 dt				{ width:120px; }
				.dlType02 dd				{ margin:0 0 0 120px; }
		

				.dlType05 dt				{ width: 100%; }
				.dlType05 dd				{ margin: 0 0 20px 0; }
				.dlType05 dd:last-child		{ margin-bottom: 0; }
		
	 
 }

 @media screen and ( max-width:375px ) {
		.spDisp_375							{ display:block !important; }
		.pcDisp_375							{ display:none; }

		#whyTCS_common div					{ padding-left: 15px; padding-right: 15px; }
		.whyTCS div a, #whyTCS_common div a	{ background: none; width: auto; height: auto; }
		.whyTCS div a img, 
		#whyTCS_common div a img			{ opacity: 1; height: auto; }

		#areaTopics span.newsTag.s_fresh	{ left: 103px; }


 }

 @media screen and ( max-width:320px ) {
		.spDisp_320							{ display:block !important; }
		.pcDisp_320							{ display:none; }

	/* ---------- ---------- ---------- ---------- ----------
	 *					top topics
	 * ---------- ---------- ---------- ---------- ---------- */

		#areaTopics span.newsTag			{ margin: 0 0 0 10px; width: 150px; }
		#areaTopics span.newsTag.s_fresh	{ width: calc(150px * 1.25); margin-right: -17px; left: 106px; }

 }