@charset "utf-8";
/* CSS Document */

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
input, select { vertical-align:middle; }
/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
10px  77% |  11px  85% |  12px  93% (was 93) |  13px  100% |  14px  108% (was 107) |  15px  116% (was 114) |  16px  123.1% (was 122) |  
17px  131% (was 129) |  18px  138.5% (was 136) |  19px  146.5% (was 144) |  20px  153.9% (was 152) |  21px  161.6% (was 159) |
22px  167% |  23px  174% |  24px  182% |  25px  189% |  26px  197% |  
*/
body{font:14px/1.341 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}
body{font-family: メイリオ, Meiryo, 'Lucida Grande', 'Bitstream Vera Sans', 'Segoe UI', Calibri, Verdana, Arial, 'ＭＳ Ｐゴシック', IPAPGothic, sans-serif !important; color:#333}
select,input,textarea,button{font:99% arial,helvetica,clean,sans-serif}
table{font-size:inherit;font:100%}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}

/*---------------------
//  base
//----------------------*/  
a { color:#ff1493}
a:hover { color:#00ffff}
nav ul{ list-style:none}

body { background:#fff url(../img/bg.jpg) repeat;}

.wrapper-radius {
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; 
box-shadow: 1px 1px 5px #000;
 }

.clearfix {zoom:1;}
.clearfix:after{ content: ""; display: block; clear: both;}


/*---------------------
//  common styles
//----------------------*/  
section {
  height: 100%; clear: both; padding: 0; clear: both; 
  background:url(../img/h2-bg.png) repeat-x 0 0;
  }
h1 { padding: 30px 0 0 0;}
h2 { height: 95px; margin: 0 0 55px 0}
h2 img { margin: 22px 0 0 0}

.doc-layout-wrapper { width:1000px; margin:0 auto; text-align:left;}


/*---------------------
//  footer for fix
//----------------------*/
html,body {height: 100%;}
#nav {background:url(../img/midori.png) repeat-x 0 0; height:138px; width:100%; position: fixed; bottom: 0; left: 0; z-index:500}
#nav nav{ width:1000px; margin:0 auto; padding:15px 0 0 0; position: relative}
#nav nav .fb-like {position: absolute; top:15px; right: 0px; width: 100px; z-index: 501}
#nav nav #twitterBtn {position: absolute; top:15px; right: 105px; width: 100px; z-index: 501}
#nav ul { float:left; margin:55px 0 0 0; padding:0;}
#nav ul li { display:inline; padding:0; }
#nav ul li img { height: 38px; margin: 0 33px 0 0; float: left}
#nav ul li img:hover { opacity: 0.7}
#nav ul li:nth-child(5) img { margin: 0 !important;}


/*---------------------
//  index
//----------------------*/
section#top { background-image: none !important}

#top h1 img{ width: 500px; margin-bottom:25px}
#top .doc-layout-wrapper { position: relative; width: 1000px; height: 100%;}
#top .doc-layout-wrapper h2{ position: absolute; right: -20px;bottom: 480px;}
#top .doc-layout-wrapper #panda { position:absolute; right: -30px; bottom: 120px;z-index: 501;}
#top .doc-layout-wrapper #date {list-style: none;}
#date li { margin: 0 0 5px 0}

#top .doc-layout-wrapper #fukidashi { position:absolute; right: 340px; bottom: 390px;z-index: 502; cursor: pointer}
#top .doc-layout-wrapper #fukidashi:hover { opacity: 0.7}

#top .doc-layout-wrapper #timetable { background:#fefffc; width: 370px; heigh:auto;position:absolute; left: 30px; bottom:120px;z-index: 501; padding: 15px; display: none;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
}
#top .video {
 width: 460px; margin: 0 0 60px 0; padding: 12px 0; background: url(/img/movie-bg.gif) repeat 0 0;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; 
 behavior: url(/css/border-radius.htc);// for IE; text-align: center; float: none}
 
#top .doc-layout-wrapper .close { float: right; cursor: pointer}
#top .doc-layout-wrapper .close:hover{ opacity: 0.65}
.tt { background: url(../img/kite-panda.png) no-repeat 800px 460px}

/*---------------------
//  for about
//----------------------*/  
#about p { margin: 0 0 50px 0}

#about .thum {float:right; width: 320px; }
.stage {
 margin: 0 0 0 0; padding: 12px 0; background: url(../img/movie-bg.gif) repeat 0 0;
 -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; 
 behavior: url(/css/border-radius.htc);// for IE; text-align: center;
}
.stage img { vertical-align: top}

/*---------------------
//  for artists 
//----------------------*/  
.video {
 float:left; width: 580px; margin: 0 0 100px 0; padding: 18px 0; background: url(../img/movie-bg.gif) repeat 0 0;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; 
 behavior: url(/css/border-radius.htc);// for IE; text-align: center;}

.profile-wrap { clear: both; width: 1000px; margin: 0 auto; padding: 0 0 140px 0;}
.profile-wrap h3 { font-weight: bold; font-size: 40px;}
.profile-wrap h3 span { display: block; font-size: 15px; padding: 20px 0  30px 0}
.profile figure img{ margin: 0 0 15px 0}
.profile { float: right; width: 380px; margin: 0 0 	100px 0}
.profile h4 { border-bottom: dotted 2px #333; padding: 0 0 5px 0; font-size: 120%}
.profile p { margin: 10px 0; line-height: 1.7}

.hr{border-top:dashed 2px #333;clear: both; margin: 0 0 50px 0}
.hr hr { display: none; }
/*---------------------
//  for #ticket 
//----------------------*/ 
#ticket { height: auto!important; padding-bottom: 100px}
#ticket h3 { margin: 0 0 5px 0}
#ticket p{ margin: 0 0 20px 20px; font-size: 110%}
#ticket .e { vertical-align: top; margin: 0 0 0 10px;}
#ticket .e img:hover { opacity:0.75}
#ticket h4 { margin: 0 0 20px 0; font-size: 120%}
#ticket h5 { margin: 50px 0 20px 0; font-size: 140%;}
#ticket h5 img { vertical-align: middle; margin: -5px 5px 0 0 }



/*---------------------
//  for info 
//----------------------*/ 
#info { padding-bottom: 110px}
#info p { font-size: 20px; line-height: 2; margin: 0 0 40px 0}
#info ul { margin: 0 0px 0 20px; background: url(../img/panda-bikkuri.png) no-repeat right bottom}
#info ul li{ margin-bottom: 20px; font-size: 124%; line-height: 1.7}
#info ul li img { vertical-align: top; margin: -5px 0 0 0}

/*---------------------
//  for access 
//----------------------*/ 
#access p { float: left; width: 380px; line-height: 2; font-size: 20px;}
#access #map{ float: right; border: dotted 2px #333}

#thanks { text-align: center !important;}
#thanks h1{ font-size: 150%; margin: 0 0 20px 0}
#thanks h2{ font-size: 140%; margin: 0 0 20px 0 !important; height: auto !important}
#thanks p { margin: 0 0 20px 0}

#layout-404 { text-align: center !important;}
#layout-404 h1{ font-size: 200%; margin: 0 0 20px 0}
#layout-404 h2{ font-size: 140%; margin: 0 0 20px 0 !important; height: auto !important}
#layout-404 p { margin: 0 0 20px 0}

footer { padding-bottom: 150px}
footer #copyRight { text-align: right; clear: both; font-size: 10px; color: #beba98; padding: 20px 0 0px 0; width: 1000px; margin: 0 auto}