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

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

body{
	color:#FFF;
	background: #FF9954;
	background-image:url(../img/common/back.png);
	background-position: 0 0, 20px 20px;
	background-size: 40px 40px;
	font-family: Ryumin Medium KL;
	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%;
	margin: 0 auto;
	height:auto !important;
	height:100%;
}

.main-content{
	width: 100%;
	min-height: 1000px;
	}

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{
	 width:100%;
	 height:200px;
	 background-image:url(../img/header/header_base.png);
	background-size: cover;
	 margin-top: -20px;
}

.header{
	height:100px;
	background-image:url(../img/nav/menu_back.png);
	background-repeat:repeat;
	}

	.header .global-navi{
		position:relative;
		width:1200px;
		padding-left: 150px;
		margin: 0 auto;
		margin-top: 20px;		
			}

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

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


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

.top-wrapper{
	width: 100%;
	height: 700px;
	background-color: aliceblue;
	background-image: url();
	padding-top: 20px;
}

.top-image{
	position: relative;
	width: 1080px;
	height: 675px;
	background-image:url(../img/top/top-image.png);
	margin: 0 auto;
}

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

.h1-concept{
	width:494px;
	height:73px;
	background-image:url(../img/concept/h_concept.png);
	background-repeat: no-repeat;
	text-indent: -7777px;
	margin: -30px auto 50px;
	}


.concept-content{
	width:1212px;
	margin: 0 auto;
	}


	.concept01{
		height:358px;
		background-image:url(../img/concept/content_01.png);
		margin-bottom: 50px;
		}

	.concept02{
		height:358px;
		background-image:url(../img/concept/content_02.png);
		}

			.scene-list{
				width:280px;
				height:50px;
				margin: 0 auto;
				padding-top: 300px;
			}



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

.h1-story{
	width:494px;
	height:73px;
	background-image:url(../img/story/h_intro.png);
	background-repeat: no-repeat;
	text-indent: -7777px;
	margin: -30px auto 50px;
	}


.story-content{
	width:1212px;
	margin: 0 auto;
	}


	.story-back{
		width: 1100px;
		height:980px;
		background-image:url(../img/story/story_back.png);
		margin-bottom: 50px;
		margin-left: 55px;
		}



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

.h1-character{
	width:494px;
	height:73px;
	background-image:url(../img/character/h_intro.png);
	background-repeat: no-repeat;
	text-indent: -7777px;
	margin: -30px auto 50px;
	}


.chara-content{
	width:1100px;
	height: 1100px;
	margin: 0 auto;
	}

.chara-stand{
	margin-left: -50px;
}


.chara-profile{
	clear: both;
	float: right;
	margin-top: -1030px;
	width:579px;
	height:864px;
	background-image: url(../img/character/chara_intro.png);
}


		.sample-voice{
			float:right;
			margin-top: 750px;
			margin-right: 30px; 
			}

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

				.sv1{
					background-image:url(../img/character/btn_01.png);
					}

		.change-cloth{
			float:right;
			margin-top: 885px;
			  margin-right: -250px;
			}

			.change-cloth li{
				display:inline-block;
				}				
		
/*****************
	gallery
******************/

.h1-gallery{
	width:494px;
	height:73px;
	background-image:url(../img/gallery/h_intro.png);
	background-repeat: no-repeat;
	text-indent: -7777px;
	margin: -30px auto 50px;
	}


.gallery-content{
	width:1212px;
	margin: 0 auto;
	}


		.sample-cg{
			 margin-top: 20px;
			 margin-left: 45px;
			 width:1100px;
			 height:auto;
			}

			.sample-cg ul{
				width:100%;
				}
				
			.sample-cg li{
				float:left;
				margin-right: 40px;
				margin-bottom: 40px;
			}

.sample-cg img{
			box-shadow: 6px 6px 9px rgba(102, 68, 0, 0.5);
}


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

.h1-special{
	width:494px;
	height:73px;
	background-image:url(../img/special/h_intro.png);
	background-repeat: no-repeat;
	text-indent: -7777px;
	margin: -30px auto 50px;
	}


.special-content{
	width:1212px;
	height: auto;
	margin: 0 auto;
	padding-left: 30px;
	}



.special-campaign{
	background: rgba(255,255,255,0.6);
	color: #cb332f;
	line-height: normal;
	font-size: 14pt;
	width: 1100px;
	height: 600px;
	margin-left: 20px;
	margin-bottom: 40px;
	padding: 10px;
	box-shadow: 6px 6px 9px rgba(102, 68, 0, 0.5);
}


.campaign-sanmple{
	float: left;
	margin-left: 40px;
}

		.special-campaign h2{
			width: 372px;
			height: 80px;
			text-indent: -7777px;
			background-image: url(../img/special/h2_campaign.png);
			margin-left: -23px;
			margin-top: 0px;
		}


.campaign-intro p{
	float: right;
	margin-right: 50px;
}

.special-tokuten{
	background: rgba(255,255,255,0.6);
	color: #cb332f;
	line-height: normal;
	font-size: 14pt;
	width: 1100px;
	height: 600px;
	margin-left: 20px;
	margin-bottom: 40px;
	padding: 10px;
	box-shadow: 6px 6px 9px rgba(102, 68, 0, 0.5);
}

		.special-tokuten h2{
			width: 372px;
			height: 80px;
			text-indent: -7777px;
			background-image: url(../img/special/h2_tokuten.png);
			margin-left: -23px;
			margin-top: 0px;
		}


.tokuten-intro{
	width: 911px;
	height: 533px;
	background-image: url(../img/special/special_tokuten.png);
	margin-left: 90px;
	margin-top: -50px;
}


.tokuten-sample{
	padding-left: 320px;
	padding-top:  470px;
}

.special-sozai{
	background: rgba(255,255,255,0.6);
	color: #cb332f;
	line-height: normal;
	font-size: 14pt;
	width: 1100px;
	height: auto;
	margin-left: 20px;
	margin-bottom: 40px;
	padding: 10px;
	box-shadow: 6px 6px 9px rgba(102, 68, 0, 0.5);
}

		.special-sozai h2{
			width: 372px;
			height: 80px;
			text-indent: -7777px;
			background-image: url(../img/special/h2_sozai.png);
			margin-left: -23px;
			margin-top: 0px;
		}

.sozai-content p{
			margin-left:280px;
			width:140px;
			height:25px;
			color:#FFF;
			background-color:#cb332f;
			font-size: 10pt;
			font-weight:bold;
			text-align:center;
			border-radius: 10px 10px 10px 10px;	
			line-height: 25px;

}

.sozai-wrap{
	margin-left: 200px;
}

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

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

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

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

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

			.twitter-dl a{
				font-size: 12pt;
				font-weight: bold;
				color:#cb332f;
				margin-left: 0px;
				}

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

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

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

			textarea{
				font-size:12px;
				color:#cb332f;
				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;
				}


.shop-list{
	background: rgba(255,255,255,0.6);
	color: #cb332f;
	line-height: normal;
	font-size: 12pt;
	width: 1100px;
	height: 640px;
	margin-left: 20px;
	margin-bottom: 40px;
	padding: 10px;
	box-shadow: 6px 6px 9px rgba(102, 68, 0, 0.5);
}

		.shop-list h2{
			width: 372px;
			height: 80px;
			text-indent: -7777px;
			background-image: url(../img/special/h2_shop.png);
			margin-left: -23px;
			margin-top: 0px;
		}


		.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:#fff;
				background-color:#cb332f;
				font-weight:bold;
				text-align:center;
				border-radius: 10px 10px 10px 10px;
				}

			.shop-list dd{
				margin-left: 150px;
				color:#cb332f;
				}

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


.trial{
	background: rgba(255,255,255,0.6);
	color: #cb332f;
	line-height: normal;
	font-size: 12pt;
	width: 1100px;
	height: auto;
	min-height: 700px;
	margin: 0 auto 40px; 
	padding: 10px;
	box-shadow: 6px 6px 9px rgba(102, 68, 0, 0.5);
}


		.trial h2{
			width: 372px;
			height: 80px;
			text-indent: -7777px;
			background-image: url(../img/special/h2_trial.png);
			margin-left: -23px;
			margin-top: 0px;
		}


.trial_image{
	background-image: url(../img/special/trial_ss01.png);
	width: 640px;
	height: 360px;
	margin-left: 220px;
	margin-bottom: 30px;
}

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

				.dl-link dl{
					padding-top: 10px;
					margin-left: 370px;
					}
			
				.dl-link dt{
					text-align:right;
					width:300px;
					margin-left: -300px;
					margin-top: -20px;
					width:240px;
					height:25px;
					color:#fff;
					background-color:#cb332f;
					font-weight:bold;
					text-align:center;
					border-radius: 10px 10px 10px 10px;	
					}

					.dl-link dd{
					text-align:left;
					margin-top: -25px;
						margin-left: -30px;
						}


					.dl-link a{
						margin-top: -5px;
						}

						.dl-link a:hover{
							color:#cb332f;
							}


				.trial-demo{
					margin-top: 40px;
					margin-left: 270px;
					margin-bottom: 30px;
					}

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

.h1-spec{
	width:494px;
	height:73px;
	background-image:url(../img/spec/h_intro.png);
	background-repeat: no-repeat;
	text-indent: -7777px;
	margin: -30px auto 50px;
	}


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

.spec-back{
	width: 1000px;
	height: 713px;
	background-image:url(../img/spec/spec_intro.png);
	margin-left: 100px;
}


/*****************
	footer
******************/
			

	footer{
		width:100%;
		height:180px;
		background-image:url(../img/footer/footer_back.png);
		text-align:center;
					padding-top: 30px;	
		}		

		.right{
			background-image:url(../img/footer/footer_right.png);
			background-repeat:no-repeat;
			width:415px;
			height:18px;
			margin:0px auto 40px;
		}
			
		.brand-logo{
			margin-bottom: 40px;
			}