/* CSS Document */
@charset "utf-8";

* {
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 -o-box-sizing: border-box;
	 -ms-box-sizing: border-box;
	 box-sizing: border-box;
	 text-decoration: none;
	 margin: 0;
	 padding: 0;
	 list-style: none;
	 -webkit-margin-before: 0;
	 -webkit-margin-after: 0;
	 -webkit-padding-start: 0;
}

.clearfix:after {
		content: "";
		clear: both;
		display: block;
}

html {
		font-size: 62.5%; 
		text-align: justify;
		text-justify: inter-ideograph; 
		line-break: strict;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
}
body { 
		font-family: 'Asul', 'Droid Serif', Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
		-webkit-text-size-adjust: 100%;
		margin: 0;
		padding: 0;
		perspective: 1px;
		height: 100%;
		background: url(../images/backpattern.gif) repeat;
		z-index: 1;
		position: relative;
}
img {
		border-style: none;	max-width: 100%; height: auto;
}
a:visited { color: #FFF;}

/*oekora*/
.wrapper {
    padding-top: 60px;
}
.tab { display: none;}


/*==================================
common
==================================*/
.wrapper .obiTitle {
    background: #212121;
    color: #FFF;
    font-size: 3rem;
    text-align: center;
    padding: 30px 0;
    letter-spacing: 0.3rem;
}


/*__ loadingArea _______________________*/
.wrapper .loadingArea {
    margin: 0 auto 60px;
    padding: 0 0 70px;
    position: relative;
    width: 80%;
    text-align: center;
}
.wrapper .loadingArea img {
    opacity: 0;
    display: block;
}
.wrapper .loadingArea img.image01 {
    width: 300px;
    margin: 60px auto 0;
}
.wrapper .loadingArea img.image02 {
    margin: -295px auto;
    width: 300px;
}
.wrapper .loadingArea img.image03 {
    margin: 0 auto;
    width: 60%;
}
.wrapper .loadingArea img.image04 {
    margin: 50px auto 0;
}
.wrapper .loadingArea img.image05 {
    margin: 330px auto 0;
}
.wrapper .loadingArea .arrow {
		opacity: 0;
		background:url(../images/arrow_img_down.png) no-repeat;
		width: 22px;
		height: 14px;
    margin: 40px auto 0;
    animation: translate 0.8s ease infinite;
		position: absolute;
		bottom: 3%;
		left: 49.3%;
}

.wrapper .pageTop {
	  display: block;
	  margin: 0 auto 20px;
	  text-align: center;
}

@-webkit-keyframes translate {
    0% { -webkit-transform: translate(0, 0)}
    50% { -webkit-transform: translate(0, 10px)}
}

#door #keyArea .keyImg a:hover {
    animation: none;
    -moz-animation: none;
    -webkit-animation: none;
}


.wrapper .loadingArea .date {
		opacity: 0;
		color: #FFF;
		font-size: 3rem;
		margin: 40px 0 15px;
		letter-spacing: 1.6px;
}
.wrapper .loadingArea .date br {
	  display: none;
}
.wrapper .loadingArea .date span {
		font-size: 2rem;
}
.wrapper .loadingArea a.place {
		color: #FFF;
		font-size: 2.5rem;
		border-bottom: 1px solid;
		padding-bottom: 2px;
		letter-spacing: 1.6px;
		opacity: 0;
}
.wrapper a.place:hover {
	  border-bottom: none;
}
.wrapper a.ticket {
    display: block;
    margin: 50px auto 0;
    width: 269px;
    height: 70px;
		
    background: url(../images/eplus_img.png) no-repeat top left;
    overflow: hidden;
		
		
    white-space: nowrap;
    text-indent: 100%;
    opacity: 0;
}
.wrapper .loadingArea .sns {
    margin: 30px auto 0;
    width: 270px;
}
a#pageTop {
		opacity: 0;
		line-height: 2;
}
.wrapper a.ticket:hover {
		background: url(../images/eplus_img.png) no-repeat bottom left;
}

.wrapper .ticketArea a.ticket {
    margin: 50px auto;
    opacity: 1;
    /* text-indent: 100%; */
    /* width: 180px; */
}
.wrapper .ticketArea a.ticket a {
}


/*__ conceptArea _______________________*/

.wrapper #conceptArea {
    background: #000;
    color: #FFF;
    text-align: center;
    letter-spacing: 0.2rem;
    opacity: 0;
}
.wrapper #conceptArea .text {
    padding: 100px 0;
    line-height: 3.6;
    font-size: 2.3rem;
}

.wrapper #footer {
    background: #000;
    min-height: 90px;
    text-align: center;
    padding: 25px;
    opacity: 1;
}
.wrapper #footer #boxArea {
	  margin: 0 auto 15px;
}
.wrapper #footer .sns {
    margin-bottom: 10px;
}
.wrapper #footer small {
    color: #FFF;
    font-size: 1.2rem;
}
.wrapper #footer small a {
    color: #FFF;
    border-bottom: 1px solid;
    padding-bottom: 1px;
    opacity: 1;
}
.wrapper #footer small a:hover {
    border-bottom: none;
}
.wrapper #footer small br {
	  display: none;
}

/*==================================
stageArea
==================================*/

#stageArea {
    background: #000;
    position: relative;
    z-index: -1;
}
#stageArea .slide {
	  position: relative;
	  padding: 25vh 10%;
	  min-height: 100vh;
	  width: 100vw;
		box-sizing: border-box;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
}
#stageArea .slide:before {
	content: "";
	position: absolute;
	top: 0;
  bottom: 0;
  left:0;
	right:0;
	z-index: 1;
}

#stageArea .slide .title {
	width: 50%;
  
	padding: 7% 5%;
  border-radius: 5px;
	background: rgba(255,255,255, 0.8);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
	margin-left: auto;
	z-index: 3;
	position: relative;
	font-size: 1.8rem;
}
#stageArea .slide .title .stageNo span {
    font-size: 1.5rem;
}
#stageArea .slide .title h1 {
    font-size: 2.4rem;
    margin: 20px 0 30px;
    line-height: 1.4;
    text-align: initial;
}
#stageArea .slide .title h1 span {
    font-size: 1.6rem;
    display: inline-block;
}
#stageArea .slide .title h1.credit {
}
#stageArea .slide .title .songs {
    line-height: 1.1;
    font-size: 1.5rem;
}
#stageArea #slide3 .title .songs li:first-child {
    margin-bottom: 15px;
}

#stageArea .slide .title .lyrics {
	  font-family: 'Droid Serif',"Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
}
#stageArea .slide .title .lyrics {
    font-size: 1.5rem;
    margin: 40px auto;
    width: 80%;
    line-height: 2;
}

#stageArea .slide:nth-child(4) .title {
		 margin-left: 0;
		 margin-right: auto;
}
#stageArea .slide,
#stageArea .slide:before {
		background: 50% 50% / cover;
}

#stageArea #slide1:before {
		background-image: url(../images/stage_img_01.jpg);
		background-attachment: fixed;
		background-repeat: no-repeat;
}
#stageArea #slide2 {
		background-image: url(../images/stage_img_02.jpg);
}
#stageArea #slide3:before {
		background-image: url(../images/stage_img_03.jpg);
		background-attachment: fixed;
		background-repeat: no-repeat;
}
#stageArea #slide4 {
		background-image: url(../images/stage_img_04.jpg);
}

.wrapper .loadingArea a.sp {
		opacity: 0;
}

@media screen and (max-width: 1440px) {

.tab { display: block;}
.wrapper .loadingArea img.image01 {
    width: 200px;
    margin: 50px auto 0;
}
.wrapper .loadingArea img.image02 {
    margin: -200px auto;
    width: 200px;
}
.wrapper .loadingArea img.image03 {
    margin: 0 auto;
    width: 80%;
}
.wrapper .loadingArea img.image04 {
    margin: 40px auto 0;
    width: 40%;
}
.wrapper .loadingArea img.image05 {
    margin: 250px auto 0;
}
.wrapper .loadingArea a {
    margin: 40px auto 0;
    width: 269px;
    text-indent: 100%;
}

.wrapper #conceptArea .text {
    font-size: 1.7rem;
}

#stageArea .slide {
    padding: 10vh 5%;
}
#stageArea .slide,
#stageArea .slide:before {
    background: 10% 0 / cover;
}
#stageArea #slide3:before {
    background-position: 70%;
}
}

@media screen and (max-width: 768px) {
.wrapper .loadingArea img.image01 {
    width: 30%;
    margin: 50px auto 0;
}
.wrapper .loadingArea img.image02 {
    margin: -170px auto;
    width: 30%;
}
.wrapper .loadingArea img.image03 {
    margin: 0 auto;
    width: 100%;
}
.wrapper .loadingArea img.image04 {
    margin: 40px auto 0;
    width: 70%;
}
.wrapper .loadingArea img.image05 {
    margin: 200px auto 0;
}
.wrapper .loadingArea a {
    margin: 50px auto 0;
}
#stageArea .slide {
}
#stageArea .slide,
#stageArea .slide:before {
    background: 10% 0 / cover;
    background-size: 200%;
    min-height: 40vh;
    padding: 5vh 5%;
    line-height: 1.2;
}
#stageArea #slide3:before {
    background-position: 70%;
}
#stageArea .slide .title h1 {
    font-size: 2rem;
    margin: 20px 0;
}
#stageArea .slide .title .lyrics {
    margin: 20px auto;
    line-height: 1.8;
}
}


@media screen and (min-width: 668px) {
.sp { display: none!important;}
}


@media screen and (max-width: 667px) {
.wrapper {
		padding-top: 20px;
}
.wrapper .loadingArea {
    margin: 20px auto 0;
}
.wrapper .loadingArea img.sp { display: none;}
.wrapper .loadingArea a.sp img {
    opacity: 1;
}
.wrapper .loadingArea img.image01 {
    width: 20%;
    margin: 20px auto 0;
}
.wrapper .loadingArea img.image02 {
    margin: -90px auto;
    width: 20%;
}
.wrapper .loadingArea img.image03 {
    margin: 0 auto;
    width: 70%;
}
.wrapper .loadingArea img.image04 {
    margin: 15px auto 0;
    width: 50%;
}
.wrapper .loadingArea img.image05 {
    margin: 105px auto 0;
    width: 30%;
}
.wrapper .loadingArea .date {
		font-size: 2rem;
		margin: 30px 0 0;
}
.wrapper .loadingArea .date span {
		font-size: 1.5rem;
}
.wrapper .loadingArea a.place {
		font-size: 1.8rem;
}
.wrapper .loadingArea a {
    margin: 20px auto 0;
    width: 50%;
		line-height: 1.4;
}
.wrapper .loadingArea a.pc { display: none;}
.wrapper .loadingArea a.sp { 
    display: block!important;
    width: 27%;
    height: auto;
    background: none;
    margin: 20px auto 15px;
}
.wrapper .loadingArea .arrow {
    bottom: 8%;
}

.wrapper .obiTitle {
    font-size: 2rem;
}
.wrapper #conceptArea .text {
    padding: 40px 0;
    font-size: 1.4rem;
}
#stageArea .slide .title {
    width: 60%;
}
#stageArea .slide,
#stageArea .slide:before {
		min-height: 200px;
		/* padding: 10vh 5%; */
		background-size: 150%;
}
#stageArea .slide .title h1 {
    font-size: 1.8rem;
}
#stageArea .slide .title .songs {
    font-size: 1.3rem;
}
#stageArea .slide .title .lyrics {
    font-size: 1.2rem;
}
#stageArea .slide img {
		position: absolute;
		top: 50%;
		left: 35%;
		padding: 5px;
		border-radius: 5px;
		background: rgba(240,230,220, .7);
		box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

#stageArea #slide1:before {
		background-attachment: inherit;
		min-height: 100px;
}
 
#stageArea #slide2 {
    background-repeat: no-repeat;
    min-height: 0;
    padding: 20px 5%;
}
#stageArea #slide3:before {
		background-attachment: inherit;
		background-position: 70% 0;
}
#stageArea #slide4 {
		background-image: url(../images/stage_img_04.jpg);
		background-repeat: no-repeat;
}

.wrapper .ticketArea a.ticket.pc {
    display: none;
}
.wrapper a.ticket {
    text-indent: inherit;
    background: none;
    width: 180px;
    margin: 30px auto 0!important;
}

.wrapper #footer {
    /* padding: 10px; */
}
.wrapper #footer .sns {
    margin: 0 auto 3px;
}
.wrapper #footer small {
    color: #FFF;
    font-size: 1.5rem;
}

}

@media screen and (max-width: 480px) {
.pc { display: none!important;}
.tab { display: none;}
body {
	  background-size: 5%;
}
.wrapper {
    padding-top: 20px;
}
.wrapper .loadingArea {
    margin: 30px auto 0;
    width: 85%;
}
.wrapper .loadingArea img.pc { display: none;}
.wrapper .loadingArea img.sp { display: block;}
.wrapper .loadingArea img.image01 {
    width: 40%;
    margin: 0px auto 0;
}
.wrapper .loadingArea img.image02 {
    margin: -110px auto;
    width: 40%;
}
.wrapper .loadingArea img.image03 {
    margin: 20px auto;
    width: 100%;
}
.wrapper .loadingArea img.image04 {
    margin: 20px auto 0;
    width: 100%;
}
.wrapper .loadingArea img.image05 {
    margin: 130px auto 0;
    width: 50%;
}
.wrapper .loadingArea .date {
		font-size: 2rem;
		margin: 20px 0 0;
		line-height: 1.2;
}
.wrapper .loadingArea .date br {
	  display: block;
}
.wrapper .loadingArea .date span {
		font-size: 1.5rem;
}
.wrapper .loadingArea a.place {
		font-size: 1.5rem;
}

.wrapper .loadingArea a {
    margin: 20px auto 0;
    width: 50%;
}
.wrapper .loadingArea a.sp { 
    width: 54%;
    margin-bottom: 10px;
}
.wrapper .loadingArea a.sp img {
    opacity: 1;
}

.wrapper .obiTitle {
    font-size: 2rem;
    padding: 20px 0;
}
.wrapper #conceptArea .text {
    font-size: 1.2rem;
    padding: 40px 3%;
    line-height: 3;
}

.wrapper #footer {
    padding: 20px;
    min-height: 70px;
}
.wrapper #footer #boxArea {
		margin: 5px auto;
}
.wrapper #footer .sns {
    margin: 0 auto 3px;
}
.wrapper #footer small {
    color: #FFF;
    font-size: 1rem;
		clear: both;
}
.wrapper #footer small br {
	  display: block;
}
.wrapper #footer small a {
    padding: 0;
}

/*==================================
stageArea
==================================*/

#stageArea .slide {
	  position: relative;
	  padding: 20px 0;
	  box-sizing: border-box;
	  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
	  transform-style: inherit;
}
#stageArea .slide:before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left:0;
		right:0;
		z-index:-1;
}
#stageArea .slide .title {
		width: 85%;
		margin: 230px auto 0;
		padding: 5% 8%;
		border-radius: 5px;
		background: rgba(240,230,220, .7);
		box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
#stageArea .slide .title .stageNo {
    font-size: 1.4rem;
}
#stageArea .slide .title h1 {
    margin: 10px 0;
    font-size: 1.6rem;
}
#stageArea .slide .title h1 span {
    font-size: 1.2rem;
    text-indent: -0.5em;
    display: block;
}
#stageArea .slide .title .songs {
    font-size: 1.2rem;
}
#stageArea .slide .title .lyrics {
    font-size: 1rem;
    margin: 10px auto;
}
#stageArea .slide:nth-child(1) .title,
#stageArea .slide:nth-child(4) .title {
	  margin-left: auto;
 	  margin-right: auto;
}
#stageArea .slide:nth-child(3) .title {
	  margin-right: auto;
}
#stageArea .slide,
#stageArea .slide:before {
		min-height: 200px;
}
#stageArea .slide img {
		position: absolute;
		top: 50%;
		left: 35%;
		padding: 5px;
		border-radius: 5px;
		background: rgba(240,230,220, .7);
		box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

#stageArea #slide1:before {
		background-attachment: inherit;
		min-height: 100px;
}
 
#stageArea #slide2 {
    background-repeat: no-repeat;
    min-height: 0;
    padding: 20px 0;
}
#stageArea #slide3:before {
		background-attachment: inherit;
		background-position: 90% 0;
}
#stageArea #slide4 {
		background-image: url(../images/stage_img_04.jpg);
		background-repeat: no-repeat;
}

.wrapper .ticketArea a.ticket {
    width: 50%;
    background: none;
    margin: 20px auto 10px;
}
.wrapper .ticketArea a.ticket img {
}

}