@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);


/*-------------------------------------------------------------------
	pagetitle
-------------------------------------------------------------------*/

#wrap #pagetitle {
	background:url(../image/education/education_bg.jpg) center center no-repeat;
	background-size:cover;
}

#wrap #pagetitle .title {
	width:960px;
	margin:0 auto;
	text-align:left;
	padding:200px 0 80px;
}

#container {
	padding:70px 0 90px;
	background:#E6F7FF;
}


/*-------------------------------------------------------------------
	東郷研修センター
-------------------------------------------------------------------*/

#education {
	width:780px;
	padding:70px;
	background:url(../image/common/content_line.png) repeat-x #FFF;
	margin:0 auto;
}

#education h2 {
	font-size:1.8em;
	font-weight:500;
	text-align:center;
	margin:0 0 50px;
	color:#133785;
}

#education h2 span {
	padding-bottom:15px;
	border-bottom:3px solid #133785;
	display:inline-block;
}

#education h3 {
	font-size:1.8em;
	font-weight:500;
	text-align:center;
	margin:0 0 30px;
	line-height:1.2;
}

#education h3 span {
	padding-bottom:20px;
	border-bottom:3px solid #133785;
	display:inline-block;
}

#education .top {
	margin:0 0 80px;
}

#education .top dt {
	margin:20px 0 0;
}

#education .relabox {
	position:relative;
	margin:0 0 100px;
}

#education .no01,
#education .no02,
#education .no03 {
	padding:70px 0 0;
}

#education .no02 {
	text-align:right;
}

#education .no03 {
	margin:0;
}

#education .no01 .number,
#education .no03 .number {
	position:absolute;
	top:0;
	left:-20px;
	z-index:3;
}

#education .no01 .gray,
#education .no03 .gray {
	background:#E8E8E8;
	width:350px;
	padding:60px 90px;
	z-index:1;
	color:#133785;
	line-height:2.0;
}

#education .no01 .photo,
#education .no03 .photo {
	position:absolute;
	top:0;
	right:0;
	z-index:2;
}

#education .no02 .number {
	position:absolute;
	top:0;
	right:-20px;
	z-index:3;
}

#education .no02 .gray {
	background:#E8E8E8;
	width:350px;
	padding:60px 90px;
	z-index:1;
	color:#133785;
	line-height:2.0;
	display:inline-block;
	text-align:left;
}

#education .no02 .photo {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}

/*===============================================
  画面の横幅が980px以下に適用
===============================================*/
@media screen and (max-width: 980px){
	
	/* pagetitle */
	
	#wrap #pagetitle {
		background-size:auto 100%;
	}

	#wrap #pagetitle .title {
		padding:100px 0 50px;
		width:94%;
	}
	
	#container {
		padding:30px 0 50px !important;
	}
	
	#education {
		width:90%;
		padding:30px 3%;
		background-size:100% auto;
	}

	#education .top {
		margin:0 0 50px;
	}

	#education .relabox {
		margin:0 0 50px;
	}
	
	#education .no01,
	#education .no03 {
		padding-left:20px;
	}

	#education .no02 {
		text-align:left;
		padding-right:20px;
	}
	
	#education .no03 {
		margin:0;
	}

	#education .no01 .number,
	#education .no03 .number {
		left:0;
	}

	#education .no01 .gray,
	#education .no03 .gray {
		width:auto;
		padding:50px 5% 30px;
		
	}

	#education .no01 .photo,
	#education .no03 .photo {
		position:static;
		margin:20px 0 0;
		text-align:center;
	}

	#education .no02 .number {
		right:0;
	}

	#education .no02 .gray {
		width:auto;
		padding:50px 5% 30px;
		display:block;
	}

	#education .no02 .photo {
		position:static;
		margin:20px 0 0;
		text-align:center;
	}

}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
	
	
	
	
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	
}