/* CSS Document */


/*- category -*/

/*------------------------------------------------------------------------------------------------------------------------------------------

* all

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 600px未満
---------------------------------------------------------------------*/
#contents{
	background:#fffde1;
	padding:4.5rem 1rem 5rem;
}

.training{
	background:#5e99d5;
}

.recruit{
	background:#22b573;
}

.notice{
	background:#ff8f8f;
}

.pdf:after{
	content:"";
	display:inline-block;
	background:url(../img/pdf.svg) no-repeat center;
	background-size:contain;
	margin-left:0.5rem;
	height:1.4rem;
	width:1.4rem;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* 320px以下用
---------------------------------------------------------------------*/

@media print,screen and (max-width: 320px) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#contents{
		padding:9rem 2rem 10rem;
	}

	.pdf:after{
		margin-left:1rem;
		height:2.8rem;
		width:2.8rem;
	}
	
}




/* PC用1024px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px){
	
	#contents{
		padding:90px 2rem 100px;
	}

	.pdf:after{
		margin-left:0.8rem;
		height:1.6rem;
		width:1.6rem;
	}
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
	
	#contents{
		padding:90px 0 100px;
	}
	
	#contents > *{
		margin:0 auto;
		width:1040px;
	}
	
}







/*------------------------------------------------------------------------------------------------------------------------------------------

* loop

------------------------------------------------------------------------------------------------------------------------------------------*/

/* screen width 768px未満
---------------------------------------------------------------------*/
#loop ul{
	background:#FFFFFF;
	border-radius:10px;
	padding:2rem;
}

#loop ul li{
	border-bottom:1px dotted #CCCCCC;
	padding-bottom:1.4rem;
}

#loop ul li + li{
	margin-top:1rem;
}

#loop ul li div{
	display:inline-block;
	margin-left:0.8rem;
}

#loop ul li div span{
	display:inline-flex;
	align-items:center;
	border-radius:99px;
	font-weight:bold;
	color:#FFFFFF;
	padding:0 0.7rem;
}

#loop ul li a{
	display:block;
	margin-top:1.4rem;
}




/* 横向き用
---------------------------------------------------------------------*/

@media (orientation: landscape) {
}




/* 320px以下用
---------------------------------------------------------------------*/

@media print,screen and (max-width: 320px) {
}




/* TAB用768px～（TAB）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 768px) {
	
	#loop ul{
		border-radius:20px;
		padding:4rem;
	}

	#loop ul li{
		padding-bottom:2.8rem;
	}
	
	#loop ul li:first-of-type{
		padding-top:0;
	}

	#loop ul li + li{
		margin-top:2rem;
	}

	#loop ul li div{
		margin-left:1.6rem;
	}

	#loop ul li div span{
		padding:0 1.4rem;
	}

	#loop ul li a{
		margin-top:2.8rem;
	}	
	
}




/* PC用1024px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1024px){
	
	#loop ul{
		border-radius:10px;
		padding:40px;
	}

	#loop ul li{
		padding:30px 0;
	}
	
	#loop ul li:first-of-type{
		padding-top:0;
	}

	 #loop ul li + li{
		margin-top:0;
	}

	#loop ul li div{
		margin-left:10px;
	}
	
	#loop ul li a{
		display:inline-block;
		margin-left:1.4rem;
		margin-top:0;
	}
	
	/* hover */
	#loop ul li a:hover{
		text-decoration:underline;
	}
	
}




/* PC用1280px～（PC）
---------------------------------------------------------------------*/

@media print,screen and (min-width: 1280px){
}