@charset "UTF-8";

@media screen and (max-width: 667px) {
#gNavi{display:none;}
#top nav#gNaviSPTOP{display:block}
#top nav#gNaviSPTOP ul {
  width: 120%;
  margin: 0 0 0 2%;
    padding:0;
    display: flex;
    flex-wrap: wrap;
}
#top nav#gNaviSPTOP li {
  width: 33%;
  margin: 0 -3%;
  text-align: center;
position:relative;
}
    
#wrapper{width:100%;margin:0;padding:0;overflow: hidden;}
    
/* ヘッダーロゴ部分 */
#top header{
	width:100%; height:auto;padding-bottom: calc(100%*873/750); position:relative;margin:0 auto; z-index:0;
}

header h1 {font-size: 0;}
#top header #chara1 {
    width:44%; position: absolute; left:auto; right:0; margin:0 auto;top:30%; z-index:5;}
#top header #chara2 {
    width:58%; position: absolute; left:5%; right:auto; margin:0 auto;top:35%; z-index:5;}
#top header #chara3 {
    width:33%; position: absolute; left:-8%; right:auto; margin:0 auto;top:40%; z-index:3;}
#top header #chara4 {
    width:77%; position: absolute; left:0%; right:-2%; margin:0 auto;top:2%; z-index:2;}
#top header #chara5 {
    width:39%; position: absolute; left:-8%; right:auto; margin:0 auto;top:25%; z-index:2;}
#top header #chara6 {
    width:31%; position: absolute; left:2%; right:auto; margin:0 auto;top:10%; z-index:1;}
#top header #chara7 {
    width:37%; position: absolute; left:auto; right:-3%; margin:0 auto;top:19%; z-index:1;}
#top header #chara8 {
    width:40%; position: absolute; left:auto; right:15%; margin:0 auto;top:0%; z-index:0;}

#top header #text1 {
    width:28%; position: absolute; left:11%; right:auto; margin:0 auto;top:2%; z-index:2;}
#top header #text2 {
    width:38%; position: absolute; left:auto; right:6%; margin:0 auto;top:12%; z-index:5;}
#top header #scope {
    width:110%; position: absolute; left:-10%; right:0%; margin:0 auto;top:0%; z-index:3;}

#top header #logo{
    width:62%; position: absolute; left:3%; right:auto; margin:0 auto;top:72%; z-index:6;}
#top header #logo10{
    width:38%; position: absolute; left:auto; right:2%; margin:0 auto;top:61%; z-index:6;}
#top header #nav_text{
    width:85%;height:auto; padding-bottom: calc(100%*52/634);background:url(../../_img/top_nav_text_sp.png) no-repeat;background-size: 100% auto;  position: absolute; left:0%; right:0; margin:0 auto;top:94%; z-index:5;}
#top header #nav_text img{
   display:none;}

#top header #sakura0{
    width:111%; position: absolute; left:0%; right:0; margin:0 auto;top:76%; z-index:4;}

#top header #sakura2{
    width:120%; position: absolute; left:-10%; right:0; margin:0 auto;top:0%; z-index:0;}
    
section#mission{width:96%;margin:0 auto;}
section#mission ul#missions li{margin:5% 0;position:relative;}
section#mission ul#missions li img{display: none;} 
section#mission ul#missions > li:nth-child(1){width:100%;height:auto; padding-bottom: calc(100%*420/710);background:url(../../_img/mission1_sp.png) no-repeat;background-size: 100% auto;}   
section#mission ul#missions > li:nth-child(2){width:100%;height:auto; padding-bottom: calc(100%*420/710);background:url(../../_img/mission2_sp.png) no-repeat;background-size: 100% auto;}  
section#mission ul#missions > li:nth-child(3){width:100%;height:auto; padding-bottom: calc(100%*420/710);background:url(../../_img/mission3_sp.png) no-repeat;background-size: 100% auto;}
section#mission ul#missions > li:nth-child(4){width:100%;height:auto; padding-bottom: calc(100%*420/710);background:url(../../_img/mission4_sp.png) no-repeat;background-size: 100% auto;}   
section#mission ul#missions > li:nth-child(5){width:100%;height:auto; padding-bottom: calc(100%*420/710);background:url(../../_img/mission5_sp.png) no-repeat;background-size: 100% auto;}  
section#mission ul#missions > li:nth-child(6){width:100%;height:auto; padding-bottom: calc(100%*420/710);background:url(../../_img/mission6_sp.png) no-repeat;background-size: 100% auto;} 
section#mission ul#missions > li:nth-child(7){width:100%;height:auto; padding-bottom: calc(100%*420/710);background:url(../../_img/mission8_sp.png) no-repeat;background-size: 100% auto;}   
section#mission ul#missions > li:nth-child(8){width:100%;height:auto; padding-bottom: calc(100%*420/710);background:url(../../_img/mission9_sp.png) no-repeat;background-size: 100% auto;}  
section#mission ul#missions > li:nth-child(9){width:100%;height:auto; padding-bottom: calc(100%*470/710);background:url(../../_img/mission10_sp.png) no-repeat;background-size: 100% auto;} 
    
.btn3{display:block;width:100%;color:#FFF;text-align:center;padding:2%;margin:0 auto 1.5%;font-size:3vw;line-height:1.2em;border:2px solid #FFF;font-weight:bold;position:static;box-sizing: border-box;}
.btn3:hover{display:block;width:100%;color:#333;background:#FFF;text-align:center;padding:2%;margin:0px auto 1.5%;font-size:3vw;line-height:1.2em;border:2px solid #FFF;font-weight:bold;position:static;box-sizing: border-box;}
    
.btnL{display:block;width:60%;color:#FFF;text-align:left;padding:1%;margin:20px auto;font-size:3vw;line-height:1.2em;border:3px solid #FFF;font-weight:bold;position:absolute;top:70%;left:3%;box-sizing: border-box;}
.btnL:hover{display:block;width:60%;color:#333;background:#FFF; text-align:left;padding:1%;margin:20px auto;font-size:3vw;line-height:1.2em;border:3px solid #FFF;font-weight:bold;position:absolute;top:70%;left:3%;box-sizing: border-box;}

.btnR{display:block;width:60%;color:#FFF;text-align:right;padding:1%;margin:20px auto;font-size:3vw;line-height:1.2em;border:3px solid #FFF;font-weight:bold;position:absolute;top:70%;right:3%;box-sizing: border-box;}
.btnR:hover{display:block;width:60%;color:#333;background:#FFF; text-align:right;padding:1%;margin:20px auto;font-size:3vw;line-height:1.2em;border:3px solid #FFF;font-weight:bold;position:absolute;top:70%;right:3%;box-sizing: border-box;} 
    
section#mission ul#missions li#mission10 ul{width:55%;position:absolute;top:56%;left:3%;display: flex;flex-wrap: wrap;}
section#mission ul#missions li#mission10 ul li{width:100%;margin:0.5%;}
    
    
 /* Twitter */
#twitter{width:100%;margin:0 auto; }
#twitter h2{width:100%;margin:5% auto; }

#twitter .inner{width:90%;margin: 0 auto;}


/* comics */
#comics{width:100%;margin:0 auto 5%; }
#comics h2{width:100%;margin:5% auto; }
#comics ul{width:92%;margin:0 4%; display: flex;flex-wrap: wrap;}
#comics ul li{width:32%;margin:0.5%;} 
    
}