@charset "utf-8";

@import "lib/html5reset.css";
@import "lib/reset-fonts-grids.css";
@import "lib/reset-min.css";

/*********************************************************************

**********************************************************************/


/* [HTML5+CSS3]
---------------------------------------------------------------------*/

article, aside, dialog, figure, footer, header, menu, nav, section {
	display: block;
}

/* [Body]
------------------------------------------------------------------------ */

html {
	background-size: contain;
	font-size: 62.5%;
	line-height: 1.4em;
}


/* [Body]
------------------------------------------------------------------------ */

body {
	display: none;
	color: rgba(255,255,255,0.8);
	width: 100%;
	font-family:'Century Gothic','Lato','メイリオ',sans-serif;
	overflow-x: hidden;
	/* -webkit-text-size-adjust: none; Font Resize Stop */
	padding: 0;
	margin: 0;
	text-align: center;
}
/* 可変NGの場合は下記コメントアウト */
@media screen and (min-width : 512px){
    html{
    	font-size : 75%;
    }
}
@media screen and (min-width : 768px){
    html {
    	font-size : 87.5%;
    }
}
@media screen and (min-width : 1024px) {
    html {
    	font-size : 100%;
    }
}


/* [Anchor]
------------------------------------------------------------------------ */

a {
	color: #555;
	outline: none;
}
a:link,
a:visited,
a:active {
	text-decoration: none;
}

a:hover {
	color: #f60303;
	text-decoration: underline;
}
a img {
	-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;
}
a:hover img {
	filter: alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity: 0.5;
	-webkit-transform-style: preserve-3d;
}

/*[Footer Style]
------------------------------------------------------------------------ */

#wrapFooter {
	background: url(../images/bg_footer.png) repeat-x 0 120px;
	width: 100%;
	padding: 25px 0 0;
	position: relative;
	overflow: hidden;
	text-align: center;
	
	z-index: 100;
}
#wrapFooter footer {
	background: url(../images/f_cast.png) no-repeat center bottom;
	background-size: contain;
	width: 100%;
	height: 525px;
	padding: 125px 0 0;
}
#wrapFooter footer h1 {
	background: url(../images/f_description.png) no-repeat center 0;
	background-size: contain;
	width: 98%;
	height: 68px;
	margin: 0 auto 25px;
	text-indent: -9998px;
}
#wrapFooter footer h2 {
	font-size: 18px;
	text-align: center;
	margin: 25px 0;
}
#wrapFooter footer dl {
	line-height: 1.6em;
	text-align: center;
}
#wrapFooter footer dl.staffInfo,
#wrapFooter footer dl.movieInfo {
	display: table;
	margin: 0 auto;
}
#wrapFooter footer dl.staffInfo:nth-of-type(1) {
	font-size: 18px;
}
#wrapFooter footer dl dt {}
#wrapFooter footer dl dd {
	padding: 0 1em 0 0;
}
#wrapFooter footer dl dt:after {
	content: ":";
}
#wrapFooter footer dl.staffInfo dt,
#wrapFooter footer dl.staffInfo dd,
#wrapFooter footer dl.movieInfo dt,
#wrapFooter footer dl.movieInfo dd {
	display: table-cell;
}


#wrapFooter small {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	margin: auto;
}

/* [PageUp CSS]
------------------------------------------------------------------------ */

#pageup {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 35px;
	margin: auto;
	text-indent: -9998px;
}
#pageup a {
	display: block;
	background: url(../images/f_eyes.png) no-repeat;
	background-size: contain;
	width: 534px;
	height: 207px;
	margin: 0 auto;
	filter: alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity: 0.5;
	-webkit-transform-style: preserve-3d;
	
	-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;
}
#pageup a:hover {
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
	-webkit-transform-style: preserve-3d;
}

.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}


@media screen and (max-width: 1201px) {

}
@media screen and (max-width: 920px) {
	#wrapFooter footer {
		background: none;
		background-size: contain;
		width: 100%;
		height: 525px;
		padding: 125px 0 0;
	}
	#wrapFooter footer h1 {
		background: url(../images/f_description.png) no-repeat center 0;
		background-size: contain;
		width: 98%;
		height: auto;
	}
	#wrapFooter footer h2 {
		margin: 1em 0;
	}
	#wrapFooter footer dl {
		line-height: 1.6em;
		text-align: left;
	}
	#wrapFooter footer dl.staffInfo,
	#wrapFooter footer dl.movieInfo {
		display: static;
		padding: 0 1rem;
		margin: 0 auto;
	}
	#wrapFooter footer dl.staffInfo:nth-of-type(1) {
		font-size: 18px;
	}
	#wrapFooter footer dl dt:after {
		content: ":";
	}
	#wrapFooter footer dl.staffInfo dt,
	#wrapFooter footer dl.staffInfo dd,
	#wrapFooter footer dl.movieInfo dt,
	#wrapFooter footer dl.movieInfo dd {
		display: inline;
	}
	#wrapFooter small {
		margin: auto;
	}
	#pageup {
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	#pageup a {
		background: url(../images/f_eyes.png) no-repeat center 0;
		background-size: contain;
		width: 100%;
		height: 207px;
		margin: 0 auto;
	}
}





/* [CSS HUCK]
------------------------------------------------------------------------ */

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
 }
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix{
	display: block;
}
/* End hide from IE-mac */
