@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 801px) {
/********************************************************************************************************
	PC TOP
********************************************************************************************************/
/* ticketArea ****************************************************/
.ticketArea{
 padding:0;
 background:linear-gradient(90deg,#eb5e01 0%,#eb5e01 50%,#FFF 50%,#FFF 100%);
}
.ticketArea dl.ticketAreaInner{
 display:table;
 width:100%;
}
.ticketArea dl.ticketAreaInner dt{
 display:table-cell;
 vertical-align:middle;
 width:330px;
 background:#FFF;
 position:absolute;
}
.ticketArea dl.ticketAreaInner dt .arrow {
 position: absolute;
 top:0;
 left:-330px;
}
.ticketArea dl.ticketAreaInner dt span{
 font-size:450%;
 position:absolute;
 top:50px;
 color:#b2e4f9;
}
.ticketArea dl.ticketAreaInner dt .arrow.mvMoveOn {
 left:0;
  transition-delay:1s;
}
.ticketArea dl.ticketAreaInner dd{
 display:table-cell;
 vertical-align:middle;
 padding:0;
 background:#FFF;
 color: #000;
 font-size:225%;
 line-height:1.3em;
 height:250px;
 box-sizing:border-box;
	text-align: center;
}
.ticketArea dl.ticketAreaInner dd h3{
 margin-bottom:20px;
 font-weight:200;
 text-align:center;
 position:relative;
 z-index:2;
}
.dayticket{
	display: block;
	padding-top: 11px;
	line-height: 1.2;
	font-size: 78%;
}
.ticketArea dl.ticketAreaInner dd .linkBtn{
 margin:0 auto;
}
.ticketArea dl.ticketAreaInner dd .linkBtn a{
 border-color:#000;
 font-size:50%;
 line-height:1em;
 background:none;
 color:#000;
 padding:15px 0;
}
.ticketArea dl.ticketAreaInner dd .linkBtn a:hover{
 color:#fff;
}


/* artist ****************************************************/
.home .artist .ph{
 margin-bottom:40px;
}
/* about ****************************************************/
.home .about .textBox{
 padding-left:230px;
}
	


/********************************************************************************************************
	ARTIST
********************************************************************************************************/
/* artistList ****************************************************/
.artist .artistList {
 margin-bottom:20px;
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: flex;
 
 flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 
 justify-content: flex-start;
 -webkit-box-pack:start;
 -ms-flex-pack:start;
 -webkit-justify-content:flex-start;

 align-items: flex-start; 
 -webkit-box-align:start;
 -ms-flex-align:start;
 -webkit-align-items:flex-start;
}
.artist .artistList li{
 width:20%;
 padding:0 1%;
 margin-bottom:30px;
 box-sizing:border-box;
}
.artist .artistList li a {
 cursor:pointer;
}
.artist .artistList li img {
 width:100%;
 height:auto;
}
.artist .artistList li .ph{
 margin-bottom:10px;
}
.artist .artistList li .name{
 text-align:center;
 font-size:90%;
 line-height:1.3em;
}
.more{
text-align: right;
font-size: 20px;
margin-right: 2%;
}

/* modal ****************************************************/
.remodal-close {
 left: auto !important;
 right:0 !important;
}
.remodal h2.name{
 font-size:300%;
 font-family: 'Antonio','Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-weight:300;
}
.remodal .ph {
 margin-bottom:20px;
}
.remodal .ph img{
 max-width:450px;
 height:auto;
}
.remodal p.text_01{
 font-size:120%;
 text-align:left;
 margin-bottom:1.5em;
}
.remodal ul.link li{
 text-align: left;
 margin-bottom:1em;
 font-size:120%;
}
.remodal ul.link li i{vertical-align:middle;}
.remodal ul.link li a{
 color:#000;
 text-decoration:underline;
}
/********************************************************************************************************
	ACCESS
********************************************************************************************************/
.access .gmap iframe{
 display:block;
 margin:0 auto;
}
/********************************************************************************************************
	TICKET
********************************************************************************************************/
.ticket .playguide a{
 color:rgba(255,215,6,1.00);
 text-decoration:underline;
}
.ticket dl.playguide {
 margin-bottom:40px;
}
.ticket dl.playguide dt{
 width:190px;
}
.ticket dl.playguide dd{
 padding-left:15px;
}
.ticket dl.playguide em{
 margin-top: 20px;
 margin-bottom: 5px;
 display:block;
 font-weight:bold;
 font-size:125%;
}
.ticket dl.playguide dt em{
 text-align:center;
}
}

@media screen and (max-width: 800px) {
/********************************************************************************************************
	SP TOP
********************************************************************************************************/
/* ticketArea ****************************************************/
.ticketArea{
 padding:0;
}
.ticketArea dl.ticketAreaInner{
 width:100%;
 background:#FFF;
 overflow:hidden;
}
.ticketArea dl.ticketAreaInner dt{
 display:block;
 background:#FFF;
 position:relative;
}
.ticketArea dl.ticketAreaInner dt .arrow {
 position: absolute;
 top:0;
 left:-330px;
}
.ticketArea dl.ticketAreaInner dt .arrow img{
 height:100%;
}
.ticketArea dl.ticketAreaInner dt span{
 font-size:320%;
 position:absolute;
 top:0px;
 color:#b2e4f9;
}
.ticketArea dl.ticketAreaInner dt .arrow.mvMoveOn {
 left:0;
  transition-delay:1s;
}
.ticketArea dl.ticketAreaInner dd{
 padding:20px 3%;
 text-align:center;
 color: #000;
 line-height:1.3em;
 box-sizing:border-box;
}
.ticketArea dl.ticketAreaInner dd h3{
 margin-bottom:10px;
 margin-top: 13px;
 font-weight:200;
 position:relative;
 z-index:2;
 font-size:145%;
 line-height:1.2em;
}
.dayticket{
	display: block;
	padding-top:7px;
	font-size: 70%;
}


.ticketArea dl.ticketAreaInner dd .linkBtn{
 margin:0 auto;
}
.ticketArea dl.ticketAreaInner dd .linkBtn a{
 border-color:#000;
 line-height:1em;
 background:none;
 color:#000;
 padding:15px 0;
}
/* artist ****************************************************/
.home .artist .ph{
 margin-bottom:20px;
}
/********************************************************************************************************
	ARTIST
********************************************************************************************************/
/* artistList ****************************************************/
.artist .artistList {
 margin-bottom:40px;
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: flex;
 
 flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 
 justify-content:space-between;
 -webkit-box-pack:justify;
 -ms-flex-pack:justify;
 -webkit-justify-content:space-between;

 align-items: flex-start; 
 -webkit-box-align:start;
 -ms-flex-align:start;
 -webkit-align-items:flex-start;
}
.artist .artistList li{
 width:48%;
 margin-bottom:10px;
 position: relative;
}
.artist .artistList li img {
 width:100%;
 height:auto;
}
.artist .artistList li .name{
 font-size:81%;
 line-height:1.3em;
}
.more{
text-align: center;
font-size: 20px;
}

/* modal ****************************************************/
.remodal-close {
 left: auto !important;
 right:0 !important;
}
.remodal h2.name{
 font-size:230%;
 font-family: 'Antonio','Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-weight:300;
 margin-bottom:10px;
}
.remodal .ph {
 margin-bottom:10px;
}
.remodal .ph img{
 width:100% !important;
 height:auto;
}
.remodal p.text_01{
 font-size:120%;
 text-align:left;
 margin-bottom:1.5em;
}
.remodal ul.link li{
 text-align: left;
 margin-bottom:1em;
 font-size:120%;
}
.remodal ul.link li i{vertical-align:middle;}
.remodal ul.link li a{
 color:#000;
 text-decoration:underline;
}

/********************************************************************************************************
	ACCESS
********************************************************************************************************/
.access .gmap iframe{
 width:100%;
 height:200px;
 display:block;
 margin:0 auto;
}

/********************************************************************************************************
	TICKET
********************************************************************************************************/
.ticket .playguide a{
 color:rgba(255,215,6,1.00);
 text-decoration:underline;
}
.ticket dl.playguide {
 display:block;
 margin-bottom:40px;
}
.ticket dl.playguide dt{
 display:block;
 width:30%;
 margin-bottom:5px;
}
.ticket dl.playguide dd{
 display:block;
}
.ticket dl.playguide em{
 display:block;
 font-weight:bold;
 font-size:125%;
 margin-top: 20px;
}

}
/********************************************************************************************************
	keyframes
********************************************************************************************************/
/* moveOn ****************************************************/
.scrMove { opacity:0;}
.moveOn{
 opacity:1;
 display:block;
 
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 
 -webkit-animation-name: slideMove;
 animation-name: slideMove;
 
 visibility: visible !important;
}
@-webkit-keyframes slideMove {
 0% { -webkit-transform: translateX(-100px); }
 100% { -webkit-transform: translateX(0); }
}
@keyframes slideMove {
 0% {  -webkit-transform: translateX(-100px); -ms-transform: translateX(-50px); transform: translateX(-50px); }
 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}


/* 202305改修 */
#mainView{
  background: #000;
  overflow: hidden;
}
#mainView .inner{
  z-index: 2;
}
.main-bg{
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../images/mv_bg.png") no-repeat;
  background-size: cover;
  z-index: 1;
}
.grid-bg{
  display: none;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(3,1fr);
  position: absolute;
  z-index: 0;
}
.grid-bg.on{
  display: grid;
}
.grid-big {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  align-content: center;
  -webkit-align-content: center;
  width: 100%;
}
.grid-mini {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0px;
  top: auto;
  bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  align-content: center;
  -webkit-align-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.cell-1 {
  width: 8%;
  aspect-ratio: 1 / 1;
  background: #4c1f03;
  border-radius: 50%;
  margin: 10px;
}
.cell-1:nth-child(2n+1) {
  animation: glow 1.2s infinite linear;
  -webkit-animation: glow 1.2s infinite linear;
}
.cell-1:nth-child(2n) {
  animation: glow 1.2s 0.6s infinite linear;
  -webkit-animation: glow 1.2s 0.6s infinite linear;
}
@media screen and (max-width: 800px){
  .cell-1 {
    width: 10%;
    margin: 6px;
  }
}
/****** KEYFRAME ANIMATIONS ******/
@keyframes quick-glow {
  15% {
    z-index: 99;
    background: #eb5e01;
    box-shadow: 0 0 10px 2px #eb5e01;
  }
}
@keyframes glow {
  50% {
    z-index: 99;
    background: #eb5e01;
    box-shadow: 0 0 10px 2px #eb5e01;
  }
}
@-webkit-keyframes quick-glow {
  15% {
    z-index: 99;
    background: #eb5e01;
    box-shadow: 0 0 10px 2px #eb5e01;
  }
}
@-webkit-keyframes glow {
  50% {
    z-index: 99;
    background: #eb5e01;
    box-shadow: 0 0 10px 2px #eb5e01;
  }
}

.topic{
  background: linear-gradient(55deg,#eb5e01 0%,#eb5e01 40%,#FFF 40%,#FFF 100%);
  overflow: hidden;
}
.topicBox{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 2em;
}
.topicBox dt{
  width: 20%;
  font-size: 4em;
  color: #f1ceb6;
}
.topicList{
  width: 75%;
  height: 70px;
  overflow-y: scroll;
  color:#000;
  line-height: 1.8;
  padding: 1em 0;
}
.topicText{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.topicText:not(:last-child){
  padding: 0 0 1em;
}
.topicText a{
  background: #fff;
  color: #eb5e01;
  text-decoration: underline;
}
.topicText span{
  border: 1px solid #000;
  margin: 0 1em 0 0 ;
  padding: 0 0.5em;
}

.remodal ul.link li{
  width: fit-content;
  display: block;
  margin: 0 auto;
}
.remodal ul.link li:not(:last-child){
  margin: 0 auto 0.5em;
}
@media screen and (max-width: 800px){
  .topic{
    background: linear-gradient(75deg,#eb5e01 0%,#eb5e01 30%,#FFF 30%,#FFF 100%);
  }
  .topicBox{
    display: block;
  }
  .topicBox dt{
    width: 100%;
    font-size: 1.56em;
  }
  .topicList{
    width: 100%;
    padding: 1em 0 1em;
  }
  .topicText{
    display: block;
  }
  .topicText span{
    display: block;
    width: fit-content;
  }
}