@charset "UTF-8";

body#musical #container.petite_etrangere{
	background:url(../../img/musical/bg_gradation.png) repeat-x !important;
		background-position:left top;
}



body#musical #grid-content .box				 {
									
										
										box-shadow: 0 0 4px #ccc;  
										-moz-box-shadow: 0 0 4px #ccc;  
										-webkit-box-shadow: 0 0 4px #ccc;  
									}

body#musical #side .boxInner{

	padding:20px;
	

}


body#musical #bodyBG{
	z-index                 : -1;
    background-color        : #000;
    background-image        : url(../../img/musical/bg_voyage.jpg) ;
	background-position:center top;
    background-repeat       : repeat-x;
    background-size         : auto;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
}


body#musical #bodyBG.petite_etrangere{background-color        : #05072e;}


body#musical #pageVisualCover{
margin:0 auto 20px auto;
height: auto;
min-height: 100px;
position: relative;
max-width: 1225px;

}


body#musical #pageVisualCover img{ width:100%;}

html.mini body#musical #pageVisualCover img{ margin:0 0px 0 0px; width:337px; }

body#musical #pageSubMenu{
margin:0 auto 20px auto;
height: auto;
min-height: 50px;
position: relative;
max-width: 1225px;

overflow: hidden;
}

body#musical #pageSubMenu ul{ margin-right:-9px;}
body#musical #pageSubMenu ul li{ width:117px; height:50px; float:left; margin:0 6px 6px 0;
overflow:hidden;
border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */  
	
	}
body#musical #pageSubMenu ul li a{ display:block; height:50px; text-indent:-999px; overflow:hidden;}


body#musical #pageSubMenu ul li.list1 a{background:url(../../img/musical/menu/top.png) center center no-repeat #f79dc5;}
body#musical #pageSubMenu ul li.list2 a{background:url(../../img/musical/menu/news.png) center center no-repeat #f79dc5;}
body#musical #pageSubMenu ul li.list3 a{background:url(../../img/musical/menu/staffblog.png) center center no-repeat #f79dc5;}
body#musical #pageSubMenu ul li.list4 a{background:url(../../img/musical/menu/ticket.png) center center no-repeat #f79dc5;}
body#musical #pageSubMenu ul li.list5 a{background:url(../../img/musical/menu/cast_staff.png) center center no-repeat #f79dc5;}
body#musical #pageSubMenu ul li.list6 a{background:url(../../img/musical/menu/goods.png) center center no-repeat #f79dc5;}
body#musical #pageSubMenu ul li.list7 a{background:url(../../img/musical/menu/qa.png) center center no-repeat #f79dc5;}
body#musical #pageSubMenu ul li.list8 a{background:url(../../img/musical/menu/history.png) center center no-repeat #f79dc5;}

body#musical #pageSubMenu ul li a:hover { background-color:#fba7c8;}






@media screen and (max-width: 1033px) {
	body#musical #pageSubMenu ul li{ width:139px; height:50px; float:left; margin:0 9px 9px 0;}
}
@media screen and (max-width: 786px) {
	body#musical #pageSubMenu ul li{ width:115px; height:50px; float:left; margin:0 8px 8px 0;}
}



	html.mini body#musical #pageSubMenu{ overflow:visible;}
	html.mini body#musical #pageSubMenu ul{ margin:0 -5px 0 0px; }
	html.mini body#musical #pageSubMenu ul li{ width:166px !important; height:50px; float:left; margin:0 5px 8px 0;}
	
	html.maxsize body#musical.boxList #pageSubMenu{ overflow:visible;}
	html.maxsize body#musical.boxList #pageSubMenu ul{ margin:0 -7px 0 0px; }
	html.maxsize body#musical.boxList #pageSubMenu ul li{ width:147px !important; height:50px; float:left; margin:0 7px 8px 0;}


body#musical #grid-content-entry p{ line-height:180%;}


body#musical #grid-content-entry .box 		{
									
									
									box-shadow: 0 0 4px #ccc;  
									-moz-box-shadow: 0 0 4px #ccc;  
									-webkit-box-shadow: 0 0 4px #ccc;  
									min-height:600px;
									background:#fff;
								}
								
body#musical #grid-content-entry #page_musical_head{
									width: 100%;
									
									height:650px;
									
									background:url(../../img/musical/vivi_contents_kamifubuki.png);
									position:absolute;
									top:0; 
									let:0;
									z-index:1;
									
								}					
								
body#musical #grid-content-entry #page_musical{ z-index:2; position:relative; padding-bottom:0;}


body#musical #grid-content-entry #page_musical .shareArea		{ border:solid 0px #f30; width:160px; height:20px; position:absolute; top:10px; left:auto; right:0px;}
	body#musical #grid-content-entry #page_musical .shareArea ul	{}
	body#musical #grid-content-entry #page_musical .shareArea ul li{ float:left; margin-left:5px; padding:0;height:20px ;border:solid 0px #ccc;}
	body#musical #grid-content-entry #page_musical .shareArea ul li.facebook	{ width:70px;}
	body#musical #grid-content-entry #page_musical .shareArea ul li.twitter	{ width:70px;}
	
	



#page_musical.page_main{ padding:60px 40px 60px 40px !important;}

span.red{ color:#d81f27;}

.musicalNews{ margin-bottom:80px;}
.musicalNews ul{ border:solid 2px #0f73bf; border-width:2px 0; padding:20px 0 10px 0;}
.musicalNews ul li{ border:solid 0px #f30; margin-bottom:10px;}

.musicalNews ul li dl{ position:relative;}
.musicalNews ul li dl dt{ position:absolute; width:74px; border:solid 0px #ccc; margin-bottom:5px;}
.musicalNews ul li dl dd{ border:solid 0px #ccc; padding-left:76px;}

html.tab .musicalNews ul li dl dt,
html.mini .musicalNews ul li dl dt{ position:relative; width:auto; }

html.tab .musicalNews ul li dl dd,
html.mini .musicalNews ul li dl dd{ padding-left:0px;}

.musicalNews a{ color:#0f73bf}

.mapImage { width:120px; margin-bottom:20px; padding-top:5px;}
.mapImage img.map{ width:116px; height:116px; border:solid 2px #0f73bf;}



.castList{ margin-bottom:20px;}


	#fighter,
	#witches5,
	#tuxedo ,
	#dymone{margin-bottom:80px;}
	
	
.castList h4{ height:40px; text-indent:-9999px; overflow:hidden; }
	#fighter h4{ background:url(../../img/musical/cast/title_fighter.png) no-repeat;}
	#witches5 h4{ background:url(../../img/musical/cast/title_witches5.png) no-repeat;}
	#tuxedo h4{ background:url(../../img/musical/cast/title_tuxedo.png) no-repeat;}
	#dymone h4{ background:url(../../img/musical/cast/title_dymone.png) no-repeat;}
	
	html.headersp .castList h4{ height:20px;}
	html.headersp #fighter h4{ background:url(../../img/musical/cast/title_fighter_mini.png) no-repeat;}
	html.headersp #witches5 h4{ background:url(../../img/musical/cast/title_witches5_mini.png) no-repeat;}
	html.headersp #tuxedo h4{ background:url(../../img/musical/cast/title_tuxedo_mini.png) no-repeat;}
	html.headersp #dymone h4{ background:url(../../img/musical/cast/title_dymone_mini.png) no-repeat;}
	
	
#droid{ margin-bottom:100px;border-bottom:dotted 0px #818181; padding-bottom:60px;}
#tuxedo{ margin-bottom:100px;}

.castList ul{ margin-bottom:0px;}
.castList ul li{ border:solid 0px #f30; margin-bottom:10px; min-height:187px;}

.castList ul li dl{ position:relative;}
.castList ul li dl dt{ position:absolute; width:187px; margin-bottom:5px;}
.castList ul li dl dd{ border:solid 0px #ccc; padding:0px 0 0 197px;}
.castList ul li dl dd p{ padding-top:10px; line-height:150% !important;}

	#blackmoon ul li dl dd{ border:solid 0px #ccc; padding:18px 0 0 197px;}

.castList ul li.blackLady{ border-top:dotted 1px #818181; padding-top:10px;}

html.headersp .castList ul li dl{ position:relative;}
html.headersp .castList ul li dl dt{ position:relative; width:auto; margin-bottom:5px; text-align:center;}
html.headersp .castList ul li dl dt img{ width:100%;}

html.headersp .castList ul li dl dd{ border:solid 0px #ccc; padding:5px 0 20px 0px;}
html.headersp .castList ul li dl dd p{ padding-top:10px;}

html.headersp #blackmoon ul li dl{ padding-top:20px;}
html.headersp #blackmoon ul li dl dd{ border:solid 0px #ccc; padding:5px 0 20px 0px;}




.staffList dl{ position:relative; margin-bottom:40px;}
.staffList dl dt{ width:110px; margin-bottom:10px; float:left; clear:both; text-align:right;}
.staffList dl dd{ width:210px; margin-bottom:10px; float:left;}
.staffList dl .main{ font-size:150%;}

.staffList dl .mainLast{ margin-bottom:30px;}



.ticketDays{ clear:both; width:100%; margin-bottom:40px;}

.ticketDays dl{ border:solid 1px #818181; border-width:1px 1px 0 1px; width:98%; padding:13px 0 10px 2%; background-color:#fff;}
.ticketDays dl dt{ float:left; width:140px; margin-right:10px;border:solid 0px #ccc; padding:2px 0px 5px 5px; font-size:150%;}
.ticketDays dl dd{ float:left; width:100px; margin-right:20px;border:solid 0px #ccc; padding:2px 0px 0px 10px;}

.ticketDays dl.sat{ background-color:#e1ebf8;}
.ticketDays dl.sun{ background-color:#f7d9d9;}

.ticketDays dl.sat dt{ color:#0064cb;}
.ticketDays dl.sun dt{ color:#cb0000;}


.ticketDays dl.last{border-width:1px 1px 1px 1px;}



.musicalContact{ clear:both; width:100%; margin-bottom:40px; border:solid 1px #000;}
.musicalContact h4{ font-size:130%; padding:10px 10px;}
.musicalContact dl{ width:100%; border-top:solid 1px #000;}
.musicalContact dl dt{ float:left; width:160px; margin-right:10px;padding:5px 0 5px 10px;}
.musicalContact dl dd{ float:left; min-width:200px;margin-right:20px;padding:5px 0 5px 0;}


table.musicalContact{}


table.musicalContact 			{
							width:100%;
							border-top:solid 0px #818181 ;
							border-left:solid 0px #818181 ;
							border-right:solid 0px #818181 ;
							border-collapse:collapse;
							border-spacing:0;
						
							empty-cells:show;
							
							margin-bottom:40px;
						}




table.musicalContact td 			{
							border-bottom:solid 0px #818181 ;
							border-right:solid 0px #818181 ;
							text-align: left;
							padding:5px;
							font-size:110%;
							vertical-align:top;
						
						}
						
						
						
						
.musicalSideMov{ margin-bottom:10px;}






.musicalQA{}

.musicalQA h4{ padding-top:20px; font-size:120%; font-weight:bold; margin-bottom:10px;}
.musicalQA h5{ padding-top:10px; font-size:100%; font-weight:bold; margin-bottom:5px;}

.musicalQA strong{font-weight:bold; }

.musicalQA p{ margin-bottom:1em;}

.musicalQA .red{ color:#c00 !important;}

.musicalQA  div.point{}
.musicalQA  div.point p{ padding-left:1em; text-indent:-1em;margin-bottom:0.5em;}


.musicalQA  ul.list{ list-style:disc; padding-left:20px; margin-bottom:20px;}
.musicalQA  ul.list li{ margin-bottom:0.5em;}



.graduation{ margin-bottom:40px; position:relative;}

.graduation .toMessageBtn{ width:171px; height:34px; position:absolute; top:352px; right:0;}
.graduation .toMessageBtn a{ display:block; height:34px; background:url(../../img/musical_un_nouveau_voyage/btn_message.png) no-repeat #e4007b;}
.graduation .toMessageBtn a:hover{ background-color:#f1008c;}