@charset "UTF-8";

html,body{ height: 100%;}

/* common */
a { color: #0066CC; text-decoration: none;}
a:hover { color: #e89c2b; text-decoration: underline; }
.center{ text-align: center; margin: 0 auto;}
.right{ float: right !important;}
.last{ margin: 0 !important;}
.modefy{ border: none !important; margin: 0 !important;}
.none{ margin: 0 60px !important}
.reimg img{ width: 100%;}
.mgt-16{ margin-top: 16px !important;}
.mgb{ margin-bottom: 40px !important;}

/* frame */
#wrapper{ background: #000; height: 100%;}

/* side */
#side{ position: fixed; width: 300px; height: 100%; top: 0; left: 0; z-index: 10; background: #FFF; box-shadow: 0px 0px 5px #666;}
#side h1{ margin: 30px 0 0 -30px;}

#side ul.nav{ position: relative; display: block; width: 100%; height: 20%; }
#side ul.nav li{ display: inline-block; width: 14%; height: 100%; vertical-align: top;}
#side ul.nav li img{ max-width: 100%; max-height: 100%;}

#side ul.menu{ position: absolute; display: block; width: 100%; bottom: 14%;}
#side ul.menu li{border-top: 1px solid #aaa; border-bottom: 1px solid #ddd;}
#side ul.menu li a{ display: block; padding: 10px 0; background: #f9f9f9; font-size: 0.8em;}
#side ul.menu li a:hover{ display: block; padding: 10px 0; background: #009ac9; color: #fff; text-decoration: none;}

#side ul.social{ position: fixed; display: block; bottom: 7%; left: 30px;}
#side ul.social li{ display: inline-block; padding: 0 3px;}

#side p.copyright{ position: fixed; font-size: 0.75em; color: #666; bottom: 3%; left: 60px;}


/* container */
#container{ height: 100%;}
#contents{ height: 100%;}

/*main / toppage*/
#main{ position: relative; background-image: url(../img/main-vis.jpg); background-color: #000; background-size: cover; height: 100%;}
#main .tit{ position: absolute; top: 30px; left: 330px;}
#main .time{ position: absolute; bottom: 210px; left: 330px;}
#main .order{ position: absolute; top: 15%; right: 40px;}

/*under*/
#under{ position: relative; background: url(../img/under-vis.png) repeat; padding: 0 0 150px; background-color: #fff; background-size: contain; background: repeat height: 100%; color: #222;}
#under .entry{ display: block; margin: 0 0 0 300px; padding: 80px 0 0;}
#under .entry h2{}
#under .entry p{ margin: 0 0 16px;}
#under .entry .intro{ margin: 0 0 120px;}

#under .static{ margin: 0 200px 0 450px; text-align: left;}
#under .static h3{ padding: 8px 0 8px 24px; background: #333; color: #fff;}
#under .static p { margin: 0 0 16px;}
#under .static ul{ margin: 0 0 56px 36px;}
#under .static ul li{ list-style: disc; padding: 0 0 16px;}

#under .static ul.ticket{ margin: 16px 36px; font-size: 1.2em; font-weight: bold; color: #950000;}
#under .static ul.ticket li{ list-style: disc; padding: 0 0 16px;}
#under .static dl{ margin: 0 0 36px;}
#under .static dl dt{ font-weight: bold; color: #080094; font-size: 1.1em;}
#under .static dl dd{ margin: 0 0 0 24px; border-left: 5px solid #ab2121; padding: 8px 0 8px 16px;}

#under .static .sem-box{ margin: 0 0 64px;}
#under .static .sem-box p.icon{ float: left; margin: 0 36px 40px 0;}
#under .static .sem-box p.icon img{ width: 200px;}
#under .static .sem-box dl{ }
#under .static .sem-box dl dt{ font-size: 1.7em; line-height: 1.6;}
#under .static .sem-box dl dt span{ font-size: 0.5em; padding: 8px 16px;}
#under .static .sem-box dl dt span.shufu{ background: #ba1383; color: #fff;}
#under .static .sem-box dl dt span.soshiki{ background: #006da8; color: #fff;}
#under .static .sem-box dl dt span.sub{ background: #09a300; color: #fff;}
#under .static .sem-box dl dd{ border: none;}
#under .static .sem-box dl dd ul.schedule{ margin: 0;}
#under .static .sem-box dl dd ul.schedule li{ padding: 8px 24px; display: inline-block; list-style: none; border: 1px solid #666;}

.asp p{ }
.asp a img:hover{ border: 10px solid #ffaaaa; margin: -10px;}


iframe{
border:none;
width:100%;
height:100%;
padding:0;
margin:0;
}
.mov{ width: 100%; height: 600px;}

.aspinfo{ margin: 0 auto;}
.aspinfo > h2{ width: 100%; padding: 8px 16px; font-size: 1.2em; font-weight: bold; color: #fff !important; background: #333;}
.aspinfo .info{ text-align: center;}
.aspinfo .info table{ text-align: left; width: 100%;}
.aspinfo .info table tr th{ width: 130px; padding: 16px; background: #eee; border: 1px solid #aaa;}
.aspinfo .info table tr td{ padding: 16px; border: 1px solid #aaa; background: #fafafa;}
.aspinfo .comment{ margin: 80px 0 0;}
.aspinfo .comment dl{ text-align: left;}
.aspinfo .comment > dl > dt{ width: 100%; padding: 8px 16px; font-size: 1.2em; font-weight: bold; color: #fff !important; background: #333;}
.aspinfo .comment > dl > dd{}

/* sponcer */
#sponcer{ position: fixed; width: 100%; height: 180px; background: #000; z-index: 3; bottom: 0; left: 0;}
#sponcer h2{ margin: 10px 3% 10px 330px; padding: 0 0 5px; font-size: 0.8em; color: #fff; border-bottom: 1px dotted #ccc; }
#sponcer .inner{ display: block; margin: 0 0 0 330px;}
#sponcer .inner .box{ position: relative; display: block; float: left; margin: 0 1% 0 0; width: 15%; height: 120px;  background: #fff;}
#sponcer .inner .box img{ width: 100%;}