@charset "utf-8";

/* students
========================================================================== */
#xxx{
	border:1px solid red;
}
#title{
	position:relative;
	height:208px;
	margin-top:-100px;
	margin-bottom:15px;
	background:url(../img/students/title.png) no-repeat 0 0;
	z-index:-1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#main * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#title h1{
	display:-webkit-flex;
	display:flex;
	align-items:center;
	widows:100%;
	height:100%;
	padding:0 20px !important;
	}
	#title strong{
		display:inline-block;
		margin:0px;
		font-family: 'Open Sans', sans-serif;
		font-weight:bold;
		font-size:2.20rem !important;
		color:#000;
		text-shadow: 0 0 10px #fff,0 0 15px #fff,0 0 15px #fff;
		}
		#title strong span{
			display:block;
			margin:0 0 10px 5px;
			font-family: 'Open Sans', sans-serif;
			font-weight:bold;
			font-size:1.2rem !important;
			text-shadow: 0 0 10px #fff,0 0 15px #fff,0 0 15px #fff;
			color:#000;
}

/* --- responsive --- */
@media(max-width:767px){
	#title {
		height:145px;
		left:-20px;
		width:calc(100% + 40px);
		margin-top:-30px;
	}
}

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

#breadcrumb{
	margin-bottom:0px;
	border:none;
}

#main,
#main *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#main{
	padding:0px;
	/*padding: 0 60px 0 60px;*/
}
#main * img{
	max-width:100%;
	height:auto;
}

/* --- responsive --- */
@media(max-width:767px){
	#breadcrumb{
		margin-bottom:5px;
	}
}

/* -----------------------------------------------------------------
   idnex
----------------------------------------------------------------- */

#students_index #students_photo{
	margin:0 0 18px;
}

/* students_episode */
#students_index #students_episode{
	position:relative;
	margin:0 0 20px;
	padding:20px;
	text-align:center;
	border:1px solid #126234;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
#students_index #students_episode *{
	font-family: 'Kosugi Maru', sans-serif;
	transition-duration:0.5s;
}
#students_index #students_episode h2{
	width:620px;
	max-width:100%;
	margin:0 auto 10px;
	border-bottom:6px dotted #FFDF2A;
	color:#126234;
	}
	#students_index #students_episode h2 + p{
		font-weight:bold;
		font-size:0.9rem;
}

#episode_contents{
	position:relative;
	padding-top:290px;
	padding-bottom:450px;
}
#episode_contents *{
	position:relative;
}
#episode_contents .episode_box{
	position:absolute;
	padding:15px 25px;
	text-align:left;
	border:1px solid #126234;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	}
	#episode_contents .episode_box p{
		margin:0 0 7px;
		text-align:left;
		line-height:1.6;
	}
	#episode_contents .episode_box p:last-child{
		margin:0 0 0px;
}

#episode_contents #episode_01{width:367px;top:23px;left:35px;}
#episode_contents #episode_02{width:350px;top:0px;left:440px;padding:23px 25px;}
#episode_contents #episode_03{width:265px;top:246px;left:265px;}
#episode_contents #episode_04{width:370px;top:175px;left:513px;padding:15px 25px 15px 35px;}
#episode_contents #episode_05{width:260px;top:778px;left:0px;}
#episode_contents #episode_06{width:290px;top:875px;left:247px;padding:15px 25px 15px 30px;}
#episode_contents #episode_07{width:330px;top:830px;left:565px;}
#episode_contents #episode_08{width:365px;top:1043px;left:59px;}
#episode_contents #episode_09{width:395px;top:1010px;left:473px;}

#students_index #students_aruaru{

}
/* --- responsive --- */
@media(max-width:1200px){
	#students_index #students_episode{
		position:relative;
		margin:0 0 20px;
		padding:0px;
		border:none;
	}
	#episode_contents{
		padding:0px;
	}
	#episode_contents *{
		position:relative;
	}
	#episode_contents .episode_box{
		position:relative;
		top:0px !important;
		left:0px !important;
		width:100% !important;
		margin:0 0 10px;
		padding:15px 25px !important;
		}
		#episode_contents .episode_box p br.pc{
			display:none !important;
	}
}
@media(max-width:640px){
	#students_index #students_photo{
		width:calc(100% + 40px);
		margin:0 -20px 18px;
	}
	#episode_contents .episode_box{
		padding:15px 15px !important;
	}
	#episode_contents .episode_box p{
		line-height:1.4;
	}
}

/* -----------------------------------------------------------------
   index
----------------------------------------------------------------- */