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

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

body{
	color:#ff60a7;
	background: #FFF;
	font-family: ソフトゴシック M;
	zoom:1;
	-webkit-text-size-adjust:100%;
	z-index: 0;
	background-image: url("../img/common/bg_texture.png");
	}

a{color:#FFF;}
a:hover{color: #fcff00}
img{ vertical-align:bottom;}

.button_na{opacity: 0.5;}

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:120px;
	position:fixed;
	background-image:url(../img/common/nav_bg.png);
	background-repeat: repeat-x;
	z-index: 9999;
	}

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

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


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

.top-content{
	margin: 70px auto 0;
	padding: 70px 0 0;
	width: 1200px;
	overflow: hidden;
}

		.main-visual{
		height:763px;
		background-image:url(../img/top/top_bg02.png);
		margin-top: -50px;
		}

		.pickup{
			float: right;
			padding-top: 450px;
			padding-right: 10px;
			}


.news-wrapper{
	width: 100%;
	height: 200px;
	background-color: #ff75a8;
	color: #FFF;
	padding-top: 5px;
}

.news-content{
	width: 800px;
	margin: 0 auto;
}

	.news-content h2{
		text-indent: -9999px;
		background-image: url(../img/top/news_h1.png);
		width:781px;
		height: 41px;
	}


.whatsnew{
	width: 750px;
	height: 100px;
	padding-left: 37px;
	position: relative;
	overflow: hidden;
}

.whatsnew li{
	display: inline-block;
	margin-bottom: 10px;
	border-bottom: dashed;
	border-width: thin;
	width: 742px;
}

.whatsnew dt{float:left}

.whatsnew dd{float:left}


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

.concept-wrapper{
	height: auto;
}

.story-content{
	margin-bottom: 60px;
}

.concept-content01{
	margin-top: -30px;
}

.concept-content02{
	margin-top: -30px;
}

.concept-content03{
	margin-top: 0px;
}

.concept-wrapper{
	margin-top: 30px;
}

.concept-wrapper h2{
	float: right;
	color: #FFF;
	font-size: 12pt;
	width: 80px;
	height: 23px;
	background-color: #ff75a8;
	text-align: center;
	line-height: normal;
	margin-right: 200px;
}

.story-wrap{
	width: 800px;
	margin: 0 auto 0;
}

.story1{}

.story2{
	margin-top: 30px;
}

.section-h3{
	width: 100%;
	height: 71px;
	background-image: url("../img/common/h1_base.png");
	background-repeat: repeat-x;
	color: #FFF;
	text-align: center;
	padding-top: 10px;
	font-family: すずむし;
}

.section-h3 p{
	width: 600px;
	margin: 0 auto 0;
}

.midashi{
	font-size: 16pt;
}

.concept01{
	margin: -10px auto 0;
	width: 1400px;
	height: 294px;
	background-image: url("../img/concept/bg01.png");
	background-repeat: no-repeat;
	overflow: hidden;
}

.concept02{
	margin: -10px auto 0;
	width: 1400px;
	height: 226px;
	background-image: url("../img/concept/bg02.png");
	background-repeat: no-repeat;
	overflow: hidden;
}

.concept03{
	margin: -10px auto 0;
	width: 1400px;
	height: 366px;
	background-image: url("../img/concept/bg03.png");
	background-repeat: no-repeat;
	overflow: hidden;
}


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

.character-wrapper{
	background-color : #ff75a8; 
	background-repeat: repeat-x;
	width: 100%;
	height: 695px;
}

.character-wrapper h2{
	float: right;
	color: #ff75a8;
	font-size: 12pt;
	width: 80px;
	height: 23px;
	background-color: #FFF;
	text-align: center;
	line-height: normal;
	margin-right: 200px;
}


.character-content{
	width: 1200px;
	margin: 0 auto 0;
	padding-top: 20px;
}


.cloud{
	background-image: url("../img/character/cloud_bg.png");
	background-repeat: no-repeat;
	width: 858px;
	height: 277px;
	margin-top: -510px;
	margin-left: -20px;
}

.character-intro{
	padding-left: 100px;
}

.sample-voice ul{
	clear: both;
	float: left;
	margin-top: 260px;
	margin-left: 50px;
}

	.sample-voice li{
		display: inline-block;
		margin-right: 5px;
	}


.character-image{
	display: block;
	float: right;
	background-image:url("../img/character/chara_image.png");
	background-repeat: no-repeat;
	width: 582px;
	height: 695px;
	margin-top: -366px;
	padding-right: 16px;
}

.cloth-btn{
	margin-top: 540px;
	margin-left: 100px;
}


		.gallery-wrapper{
			 width:800px;
			margin: 0 auto 0;
			 height:500px;
			}

			.gallery-wrapper ul{
				width:100%;
				}
				
			.gallery-wrapper li{
				float:left;
				width: 33%;
				padding-top: 10px;
			}

				.gallery-wrapper li img{
							box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
				}

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

.special-wrapper h2{
	float: right;
	color: #FFF;
	font-size: 11pt;
	width: 80px;
	height: 23px;
	background-color: #ff75a8;
	text-align: center;
	line-height: normal;
	margin-right: 200px;
}

.special-content{
	padding-top: 50px;
}

.special01{
	margin: -10px auto 30px;
	padding-top: 20px;
	width: 800px;
	height: auto;
	background-repeat: no-repeat;

}

.campaign-about{
	float:right;
	margin-top: -350px;
	line-height: 75%;

}

.campaign-about a{
	color: #ff60a7;
	font-weight: bold;
}

.special02{
	width: 800px;
	height: auto;
	margin: 0 auto 0;
	text-align: center;
}

.vd-about{
	line-height: 75%;
	font-style: italic;
}

.special-03{
	width: 800px;
	height: 200px;
	margin: 0 auto 0;
	padding-top: 50px;
	line-height: 50%;
}

		.special-03 a{
			color: #FFF;
			text-decoration: none;
		}

		.special-03 a:hover{
			color: #FF0;
		}

		.special-03 ul{
			width: 800px;
			float:left;
			margin-top: -5px;
		}


		.special-03 li{
			display: inline-block;
			width: 120px;
			height: 13px;
			background-color: #ff60a7;
			text-align: center;
			padding-top: 12px;
			border-radius: 10px 10px 10px 10px;
			font-size: 12px;
			margin-left: 30px;
			margin-bottom: 18px;
			line-height: 25%;
		}

.special-count{
	width: 800px;
	height: auto;
	margin: 0 auto 0;
	padding-top: 50px;
	line-height: 50%;
}

.special-count li{
	display: inline-block;
	margin-right: 41px;
	margin-bottom: 30px;
}

.special-content04{
	height: 1100px;

}

.sns-wrapper{
	width: 800px;
	margin: 0 auto 0;
}

.sns-wrapper h4{
			width: 120px;
			height: 25px;
			background-color: #ff60a7;
			text-align: center;
			margin: 30px auto 0;
			border-radius: 10px 10px 10px 10px;
			font-size: 13px;
			line-height: 25px;
			color: #FFF;
}

.icon{
	margin-left: 50px;
}

.icon li{
	display: inline-block;
}

.twi-header{
	margin-top: 20px;
	margin-left: 180px;

}

.twitter-dl{
	margin-top:10px;
	margin-left: 330px;
}

.twitter-dl a{
	color: #ff60a7;
}

.support-banner{
	width:800px;
	text-align: center;
}

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


.trial-movie{
	padding-left: 120px;
}

.trial-link{
	margin-left: 325px;
}

.trial-link small{
	font-size:9px;
	font-weight: 100;
	}

.trial-link dt{
	width: 180px;
	height: 25px;
	color: #FFFFFF;
	margin-left: -100px;
	margin-top: 20px;
	border-radius: 10px 10px 10px 10px;
	background-color: #ff60a7;
	font-size: 10pt;
	font-weight: 100;
	text-align:center;
	line-height: 25px;
}

.trial-link dd{
	margin-top: -21px;
	margin-left: 100px;
}

.trial-link a{
	color: #343434;
}

.trial-link a:hover{
	text-decoration: underline;
	color: #ff60a7;
}

.trial-free img{
}

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

	.spec-wrapper{
		padding-top: 70px;
		height: auto;
		margin-bottom: 50px;
		}

.spec-wrapper h2{
	float: right;
	color: #FFF;
	font-size: 11pt;
	width: 80px;
	height: 23px;
	background-color: #ff75a8;
	text-align: center;
	line-height: normal;
	margin-right: 200px;

}

	.spec-content{
		width: 1000px;
		 margin: 0 auto 0;
		}


.jacket{
	width: 364px;
	height: 518px;
	margin-top: 40px;
	box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
	
}

.spec{
		float: right;
		margin-top: -550px;

}


			table{
				font-size: 12pt;
				padding-left: 30px;
				width: 650px;
}
		
			.precell{
				color:#fff;
				font-size: 10pt;
				line-height: 25%;
				background-color:#ff75a8;
				text-align:center;
				border-radius: 10px 10px 10px 10px;
				}



footer{
	width: 100%;
	background-color: #ff75a8;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #FFF;
}

.footer-wrapper{
	clear: both;
	text-align: center;
}

.footer-wrapper img{
	margin-bottom: 20px;
	margin-left: 0px;
}