@charset "UTF-8";
@import url(base.css);
.fit { width: 100%; height: auto; }

.ticketBtn { text-align: center; margin-top: 5vw; }
.ticketBtn a { display: inline-block; background: -moz-linear-gradient(90deg, #c3a145 0%, #f6e18e 74%, #e2ca76 100%); background: -webkit-linear-gradient(90deg, #c3a145 0%, #f6e18e 74%, #e2ca76 100%); background: -ms-linear-gradient(90deg, #c3a145 0%, #f6e18e 74%, #e2ca76 100%); box-shadow: 1.721px 2.457px 5px 0px rgba(0, 0, 0, 0.004), inset 0px 0px 3px 0px rgba(229, 215, 171, 0.004); color: #333; border-radius: 1vw; padding: .5vw; font-size: 4vw; font-weight: 700; }
.ticketBtn a span { display: block; border: 1px solid #FFF; border-radius: 1vw; padding: 1vw 5vw; }

.online .ticketBtn a { background: -moz-linear-gradient(90deg, #b3bead 0%, #dfe5d7 74%, #fcfff4 100%); background: -webkit-linear-gradient(90deg, #b3bead 0%, #dfe5d7 74%, #fcfff4 100%); background: -ms-linear-gradient(90deg, #b3bead 0%, #dfe5d7 74%, #fcfff4 100%); }
.online .ticketBtn a span { border: 1px solid #c3a145; }

.attBtn { margin: 40px auto; text-align: center; }
.attBtn a { padding: 5px 10px; border: 1px solid #F2F2F2; }

/*-------------------------------------------------
	++ BASE
-------------------------------------------------*/
body { background: #000 url("../img/bg.jpg") repeat center top; background-size: 100%; font-family: 'Noto Serif JP', serif; }

.pc { display: none; }

#container { margin: 0 auto; text-align: center; position: relative; min-width: 100%; overflow-x: hidden; }

#contents { background: url("../img/cbg.png") repeat-y center top; background-size: 80% auto; background-blend-mode: screen; padding-bottom: 50px; }

.cInner { display: block; width: 100%; margin: 0 auto; text-align: center; position: relative; }

/*-------------------------------------------------
	++ HEAD
-------------------------------------------------*/
#header { width: 100%; height: 10vw; background-color: #FFF; position: relative; z-index: 10; }
#header h1 { margin: 0 auto; text-align: center; width: 60%; max-height: 10vw; }
#header h1 img { display: block; width: auto; max-height: 10vw; margin: 0 auto; text-align: center; }
#header .link { position: absolute; top: 2.2vw; right: 2.2vw; background-color: #9F291A; color: #FFF; padding: 0.5vw; border-radius: 3px; line-height: 100%; font-family: 'Arial','游ゴシック体','YuGothic','游ゴシック','Yu Gothic','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif; }
#header .link span, #header .link a { height: 5vw !important; padding: 0 1vw; }
#header .link span img { display: inline-block; height: 3vw; width: auto; }
#header .link a { display: none; color: #FFF; padding: 0 2vw; }

/*-------------------------------------------------
	++ MAIN
-------------------------------------------------*/
#main { background: #000 url("../img/main_bg_sp.jpg") no-repeat center top; background-size: 100% auto; position: relative; padding-bottom: 23vw; }
#main:after { content: ""; width: 100%; height: 23vw; background: linear-gradient(rgba(0, 0, 0, 0) 0%, black 100%); position: absolute; bottom: 0; left: 0; }
#main .title { padding-top: 18vw; }
#main .title img { display: block; margin: 0 auto; text-align: center; width: 106%; margin-left: -3%; }
#main .cache { padding: 2vw 20vw; }
#main .mainDate { padding: 0 5vw; }
#main .mainDate .mainDateInner { padding: 5vw 5vw 0 5vw; display: block; background: url(../img/panel_upper.png) center top no-repeat; background-size: 100% auto; text-align: center; position: relative; }
#main .mainDate:after { content: ""; background: url(../img/panel_lower.png) center top no-repeat; background-size: 90% auto; width: 100%; height: 6vw; position: absolute; bottom: -6vw; left: 0; }
#main .mainDate .date { font-size: 4vw; }
#main .mainDate .date span { font-size: 6vw; }
#main .mainDate .place { font-size: 4vw; }
#main .mainDate .ticketBtn { margin-top: 3vw; }

#menu { width: 100%; position: fixed; top: 0; left: 0; z-index: 10; }
#menu .menuBtn { display: block; background: url(../img/burger.png) center top no-repeat; background-size: 12vw; width: 12vw; height: 12vw; position: fixed; top: 16vw; right: 2vw; }
#menu .menuBtn.current { background: url(../img/burger_close.png) center top no-repeat; background-size: 12vw; }
#menu ul { display: none; border-top: 1px solid #999; padding-top: 30vw; background-color: rgba(0, 0, 0, 0.9); }
#menu ul li { width: 100%; border-bottom: 1px solid #999; }
#menu ul li:nth-of-type(1) { border-top: 1px solid #999; }
#menu ul li img { display: block; margin: 0 auto; text-align: center; width: auto; height: 8vw; }
#menu ul li a, #menu ul li span { display: block; font-family: "Arial"; color: #FFF; padding: 3vw 10vw; line-height: 1; text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); }
#menu ul li span img { opacity: .6; }

/*-------------------------------------------------
	++ CONTENT
-------------------------------------------------*/
.section { position: relative; padding: 15vw 0; }
.section .cInner { padding: 0 5vw; }
.section .secHead { margin-bottom: 8vw; }
.section .secHead h2 { position: relative; }
.section .secHead h2 img { width: auto; height: 10vw; }
.section .secHead h2:after { content: ""; width: 100%; height: 2vw; background: url("../img/titleline.png") center top no-repeat; background-size: auto 2vw; position: absolute; bottom: -2vw; left: 0; }

#news { padding-top: 16vw; }
#news:before { content: ""; width: 100%; height: 23vw; background: linear-gradient(black 0%, rgba(0, 0, 0, 0) 100%); position: absolute; top: 0; left: 0; }
#news:after { content: ""; display: block; background: url("../img/syb01.png") center top no-repeat; background-size: 100% auto; width: 30vw; height: 39vw; position: absolute; bottom: -32vw; left: 0; }
#news .entryList { text-align: left; }
#news .entryList ul li { margin-bottom: 2vw; font-size: 3.8vw; }
#news .entryList ul li .date { margin-right: 2vw; }
#news .link { margin-top: 3vw; text-align: right; }
#news .link a { font-size: 3.8vw; background: url(../img/arrow.png) right center no-repeat; background-size: 4vw auto; padding-right: 6vw; }

#twitter { padding-bottom: 30vw; }
#twitter:after { content: ""; display: block; background: url("../img/syb02.png") center top no-repeat; background-size: 100% auto; width: 60vw; height: 56vw; position: absolute; bottom: -5vw; right: 0; }

#intro { padding-top: 15vw; }
#intro .text { font-size: 4vw; line-height: 172%; }
#intro .text .big { font-size: 6vw; }
#intro .text .taC { display: block; text-align: center; }
#intro .text .taR { display: block; text-align: right; }
#intro:after { content: ""; display: block; background: url("../img/syb03.png") center top no-repeat; background-size: 100% auto; width: 30vw; height: 40vw; position: absolute; bottom: -30vw; left: 0; }

#story .text { font-size: 4vw; line-height: 214%; }
#story .text .quoted { display: block; font-size: 4.6vw; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; padding: 3vw 0; line-height: 170%; margin-bottom: 5vw; }
#story .text .quoted .name { display: block; font-size: 4vw; }

#cast:before { content: ""; display: block; background: url("../img/syb04.png") center top no-repeat; background-size: 100% auto; width: 34vw; height: 40vw; position: absolute; top: 19vw; right: 0; }
#cast:after { content: ""; display: block; background: url("../img/syb05.png") center top no-repeat; background-size: 100% auto; width: 30vw; height: 37vw; position: absolute; bottom: -33vw; left: 0; }
#cast .secHead { margin-bottom: 18vw; }

#music .secHead { margin-bottom: 35px; }
#music:after { content: ""; display: block; background: url("../img/syb06.png") center top no-repeat; background-size: 100% auto; width: 42vw; height: 53vw; position: absolute; bottom: -20vw; right: -13vw; }

.photoPnl { text-align: center; }
.photoPnl ul { font-size: 0; line-height: 0; letter-spacing: -.4em; }
.photoPnl ul li { display: inline-block; width: 50%; padding: 0 5vw; margin-bottom: 5vw; letter-spacing: normal; font-size: 4vw; vertical-align: top; }
.photoPnl ul li a { display: block; }
.photoPnl ul li img { display: block; }
.photoPnl ul li .name { display: block; position: relative; background: rgba(21, 21, 21, 0.75); width: 100%; margin-top: 3vw; padding: 2vw 2vw; line-height: 170%; }
.photoPnl ul li .name h2 { font-size: 4vw; }
.photoPnl ul li .name .pl { font-size: 3.6vw; line-height: 160%; }
.photoPnl ul li .name a { font-size: 2.8vw; }
.photoPnl ul li .name a:after { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: .8vw 0 .8vw 1.4vw; border-color: transparent transparent transparent #72541c; margin-left: .8vw; }
.photoPnl ul li .name:before { content: ""; display: block; background: url("../img/cast_corner.png") no-repeat center top; background-size: 5vw 5vw; transform: scale(-1, -1); width: 5vw; height: 5vw; position: absolute; top: 0; right: 0; }
.photoPnl ul li .name:after { content: ""; display: block; background: url("../img/cast_corner.png") no-repeat center top; background-size: 5vw 5vw; width: 5vw; height: 5vw; position: absolute; bottom: 0; left: 0; }
.photoPnl.theme ul li { width: 100%; }
.photoPnl.theme ul li .pBox img { width: 100%; height: auto; }
.photoPnl.theme ul li .comment { line-height: 180%; letter-spacing: normal; text-align: left; margin-top: 5vw; }
.photoPnl.theme ul li .comment h4 { margin-bottom: 3vw; }

#staff .staffList { margin: 5vw auto 0 auto; text-align: center; }
#staff .staffList ul li { font-size: 4vw; }
#staff .staffList ul.sublist { margin-top: 5vw; }
#staff .staffList ul.sublist li { font-size: 3.6vw; padding: 2vw 0; }

#movie .youtube { margin-top: 10vw; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
#movie .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#ticket:after { content: ""; display: block; background: url("../img/syb07.png") center top no-repeat; background-size: 100% auto; width: 42vw; height: 30vw; position: absolute; top: 0; left: 0; }
#ticket .ticketWrap { margin-bottom: 7vw; text-align: left;         /*
		table {
			width:100%;
			border:1px solid #424116;
			margin-bottom:5vw;
			th,td {
				border:1px solid #424116;
				padding:2vw;
			}
			th { display: block;
				background-color:#424116;
				width:100%;
				padding:1vw 3vw; text-align: center;
			}
			td { display: block;
				width:100%;
				padding:1vw 3vw; text-align: center;
			}
		} */ }
#ticket .ticketWrap h2 { text-align: center; margin-bottom: 7vw; font-size: 4.6vw; line-height: 180%; }
#ticket .ticketWrap .infoText { font-size: 3.6vw; }
#ticket .ticketWrap .infoText a { color: #FFF; text-decoration: underline; }
#ticket .ticketWrap .infoText a:hover { text-decoration: none; }
#ticket .ticketWrap .infoText span { font-size: 85%; }
#ticket .ticketWrap .infoText #seat { padding: 3vw; text-align: center; }
#ticket .ticketWrap .infoText #seat a { display: block; }
#ticket .ticketWrap .infoText #seat a img { display: block; margin: 0 auto; text-align: center; }
#ticket .ticketWrap .infoText #seat a.btn { font-size: 93%; text-decoration: none; padding: 5px 15px; display: inline-block; margin: 3vw auto; text-align: center; background: -webkit-linear-gradient(#967645 0%, #634c17 100%); background: -o-linear-gradient(#967645 0%, #634c17 100%); background: linear-gradient(#967645 0%, #634c17 100%); }
#ticket .ticketWrap.online { text-align: center; }
#ticket .ticketWrap.online h2 { color: #967645; font-size: 6vw; margin-bottom: 3vw; }
#ticket .ticketWrap.online h3 { margin-bottom: 3vw; font-size: 4vw; }
#ticket .ticketWrap.online p { font-size: 3.6vw; }
#ticket .ticketWrap.online p a { text-decoration: underline; }
#ticket .ticketWrap.online .ticketBtn { margin-top: 5vw; }
#ticket .mapAtt { font-size: 3.2vw; }
#ticket .mapAtt a { text-decoration: underline; }
#ticket .gmap { margin-top: 5vw; }
#ticket iframe { width: 100%; height: 70vw; margin: 0 auto; text-align: center; }

#footer { background: #000; font-size: 3vw; }
#footer .cInner { padding: 10vw; }
#footer .copyright { padding: 10px 0; font-size: 2.6vw; }

/*-------------------------------------------------
	++ MODAL
-------------------------------------------------*/
.modalInner { padding: 5vw; text-align: left; font-size: 3.4vw; }
.modalInner h3 { text-align: center; margin-bottom: 5vw; font-size: 4vw; }
.modalInner strong { display: block; text-align: center; margin-bottom: 2vw; }
.modalInner .closeBtn { margin: 5vw auto 0 auto; text-align: center; }

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#pageTop { position: fixed; bottom: 5vw; right: 5vw; width: 13vw; }
#pageTop img { display: block; width: 100%; height: auto; }

#spCover { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 9; }