@charset "utf-8";
@media screen and (min-width: 0px) and (max-width: 800px) {
	.sp_none{
		display: none;
	}
	html{
		background:#fff;
	}
	#container,#move_area{
		min-width:0;
	}
	#container{
		background: #b5e6f8;
		margin-top: 0;
	}
	video{
		display: block;
	}
	#wrap{
		position:relative;
		z-index:1;
		margin-top:0;
		background: #000;
	}
	
	#main{
		overflow: hidden;
	}
	/*---------------------
	dvd
	-----------------------*/
	.sp_bnr_dvd{
		position: absolute;
		width: 100%;
		height: 0;
		padding-top: 20%;
		top: 0;
		margin-top: 140%;
		z-index: 100;
	}
	/*---------------------
	サウンドボタン
	-----------------------*/
	.sp_sound_btn{
		margin-top: 6.25%;
	}
	/*---------------------
	ラッキーボタン
	-----------------------*/
	.sp_lucky_bt{
		background: url("../img/sp/sp_lucky_bt.jpg") no-repeat;
		background-size: 100% auto;
		position: fixed;
		top: -92px;
		z-index: 3;
		transform-origin: top;
	}
	.sp_lucky_one,.sp_lucky_back{
		position: absolute;
		z-index: 2;
		top: -92px;
		transform-origin: top;
	}
	.sp_lucky_one{
		width: 50%;
		float: left;
	}
	.sp_lucky_back{
		width: 50%;
		right: 0;
	}
	.sp_licky_spotify_wrap{
		position: absolute;
		bottom: -33px;
		background: url(../img/sp/lucky_img/sp_lucky_player.png) no-repeat;
		background-size: 320px auto;
		width: 100%;
		padding-top: 20%;
		z-index: 1;
	}
	.sp_licky_spotify{
		position: absolute;
		top: 44px;
		height: 80px;
		width: 94%;
		margin: 0 3%;
	}
	.sp_luckycopy{
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 3;
		opacity: 0;
	}

	/*---------------------
	main img
	-----------------------*/
	.sp_visual{
		position:relative;
		width:100%;
		height:auto;
		left:0;
		top:0;
		background: url("../img/sp/top.png") no-repeat;
		background-size: 100% auto;
		transform: scale(0.9);
		transition: 0.3s;
		z-index: 1;
		opacity: 0;
	}
	.sp_img_visual_re{
		background: url(../img/sp/sp_bg_re.jpg) repeat-x top left;
		background-size: 40% auto;
		background-size: 20% auto;
		left: -400%;
		left: -800%;
		top: 0;
		position: absolute;
		width: 500%;
		width: 1000%;
	}
	.sp_lucky_1{
		/*background: url(../img/sp/lucky_img/sp_lucky_1.png) no-repeat top left;*/
		background-size: 100% auto;
		position: absolute;
		top: 100%;
		width: 100%;
		z-index: 1;
	}
	.sp_lucky_kirakira{
		background: url(../img/sp/kirakira.png) no-repeat top left;
		background-size: 100% auto;
		position: absolute;
		top: -100%;
		width: 100%;
	}
	
	.sp_copyobi_bg{
		background-size: 100% auto;
		padding-top: 16%;
		width: 100%;
		position: absolute;
		bottom: 0;
		background: #fcd500;
		z-index: 3;
	}
	.sp_copyobi{
		position: absolute;
		bottom: 1px;
		width: 100%;
		z-index: 3;
	}
	.sp_copyobi2{
		position: absolute;
		bottom: 0;
		visibility: hidden;
	}
	
	/*---------------------
	劇場チケットボタン
	-----------------------*/
	.giza {
		width: 100%;
		height: auto;
		position: relative;
		left: inherit;
		margin-left: inherit;
		top: 0;
		z-index: 1;
	}

	
	
	
	
	.up_anim{
		top: -100%!important;
	}	
	
	/*前*/
	.img_part1{
		background: url(../img/sp/agetaro.png) no-repeat;
		background-size: 100% auto;
		position: absolute;
		width: 100%;
		top: 0;
		margin-left:0!important;
		padding-top: 172.5%;
	}
	.img_part2{
		background: url(../img/sp/part2.png) no-repeat;
		background-size: 100% auto;
		position: absolute;
		width: 100%;
		top: 0;
		margin-left:0!important;
		padding-top: 172.5%;
	}
	.img_part3{
		background: url(../img/sp/part3.png) no-repeat;
		background-size: 100% auto;
		position: absolute;
		width: 100%;
		top: 0;
		margin-left:0!important;
		padding-top: 172.5%;
	}
	.img_part4{
		background: url(../img/sp/part4.png) no-repeat;
		background-size: 100% auto;
		position: absolute;
		width: 100%;
		top: 0;
		margin-left:0!important;
		padding-top: 172.5%;
	}
	.img_part5{
		background: url(../img/sp/part5.png) no-repeat;
		background-size: 100% auto;
		position: absolute;
		width: 100%;
		top: 0;
		margin-left:0!important;
		padding-top: 172.5%;
	}
	.sp_logo{
		position: absolute;
		top: 0;
		width: 100%;
		opacity: 0;
		z-index: 2;
	}
	.logo_start{
		animation: bnr_anime2 0.3s ease-in-out forwards;
	}
	@keyframes bnr_anime2 {
		0% {transform: scale(1.8);opacity:0;}
		65% {transform: scale(0.93);opacity:1;}
		100% {transform: scale(1);opacity:1;}
	}
	
	/*後*/
	.sp_img_logo2{
		position: absolute;
		top: -100%;
		margin-left:0!important;
		width: 100%;
	}
	.sp_sonoko_copy{
		position: absolute;
		top: 0;
		margin-left:0!important;
		width: 100%;
		left: 0;
		opacity: 0;
		margin-top: 20px;
	}
	.kirakira{
		position: absolute;
		top: -30px;
		margin-left:0!important;
		width: 100%;
		left: 0;
		opacity: 0;
	}
	
	
	/*---------------------
	menu
	-----------------------*/
	.menu_bnr_wrap{
        /*background: url(../img/sp/sp_repeat_bg.gif) no-repeat center top;*/
		background-size: cover;
		background:  url("../img/sp/bnr_bg_top.jpg"),url("../img/sp/bnr_bg_foot.jpg"),url("../img/sp/bnr_bg.jpg");
		background-repeat:  no-repeat,no-repeat,repeat;
		background-position: top center,bottom center, top center;
		background-size: 100% auto;
	}
	
	#sp_menu{
		position: relative;
		padding-top: 10%;
		padding-bottom: 0%;
/*		background: url("../img/sp/giza.png") no-repeat center bottom,url("../img/sp/border.jpg") no-repeat center top,url("../img/news_bg2.jpg") repeat center top;*/
        /*background: url(../img/sp/sp_repeat_bg.gif) no-repeat center top;
		background-size: cover;*/
	}
    .sp_anim_bnr{
        position: relative;
        width:32.8%;
        padding-top:32.8%;
        background: url("../img/sp/anim_bnr.png") no-repeat center center;
        background-size:100% auto;
        margin:7% auto 7.8%;
        transform-origin: center center;
    }
    .sp_anim_bnr a{
        position: absolute;
        width:100%;
        height: 100%;
        left:0;
        top:0;
        display: block;
    }
    .rotate_play2{
        animation: rotation_anim2 0.4s linear;
    }
    @keyframes rotation_anim2 {
        0% {transform: rotateY(180deg);}
        33% {transform: rotateY(0deg);}
        66% {transform: rotateY(-180deg);}
        100% {transform: rotateY(0deg);}
    }
    
	/*---------------------
	プレイヤー
	-----------------------*/
	#sp_player_music{
		position: relative;
		width: 100%;
		left: 0;
	}
	.sp_player_spotify{
		height: 80px;
		position: absolute;
		z-index: 1;
		top: 34%;
		width: 93.76%;
		margin: 0 3.12%;
	}
	.sp_player_txtbtn{
		position: absolute;
		bottom: 17px;
		margin: 0 auto;
		left: 0;
		width: 93%;
		right: 0;
	}
	/*---------------------
	hashエリア
	-----------------------*/
    .hash_in{
		background: #fff444;
		margin: 0 3.12%;
	}
	.hash_tw_bt{
		background: url(../img/sp/tw_bt_over.jpg) no-repeat center top;
		background-size: 100% auto;
	}
	
	.hash_tiktok_bt{
		background: url(../img/sp/tik_bt.jpg) no-repeat center top;
		background-size: 100% auto;
		margin-top: 5%;
	}
	.hash_tw_bt:hover img{
		opacity: 0;
	}
    .hash_bt{
		margin-top: 3.12%;
	}
    .hash_top{
		padding-top:  8%;
	}
	.hash_foot{
		margin-bottom: 4%;
	}
	
	
	
	
	.sp_tw{
		margin-bottom: 3.1%;
		background: url("../img/sp/navi/tw_bt_over.png") no-repeat left top;
		background-size: 100% auto;
	}
	.sp_tw:hover img{
		opacity: 0;
	}

	.sp_about{
		margin-bottom: 2.5%;
		background: url("../img/sp/navi/about_bt_over.png") no-repeat left top;
		background-size: 100% auto;
	}
	.sp_about:hover img{
		opacity: 0;
	}
	
	.sp_comments{
		margin-bottom: 2.5%;
		background: url("../img/sp/navi/comments_bt_over.png") no-repeat left top;
		background-size: 100% auto;
	}
	.sp_comments:hover img{
		opacity: 0;
	}
	
	.sp_credit{
		margin-bottom:5%;
		background: url("../img/sp/navi/credit_bt_over.png") no-repeat left top;
		background-size: 100% auto;
	}
	.sp_credit:hover img{
		opacity: 0;
	}

	.sp_gensaku{
		padding-bottom: 11.3%;
		background: url("../img/sp/navi/gensaku_bt_over.png") no-repeat left top;
		background-size: 100% auto;
	}
	.sp_gensaku:hover img{
		opacity: 0;
	}

	
	/*---------------------
	page_top
	-----------------------*/
	.page_top_sp{
		position: fixed;
		width: 14%;
		height: auto;
		right: 13px!important;
		bottom: 15px;
		bottom: 15px;
		cursor: pointer;
		z-index: 9;
/*		transition: 0.3s ease-in-out;*/
		background-size: 100% auto;
	
	}
	
	/*-----------------------
	コメントページ
	------------------------*/
	.sp_comment_page{
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
		top: 0;
		z-index: 10;
		overflow: auto;
		margin-bottom: 10%;
		overflow:auto;
	    -webkit-overflow-scrolling: touch;
	}
	.sp_g_close{
		position: absolute;
		width: 13%;
		height: 13%;
		top: 0;
		right: 0px;
		z-index: 1;
	}
	.comment_page_inner {
		width: 81.4%;
		background: #fff;
		margin: 0 auto;
		height: auto;
		padding: 0 9.3% 10px;
	}
	.com_name,.com_name2 {
		font-size: 17px;
		line-height: 14px;
	}
	.com_txt{
		font-size: 11px;
		line-height: 21px;
		margin: 3.75% auto 11.7%;
		text-align: justify;
	}
	.com_job{
		font-size:9px;
	}
	.com_ilust {
    	margin: 4.6% auto;
	}
	.g_close{
		left: inherit;
		right: 0;
		top: 0;
		margin-left: inherit;
	}
	
	/*-----------------------
	クレジットページ
	------------------------*/
	.credit_page{
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		background: #fff;
		top: 0;
		z-index: 10;
		overflow: auto;
		margin-bottom: 10%;
		overflow:auto;
	    -webkit-overflow-scrolling: touch;
	}
	.credit_page_inner {
		width: 100%;
		background: #fff;
		margin: 0 auto;
		height: auto;
		padding: 0;
	}
	.sp_g_close{
		position: absolute;
		width: 13%;
		height: 13%;
		top: 0;
		right: 0px;
		z-index: 1;
	}
	.credit_page .g_close{
		left: inherit;
		right: 0;
		top: 0;
		margin-left: inherit;
	}
	
	/*---------------
	trailer
	-----------------*/
	#closeBtn {
		right: 0px;
		top: -60px;
		width: 50px;
		height: auto;
	}
	#closeBtn img{
		width: 50px;
		height: auto;
	}
	
	#youtube_wrap{
		border:none;
		margin-top: 0;
		padding-top: 8%;
		background: url("../img/news_bg2.jpg") repeat center top;
		background-size: 45% auto;
	}
	#youtube_area{
		position:relative;
		width:100%;
		height:auto;
		/*padding-top: 30px;*/
		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;/*動画1つ以上*/
		/*width: 80%;*//*動画1つ*/
		/*margin:10px;　変更*/
		float:left;
		cursor:pointer;
		overflow:hidden;
		transform: translateX(0)!important;
		margin: 0px 0px 5px 10px;
		
	}
	.yt_list_img {
		border: solid 2px #eeea38;
		box-sizing: border-box;
	}
	.yt_title {
		position: relative;
		width: 240px;
		text-align: center;
		color: #000;
		font-size: 12px;
		line-height: 26px;
		margin: 2% auto 0;
	}

	#yt_more{
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		width: 47%;
		margin-bottom: 8%;
	}
	
	.yt_fade{
		background:rgba(0,0,0,0.5) url(../img/yt_play0.png) no-repeat center center;
		background-size: 70px auto;
		margin-top: 0%;
		background-position: center;
		top: 2px;
		left: 2px;
		padding-bottom: 55.5%;
		width: 98.5%;
	}
	
	
	.yt_fade:hover{
		background:rgba(0,0,0,0.2) url(../img/yt_play0.png) no-repeat center center;
		background-size: 70px auto;
		margin-top: 0%;
		background-position: center;
	}
	
	#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;
	}
	
	/*---------------
	bnr
	-----------------*/
	#bnr_area{
		padding-bottom: 10.8%;
	}
	#bnr_wrap{
		position:relative;
		width:100%;
        background: none;
		/*padding:20px 0;　変更*/
		/*padding: 0;*/
		padding: 0 0 30px;
		min-height: 0;
	}
	#bnr_wrap a{
		color:#fff;
	}
	#bnr_wrap a:hover{
		text-decoration:underline;
	}
	.works_bnr {
		width: 45%;
		margin: 0 2% 0;
		background-position: center bottom;
		background-size: 100% auto;
		height: 0;
		padding-bottom: 47%;
	}
	#bnr_load_wrap {
		position:relative;
		width:100%;
		padding-top: 8%;
		border-radius: 0;
		padding-bottom: 4%;
	}
	#bnr_load {
		/*position:relative;
		width:100%;
		padding-top: 8%;
		border-radius: 0;
		padding-bottom: 0;*/
	}
	.bnr_column{
		display: -webkit-flex;
		display: flex;
		width:100%;
		margin:0 auto;
		display:none;
		padding-bottom: 5%;
	    justify-content: center;
	}
	#bnr_more{
		position:relative;
		width:50%;
		height:0;
		padding-top:10%;
		left:50%;
		transform:translateX(-50%);
		background:url(../img/more.jpg) no-repeat center top;
		background-size:100% auto;
		margin-top:10px;
		cursor:pointer;
		padding-bottom: 7%;
	}
	.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:100%;
		display:flex;
		justify-content: center;
		margin-bottom: 1%;
		padding-bottom: 0;
		bottom: 0;
	}
	.bnr_category{
		margin: 0 0.4% -4%;
	}
	.bnr_category{
		width:23%;
		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;
	}
	.category_target::after{
		width: 20px;
	}

	/*---------------
	news
	-----------------*/
	#news_wrap{
		position:relative;
		width:100%;
		background:url("../img/news_bg.jpg") repeat center bottom;
		background-size: 45% auto;
		padding:8.6% 0;
	}
	#news_title{
		position:relative;
		top:0;
		left:50%;
		transform:translateX(-50%) !important;
		margin-left:0;
		width:90%;
		height:0;
		background:url(../img/sp/news.png) no-repeat center top;
		background-size:100% auto;
		padding-bottom: 11%;
	}
	.news_article{
		position:relative;
		display:flex;
		width:90%;
		margin: 1.6% auto;
		padding-bottom: 1.6%;
		border-bottom:solid 1px #ffba00;
		align-items: center;
	}
	.news_article:last-child{
		border: none;
	}
	.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:10px;
		line-height:17px;
		font-weight:inherit;
	}
	.news_title span {
		padding-bottom: 0px;
		display: inline-block;
		font-size: 10px;
	}
	.news_article a {
		color: #010101;
		font-weight: normal;
	}
	#credit{
		position:relative;
		left:50%;
		width:842px;
		padding-top:70px;
		transform:translateX(-50%);
	}
	#news_more{
		position:relative;
		width:46.7%;
		height:45px;
		/*padding-top:10%;*/
		left:50%;
		transform:translateX(-50%);
		background:url("../img/sp/sp_news_more_over.png") no-repeat center top;
		background-size:100% auto;
		margin-top:20px;
		cursor:pointer;
	}
	#news_more:hover img{
		opacity: 0;
	}
	#sp_credit{
		/*
		padding-top:10%;
		padding-top:3%;*/
		background:#000;
		margin-top: -12%;
	}


    /*-----------------------
	footer
	------------------------*/
    footer{
        border: none;
        background: #FFF;
		min-width: 100%;
		padding: inherit;
		margin-bottom: 0;
    }
    .footer_in{
        position: relative;
        padding: 30px 0;
    }
    #official{
        padding-top:27px;
    }
    #official_title{
        text-align: center;
        margin-bottom:15px;
        color: #9fa0a0;
    }
    #official_set{
        display: flex;
        justify-content: center;
        width:190px;
        margin: 0 auto;
    }
    .sns_icon{
        margin: 0 7px;
    }
    #sns_btns{
        display: flex;
        justify-content: center;
    }
    .links{
        display: flex;
        justify-content: center;
        margin: 20px 0;
		width: inherit;
		height: inherit;
		line-height: inherit;
		font-size: 10px;
    }
    .links li{
        margin: 0 5px;
    }
    .links a{
        color: #9fa0a0;
    }
    .address{
        text-align: center;
        font-size:7px;
        margin-bottom:50px;
        color: #9fa0a0;
		position: inherit;
		bottom: 0;
		left: inherit;
		transform: inherit;
		-webkit-transform: inherit;
		font-style: normal;   
	}
	.share{
		padding-top: 20px;
	}
	
	/*ムビチケ　メイジャー*/
	#tickets{
		position:relative;
		width:290px;/*2枚*/
		/*width:146px;*//*1枚*/
		margin:40px auto 0;
	}
	#ma{
		position:relative;
		width:140px;
		height:auto;
	}
	#mv{
		position:absolute;
		right:0;
		top:0;
		width:140px;
		height:auto;
	}
	#sns_text {
		margin: 20px auto -12px;
	}
	
	
    /*bnr*/
	#t_bnr_wrap{
		display: flex;
		position: relative;
		width: 290px;
		margin: 20px auto 0;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.bnr_all{
		width:140px;
		height:auto;
		margin-bottom: 10px;
	}
	.rekobi img{
		border: solid 1px #ccc; 
		box-sizing: border-box;
	}

	
	.left {
		position: inherit;
		width: inherit;
		bottom: 0;
		left: inherit;
	}
	.right {
		position: inherit;
		right: inherit;
		bottom: inherit;
	}
	
	
	/*映画館に行こう！追加&上書き*/
	.bnr_gotoeigakan{
		top: 25px;
		width: 140px;
	}
	footer{
		height: 500px;
	}
	#official{
		padding-top:47px;
	}
	
	
}