characterSlickcharacterSlick@charset "UTF-8";
/* CSS Document */


 /*全要素へbox-sizing */
 * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
 font-size: 16px;
  font-size: 1.6rem;  
}

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
}

html, body {  
background: #000;
 margin: 0;
padding: 0;
width:100%;
 line-height: 0;  /*全ての要素にline-height設定*/
  
 /* font-family: "a-otf-ud-shin-go-pr6n","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
 /* font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  
  font-family: "source-han-sans-japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 400;
	
	/*height: 100%;*/ /* 100%だとモーダルに影響*/
	
	

	
	  /*font表示最適化 ON*/
 -webkit-font-smoothing: subpixel-antialiased;
 -moz-osx-font-smoothing: auto;
 
/*-moz-osx-font-smoothing: grayscale; 
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;*/
 }
 
body {
	
	
	
}



img{
	  touch-callout:none;
	  user-select:none;
	  -webkit-touch-callout:none;
	  -webkit-user-select:none;
	  -moz-touch-callout:none;
	  -moz-user-select:none;
	}



.none{
	display: none;	
}

.img100 img {
	width:100%;
}

.container-full{
	width:100%;
}

a{
	color: #F7F7D5;
	text-decoration: none;
}

a:hover{
	color: #ffffff;	
}

a.whiteBase {
	padding: 3px;
	font-weight: 600;
	color: hsla(25,100%,50%,1.00);
}


.baseBlack{
	background-color: hsla(0,0%,0%,1.00);	
}

.textRight{
	text-align: right;	
}


.mb50{
margin-bottom: 50px;	
	
	
}

.bm50{
	
margin-top: 50px !important;		
}

.bm100{
	
margin-top: 100px !important;		
}

.bp50{
	
padding-top: 50px !important;		
}

.bp100{
	
padding-top: 100px !important;		
}




/*loadingicon*/

.fadeBase {
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	opacity: 0;
   }
   


.loadingicon{
	position: absolute;
	
		width: 200px;
	margin-top: 0px;
	margin-left: -100px;
	
/*	width: 54px;
	margin-top: -45px;
	margin-left: -27px;*/
	top: 50%;
	left: 50%;
	z-index: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	opacity: 0;
	display: none;
	
}

.loadingicon img{
width:100%;	
}


.fadeOut {
      opacity: 0;
      }
	  
	     .fadeIn {
      opacity: 1;
      }

.animate_01{
	 opacity: 0;
	 -webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
-ms-animation-duration:1.5s;
-o-animation-duration:1.5s;
animation-duration:1.5s;
}


.flex-center{
	 display: -webkit-flex; /* Safari用 */
  display: flex;
  -webkit-justify-content: center; /* Safari用 */
  justify-content: center;
  -webkit-align-items: center; /* Safari用 */
  align-items: center;
}


.container-min{
width: 100%;
/*	max-width: 1170px;
	min-width:768px !important;	*/
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	padding: 0;
	margin: 0 0 30px 0;
}





/* デフォルト：1281px以上用（PC用） */
	

	
@media screen and (max-width: 1280px) {
	/* 960px～1280px以下用（PC用） */
}	
		
	
@media screen and (max-width: 959px) {
	/* 600px～959px以下用（タブレット用） */
}
@media screen and (max-width: 599px) {
	/* 599px以下用（スマートフォン用） */
} 
  

@media screen and (max-width: 320px) {
	/* 320px以下用（5S用） */
	
}




#topArea{
	width: 100%;
	height: 100vh;
	padding-top: 0%;	/*max-width: 1200px;*/
	padding-bottom: 0px;	/*min-width: 860px !important;	*/
	position: relative;
	background-image: url(../img/sp_top0_img.jpg);
	background-repeat: no-repeat;
	overflow: hidden;
	background-position: center center;
	background-size: 100% auto;
	background-color: hsla(0,0%,0%,1.00);
}


#topArea1 {
	width: 100%;
	/*height: 100%;*/
	/*min-height: 100%;
	*/
	padding-top: 0%;	/*max-width: 1200px;*/
	padding-bottom: 0px;	/*min-width: 860px !important;	*/
	position: relative;
}

.imgTop{
	width: 100%;
	position: relative;
	top: 0px;
	overflow: hidden;
	
}

.top_bnr_ticket{
	width: 160px;
	position: absolute;/* 親boxはrelative*/
	bottom: 35%;
}


	.btDown{
	width: 100%;
	position: absolute;
	z-index: 9980;
	bottom: 0%;
	}
	
	.btDown img{
		width:30px;	
		}
	
	.btImg a img{
	opacity: 0.8;
	margin-bottom: 10px;
	}
	
	
	.btImg a img:hover{
	opacity: 1;	
	}
	
	
/*________________________________________________________ menu*/

.flex-basic{
	  display: -webkit-flex; /* Safari */
  display: flex;
   -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}


#topMenuArea{
background-color: hsla(0,0%,0%,1.00);	
	
}

.menuBt{
	width: 100%;
	background-color: hsla(0,0%,10%,1.00);
	padding: 1rem;
	border-left: 1px solid hsla(0,0%,22%,1.00);
	border-right: 1px solid hsla(0,0%,22%,1.00);
	border-bottom: 0px solid hsla(0,0%,22%,1.00);
	border-top: 1px solid hsla(0,0%,22%,1.00);
	text-align: center;
}

.menuBt:last-child{
	border-bottom: 1px solid hsla(0,0%,22%,1.00);
}

.menuBt a{
	
	
	
}



.menuEn {
	font-family: "brothers",sans-serif;
	/*font-family: "paralucent-condensed",sans-serif;*/
	font-weight: 400;
	font-size: 2.5rem;
	line-height: 1em;
	
		/*letter-spacing: 0.02em;*/
}

.menuJp {
	/*font-family: "a-otf-ud-shin-go-pr6n";*/
	line-height: 1em;
	font-size: 65%;
	letter-spacing: 0.1em;
	font-weight: 600;
	
}





.cornerTitle{
	width: 100%;
	background-color: hsla(0,0%,100%,0.75);
	padding: 30px 10px 10px 10px;
	font-size: 3.2rem;
	color: hsla(0,0%,25%,1.00);
}

.cornerTitle .menuEn,
.cornerTitle .menuJp{
	/*color: hsla(0,0%,25%,1.00);*/
}



.cornerTitle-black{
	color: hsla(0,0%,100%,1.00);
	background-color: hsla(0,0%,0%,1.00);
}





  /*_____________________________________________ SNS*/
	
 .social-button {
  position: relative;
  overflow: hidden;
  margin: 0px auto !important;
  padding: 10px 0;

}
.social-button > ul {
  position: relative;
  left: 50%;
  float: left;
  margin: 0px;
  padding: 0px;
  list-style: outside none none;
}
.social-button > ul > li {
  position: relative;
  left: -50%;
  float: left;
  margin: 0px 5px;
  padding: 0px;
  line-height:1.7;
}
.social-button > ul > li .fb-like > span {
  vertical-align: 0 !important;
}


li.fb{
	top: 3px;
	width: 70px;
}

li.tw{
	top:3px;
	width: 70px;
	
}

li.line{
	top:-1px;
width: 88px;

}


li.gp{
	width:60px;
}

li.film{
	top:-1px;
	width:100px;
}

li.eigacom{
	width: 90px;
}

li.twitterIcon{
	color: #FFFFFF;
	
	font-size: 19px;
	margin-left: 18px;
}

li.twitterIcon a{
	color: #C7C7C7;
}

li.twitterIcon a:hover{
	color: #FFFFFF;	

}

.twitterIconText{
	font-size: 50%;
	color: #C7C7C7;
	line-height: 10px!important;/*	background-color: #921D1F;
	display: block;
	height: 18px;*/
}







.snsWrapper{

}



.flex-social{
	width:100%;
	
	display: -webkit-flex; /* Safari */
  display: flex;
  
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
  
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
  
  	
	padding: 30px 0 10px 0;
	
}


.social-share{
	top: 0px;
	position: relative;
	margin: 0px;
}

     .social-share a.twitter-share {
	height: 32px;
	width: 32px;
	
	border-radius: 3px;
	font-size: 30px;
	display: inline-block;
	text-align: center;
	color: #F7F7D5 !important;
	
	-webkit-transition: all 0.2s !important;
	-moz-transition: all 0.2s !important;
	-ms-transition: all 0.2s !important;
	-o-transition: all 0.2s !important;
	transition: all 0.2s !important;
	
      }
     .social-share a.twitter-share:hover,.social-share a.twitter-share:focus {
	/*background-color: hsla(0,0%,100%,1);*/
}
     .social-share a.facebook-share:hover,.social-share a.facebook-share:focus {
      background-color: #E6000E; }
     .social-share a.facebook-share {
      height: 50px;
      width: 50px;
      background-color: #3B5898;
      border-radius: 3px;
      font-size: 21px;
      display: inline-block;
      text-align: center; }
     .social-share a {
      color: #fff; }
     .social-share a:hover {
      color: #fff; }
     .social-share a i {
      margin-top: 8px; }
	  
	  .social-share-large a{
		  height: 53px !important;
	width: 60px!important;
	font-size: 35px!important;
	  }
	  
	  @media screen and (max-width: 360px) {
		   .social-share-large a{
		  height: 40px !important;
	width: 40px!important;
	font-size: 25px!important;
	  }
	  
	  .socialBox-txt{
	color: hsla(0,0%,62%,1.00);
	text-align: center;
	font-size: 40%;
	line-height: 1em;
}
	  }


.socialLinkBox{
	
	
	}


.socialLink{
	padding-top:0px;
	display: inline-block;
	margin: 0px 0px 0px 0px;
}

.socialBox{
	text-align: center;
	margin-left: 2px;
	margin-right: 2px;
}

.socialBox-txt{
	color: hsla(0,0%,0%,1.00);
	text-align: center;
	font-size: 60%;
	line-height: 1em;
	margin-top: 3px;
	font-weight: 600;
}


.bnrBoxWrapper{
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-direction: row; /* Safari */
	flex-direction: row;
	position: absolute;
	z-index: 999;
}

.flexBnr{
	width:120px;
}

.flexBnr img{
	width:100%;
}


.bnrBox{
	width: 100px;
	height: auto;
	margin-top: 0px !important;
}

.bnrBox2{
	width: 100px;
}

.bnrMargin{
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}



.footer-wblogo{
	width: 100%;
	line-height: 0px;
	background-color: hsla(0,0%,0%,1.00);
	text-align: center;
	margin: 20 0 20 0;
}

.footer-wblogo img{
	width: 40%;
	
}

.footer-link{
	width: 50%;
	line-height: 0px;
	background-color: hsla(0,0%,0%,1.00);
	text-align: center;
}

.footer-bnr img{
	width: 100%;
	
}




/*burger*/

.gMenu{
	right:0px !important;
}

#gMenuBurger{
	z-index: 99999;
	
}

.castCloseBt{
	z-index: 9999;
	
}

.modalClose{
	position: fixed !important;
}


     .burger-menu {
	position: fixed;
	width: 50px;
	height: 46px;
	cursor: pointer;
	right: 5px;
	top: 5px;
	/*display: none;*/
	background-color: hsla(0,0%,0%,0.70);	/*padding:0 10px 0 10px;*/	
}

  .burger-menu.fixed2 {
	opacity: 1;
}

.burger {
	position: absolute;
	background-color: #fff;
	width: 38px;
	height: 3px;
	top: 50%;
	right: 6px;
	top:22px;
	opacity: 1;
	padding:0 0px 0 0px;
	
}
.burger::before {
  position: absolute;
  background-color: #fff;
  width: 38px;
  height: 3px;
  top: 13px;
  content: "";
  display: block;
  
}
.burger::after {
  position: absolute;
 background-color: #fff;
  width: 38px;
  height: 3px;
  bottom: 13px;
  content: "";
  display: block;
  
}
.burger::after, .burger::before, .burger {
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
.burger-menu.menu-on .burger::after{
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
  bottom: 0px;
}
.burger-menu.menu-on .burger::before{
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
  top: 0px;
}
.burger-menu.menu-on .burger{
	background-color: hsla(0,0%,89%,0.00);
}
/* useless css */
.burger-menu {
/*  margin-left:auto;
  margin-right: auto;*/
}




@media screen and (max-width: 599px) {
	
 .burger-menu {
	display: block;
}

}




		/*_________________________modal temp	*/
		
		#traler{
			z-index: 999999 !important;
		}
	
	  .m-layout{
	background-color: hsla(359,95%,32%,1.00);
	position: absolute;
	z-index: 9999;
	width: 100%;
	height:100%;
   }
   
   #modalClose{
	color: hsla(0,0%,100%,0.80);
	font-family: "almaq-rough";
	font-size: 170% !important;
	/*background-color: #861113;*/
	text-align: right;
	margin-right: 30px;	
}

#modalClose a{
	color: hsla(0,0%,100%,0.80);   
	font-size: 170% !important;
}

#modalClose a:hover{
	color: #FF0004;
}


@media (max-width: 768px) {
	
	.modal2 {
	display: none;
	width: 90%;
	
	}
	
	#modalClose{
	font-size: 150%;
	
	
}
	
	
}





/*slick*/


    .slider {
        width: 75%;
        margin: 0px auto;
    }
	
	@media screen and (max-width: 599px) {
		
		.slider {
        width: 100%;
        margin: 0px auto ;
    }
	
}
	
	

    .slick-slide {
      margin: 0px 5px;
    }

    .slick-slide img {
      width: 100%;
    }
	
	.slick-slide .youtube {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        
    }
	
	.youtube{
		
	}
	
	.sliderwaku{
	display: block;
	padding: 0px 0 0px 0;
	overflow: hidden;	/*background-color: hsla(32,100%,46%,0.74);*/
	}






/*youtube*/
.youtube {
	position: relative;
	/* padding-bottom: 56.25%;
    padding-top: 30px;*/
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-color: #FFFFFF;
}





/*______________________________trailer*/

.regular{
	padding: 10px 0 10px 0;
	width: 100%;
/*background-color: hsla(31,100%,46%,1);*/
}

.regular2{

	padding:5px 0 5px 0;
	width: 100%;
		/*background-color: hsla(0,0%,100%,0.8);	*/
}

.regular3{

	padding:5px 0 5px 0;
	width: 100%;
	min-height:5em;

		/*background-color: hsla(0,0%,100%,0.8);	*/
}

.trailerSection{
	width: 100%;
	overflow: hidden;
	padding: 0px 0 30px 0;

}

.slick-dots li button::before {
	-moz-osx-font-smoothing: grayscale;
	color: #fff;
	content: "•";
	font-family: "slick";
	font-size: 10px;
	height: 20px;
	left: 0;
	line-height: 20px;
	opacity: 0.4;
	position: absolute;
	text-align: center;
	top: 0;
	width: 20px;
}

/*______________________________introduction*/


.introductionSection{
	overflow: hidden;
	padding: 0px 0px 0;
	
}

/*______________________________story*/



.storySection{
	overflow: hidden;
	padding: 0px 0 0px 0;
	background-color: hsla(0,0%,0%,1.00);
	color: hsla(0,0%,100%,1.00);
}



.aboutText{
	
	
}

.storySlideWaku{
	/*background-color: hsla(31,100%,46%,0.85);*/
	padding-bottom: 100px;
}

.storySlide{
	padding: 0px 0 0px 0;
	
	width: 100%;
	
}



.textArea p{
	background-position: center 120px;
}

.textArea-pink{
	color: hsla(0,0%,100%,1.00);
	background-color: hsla(0,0%,0%,1.00);
}

.textArea-white{
	background-color: hsla(0,0%,100%,0.8);	
}

.textArea-white p{
	/*color: #dd3c79;*/
}

.textArea-yellow{
	color: hsla(0,0%,100%,1.00);
	background-color: hsla(0,0%,0%,1.00);
}

.textArea-white2{
	color: hsla(31,100%,46%,1);
	background-color: hsla(0,0%,100%,0.8);	
}

.boldCenterTitle{
	display: block;
	text-align: center;
	font-weight: 700;
	font-size: 120%;
}


/*________________________________________cast*/

.castSet{
	 display: -webkit-flex; /* Safari */
  display: flex;
  
   -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

.castSet2{
	width:33.33333%;
}



.castThumb{
	width:33.33333%;
}

.castThumb2{
width:100%;
}

.castThumb3{
width:100%;
}

.castThumb img,
.castThumb2 img,
.castThumb3 img{
	width:100%;
}


/*________________________________________zoom*/

#imgContainer{
	width: 100%;
	height: 400px;
	background-color: #000;
	/*background-color: hsla(337,70%,55%,0.8);*/
}





#Stage {
	margin-top: 0px;
	position: relative;
	/*-webkit-transform: translateY(-10%);
	-ms-transform: translateY(-10%);
	transform: translateY(-10%);*/
	width: 100%;
	/*max-width: 1200px;*/
	
}



.am50 {
	margin-bottom: 50px;
	
}

.am30 {
	margin-bottom: 30px;
	
}

.am20 {
	margin-bottom: 20px;
	
}



.am100 {
	margin-bottom: 100px;
	
}

.ap100{
	padding-bottom:100px;
	
}





.trailerMovie{
	padding: 15px 0;
	width: 90%;
	margin: auto;
}
.trailerMovieInner{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.trailerMovieInner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.trailerMovieBt{
	padding: 10px 20px 9px;
	width: 52.5%;
	box-sizing:border-box;
	margin: 20px auto;
	border: #535353 1px solid;
}


.mainBnr{
	margin-top: 60px;
	
	
}

.mainBnr2{
	margin: 5px 0;
	}


.tieupBnrArea{
 display: -webkit-flex; /* Safari */
  display: flex;
	 -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
	 -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
	
	margin:5px 0;
}

.tieupBnr{
	width:49.5%;
	margin:2px 0
}

.tieupBnr img{
	width:100%;
	
}

.newsText{
	width: 100%;
	line-height: 1.7em;
	color: hsla(0,0%,100%,1.00);
	font-size: 100%;
	padding: 0.5em;
	background-color: hsla(0,2%,12%,1.00);
}



.ytIcon {
	
	
}


.ytIcon img {
	width:80%;
	
	
}

.twitterArea{
	
padding:0 0px;
	
/*width:80%;
margin:auto;*/
	
}

.twitterSet{
	background-color: hsla(354,86%,34%,1.00);	
	padding:0 2% 2%;
	
}

.twitter-timeline{
	
	margin:auto;
}