@charset "UTF-8";
@import url(base.css);
.ticketBtn { text-align: center; }
.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: 5px; padding: 2px; font-size: 20px; font-weight: 700; }
.ticketBtn a span { display: block; border: 1px solid #FFF; border-radius: 5px; padding: 10px 30px; }
.ticketBtn a:hover { opacity: 1; filter: brightness(120%); -moz-brightness: 120%; brightness: 120%; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }

.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 15px; border: 1px solid #F2F2F2; font-size: 15px; }

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

.sp { display: none; }

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

#contents { background: url("../img/cbg.png") repeat-y center top; background-blend-mode: screen; }

.cInner { display: block; clear: both; width: 1000px; margin: 0 auto; text-align: center; position: relative; letter-spacing: 1px; }

/*-------------------------------------------------
	++ HEAD
-------------------------------------------------*/
#header { width: 100%; height: 60px; background-color: #FFF; }
#header h1 { float: left; }
#header h1 img { display: block; }
#header .link { float: right; padding: 15px; margin-top: 5px; font-family: 'Arial','游ゴシック体','YuGothic','游ゴシック','Yu Gothic','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif; }
#header .link span { display: none; }
#header .link a { background-color: #9F291A; color: #FFF; font-size: 16px; padding: 5px 10px; }
#header .goods { float: right; width: 170px; border: 1px solid #CCC; margin-top: 10px;
  margin-right:10px; }
#header .goods img { display: block; width: 100%; height: auto; }

/*-------------------------------------------------
	++ MAIN
-------------------------------------------------*/
#main { background: #000 url("../img/main_bg.jpg") no-repeat center top; position: relative; }
#main:after { content: ""; width: 100%; height: 100px; background: linear-gradient(rgba(0, 0, 0, 0) 0%, black 100%); position: absolute; bottom: 0; left: 0; }
#main .cInner { min-height: 830px; }
#main .title { padding-top: 10px; }
#main .title img { display: block; margin: 0 auto; text-align: center; }
#main .cache { width: 362px; position: absolute; top: 370px; left: 50%; margin-left: -181px; }
#main .mainDate { display: block; background: url(../img/panel_upper.png) center top no-repeat; width: 566px; margin: 110px auto 0px auto; text-align: center; padding: 30px 30px 10px 30px; position: relative; }
#main .mainDate:after { content: ""; background: url("../img/panel_lower.png") center bottom no-repeat; width: 566px; height: 39px; position: absolute; bottom: -39px; left: 0; }
#main .mainDate .date { font-size: 26px; }
#main .mainDate .date span { font-size: 38px; }
#main .mainDate .place { font-size: 26px; }
#main .mainDate .ticketBtn { margin-top: 20px; }

#menu { padding: 10px 0; z-index: 9998; width: 100%; height: 63px; position: absolute; top: 860px; left: 0; }
#menu ul { display: inline-block; position: relative; font-size: 0; line-height: 0; }
#menu ul li { display: inline-block; position: relative; padding: 0 10px; }
#menu ul li.sp { display: none; }
#menu ul li img { display: block; width: auto; height: 32px; }
#menu ul li a:hover img { opacity: 1; filter: brightness(120%); -moz-brightness: 120%; brightness: 120%; }
#menu ul li span img { opacity: .5; }
#menu.move { background: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; }

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

#news { padding-top: 190px; }
#news:before { content: ""; width: 100%; height: 100px; 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; width: 265px; height: 327px; position: absolute; bottom: -130px; left: 50%; margin-left: -600px; }
#news .entryList { text-align: left; padding: 0 50px; }
#news .entryList ul li { padding: 10px 0; }
#news .entryList ul li .date { margin-right: 15px; }
#news .link { margin-top: 15px; text-align: right; }
#news .link a { background: url(../img/arrow.png) right center no-repeat; padding-right: 40px; }

#twitter:before { content: ""; display: block; background: url("../img/syb02.png") center top no-repeat; width: 613px; height: 544px; position: absolute; top: 60px; left: 50%; margin-left: 110px; }

#intro .text { font-size: 20px; line-height: 205%; }
#intro .text .big { font-size: 30px; }
#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; width: 166px; height: 211px; position: absolute; bottom: -120px; left: 50%; margin-left: -600px; }

#story .secHead { margin-bottom: 50px; }
#story .text { font-size: 20px; line-height: 205%; }
#story .text .quoted { display: inline-block; font-size: 30px; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; padding: 22px 0; line-height: 166%; margin-bottom: 40px; }
#story .text .quoted .name { display: block; font-size: 24px; }

#cast:before { content: ""; display: block; background: url("../img/syb04.png") center top no-repeat; width: 258px; height: 290px; position: absolute; top: 55px; left: 50%; margin-left: 435px; }
#cast:after { content: ""; display: block; background: url("../img/syb05.png") center top no-repeat; width: 202px; height: 239px; position: absolute; bottom: -140px; left: 50%; margin-left: -525px; }
#cast .secHead { margin-bottom: 35px; }

#music .secHead { margin-bottom: 35px; }
#music:after { content: ""; display: block; background: url("../img/syb06.png") center top no-repeat; width: 262px; height: 444px; position: absolute; bottom: -220px; left: 50%; margin-left: 375px; }

.photoPnl { text-align: center; }
.photoPnl ul { font-size: 0; line-height: 0; letter-spacing: -.4em; }
.photoPnl ul li { display: inline-block; letter-spacing: normal; vertical-align: top; width: 180px; margin: 0 30px 50px 30px; font-size: 14px; }
.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: 15px; padding: 20px 10px; line-height: 170%; }
.photoPnl ul li .name h2 { font-size: 20px; }
.photoPnl ul li .name a { font-size: 13px; }
.photoPnl ul li .name a:after { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #72541c; margin-left: 3px; }
.photoPnl ul li .name:before { content: ""; display: block; background: url("../img/cast_corner.png") no-repeat center top; background-size: 25px 25px; transform: scale(-1, -1); width: 25px; height: 25px; 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: 25px 25px; width: 25px; height: 25px; position: absolute; bottom: 0; left: 0; }
.photoPnl.theme ul li { width: 70%; }
.photoPnl.theme ul li .pBox { width: 40%; float: left; }
.photoPnl.theme ul li .pBox img { width: 100%; height: auto; }
.photoPnl.theme ul li .comment { float: left; width: 60%; padding-top: 40px; line-height: 180%; letter-spacing: normal; padding-left: 15px; text-align: left; }
.photoPnl.theme ul li .comment h4 { margin-bottom: 10px; }

#staff .staffList { width: 430px; margin: 30px auto 0 auto; text-align: center; }
#staff .staffList ul li { font-size: 24px; }
#staff .staffList ul.sublist { margin-top: 40px; }
#staff .staffList ul.sublist li { font-size: 16px; padding: 8px 0; }

#movie .youtube { margin-top: 55px; }

#ticket:after { content: ""; display: block; background: url("../img/syb07.png") center top no-repeat; width: 337px; height: 215px; position: absolute; top: 65px; left: 50%; margin-left: -690px; }
#ticket .ticketWrap { margin-bottom: 40px; text-align: left; padding: 0 50px; }
#ticket .ticketWrap h2 { text-align: center; margin: 20px auto; font-size: 24px; line-height: 180%; }
#ticket .ticketWrap .infoText { position: relative; margin-bottom: 30px; }
#ticket .ticketWrap .infoText a { color: #FFF; text-decoration: underline; }
#ticket .ticketWrap .infoText a:hover { text-decoration: none; }
#ticket .ticketWrap .infoText span { font-size: 14px; }
#ticket .ticketWrap .infoText #seat { position: absolute; top: 110px; right: 0; width: 180px; }
#ticket .ticketWrap .infoText #seat a { outline: none; }
#ticket .ticketWrap .infoText #seat a.btn { font-size: 14px; text-decoration: none; padding: 5px 15px; display: block; 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; }
#ticket .ticketWrap.online h3 { margin-bottom: 15px; }
#ticket .ticketWrap.online p a { text-decoration: underline; }
#ticket .ticketWrap.online .ticketBtn { margin-top: 30px; }
#ticket .gmap { margin-top: 15px; }
#ticket .mapAtt { margin-top: 50px; font-size: 14px; }
#ticket .mapAtt a { text-decoration: underline; }

#footer { background: #000; font-size: 14px; }
#footer .cInner { padding: 50px 0; }
#footer .copyright { padding: 10px 0; font-size: 12px; }

/*-------------------------------------------------
	++ MODAL
-------------------------------------------------*/
.modalInner { padding: 30px; text-align: left; }
.modalInner h3 { text-align: center; margin-bottom: 30px; }
.modalInner strong { display: block; text-align: center; margin-bottom: 15px; }
.modalInner .closeBtn { margin: 30px auto 0 auto; text-align: center; }

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#spCover { display: none; }

#pageTop { position: fixed; bottom: 40px; right: 40px; }