@charset "utf-8";
/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,img { margin:0; padding:0; }
ul,li { list-style:none;}

/* LAYOUT */
.clr { clear: both; }

img { border: 0; vertical-align: bottom; }
img.left { float: left; margin: 2px 20px 16px 0; }
img.right { float: right; margin: 2px 0 16px 20px; }
.mb20{ margin-bottom:20px;}
.imgright { float:right; margin:0 0 10px 10px;}
.imgleft { float:left; margin:0 10px 10px 0;}
.pc{display:block;}
.sp{display:none;}
.img100 { width:100%; height:auto; margin:0 0 10px 0;}

body{
	color:#000;
	background:url(images/ptn.jpg) repeat center top #000;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 14px; line-height:22px;
	min-width:980px;
	margin:0 auto;
	text-align:center;
}

/*font*/
.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12 { font-size:93%; }
.text13 { font-size:100%; }
.text14 { font-size:108%; }
.text15 { font-size:116%; }
.text16 { font-size:123.1%; }
.text17 { font-size:131%; }
.text18 { font-size:138.5%; }
.text19 { font-size:146.5%; }
.text20 { font-size:153.9%; }



/*opening--------------------------------------*/
#open_contents{
	margin:0 auto;
	text-align:left;
	width:780px; height:800px;
	position:relative;  /*display:none;*/
	}
	#open_contents #open1{ 
		display:none;
		z-index:0; position:absolute;
		top:0; left:0px;
		}
	#open_contents #open1txt {	z-index:5; position:absolute; top:146px; left:550px; display:none;	}
	#open_contents #open2txt {	z-index:5; position:absolute; top:146px; left:500px; display:none;	}
	#open_contents #open3txt {	z-index:5; position:absolute; top:146px; left:450px; display:none;	}
	#open_contents #open4txt {	z-index:5; position:absolute; top:146px; left:400px; display:none;	}
	#open_contents #open5txt {	z-index:5; position:absolute; top:146px; left:350px; display:none;	}
	#open_contents #open6txt {	z-index:5; position:absolute; top:146px; left:300px; display:none;	}
	#open_contents #open7txt {	z-index:5; position:absolute; top:146px; left:250px; display:none;	}
	#open_contents #open8txt {	z-index:5; position:absolute; top:146px; left:200px; display:none;	}
	
	#open_contents #btn_skip{
		z-index:5; position:absolute;
		right:10px; top:10px;
	}
/*------------------opening*/

#container{
	width:100%;
	margin:0px auto;
	text-align: center;
	position:relative;
	display:none;
}
/*main--------------------------------------*/
#container_main{ 
	width:980px; margin:0px auto; padding:40px 0 0 0;
	text-align:center;
	height: 1300px; 
	min-height: 100%;
	position:relative;
	}
	
	#container_main h1 { margin:48px auto 0 auto;}
	#container_main .copy { margin:50px auto 50px auto;}
	#container_main .billing{ margin:10px auto;}
	#container_main .koukai{ margin:10px auto;}
	

#bnr01 {
	position:absolute; text-align:center;
	top:520px; /*482px;*/
	right:10px;
}
#bnr01 .pc { margin:0 auto 10px auto;}
#bnr01 a:hover img {
	opacity:0.8; filter: alpha(opacity=80);	-ms-filter: "alpha( opacity=80 )";}
#bnr02 { position:absolute; top:580px; right:20px;}

#credit { 
	position:absolute; top:820px;  left:442px; width:96px;
	}
#futter{
	text-align:center;
	margin:10px 0 0 0;
	padding:0;
}
/*========================================*/
@media screen and (max-width: 640px) {
	html{font-size: 62.5%;}
	body { width:100%; min-width:inherit;
		font-size:13px; font-size: 1.4rem;	line-height: 1.5;}
	#container_main{ width:90%; margin:0 auto; height: auto; }
	#container_main img { width:100%; height:auto;}
	#container_main h1 { width:90%; height:auto;}
	#container_main .copy { margin:20px auto;}
	#btn_area { width:200px; height:auto; margin:10px auto;}
	#btn_area .about_btn { width:180px;}
	#btn_area .top_btn { float:none; margin:0 auto 10px auto;}
	#btn_area .top_btn img,#btn_area .about_btn img { width:auto; height:auto;}
	#bnr01 { position:static; width:90%; height:auto; margin:0 auto; background:#fff;}
	#bnr02 { position:static; width:150px; height:auto; margin:0 auto;}
	#bnr01 .pc { display:none;}
}
/*========================================*/
/*sns----------------*/
#navsns{ width:980px; margin:0px auto; position:relative; }
#snsbtn{
	position:absolute;
	top:5px;
	right:10px;
	width:80px;
}
#snsbtn img{ margin:0 5px 0 0; float:left;}
#snsbtn a:hover img {/*position:absolute; top:0; left:0;*/
				opacity:0.6; filter: alpha(opacity=60);	-ms-filter: "alpha( opacity=60 )";}

/*sns----------------*/
#nojava{
	position:absolute;
	left:50%; top:50%;
	width:500px; padding:10px 0;
	margin-left:-250px;
	background:#fff; border:1px solid #333;
	text-align: center;
	z-index:10;
}
#disp{display:none;}



/*=====================================================*/
#nav {
	width:100%;  min-height:40px;
	background:#d3d3d2;
	background: -moz-linear-gradient(top, #ffffff, #d3d3d2);
	background: -ms-linear-gradient(top, #ffffff, #d3d3d2);
	background: -o-linear-gradient(top, #ffffff, #d3d3d2);
	background: -webkit-linear-gradient(top, #ffffff, #d3d3d2);
	background: linear-gradient(top, #ffffff, #d3d3d2);
	position : fixed;
	top:0; left:0;	z-index: 2000;
	}
	#toggle{ display: none;}
	#nav ul{ width:980px; margin:0 auto;}
	#nav li{ float:left; }
	#nav li a{ width:auto; height:35px; display:block; text-align:center; padding:5px 15px 0 15px;}
	#nav li a:hover,#nav li a.on{ background:#d3d3d2;}
	#nav li a.off:hover{ background:none; cursor:default; }
	#nav li a.off img{opacity:0.6; filter: alpha(opacity=60);	-ms-filter: "alpha( opacity=60 )";}
/*========================================*/
.slicknav_menu {
	display: none;
}

@media screen and (max-width: 640px) {
	#menu {	display: none;}
	.slicknav_menu {display: block;	}
	#nav ul { width:100%;}
	#nav li{ float:none; }
	#nav li img { width:auto; height:auto;}
	#nav li a{ width:auto; height:35px; display:block; text-align:center; padding:5px 20px 0 20px;}
	#nav li a.on{ background:none;}
	#navsns{ width:100%; margin:0px auto; position:relative; }
	#snsbtn{ top:-40px; left:10px;}
}

/*=====================================================*/
#intro,#intro2, #Story, #Cast ,#Comment{
	width:100%; height:100%;  
	min-height:748px; 
	margin: 0 auto;	padding:0;
	position:relative; 	overflow:hidden;
	color: #fff;
	font-size: 14px; line-height:24px;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

.in_main p { text-align:left;}
.in_main h2 { margin:0 auto 30px auto;}

.boxarea { height:200px; background:#f7f7f7;}
#intro{ background:url(images/bg01.jpg?2) no-repeat center bottom #fff; color: #000; padding:0 0 50px 0; }
	#intro .in_main { 
		margin:100px auto 0 auto; padding:10p; width:780px; background:url(images/w50.png) repeat;}
	#intro .signature { text-align:right;}
	
#intro2{ background:url(images/bg02.jpg) no-repeat center top fixed #fff; color: #000;}
	#intro2 .in_main { 
		margin:150px auto 400px auto; padding:10px;  width:780px; background:url(images/w50.png) repeat;}

#Story { /*background:url(images/bg03.jpg) no-repeat center top fixed;*/ color:#ccc;}
	#Story .in_main{ 
		padding:20px; margin:150px auto 400px auto; /*margin:300px auto;*/ width:780px; background:url(images/b75.png) repeat; }
#Cast {background:url(images/bg05.png) no-repeat center top; color:#ccc;}

#Cast .in_main{ 
		padding:20px; margin:100px auto; width:780px; background:url(images/b75.png) repeat; }
		#Cast .in_main h3 { margin:0 0 10px 0;  text-align:left;}
		#Cast .in_main p { margin:0 0 50px 0;}
		#Cast .in_main .filmbox { border:1px solid #333; margin:0 auto 20px auto; padding:10px;}
		#Cast .in_main .film { margin:0 0 0 20px;}
#Staff { background:url(images/bg06.png) no-repeat center top; color:#ccc;}
#Comment { background:url(images/bg04.png?2) no-repeat center bottom; color:#fff;}
	#Comment .in_main {
	 padding:0 0 450px 0; margin:100px auto 0 auto; width:940px;  }
	#Comment p{ margin:20px 0 10px 0;}
	#Comment .name { color:#ABA969; font-size:16px; font-weight:bold; padding:0 0 0 60px; background:url(images/icon_name.png) no-repeat; }
	#come01 { text-align:left; width:450px; float:left;}
	#come02 { text-align:left; width:450px; float:left; margin:0 0 0 40px;}
	.chu { font-size:10px; text-align:right; font-weight:normal; margin:0 50px 0 0;}

/*========================================*/
@media screen and (max-width: 640px) {
	
	#intro, #intro2,#Story, #Cast ,#Comment{ padding:50px 0 0 0; min-height:auto;  }
	.sp { display:block; }
	.pc { display:none;}
	#intro,#intro2,#Story,#Cast,#Comment,#Staff{ background-image:none; }
	#intro .in_main,  #intro2 .in_main,#Story .in_main, #Cast .in_main,#Comment .in_main{ padding:20px; margin:0 auto; width:90%;}
	#Cast .in_main .film { margin:0;}
	#come01,#come02{ text-align:left; width:90%; float:none; margin:0;}
	.chu {margin:0;}
}

#page-top {
	position: fixed;
	bottom: 20px;	right: 0px;
}
#page-top a:hover {
	opacity:0.7;					/* Firefox,Opera,Safari */
	filter: alpha(opacity=70);			/* IE */
	-ms-filter: "alpha( opacity=70 )";
}

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