@charset "utf-8";

/* ======================================================

	mainvisual

====================================================== */

.main{
	width:100%;
	background: none;
	height:266px;
	margin-top:100px;
}

.main_inner{
	width:100%;
	background: url(images/mainvisual_web.jpg) no-repeat right top;
	background-size:cover;
	height:266px;
}


@media screen and (max-width: 767px) {
	.main{
		width:100%;
		height:auto;
		background: none;
		margin-top:50px;
	}

	.main_inner{
		width:100%;
		height:auto;
		background: url(images/mainvisual_web.jpg) 0 0 no-repeat;
		background-size: 100% auto;
	}
}


.training_course{
	border-left:2px solid #dcdada;
	border-right:2px solid #dcdada;
	border-bottom:2px solid #dcdada;
	box-sizing: border-box;
}

.line1{
	background: url(web/images/mill_bg.png) 20px bottom no-repeat;
	background-size:60% auto;
}

.line2{
	background: url(web/images/lathe_bg.png) 20px bottom no-repeat;
	background-size:60% auto;
}

.training_course ul{
 	justify-content: left;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width:92%;
	margin:0 auto;
}

.training_course ul li:first-child{
 	width:70%;
	margin-right:5%;
	padding:30px 0 0;
}

.training_course ul li:last-child{
 	width:25%;
	padding:30px 0 50px;
}

.training_course_title img{
	width:195px;
}

.millcourse{
	background-color:#f21a1a;
	padding:10px 45px;
}

.lathecourse{
	background-color:#c0924f;
	padding:10px 45px;
}


@media screen and (max-width: 767px) {
	.line1{
		background: url(web/images/mill_bg.png) 0 bottom no-repeat;
		background-size:100% auto;
		padding-bottom:30%;
	}

	.line2{
		background: url(web/images/lathe_bg.png) 0 bottom no-repeat;
		background-size:100% auto;
		padding-bottom:30%;
	}

	.training_course ul{
	 	justify-content: left;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		max-width:90%;
		margin:0 auto 0;
	}

	.training_course ul li:first-child{
	 	width:100%;
		margin-right:0;
		padding:3% 0 0;
	}

	.training_course ul li:last-child{
	 	width:100%;
		padding:5% 0 10%;
	}

	.training_course ul li:last-child img{
	 	width:36%;
		margin-left:32%;
	}

	.training_course_title img{
		width:45%;
	}

	.millcourse{
		padding:2% 6%;
	}

	.lathecourse{
		padding:2% 6%;
	}
}




/* ======================================================

	calendar

====================================================== */
#calendar{
	width:100%;
	background: url(web/images/bg.png);
	padding:30px 0;
	margin:50px 0;
}

#calendar h2{
	font-size: 2.8rem;
	text-align: center;
	padding-bottom:20px;
}

#calendar_inner{
	width:980px;
	height:500px;
	margin:0 auto;
}


@media screen and (max-width: 767px) {
	#calendar h2{
		font-size: 2.2rem;
	}

	#calendar_inner{
		width:98%;
		height:400px;
	}
}

.c-container h3{
	display:block;
	text-align:center;
	padding:0 0 20px;
}


#flow{
	width:600px;
	margin:0 auto;
	padding:20px 0 40px;
}

@media screen and (max-width: 767px) {
	#flow{
		width:100%;
		margin:0 auto;
		padding:2% 0 4%;
	}
}