@charset "UTF-8";
html{overflow:auto;}
body {
  overflow: hidden;
  width: 100%;
  font-size: 1.2rem;
}
body.bg-img{
  background-image: url("../img/sp_bg.jpg");
}
#btn_ticket {
  width: 80px;
}
.title_wa{
  width: 10px;
}
/**********************************************************
 * ローディング
 **********************************************************/
#loading_barWrap {
    width: 90vw;
}
.fade-img {
  position:relative;
  width: 50vw;
  top:calc(50% - 35vw) ;
  top:-webkit-calc(50% - 35vw) ;
  left:calc(50% - 25vw) ;
  left:-webkit-calc(50% - 25vw) ;
}
/**********************************************************
 * ヘッダー
 **********************************************************/
header{
  padding: 10px;
  width: 98%;
  width: -webkit-calc(100% - 20px);
  width: calc(100% - 20px);
  height: 5vh;
}
header .nav_global ul {
  width: 100%;
}
/* ハンバーガーメニュー */
.openbtn1-container {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2000;
}
.openbtn1{
  position: relative;
  cursor: pointer;
  width: 13.333vw;
  height: 13.333vw;
}
.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: #fff;
  width: 6vw;
  }
.openbtn1 span:nth-of-type(1) {
  top:15px;
}
.openbtn1 span:nth-of-type(2) {
  top:23px;
}
.openbtn1 span:nth-of-type(3) {
  top:31px;
}
.openbtn1.active span:nth-of-type(1) {
  background: #0062ad;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
  background: #0062ad;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.sp-header.active {
  right: 0;
}
.sp-header {
  position:fixed;
  z-index: 999;
  top:0;
  right: -120%;
  width:100%;
  height: 100vh;
  background: #FFF;
  transition: all 0.6s;
  padding: 2.666vw 12.66vw 12vw;
  box-sizing: border-box;
  overflow-y: auto;
}
.sp-header .inner {
  text-align: center;
}
.sp-header .logo {
  width: 45.33vw;
  margin: 0 auto;
}
.sp-header .sns-link ul li {
  width: 8.8vw;
  height: auto;
}
.sp-header .nav_global {
  margin-top: 25vw;
}
.sp-header .nav_global li {
  padding: 4vw 0;
}
.sp-header .nav_global li a {
  font-size: 5.33vw;
  color: #0062ad;
}
.sp-header .langbuttons {
  position: absolute;
  top: 20px;
  left: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.sp-header .langbuttons li {
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 44px;
  font-size: 2rem;
  color: #0062ad;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0, 98, 173, 0);
  border-radius: 50%;
  cursor: pointer;
  opacity: .4;
}
.sp-header .langbuttons li.current {
  border-color: rgba(0, 98, 173, 1);
  opacity: 1;
}
.sp-header .langbuttons li + li {
  margin-left: .5em;
}
/**********************************************************
 * メイン
 **********************************************************/
main section .inner {
  width: 100%;
}
#top h1 {
  width: 80%;
  margin: 0 auto;
}
#top .mv {
  width: 96%;
  margin: 0px auto;
}
#top .date {
  width: 198px;
  margin: 0 auto;
}
#top .scroll{
  position: absolute;
  left : 49% ;
  left : -webkit-calc(50% - 8px) ;
  left : calc(50% - 8px) ;
  top:550px;
  width: 10px;
}
/*映画シーン*/
#scene {
  width: 100%;
  min-height: 280vw;
  margin: 50vw auto 32vw 0;
  height: auto;
}
#scene .copy {
  width: 90%;
  top: 82vw;
  left: 6vw;
  font-size: 1.3rem;
}
#scene .copy:before {
    width: 20px;
    height: 20px;
    left: 0;
    top: -30px;
}
#scene .photo1 {
  width: 25vw;
  left:6vw;
  top: -10vw;
  z-index: 2;
}
#scene .photo2 {
  width: 38vw;
  left: 20vw;
  top: 17vw;
}
#scene .photo3 {
  width: 40vw;
  right: 5vw;
  top: 115vw;
}
#scene .photo4 {
  width: 50vw;
  left: 6vw;
  top: 140vw;
  z-index: 1;
}
#scene .photo5 {
  width: 30vw;
  right: 5vw;
  top: 0px;
}
#scene .photo6 {
  width: 35vw;
  right: 10vw;
  top: 180vw;
  z-index: 1;
}
#scene .mv_titlephoto{
  top: 240vw;
  width: 90%;
  left: 5%;
  position: relative;
  padding-top: 56.25%;
}
#scene .mv_titlephoto iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/*お知らせ*/
#news .inner{
  width: 100%;
}
#news h2.title_wa{
  margin-top: 70px;
  margin-bottom:70px;
}
#news h2.title_en{
  width: 70vw;
  top:0;
  left:5vw;
}
#news dl.news_box{
	width: 90%;
  margin: 0 5%;
}
#news dl.news_box dt{
	width: 25vw;
}
#news dl.news_box dd{
	width: 65vw;
}

/*公演について*/
#about .inner{
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
}
#about h2.title_wa{
  right:2vw;
  top:15vw;
}
#about h2.title_en{
  width: 90vw;
  top:0px;
  right:auto;
  left:3vw;
}
#about .about_img{
  position: static;
  top:15vw;
  width: 80%;
  margin:0 10%;
  padding-top:85px;
}
#about .text_box{
  position: static;
  width: 90%;
  margin:0 5%;
  right:0;
}
#about .inner h3{
  margin: 35px 0 15px 0;
  font-size: 1.8rem;
}
#about .logos{
  order: 1;
  width: 90%;
  margin: 0 5%;
}
#about .spotify{
  order: 2;
  width: 90%;
  margin: 20vw 5% 0 5%;
}
#about .works_logo{
  width: 100%;
}
/*スタジオ地図って？*/
#whats .inner{
  width: 100%;
  min-height: 200vw;
  margin: 50vw auto 0 auto;
}
#whats .inner_en{
  height: 100vw;
}
#whats h2.title_wa{
  left:3vw;
  top:30vw;
  background:none;
  padding:0;
}
#whats h2.title_en{
  width: 90%;
  top:20vw;
  right:2vw;
}
#whats .whats_img{
  position: absolute;
  top:30vw;
  right:10%;
  width: 80%;
}
#whats .text_box{
  width: 80%;
  top:90vw;
  left:10%;
}
#whats .text_box h3{
  width: 55vw;
  margin-bottom:7vw;
}
#whats .text_box .line{
  width: 50vw;
  bottom: 15vw;
  right: -5vw;
  left:auto;
}
#whats .text_box dl{
  margin:5vw 0;
}
#whats .text_box dl dt{
  width: 40vw;
}
#whats .text_box dl dd{
  width: 50vw;
  margin-left:5vw;
}
#whats .text_box dl dd .name{
  font-size:2.2rem;
}
/*出演者*/
#cast{
  padding-top:0px;
}
#cast .inner{
  width: 100%;
}
#cast h2.title_wa{
  margin-top:0;
  margin-bottom:10vw;
}
#cast h2.title_en{
  left: 3vw;
  top: -20vw;
  width: 70vw;
}
#cast dl{
  width: 90%;
  margin:0 auto 10vw auto;
  display: block;
}
#cast dl dt{
  width: 80%;
  margin:0 10% 10% 10%;
}
#cast dl dt .cast_photo{
  padding:5vw 5vw 4vw 5vw;
}
#cast dl dt .cast_photo h3{
  font-size:1.2rem;
  margin-bottom:5vw;
}
#cast dl dt .cast_photo .name{
  font-size:1.2rem;
  margin-top:4vw;
}
#cast dl dd{
  width: 90%;
  margin:0 5%;
}
#cast dl dd h3{
  font-size:1.8rem;
  margin-bottom:5vw;
}
/*チケット*/
#ticket .inner{
  padding-top:30vw;
  width: 100%;
}
#ticket h2.title_wa{
  margin-top:0;
  margin-bottom:10vw;
}
#ticket h2.title_en{
  left:3vw;
  top:10vw;
  width: 70vw;
}
#ticket p{
  width: 90%;
  margin:0 auto;
}
#ticket h3{
  font-size:1.8rem;
  width: 90%;
  margin:10vw auto 5vw auto;
}
#ticket dl.ticket_box{
	width: 90%;
  margin:5vw auto 10vw auto;
}
#ticket dl.ticket_box dt{
	padding: 20px 0;
	width: 25vw;
}
#ticket dl.ticket_box dd{
	padding: 20px 0;
	width: 65vw;
}
#ticket ul.price{
	width: 90%;
  margin:5vw auto 10vw auto;
}
#ticket ul.price li{
  font-size:1.7rem;
  padding: 20px 0;
  letter-spacing: 0px;
  line-height: 120%;
}
#ticket ul.price li span{
  display: block;
  margin: 10px auto;
}
#ticket .tokuten_icon{
    color: #FFF;
    font-size: 1.4rem;
    margin-right: 4vw;
    width: 18vw;
    padding: 5px;
}
#ticket .tokuten_img{
  width: 100%;
  margin:10vw auto;
}
#ticket ul.price li .present{
  font-size:1.6rem;
  letter-spacing: 0;
  margin: 20px 0;
  width: 100%;
  text-align: left;
}
#ticket ul.price li .present br{
  display: none;
}
#ticket ul.price li .note{
  font-size:1.2rem;
  margin: 10px 0;
  width: 100%;
  text-align: left;
}
#ticket .ticket_box.senko,
#ticket .ticket_box.ippan{
  display: block;
}
#ticket .ticket_box.senko dt,
#ticket .ticket_box.ippan dt{
  width:100%;
  border-bottom: none;
  padding-bottom:10px;
}
#ticket .ticket_box.senko dt br{
  display: none;
}
#ticket .ticket_box.senko dd,
#ticket .ticket_box.ippan dd{
  width:100%;
  padding-top:0;
}
#ticket .ticket_box .btn{
  width: 100%;
  float: none;
  margin:10px 0;
}
#ticket .addendum{
  width: 84%;
  margin: 5vw auto 5vw 4%;
}
#ticket .ticket_box .note{
  width: 100%;
}
.ticket_box .ippan_end {
  text-align: center !important;
}
/*配信情報*/
#streaming .inner{
  padding-top:30vw;
  width: 100%;
}
#streaming h2.title_wa{
  margin-top:0;
  margin-bottom:10vw;
}
#streaming h2.title_en{
  left:3vw;
  top:10vw;
  width: 70vw;
}
#streaming p{
  width: 90%;
  margin:0 auto;
}
#streaming dl.stream_box{
  display: block;
  width: 90%;
  margin:10vw auto 5vw auto;
  border: none;
}
#streaming dl.stream_box dt{
  padding: 23px 0 0 0;
	width: 100%;
  border: none;
}

#streaming dl.stream_box dt span{
  width: 100%;
}
#streaming dl.stream_box dd{
	width: 100%;
  border: none;
}
#streaming .stream_ticket{
  display: block;
  }
#streaming .stream_ticket > li{
  width: 90%;
  padding: 25px 0;
  margin: 0 auto 10px auto;
  }
#streaming .stream_ticket li .logo{
  width: 80%;
  }
#streaming .addendum{
  width: 80%;
  margin: 0 auto 0 10%;
}
/*グッズ*/
#goods .inner{
  width: 100%;
  margin: 30vw auto 40vw auto;
}
#goods h2.title_wa{
  right:2vw;
  top:15vw;
  margin-bottom:30px;
}
#goods h2.title_en{
  width: 70vw;
  top:0px;
  right:auto;
  left:3vw;
}

#goods p{
  width: 90%;
  margin:0 auto;
}
#goods p.text{
  width: 90%;
  margin:0 auto;
}
#goods p.note{
  width: 90%;
  margin:10px auto;
}
#goods ul.goodslist{
  display: block;
}
#goods ul.goodslist li{
  width: 90%;
  margin: 10px auto 30px auto;
}
#goods ul.goodslist li:nth-child(3){
  margin: 10px auto 30px auto;
}
/*開催概要*/
#outline {
  margin-top:50vw;
}
#outline .inner{
  padding-top:0;
  width: 100%;
}
#outline h2.title_wa{
  text-align: center;
  display: inline-block;
  margin-top:0;
}
#outline h2.title_en{
  display: inline-block;
  position: absolute;
  left:5vw;
  top:-20vw;
  width: 70vw;
}
#outline dl.outline_box{
  width: 90%;
  margin:10vw auto;
}
#outline dl.outline_box dt{
	width: 25vw;
}
#outline dl.outline_box dd{
	width:65vw;
}
/*アクセス*/
#access .inner{
  padding-top:30vw;
  width: 100%;
  margin: 0 auto 10vw auto;
}
#access h2.title_wa{
  position: absolute;
  left: 3vw;
  margin-top:0;
  margin-bottom:0;
}
#access h2.title_en{
  right:3vw;
  top:15vw;
  width: 80vw;
  z-index: 2;
}
#access .text_box{
  width: 80%;
  margin:5vw auto;
}
#access .text_box h3{
  margin: 10vw 0 5vw 0;
  font-size: 2.2rem;
  line-height: 150%;
}
#access iframe {
  width: 80%;
  height: 300px;
  margin: 0 auto;
}
/**********************************************************
 * フッター
 **********************************************************/
footer .pagetop{
  position: absolute;
  width: 25px;
  right:2vw;
  top:-40px;
}
footer .inner {
  width: 80%;
  padding: 10vw 0;
  margin: 0 auto;
}

footer h2 {
  width: 50vw;
  margin-bottom:10vw;
}
footer .flexbox {
  display: block;
}
footer #sns {
  width: 90%;
  padding:5%;
}
footer .nav_footer{
  padding-bottom: 8vw;
  position: relative;
  margin-bottom: 7vw;
}
footer .nav_footer:after{
  content: '';
  width: 128px;
  height: 1px;
  display: inline-block;
  background-color: #0062ad;
  position: absolute;
  bottom: 0;
  left:0;
}
footer .nav_footer li{
  text-decoration: none;
  display: inline-block;
  padding-bottom: 13px;
}
footer .nav_footer li a{
    font-size: 1.5rem;
    margin-right: 3.4vw;
}
footer .banner li{
  width: 38vw;
}
footer .contents_footer {
  width: 100%;
  margin-top:20vw;
}
footer .copyright{
  font-size: 1.1rem;
}