@charset "UTF-8";
/* CSS Document */
body{background:url(../img/bg_main.png)repeat-x top left #78ebff;}
/* common
----------------------------------------------------------*/
#gungho {
  width: 100%;
  height: 31px;
  background: #fff;
  border-bottom: 4px solid #ccc;
  position: relative;
  z-index: 1000; }

#gungho .inner {
  max-width: 100%;
  height: 31px;
  margin: 0 auto;
  position: relative; }

#gungho #ragnarok {
  position: absolute;
  top: 0;
  left: 0; }

#gungho #roInfo {
  position: absolute;
  overflow: visible;
  top: 0;
  right: 0;
  line-height: 31px; }

#gungho #roInfo li {
  float: left;
  margin-right: 15px; }

#gungho #roInfo li a {
  font-size: 12px;
  color: #555;
  text-decoration: underline; }

#gungho #roInfo li a:hover {
  text-decoration: none; }
img{width:100%;}

/*----------------------------------------------------------*/
h2 {
	background-image: url(../img/h2_title.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 88px;
	padding-top: 24px;
	text-align: center;
}

h3 {
	background-image: url(../img/h3_title.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	width: 990px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	font-size: 120%
}

h4 {
	font-size: 100%;
	margin-bottom: 12px;
}
h2.pc {display: block;}
h2.sp {display: none;}
/*----------------------------------------------------------*/
#footer {
	  background: #0e569f;
	  padding: 30px 0;
	  color: #fff;
}
#footer .credit {
	  font-size: 12px;
	  width: 960px;
	  margin: 0 auto;
}
/*----------------------------------------------------------*/
#wrap1{width:100%;background:url(../img/ster.png);}
#top{width:100%;position:relative;}
#top .mainImg{width:100%;max-width:1600px;margin:0 auto;}
#top #navInner{width:100%;background:url(../img/bg_menu.png);background-size:contain;}
#top #navInner ul{max-width:980px; padding:1% 0; margin:0 auto;position:relative;}
#top #navInner ul:after{content: ''; display: block; clear: both;}
#top #navInner ul li{float:left;padding:0 1% 0 0;}
#top #navInner ul li.eventM{max-width:110px;width:12.2%;}
#top #navInner ul li.collaboM{max-width:156px;width:17.3%;}
#top #navInner ul li.challengeM{max-width:220px;width:24.4%;}
#top #navInner ul li.mapM{max-width:88px;width:9.7%;}
#top #navInner ul li.gamedataM{max-width:130px;width:14.4%;}
#top #navInner ul li.startM{max-width:190px;width:21.1%;}
.both {
	clear: both;
}

.pengin{
    background: url(../img/first_time.png) no-repeat;
    width: 230px;
    height: 121px;
    top: -100px;
    right: 0;
    position: absolute;
    z-index: 50;
}

/*----------------------------------------------------------*/
#sliderBox {
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
}

/*----------------------------------------------------------*/
.titleI1{max-width:310px;}
.titleI2{max-width:416px;}
.titleI3{max-width:864px;}
.titleI4{max-width:130px;}
.titleI5{max-width:194px;}
.titleI6{max-width:282px;}
.titleI7{max-width:406px;}
.titleI8{max-width:800px;}
.titleI9{max-width:410px;}
.titleI10{max-width:440px;}
.iconP img,
.iconP{width:75px;}

.box960 {
	max-width: 960px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
/*border: solid 1px #0000ff;*/
	
}
.box960:after{content: ''; display: block; clear: both;}

.leftBox {
	float: left;
	max-width: 450px;
	width:46.8%;
	margin-right: 1%;
}
.rightBox {
	float: right;
	max-width: 480px;
	width:50%;
}
.leftBoxAP {
	float: left;
	max-width: 648px;
	width:67.5%;
}
.rightBoxAP {
	float: left;
	max-width: 312px;
	width:32.5%;
	text-align: center;
}

#btnAcount, #btnDownload, #btnNavi, #btnChunithm ,#btnCafe{text-align:center;padding:1% auto;}
#btnAcount a img,
#btnDownload a img,
#btnNavi a img,
#btnChunithm a img,
#btnCafe a img{max-width:500px; /*border: solid 1px #0000ff;*/}

#event, #collabo, #challenge, #map, #gamedata, #start, #nameplate, #netcafe, #about { margin-bottom: 80px;}

#btnOfficial img {max-width:450px;width:49%;float: left;}
#btnCollabo img {max-width:450px;width:49%;float: right;}

/*----------------------------------------------------------*/
.inbox {
	float: left;
	max-width: 320px;
	width:33%;
}

.threeBox {
	margin-bottom: 30px;
}

.threeBox p {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 90%;
}

.threeImg {
	width: 98%;
	margin-bottom: 10px;
	text-align: center;
}

.oneBox {
	margin-bottom: 30px;
}
/*----------------------------------------------------------*/

table.type01 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border: 1px solid #3eabe5;
	margin-bottom: 20px;
	max-width: 960px;
	width:100%;
}
table.type01 thead {
	border-right: 1px solid #3eabe5;
	border-left: 1px solid #3eabe5;
	border-bottom: 1px solid #3eabe5;
	background: #52bbf3;
}
table.type01 thead th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-left: 1px solid #3eabe5;
	color: #fff;
}
table.type01 tbody th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #3eabe5;
}
table.type01 td {
	padding: 10px;
	border-right: 1px solid #3eabe5;
	vertical-align: top;
	border-bottom: 1px solid #3eabe5;
}
.tableBG1 {
	background-color: #fff;
}
.tableBG2 {
	background-color: #d9efff;
}

/*---------------------------------------------------------------------------*/
@media screen and (max-width:969px) { 
	#top #navInner{width:100%; text-align:center;}
	#top #navInner ul{max-width:486px;width:100%;/*border: solid 1px #0000ff;*/}
	#top #navInner ul li.eventM{max-width:110px;width:22%;}
	#top #navInner ul li.collaboM{max-width:156px;width:31%;}
	#top #navInner ul li.challengeM{max-width:220px;width:44%;}
	#top #navInner ul li.mapM{max-width:88px;width:18.6%;}
	#top #navInner ul li.gamedataM{max-width:130px;width:26.7%;}
	#top #navInner ul li.startM{max-width:190px;width:39%;}
	#top #navInner ul li:nth-child(4){content: ''; display: block; clear: both;}
}


@media screen and (max-width:1280px) { 
    /*　画面サイズが1280pxからはここを読み込む　*/

h2 {
	background-image: url(../img/h2_title980.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 88px;
	padding-top: 24px;
	text-align: center;
}

h3 {
	background-image: url(../img/h3_title.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	width: 960px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	font-size: 120%
}
	
}

@media screen and (max-width:680px) { 
    /*　画面サイズが680pxからはここを読み込む　*/
.box960 {
	width: 340px;
	margin-left: auto;
	margin-right: auto;
}
.leftBox {
	float: left;
	width: 340px;
	margin-right: 0px;
}

.rightBox {
	float: left;
	width: 340px;
	text-align: right;
}

.leftBoxAP {
	float: left;
	width: 340px;
	height: 210px;
}
.rightBoxAP {
	float: left;
	width: 340px;
	text-align: center;
}
	
.inbox {
	float: left;
	width: 340px;
}

.leftBtn {
	float: left;
	margin-right: 0px;
	margin-bottom: 20px;
	width: 342px;
}

.rightBtn {
	float: left;
	width: 342px;
}
    .leftBtn img,
    .rightBtn img{
        display: none;
    }
	
table.type01 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border: 1px solid #3eabe5;
	margin-bottom: 20px;
	width: 340px;
}
	
#repeatBG {
	background-image: none;
	background-repeat: repeat-x;
	height: 480px;
}
#mainbg {
	background-image: url(../img/sp_bg_main.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height: 480px;
}
	
#bar {
	background-image: url(../img/bar.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	height: 476px;
}

#mainImage {
	background-image: url(../img/sp_main.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	height: 480px;
}

#main h1,
#main p{
	text-indent: -9999px;
}

#main .box1000 {
	width: 320px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/*.firstTime {
	display: none;
	position: absolute;
	top: 671px;
	right: -40px;
	max-width: 230px;
	max-height: 121px;
}*/

	
#firstBtn a {
	background-image: url(../img/sp_btn_first_time.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: cover;
	width: auto;
	height: 94px;
	display: block;
	text-indent: -9999px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#firstBtn a:hover {
	background-position: 0px 0px;
}
	
#menu {
	display: none;
}
	
#btnAcount a {
	background-image: url(../img/sp_btn_acount.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: cover;
	display: block;
	width: auto;
	height: 48px;
	text-indent: -9999px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}

#btnDownload a {
	background-image: url(../img/sp_btn_download.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: cover;
	display: block;
	width: auto;
	height: 48px;
	text-indent: -9999px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}

#btnNavi a {
	background-image: url(../img/sp_btn_navi.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: cover;
	display: block;
	width: auto;
	height: 48px;
	text-indent: -9999px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}

#btnChunithm a {
	background-image: url(../img/sp_btn_chunithm.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: cover;
	display: block;
	width: auto;
	height: 48px;
	text-indent: -9999px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}

#btnCafe a {
	background-image: url(../img/sp_btn_cafe.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: cover;
	display: block;
	width: auto;
	height: 48px;
	text-indent: -9999px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}

#btnOfficial a {
	background-image: url(../img/sp_btn_official.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: cover;
	display: block;
	width: auto;
	height: 54px;
	text-indent: -9999px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}

#btnCollabo a {
	background-image: url(../img/sp_btn_collabo.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: cover;
	display: block;
	width: auto;
	height: 54px;
	text-indent: -9999px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}

#btnAcount a:hover,
#btnDownload a:hover,
#btnNavi a:hover,
#btnChunithm a:hover,
#btnCafe a:hover,
#btnOfficial a:hover,
#btnCollabo a:hover {
	background-position: 0px 0px;
}
	
	.title1 {
		color: #ff85ba;
		font-size: 120%;
	}
	.title2 {
		color: #1291e1;
		font-size: 120%;
	}
	
h2.pc {
	display: none;
}
h2.sp {
	display: block;
}

h2 {
	background-image: url(../img/h2_title.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 88px;
	padding-top: 34px;
	text-align: center;
	line-height: 1.2em;
}
h2.space {
	background-image: url(../img/h2_title.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 88px;
	padding-top: 22px;
	text-align: center;
	line-height: 1.2em;
}
	
h3 {
	background-image: url(../img/h3_title.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	width: 340px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	font-size: 120%
}
	
.threeBox p {
	margin-bottom: 20px;
}

#slider {width:100%; height:100%; min-height:460px; overflow:hidden; position:relative; margin-left: auto; margin-right: auto;}
.slide-wrap {width:1920px; height:300px; position:absolute; left:50%; margin-left:-960px;}

#slider li {
	margin-left: 10px;
	margin-right: 10px;
}
	
#pickup {
		display: none;
	}
	
#footer .credit {
	  font-size: 12px;
	  width: 320px;
	  margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
}
	#gungho {
		display: none;
	}
	
	#spMenu {
		display: block;
		border-bottom: 4px solid #ccc;
	}
	
	/*
	#chunithm {
		position: relative;
	}
	#ragnarokSP {
		display: block;
		position: absolute;
		top: -38px;
  		left: 10px;
	}*/
	
}

.slicknav_menu {
display:none;
}
@media screen and (max-width: 970px) {
	.pengin {
		width: 0px;
		height: 0px;
		left:0;
		position:fixed;
		display:none;
	}
	#pickup {
		display: none;
	}
}
@media screen and (max-width: 680px) {
#pullmenu {
display:none;
}
.slicknav_menu {
display:block;
}
}