@charset "utf-8";

/* ==============================================================
	works.css
============================================================== */

/* common ******************************/
.main section h3{
	font-size:145%;
	font-family: "Noto Sans Japanese";
}

#works .container{
	display: flex;
	flex-wrap: wrap;
}

#works .works-box{
	width: 32%;
	text-align: center;
	margin-bottom: 20px;
	margin-right: 2%;
}
#works .works-box:nth-child(3n){
	margin-right: 0%;
}

#works .works-box:hover{
	background: #f6f6f6;
}
#works .works-box:hover a{
	text-decoration: none;

}


#works .image{
	width: 100%;
	box-sizing: border-box;
	border : 1px solid #dbdbdb;
}
#works .image img{
	width: 100%;
}
#works .name{
	margin-top:0.5em;
	font-size:120%;
	font-weight:bold;
	padding: 0 10px;
}
#works .works-box:hover a .name{
	color: #216eb1;
}
#works .description{
	margin-bottom: 1em;
	color: silver;
	padding: 0 10px;
}

/* smartPhone */
@media screen and (max-width: 640px) {
	#works .works-box{
		width: 48%;
	}
	#works .works-box:nth-child(3n){
		margin-right: 2%;
	}
	#works .works-box:nth-child(2n){
		margin-right: 0;
	}
	#works .name{
		font-size:100%;
	}
}


/* =============================================================
	#details
============================================================== */

#works .details p.banner{
	text-align: center;
	margin: 30px 0;
}

#works .details p.text{
	font-size: 120%;
	line-height: 1.8;
	margin-bottom: 2em;
}

#works .details p.return{
	text-align: center;
	background-color: #e9e9e9;
	padding: 20px 0;
}

/* smartPhone */
@media screen and (max-width: 640px) {
	#works .details p.text{
		font-size: 100%;
	}
}