@import "style.css";

/************************************** title start ***************************************************/
.title{
	position:relative;
}
.title:before{
	position:absolute;
	content:"";
	display:block;
	right:0;
	bottom:0;
	width:85%;
	height:2px;
	background:currentColor;
	margin-bottom:1.2em;
}
/************************************** title end ***************************************************/


/************************************** main start ***************************************************/
main{
	display:block; /* fix IE */
	margin:3% 0;
}
main ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
main ul li{
	width:48.5%;
}
main ul li:nth-child(n+3){
	margin-top:3%;
}
main ul li a{
	display:flex;
	justify-content:space-between;
	font-size:0;
}
main ul li a:before,
main ul li a:after{
	content:"";
	display:block;
	width:47.19%;
	padding-top:47.19%;
	border-radius:50%;
}
main ul li a:before{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	filter:saturate(0);
	transition:filter 0.2s;
}
main ul li:nth-child(4n+3) a:before,
main ul li:nth-child(4n) a:before{
	order:1;
	margin:0 0 0 auto;
}
main ul li.jutgroup a:before{ background-image:url(../images/group_jutgroup.jpg);}
main ul li.jut a:before{ background-image:url(../images/group_jut.jpg);}
main ul li.jfaa a:before{ background-image:url(../images/group_jfaa.jpg);}
main ul li.jam a:before{ background-image:url(../images/group_jam.jpg);}
main ul li.ai a:before{ background-image:url(../images/group_ai.jpg);}
main ul li.umkt a:before{ background-image:url(../images/group_umkt.jpg);}
main ul li.noke a:before{ background-image:url(../images/group_noke.jpg);}
main ul li a:hover:before{
	filter:saturate(1);
}
main ul li a:after{
	background-repeat:no-repeat;
	background-position:center;
	transition:background-color 0.5s;
}
main ul li.jutgroup a:after{ background-image:url(../images/group_jutgroup.png); background-size:75%;}
main ul li.jut a:after{ background-image:url(../images/group_jut.png); background-size:80%;}
main ul li.jfaa a:after{ background-image:url(../images/group_jfaa.png); background-size:85.4%;}
main ul li.jam a:after{ background-image:url(../images/group_jam.png); background-size:78.37%;}
main ul li.ai a:after{ background-image:url(../images/group_ai.png); background-size:80%;}
main ul li.umkt a:after{ background-image:url(../images/group_umkt.png); background-size:81.62%;}
main ul li.noke a:after{ background-image:url(../images/group_noke.png); background-size:52%;}
main ul li a:hover:after{
	background-color:#000;
}
/************************************** main end ***************************************************/


@media screen and (max-width:1023px){
	
	/************************************** title start ***************************************************/
	.title:before{
		width:calc(100% - 9em);
		margin-bottom:0.8em;
	}
	/************************************** title end ***************************************************/
	
	/************************************** main start ***************************************************/
	main{
		margin:5% 0;
	}
	main ul{
		display:block;
	}
	main ul li{
		width:auto;
	}
	main ul li:nth-child(n+3),
	main ul li+li{
		margin-top:6%;
	}
	main ul li:nth-child(4n+3) a:before,
	main ul li:nth-child(4n) a:before{
		order:0;
		margin:0;
	}
	main ul li:nth-child(2n) a:before{
		order:1;
		margin:0 0 0 auto;
	}
	/************************************** main end ***************************************************/
	
}