@charset "UTF-8";
@import url(base.css);
/*-------------------------------------------------
	++ BASE
-------------------------------------------------*/
body { font-family: 'Noto Serif JP', serif; font-weight: 500; background: #000; color: #FFF; }

#container { margin: 0 auto; text-align: center; position: relative; }

#contents { position: relative; }

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

.ticketBtn { text-align: center; }
.ticketBtn a { display: inline-block; background-image: linear-gradient(60deg, #6e4a0d 0%, #926b2a 50%, #6e4a0d 100%); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); color: #FFF !important; padding: 10px 30px; border-radius: 5px; text-decoration: none !important; }
@media screen and (min-width: 760px) { .ticketBtn a { min-width: 300px; } }
.ticketBtn a.red { background: #a92b2b; }

.btn { display: inline-block; background-image: linear-gradient(60deg, #6e4a0d 0%, #926b2a 50%, #6e4a0d 100%); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); color: #FFF !important; padding: 10px 40px; border-radius: 5px; text-decoration: none !important; position: relative; cursor: pointer; }
@media screen and (min-width: 760px) { .btn { min-width: 300px; } }
.btn.red { background: #a92b2b; }
.btn.plus:before, .btn.plus:after { content: ""; width: 16px; height: 2px; background-color: #FFF; position: absolute; top: 50%; right: 10px; transition: all 0.3s ease-in; }
.btn.plus:after { transform: rotate(90deg); }
.btn.plus.current:before { transform: rotate(180deg); }
.btn.plus.current:after { transform: rotate(0deg); }

@media screen and (min-width: 760px) { .sp { display: none !important; }
  .pc { display: block; }
  body { font-size: 18px; }
  #container { min-width: 1100px; overflow-x: hidden; }
  .cInner { width: 1000px; } }
@media screen and (max-width: 759px) { .fit { width: 100%; height: auto; }
  .pc { display: none !important; }
  .sp { display: block; }
  body { font-size: 3.2vw; background-size: 140% auto; }
  #container { width: 100%; }
  #contents:after { height: 15vw; }
  .cInner { width: 100%; padding: 12vw 5vw; } }
/*-------------------------------------------------
	++ HEAD
-------------------------------------------------*/
#header { width: 100%; height: 60px; background-color: #FFF; }
#header .rhLogo { float: left; }
#header .rhLogo 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; }

@media screen and (max-width: 759px) { #header { width: 100%; height: 10vw; background-color: #FFF; position: relative; z-index: 10; }
  #header .rhLogo { margin: 0 auto; text-align: center; width: 60%; max-height: 10vw; }
  #header .rhLogo 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; float: none; margin-top: 0; 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 { display: inline-block; }
  #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.jpg) center bottom no-repeat; background-size: 1500px auto; min-height: 780px; position: relative; }
#main .cInner { padding-top: 160px; z-index: 9998; }
#main .mainDate { background-image: linear-gradient(90deg, rgba(34, 7, 11, 0.5) 0%, rgba(127, 42, 65, 0.5) 50%, rgba(34, 7, 11, 0.5) 100%); display: block; position: relative; width: 670px; margin: 20px auto 0 auto; text-align: center; padding: 20px; }
#main .mainDate .date { font-size: 26px; }
#main .mainDate .date span { font-size: 38px; }
#main .mainDate .place { font-size: 26px; margin: 10px 0; }
#main .logo5th { position: absolute; top: 20px; left: 20px; opacity: .5; }

@media screen and (max-width: 759px) { #main { background: #000 url(../img/main_sp.jpg) center bottom no-repeat; background-size: 100% auto; min-height: 160vw; }
  #main .cInner { z-index: 9998; }
  #main .mainDate { width: 100%; margin: 20vw auto 0 auto; padding: 2vw; }
  #main .mainDate .mainDateInner { padding: 2vw; }
  #main .mainDate .date { font-size: 4.4vw; }
  #main .mainDate .date span { font-size: 5.6vw; }
  #main .mainDate .place { font-size: 5.6vw; margin: 2vw 0; }
  #main .logo5th { width: 20%; top: 3vw; left: 3vw; } }
/*-------------------------------------------------
	++ MENU
-------------------------------------------------*/
@media screen and (min-width: 760px) { .menuWrap { min-height: 65px; } }
#menu { padding: 10px 0; z-index: 9999; position: relative; }
#menu ul { display: flex; justify-content: center; align-items: center; position: relative; }
#menu ul li { padding: 0 10px; font-size: 30px; }
#menu ul li img { width: auto; height: 52px; vertical-align: top; }
#menu ul li a { display: block; }
#menu.move { margin-top: 0; padding: 10px 0; width: 100%; height: 63px; background: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; }

@media screen and (max-width: 759px) { #menu { margin-top: 0; padding: 0; width: 100%; position: fixed; top: 0; left: 0; }
  #menu .menuBtn { display: block; background: url(../img/burger.png) center top no-repeat; background-size: 8vw; width: 8vw; height: 8vw; position: fixed; top: 12vw; right: 2vw; z-index: 1; }
  #menu .menuBtn.current { background: url(../img/burger_close.png) center top no-repeat; background-size: 8vw; }
  #menu ul { display: none; border-top: 1px solid #999; padding: 22vw 5vw 0 5vw; background-color: rgba(0, 0, 0, 0.9); }
  #menu ul li { display: block; width: 100%; font-size: 5.4vw; border-bottom: 1px solid #666; }
  #menu ul li:nth-of-type(1) { border-top: 1px solid #666; }
  #menu ul li:after { display: none; }
  #menu ul li img { display: block; margin: 0 auto; text-align: center; width: auto; height: 8vw; }
  #menu ul li a { display: block; padding: 3vw; line-height: 1; } }
/*-------------------------------------------------
	++ CONTENTS COMMON
-------------------------------------------------*/
.section { position: relative; }
.section.wgdt:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 150px; background-image: -moz-linear-gradient(-90deg, black 0%, rgba(0, 0, 0, 0) 100%, black 100%); background-image: -webkit-linear-gradient(-90deg, black 0%, rgba(0, 0, 0, 0) 100%, black 100%); background-image: -ms-linear-gradient(-90deg, black 0%, rgba(0, 0, 0, 0) 100%, black 100%); }
.section.wgdb:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; background-image: -moz-linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0) 100%, black 100%); background-image: -webkit-linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0) 100%, black 100%); background-image: -ms-linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0) 100%, black 100%); }
.section .cInner { padding: 100px 0; z-index: 1; }
.section h2 { margin-bottom: 50px; font-size: 46px; }
.section h2 img { vertical-align: baseline; margin-right: 10px; }
.section h2 span { display: block; font-size: 20px; }

.infoBlock { margin-top: 60px; }
.infoBlock h4 { margin-bottom: 15px; }

.infoText { position: relative; font-size: 16px; }
.infoText a { text-decoration: underline; }
.infoText a:hover { text-decoration: none; }
.infoText span { font-size: 14px; }

.indentList { padding-left: 1.5rem; }
.indentList li { margin-bottom: 5px; text-indent: -1.5rem; }

@media screen and (max-width: 759px) { .section.wgdt:before { height: 20vw; }
  .section.wgdb:after { height: 20vw; }
  .section .cInner { padding: 10vw 5vw; }
  .section h2 { margin-bottom: 5vw; padding: 0 10vw; font-size: 6vw; }
  .section h2 img { width: 8vw; height: auto; }
  .infoBlock { margin-top: 5vw; }
  .infoBlock h4 { margin-bottom: 3vw; }
  .infoText { font-size: 4vw; }
  .infoText span { font-size: 3vw; }
  .indentList li { margin-bottom: 1vw; } }
.bgWrap1 { background: url("../img/bg_cast.jpg") repeat-y center top; }

.bgWrap2 { background: url("../img/bg_ticket.jpg") no-repeat center bottom; }

@media screen and (max-width: 759px) { .bgWrap2 { background-size: 180% auto; } }
/*-------------------------------------------------
	++ Individual
-------------------------------------------------*/
#news .entryList { text-align: left; }
#news .entryList ul li { margin-bottom: 10px; }
#news .entryList ul li .date { margin-right: 15px; }
#news .link { margin-top: 15px; padding: 0 50px; text-align: right; }
#news .link a { background: url(../img/arrow_right.svg) right center no-repeat; background-size: 30px 10px; padding-right: 40px; }

@media screen and (max-width: 759px) { #news:before { width: 60%; height: 30vw; left: auto; right: 0; }
  #news .cInner { padding: 20vw 5vw 10vw 5vw; }
  #news .entryList { padding: 0 5vw; }
  #news .entryList ul li { padding: 2vw; }
  #news .entryList ul li .date { display: block; }
  #news .link { margin-top: 3vw; padding-right: 5vw; }
  #news .link a { background-size: 7vw; padding-right: 10vw; } }
#twitter .twBox { padding: 10px; max-width: 800px; margin: 30px auto 0 auto; text-align: center; background-image: linear-gradient(90deg, #7f2a41 0%, #22070b 50%, #7f2a41 100%); height: 470px; }
#twitter .twBox iframe { vertical-align: top; }

@media screen and (max-width: 759px) { #twitter:after { left: -17vw; margin-left: 0; width: 70%; height: 28vw; bottom: -.5vw; }
  #twitter .cInner { padding-bottom: 26vw; }
  #twitter .twBox { width: 90%; margin: 0 auto; text-align: center; } }
#intro { background: url("../img/bg_intro.jpg") no-repeat center bottom; }
#intro .text { margin-top: 30px; line-height: 260%; }
#intro .text.textEn { margin-top: 80px; }

@media screen and (max-width: 759px) { #intro { background-size: 120% auto; }
  #intro h2 { margin-bottom: 10vw; }
  #intro .text { margin-top: 5vw; }
  #intro .text.textEn { margin-top: 10vw; } }
#story { background: url("../img/bg_story.jpg") no-repeat center bottom; }
#story .text { margin-top: 30px; line-height: 260%; }
#story .text.textEn { margin-top: 80px; }
#story .text .read { font-size: 26px; margin-bottom: 30px; }

@media screen and (max-width: 759px) { #story { background-size: 120% auto; }
  #story .cInner { padding-bottom: 25vw; }
  #story .text { margin-top: 5vw; }
  #story .text.textEn { margin-top: 10vw; }
  #story .text .read { font-size: 5vw; margin-bottom: 5vw; } }
#cast .cInner, #cast_osaka .cInner { padding-top: 200px; }
#cast .cInner:before, #cast_osaka .cInner:before { content: ""; position: absolute; z-index: 0; width: 317px; height: 395px; background: url("../img/mtf_grif.png") no-repeat center top; top: 90px; left: -100px; z-index: 0; }
#cast .cInner:after, #cast_osaka .cInner:after { content: ""; position: absolute; z-index: 0; width: 313px; height: 305px; background: url("../img/mtf_uro.png") no-repeat center top; bottom: -185px; right: -125px; z-index: 0; }

@media screen and (max-width: 759px) { #cast .cInner, #cast_osaka .cInner { padding-top: 10vw; }
  #cast .cInner:before, #cast_osaka .cInner:before { background-size: 100% auto; width: 32vw; height: 42vw; top: 0; left: 3vw; }
  #cast .cInner:after, #cast_osaka .cInner:after { background-size: 100% auto; width: 35vw; height: 40vw; bottom: -33vw; right: 0; } }
.photoPnl { position: relative; z-index: 1; }
.photoPnl > h3 { color: #f6d675; }
.photoPnl ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.photoPnl ul li { background: #000; position: relative; width: 180px; margin: 0 25px 50px 25px; font-size: 14px; line-height: 120%; background: black; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); }
.photoPnl ul li a { display: block; }
.photoPnl ul li img { display: block; }
.photoPnl ul li .name { display: block; width: 100%; padding: 10px 5px; line-height: 1.6; }
.photoPnl ul li .name .ruby { font-size: 11px; color: #f6d675; }
.photoPnl ul li .name .pl { font-size: 14px; line-height: 120%; color: #f6d675; }
.photoPnl ul li .name .rubyEn { font-size: 11px; color: #f6d675; }
.photoPnl ul li .name h3, .photoPnl ul li .name h4 { font-size: 16px; }
.photoPnl ul li .name .nameEn { font-size: 11px; }
.photoPnl ul li .name .date { color: #ddd; font-size: 11px; }

@media screen and (min-width: 760px) { .photoPnl ul li:nth-last-of-type(-n+4) { margin-bottom: 0; } }
@media screen and (max-width: 759px) { .photoPnl { padding: 0 5vw; }
  .photoPnl ul li { display: inline-block; position: relative; width: 43%; margin: 0 2.5% 5vw 2.5%; }
  .photoPnl ul li.mc01 { margin: 0 23% 5vw 23%; }
  .photoPnl ul li .name { padding: 2.5vw 1vw; }
  .photoPnl ul li .name .ruby { font-size: 2.4vw; }
  .photoPnl ul li .name .pl { font-size: 3vw; }
  .photoPnl ul li .name .rubyEn { font-size: 2.4vw; }
  .photoPnl ul li .name h3 { font-size: 3vw; }
  .photoPnl ul li .name .nameEn { font-size: 2.4vw; } }
table.castTbl { width: 100%; border: 1px solid #1f1513; margin-bottom: 20px; }
table.castTbl caption { display: none; }
table.castTbl th, table.castTbl td { border: 1px solid #1f1513; color: #FFF; padding: 10px; background-color: rgba(0, 0, 0, 0.5); }
table.castTbl th { text-align: center; font-size: 13px; }
table.castTbl td { font-size: 14px; }
table.castTbl td.vct01 { background-color: rgba(115, 18, 35, 0.5); }
table.castTbl td.vct02 { background-color: rgba(133, 55, 69, 0.5); }
table.castTbl td.vct03 { background-color: rgba(29, 9, 104, 0.5); }
table.castTbl td.vct04 { background-color: rgba(43, 31, 87, 0.5); }
table.castTbl td.vct05 { background-color: rgba(54, 70, 170, 0.5); }
table.castTbl td.vct06 { background-color: rgba(17, 70, 71, 0.5); }
table.castTbl td.vct07 { background-color: rgba(53, 107, 108, 0.5); }
table.castTbl td.vct08 { background-color: rgba(52, 85, 78, 0.5); }
table.castTbl td.vct09 { background-color: rgba(255, 232, 167, 0.5); }
table.castTbl td.vct10 { background-color: rgba(92, 65, 36, 0.5); }
table.castTbl tbody tr th { width: 23%; }
table.castTbl tbody tr td { width: 11%; }

@media screen and (max-width: 759px) { .castTblWrap { width: 100%; overflow: scroll; }
  table.castTbl th, table.castTbl td { padding: 1vw; }
  table.castTbl th { font-size: 3vw; white-space: nowrap; }
  table.castTbl td { font-size: 3vw; white-space: nowrap; } }
#staff .staffList ul li, #staff_osaka .staffList ul li { display: block; margin: 0 auto; text-align: center; clear: both; font-size: 20px; padding: 10px 0; }
#staff .staffList ul.sublist, #staff_osaka .staffList ul.sublist { margin-top: 40px; }
#staff .staffList ul.sublist li, #staff_osaka .staffList ul.sublist li { font-size: 16px; padding: 8px 0; }

@media screen and (max-width: 759px) { #staff, #staff_osaka { background-size: 150% auto; }
  #staff .cInner, #staff_osaka .cInner { padding-bottom: 30vw; }
  #staff .staffList, #staff_osaka .staffList { width: 100%; margin: 0 auto 0 auto; }
  #staff .staffList ul li, #staff_osaka .staffList ul li { font-size: 3.4vw; padding: 2vw 0; }
  #staff .staffList ul.sublist, #staff_osaka .staffList ul.sublist { margin-top: 40px; }
  #staff .staffList ul.sublist li, #staff_osaka .staffList ul.sublist li { font-size: 3.2vw; padding: 2vw 0; } }
#movie .cInner, #movie_osaka .cInner { padding-top: 0; }
#movie .youtube, #movie_osaka .youtube { margin-top: 55px; }

@media screen and (max-width: 759px) { #movie .youtube, #movie_osaka .youtube { margin-top: 10vw; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
  #movie .youtube iframe, #movie_osaka .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }
#ticket .ticketWrap, #ticket_osaka .ticketWrap { text-align: left; }
#ticket .ticketWrap h3, #ticket_osaka .ticketWrap h3 { text-align: center; font-size: 24px; margin-bottom: 50px; }
#ticket .ticketWrap .hx, #ticket_osaka .ticketWrap .hx { background-color: rgba(0, 0, 0, 0.75); color: #FFF; padding: 5px; margin-bottom: 20px; }
#ticket .ticketWrap table, #ticket_osaka .ticketWrap table { width: 100%; border: 1px solid #1f1513; margin-bottom: 20px; }
#ticket .ticketWrap table caption, #ticket_osaka .ticketWrap table caption { display: none; }
#ticket .ticketWrap table th, #ticket .ticketWrap table td, #ticket_osaka .ticketWrap table th, #ticket_osaka .ticketWrap table td { border: 1px solid #1f1513; color: #FFF; padding: 10px; background-color: #000; }
#ticket .ticketWrap table th, #ticket_osaka .ticketWrap table th { text-align: center; width: 40%; }
#ticket .ticketWrap table td, #ticket_osaka .ticketWrap table td { width: 40%; }
#ticket .ticketWrap table td.dn, #ticket_osaka .ticketWrap table td.dn { text-align: center; width: 20%; }
#ticket .ticketWrap table.ticketTbl, #ticket_osaka .ticketWrap table.ticketTbl { border: 0; }
#ticket .ticketWrap table.ticketTbl th, #ticket .ticketWrap table.ticketTbl td, #ticket_osaka .ticketWrap table.ticketTbl th, #ticket_osaka .ticketWrap table.ticketTbl td { border: 0; color: #FFF; padding: 5px; background-color: transparent; width: auto; vertical-align: top; }
#ticket .ticketWrap table.ticketTbl th, #ticket_osaka .ticketWrap table.ticketTbl th { text-align: left; }
#ticket .gmap, #ticket_osaka .gmap { margin-top: 60px; }

@media screen and (max-width: 759px) { #ticket .ticketWrap, #ticket_osaka .ticketWrap { margin-bottom: 7vw; padding: 0; }
  #ticket .ticketWrap h3, #ticket_osaka .ticketWrap h3 { margin-bottom: 5vw; font-size: 3.4vw; }
  #ticket .ticketWrap .hx, #ticket_osaka .ticketWrap .hx { margin-bottom: 3vw; }
  #ticket .ticketWrap table, #ticket_osaka .ticketWrap table { margin-bottom: 5vw; }
  #ticket .ticketWrap table caption, #ticket_osaka .ticketWrap table caption { display: table-caption; background-color: #000; color: #FFF; width: 100%; padding: 1vw 3vw; }
  #ticket .ticketWrap table th, #ticket .ticketWrap table td, #ticket_osaka .ticketWrap table th, #ticket_osaka .ticketWrap table td { padding: 2vw; }
  #ticket .ticketWrap table th, #ticket_osaka .ticketWrap table th { display: none; }
  #ticket .ticketWrap table td, #ticket_osaka .ticketWrap table td { width: 75%; }
  #ticket .ticketWrap table td.dn, #ticket_osaka .ticketWrap table td.dn { width: 25%; text-align: center; }
  #ticket .ticketWrap table.ticketTbl caption, #ticket_osaka .ticketWrap table.ticketTbl caption { background-color: transparent; text-align: left; color: #000; font-size: 3.4vw; padding: 1vw; }
  #ticket .ticketWrap table.ticketTbl th, #ticket .ticketWrap table.ticketTbl td, #ticket_osaka .ticketWrap table.ticketTbl th, #ticket_osaka .ticketWrap table.ticketTbl td { display: block; width: 100%; font-size: 3.2vw; padding: 0 0 0 2vw; }
  #ticket .ticketWrap table.ticketTbl th, #ticket_osaka .ticketWrap table.ticketTbl th { font-size: 3.4vw; }
  #ticket .ticketWrap table.ticketTbl td, #ticket_osaka .ticketWrap table.ticketTbl td { padding: 2vw 2vw 5vw 2vw; }
  #ticket .ticketWrap .infoText, #ticket_osaka .ticketWrap .infoText { font-size: 3.2vw; margin-bottom: 5vw; }
  #ticket .ticketWrap .infoText span, #ticket_osaka .ticketWrap .infoText span { font-size: 3.2vw; }
  #ticket iframe, #ticket_osaka iframe { width: 100%; height: 70vw; margin: 0 auto; text-align: center; } }
#footer { background-color: #000; font-size: 12px; }
#footer .cInner { padding: 50px 0; }
#footer .copyright { padding: 10px 0; }

@media screen and (max-width: 759px) { #footer { font-size: 2.8vw; }
  #footer .copyright { padding: 3vw 0; } }
/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#spCover { display: none; }

#pageTop { position: fixed; bottom: 40px; right: 40px; z-index: 9997; }

@media screen and (max-width: 759px) { #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: 9997; } }
/*-------------------------------------------------
	++ OTHER
-------------------------------------------------*/
.baloon { padding: 10px 24px; display: inline-block; background: #ff0000; color: #fff; border-radius: 4px; opacity: 0.8; position: relative; font-size: 16px !important; }

.baloon:before { content: ""; display: block; height: 8px; border: 8px solid transparent; border-top: 16px solid #ff0000; position: absolute; left: 50%; bottom: -24px; margin-left: -4px; }

#osaka { display: none; }