@charset "UTF-8";
@import url(base.css);
/*-------------------------------------------------
	++ BASE
-------------------------------------------------*/
body { font-family: 'Noto Serif JP', serif; font-weight: 500; background: #000 url(../img/bg.jpg) center top repeat-y; }

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

#contents { position: relative; }
#contents:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 200px; 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%); }

.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-color: #a01e22; color: #FFF !important; padding: 10px 30px; border-radius: 5px; text-decoration: none !important; }
@media screen and (min-width: 760px) { .ticketBtn a { min-width: 300px; } }

@media screen and (min-width: 760px) { .sp { display: none !important; }
  .pc { display: block; }
  body { font-size: 18px; }
  #container { min-width: 1200px; overflow-x: hidden; }
  .cInner { width: 1100px; } }
@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: url(../img/main.jpg) center center no-repeat; background-size: 100% auto; position: relative; }
#main:after { content: ""; position: absolute; bottom: 0; left: 0; z-index: 0; width: 100%; height: 200px; 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%); }
#main .cInner { padding-top: 180px; z-index: 9998; }
#main .catch { margin-top: 60px; }
#main .mainDate { background-color: #2e2323; display: block; position: relative; width: 670px; margin: 60px auto 0 auto; text-align: center; padding: 10px; }
#main .mainDate .mainDateInner { background: url("../img/bg_gold.jpg") center top no-repeat; background-size: 100% auto; border: 2px solid #5a2c47; padding: 20px; color: #000; }
#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 (min-width: 760px) { #main { min-height: 1280px; } }
@media screen and (max-width: 1500px) { #main { background-size: 1500px auto; } }
@media screen and (max-width: 759px) { #main { background-size: auto 100%; background-position: center top; }
  #main:after { height: 15vw; }
  #main .cInner { z-index: 9998; }
  #main .catch { margin-top: 10vw; }
  #main .mainDate { width: 100%; margin: 10vw 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
-------------------------------------------------*/
#menu { margin-top: 80px; z-index: 9999; position: relative; }
#menu ul { display: flex; justify-content: center; align-items: center; position: relative; }
#menu ul li { padding: 0 10px; }
#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-top: 22vw; background-color: rgba(0, 0, 0, 0.9); }
  #menu ul li { display: block; width: 100%; }
  #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: 2vw 10vw; line-height: 1; } }
/*-------------------------------------------------
	++ CONTENTS COMMON
-------------------------------------------------*/
.section { position: relative; }
.section .cInner { padding: 120px 0; z-index: 1; }
.section h2 { margin-bottom: 50px; }

.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 .cInner { padding: 10vw 5vw; }
  .section h2 { margin-bottom: 5vw; padding: 0 10vw; }
  .infoBlock { margin-top: 5vw; }
  .infoBlock h4 { margin-bottom: 3vw; }
  .infoText { font-size: 4vw; }
  .infoText span { font-size: 3vw; }
  .indentList li { margin-bottom: 1vw; } }
/*-------------------------------------------------
	++ Individual
-------------------------------------------------*/
#news:before { content: ""; position: absolute; top: 0; left: 50%; width: 1000px; height: 425px; background: url(../img/wave1.png) no-repeat right top; background-size: 100% auto; }
#news .cInner { padding-bottom: 60px; }
#news .entryList { text-align: left; padding: 0 50px; }
#news .entryList ul li { background-color: rgba(255, 255, 255, 0.75); border-radius: 5px; margin-bottom: 10px; color: #000; padding: 7px 10px; }
#news .entryList ul li:hover { background-color: rgba(255, 255, 255, 0.9); }
#news .entryList ul li a { color: #000; }
#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:after { content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -950px; width: 950px; height: 327px; background: url(../img/wave2.png) no-repeat left bottom; background-size: 100% auto; }
#twitter .twBox { padding: 10px; max-width: 800px; margin: 30px auto 0 auto; text-align: center; background-image: -moz-linear-gradient(146deg, rgba(78, 56, 2, 0.75) 0%, rgba(171, 148, 54, 0.75) 100%); background-image: -webkit-linear-gradient(146deg, rgba(78, 56, 2, 0.75) 0%, rgba(171, 148, 54, 0.75) 100%); background-image: -ms-linear-gradient(146deg, rgba(78, 56, 2, 0.75) 0%, rgba(171, 148, 54, 0.75) 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; } }
.bgWrap1 { background: url(../img/bg_dark.jpg) repeat-y center top; position: relative; }
.bgWrap1:before, .bgWrap1:after { content: ""; position: absolute; z-index: 0; background-size: 100% auto; background-position: center top; background-repeat: no-repeat; width: 540px; height: 500px; left: 50%; }
.bgWrap1:before { background-image: url("../img/wave3.png"); background-size: 100% auto; top: 60px; margin-left: 280px; }
.bgWrap1:after { background-image: url("../img/wave4.png"); background-size: 100% auto; top: 600px; margin-left: -825px; }

@media screen and (max-width: 759px) { .bgWrap1 { background-size: 140% auto; }
  .bgWrap1:before, .bgWrap1:after { width: 35vw; height: 35vw; left: auto; }
  .bgWrap1:before { top: 6vw; margin-left: 0; right: 0; }
  .bgWrap1:after { width: 55vw; height: 57vw; top: 300vw; margin-left: 0; left: 0; } }
#intro:before { content: ""; position: absolute; z-index: 0; width: 590px; height: 414px; background: url("../img/wave5.png") no-repeat center top; background-size: 100% auto; bottom: -225px; left: 50%; margin-left: 290px; }
#intro .text { margin-top: 30px; line-height: 195%; }
#intro .text.textEn { margin-top: 80px; }

@media screen and (max-width: 759px) { #intro { padding-bottom: 25vw; }
  #intro:before { width: 46%; height: 45vw; bottom: -26vw; left: auto; right: 0; margin-left: 0; background-position: left bottom; background-size: 55vw auto; }
  #intro h2 { margin-bottom: 10vw; }
  #intro .text { margin-top: 5vw; }
  #intro .text.textEn { margin-top: 10vw; } }
#story { background: url("../img/story_bg.png") no-repeat center 100px; }
#story:after { content: ""; position: absolute; z-index: 0; width: 590px; height: 414px; background: url("../img/wave6.png") no-repeat center top; background-size: 100% auto; bottom: 565px; left: 50%; margin-left: -915px; }
#story .cInner { padding-bottom: 200px; }
#story .text { margin-top: 30px; line-height: 195%; text-align: center; }
#story .text.textEn { margin-top: 80px; }

@media screen and (max-width: 759px) { #story:after { display: none; }
  #story .cInner { padding-bottom: 45vw; }
  #story .text { margin-top: 5vw; line-height: 195%; }
  #story .text.textEn { margin-top: 10vw; } }
#cast { background: url(../img/pattern_cast.png) no-repeat center 185px; }
#cast:before { content: ""; position: absolute; z-index: 0; width: 100%; height: 900px; background: url("../img/fox.png") no-repeat center bottom; background-size: 2000px auto; top: -580px; left: 0; z-index: 0; }
#cast .cInner { padding-top: 225px; }

@media screen and (max-width: 759px) { #cast { background: url(../img/pattern_cast_sp.png) no-repeat center 50vw; background-size: 100% auto; }
  #cast:before { background-size: 300% auto; height: 137vw; top: -110vw; }
  #cast .cInner { padding-top: 10vw; } }
#music { background: url(../img/pattern_music.png) no-repeat center 270px; }

@media screen and (max-width: 759px) { #music { background: url(../img/pattern_music_sp.png) repeat-y center 18vw; background-size: 100% auto; } }
.photoPnl { position: relative; z-index: 1; }
.photoPnl ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; }
.photoPnl ul li { display: inline-block; 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: 20px; color: #f6d675; }
.photoPnl ul li .name .rubyEn { font-size: 11px; color: #f6d675; }
.photoPnl ul li .name h3 { font-size: 16px; }
.photoPnl ul li .name .nameEn { 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: 3.4vw; }
  .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; } }
#staff { background: url(../img/movie_bg_top.png) no-repeat center bottom; }
#staff .cInner { padding-bottom: 270px; }
#staff .staffList ul li { display: block; margin: 0 auto; text-align: center; clear: both; font-size: 20px; padding: 10px 0; }
#staff .staffList ul.sublist { margin-top: 40px; }
#staff .staffList ul.sublist li { font-size: 16px; padding: 8px 0; }

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

@media screen and (max-width: 759px) { #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 { background: url("../img/bg_gold.jpg") repeat center top; color: #000; }
#ticket a { color: #000; }
#ticket .ticketWrap { text-align: left; padding: 0 50px; }
#ticket .ticketWrap h3 { text-align: center; font-size: 24px; margin-bottom: 50px; }
#ticket .ticketWrap .hx { background-color: rgba(0, 0, 0, 0.75); color: #FFF; padding: 5px; margin-bottom: 20px; }
#ticket .ticketWrap table { width: 100%; border: 1px solid #1f1513; margin-bottom: 20px; }
#ticket .ticketWrap table caption { display: none; }
#ticket .ticketWrap table th, #ticket .ticketWrap table td { border: 1px solid #1f1513; color: #FFF; padding: 10px; background-color: #000; }
#ticket .ticketWrap table th { font-size: 16px; text-align: center; width: 40%; }
#ticket .ticketWrap table td { width: 40%; }
#ticket .ticketWrap table td.dn { text-align: center; width: 20%; }
#ticket .ticketWrap table.ticketTbl { border: 0; }
#ticket .ticketWrap table.ticketTbl th, #ticket .ticketWrap table.ticketTbl td { border: 0; color: #FFF; padding: 5px; background-color: transparent; width: auto; color: #000; vertical-align: top; }
#ticket .ticketWrap table.ticketTbl th { text-align: left; }
#ticket .gmap { margin-top: 60px; }

@media screen and (max-width: 759px) { #ticket .ticketWrap { margin-bottom: 7vw; padding: 0; }
  #ticket .ticketWrap h3 { margin-bottom: 5vw; font-size: 3.4vw; }
  #ticket .ticketWrap .hx { margin-bottom: 3vw; }
  #ticket .ticketWrap table { margin-bottom: 5vw; }
  #ticket .ticketWrap table caption { display: table-caption; background-color: #000; color: #FFF; width: 100%; padding: 1vw 3vw; }
  #ticket .ticketWrap table th, #ticket .ticketWrap table td { padding: 2vw; }
  #ticket .ticketWrap table th { display: none; }
  #ticket .ticketWrap table td { width: 75%; }
  #ticket .ticketWrap table td.dn { width: 25%; text-align: center; }
  #ticket .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 { display: block; width: 100%; font-size: 3.2vw; padding: 0 0 0 2vw; }
  #ticket .ticketWrap table.ticketTbl th { font-size: 3.4vw; }
  #ticket .ticketWrap table.ticketTbl td { padding: 2vw 2vw 5vw 2vw; }
  #ticket .ticketWrap .infoText { font-size: 3.2vw; margin-bottom: 5vw; }
  #ticket .ticketWrap .infoText span { font-size: 3.2vw; }
  #ticket 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; } }