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

　        top.css

*****************************/
@media screen and (max-width: 800px){
img{
	display: block;
}
#container{
	margin-bottom: 13%;
}
.navi_1{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
}
.wonder_bt{
	position: absolute;
	top: 0;
	left: -50%;
	width: 50%;
    transition:0.8s ease-in-out;
}
.exit_bt{
	position: absolute;
	top: 0;
	right: -50%;
	width: 50%;
    transition:0.8s ease-in-out;
}
#fix{
	position: fixed;
	left: 0;
	bottom:-26.7%;
	width:100%;
	padding-top: 26.7%;
	z-index: 3;
    transition:0.8s ease-in-out;
}
.detail_active .wonder_bt{
/*   left:0 !important;*/
    left:0;
}
.detail_active .exit_bt{
    right:0 !important;
}
.detail_active #fix{
    bottom:-1% !important;
}
    
    
    
.navi_2_wrap{
	position: absolute;
    bottom: 0;
    -webkit-overflow-scrolling: touch;
	overflow: auto;
	padding-top: 4.7%;
}
.navi_txt{
    position: absolute;
    top:0;
    width:100%;
    z-index: 1;
}
.navi_2{
    position: relative;
    top: 0;
	display: flex;
	width: 167%;
	width: 161%;
}
    
.sp_ab_navi img{
    opacity: 0;
    transition:0.3s;
}    
.sp_an_ac img{
    opacity: 1 !important;
}    
    /* 
17.7
16.2
16.3
16.3
16.2
17.3
    */
.sp_ab_navi:nth-child(1){
    background: url("../img/sp/about/bt1.png") no-repeat left top;
    background-size:100% auto;
    width:17.7%;
}
.sp_ab_navi:nth-child(2){
    background: url("../img/sp/about/bt2.png") no-repeat left top;
    background-size:100% auto;
    width: 16.2%;
}
.sp_ab_navi:nth-child(3){
    background: url("../img/sp/about/bt3.png") no-repeat left top;
    background-size:100% auto;
    width:16.3%;
}
.sp_ab_navi:nth-child(4){
    background: url("../img/sp/about/bt4.png") no-repeat left top;
    background-size:100% auto;
    width:16.3%;
}
.sp_ab_navi:nth-child(5){
    background: url("../img/sp/about/bt5.png") no-repeat left top;
    background-size:100% auto;
    width:16.3%
}
.sp_ab_navi:nth-child(6){
    background: url("../img/sp/about/bt6.png") no-repeat left top;
    background-size:100% auto;
    width:17.3%;
}
.navi_base{
    position: absolute;
    width: 100%;
    background: #FFF;
    padding-top: 20.3%;
    bottom: 0;
}
    }

#pagetop{
    position: fixed;
    bottom: 0;
    right: 4%;
    width: 15%;
	padding-bottom: 23%;
	display: none;
}
#sp_about_load{
    margin-bottom:10%;
}

/*----------------------
character
----------------------*/
#character{
	background: url("../img/sp/about/chara_bg.jpg") no-repeat top center;
	background-size: 100% auto;
	margin-bottom: 42%;
}
/*acordion*/
.acordion_wrap{
	padding-top: 38%;
}
.open{
	position: relative;
}

.cast_prof{
	position: absolute;
	bottom:0;
	width: 100%;
}

.text{
	display: none;
}

.acordion{
	margin-bottom: 5%;
}

/*---------------------
wonderland
---------------------*/
#wonderland{
	position: relative;
}
.w1_2,.w2_2,.w3_2,.w4_2,.w5_2,.w6_2,.w7_2,.w8_2{
	position: absolute;
	top: 0;
	left: 0;
}
.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.close{
	position: absolute;
    top: 0;
    width: 17%;
    height: 0%;
    padding-top: 18%;
}
.w1{
    /*background: rgba(255,255,255,0.8);*/
    margin-top: 33%;
    margin-left: 4%;
}
.w2{
	/*background: rgba(0,255,255,0.8);*/
    margin-top: 30%;
    margin-left: 23%;
}
.w3{
	/*background: rgba(255,0,255,0.8);*/
    margin-top: 33%;
    margin-left: 41%;
}
.w4{
	/*background: rgba(255,255,0,0.8);*/
    margin-top: 31%;
    margin-left: 60%;
}
.w5{
    /*background: rgba(255,255,255,0.8);*/
    margin-top: 33%;
    margin-left: 79%;
}
.w6{
	/*background: rgba(0,255,255,0.8);*/
    margin-top: 107%;
    margin-left: 10%;
}
.w7{
	/*background: rgba(255,0,255,0.8);*/
    margin-top: 109%;
    margin-left: 31%;
}
.w8{
	/*background: rgba(255,255,0,0.8);*/
    margin-top: 107%;
    margin-left: 52%;
}

.close{
	/*background: rgba(255,0,0,0.8);*/
    margin-top: 20%;
    left: 3%;
	z-index: 1;
}

}