@charset "utf-8";



/*----------------------------------------
	style
----------------------------------------*/



body{
background-image:url("../img/img_bg.jpg");
background-position:center top;
background-repeat:no-repeat;
background-attachment: scroll;
}

#menu{
position:fixed;
width:100%;
max-width:800px;
z-index:150;
}

#menu img{
width:100%;
}

#menu .menu_bg_sp{
display:block;
width:100%;
}

#menu .menu_bg_pc{
display:none;
width:100%;
}

#menu .logo{
position:absolute;
width:23%;
top:8%;
left:0.5%;
}

#menu .top{
position:absolute;
width:14%;
top:22%;
left:27.5%;
}

#menu .chara{
position:absolute;
width:33%;
top:22%;
left:46%;
}

#menu .htu{
position:absolute;
width:16%;
top:24%;
left:82.5%;
}

#menu .line1{
position:absolute;
width:0;
height:90%;
top:0;
border-right:1px solid #f5a15a;
border-left:1px solid #aa9;
left:25%;
}

#menu .line2{
position:absolute;
width:0;
height:90%;
top:0;
border-right:1px solid #f5a15a;
border-left:1px solid #aa9;
left:44%;
}

#menu .line3{
position:absolute;
width:0;
height:90%;
top:0;
border-right:1px solid #f5a15a;
border-left:1px solid #aa9;
left:81%;
}

#menu .chara .update{
display:block;
position:absolute;
top:80%;
left:28%;
width:38%;
}

#menu .htu .update{

display:block;
position:absolute;
top:80%;
left:12%;
width:80%;
}


#mainImg img{width:100%;margin-top:20px;}
#wrapper{
	max-width:814px;
	background-image:url("../img/img_wrapBg.png");
	margin:0 auto 0;
	overflow:hidden;
	}

#content{
	position:relative;
	max-width:800px;
	width:100%;
	background-image:url("../img/img_bg.gif");
	margin:0 auto 0;
}

.info{
margin-top:-58%;
width:100%;
}

.info img{
width:100%;
}

.info_2{
margin-top:-58%;
width:100%;
display:block;margin-top:-7px;
}

.bnr_votecp{
position:relative;
z-index:100;
display:block;
width:94%;
margin:-28% auto 2%;
}

.bnr_votecp img{
width:100%;
}


.btn_news{
position:relative;
z-index:100;
display:block;
width:94%;
margin:0% auto 0;
}

.btn_news img{
width:100%;
}

.btn_news .update{
width:15%;top:30%;right:22%;display:block;position:absolute;
}

.btn_eos{
	display:block;
	width:90%;
	border-radius:5px;
	text-align:center;
	border:4px solid #D00;
	margin:-17% auto 0;
	font-size:18px;
	font-weight:bold;
	text-decoration:none;
	background-color:#fff;
	padding:15px 0;
	position:relative;
}

.btn_eos2{
	display:block;
	width:80%;
	border-radius:5px;
	text-align:center;
	border:4px solid #D00;
	margin:2% auto 3%;
	font-size:18px;
	font-weight:bold;
	text-decoration:none;
	background-color:#fff;
	padding:15px 5%;
	position:relative;
}




#date{
width:100%;
position:relative;
margin:0.5% auto 15%;
}

#date img.date_bg{
display:block;
margin:0 auto -10.5%;
width:95%;
}

#bar{
width:100%;
margin:11% 0 0;
}

.btn_ios{
display:block;
position:absolute;
margin:0 0 0 37%;
width:30%;
}

.btn_ios img{
display:block;
width:100%;
}

.btn_android{
display:block;
position:absolute;
margin:0 0 0 68.5%;
width:26%;
}

.btn_android img{
display:block;
width:100%;
}

.tweetcampaign{
margin:3% auto 0;
display:block;
width:90%;
}

.tweetcampaign img{
margin:0 auto 0;
display:block;
width:100%;
}



#flickObj{
	position:relative;
	max-width:500px;
	width:82%;
	margin:0% auto 0;
}

#exp{
	position:relative;
	max-width:670px;
	width:95%;
	margin:0% auto 8%;
	font-size:16px;
	line-height:170%;
}

#exp h3{
	position:relative;
	display:block;
	font-size:18px;
	/*background-color:#333;*/
	background-image:url("../img/title_bg.gif");
	color:#fff;
	padding:7px 0px 7px;
	margin-top:8%;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
	border-top:4px solid #8E7E18;
	border-bottom:4px solid #8E7E18;
}

#exp h3 span{
	position:relative;
	display:block;
	font-size:18px;
	color:#fff;
	margin:0px 10px 0px;
}


#exp .text{
	color:#450606;
	display:block;
	width:98%;
	margin:4% auto 0px;
	line-height:170%;
}

#store{
	padding:0% 0 3%;
	text-align:center;
}

#store a img{
	width:46%;
}

#store span img{
	width:46%;
}

#sitelink{
	padding:6% 0 0%;
	text-align:center;
}

#sitelink a img{
	width:30%;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}


#spec{
	position:relative;
	max-width:600px;
	width:85%;
	margin:2% auto 0;
	font-size:11px;
	line-height:170%;
	border:1px solid #aaa;
	padding:4% 4% 4%;
	color:#333;
}

.ajust_5em_out{
	display:block;
	margin-left:5em;
	}

.ajust_5em_in{
	margin-left:-5em;
	color:#333;
	}

#sns{
	position:relative;
	width:100%;
	height:28px;
	margin:3% auto 0px;
	font-size:18px;
	line-height:0%;
	background-color:rgba(220,220,220,0.7);
	padding:10px 0 13px;
	text-align:center;
	border-bottom:3px solid #d00;
}

#sns a img{
	width:32px;
	height:32px;
}


#footer{
	position:relative;
	background-color:#fcfcfc;
	border-top:3px solid #d00;
	width:100%;
	margin:0 auto 0;
	color:#300;
	font-size:10px;
	line-height:170%;
	text-align:center;
	padding:1% 0 1%;
	border-top:1px solid #fff;
}

#footer img{
	width:80%;
	margin-top:20px;
	margin-bottom:15px;
}



/*----------------------------------------
	flickObj
----------------------------------------*/

#flickObj_nav{
	width:100%;
	max-width:640px;
	margin:10% auto 0;
	overflow:hidden;
	}

#flickObj #flickWindow{
	margin: 0 auto 0;
	width:100%;
}

#flickObj #flick {
	width:100%;
}

.container{
	overflow:hidden;
	border:2px solid #fff;
	}

#flickObj ul.flickNav {
	margin: 10px 0;
	position: relative;
	left: 50%;
	float: left;
}

#flickObj ul.flickNav li {
	float: left;
	display: inline;
	margin-right: 6px;
	margin-bottom: 6px;
	position: relative;
	left: -50%;
}

#flickObj ul.flickNav li a {
	display: block;
	width: 10px;
	height: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	background-color: #ccc;
}

#flickObj ul.flickNav li.selected a {
	background-color: #014d83;
}



#flickObj div.container {
	height: auto;
	position: relative;
	clear: both;
	overflow: hidden;
	line-height:0;
}

#flickObj div.itemBox {
	position: relative;
}
#flickObj div.container .item {
	float: left;
	text-align: center;
	background-color: #f5f5f5;
}

#flickObj .moving {
	-webkit-transition: -webkit-transform .2s ease-out;
	-moz-transition: -moz-transform .2s ease-out;
	-o-transition: -o-transform .2s ease-out;
	-ms-transition: -ms-transform .2s ease-out;
}

#flickObj div#flick figure {
	margin: 0 auto;
	background-color: #ccc;
	width: 100%;
	height: auto;
	line-height:0;
}

#flickObj div#flick figure img{
	margin: 0 auto;
	background-color: #ccc;
	width: 100%;
	height: auto;
	line-height:0;
}

ul.next_prev{
	width:100%;
}

ul.next_prev li {
	margin: 0px;
	padding: 0.3em;
	display: inline;
	background-color: #EF4900;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;

	cursor: pointer;
}

ul.next_prev li img{
	width:60%;
}

ul.next_prev li.off {
	display: none;
}

ul.next_prev li.prev {
	text-align:right;
	position:relative;
	z-index:100;
	float: left;
	margin-top:-95%;
	margin-left:-15px;
}
ul.next_prev li.next {
	position:relative;
	z-index:100;
	float: right;
	margin-top:-95%;
	margin-right:-15px;
}

/*----------------------------------------
	chara
----------------------------------------*/

#chara .inner{
width:100%;
margin:0 auto 0;
padding-top:3%;
}

.box{
padding:0.5% 0 0.4%;
width:100%;
}

#chara #box_new1{
border:5px solid #d00;
padding:8px 14px;
margin:-4px 0px 25px;
}

#chara #box_new_attention{
color:red;width:100%;text-align:right;
margin-bottom:35px;
font-size:10px;
}

#chara #box_new2{
border:5px solid #d00;
padding:8px 14px;
margin:-4px 0px 5px;
}

#chara .title_new{
display:block;
width:105%;
margin:15px 0 0;
}


#chara h1{
width:113%;
margin:2% 0 3% -3%;
overflow:hidden;
}

#chara .name_title{
text-align:center;
width:40%;
float:left;
}

#chara .exp_title{
text-align:center;
width:55%;
float:left;
margin:0 0 0 5%;
}

#chara .name_title .name{
font-size:5px;
}

#chara .exp_title .exp{
font-size:5px;
}

#chara .icon_box{
float:left;
width:8%;
}


#chara .name_box{
float:left;
width:35%;
}

#chara .icon{
width:100%;
margin:0 0 0 0%;
display:block;
}



#chara .gatya_box{
float:right;
width:55%;
margin:1.5% 0 0;
}

#chara .name_box .name{
display:block;
font-size:15px;
font-weight:600;
margin-top:1%;
margin-left:5%;
color:#643;
}

#chara .gatya{
width:32%;
margin:0 0 0 1%;
}

#chara .line{
height:0px ;
border-top:1px solid #ddd;
border-bottom:1px solid #fff;
clear:both;
}

#chara .name .mini{
display:block;font-size:5px;font-weight:400;
}

/*----------------------------------------
	news
----------------------------------------*/

#news{
height:800px;
margin:11% 0 0;
}




/*----------------------------------------
	common
----------------------------------------*/

.clearfloat{
clear:both;
}

a.mo :hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

#date .androiddevice{
color:#fff;
background-color:#d00;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px; 
padding:2px 8px 2px;
text-align:center;
margin-left:7.5%;
width:85%;
text-decoration:none;
top:115%;
display:block;
position:absolute;
z-index:60;
font-size:10px;
}





/*----------------------------------------
	for PC
----------------------------------------*/

@media screen and (min-width: 641px) {

body{
background-image:url("../img/bg.jpg");
background-position:center top;
background-repeat:repeat-x;
background-attachment: fixed;
}

#mainImg img{width:100%;margin-top:0px;}

#menu .menu_bg_sp{
display:none;
width:100%;
}

#menu .menu_bg_pc{
display:block;
width:100%;
}

#menu .logo{
position:absolute;
width:23%;
top:8%;
left:0.5%;
}

#menu .top{
position:absolute;
width:9%;
top:17.5%;
left:30%;
}

#menu .chara{
position:absolute;
width:21%;
top:18.5%;
left:50%;
}

#menu .htu{
position:absolute;
width:10%;
top:19%;
left:82%;
}

#menu .line1{
position:absolute;
width:0;
height:40%;
top:13%;
border-right:1px solid #f5a15a;
border-left:1px solid #aa9;
left:25%;
}

#menu .line2{
position:absolute;
width:0;
height:40%;
top:13%;
border-right:1px solid #f5a15a;
border-left:1px solid #99a;
left:44%;
}

#menu .line3{
position:absolute;
width:0;
height:40%;
top:13%;
border-right:1px solid #f5a15a;
border-left:1px solid #99a;
left:77%;
}

#menu .chara .update{
display:block;
position:absolute;
top:80%;
left:28%;
width:38%;
}

#menu .htu .update{

display:block;
position:absolute;
top:80%;
left:12%;
width:80%;
}

#attention{
display:block;
margin:20px auto -30px;
width:640px;
max-width:80%;
}

.info{
margin-top:-58%;
width:100%;
}

.info img{
width:100%;
}

.info_2{
margin-top:-58%;
width:100%;
display:block;margin-top:-7px;
}

.bnr_votecp{
position:relative;
z-index:100;
display:block;
width:92%;
margin:-22% auto 3%;
}

.bnr_votecp img{
width:100%;
}

.btn_news{
position:relative;
z-index:100;
display:block;
width:79.5%;
margin:0% auto 0;
}

.btn_news img{
width:100%;
}

.btn_news .update{
width:15%;top:30%;right:22%;display:block;position:absolute;
}

.btn_eos2{
	display:block;
	width:90%;
	border-radius:5px;
	text-align:center;
	border:4px solid #D00;
	margin:2% auto 5%;
	font-size:22px;
	font-weight:bold;
	text-decoration:none;
	background-color:#fff;
	padding:18px 0;
	position:relative;
}

#date{
width:100%;
position:relative;
margin:0.5% auto 13%;
}

#date img.date_bg{
display:block;
margin:0 auto -8.5%;
width:80%;
}

.btn_ios{
display:block;
position:absolute;
margin:0 0 0 41%;
width:23%;
}

.btn_ios img{
display:block;
width:100%;
}

.btn_android{
display:block;
position:absolute;
margin:0 0 0 65.5%;
width:20.5%;
}

.btn_android img{
display:block;
width:100%;
}



.tweetcampaign{
margin:3% auto 0;
display:block;
width:85%;
}

.tweetcampaign img{
margin:0 auto 0;
display:block;
width:100%;
}


a img.attention{
	display:block;
	margin:20px auto 0;
	width:79%;
	position:relative;
}

#date_store{

	position:relative;
	width:78%;
	margin:-16% auto 20%;
	z-index:100;
	}

#date_store span{
	display:block;
	float:left;
	margin:0 auto 0;
	width:48%;
}

#date_store span.right{
margin-left:18px;
}

#date_store span img{
	margin:0 auto 0;
	width:100%;
}

#flickObj{
	max-width:800px;
	width:80%;
	margin:0 auto 0;
}

.flickNav{
	display:none;
	}

#flickObj_nav{
	width:100%;
	max-width:800px;
	margin:8% auto 0;
	overflow:hidden;
	}

.container{
	overflow:hidden;
	border:none;
	}


ul.next_prev li.prev {
	position:relative;
	z-index:100;
	float: left;
	margin-left:20px;
	margin-top:-32%;
}
ul.next_prev li.next {
	position:relative;
	z-index:100;
	float: right;
	margin-right:20px;
	margin-top:-32%;
}



ul.next_prev li {
	margin: 0px;
	padding: 0.3em;
	display: inline;
	background-color: 6df;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer;
	box-shadow:1px 1px 2px #666;
}

ul.next_prev li img{
	width:100%;
}

#store a img{
	width:210px;
}

#store span img{
	width:210px;
}

#store a.right{
	margin-left:10px;
}

#store span.right{
	margin-left:10px;
	display:inline;
}


#sitelink a img{
	width:210px;
}

#sitelink a.right{
	margin-left:10px;
}

#footer{
	position:relative;
	width:100%;
	margin:0 auto 0;
	color:#300;
	font-size:14px;
	line-height:170%;
	text-align:center;
	padding:1% 0 1%;
}

#footer img{
	width:50%;
	margin-top:20px;
	margin-bottom:15px;
}

#exp h3{
	position:relative;
	display:block;
	font-size:18px;
	/*background-color:#333;*/
	background-image:url("../img/title_bg.gif");
	color:#fff;
	padding:7px 0px 7px;
	margin-top:6%;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
	border-top:4px solid #8E7E18;
	border-bottom:4px solid #8E7E18;
}


#exp .text{
	color:#450606;
	display:block;
	width:98%;
	margin:2% auto 0px;
	line-height:170%;
}


.item{
	border:2px solid #fff;
	margin-left:8px;
	}

.item.left{
	margin-left:0px;
	}

.itemBox{
	overflow:hidden;
	}

/*----------------------------------------
	chara
----------------------------------------*/

#chara .inner{
width:100%;
margin:0 auto 0;
padding-top:5%;
padding-bottom:5%;
}

.box{
padding:0.5% 0 0.4%;
width:100%;
}

#chara #box_new{
border:5px solid #d00;
padding:8px 14px;
margin:0px 0px 5px;
bakground-color:#fff;
}

#chara #box_new_attention{
color:red;width:100%;text-align:right;
margin-bottom:45px;
font-size:15px;
}

#chara .title_new{
display:block;
width:110%;
margin:0px 0 0;
}

#chara h1{
width:90%;
margin:0.5% 0 4% -1.8%;
}

#chara .name_title{
text-align:center;
width:40%;
float:left;
}

#chara .exp_title{
text-align:center;
width:55%;
float:left;
margin:0 0 0 5%;
}

#chara .name_title .name{
font-size:15px;
}

#chara .exp_title .exp{
font-size:15px;
}

#chara .name_box .name{
display:block;
font-size:31px;
font-weight:600;
margin-top:2%;
margin-left:5%;
color:#643;
}

#chara .icon_box{
float:left;
width:8%;
}


#chara .name_box{
float:left;
width:35%;
}

#chara .icon{
width:100%;
margin:0 0 0 0%;
display:block;
}

#chara .gatya_box{
float:right;
width:55%;
margin:2% 0 0;
}

#chara .gatya{
width:32%;
margin:0 0 0 1%;
}

#chara .line{
height:0px ;
border-top:1px solid #ddd;
border-bottom:1px solid #fff;
clear:both;
}

#chara .name .mini{
display:block;font-size:13px;font-weight:400;
}

#date .androiddevice{
color:#fff;
background-color:#d00;
width:auto;
padding:4px 15px 2px;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px; 
text-decoration:none;
top:105%;right:10%;
display:block;
position:absolute;
z-index:60;
margin:0;
font-size:13px;
}

/*----------------------------------------
	news
----------------------------------------*/

#news{
height:1700px;
margin:15% 0 0;
}



/*----------------------------------------
	device
----------------------------------------*/

#device{

}


}


@media screen and (min-width: 500px) and (max-width: 641px) {

#chara .name_box .name{
font-size:22px;
}

}



/*#menu .chara .update{display:none;}*/
#menu .htu .update{display:none;}
#menu .htu .update_n{display:none;}