body{
	margin: 0;
	background-image: url("../img/bg_03.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-color: #FFF;
/*	min-width: 930px;*/

	background-size: 100% 300px;
}


/*======================================
ヘッダー
========================================*/
#movie .c-head{
	position: relative;
	padding: 25px 0 20px 0;
}

#movie .c-head h1{
	text-align: center;
	margin-bottom: 25px;
}

#movie .c-head h1 img{
	max-width: 100%;
	height: auto;
}

#movie .c-head p{
	text-align: center;
	margin: 0px 0 30px 0;
	font-size: 17px;
	line-height: 200%;
	font-weight: bold;
	color: #000;
}

#movie .c-head p strong{
	/*color: #F69;*/
	/*font-size: 1.2em;*/
}



/*======================================
レイアウト
========================================*/
.l-container{
	padding: 0 10px 50px 10px;
	text-align: center;
}

#sitemap,
#footer {
	/*background: #DFE3E6 !important;*/
	background: #fff !important;
}
#footer {padding-bottom: 0;}
#footer .footernav {
	border-top-color: #bbb !important;
	border-bottom-color: #bbb !important;
}


/*======================================
トップ
========================================*/
.p-top{
	width: 1166px;
	margin: 0 auto;

}

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

========================================*/
#movie .wrap {
	position: relative;
	min-height: 284px;
}

#movie .grid{
	margin: 0 auto;
}



#movie .grid img{
	width: auto;
	height: 284px;
	vertical-align: middle;
}




#movie .grid-item{
	margin-bottom: 10px;
}


.grid-item { width: 284px; min-height: 284px; background: efefefE; 	overflow: hidden;}
.grid-item--width2 { width: 578px; min-height: 578px; }

#movie .grid .grid-item--width2 img{	width: auto;
	height: 578px;
}


/*======================================
告知
========================================*/

.frame1{
	height: 284px;
	width: 100%;
	display: table;
	text-align: center;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.frame1 a,
.frame1 div{
	display: table-cell;
	width: 100%;
	height: 284px;
	vertical-align: middle;
	line-height:160%;
	color:#FFF;
}

.frame1 a{
	color:#333;
}

.frame1 a.list{
	color:#FFF;
	text-decoration:none;
}

.frame1 a.list:hover{
	text-decoration:underline;
	color:#FFF !important;
}




.frame1--color2{
	background: #CCF;
}

/*======================================
学科リンク
========================================*/
#movie a.gakka{
	color: #FFF;
	display: inline-block;
	position: absolute;
	top:20px;
	left: 20px;
	text-decoration: none;
	font-size: 15px;
	padding: 4px 12px;
	z-index:200;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}



#movie a.gakka:hover{
	text-decoration: underline;
}

#movie .grid-item:hover a.gakka{
	background: #FFF;
}


#movie a.list{
	font-size: 20px;
}


#movie a.list.icon1{
	position: relative;

}
#movie a.list.icon1:before{
	display: inline-block;
	position: absolute;
	content:"";
	width: 84px;
	height:84px;
	background: url("../img/icon_03.png") 0 0 no-repeat;
	-webkit-background-size: 40px auto;
	     -o-background-size: 40px auto;
	        background-size: 40px auto;
	top: 10px;
	left: 10px;

}



#movie .gakka--color1{background: #6542A1;}
#movie .gakka--color2{background: #3761A9;}
#movie .gakka--color3{background: #009DE0;}
#movie .gakka--color4{background: #28928C;}
#movie .gakka--color5{background: #0068B9;}
#movie .gakka--color6{background: #0F50AA;}
#movie .gakka--color7{background: #007EC8;}
#movie .gakka--color8{background: #ED8200;}
#movie .gakka--color9{background: #DA3726;}
#movie .gakka--color10{background: #E95182;}
#movie .gakka--color11{background: #3EAD34;}
#movie .gakka--color12{background: #DB528C;}
#movie .gakka--color13{background: #009CBB;}
#movie .gakka--color14{background: #C85454;}

#movie .grid-item:hover a.gakka--color1{color: #6542A1;}
#movie .grid-item:hover a.gakka--color2{color: #3761A9;}
#movie .grid-item:hover a.gakka--color3{color: #009DE0;}
#movie .grid-item:hover a.gakka--color4{color: #28928C;}
#movie .grid-item:hover a.gakka--color5{color: #0068B9;}
#movie .grid-item:hover a.gakka--color6{color: #0F50AA;}
#movie .grid-item:hover a.gakka--color7{color: #007EC8;}
#movie .grid-item:hover a.gakka--color8{color: #ED8200;}
#movie .grid-item:hover a.gakka--color9{color: #DA3726;}
#movie .grid-item:hover a.gakka--color10{color: #E95182;}
#movie .grid-item:hover a.gakka--color11{color: #3EAD34;}
#movie .grid-item:hover a.gakka--color12{color: #DB528C;}
#movie .grid-item:hover a.gakka--color13{color: #009CBB;}
#movie .grid-item:hover a.gakka--color14{color: #C85454;}



/*======================================
NEW
========================================*/
#movie .newicon{
	display: inline-block;
	position: absolute;
	top:0px;
	right: 0;
	width: 47px;
	height: 47px;
	z-index:200;
	background: url("../img/icon_01.png") 0 0 no-repeat;

}


/*======================================
背景
========================================*/
#movie .bg{
	background-color:rgba(219,82,140,0.7);
	background-image:url("../img/icon_02.png");
	background-repeat:no-repeat;
	background-position:center center;
	width:100%;
	height:100%;
	position:absolute;
	z-index:100;
	top:0px;
	left:0px;
	opacity:0.0;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}
#movie .is-image .bg{background-image: none;}

#movie .grid-item:hover .bg{
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
}

#movie .bg--color1{background-color:rgba(101,66,161,0.7);}
#movie .bg--color2{background-color:rgba(55,97,169,0.7);}
#movie .bg--color3{background-color:rgba(0,157,224,0.7);}
#movie .bg--color4{background-color:rgba(40,146,140,0.7);}
#movie .bg--color5{background-color:rgba(0,104,185,0.7);}
#movie .bg--color6{background-color:rgba(15,80,170,0.7);}
#movie .bg--color7{background-color:rgba(0,126,200,0.7);}
#movie .bg--color8{background-color:rgba(237,130,0,0.7);}
#movie .bg--color9{background-color:rgba(218,55,38,0.7);}
#movie .bg--color10{background-color:rgba(213,81,130,0.7);}
#movie .bg--color11{background-color:rgba(62,173,52,0.7);}
#movie .bg--color12{background-color:rgba(219,82,140,0.7);}
#movie .bg--color13{background-color:rgba(0,156,187,0.7);}
#movie .bg--color14{background-color:rgba(200,84,84,0.7);}

/*======================================
キャプション
========================================*/
#movie .caption{
	position: absolute;
	color: #FFF;
	bottom: 0px;
	left:0px;
	z-index:200;
	width: 100%;
	font-size: 16px;
	padding: 10px 10px;
	display: block;
	opacity: 0;
	line-height: 140%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}

#movie .grid-item:hover .caption{
	opacity: 0.90;
	filter: alpha(opacity=90);
	-ms-filter: "alpha(opacity=90)";
}

@media only screen and (min-width: 570px) and (max-width: 767px) {}
@media only screen and (min-width: 0px) and (max-width: 569px) {}
@media only screen and (min-width: 641px) {
	.sp-only {display: none !important;}
}
@media only screen and (max-width: 640px) {


body{
	background-image: url("../img/bg_03.jpg");
	background-size: 100% 200px;
	min-width: auto !important;
}
.pc-only {display: none !important;}

.p-top{
	width: auto;
	margin: 0 auto;
}
/*======================================
ヘッダー
========================================*/
#movie .c-head{
	padding:15px;
}

#movie .c-head h1{
	margin-bottom: 15px;
}

#movie .c-head h1 img{
	max-width:234px;
	height:auto;
}


#movie .c-head p{
	margin: 5px 0 10px 0;
	font-size: 12px;
	line-height: 170%;
}
#movie .c-head p br{
	display: none;
}



#movie .c-head p strong{
}


.frame1{
	height: auto;
	width: 100%;
	display: block;
	text-align: center;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.frame1 a,
.frame1 div{
	display: block;
	width: 100%;
	height: auto;
}

.frame1 a.list,
.frame1 div.list{
	padding: 10px 0;
}


#movie .grid-item {
	width: 99%;
	float: left;
	margin: 0 0 5px 1%;
}


#movie .grid-item--width2 {
	width:99%;
	margin-left: 1%;
	clear: left;
}



#movie .wrap {
	position: relative;
	min-height: auto;
}



#movie .grid img{
	width: auto;
	height: auto;
	vertical-align: middle;
}




#movie .grid-item{
	margin-bottom: 10px;
}


.grid-item {min-height: auto;}
.grid-item--width2 {min-height: auto; }

#movie .grid .grid-item--width2 img{
	width: auto;
	height: auto;
}


#movie a.gakka{
	top:5px;
	left: 5px;
	font-size: 12px;
	padding: 2px 3px;
}

.fancybox-wrap{
	width:90% !important;
/*	height: 500px !important;*/
}
.fancybox-inner{
	width:100% !important;
/*	height: 500px !important;*/
}

#movie .caption{
	display: none;
}

#movie a.list{
	font-size: 16px;
}

#movie .gakka--color4,
#movie .gakka--color9{ letter-spacing: -1px; }

#movie a.list.icon1{
}
#movie a.list.icon1:before{
	-webkit-background-size: 23px auto;
	     -o-background-size: 23px auto;
	        background-size: 23px auto;
}


}