@charset "UTF-8";
@import url(base.css);
@media screen and (min-width: 760px) { .sp { display: none !important; }
  .pc { display: block; } }
@media screen and (max-width: 759px) { .pc { display: none !important; }
  .sp { display: block; }
  .fit { width: 100%; height: auto; }
  img { max-width: 100%; height: auto; } }
/*-------------------------------------------------
	++ BASE
-------------------------------------------------*/
body { font-family: 'Noto Serif JP', serif; font-weight: 400; background: #000; color: #FFF; }
@media screen and (min-width: 760px) { body { font-size: 18px; } }
@media screen and (max-width: 759px) { body { font-size: 3.2vw; } }

#container { margin: 0 auto; text-align: center; position: relative; width: 100%; background-image: url("../img/bg_v4.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; background-size: cover; }
@media screen and (min-width: 760px) { #container { min-width: 1100px; overflow-x: hidden; } }

#contents { position: relative; }

.inner { display: block; clear: both; margin: 0 auto; text-align: center; position: relative; letter-spacing: 1px; }
@media screen and (min-width: 760px) { .inner { width: 1000px; } }
@media screen and (max-width: 759px) { .inner { width: 100%; padding: 0 5vw; } }

.ticketBtn { text-align: center; }
.ticketBtn a { display: inline-block; background-image: linear-gradient(60deg, #623f05 0%, #968116 50%, #623f05 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; } }

/*-------------------------------------------------
	++ 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-color: #000000; background-image: url(../img/main.jpg); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; min-height: 880px; position: relative; }
#main .inner { z-index: 9998; }
@media screen and (min-width: 760px) { #main .inner { padding-top: 34px; } }
@media screen and (max-width: 1500px) { #main { background-size: 1500px auto; background-position: center bottom; } }
@media screen and (max-width: 759px) { #main { min-height: 130vw; background-size: auto 100%; display: flex; justify-content: center; align-items: center; } }
#main .titlePanel { background-color: rgba(0, 0, 0, 0.75); width: 100%; max-width: 800px; margin: 0 auto; text-align: center; padding: 40px; }
#main .titlePanel .ticketBtn { margin-top: 10px; }
@media screen and (max-width: 759px) { #main .titlePanel { padding: 4vw; }
  #main .titlePanel .ticketBtn { margin-top: 2vw; } }
#main .read { font-size: 28px; font-weight: 500; margin: 20px auto; }
@media screen and (max-width: 759px) { #main .read { font-size: 5vw; margin: 2vw auto 1vw auto; } }
#main .mainDate { display: block; position: relative; margin: 0 auto; text-align: center; }
#main .mainDate .date { font-size: 26px; }
#main .mainDate .date span { font-size: 38px; }
#main .mainDate .place { font-size: 26px; }
@media screen and (max-width: 759px) { #main .mainDate .date { font-size: 4vw; }
  #main .mainDate .date span { font-size: 5.4vw; }
  #main .mainDate .place { font-size: 5.4vw; margin: 2vw 0; } }
#main .logo5th { position: absolute; top: 20px; left: 20px; opacity: .5; }
@media screen and (max-width: 759px) { #main .logo5th { width: 20%; top: 3vw; left: 3vw; } }

/*-------------------------------------------------
	++ MENU
-------------------------------------------------*/
@media screen and (min-width: 760px) { .menuWrap { min-height: 65px; position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.75); } }

#menu { z-index: 9999; }
@media screen and (max-width: 759px) { #menu { margin-top: 0; padding: 0; width: 100%; position: fixed; top: 0; left: 0; } }
#menu ul { display: flex; justify-content: center; align-items: center; position: relative; }
@media screen and (max-width: 759px) { #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 { padding: 0 10px; }
#menu ul li a { display: block; padding: 30px 0; }
@media screen and (max-width: 759px) { #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: 6vw; }
  #menu ul li a { display: block; padding: 3vw; line-height: 1; }
  #menu ul li.mnStory img { height: 9vw; }
  #menu ul li.mnTicket img, #menu ul li.goods img { height: 8vw; } }
#menu.move { margin-top: 0; width: 100%; background: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; }
@media screen and (max-width: 759px) { #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; } }

/*-------------------------------------------------
	++ CONTENTS COMMON
-------------------------------------------------*/
.section { position: relative; padding: 120px 0; }
@media screen and (max-width: 759px) { .section { padding: 15vw 0; } }
.section .inner { z-index: 5; }
.section h2 { margin-bottom: 50px; }
@media screen and (max-width: 759px) { .section h2 { margin-bottom: 5vw; } }
.section h2 span { display: inline-block; position: relative; padding: 0 130px; }
@media screen and (max-width: 759px) { .section h2 span { padding: 0 15vw; }
  .section h2 span img { width: auto; height: 7vw; } }
.section h2 span:before, .section h2 span:after { content: ""; display: block; width: 114px; height: 14px; background: url("../img/hx.svg") no-repeat center center; background-size: 100% auto; position: absolute; top: 50%; }
@media screen and (max-width: 759px) { .section h2 span:before, .section h2 span:after { width: 13vw; height: 3vw; } }
.section h2 span:before { left: 0; transform: translateY(-50%); }
.section h2 span:after { right: 0; transform: translateY(-50%) scale(-1, 1); }

.bacePanel { background-color: rgba(24, 47, 61, 0.5); width: 100%; padding: 40px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); }
@media screen and (max-width: 759px) { .bacePanel { padding: 10vw 3vw; } }

.bgw { position: relative; background-repeat: no-repeat; background-attachment: fixed; background-position: center top; background-size: cover; }
body.ios .bgw { background-attachment: inherit; }
.bgw:after { content: ""; width: 100%; height: 100%; background-color: #000; position: absolute; top: 0; left: 0; z-index: 1; }
.bgw.onsc:after { animation: fadeIn 1s ease-in .3s reverse forwards; }
.bgw.bgw1 { background-image: url("../img/bg_v1.jpg"); }
.bgw.bgw2 { background-image: url("../img/bg_v2.jpg"); }
.bgw.bgw3 { background-image: url("../img/bg_v3.jpg"); }
.bgw.bgw4 { background-image: url("../img/bg_v4.jpg"); }

.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; }

/*-------------------------------------------------
	++ Individual
-------------------------------------------------*/
@media screen and (max-width: 759px) { #news { padding-bottom: 5vw; } }
#news .entryList { text-align: left; }
#news .entryList ul li { margin-bottom: 10px; }
@media screen and (max-width: 759px) { #news .entryList ul li { margin-bottom: 3vw; } }
@media screen and (min-width: 760px) { #news .entryList ul li .date { margin-right: 15px; } }
@media screen and (max-width: 759px) { #news .entryList ul li .date { display: block; } }
#news .link { margin-top: 15px; padding: 0 50px; text-align: right; }
@media screen and (max-width: 759px) { #news .link { margin-top: 3vw; padding: 0 5vw; } }
#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 .link a { background-size: 7vw; padding-right: 10vw; } }

@media screen and (max-width: 759px) { #twitter { padding-top: 5vw; }
  #twitter h2 img { width: auto; height: 7vw; } }
#twitter .twBox { max-width: 1000px; margin: 0 auto; text-align: center; height: 470px; }
#twitter .twBox iframe { vertical-align: top; }
@media screen and (max-width: 759px) { #twitter .twBox { width: 90%; margin: 0 auto; text-align: center; } }

#intro .text { line-height: 2; }

#story .text { line-height: 1.8; }
#story .text .read { font-size: 26px; margin-bottom: 30px; }
@media screen and (max-width: 759px) { #story .text .read { font-size: 5vw; margin-bottom: 5vw; } }

.photoPnl { position: relative; z-index: 1; }
.photoPnl ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 25px 50px; }
@media screen and (max-width: 759px) { .photoPnl ul { gap: 7vw 4%; } }
.photoPnl ul li { position: relative; font-size: 14px; line-height: 120%; }
@media screen and (max-width: 759px) { .photoPnl ul li { width: 48%; font-size: 3.6vw; } }
.photoPnl ul li a { display: block; }
.photoPnl ul li .img { border: 1px solid #FFF; padding: 5px; width: 192px; margin: 0 auto; }
@media screen and (max-width: 759px) { .photoPnl ul li .img { width: 100%; padding: 1.5vw; } }
.photoPnl ul li img { display: block; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
.photoPnl ul li .name { display: block; width: 100%; padding: 10px 5px; line-height: 1.6; }
@media screen and (max-width: 759px) { .photoPnl ul li .name { padding: 2vw 0; } }
.photoPnl ul li .name .pl { font-size: 18px; }
@media screen and (max-width: 759px) { .photoPnl ul li .name .pl { font-size: 3.6vw; } }
.photoPnl ul li .name h3 { font-size: 16px; font-weight: 400; }
@media screen and (max-width: 759px) { .photoPnl ul li .name h3 { font-size: 3.2vw; } }

#staff .staffList ul li { display: block; margin: 0 auto; text-align: center; clear: both; font-size: 20px; padding: 10px 0; }
@media screen and (max-width: 759px) { #staff .staffList ul li { font-size: 3.6vw; padding: 3vw 0; } }
#staff .staffList ul.sublist { margin-top: 40px; }
@media screen and (max-width: 759px) { #staff .staffList ul.sublist { margin-top: 10vw; } }
#staff .staffList ul.sublist li { font-size: 16px; padding: 8px 0; }
@media screen and (max-width: 759px) { #staff .staffList ul.sublist li { font-size: 3.2vw; padding: 3vw 0; } }

#movie .inner { 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 .ticketWrap { text-align: left; }
#ticket .ticketWrap h3 { text-align: center; font-size: 24px; margin-bottom: 50px; font-weight: 500; }
@media screen and (max-width: 759px) { #ticket .ticketWrap h3 { margin-bottom: 5vw; font-size: 3.4vw; } }
#ticket .ticketWrap .hx { padding: 5px; margin-bottom: 20px; }
@media screen and (max-width: 759px) { #ticket .ticketWrap .hx { margin-bottom: 3vw; padding: 2vw; } }
#ticket .ticketWrap table { width: 100%; border: 1px solid #1f1513; margin-bottom: 20px; }
@media screen and (max-width: 759px) { #ticket .ticketWrap table { margin-bottom: 5vw; } }
#ticket .ticketWrap table caption { display: none; }
@media screen and (max-width: 759px) { #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 { border: 1px solid #1f1513; color: #FFF; padding: 10px; background-color: #000; }
@media screen and (max-width: 759px) { #ticket .ticketWrap table th, #ticket .ticketWrap table td { padding: 2vw; } }
#ticket .ticketWrap table th { text-align: center; width: 40%; }
@media screen and (max-width: 759px) { #ticket .ticketWrap table th { display: none; } }
#ticket .ticketWrap table td { width: 40%; }
#ticket .ticketWrap table td.dn { text-align: center; width: 20%; }
@media screen and (max-width: 759px) { #ticket .ticketWrap table td { width: 75%; }
  #ticket .ticketWrap table td.dn { width: 25%; } }
#ticket .ticketWrap table.ticketTbl { border: 0; }
@media screen and (max-width: 759px) { #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 { border: 0; color: #FFF; padding: 5px; background-color: transparent; width: auto; vertical-align: top; }
@media screen and (max-width: 759px) { #ticket .ticketWrap table.ticketTbl th, #ticket .ticketWrap table.ticketTbl td { display: block; width: 100%; font-size: 3.2vw; padding: 0; } }
#ticket .ticketWrap table.ticketTbl th { text-align: left; }
@media screen and (max-width: 759px) { #ticket .ticketWrap table.ticketTbl th { font-size: 3.4vw; } }
@media screen and (max-width: 759px) { #ticket .ticketWrap table.ticketTbl td { padding: 2vw 2vw 5vw 5vw; } }
#ticket .gmap { margin-top: 60px; }
@media screen and (max-width: 759px) { #ticket .gmap { margin-top: 10vw; }
  #ticket .gmap iframe { width: 100%; height: 70vw; margin: 0 auto; text-align: center; } }

#footer { font-size: 12px; }
@media screen and (max-width: 759px) { #footer { font-size: 2.8vw; } }
#footer .inner { padding: 50px 0; }
@media screen and (max-width: 759px) { #footer .inner { padding: 10vw 0; } }
#footer .copyright { padding: 10px 0; }
@media screen and (max-width: 759px) { #footer .copyright { padding: 3vw 0; } }

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#spCover { display: none; }
@media screen and (max-width: 759px) { #spCover { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 9997; } }

#pageTop { position: fixed; bottom: 40px; right: 40px; z-index: 9997; }
@media screen and (max-width: 759px) { #pageTop { bottom: 5vw; right: 5vw; width: 13vw; }
  #pageTop img { display: block; width: 100%; height: auto; } }

.up { transform: translateY(80px); opacity: 0; transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1); }
.up.upstyle { transform: translateY(0); opacity: 1; }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }