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

/*
	Site Name: New National Theatre, tokyo
	Description: common setting
	Version: 
	Author: 
*/

/*
===== CONTENTS ===========================================

	01. base layout
	02. common parts layout
	03. tools

==========================================================
*/

/* -------------------------------------------------------
 	01. base layout
------------------------------------------------------- */
#layoutWrapBackImage{
	background: url(../img/bg_content.jpg) repeat center top;
}
#layoutWrap {
	background: url(../img/bg_footer.jpg) no-repeat center bottom; 
	text-align: left;
}
#layoutWrapInner{
	background    : url(../img/bg_footer.jpg) no-repeat center bottom;
	padding-bottom: 0px;
	text-align    : center;
}
#layoutMainBavckImage{
	background: url(../img/bg_content.jpg) repeat center top;
	margin    : 0 auto;
	width     : 960px;
}
#layoutMain {
	background: url(../img/bg_footer.jpg) no-repeat center bottom;
	margin    : 0 auto;
	padding   : 10px 0 0;
	text-align: left;
	width     : 960px;
}





/*   header style   */
#layoutHeader {
	background: #002D28;
}
#layoutHeader .inner {
	background: #002D28;
	margin    : 0px auto;
	width     : 965px;
}

.ie6 #layoutHeader .inner,
.ie7 #layoutHeader .inner {
	width           : 975px;
}
#layoutHeader .sectionLogo {
	float  : left;
	padding: 10px 0 10px;
	width  : 610px;
}
#layoutHeader .sectionLogo .logo {
	float: left;
	width: 115px;
}
#layoutHeader .sectionLogo .programTitle {
	float  : left;
	padding: 0 20px 0 15px;
	width  : 185px;
}
#layoutHeader .sectionLogo .title{
	float      : left;
	font-size  : 73%;
	font-weight: normal;
	line-height: 1.5;
	padding    : 2px 0px 0px;
}
.ie #layoutHeader .sectionLogo .title{
	padding    : 4px 0px 0px;
}
.mac #layoutHeader .sectionLogo .title{
	font-size  : 83%;
	padding    : 0px 0px 0px;
}
#layoutHeader .sectionLogo .title a{
	color          : #ECECEC;
	text-decoration: none;
}
#layoutHeader .sectionLogo .title a:hover{
	color          : #ECECEC;
	text-decoration: none;
}
#layoutHeader .ticketBtn {
	float  : left;
	padding: 0 0 0 0px;
	width  : 188px;
}
.ie6 #layoutHeader .ticketBtn {
	position: relative;
	left    : -4px;
}





/*  header  social link*/
#layoutHeader .socialWrap {
	background      : url(../img/bg_header_social_left.jpg) no-repeat left bottom;
	background-color: #264C48;
	float           : right;
	width           : 280px;
}
#layoutHeader .socialWrap .inner{
	background      : url(../img/bg_header_social_right.jpg) no-repeat right bottom ;
	padding         : 7px 5px 7px 10px;
	width           : 265px;
}

#layoutHeader .socialWrap table{
	width: 260px;
}
#layoutHeader .socialWrap td{
	padding-left: 5px;
	text-align  : center;
}
.socialWrap .inner table .mixi a{
	display : block;
}



/*   gnavi style   */
#layoutGnavi {
	background: url(../img/bg_gnavi.jpg) repeat-x left top;
	clear     : both;
	height    : 83px;
}
#layoutGnavi .inner {
	background: url(../img/bg_gnavi.jpg) repeat-x left top;
	height    : 83px;
	margin    : 0 auto;
	width     : 960px;
}
.ie6 #layoutGnavi .inner,
.ie7 #layoutGnavi .inner {
	width           : 975px;
}
#layoutGnavi .sectionMenuBtn {
	float: left;
	width: 609px;
}
#layoutGnavi .sectionMenuBtn li {
	float: left;
}
#layoutGnavi .sectionMenuBtn li img {
	display: block;
}
#layoutGnavi .sectionOptionBtn {
	background: url(../img/bg_gnavi.jpg) repeat-x left top;
	float     : right;
	padding   : 11px 0 0 ;
	width     : 339px;
	height    : 58px;
}
#layoutGnavi .sectionOptionBtn li{
	float: left;
}
#layoutGnavi .sectionOptionBtn li.lastChild{
	float: right;
}






/*   common ticket info box style   */
.sectionTicketInfoWrap {
	background: url(../img/bg_ticket_box_top.jpg) no-repeat left top;
	clear     : both;
	margin    : 25px 0 0;
	padding   : 7px 0 0;
}
.sectionTicketInfoBottom {
	background: url(../img/bg_ticket_box_bottom.jpg) no-repeat left bottom;
	padding   : 0 0 7px;
}
.sectionTicketInfo {
	background: url(../img/bg_ticket_box_middle.jpg) repeat-y left top;
	width     : 960px;
}
.sectionTicketInfoInner{
	padding   : 13px 15px 10px 30px;
	width     : 916px;
}
.sectionTicketInfo .sectionTel {
	background: url(../img/icon_tel.jpg) no-repeat left top;
	float     : left;
	padding   : 0 0 0 40px;
	width     : 430px;
}
.mac .sectionTicketInfo .sectionTel {
	padding   : 0 0 0 0px;
	width     : 470px;
}
.mac .sectionTicketInfo .sectionTel .headlineTicketBox.iconTel{
	padding    : 4px 0 18px 40px;
}
.sectionTicketInfo .sectionTel p {
	line-height: 1;
	padding    : 0 0 10px;
	position   : relative;
	left       : -5px;
}
.sectionTicketInfo .sectionTel li {
	color       : #FFFFFF;
	line-height : 1.7;
	padding-left: 1em;
	position    : relative;
	left        : -3px;
	text-indent : -0.8em;
}
.sectionTicketInfo li .lowsonCode{
	padding-left: 7.3em;
	text-indent : -0.8em;
}
.mac .sectionTicketInfo .sectionTel li {
	padding-left: 1.3em;
	line-height : 1.5;
	text-indent : -1.3em;
}
.mac .sectionTicketInfo li .lowsonCode{
	padding-left: 9em;
}
.ie .sectionTicketInfo li .lowsonCode{
	padding-left: 7.4em;
}
.ie6 .sectionTicketInfo li .lowsonCode,
.ie7 .sectionTicketInfo li .lowsonCode,
.ie8 .sectionTicketInfo li .lowsonCode{
	padding-left: 7.3em;
}
.sectionTicketInfo .sectionWeb {
	background  : url(../img/icon_pc.jpg) no-repeat left top;
	float       : left;
	padding-left: 40px;
	width       : 376px;
}
.sectionTicketInfo .sectionWeb .toToherTicketSite{
	padding: 8px 0 0 ;
}
.sectionTicketInfo .sectionWeb .toToherTicketSite li{
	float  : left;
	margin : 0 0 3px;
}
.sectionTicketInfo .sectionWeb .toToherTicketSite li img{
	display: block;
}
.sectionTicketInfo .sectionWeb .toToherTicketSite li.rightSide{
	float: right;
}
.sectionTicketInfo .sectionWeb #rolloverToBoxoffice{
	padding: 5px 0 0;
}
.sectionGroup {	
	border-top: 1px solid #C1AD80;
	clear     : both;
	font-size : 103%;
	margin    : 10px 0 0;
	padding   : 12px 0px 7px 30px;
}
.mac .sectionGroup {
	font-size : 93%;
}
.sectionGroup strong {
	color        : #DCBE80;
	font-size    : 113%;
	font-weight  : bold;
	padding-right: 8px;
}
.sectionGroup .textRed {
	color: #FF8D8D;
}




/*  bottom text style */
.sectionBottomText-inner{
	color           : #FFF;
	margin          : 0 auto;
	padding         : 40px 0 45px;
	text-align      : center;
	width           : 960px;
}
.ie6 .sectionBottomText-inner,
.ie7 .sectionBottomText-inner{
	width      : 975px;
}
.sectionBottomText h2 {
	font-size  : 113%;
	font-weight: bold;
	line-height: 1.7;
}
.sectionBottomText p {
	border-top : solid 1px #576566;
	font-size  : 113%;
	font-weight: bold;
	margin     : 5px auto 0;
	padding    : 8px 0 0;
}










/*  footer access map style   */
.sectionFooterLinksWrap {
	background      : url(../img/bg_footer_top_border.gif) repeat-x left top;
	background-color: #000;
	border-top      : solid 1px #1E0F00;
	color           : #FFFFFF;
	width           : 100%;
}
.sectionFooterLinks {
	background      : url(../img/bg_footer_top_border.gif) repeat-x left top;
	padding         : 22px 0 15px;
	margin          : 0 auto;
	background-color: #000;
	width           : 960px;
}
.ie6 .sectionFooterLinks,
.ie7 .sectionFooterLinks {
	width: 975px;
}
.sectionFooterLinks .inner {
	background-color: #000;
	margin          : 0 auto;
	text-align      : left;
	width           : 960px;
}

.ie6 .sectionFooterLinks .inner,
.ie7 .sectionFooterLinks .inner{
	width: 975px;
}
.sectionAccessMapWrap {
	background-color: #1a1a1a;
	border          : solid 1px #323232;
	float           : left;
	margin          : 3px 0 0;
	padding         : 15px 15px 18px; 
	width           : 376px;
}
.sectionAccessMap .mapImage {
	float: left;
	width: 163px;
}
.sectionAccessMap .accessDetail {
	float       : left;
	font-size   : 83%;
	padding-left: 15px;
	width       : 198px;
}
.ie6 .sectionAccessMap .accessDetail {
	padding-left: 10px;
}
.sectionAccessMap .accessDetail h3 {
	padding: 0px 0 8px;
}
.sectionAccessMap .accessDetail p {
	padding: 0 0 8px 2px;
}
.mac .sectionAccessMap .accessDetail p,
.ie .sectionAccessMap .accessDetail p,
.chrome .sectionAccessMap .accessDetail p {
	padding: 4px 0 8px 2px;
}





/*  footer links style   */
.sectionContentList {
	float      : left;
	font-size  : 93%;
	line-height: 2.2;
	padding    : 0 0 0 20px;
	width      : 175px;
}
.mac .sectionContentList {
	font-size  : 83%;
}
.sectionDancertList {
	float: right;
	width: 350px;
}
.sectionDancertList h3 {
	border-bottom: 1px solid #212121;
	font-size    : 103%;
	font-weight  : bold;
	margin       : 0 0 10px;
	padding      : 0 0 4px 2px;
}
.sectionDancertList ul {
	float      : left;
	font-size  : 93%;
	line-height: 1.8;
}
.mac .sectionDancertList ul {
	font-size  : 83%;
}
.sectionDancertList ul li{
	padding: 0 28px 0 0px;
}
.mac .sectionDancertList ul.lastChild li,
.mac.safari .sectionDancertList ul.lastChild li,
.sectionDancertList .lastChild li{
	padding: 0 0px 0 0px;
}

.sectionDancertList .pagetop {
	clear  : both;
	padding: 20px 0 10px;
}
.ie7 .sectionDancertList .pagetop {
	clear  : both;
	padding: 7px 0 0px;
}
.ie6 .sectionDancertList .pagetop {
	clear  : both;
	padding: 15px 0 00px;
}
.mac .sectionDancertList .pagetop {
	padding: 20px 0 0px;
}




/*  footer  social link*/
#layoutMain .socialWrap {
	background-color: #171717;
	border          : solid 1px #353535;
	border-bottom   : none;
	float           : right;
	width           : 280px;
}
#layoutMain .socialWrap .inner{
	padding         : 7px 0px 7px 15px;
	width           : 265px;
}
#layoutMain .socialWrap table{
	width: 265px;
}
#layoutMain .socialWrap td{
	padding-left: 0px;
	text-align  : center;
}



/*  footer  campanylink / copyright */
#layoutFooter {
	background      : url(../img/bg_footer_border.gif) repeat-x left top;
	background-color: #000000;
	
}
#layoutFooterInner {
	background      : url(../img/bg_footer_border.gif) repeat-x left top;
	background-color: #000000;
	margin          : 0 auto;
	padding         : 10px 0 5px;
	text-align      : left;
	width           : 960px;
}
.ie6 #layoutFooterInner,
.ie7 #layoutFooterInner {
	width           : 975px;
}
#layoutFooter .company dd {
	float : left;
	padding: 2px 7px 0 0;
}
#layoutFooter .company .lastChild {
	padding-right: 0px;
}
#layoutFooter .company {
	float: left;
	width: 219px;
}
#layoutFooter address {
	color     : #9A9A9A;
	float     : left;
	font-size : 73%;
	font-style: normal;
	padding   : 12px 0 0 20px;
}
.mac #layoutFooter address {
	font-size : 63%;
}
#layoutFooter .sectionFooterLinkd {
	color     : #9A9A9A;
	float     : right;
	font-size : 83%;
	padding   : 5px 0 0;
	text-align: right;
}
.ie8 #layoutFooter .sectionFooterLinkd  {
	font-size : 93%;
}
#layoutFooter .sectionFooterLinkd li {
	float: right;
}
#layoutFooter .sectionFooterLinkd .lastChild {
	padding: 0 5px 0 15px;
}
#layoutFooter .sectionFooterLinkd p {
	clear   : both;
}
.ie #layoutFooter .sectionFooterLinkd p {
	padding   : 5px 0 0;
}




/*  recommend banner area */
.sectionRecommend {
	padding-top: 25px;
}
.sectionRecommend table {
	background-color: #EDF6FF;
	border-collapse : collapse;
	margin          : 0 auto;
	width           : 958px;
}
.sectionRecommend th {
	border: 1px solid #8DC1EF;
}
.sectionRecommend td {
	background-color: #EDF6FF;
	border          : 1px solid #8DC1EF;
	padding         : 10px; 
}
.sectionRecommend dl {
	margin: 0 auto;
	width : 440px;
}
.sectionRecommend img{
	display: block;
}
.sectionRecommend dd  {
	background-color: #FFF;
	border          : solid 1px #C2E1FF;
	border-top      : none;
	line-height     : 1.5;
	padding         : 3px 0 3px 15px;
}
.sectionRecommend strong {
	display    : block;
	font-size  : 113%;
	font-weight: bold;
}























/* -------------------------------------------------------
 	02. common parts layout
------------------------------------------------------- */

/* pagetop layout */
.pagetop {
	clear     : both;
	font-size : 83%;
	padding   : 15px 0px 0 0;
	text-align: right;
}
#layoutWrap .pagetop a {
	background     : url(../img/icon_to_pagetop.jpg) no-repeat left 1px;
	color          : #FFFFFF;
	padding-left   : 22px;
	text-decoration: underline;
}
#layoutWrap .pagetop a:hover,
#layoutWrap .pagetop a:active,
#layoutWrap .pagetop a:focus {
	background     : url(../img/icon_to_pagetop.jpg) no-repeat left -1px;
	color          : #FFFFFF;
	text-decoration: none;
}









/*  headline syle  */
.headlinePageTitle {
	padding-bottom: 30px;
}
.headlineSubTitle{
	margin : 0 auto;
	padding: 0 0 15px;
	width  : 920px;
}
.headlineTicketBox {
	color      : #DDBF80;
	font-size  : 123%;
	font-weight: bold;
	line-height: 1.4;
	padding    : 4px 0 13px;
}
.headlineTicket{
	background : url(../img/bg_ticket_01.jpg) no-repeat left 6px;
	color      : #D7B980;
	font-size  : 123%;
	font-weight: bold;
	line-height: 1.2;
	padding    : 0 0 20px 32px;
} 
.headlineStyleSub {
	background: url(../../common/img/bg_headline_sub_cast.jpg) no-repeat left bottom;
	color     : #fff;
	height    : 34px;
	margin    : 0 0 20px;
	padding   : 3px 0 0 32px;
}
.mac .headlineStyleSub {
	height    : 32px;
	padding   : 5px 0 0 32px;
}



/*  icon style  */
.iconArrow {
	background  : url(../img/icon_arrow_gray.jpg) no-repeat left 2px;
	padding-left: 16px;
}
.iconArrow:hover {
	background  : url(../img/icon_arrow_gray.jpg) no-repeat 2px 2px;
}



/* noscript style*/
noscript p {
	background-color: #FFE3E4;
	border          : 2px solid #C00;
	color           : #C00;
	font-size       : 113%;
	font-weight     : bold;
	margin          : 15px auto;
	padding         : 15px;
	text-align      : center;
	width           : 890px;
}


/* -------------------------------------------------------
 	03. tools
------------------------------------------------------- */

.indent-text {
	display     : block;
	text-indent : -1em;
	padding-left: -1em;
}


.mt5  { margin-top:  5px;}
.mt6  { margin-top:  6px;}
.mt7  { margin-top:  7px;}
.mt10 { margin-top: 10px;}
.mt11 { margin-top: 11px;}
.mt12 { margin-top: 12px;}
.mt15 { margin-top: 15px;}
.mt17 { margin-top: 17px;}
.mt20 { margin-top: 20px;}
.mt25 { margin-top: 25px;}
.mt30 { margin-top: 30px;}

.mb5  { margin-bottom:  5px;}
.mb6  { margin-bottom:  6px;}
.mb10 { margin-bottom: 10px;}
.mb15 { margin-bottom: 15px;}
.mb20 { margin-bottom: 20px;}
.mb25 { margin-bottom: 25px;}
.mb30 { margin-bottom: 30px;}
.mb35 { margin-bottom: 35px;}
.mb40 { margin-bottom: 40px;}
.mb45 { margin-bottom: 45px;}
.mb50 { margin-bottom: 50px;}

.pt5  { padding-top:  5px;}
.pt10 { padding-top: 10px;}
.pt14 { padding-top: 14px;}
.pt15 { padding-top: 15px;}
.pt20 { padding-top: 20px;}
.pt25 { padding-top: 25px;}
.pt30 { padding-top: 30px;}

.pb5  { padding-bottom:  5px;}
.pb10 { padding-bottom: 10px;}
.pb14 { padding-bottom: 14px;}
.pb15 { padding-bottom: 15px;}
.pb20 { padding-bottom: 20px;}
.pb25 { padding-bottom: 25px;}
.pb30 { padding-bottom: 30px;}

.pl5  { padding-left:  5px;}
.pl10 { padding-left: 10px;}
.pl15 { padding-left: 15px;}
.pl20 { padding-left: 20px;}
.pl25 { padding-left: 25px;}
.pl30 { padding-left: 30px;}

.align-center {text-align: center;}
.align-left   {text-align: left;}
.align-right  {text-align: right;}

.floatLeft  {float: left;}
.floatRight {float: right;}

.displayNone{display: none;}
.imgover{
	border: none;
}
.textSeparate{
	display    : block;
	padding-top: 1em;
}