@charset "utf-8";

/* COMMON
================================================== */
/* #Media Queries -PC-
================================================== */

/*-----------------------------------------------------
 side_l (Overwrite)
-------------------------------------------------------*/
/*#side_l{
	margin:0;
	padding:120px 0 0;
}*/


#department.ex {
	position: relative;
}

#department.ex h1 {
	margin-top: 60px;
}


/*-----------------------------------------------------
Social
-------------------------------------------------------*/
#department.ex #social-all{
	position:absolute;
	top:-55px;
	right:20px;
}
#department.ex .social{
	clear:both;
	height:20px;
	padding:10px 0 0;
}
#department.ex .social ul{
	float:right;
}
#department.ex .social li.fb {
	margin:-3px 0 0 10px;
}

#department.ex .social li{
	height:20px;
	float:left;
	margin:0 5px 0 10px;
}

#department.ex .social .line{
	display:none;
}

/*-----------------------------------------------------
pgtp
-------------------------------------------------------*/
#department.ex #pgtp{
	margin:0;
	padding:0 20px 25px;
}

/*-----------------------------------------------------
ttl-main
-------------------------------------------------------*/
#department.ex .ttl-main{
	margin:0 auto 40px;
}
#department.ex .ttl-main p{
	margin: 0 0 30px;
}

#department.ex .ttl-main h2 {
	padding: 0;
}

/*-----------------------------------------------------
nav
-------------------------------------------------------*/
#department.ex ul.nav{
	width:630px;
	overflow:hidden;
	margin:0 auto;
}
#department.ex ul.nav li{
	width:px;
	float:left;
	text-align:center;
	margin: 0 2px 0 0;
}
#department.ex ul.nav li a{
	display:block;
	padding:15px 10px;
	background:#BBC3CA;
}
#department.ex ul.nav li a img{
	width:140px;
}
#department.ex ul.nav li.vol02 a,
#department.ex ul.nav li a:hover{
	background:#BB8F00;
}
department.ex ul.nav li.vol01 a img{
	width:140px;
}
#department.ex ul.nav li.vol02 a img{
	width:98px;
}
#department.ex ul.nav li.vol03 a img{
	width:54px;
}
#department.ex ul.nav li.vol04 a img{
	width:84px;
}
#department.ex ul.nav li.vol05 a img{
	width:54px;
}

/*-----------------------------------------------------
h2
-------------------------------------------------------*/
#department.ex h2{
	width:630px;
	margin:0 auto 40px;
}
#department.ex h2 img{
	width:622px;
	display:block;
	margin:0 auto 40px;
	border:4px solid #BB8F00;
}

/*-----------------------------------------------------
info , book
-------------------------------------------------------*/
#department.ex div.info,
#department.ex div.book{
	position:relative;
	margin:0 auto 20px;
}
#department.ex div.book{
	margin:0 auto 60px;
}
#department.ex div.info p.text,
#department.ex div.book p.text{
	width:220px;
	float:right;
	font-size: 90%;
}
#department.ex div.info p.text span{
	display:block;
	padding:15px 0 0;
	color:#009D63;
	font-size:86%;
}
#department.ex div.info p.image,
#department.ex div.book p.image{
	width:390px;
	float:left;
}
#department.ex div.info p.image a,
#department.ex div.book p.image a{
	width:388px;
	height:292px;
	display:block;
	text-indent:-9999px;
	border:1px solid #8C9EA6;
}
#department.ex div.info p.image a{
	background:url(../image/info_img.jpg) no-repeat 0 0;
}
#department.ex div.book p.image a{
	background:url(../image/text_img.jpg) no-repeat 0 0;
}
#department.ex div.info p.image a:hover{
	background:url(../image/info_img_on.jpg) no-repeat 0 0;
}
#department.ex div.book p.image a:hover{
	background:url(../image/text_img_on.jpg) no-repeat 0 0;
}
#department.ex div.info p.btn,
#department.ex div.book p.btn{
	width:220px;
	position:absolute;
	bottom:30px;
	left:410px;
}
#department.ex div.info p.btn a,
#department.ex div.book p.btn a{
	display:block;
	padding:16px 0;
	text-align:center;
	background:#009D63;
}
#department.ex div.info p.btn a:hover,
#department.ex div.book p.btn a:hover{
	background:#F50000;
}
#department.ex div.info p.btn a img{
	width:86px;
	height:auto;
}
#department.ex div.book p.btn a img{
	width:162px;
	height:auto;
}

/*-----------------------------------------------------
movie
-------------------------------------------------------*/
#department.ex div.movie{
	margin:0 auto 40px;
}
#department.ex div.movie p.lead{
	width:470px;
}
#department.ex div.movie div.block{
	position:relative;
	margin:25px 0 0;
	text-align:left;
}
#department.ex div.movie div.block p.btn a{
	width:630px;
	height:90px;
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}
#department.ex div.movie div.block h4{
	padding:0 0 5px;
	font-size:158%;
	color:#009D63;
}
#department.ex div.movie div.block h4 span{
	color:#BD9100;
}
#department.ex div.movie div.block .iframe{
	line-height:0;
}
#department.ex div.movie div.block iframe{
	width:630px;
	height:473px;
}
#department.ex div.movie div.block p.close{
	width:80px;
	height:30px;
	position:absolute;
	left:0;
	bottom:0;
	display:none;
}
*+html #department.ex div.movie div.block p.close{
	bottom:6px;
}
#department.ex div.movie div.block p.close a{
	width:80px;
	height:30px;
	display:block;
	text-indent:-9999px;
	background:url(../../image/common/section_pc_btn_close.gif) no-repeat 0 0;
}
#department.ex div.movie div.block p.close a:hover{
	background:url(../../image/common/section_pc_btn_close_on.gif) no-repeat 0 0;
}
#department.ex div.movie div.m01 p.btn a{background:url(../image/movie_bnr01.jpg) no-repeat 0 0;}
#department.ex div.movie div.m01 p.btn a:hover{background:url(../image/movie_bnr01_on.jpg) no-repeat 0 0;}
#department.ex div.movie div.m02 p.btn a{background:url(../image/movie_bnr02.jpg) no-repeat 0 0;}
#department.ex div.movie div.m02 p.btn a:hover{background:url(../image/movie_bnr02_on.jpg) no-repeat 0 0;}
#department.ex div.movie div.m03 p.btn a{background:url(../image/movie_bnr03.jpg) no-repeat 0 0;}
#department.ex div.movie div.m03 p.btn a:hover{background:url(../image/movie_bnr03_on.jpg) no-repeat 0 0;}
#department.ex div.movie div.m04 p.btn a{background:url(../image/movie_bnr04.jpg) no-repeat 0 0;}
#department.ex div.movie div.m04 p.btn a:hover{background:url(../image/movie_bnr04_on.jpg) no-repeat 0 0;}
#department.ex div.movie div.m05 p.btn a{background:url(../image/movie_bnr05.jpg) no-repeat 0 0;}
#department.ex div.movie div.m05 p.btn a:hover{background:url(../image/movie_bnr05_on.jpg) no-repeat 0 0;}



/* #Media Queries -TABLET-
================================================== */
@media only screen and (max-width: 965px){

}



/* #Media Queries -SMARRTPHONE-
================================================== */
@media only screen and (max-width: 767px){

	#department.ex h1 {
		margin-top: 20px;
		padding: 10px 10px;
	}

	.fb_iframe_widget_fluid { display: inline-block!important;}
	
	
	/*-----------------------------------------------------
	pgtp
	-------------------------------------------------------*/
	#department.ex #pgtp{
		display:none;
	}
	
	/*-----------------------------------------------------
	social-all
	-------------------------------------------------------*/
	#department.ex #social-all{
		height:auto;
		position:relative;
		top:auto;
		right:auto;
		margin:20px 0 0;
		padding:0;
	}
	#department.ex #social-all ul{
		padding:16px 0 18px;
		text-align:center;
		border: 1px solid #00985D;
	}
	#department.ex #social-all ul li{
		float:none;
		margin:0 5px;
		padding:0;
		display:inline;
	}
	#department.ex #social-all ul li.fb div.fb-like{
		width:69px;
		overflow:hidden;
	}
	#department.ex #social-all .line{
		display:inline;
	}
	#department.ex #social-all .line img{
		width:88px;
	}
	
	
	/*-----------------------------------------------------
	Social
	-------------------------------------------------------*/
	#department.ex .social{
		position:relative;
		padding:10px 0 0;
		top:auto;
		right:auto;
	}
	#department.ex .social ul{
		padding:0;
		float:none;
	}
	#department.ex .social ul li{
		height:20px;
		display:inline;
		float:none;
		margin:0 10px 0 0;
		padding:0;
	}
	#department.ex .social li.fb {
		margin:0 5px 0 10px;
	}
	#department.ex .social ul li.fb div.fb-like{
		width:90px;
		margin-top: -10px;
		overflow:hidden;
	}
	#department.ex .social .line{
		display:inline;
	}
	#department.ex .social .line img{
		display: inline;
		width:88px;
	}
	
	/*-----------------------------------------------------
	ttl-main
	-------------------------------------------------------*/
	#department.ex div.ttl-main{
		width:auto;
		margin:0 20px 25px;
		padding:0;
	}
	#department.ex div.ttl-main p{
		width:84%;
		top:0;
	}
	
	/*-----------------------------------------------------
	nav
	-------------------------------------------------------*/
	#department.ex ul.nav{
		width:auto;
	}
	#department.ex ul.nav li{
		width:50%;
		margin: 0;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;	
		border:solid #fff;
		border-width: 0 1px 1px 0;	
	}
	#department.ex ul.nav li:nth-child(even){
		border:solid #fff;
		border-width: 0 0 1px 0;	
	}
	#department.ex ul.nav li a{
		padding:6px 20px;
	}
	#department.ex ul.nav li.vol01 a img{
		width:98px;
	}
	#department.ex ul.nav li.vol02 a img{
		width:69px;
	}
	#department.ex ul.nav li.vol03 a img{
		width:38px;
	}
	#department.ex ul.nav li.vol04 a img{
		width:60px;
	}
	#department.ex ul.nav li.vol05 a img{
		width:38px;
	}
	
	
	/*-----------------------------------------------------
	h2
	-------------------------------------------------------*/
	#department.ex h2{
		width:auto;
		margin:0 0 20px;
	}
	#department.ex h2 img{
		width:100%;
		border:4px solid #BB8F00;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	
	/*-----------------------------------------------------
	info , book
	-------------------------------------------------------*/
	#department.ex div.info{
		margin:0 0 20px;
		padding:0 0 24px;
		border-bottom:1px solid #009A63;
	}
	#department.ex div.book{
		margin:0 0 20px;
		padding:0 0 24px;
	}
	#department.ex div.info p.text,
	#department.ex div.book p.text{
		width:100%;
		float:none;
		margin:0 0 20px;
	}
	#department.ex div.info p.text span,
	#department.ex div.book p.text span{
		padding:10px 0 0;
		font-size:11px;
	}
	#department.ex div.info p.image,
	#department.ex div.book p.image{
		width:100%;
		margin:0 0 15px;
		float:none;
	}
	#department.ex div.info p.image a,
	#department.ex div.book p.image a{
		width:194px;
		height:146px;
		background-size:100% auto;
	}
	#department.ex div.info p.image a{
		height:146px;
	}
	#department.ex div.book p.image a{
		height:187px;
	}
	#department.ex div.info p.image a:hover{
		background:url(../image/info_img_on.jpg) no-repeat 0 0;
		background-size:100% auto;
	}
	#department.ex div.book p.image a:hover{
		background:url(../image/text_img_on.jpg) no-repeat 0 0;
		background-size:100% auto;
	}
	#department.ex div.info p.btn,
	#department.ex div.book p.btn{
		width:100%;
		position:relative;
		bottom:0;
		left:0;
	}
	#department.ex div.info p.btn a img{
		width:53px;
	}
	#department.ex div.book p.btn a img{
		width:100px;
	}
	
	/*-----------------------------------------------------
	movie
	-------------------------------------------------------*/
	#department.ex div.movie{
		margin:0 0 20px;
		padding:0 0 24px;
		border-bottom:1px solid #009A63;
	}
	#department.ex div.movie p.lead{
		width:100%;
	}
	#department.ex div.movie div.block p.btn a{
		width:100%;
		height:45px;
		overflow:hidden;
		padding:0 0 0 10px;
		text-indent:0;
		box-sizing:border-box;
		background:#009D63;
	}
	#department.ex div.movie div.block p.btn a:hover{
		background:#009D63;
	}
	#department.ex div.movie div.block p.btn a strong{
		width:182px;
		height:45px;
		display:block;
		text-indent:-9999px;
	}
	#department.ex div.movie div.block p.btn span{
		width:90px;
		height:45px;
		display:block;
		float:right;
	}
	#department.ex div.movie div.block h4{
		font-size:16px;
	}
	#department.ex div.movie div.block iframe{
		width:280px;
		height:158px;
	}
	#department.ex div.movie div.block p.close{
		width:100%;
		height:auto;
		position:relative;
		left:auto;
		bottom:auto;
	}
	#department.ex div.movie div.block p.close a{
		width:100%;
		height:11px;
		padding:10px 0;
		text-align:center;
		background:url(../../image/common/section_sp_btn_close.png) no-repeat 50% 50% #00985D;
		-o-background-size:43px 11px;
		-ms-background-size:43px 11px;
		-moz-background-size:43px 11px;
		-webkit-background-size:43px 11px;
		background-size:43px 11px;
	}
	#department.ex div.movie div.block p.close a:hover{
		background:url(../../image/common/section_sp_btn_close.png) no-repeat 50% 50% #00985D;
		-o-background-size:43px 11px;
		-ms-background-size:43px 11px;
		-moz-background-size:43px 11px;
		-webkit-background-size:43px 11px;
		background-size:43px 11px;
	}
	#department.ex div.movie div.m01 p.btn a,
	#department.ex div.movie div.m01 p.btn a:hover{
		background:#BC9000;
	}
	#department.ex div.movie div.m01 p.btn a strong{
		background:url(../image/movie_txt01.gif) no-repeat 0 0;
		background-size:100% auto;
	}
	#department.ex div.movie div.m02 p.btn a strong{
		background:url(../image/movie_txt02.gif) no-repeat 0 0;
		background-size:100% auto;
	}
	#department.ex div.movie div.m03 p.btn a strong{
		background:url(../image/movie_txt03.gif) no-repeat 0 0;
		background-size:100% auto;
	}
	#department.ex div.movie div.m04 p.btn a strong{
		background:url(../image/movie_txt04.gif) no-repeat 0 0;
		background-size:100% auto;
	}
	#department.ex div.movie div.m05 p.btn a strong{
		background:url(../image/movie_txt05.gif) no-repeat 0 0;
		background-size:100% auto;
	}
}