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

/* clearfix */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

html,body {
  height:100%;
}

img { display:block; }

body#Teaser {
	font-family: "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
	font-size:62.5%;
	text-align:center;
	background:url(../img/grand_bg.png) left top repeat;
}

#Conteiner {
	background:url(../img/wrap_bg.png) center top repeat-y;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position:relative;
}

#Mainvisual {
	background:url(../img/gr_top.png) center top no-repeat;
	width:100%;
	height:100%;
	position:relativel;
	margin:0 auto;
	padding-top:753px;
}

.pencil {
	width:150px;
	height:60px;
	position:absolute;
	top:0px;
	left:50%;
	margin-left:330px;
}

.official {
	width:210px;
	height:210px;
	position:absolute;
	top:110px;
	left:50%;
	margin-left:260px;
}

.download {
	width:210px;
	height:210px;
	position:absolute;
	top:110px;
	left:50%;
	margin-left:-470px;
}

#Menu {
	background:url(../img/menu_bg.png) left center repeat-x;
	width:100%;
	height:98px;
	margin-bottom:30px;
}

#Menu ul {
	width:945px;
	height:98px;
	margin:0 auto;
	background:url(../img/menu_star.png) center top no-repeat;
	padding-left:144px;
}

#Menu ul li {
	float:left;
	height:98px;
}

#Chara1 {
	background:url(../img/gr_chara1.png) left top no-repeat;
	width:920px;
	height:665px;
	margin:0 auto 30px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
}

#Chara2 {
	background:url(../img/gr_chara2.png) left top no-repeat;
	width:920px;
	height:620px;
	margin:0 auto 30px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
}

#Chara3 {
	background:url(../img/gr_chara3.png) left top no-repeat;
	width:920px;
	height:620px;
	margin:0 auto 70px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
}

#Story {
	background:url(../img/gr_story.png) left top no-repeat;
	width:920px;
	height:665px;
	margin:0 auto 70px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
}

#Gallery {
	background:url(../img/gr_gallery.png) left top no-repeat;
	width:920px;
	height:455px;
	margin:0 auto 70px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
}

#Gallery ul {
	margin-top:78px;
	margin-left:40px;
}

#Gallery ul li {
	width:260px;
	height:160px;
	float:left;
	margin-right:30px;
	margin-bottom:25px;
}

#Information {
	background:url(../img/gr_information.png) left top no-repeat;
	width:920px;
	height:525px;
	margin:0 auto 70px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
}

footer {
	width:100%;
	height:103px;
	background:url(../img/foot_bg.png) left top repeat-x;
}

.footmenu {
	color:#FFF;
	font-size:1.5em;
	text-align:center;
	height:35px;
	padding-top:8px;
}

.footmenu p a {
	color:#FFF;
	text-decoration:underline;
}

.footmenu p a:hover {
	color:#FFF;
	text-decoration:none;
}