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

@media screen and (max-width:980px) {
  img{
    vertical-align: bottom;
  }
  
  body {
    font-size: 3.90625vw;/*body内基本フォントサイズ*/
    overflow-x: hidden;
  }
  
   .inner{
	  width: 100vw;
    margin: 0 auto;
  }
/*------------------------------------------------------------------------------------------------
pagetop
------------------------------------------------------------------------------------------------*/
.pagetop {
  bottom: 2.0408163265306123vw;
  right: 2.0408163265306123vw;
  z-index: 99;
  width: auto;
}
	.pagetop p img{
		width: 27.95918367346939vw;
	}
	
/*------------------------------------------------------------------------------------------------
ハンバーガーメニュー
------------------------------------------------------------------------------------------------*/
/* bodyにactiveクラスが着いた時 */
body.active{
  overflow-y: hidden;
}

	/* ハンバーガーメニュー */
	.burger{
	  position: fixed;
	  cursor: pointer;
	  top: 2.0408163265306123vw;
	  right: 2.0408163265306123vw;
	  z-index: 101;
	}

	.burger img{
		width: 13.26530612244898vw;
		height: 13.26530612244898vw;
	}
	
	/* ナビメニュー */
	#sp-nav{
	  background-color: #821604;
	  width: 100%;
	  height: 100vh;
	  position: fixed;
	  text-align: center;
	  top: -150%;
	  transition: .5s;
	  overflow-y: scroll;
		z-index: 100;
	}

	#sp-nav .nav-menu{
	  padding: 25.510204081632654vw 0 0 0;
	  margin: 0;
	  list-style: none;
	  width: 100%;
	  height: 100vh;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}
	
	#sp-nav .nav-menu .nav-title{
	  padding-bottom: 15.142857142857142vw;
	}

	#sp-nav .nav-menu li{
	  margin: 0;
	  padding-bottom: 7.1020408163265305vw;
	}
	
	#sp-nav .nav-menu li:nth-of-type(1) img{
		width: 54.89795918367347vw;
	}
	
	#sp-nav .nav-menu li:nth-of-type(n+2) img{
		width: 100vw;
	}
	
	#sp-nav .nav-menu li a{
	  display: inline-block;
	  text-decoration: underline;
	  text-align: center;
	  transition: .4s;
	}

	#sp-nav .nav-menu li a:hover{
	  opacity: .6;
	}

	/* ナビメニューにactiveクラスが着いた時 */
	#sp-nav.active{
	  top: 0;
	}
/*------------------------------------------------------------------------------------------------
header
------------------------------------------------------------------------------------------------*/
  header{
    background: url("../images/sp/header-bg.jpg") no-repeat top center;
    background-size: 100vw auto;
	  top: 0;
	  height: auto;
  }
  
  header .inner{
    height: 181.12244897959184vw;
    
  }
  
	header .inner h1{
	  top: 154.3877551020408vw;
	  right: 2.0408163265306123vw;
	}
	
	header .inner h1 img{
		width: 41.63265306122449vw;
	}
	
	header .inner h2{
	  top: 3.36734693877551vw;
	  left: 2.0408163265306123vw;
	}
	
	header .inner h2 img{
		width: 73.16326530612245vw;
	}
	
	header .inner .header-chara{
	  top: 23.06122448979592vw;
	  left: 0;
	}
	
	header .inner .header-chara img{
		width: 100vw;
	}
	
	header .inner .catch{
	  top: 29.38775510204082vw;
	  right: 0;
	  left: auto;
	}
	
	header .inner .catch img{
		width: 15.612244897959185vw;
	}
/*------------------------------------------------------------------------------------------------
register
------------------------------------------------------------------------------------------------*/

.register{
  background: url(../images/patten_bg.jpg) repeat top center;
  background-size: 100vw auto;
  height: 21.020408163265305vw;
  top: 0;
}

.register ul{
  padding-top: 3.36734693877551vw;
}

.register ul li{
  margin-right: 3.36734693877551vw;
}
	.register ul li img{
		width: 45.51020408163266vw;
	}
  
/*------------------------------------------------------------------------------------------------
benefits
------------------------------------------------------------------------------------------------*/
#benefits{
  background: url("../images/sp/benefits-bg.jpg") no-repeat top center;
  background-size: 100vw auto;
}

#benefits .inner{
  height: 163.26530612244898vw;
}

#benefits .inner .intro {
  top: 6.122448979591836vw;
  left: 0;
}

	#benefits .inner .intro img{
		width: 100vw;
	}
	
#benefits .inner .txt {
  top: 21.020408163265305vw;
  left: 1.530612244897959vw;
}
	
	#benefits .inner .txt img{
		width: 96.73469387755102vw;
	}
	
#benefits .inner .gift {
  position: absolute;
  top: 46.83673469387755vw;
  left: 3.9795918367346936vw;
}
	
	#benefits .inner .gift img{
		width: 92.44897959183673vw;
	}
	
#benefits .inner .chara li:nth-of-type(1){
  top: 118.77551020408164vw;
  left: 0;
}
	
	#benefits .inner .chara li:nth-of-type(1) img{
		width: 29.28571428571429vw;
	}
	
#benefits .inner .chara li:nth-of-type(2){
  top: 129.48979591836735vw;
  left: 18.877551020408163vw;
}
	
#benefits .inner .chara li:nth-of-type(2) img{
		width: 32.55102040816327vw;
	}
	
#benefits .inner .chara li:nth-of-type(3){
  top: 113.9795918367347vw;
  right: 0;
}
	
	#benefits .inner .chara li:nth-of-type(3) img{
		width: 26.53061224489796vw;
	}
/*------------------------------------------------------------------------------------------------
abyss
------------------------------------------------------------------------------------------------*/
#abyss{
  background: url("../images/sp/abyss-bg.jpg") no-repeat top center;
  background-size: 100vw auto;
}

#abyss .inner{
  height: 167.24489795918367vw;
}
	
	#abyss .title{
  padding-top: 5.816326530612245vw;
}
	
	#abyss .title img{
  width: 74.59183673469387vw;
}
	#abyss .story{
		padding: 0.8163265306122449vw 0 0 0
	}
#abyss .story li{
  padding-bottom: 4.489795918367347vw;
}
	
	#abyss .story li:nth-of-type(1) img{
		width: 70.20408163265306vw;
	}
	
	#abyss .story li:nth-of-type(2) img{
		width: 62.44897959183674vw;
	}
	
	#abyss .story li:nth-of-type(3) img{
		width: 94.48979591836735vw;
	}

#abyss .title2 img{
	width: 73.9795918367347vw;
}

#abyss .map{
	display: flex;
  justify-content: center;
}

#abyss .map li{
	padding-right: 2.0408163265306123vw;
}
	#abyss .map li img{
		width: 47.3469387755102vw;
	}
/*------------------------------------------------------------------------------------------------
update
------------------------------------------------------------------------------------------------*/
#update{
  background: url("../images/sp/update-bg.jpg") no-repeat top center;
  background-size: 100vw auto;
}

#update .inner{
  height: 279.18367346938777vw;
}

#update .title{
	top: 14.285714285714285vw;
	left: 0;
}
	
	#update .title img{
		width: 91.3265306122449vw;
	}
	
#update .txt{
	top: 37.244897959183675vw;
	left: 0;
}
	
	#update .txt img{
		width: 61.12244897959184vw;
	}
	
#update .chara{
	top: 24.081632653061224vw;
	right: 0;
}
	
	#update .chara img{
		width: 67.3469387755102vw;
	}
	
#update .title2{
	top: 102.24489795918367vw;
}
	
#update .title2 img{
		width: 100vw;
	}
	
#update .flow{
	top: 116.93877551020408vw;
	left: 0;
}
	#update .flow li:nth-of-type(1) img{
		width: 50.204081632653065vw;
	}
	#update .flow li:nth-of-type(2) img{
		width: 49.69387755102041vw;
	}
	#update .flow li:nth-of-type(3) img,
	#update .txt2 img{
		width: 100vw;
	}
	
#update .txt2{
	top: 239.18367346938774vw;
	left: 0;
}
/*------------------------------------------------------------------------------------------------
about
------------------------------------------------------------------------------------------------*/
#about{
  height: 179.6938775510204vw;
}

#about .inner .title{
  top: 6.020408163265306vw;
  left: 1.530612244897959vw;
}
	#about .inner .title img{
		width: 96.63265306122449vw;
	}
#about .inner .title2{
  top: 26.53061224489796vw;
  left: 0;
}

	#about .inner .title2 img{
		width: 100vw;
	}
	
#about .inner .txt li:nth-of-type(1){
	top: 46.73469387755102vw;
  left: 6.938775510204081vw;
}
	
#about .inner .txt li:nth-of-type(1) img{
	width: 85.10204081632654vw;
}
	
#about .inner .txt li:nth-of-type(2){
	top: 75.91836734693878vw;
  left: 2.857142857142857vw;
}
	
#about .inner .txt li:nth-of-type(2) img{
	width: 94.48979591836735vw;
}
	
#about .inner .chara li:nth-of-type(1){
	top: 120.40816326530613vw;
	left: 0;
}
	
#about .inner .chara li:nth-of-type(1) img{
	width: 42.6530612244898vw;
}

#about .inner .chara li:nth-of-type(2){
	top: 122.14285714285715vw;
	right: 0;
}
	
#about .inner .chara li:nth-of-type(2) img{
	width: 40.714285714285715vw;
}
	
#about .inner .chara li:nth-of-type(3){
	top: 114.38775510204083vw;
	left: 29.28571428571429vw;
}

	#about .inner .chara li:nth-of-type(3) img{
	width: 45.816326530612244vw;
}
/*------------------------------------------------------------------------------------------------
btn
------------------------------------------------------------------------------------------------*/
#btn{
 background: url("../images/patten_bg.jpg") repeat top center;
  height: 21.224489795918366vw;
}

#btn ul{
  padding-top: 2.8vw;
}

#btn ul li{
  margin-right: 1.3vw;
}
  
#btn ul li img{
  width: 39.1vw;
  height: 16vw;
}
  
#btn ul li:last-child{
  margin-right: 0;
}

#btn ul li:last-child img{
  width: 14.2vw;
  height: 16vw;
}
/*------------------------------------------------------------------------------------------------
footer
------------------------------------------------------------------------------------------------*/
footer{
  height: auto;
  padding-bottom: 4.8vw;
}

footer ul{
  padding: 4.8vw 0;
}

footer li{
  padding: 0 10px 0 0;
}
  footer .moonrabi img{
    width: 20.9vw;
    height: 14.9vw;
  }
  
  footer .funyours img{
    width: 41.2vw;
    height: 4.7vw;
  }
footer p{
    padding-top: 2.1vw;
  
}

footer #copyright{
    font-size: 2.34375vw;
}

}