@font-face {
  font-family: 'MyFont';
  src: url(./azuki.ttf);
}

body{
background-color: #999;
margin-top:0px;
margin-bottom:0px;
line-height:16px;
}

div.all {
width:960px;
height:2712px;
margin: 0 auto;
}

div.main {
width:900px;
float:left;
height:2712px;
background-color:lightgray;
} 


div.main2 {
width:900px;
float:left;
background-color:lightgray;
} 

div.contentsleft {
width:450px;
margin-bottom:20px;
float:left;
} 

div.contentsright {
width:450px;
margin-bottom:20px;
float:right;
} 

div.leftside {
width:30px;
height:100%;
float:left;
background-image: url("./img/e1.png");
background-repeat: repeat-y;
overflow:hidden;
} 

div.rightside {
width:30px;
height:100%;
float:right;
background-image: url("./img/R_e1.png");
background-repeat: repeat-y;
overflow:hidden;
} 

div.toppict {
width:800px;
height:600px;
margin: 0 auto;
background-image: url("./img/webtop.png");
} 

div.genre {
font-family: 'MyFont';
font-size:24px;
line-height:21px;
position:relative;
width:340px;
top:250px; 
left:30px;
padding:20px;
	-webkit-border-radius: 20px;/* width,heightの半分 */
	-moz-border-radius: 20px;
	border-radius: 20px;
background-color:white;
}


div.creator {
font-family: 'MyFont';
font-size:24px;
line-height:21px;
position:relative;
width:340px;
margin-top:30px;
top:250px; 
left:30px;
padding:20px;
	-webkit-border-radius: 20px;/* width,heightの半分 */
	-moz-border-radius: 20px;
	border-radius: 20px;
background-color:white;
}

div.storycontents {
position:relative;
width:350px;
margin: 0 auto;
padding:20px;
	-webkit-border-radius: 20px;/* width,heightの半分 */
	-moz-border-radius: 20px;
	border-radius: 20px;
background-color:white;
}

div.charctercircle{
	width: 100px;
	height: 100px;
	top: 50px;
	float:left;
	-webkit-border-radius: 50px;/* width,heightの半分 */
	-moz-border-radius: 50px;
	border-radius: 50px;
	background-color: #999;/* 円の色 */
	position:relative;
}

div.charablock {
width:400px;
height:200px;
margin: 0 auto;
}

div.charcterpict{
top:-70px;
left:-30px;
margin:auto;
position:relative;
}

div.charcterdictate{
width:210px;
top:20px;
float:left;
padding:20px;
	-webkit-border-radius: 20px;/* width,heightの半分 */
	-moz-border-radius: 20px;
	border-radius: 20px;
position:relative;
background-color:white;
}

div.systempict{
width:320px;
height:240px;
margin: 0 auto;
background-image: url("./img/system.gif");
}

div.systemdictate{
width:390px;
margin:0 auto;
top:20px;
padding:20px;
	-webkit-border-radius: 20px;/* width,heightの半分 */
	-moz-border-radius: 20px;
	border-radius: 20px;
position:relative;
background-color:white;
}

div.dictatebox{
width:390px;
margin:0 auto;
top:10px;
bottom:20px;
padding:20px;
	-webkit-border-radius: 20px;/* width,heightの半分 */
	-moz-border-radius: 20px;
	border-radius: 20px;
position:relative;
background-color:white;
}

div.copyright{
width:900px;
padding-bottom:50px;
background-color:lightgray;
float:left;
}

.snow {
	position: absolute;
	background: #FFF;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.8);
	-moz-box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.8);
	-webkit-box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.8);
}