@charset "utf-8";



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

#mainImg_sp img{display:none; width:100%;}
#mainImg_pc img{display:block; width:100%;margin-bottom:-75%;}

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

#wrapper{
	max-width:800px;
	background-image:url("../img/img_wrapBg.png");
	margin:0 auto 0;
	box-shadow: 0px 0px 10px;
	overflow:hidden;
	}

#menu{
	width:100%;
	margin:0 auto -1%;
	position:relative;
}

#menu .menu_bg{
	margin-top:-15px;
	display:block;
	width:100%;
}

#menu .logo{
	position:absolute;
	display:block;
	width:16%;
	top:20%;
	left:6%;
}



#menu .top{
	position:absolute;
	display:block;
	width:10%;
	top:31%;
	left:29%;
}

#menu .chara{
	position:absolute;
	display:block;
	width:21%;
	top:31%;
	left:47.5%;
}

#menu .intro{
	position:absolute;
	display:block;
	width:19.5%;
	top:31.5%;
	left:76%;
}

#menu .logo img,
#menu .top img,
#menu .chara img,
#menu .intro img{
	width:100%;
}

#chara_bg{
	margin:-12% 0 -35%;
}

#chara_bg img{
	width:100%;
	margin:0 auto 0;
	display:block;
}

.line1{
	position:absolute;
	width:0px;
	height:86%;
	border-right:1px solid #fff;
	border-left:1px solid #ddd;
	left:25%;
	top:-5%;
}

.line2{
	position:absolute;
	width:0px;
	height:86%;
	border-right:1px solid #fff;
	border-left:1px solid #ddd;
	left:43%;
	top:-5%;
}

.line3{
	position:absolute;
	width:0px;
	height:86%;
	border-right:1px solid #fff;
	border-left:1px solid #ddd;
	left:71.5%;
	top:-5%;
}

.box_info{
	margin-top:28%;
}

#content{
	position:relative;
	width:100%;
	background-image:url("../img/base.jpg");
	background-position:0px 30%;
	margin:0 auto 0;
}

#flame_left{
	width:10px;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:100;
	background-image:url("../img/flame_l.png");
}

#flame_right{
	width:10px;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	z-index:100;
	background-image:url("../img/flame_r.png");
}

#title{
	display:block;
	width:100%;
	margin: 8% auto 0;
}

#expBox{
	width:90%;
	margin: 0 auto 0;
}

#movies{display:block;position:relative;width:240px;height:140px;margin:-1% 5% 7% 0px;float:right;padding:3px 3px 23px;background-color:#d00;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.2);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; 
}

#movies span{position:absolute;bottom:3%;font-size:12px;color:#fff;font-weight:600;text-decoration:none;width:100%;text-align:center;}
#movies img{position:absolute;bottom:3%;font-size:12px;color:#fff;font-weight:600;text-decoration:none;width:100%;text-align:center;display:none;}
#flashContent{width:240px;height:135px;}


/*
.mitama{display:block;position:relative;width:90%;margin:-48% auto 0;}
.mitama img{width:100%;}
*/

#date_store{
	position:relative;
	width:70%;
	margin:0 auto 20%;
	clear:both;
}


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


.btn_ios{
	position:absolute;
	top:120%;
	left:5%;
	display:block;
	margin:0 auto 0;
	width:47%;
}

.btn_android{
	position:absolute;
	top:120%;
	right:5%;
	display:block;
	margin:0 auto 0;
	width:42%;
}


.exp{
	padding-top:3%;
	padding-left:4%;
	padding-right:2%;
	font-size:18px;
	color:#300;
	line-height:170%;
}

#preregist{
	margin:-3% 0 0;
}

#preregist img.preregist_bg{
	display:block;
	width:100%;
}

.btn_preregist{
	display:block;
	width:95%;
	margin:-36% auto 0;
}

.btn_preregist img{
	width:100%;
}

.line_1{
	border-top:2px solid #bbb;
	border-bottom:2px solid #fff;
}

#counter{
	position:relative;
	width:60%;
	margin:5.5% auto 3%;
}

#counter_num{
	width:50%;
	margin:0 0 0 0%;
	position:absolute;
	top:20%;
	left:59%;
}


#counter img.counter_bg{
	width:100%;
}


#campaign{
	float:left;
	display:block;
	width:41%;
	margin:5% 0 2% 8%;
}

#campaign img{
	width:100%;
}

#campaign.right{
	margin-left:2%;
}


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


#sitelink{
	padding:4% 0 0%;
	text-align:center;
	position:relative;
	z-index:10;
}

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

#sitelink a img{
	width:30%;
}


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

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

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

#sns{
	position:relative;
	width:100%;
	height:45px;
	margin:6% auto 0px;
	font-size:18px;
	line-height:0%;
	background-image:url("../img/share_bg.png");
	background-position:right 0px;
	background-size: cover;
	padding:12px 0 4px;
	text-align:center;
	z-index:20;
}

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


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

	height:220px;
	overflow:hidden;
}

#footer img{
	width:100%;
	display:block;
	position:absolute;
	bottom:0px;
}



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

#flickObj_nav{
	width:100%;
	max-width:260px;
	margin:0 25px 0 20px;
	overflow:hidden;
	float:right;
	}

#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: #014d83;
	-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;
}


.twitter_title{
display:block;
position:absolute;
top:-88px;
left:3px;
width:58%;
}

.twitter_btn{
display:block;
position:absolute;
top:-79px;
right:0px;
}

#twitter_window{
display:block;
width:660px;
margin:0px auto 0px;
padding:0px 0;
background-size:contain;
background-image:url("../img/twitter_bg_middle.png");
background-repeat:repeat_x;
position:relative;
z-index:100;
}

#twitter{
display:block;
width:500px;
margin:0 auto 0;
}


.twitter_flame{
display:block;
width:660px;
margin:0 auto 0;
}


.btn_inq{
padding:8px 20px 8px;
border-radius:8px 8px;
background-color:#666;
text-decoration:none;
color:#fff;
font-size:17px;
border:1px solid #fff;
}

.btn_inq.right{
margin:0 0 0 7px;
}

#info_title{
width:660px;
margin:0 auto 20px;
font-size:26px;
color:#400;
line-height:145%;
}


#info_inner{
margin-top:75px;
padding:0 0 50px;
}

#info_window{
display:block;
width:580px;
margin:0px auto 0px;
padding:40px 40px;
background-size:contain;
background-image:url("../img/twitter_bg_middle.png");
background-repeat:repeat_x;
position:relative;
z-index:100;
line-height:170%;
font-size:16px;
}

#info_window h5{
display:block;
font-size:18px;
margin:20px 0 10px;
}

#btn_info{
display:block;
width:82%;
margin:0 auto 95px;
}

#btn_info img{
display:block;
width:100%;
}

#btn_info_text{
display:block;
width:82%;
padding:18px 0;
margin:0 auto 95px;
background-color:#d00;
border-radius:5px;
text-align:center;
text-decoration:none;
color:#fff;font-size:18px;
position:relative;
z-index:100;
opacity:1;
box-shadow:1px 1px 2px rgba(0,0,0,0.3);
font-weight:800;
text-shadow:0 0 5px #900;
}

#btn_info_text.mo:hover{
opacity:0.7;
}

table th{
vertical-align:top;
}





/*----------------------------------------
	for SP
----------------------------------------*/

@media screen and (max-width: 720px) {

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

#mainImg_sp img{display:block; width:100%;}
#mainImg_pc img{display:none; width:100%;}

#wrapper{
	max-width:814px;
	background-image:url("../img/img_wrapBg.png");
	margin:0 auto 0;
	box-shadow: 0px 10px 10px;
	overflow:hidden;
	}

#menu{
	width:100%;
	margin:0 auto -1%;
	position:relative;
}

#menu .menu_bg{
margin-top:0%;
	display:block;
	width:100%;
}


#menu .logo{
	position:absolute;
	display:block;
	width:19%;
	top:11%;
	left:3%;
}



#menu .top{
	position:absolute;
	display:block;
	width:12.5%;
	top:20%;
	left:28%;
}

#menu .chara{
	position:absolute;
	display:block;
	width:25%;
	top:18.5%;
	left:45.5%;
}

#menu .intro{
	position:absolute;
	display:block;
	width:23%;
	top:20%;
	left:75%;
}

#menu .logo img,
#menu .top img,
#menu .chara img,
#menu .intro img{
	width:100%;
}

#chara_bg{
	margin:-12% 0 -35%;
}

#chara_bg img{
	width:100%;
	margin:0 auto 0;
	display:block;
}

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

#flame_left{
	width:10px;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:100;
	background-image:url("../img/flame_l.png");
	display:none;
}

#flame_right{
	width:10px;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	z-index:100;
	background-image:url("../img/flame_r.png");
	display:none;
}


#movies{display:block;position:relative;width:90%;float:none;margin:-15% auto -50%;border-radius:0px 0px;background-color:transparent;box-shadow:0px 0px 0px;clear:both;}

#movies span{position:absolute;bottom:3%;font-size:12px;color:#fff;font-weight:600;text-decoration:none;width:100%;text-align:center;display:none;}
#movies img{display:block;width:100%;margin:0 0 0;}
#flashContent{width:100%;display:none;}

.mitama{display:block;position:relative;width:90%;margin:-48% auto 0px;}
.mitama img{width:100%;}


#date_store{
	position:relative;
	width:94%;
	margin:0 auto 57%;
}


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


.btn_ios{
	position:absolute;
	top:120%;
	left:5%;
	display:block;
	margin:0 auto 0;
	width:47%;
}

.btn_android{
	position:absolute;
	top:120%;
	right:5%;
	display:block;
	margin:0 auto 0;
	width:42%;
}



#preregist{
	margin:-5% 0 0;
}

#preregist img.preregist_bg{
	display:block;
	width:100%;
}

.btn_preregist{
	display:block;
	width:100%;
	margin:-37% auto 6.2%;
}

.btn_preregist img{
	width:100%;
}

.line_1{
	border-top:2px solid #bbb;
	border-bottom:2px solid #fff;
}

#counter{
	width:65%;
	margin:-2% auto 2%;
}

#counter img.counter_bg{
	width:100%;
}


#campaign{
	float:none;
	display:block;
	width:88%;
	margin:4% auto 1%;
}

#campaign img{
	width:100%;
}

#campaign.right{
	margin:4% auto 1%;
}


#title{
	display:block;
	width:100%;
	margin: 20% auto 0;
}

#expBox{
	width:85%;
	margin: 0 auto 0;
}

.exp{
	float:left;
	width:100%;
	padding-top:0;
	padding-left:0%;
	padding-bottom:5%;
	font-size:15px;
	color:#300;
}


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


#sitelink{
	padding:5% 0 0%;
	text-align:center;
	position:relative;
	z-index:10;
}

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

#sitelink a img{
	width:43%;
}


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

.ajust_5em_out{
	display:block;
	margin-left:8em;
	font-size:10px;
	}

.ajust_5em_in{
	margin-left:-8em;
	color:#333;
	font-size:10px;
	}

#sns{
	position:relative;
	width:100%;
	height:40px;
	margin:6% auto 0px;
	font-size:18px;
	line-height:0%;
	background-image:url("../img/share_bg.png");
	background-position:right 0px;
	padding:8px 0 2px;
	text-align:center;
	z-index:20;
}

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


#footer{
	position:relative;
	width:100%;
	margin:0% auto 0;
	color:#300;
	font-size:10px;
	line-height:170%;
	text-align:center;
	height:150px;
	overflow:hidden;
}

#footer img{
	width:100%;
	display:block;
	position:absolute;
	bottom:0px;
}


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

#flickObj_nav{
	max-width:350px;
	margin:5% auto 0;
	overflow:hidden;
	float:none;
	}

#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: #014d83;
	-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;
}


.twitter_title{
display:block;
position:absolute;
top:-20%;
left:3px;
width:70%;
}
.twitter_btn{
display:block;
position:absolute;
top:auto;
bottom:-18%;
width:40%;
left:36%;
}


#twitter_window{
display:block;
width:95%;
margin:0px auto 0px;
padding:0px 0;
background-image:url("../img/twitter_bg_middle.png");
background-size:contain;
background-repeat:repeat_x;
position:relative;
z-index:100;
height:auto;
}

#twitter{
display:block;
width:85%;
margin:0 auto 0;
}

.twitter_flame{
display:block;
width:95%;
margin:0 auto 0;
}


.btn_inq{
display:block;
padding:8px 20px 8px;
border-radius:8px 8px;
background-color:#666;
text-decoration:none;
color:#fff;
font-size:12px;
border:1px solid #fff;
margin:-6% 0 1%;
}

.btn_inq.right{
display:inline-block;
margin:0px 0 0 0px;
}



#info_title{
width:95%;
line-height:145%;
margin:0 auto 10px;
font-size:19px;
color:#400;
word-break:normal;
}


#info_inner{
margin-top:35px;
padding:0 0 50px;
}

#info_window{
display:block;
width:85%;
margin:0px auto 0px;
padding:5%;
background-size:contain;
background-image:url("../img/twitter_bg_middle.png");
background-repeat:repeat_x;
position:relative;
z-index:100;
font-size:16px;
}

#btn_info{
display:block;
width:95%;
margin:0 auto 70px;
}

#btn_info img{
display:block;
width:100%;
}

#btn_info_text{
display:block;
width:94%;
padding:18px 0;
margin:0 auto 95px;
background-color:#d00;
border-radius:5px;
text-align:center;
text-decoration:none;
color:#fff;font-size:18px;
position:relative;
z-index:100;
opacity:1;
box-shadow:1px 1px 2px rgba(0,0,0,0.3);
font-weight:800;
text-shadow:0 0 5px #900;
}

#btn_info_text.mo:hover{
opacity:0.7;
}


.box_info{
	margin-top:8%;
	margin-bottom:20%;
	clear:both;
}


#movies{display:block;position:relative;width:90%;float:none;margin:-48% auto 0%;border-radius:0px 0px;background-color:transparent;box-shadow:0px 0px 0px;clear:both;}



}/*media for SP*/


.hide_pc{
display:none;
}


/*----------------------------------------
	追加分
----------------------------------------*/

#attention{
display:block;
margin:10px auto -0px;
width:95%;
max-width:500px;
}



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

.clearfloat{
clear:both;
}


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


.update{
display:none;
position:absolute;
top:67%;
left:80%;
width:10%;
}

img.new{
display:block;
position:absolute;
width:6%!important;
}

#chara_03,
#chara_04,
#chara_05{
position:relative;
}

#tab{
z-index:3;
}

#tab.num3{
width:100%;
position:absolute;
bottom:0%;
}

#tab.num3 ul{
padding:0 3% 0 3.2%;
}

#tab.num3 li a{
display:block;
width:16.1%;
margin-left:0.5%;
float:left;
}

#tab.num3 .box_close{
display:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;

margin:10% 0 0 -2%;
width:98%;
border-top:1px solid #ddd;
position:relative;
position: absolute;bottom: -20%;
}

#tab.num3 .close{
display:block;
width:5%;
margin:auto;
display:block;

}

#tab.num3 .close img{
width:5%;
display:block;
position:absolute;
top:3px;
}



#tab.num4{
width:100%;
position:absolute;
bottom:0%;
}

#tab.num4 ul{
padding:0 3% 0 3.2%;
}

#tab.num4 li a{
display:block;
width:16.1%;
margin-left:0.5%;
float:left;
}

#tab.num4 .box_close{
display:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;

margin:10% 0 0 -2%;
width:98%;
border-top:1px solid #ddd;
position:relative;
position: absolute;bottom: -20%;
}

#tab.num4 .close{
display:block;
width:5%;
margin:auto;
display:block;

}

#tab.num4 .close img{
width:5%;
display:block;
position:absolute;
top:3px;
}




#tab.num5{
width:100%;
position:absolute;
bottom:12%;
}

#tab.num5 ul{
padding:0 3% 0 3.2%;
display:block;
position:relative;
}

#tab.num5 li a{
display:block;
width:14.0%;
margin-left:0.5%;
float:left;
}

#tab.num5 li a.mini{
display:block;
width:9.5%;
margin-left:0.5%;
float:left;
margin-top:4%;
}

#tab.num5 li a.mini.left{
margin-left:2%;
}

#tab.num5 .box_close{
display:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;

margin:10% 0 0 -2%;
width:98%;
border-top:1px solid #ddd;
position:relative;
position: absolute;bottom: -90%;
}

#tab.num5 .close{
display:block;
width:5%;
margin:auto;
display:block;

}

#tab.num5 .close img{
width:5%;
display:block;
position:absolute;
top:3px;
}



#drawbox .bg{
position:absolute;z-index:1;display:block;top:0;
}


#tab li a img{
width:100%;
}

#drawbox{
position:relative;
display:block;
overflow:hidden;
}

#drawbox img{
display:block;
top:0;left:0;
}

.target{
z-index:2;position:relative;
}




@media screen and (max-width: 480px) {

#movies{display:block;position:relative;width:90%;float:none;margin:-48% auto 0%;border-radius:0px 0px;background-color:transparent;box-shadow:0px 0px 0px;clear:both;}


.box_info{
	margin-top:8%;
	margin-bottom:20%;
	clear:both;
}

#title{
	display:block;
	width:100%;
	margin: 15% auto 0;
}

.twitter_title{
display:block;
position:absolute;
top:-16%;
left:3px;
width:70%;
}

}