body{  margin: 0;  }  
* html body{  overflow: hidden;  }   
div#headerArea {  position: fixed !important;  position: absolute;  top: 0;  
    left: 0;  width: 100%;   height: 30px;  background-color: #000000;  color: #fff;  }  
div#footerArea {  
    position: fixed !important;  
    position: absolute;  
    bottom: 0;  
    left: 0;  
    width: 100%;  
    height: 30px;  
    background-color: #000000;  
    color: #fff;  }  
* html div#contentsArea{  height:50%;  overflow: auto;  }  


#contentsArea{background-color: #181518;width:100%;margin-top: 300px;margin-bottom: 300px}

.ao0{display: inline-block;margin-top: 30px}
.ao1{display: inline-block;margin-top: 200px}
.ao2{display: inline-block}
.ao3{margin-top: 30px}
.ao4{background-color: #cccccc}
#about{width: 900px}
#access{padding-top: 0px}
#ticket{padding-bottom: 50px}
#cast{padding-top: 80px}
#staff {width: 900px; margin: 0 auto;padding-top: 50px;clear: both}
.staff1 {float: left;width: 80px;display: inline-block;margin-right: 10px}
.staff2{float: left;width: 80px;display: inline-block;margin-right: 10px}
.staff3{float: left;width: 80px;display: inline-block;margin-right: 10px}
.staff4{float: left;width: 80px;display: inline-block;margin-right: 10px}
.staff5 {float: left;width: 80px;display: inline-block;margin-right: 10px}
.staff6{float: left;width: 80px;display: inline-block;margin-right: 10px}
.staff7{float: left;width: 80px;display: inline-block;margin-right: 10px}
.staff8{float: left;width: 80px;display: inline-block;margin-right: 10px}

trip1{max-width: 100%}
.trip:hover { opacity: 0.4;filter:alpha(opacity=50);-moz-opacity:0.4;}
.trip3:hover { opacity: 0.4;filter:alpha(opacity=50);-moz-opacity:0.4;}
.bbb:hover { opacity: 0.4;filter:alpha(opacity=50);-moz-opacity:0.4;}
.twitter:hover { opacity: 0.4;filter:alpha(opacity=50);-moz-opacity:0.4;}


#menu {margin-top: 5em;margin-right:0em;padding-bottom:2em;margin-left:0em;padding: 10px; margin-bottom: 10px; border: 1px solid #ffffff}
#menu ul{margin: 5em; padding: 0em; list-style: none;}
#menu li{display: inline; padding: 5em; margin: 5em; }

#menu li a{display: block; background-color: #181518;border: 1em;padding: 3px;
          text-decoration: none;color: #ffffff;width: 120px; margin: 1px;
           text-align: center;font-size: 14px;font-family: Arial-black,Timesr}
#menu li a:hover{background-color: #181518;color: mediumvioletred;}

hr.hr1 {height: 0.06px;width:900px; border-top: 0.05px #cccccc solid;}
hr.hr2 {height: 0.06px;width: 900px; border-top: 0.05px #999999 solid;}
.ura{margin-left: 60px;margin-right: 60px;margin-bottom: 70px; float: left}
#omote{width:1020px}

.name{position:relative;text-align:center;overflow: hidden;float: left;margin: 15px;display: inline-block;padding-bottom: 18px}
.name:hover { opacity: 0.8;filter:alpha(opacity=50);-moz-opacity:0.8;}
.name1{position:relative;text-align:center;overflow: hidden;float: left;margin: 15px;display: inline-block;padding-bottom: 18px}
.name1:hover { opacity: 0.8;filter:alpha(opacity=50);-moz-opacity:0.8;}
.castcast{text-align:center;display: inline-block ;margin-top: 40px;width:900px}

h11{font-size: 3.7em;color: #cccccc;font-family:'Roboto Condensed',sans-serif;}
h1{font-size: 3.7em;color: #cccccc;font-family:'Roboto Condensed', sans-serif; margin-right: 700px}
h2{font-size: 3.7em;color: #cccccc;font-family:'Roboto Condensed', sans-serif; margin-right: 654px}
h3{font-size: 3.7em;color: #222222;font-family:'Roboto Condensed', sans-serif; margin-right: 750px;padding-top: 80px;}
h4{font-size: 3.7em;color: #222222;font-family:'Roboto Condensed', sans-serif; margin-right: 730px;padding-top: 60px;}
h5{font-size: 3.7em;color: #222222;font-family:'Roboto Condensed', sans-serif; margin-right: 705px}
h6{font-size: 3.7em;color: #222222;font-family:'Roboto Condensed', sans-serif; margin-right: 730px}
h7{font-size: 3.7em;color: #cccccc;font-family:'Roboto Condensed', sans-serif; margin-right: 690px;margin-bottom: 30px}
h8{font-size: 3.7em;color: #cccccc;font-family:'Roboto Condensed', sans-serif; margin-right: 750px;padding-top: 60px}
h9{font-size: 3.7em;color: #cccccc;font-family:'Roboto Condensed', sans-serif; margin-right: 670px}
h10{font-size: 5em;color: palevioletred;font-family:'Roboto Condensed', sans-serif;margin-top: 60px}
h12{font-size: 3.7em;color: #cccccc;font-family:'Roboto Condensed', sans-serif; margin-right: 900px}
h13{font-size: 3.7em;color: #cccccc;font-family:'Roboto Condensed', sans-serif; margin-right: 770px;padding-top: 60px}
h14{font-size: 0.8em;color: #cccccc;font-family:'Roboto Condensed'}
h15{font-size: 1.5em;color: #cccccc;font-family:'Roboto Condensed'}
h15:hover {color:indianred}

.box1 {display: inline-block;width:400px;vertical-align: top;padding-top: 0px;text-align: left;margin-bottom: 70px;}
.box2 {display: inline-block;width:500px;vertical-align: top;padding-top: 0px;text-align: left;margin-bottom: 70px;}
.box3 {display: inline-block;width:400px;vertical-align: top;padding-top: 0px;text-align: left;margin-bottom: 70px}
.box4 {display: inline-block;width:500px;vertical-align: top;padding-top: 0px;text-align: left;margin-bottom: 70px}
.box5 {display: inline-block;width:350px;vertical-align: top;padding-top: 0px;text-align: left;margin-bottom: 70px}
.box6 {display: inline-block;width:550px;vertical-align: top;padding-top: 0px;text-align: left;margin-bottom: 70px}
.box7 {display: inline-block;width:537px;vertical-align: top;padding-top: 0px;text-align: left;margin-bottom: 20px}
.box8 {display: inline-block;width:700px;vertical-align: top;padding-top: 0px;text-align: left;margin-bottom: 20px}
.box9 {clear: both;width:900px;vertical-align: top;padding-top: 0px;margin-bottom: 70px;text-align: left}
.box10{display: inline-block;width:400px;vertical-align: top;margin-top:  0px;text-align: left;margin-bottom: 50px}
.box11{display: inline-block;width:500px;vertical-align: top;margin-top:  0px;text-align: left;margin-bottom: 50px}
.sns{clear: both ;padding-bottom: 15px;padding-top: 80px}
.twitter{margin-top: 50px}
.top{padding-bottom: 80px}

#tions{background-color: #181518}
#odal-options{background-color: #181518}
#dal-options{background-color: #181518}
#ptions{background-color: #181518}
#modal-options{background-color: #181518}
#options{background-color: #181518}
#ons{background-color: #181518}
#ns{background-color: #181518}

p1{font-size: 1.0em}
p2{font-size: 2.0em}
p3{font-size: 1.0em;color: #222222}
p4{font-size: 1.5em;color: #222222}
p5{font-size: 2.0em;color: #222222}
p6{font-size: 1.3em;color: indianred}
p6:hover {font-size: 1.3em;color:cornflowerblue}
p7{font-size: 1.0em;color: indianred}
p7:hover {font-size: 1.0em;color:cornflowerblue}
p8{color: }

@media screen and (max-width: 1000px){
hr.hr1 {height: 0.06px;width:100%; border-top: 0.05px #cccccc solid;}
hr.hr2 {height: 0.06px;width: 100%; border-top: 0.05px #999999 solid;}

  
    
}

@media screen and (max-width: 900px){
    
    .map{max-width: 100%}
    .ura{ clear: both;margin-right: 0px;margin-left: 0px;margin-bottom: 25px;width: 355px;height: auto}
   
    .trip{width: 95%;}
    .trip1{width: 100%}
    .box1{width: 90%}
    .box2{width: 90%}
    .ao0{width: 90%}
    .ao12{width: 90%}
    .box7{width: 90%}
    .box8{width: 90%}
    .box9{width: 90%}
    #about{width: 90%;clear: both}
    p5{font-size: 1.8em}
    .box10{width: 90%}
    .box11{width: 90%}
    .box5{width: 90%}
    .box6{width: 90%}
    .figfig{max-width: 100%}
    .name{clear: both;margin-left: 40px}
    .name1{clear: both;margin-left: 40px}
    #staff {width: 90%}
    #area{width: 90%}
    #contentsArea{width: 100%}
    p{font-size: 0.50em}
    .staff3 {clear: both}
    .staff5{clear: both}
    .staff7{clear: both}
    .arisa{width: 100%;height: auto}
}
@media screen and (max-width: 400px){   p5{font-size: 1.6em}
 .ura{ clear: both;margin-right: 0px;margin-left: 0px;margin-bottom: 25px;width: 330px;height: auto}        
}
@media screen and (max-width: 350px){
    .ura{ clear: both;margin-right: 0px;margin-left: 0px;margin-bottom: 25px;width: 250px;height: auto}
     .name{clear: both;margin-left: 20px}
    .name1{clear: both;margin-left: 20px}
    .bbb{width: 240px}
}

























<div class=ao1><div id="menu" >
    <ul><li><a href="#about">フィグスとは</a></li>
        <li><a href="#nittei">公演スケジュール</a></li>
        <li><a href="#access">アクセス</a></li>
        <li><a href="#yoyaku">ご予約</a></li>
        <li><a href="#cast">キャスト</a></li>
        <li><a href="#other">その他</a></li>
        </ul></div></div>