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

.workdcontents h3{
	width: 900px;
	margin: 0 auto;
	
	background:  linear-gradient(90deg, #0082ff, #283bb5);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	text-align: center;
	font-size: 34px;
	margin: 100px auto 40px;
} 

.tab_title{
	display: block;
		
	
	background: linear-gradient(90deg, #0082FF, #fff);

	
	padding: 10px 10px;
	margin: 0 auto 20px;
	
}

.tab_title h5{
	display: block;
	font-size: 18px;
	color: #FFFFFF;
	margin: 0 auto;

}

.tab_block{
	border-left:1px solid #0082FF;
}


.content,.content_a{
    display: none;
}
.content.show,.content_a.show_a {
    display: block;
}


.workdcontents p{
	text-align: center;
}

.click,.click_a{
	color: #0082FF;
}

 /*各コンテナstyle*/
.works_block{
	width: 900px;
	margin: 0 auto 50px;
	display: flex;
	
}

.tab_block{
	width: 300px;
}

.content-container ul{
width: 640px;
    display: flex;
    flex-wrap: wrap;
	justify-content: flex-start;

}

.content-container li{
	width: 32%;
	margin: 4px;
}



/************SP用**************/
@media screen and (max-width:500px)  {

	.tab_block{
		width: 100%;
	}
	.tab_title {
		width: 100%;
		margin: 0 auto;
	}
	
	
.tab_title h5{
	font-size: 5vw;
	

}

	.tab-container{
		display: flex;
		font-size: 3vw;
		    display: flex;
    font-size: 3.5vw;
    flex-wrap: wrap;
		padding: 2vw;
	}
	
		.tab-container span{
		padding: 2vw 2vw;
	}
	
	
	
	.works_block{
		width: 90%;
		margin: 0 auto;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.content-container ul{
		width: 100%;
		margin: 8vw auto;
		padding: 0;
	}
	
	.content-container li{
		margin: 1vw;
		width: 40vw;
	}


}/*sp*/