@charset "UTF-8";

/*
===== NOTES =====================================
+01: CSS Reset
+02: Common Setup
+03: Heading decoration
+04: Home Rayout & Decoration
+05: Schoolinfo Rayout & Decoration
+06: Workshop Rayout & Decoration
+07: Form Rayout -- Briefing & ENTRY Decoration
================================================
*/

/* ==================================================================================================
+01: CSS Reset
================================================================================================== */
ul{list-style-type:none;}
html,body{width:100%; height:100%;}

/* link ------------------------------ */
a:link, 
a:visited,  
a:active {
	color:#00adbb;
	text-decoration: underline;
	}
a:hover{text-decoration:none;}

/* Clearfix ------------------------------ */
.clearfix {clear:both;}
.clearfix:after {clear:both;content:".";display:block;height:0;visibility:hidden;overflow:hidden;}

/* text ------------------------------ */
.text{
	text-align:justify;
	text-justify:inter-ideograph;
	line-height:1.5;
	font-size:14px;
	color:#666;
	}
.text p{padding-top:1em;}

.text21{font-size:21px;}
.text18{font-size:18px;}
.text16{font-size:16px;}
.text12{font-size:12px;}
.text10{font-size:10px;}
.blue{color:#00becc;}


/* position ------------------------------ */
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}

/* images ------------------------------ */
#pop article figure{
	float:right;
	margin-top:1em;
	margin-left:2em;
	}

/* ==================================================================================================
+02: Common Setup
================================================================================================== */
#loading{
	background:url(../images/loading.gif) center center no-repeat;
	width:200px;
	height:90px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-100px;
	margin-top:-45px;
}

body{
	background:#f57700 url(../images/bg.gif) left top repeat-x;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", meiryo, "ＭＳ Ｐゴシック", sans-serif;
	color: #111;
	font-size:14px;
	}
body#pop{background:#fff url(../images/pop_header.gif) center top repeat-x;}

#home .contents{
	width:980px;
	margin:0 auto;
	background:url(../images/home.png) center 50px no-repeat;
	position:relative;
	}

/* ==================================================================================================
+03: Home Setup
================================================================================================== */

/* Navigation
------------------------------------------------------------ */
nav{
	width:978px;
	margin:0 auto;
	padding-top:10px;
	padding-left:2px;
	}
/*
#home nav{
	position:absolute;
	top:10px;
	left:2px;
	}
*/
nav li{
	float:left;
	background:url(../images/nav_icon.gif) 2px 0px no-repeat;
	padding-left:40px;
	padding-right:4px;
	line-height:1;
	}

/* Over photo
------------------------------------------------------------ */
#home .logo{
	position:absolute;
	top:153px;
	left:50%;
	margin-left:-344px;
	}
.sdp-3rd{
	position:absolute;
	top:81px;
	left:50%;
	margin-left:-162px;
	}
.berlin{
	position:absolute;
	top:109px;
	left:50%;
	margin-left:-169px;
	}
.catchcopy{
	position:absolute;
	top:335px;
	left:50%;
	margin-left:-459px;
	}
.releaseday{
	position:absolute;
	top:499px;
	left:50%;
	margin-left:-413px;
	}
#home #comment{
	padding-top:860px;
	background:url(../images/home_comment_bg.png) center bottom no-repeat;
	height:94px;
	}
#home #comment h2{
	float:left;
	padding-top:69px;
	padding-left:14px;
	margin-right:6px;
	}
#home #comment ul.marquee{
	float:left;
	width:657px;
	height:1em;
	overflow:hidden;
	line-height: 1;
	position: relative;
	margin-top:69px;
	}
ul.marquee li {
	position: absolute;
	top: -999em;
	left: 0;
	white-space: nowrap;
	padding: 2px 0px 3px;
	}
#home #comment p{
	float:right;
	padding-top:64px;
	padding-right:14px;
	}

footer{
	width:980px;
	margin:0 auto;
	}
#home footer{
	padding-top:26px;
	padding-bottom:20px;
	}
#home footer .main{
	float:right;
	width:796px;
	}
#home footer .main .inner-main{
	float:left;
	text-align:center;
	width:626px;
	}
#home footer .main .inner-main .cast {padding-top:10px;}
#home footer .main .inner-main .staff{padding-top:18px;}
#home footer .main .inner-sub{
	float:right;
	text-align:right;
	width:141px;
	}
#home footer aside{
	float:left;
	width:184px;
	}
#share-btn{margin-bottom:10px;}
#share-btn li{float:left;}
.sns-bnr li{margin-bottom:2px;}

/* ==================================================================================================
+03: POP Setup
================================================================================================== */
#pop header{
	width:760px;
	height:166px;
	margin:0 auto 30px;
	background:url(../images/news_header.jpg) right top no-repeat;
	}
#pop article header{
	width:auto;
	height:auto;
	margin:auto;
	background:none;
	}
#pop .logo{
	padding-top:20px;
	padding-left:10px;
	}
#pop .pagetitle{
	padding-top:12px;
	padding-left:10px;
	width:293px;
	text-align:center;
	}
#pop article{
	width:760px;
	margin:0 auto;
	padding-bottom:40px;
	}
#pop article header time{
	float:right;
	color:#666;
	font-size:12px;
	padding-top:1.25em;
	}
#pop article header h1{
	font-size:18px;
	font-weight:bold;
	color:#00adbb;
	border-bottom:#00adbb 3px solid;
	background:url(../images/news_camera.gif) 5px center no-repeat;
	padding-left:60px;
	padding-top:0.5em;
	padding-bottom:0.25em;
	line-height:1.3;
	}
#pop article .text.clearfix{padding-top:1em;}





.event-list{
	border-top:#00adbb 1px solid;
	border-left:#00adbb 1px solid;
	margin-top:1em;
	width:100%;
}

.event-list th,
.event-list td{
	border-bottom:#00adbb 1px solid;
	border-right:#00adbb 1px solid;
	padding:0.5em 1em;
}

.event-list th{
	background-color:#00becc;
	color:#FFF;
	width:20%;

}

.attention{
	background-color:#fcfcfc;
	border:#ddd 1px solid;
	padding:0 1em 1em;
	margin-top:1em;
	}







/* Theaters
------------------------------------------------------------ */
#pop .contents{
	width:760px;
	margin:0 auto;
	}
#arealist{
	/*
	border-bottom:#000 1px solid;
	padding-bottom:2px;
	margin-bottom:20px;
	*/
	margin-bottom:5px;
	}
#arealist a{color:#000;}
#arealist div{
	font-size:12px;
	float:left;
	color:#666;
	}
#arealist div#update{float:right;}

#pop .contents h3{
	font-size:14px;
	margin-bottom:5px;
	color:#333;
	border-left:#ffb100 5px solid;
	padding-top:3px;
	padding-left:7px;
	}

.table-list{
	width:100%;
	border-collapse: collapse;
	border-left:#aaa 1px solid;
	border-top:#aaa 1px solid;
	}
.table-list th{
	padding:2px 5px;
	text-align:center;
	line-height:1.25;
	letter-spacing:0.5em;
	font-size:10px;
	border-right:#aaa 1px solid;
	border-bottom:#aaa 1px solid;
	background-color:#111;
	color:#ccc;
	font-weight:normal;
	}
.table-list td{
	padding:15px 5px;
	line-height:1.1;
	font-size:13px;
	border-right:#aaa 1px solid;
	border-bottom:#aaa 1px solid;
	background-color:#fcfcfc;
	color:#444;
	vertical-align:middle;
	}
.table-list td{padding:13px 5px;}/*　暫定　*/
.table-list td a:link,
.table-list td a:visited{	color:#444;}
.table-list td a:hover{ text-decoration:none;}

.table-list td.fin{
	background-color:#ddd;
	color:#888;
	font-size:11px;
	padding:6px 5px;
	line-height:1;
	}
.table-list td.fin a:link,
.table-list td.fin a:visited{	color:#888;}
.table-list td.fin a:hover{		color:#ccc;}

.place{		width:60px;}
.release{	width:250px;}
.tel{		width:140px;}

#pop .pagetop{
	font-size:10px;
	text-align:right;
	padding:5px 0 20px;
}
#pop .pagetop a{color:#999;}

/* ==================================================================================================
+03: contents Setup
================================================================================================== */

#introduction header,
#story header,
#cast header,
#note header,
#comment header{
	background:url(../images/intro_bg.png) center top no-repeat;
	width:100%;
	height:425px;
	margin-top:10px;
	position:relative;
}
#story header{background:url(../images/story_bg.png) center top no-repeat;}
#cast  header{background:url(../images/cast_bg.png) center top no-repeat;}
#note  header{background:url(../images/note_bg.png) center top no-repeat;}
#comment header{background:url(../images/comment_bg.png) center top no-repeat;}
#introduction header h1,
#cast header h1,
#comment header h1{
	position:absolute;
	top:44px;
	left:50%;
	margin-left:-490px;
}
#introduction header p{
	position:absolute;
	top:100px;
	left:50%;
	margin-left:-490px;
}
#story header h1,
#note header h1{
	position:absolute;
	top:44px;
	right:50%;
	margin-right:-490px;
}
.contents-header{
	width:980px;
	height:10px;
	background:url(../images/contents_header.png) center top no-repeat;
	margin:30px auto 0;
}
.contents-mid{
	width:920px;
	background:url(../images/contents_mid.png) center top repeat-y;
	margin:0 auto;
	padding:20px 30px;
}
#introduction .contents-mid{position:relative;}
#cast .contents-mid{position:relative; height:1478px;}

#introduction .contents-mid .figure01{
	position:absolute;
	top:10px;
	right:220px;
}
#introduction .contents-mid .figure02{
	position:absolute;
	top:58px;
	right:20px;
}
#introduction .contents-mid .figure03{
	position:absolute;
	top:128px;
	right:100px;
}

.contents-footer{
	width:980px;
	height:10px;
	background:url(../images/contents_footer.png) center top no-repeat;
	margin:0 auto;
}

footer.contents{text-align:center; padding-bottom:20px;}

footer.contents p{ padding-top:60px;}
footer.contents h1{padding-top:30px;}
footer.contents h2{padding-top:15px;}

.cast01 {position:absolute; top:39px; left:30px;}
.cast02 {position:absolute; top:139px;right:30px;}
.cast03 {position:absolute; top:406px; left:50px;}
.cast04 {position:absolute; top:688px; left:30px;}
.cast05 {position:absolute; top:605px;right:30px;}
.cast06 {position:absolute; top:1035px; left:75px;}
.staff01{
	position:absolute;
	top:1259px;
	left:30px;
	background:url(../images/cast_line.png) center top no-repeat;
	padding-top:68px;
	padding-left:12px;
	}

#note .text-area{
	float:right;
	width:550px;
	padding-bottom:30px;
}

#note .text-area section{
	padding-bottom:30px;
	background:url(../images/note_line.png) center bottom no-repeat;
	margin-bottom:30px;
	}
#note .text-area section.last-section{
	padding-bottom:0px;
	background:none;
	margin-bottom:0px;
	}
	
#note .text-area h2{margin-bottom:20px;}

#note .photo-area{
	float:left;
	width:370px;
}

#note .photo-area .photo01{padding-top:2px; padding-left:10px;}
#note .photo-area .photo02{padding-top:15px; padding-left:43px;}
#note .photo-area .photo03{padding-top:17px; padding-left: 0px;}
#note .photo-area .photo04{padding-top:20px; padding-left:35px;}
#note .photo-area .photo05{padding-top:26px; padding-left:16px;}

.sdp-area{
	background:url(../images/note_sdp_bg.gif) left top repeat;
	padding:20px;
	margin-top:30px;
}

.sdp-area figure{
	float:right;
	padding:40px 40px 0 0;
}
.sdp-area p{padding-top:20px;}



#comment .contents-mid{position:relative; height:2188px;}

.comment00{position:absolute;right: 80px; top:  48px;}
.comment01{position:absolute; left: 68px; top:  30px;}
.comment02{position:absolute; left:482px; top: 139px;}
.comment03{position:absolute; left: 32px; top: 348px;}
.comment04{position:absolute; left:547px; top: 449px;}
.comment05{position:absolute; left: 69px; top: 614px;}
.comment06{position:absolute; left:524px; top: 835px;}
.comment07{position:absolute; left: 47px; top:1051px;}
.comment08{position:absolute; left:327px; top:1310px;}
.comment09{position:absolute; left: 35px; top:1548px;}
.comment10{position:absolute; left:331px; top:1805px;}
.comment11{position:absolute; left: 38px; top:2014px;}