@charset "utf-8";
@media screen and (min-width: 0px) and (max-width: 800px) {
	.sp_view{
		display:block !important;
	}
	.pc_view{
		display:none !important;
	}
	.over_anim{
		transition:0s;
	}
	.over_anim:hover{
		opacity:1;
	}
	#container,#move_area{
		min-width:0;
	}
	#wrap{
		/*background: #f7f3e4;*/
	}
	
	.dvd_link{
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 123.5%;
		padding-top: 25%;
		width: 60%;
		z-index: 10;
	}

	.change_icon{
		/*position:relative;
		display: flex;
		width:60px;
		left: 50%;
		right:auto;
		transform:translateX(-50%);
		bottom: 0;
		margin-top:5px;
		margin-bottom:15px;*/
		position: relative;
		display: flex;
	   /* width: 60px; 変更*/
		position: relative;
		display: flex;
		width: 100px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		margin-top: -12%;
		bottom: 0;

	}
	.change_icon .icon{
		width:8px;
		height:8px;
		border-radius:100%;
		background:#000;
		overflow:hidden;
		margin:0 10px;
		cursor:pointer;
	}
	.change_icon .icon_target{
		background:#cc9b26;
		cursor:default;
	}
	.visual1{
		position:absolute;
		width:100%;
		height:auto;
		left:0;
		top:0;
		transform: translateX(0)!important;
	}
	.visual2{
		position:absolute;
		width:100%;
		height:auto;
		/*left:100%;*/
		left:0;
		top:0;
	}
	.visual3{
		position:absolute;
		width:100%;
		height:auto;
		/*left:100%;*/
		left:0;
		top:0;
	}
	.canvas_poster{
		position:absolute;
		left:0;
		top:0;
		width:100%;
	}
	.canvas_shadow{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+70,1+100 */
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	}
	
	/*---------------------
	ticket
	-----------------------*/
	#sp_ticket{
		margin: 25px 35px;
	}
	#sp_gold{
		margin: 25px 15px;
	}
	/*---------------------
	spotify
	-----------------------*/
	#spotify_sp{
		margin: 25px 10px 23px;
	}
	
	/*---------------------
	navi
	-----------------------*/
	#navi{
		width: 100%;
		right: 0;
		top: -100%;
		background-color: #000;
		/*background: url(../img/navigation/menu.jpg);
   		background-size: 100% auto;*/
		overflow: auto;
	}
	.menu_logo{
		display: none;
	}
	.open img,.close img{
		width: 45px;
		height: 45px;
	}
	.open,.close{
		top: 70px;
		left: 10px!important;
		width: 45px;
	}
	.menu_item{
		position: absolute;
    	top: 710px;
		z-index: 10;
	}
	#navi ul {
    	margin-top: 73px;
		margin-left: 0px;
	}
	#navi li a,
	#navi li span{
		margin:  0 auto;
	}
	#navi li{
		margin:  4.6% auto 0;
	}
	.bt_home{
	width: 21%;
	}
	.bt_news{
		width: 20%;
	}
	#about_btn{
		width: 59%;
	}
	#cast_btn{
		width: 43%;
	}
	.bt_bt_comments{
		width: 37%;
	}
	.bt_mv{
		width: 43%;
	}
	.bt_sound{
		width: 44%;
	}

	.bt_tickets{
		width: 34%;
	}
	
	.bt_dvd{
		width: 60%;
	}

	/*---------------------
	スライダー
	-----------------------*/
	.photo_wrapper{
		width: 100%;
		left: 0;
		margin-left: 0;
	}
	.photo_wrapper img{
		display: block;
	}


	#main{
		position:relative;
		width:100%;
		height:auto;
		/*background:url(../img/sp/main.jpg) no-repeat center top;
		background-size:100% auto;変更*/
	/*	padding-top:132%;*/
	/*	display:inline-table;*/
		overflow:hidden;
	}
	#official_insta{
		position:relative;
		left: 0;
		top: 0;
		margin-left:0;
		width:100%;
		height:0;
		background:url(../img/sp/ig.jpg) no-repeat center center;
		background-size:100% auto;
	}
	#hashtag_pc{
		display: none;
	}
	#hashtag_2{
		display: block;
		position: absolute;
		top: 0;
		margin-top: 142.5%;
		height: 30px;
		width: 35%;
		z-index: 10;
	}
	.page_top{
		position:fixed;
		width:45px;
		height:45px;
		right:15px;
		bottom:15px;
		cursor:pointer;
		z-index:1000;
	/*	transition:0.3s ease-in-out;*/
	}
	.page_top:hover{
		opacity:0.8;
	}


	/*---------------
	trailer
	-----------------*/
	#youtube_wrap{
		border:none;
		/*margin-bottom: 10%;*//*追加*/
		/*padding-bottom: 10%;
		padding-bottom: 2%;*/
		/*background:url(../img/sp/bg1.jpg) no-repeat;*/
		background-size: 100% auto;
	}
	#youtube_area{
		position:relative;
		width:100%;
		height:auto;
		/*padding-top:15px;*/
		overflow:auto;
		-webkit-overflow-scrolling: touch;
	}
	#yt_load_area{
		position:relative;
		top:0;
		left:0;
		transform:translateX(0);
		width:auto;
		overflow:inherit;
		display:block;
		height:auto;
	}

	#yt_load {
		position: relative;
		width: 760px;
		left:0;
		transform:translateX(0px);
		margin: 0 auto;
		display: inline-table;
	}
	.yt_list{
		position:relative;
		width:240px;
		/*width: 80%;変更1025*/
		/*margin: 0 10%;変更1025*/
		margin:0 5px;
		float:left;
		cursor:pointer;
		overflow:hidden;
		transform: translateX(0)!important;
	}
	.yt_title {
		position: relative;
		width: 240px;
		text-align: center;
		color: #000;
		font-size: 12px;
		line-height: 26px;
		/*background: #000;*/

		margin: 0 auto;
	}

	#yt_more{
		position:relative;
		left:50%;
		transform:translateX(-50%);
		bottom:0;
		width:47%;
		padding-top:9.3%;
		background:url(../img/sp/yt_more.jpg) no-repeat center top;
		background-size:100% auto;
		margin-top:0px;
		height: 0;
    	margin-bottom: 3%;
	}
	.yt_fade{
		background:rgba(0,0,0,0.5) url(../img/yt_play.png) no-repeat center 50%;
		background-size:32px 32px;
	}
	.yt_fade:hover{
		background:rgba(0,0,0,0.2) url(../img/yt_play.png) no-repeat center 50%;
		background-size:32px 32px;
	}


	/*---------------
	bnr
	-----------------*/
	#bnr_wrap{
		position:relative;
		width:100%;
		background: url(../img/sp/bnr_bg1.jpg) no-repeat top center,url(../img/sp/bnr_bg2.jpg) no-repeat bottom center;
		background-size: 100% auto;
		background-color:#000000;
		/*padding:20px 0;　変更*/
		padding-bottom: 20px;
		padding-top: 0;
		min-height: 0;
	}
	#bnr_wrap a{
		color:#fff;
	}
	#bnr_wrap a:hover{
		text-decoration:underline;
	}
	.works_bnr{
		width: 46.6%;
		margin: 10px 5px 0;
		/*margin: 33px auto 13px;*/
	}
	#bnr_load {
		position:relative;
		width:100%;
	}
	.bnr_column{
		display: -webkit-flex;
		display: flex;
		width:94%;
		margin:0 auto;
		display:none;
	}
	#bnr_more{
		position:relative;
		width:50%;
		height:0;
		padding-top:10%;
		left:50%;
		transform:translateX(-50%);
		background:url(../img/more.png) no-repeat center top;
		background-size:100% auto;
		margin-top:10px;
		cursor:pointer;
	}
	.bnr_text{
		font-size:12px;
		line-height:18px;
		margin: 10px 0;
	}
	#no1_sp{
		margin-bottom:15px;
	}
	#fill{
		position:relative;
		left: 10%;
		top: 0;
		width:80%;
		margin:5% 0;
	}

	#bnr_sort{
		position: relative;
		width: 95%;
		display: flex;
		justify-content: center;
		margin: 0 auto 15px;
	}
	.bnr_category{
		margin:0 6px;
	}
	.bnr_category{
		width:21%;
		height:auto;
		cursor:pointer;
	}
	.bnr_category:nth-child(1){
		background:url(../img/category/sp/cate1.png) no-repeat left top;
		background-size:100% auto;
	}
	.bnr_category:nth-child(2){
		background:url(../img/category/sp/cate2.png) no-repeat left top;
		background-size:100% auto;
	}
	.bnr_category:nth-child(3){
		background:url(../img/category/sp/cate3.png) no-repeat left top;
		background-size:100% auto;
	}
	.bnr_category:nth-child(4){
		background:url(../img/category/sp/cate4.png) no-repeat left top;
		background-size:100% auto;
	}
	.bnr_category img{
		opacity:0;
		transition:0s;
		vertical-align:top;
		display:block;
		margin:0;
		padding:0;
	}
	.bnr_category img:hover{
		opacity:1;
	}

	.category_target img{
		opacity:1;
	}
	.category_target img:hover{
		opacity:1;
	}


	/*---------------
	news
	-----------------*/
	#news_wrap{
		position:relative;
		width:100%;
		/*background:url(../img/repeat.png) repeat left top;*/
		/*padding-top:74px;*/
		/*padding-top:0px!important;変更*/
		padding:25px 0;
	}
	#news_title{
		position:relative;
		top:0;
		left:50%;
		transform:translateX(-50%) !important;
		margin-left:0;
		width:90%;
		height:32px;
		background:url(../img/sp/news.gif) no-repeat center top;
		background-size:100% auto;
	}
	.news_article{
		position:relative;
		display:flex;
		width:90%;
		margin:10px auto;
		padding-bottom:15px;
		/*border-bottom:solid 1px #bd9300;*/
		align-items: center;
		background: url(../img/sp/news_line.jpg) no-repeat bottom;
		background-size: 100% auto;
	}
	.news_thumb{
		position:relative;
		width:23%;
		height:auto;
		overflow:hidden;
	}
	.news_thumb img{
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		top:0;
	}
	.news_title{
		width:68%;
		margin-left:15px;
		color:#FFF;
		font-size:12px;
		line-height:22px;
	}
	#credit{
		position:relative;
		left:50%;
		width:842px;
		padding-top:70px;
		transform:translateX(-50%);
	}
	#news_more{
		position:relative;
		width:47%;
		height:0;
		padding-top:10%;
		left:50%;
		transform:translateX(-50%);
		background:url(../img/sp/more2.jpg) no-repeat center top;
		background-size:100% auto;
		margin-top:25px;
		cursor:pointer;
	}
	#sp_credit{
		/*
		padding-top:10%;
		padding-top:3%;*/
		background:#000;
		margin-top: 0;
	}


	#videoPlayer {
		position: absolute;
		width: 90%;
		height: auto;
		padding: 0;
		padding-top: 0px;
		left: 0;
		margin-left: 5%;
		z-index: 999;
	}
	#videoPlayer{
	  position:absolute;
	  width: 90%;
	  padding-top: 50.6%;
	}
	#videoPlayer iframe{
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 100% !important;
	  height: 100% !important;
	}

	/*-----------------------
	動画処理
	------------------------*/
	.change_img_wrap{
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	#main_img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
		margin-left: 0%;
	}
	.mov{
		position: relative;
		top: 0;
	}





	/*----------------------
	ナビゲーション
	-----------------------*/
	#navigation{
		position:fixed;
		left:auto;
		right:10px;
		top:70px;
		width:66px;
		height:66px;
		z-index:1;
		cursor:pointer;
		transform:scale(0.7) !important;
		transform-origin:right top;
	}

	#menu_inner{
		position: fixed;
		background: #d00514;
		left:0;
		top:60px;
		width: 100%;
		height: 0;
		z-index: 1001;
		overflow:auto;
	}
	#menu_inner ul{
		margin: 17.5% 10px 0;
	}

	#menu_inner img{
		width: 100%;
	}


	#menu_inner li{
		margin-bottom: 23px;
	}
	#menu_inner li:last-child{
		margin-bottom: 10%;
	}






	.close_bt{
		position: absolute;
		top: 6px;
		left: 6px;
		cursor: pointer;
		background: #d00514;
		border-radius: 100%;
		width: 45px;
		height: 45px;
		transition: all 0.4s ease;
	}

	.close_bt:active{
		transform: rotate(30deg);
	}
	#menu_close{
		position: absolute;
		top: 12px;
		right: 12px;
		left:auto;
		cursor: pointer;
		background: #d00514;
		border-radius: 100%;
		width: 45px;
		height: 45px;
		transition: all 0.4s ease;
	}

	#menu_close:active{
		transform: rotate(30deg);
	}


	/*3本線*/
	.menu-trigger,
	.menu-trigger span {
	  display: inline-block;
	  transition: all 0.5s;
	  box-sizing: border-box;
	}
	.menu-trigger {
	  position: relative;
	  width: 15px;
	  height: 17px;
		top: 28%;
		left: 34%;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 3px;
	  background-color: #fff;
	}
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  top: 7px;
	}
	.menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}

	/*　×ボタンの動き*/
	.menu-trigger.active {
	  -webkit-transform: rotate(180deg);
	  transform: rotate(180deg);
	}
	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(7px) rotate(-45deg);
	  transform: translateY(7px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-7px) rotate(45deg);
	  transform: translateY(-7px) rotate(45deg);
	}


	.bt:hover{
		background: url(../img/navigation/sp/bt_over.gif) no-repeat;
		background-position: center;
		background-size: 100% auto;
	}
	.bt.bt_ig:hover{
		background: url(../img/navigation/sp/bt_ig_over.jpg) no-repeat;
		background-position: center;
		background-size: 100% auto;
	}


	.menu-trigger.actives {
	  -webkit-transform: rotate(180deg);
	  transform: rotate(180deg);
	}
	.menu-trigger.actives span:nth-of-type(1) {
	  -webkit-transform: translateY(7px) rotate(-45deg);
	  transform: translateY(7px) rotate(-45deg);
	}
	.menu-trigger.actives span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger.actives span:nth-of-type(3) {
	  -webkit-transform: translateY(-7px) rotate(45deg);
	  transform: translateY(-7px) rotate(45deg);
	}

	/*#yt_more{
		height: 0px;
	}*/




	#tickets{
		position:relative;
		width:302px;
		margin:30px auto 0;
	}
	#ma{
		position:relative;
		width:146px;
		height:auto;
	}
	#mv{
		position:absolute;
		right:0;
		top:0;
		width:146px;
		height:auto;
	}
	
	/* about */
	/*#about_close{
		position:absolute;
		width:30px;
		height:30px;
		right:10px;
		top:10px;
		cursor:pointer;
	}
	.pc_view{
		display:none;
	}
	.sp_view{
		display:block;
	}
	#footer_wrap, fotter{
		height: 186px;
	}*/	
	
	#footer_wrap {
		min-width: 0;
	}
	#footer_wrap,fotter {
		height: 261px!important;
	}
	
}