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

/*****************
	setting
******************/

body{
	color:#FFF;
	background: #ff60a7;
	background-image: radial-gradient(#ff70b0 20%, transparent 0), radial-gradient(#ff70b0 20%, transparent 0);
	background-position: 0 0, 20px 20px;
	background-size: 40px 40px;
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	zoom:1;
	-webkit-text-size-adjust:100%;
	z-index: 0;
	}

a{color:#F80ED2;}
img{ vertical-align:bottom;}

html,body{
	height:100%;
	}
	
.body-wrap{
	position:relative;
	min-width:1000px;
	min-height:100%;
	height:auto !important;
	height:100%;
}

li{	list-style:none;}

a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 
a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}


/*****************
	header
******************/

.header-wrap{
	 margin-top: -70px;
}

.header{
	width:100%;
	height:70px;
	position:fixed;
	background-color:#FFF;
	opacity:0.9;
	z-index: 9999;
	}

	.header .global-navi{
		width:1000px;
		margin: 0 auto;
		padding-left: 120px;
	}

		.header .global-navi li{
			float: left;
			width: auto;
			height: auto;
			padding-right: 50px;
			padding-top: 20px;
		}

		.title-logo{
			margin-top:-10px;
			}


/*****************
	top
******************/

.wrapper{
	margin: 70px auto 0;
	padding: 70px 0 0;
	width: 1200px;
	overflow: hidden;
}

.top-content{
	position: relative;
	height: 879px;
	margin: 0 auto 0;
}

		.main-visual{
		width:1218px;
		height:879px;
		margin-left: -10px;
		background-image:url(../img/top/top_bg.png);
		}

		.title{
			padding-top: 60px;
			padding-left: 40px;
			}


	.whatsnew-content{
		float:left;
		width:418px;
		height:370px;
		background-image:url(../img/top/info_bg.png);
		margin-top:0px;
		margin-left:40px;
		}
		
		.whatsnew-content h2{
			text-indent:-7777px;
			}

		.whatsnew-wrap{
			position:relative;
			width:330px;
			height:290px;
			margin-left: 30px;
			margin-top: -5px;
			overflow:hidden;
			}

			.whatsnew-wrap li{
				padding:10px 10px 15px;
				}

			.whatsnew-wrap dt{
				font-weight:bold;
				color:#ff60a7;
				}
			
						.whatsnew-wrap dd{
						margin-left: 0px;
						color:#1797e1;
						}
						
							.whatsnew-wrap a:hover{
								color:#09F;
								}


	.official-twitter{
		clear:both;
		margin-left: 250px;
		padding-top: 10px;
		}


	.inline-wrapper{
		display:none;
		}

		.shop-list li{
			display:inline-block;
			margin-left: 60px;
			margin-top: 20px;
			line-height: 30px;
			}
			
			.shop-list dt{
				float:left;
				width: 140px;
				height: 30px;
				color:#ff60a7;
				background-color:#FF0;
				font-weight:bold;
				text-align:center;
				border-radius: 10px 10px 10px 10px;
				}

			.shop-list dd{
				margin-left: 300px;
				color:#FFF;
				}

			.shop-list a{
				color:#FFF;
				}

	.blog-link{
		margin-top: 60px;
		margin-left: 350px;
		}

	.shop-link{
		margin-top: -100px;
		margin-left: 20px;
		}

	.ex-link{
		margin-top: -50px;
		margin-left: 350px;
		}

	.tweet-btn{
		float:right;
		margin-top:-800px;
		margin-right: 50px;
		}

	.serihu{
		float:right;
		width:206px;
		height:582px;
		background-image:url(../img/top/top_huki_yoyaku.png);
		margin-top: -580px;
		margin-right: 40px;
		}

		.serihu img{
			margin-top: 470px;
			margin-left: 90px;
			}

		.master{
			float:right;
			width:150px;
			height:150px;
			margin-top: -200px;
			margin-right: 30px;
			margin-bottom: 100px;
			}


		.count{
			float:right;
			width:150px;
			height:150px;
			margin-top: -200px;
			margin-right: 30px;
			margin-bottom: 100px;
			}


/*****************
	concept
******************/

	.concept-wrap{
		margin-top: -70px;
		padding-top: 70px;
		width: 1200px;
		height: 1330px;
		}

	.concept-wrap h1{
			width:1200px;
			height:168px;
			background-image:url(../img/concept/h1_concept.png);
			text-indent:-7777px;
			}

	.concept-content{
		width:921px;
		height:1106px;
		background-image:url(../img/concept/concept_bg.png);
		margin-left: 150px;
		}

		.concept-content a{
			float:right;
			margin-top:700px;
			margin-right: 50px;
			}


/*****************
	story
******************/

	.story-wrap{
		padding-top: 70px;
		width: 1200px;
		height: 800px;
		}

	.story-wrap h1{
			width:1200px;
			height:168px;
			background-image:url(../img/story/h1_story.png);
			text-indent:-7777px;
			}

	.story-content{
		width:997px;
		height:565px;
		background-image:url(../img/story/story_bg.png);
		margin-left: 150px;
		}


/*****************
	character
******************/

	.chara-wrap{
		padding-top: 70px;
		width: 1200px;
		height:1130px;
		}

	.chara-wrap h1{
			width:1200px;
			height:168px;
			background-image:url(../img/chara/h1_chara.png);
			text-indent:-7777px;
			}

	.chara-content{
		width:1000px;
		height:1010px;
		margin-left: 30px;
		}

		.stand-image{
			width:479px;
			height:986px;
			}


	.profile{
		float:right;
		width:443px;
		height:555px;
		background-image:url(../img/chara/chara_bg.png);
		margin-top:-1000px;
		}

		.sample-voice{
			float:right;
			margin-top: -544px;
			margin-right: 0 
			}

			.sample-voice li{
				display:inline-block;
				}
			
			audio{
				display: none;
				}

				.sv1{
					background-image:url(../img/chara/btn_a_01.png);
					}

		.change-cloth{
			float:right;
			margin-top: -483px;
			  margin-right: 43px;
			}

			.change-cloth li{
				display:inline-block;
				}				
				
		.sample-cg{
			 float:right;
			 margin-top: -420px;
			 margin-right: 50px;
			 width:405px;
			 height:auto;
			}

			.sample-cg ul{
				width:100%;
				}
				
			.sample-cg li{
				float:left;
				width: 50%;
			}


/*****************
	special
******************/

	.special-wrap{
		padding-top: 70px;
		width: 1200px;
		height: autopx;
		}

	.special-wrap h1{
			width:1200px;
			height:168px;
			background-image:url(../img/special/h1_special.png);
			text-indent:-7777px;
			}

	.special-content{
		 width:1000px;
		 height: auto;
		 margin-left:500px;
		}


		.trial{
			margin-left: -250px;
			margin-bottom: 100px;
			}
	
			.trial h2{
				width:311px;
				height:119px;
				background-image:url(../img/special/h2_trial.png);
				text-indent: -7777px;
				margin-left: -100px;
				}

		.trial-image{
			background-image:url(../img/special/trial_ss01.png);
			width:638px;
			height:359px;
			margin-left: 80px;
			}

			.trial-about{
				margin-top: 20px;
				margin-left: 250px;
				margin-bottom: 50px;
				}

				.trial-about dl{
					padding-top: 10px;
					}
			
				.trial-about dt{
					float:left;
					clear: left;
					color:#ff60a7;
					background-color:#FF0;
					width:100px;
					font-weight:bold;
					text-align:center;
					border-radius: 10px 10px 10px 10px;
					}

					.trial-about dd{
						float: left;
						}

				.dl-link{
				margin-top: 20px;
				margin-left: 250px;
					}
				

				.dl-link dl{
					padding-top: 10px;
					}
			
				.dl-link dt{
					float:left;
					clear: left;
					color:#ff60a7;
					background-color:#FF0;
					width:100px;
					font-weight:bold;
					text-align:center;
					border-radius: 10px 10px 10px 10px;
					}

					.dl-link dd{
						float: left;
						}


					.dl-link a{
						color:#FFF;
						}

		.campaign{
			margin-left: -250px;
			margin-bottom: 100px;
			}
	
			.campaign h2{
				width:507px;
				height:119px;
				background-image:url(../img/special/h2_campaign.png);
				text-indent: -7777px;
				margin-left: -100px;
				}

		.campaign-image{
			background-image:url(../img/special/campaign_bg.png);
			width:948px;
			height:487px;
			margin-left: -100px;
			}

			.twitter-link{
				float:right;
				margin-top: 420px;
				}

		.tokuten{
			margin-left: -250px;
			margin-bottom: 100px;
			}
	
			.tokuten h2{
				width:311px;
				height:119px;
				background-image:url(../img/special/h2_tokuten.png);
				text-indent: -7777px;
				margin-left: -100px;
				}
				
				.tokuten-intro{
					width:738px;
					height:249px;
					background-image:url(../img/special/tokuten_intro.png);
					}


				.tokuten-demo{
					margin-top: 30px;
					margin-left: 150px;
					}

	
		.special-content p{
			margin-left: 30px;
			width:140px;
			height:25px;
			color:#ff60a7;
			background-color:#FF0;
			font-weight:bold;
			text-align:center;
			border-radius: 10px 10px 10px 10px;	
			line-height: 25px;
			}

		.icon{
			margin-left: -330px;
			}

		.icon li{
			display:inline-block;
			border: solid #FF0 1px;
			}

		.twi-header{
			margin-left: -280px;
			}

			.twi-header img{
							border: solid #FF0 1px;
				}
			
		.twitter-pic{
			margin-left: -280px;
			}

		.twitter-dl{
			padding-top: 10px;
			margin-left: -20px;
			margin-bottom: 30px;
			}

			.twitter-dl a{
				color:#FFF;
				margin-left: 50px;
				}

			.twitter-dl a:hover{
				color:#FF0;
				}
	
	
	.support-banner{
		margin-top: 100px;
		}
	
	.support-banner h2{
			width:200px;
			height:50px;
			color:#ff60a7;
			background-color:#FF0;
			font-weight:bold;
			text-align:center;
			border-radius: 10px 10px 10px 10px;	
			line-height: 50px;		
		}

		.support-banner ul{
			margin-left:-240px;
			}

			.support-banner img{
				border:solid 2px #FF0;
				}

			textarea{
				font-size:12px;
				color:#ff60a7;
				width:600px;
				height: 30px;	
				overflow:hidden;
				margin-bottom: 30px;
				}

			.banner-link2{
				margin-left: 200px;
				}


			.banner-link2 textarea{
				margin-left:-200px;
				}


			.banner-link3{
				margin-left: 200px;
				}

			.banner-link3 textarea{
				margin-left:-200px;
				}


/*****************
	spec
******************/

	.spec-wrap{
		padding-top: 70px;
		width: 1200px;
		height: 700px;
		}

	.spec-wrap h1{
			width:1200px;
			height:168px;
			background-image:url(../img/spec/h1_spec.png);
			text-indent:-7777px;
			}

	.spec-content{
		 width:500px;
		 height: 800px;
		 margin-left:250px;
		}

		.staff{
			width:411px;
			height:75px;
			background-image:url(../img/spec/staff_name.png);
			 margin-left: 170px;
			}

			table{
				margin-top: 40px;
				}
		
			.precell{
				color:#ff60a7;
				background-color:#FF0;
				font-weight:bold;
				text-align:center;
				border-radius: 10px 10px 10px 10px;
				}
			

	footer{
		width:100%;
		text-align:center;
		margin-top: 200px;
		margin-bottom: 30px;
		}		
			
		.brand-logo{
			margin-bottom: 20px;
			}