@charset "UTF-8";

html {
 overflow-y: scroll;
}

* {
	margin:0 auto;
	padding:0;
	letter-spacing: 1px;
	text-align:center;

} 

img {
	width : 100%;
	display : block;
}

div#waku {
	width: 100%;
	height: 11px;
	display:block;
	clear : both;
}
div#header {
	height:100%;
}

body {
	background-color:#0e98ef;
    overflow: hidden;
}

div#story {
	width:100%;
	text-align:center;
	background-color:#c3dbf2;
	background-image:url("./images/story_bg.jpg");
	background-repeat:no-repeat;
	background-size:150%
}

div#system {
	width:100%;
	text-align:center;
	background-color:#1b3061;
	background-image:url("./images/system_bg.png");
	background-repeat:repeat;
}


div#jiki {
	width:100%;
	text-align:center;
	background-image:url("./images/jiki_bg.png");
	background-color:#000000;
}
div#info {
	width:100%;
	text-align:center;
	background-color:#666666;
}

div#footer {
	height:42px;
	clear:both;
	background-repeat:no-repeat;
	background-color:#cccccc;
	font-style:normal;			 /*フォントスタイルを標準にする*/
	font-size:small;			 /*フォントサイズを小さくする*/
	padding:15px 0px 5px 0px;		 /*要素内容の位置調整*/
}

div#twitter {
	display: block;
	background-image: url(./images/npc.png);
	background-position: center bottom;
	background-repeat: no-repeat;
}

p#pad {
	padding : 15px;
}

	img#title {
		width:144px;
		padding:20px;
	}
	
	img#gamen_title {
		width:241px;
		position:relative;
    	z-index:10;
	}
	
	
	
@media (max-width:653px) {
	img#story {
		width:100%;
	}
	img#gamen_pad {
		width:100%;
		z-index:10;
		padding-left:30px;
		position:relative;
	}
	img#gamen {
		width:100%;
		z-index:10;
		position:relative;
	}
	img#gamen_mada {
		width:100%;
		z-index:10;
		position:relative;
	}
	div#system_center {
		width:90%;
		text-align:center;
		background-color:#eeeeee;
		position:relative;
	}
	.absolute_kaw {
    position:  absolute;
    left:  -130px;
    top: -100px;
    z-index:1;
    width : 400px;
    height : 480px;
	}
	
	.absolute_hit {
    position:  absolute;
    left:  -160px;
    top: 110px;
    z-index:2;
    width : 400px;
    height : 480px;
	}
	
	.absolute_taj {
    position:  absolute;
    left:  -180px;
    top: 300px;
    z-index:3;
    width : 400px;
    height : 480px;
	}
	
	.absolute_bin {
    position:  absolute;
    left:  -150px;
    top: 510px;
    z-index:4;
    width : 400px;
    height : 480px;
	}
}

@media (min-width:654px) {
	img#story {
		width:653px;
	}
	img#gamen {
		width:653px;
		z-index:10;
		position:relative;
	}
	img#gamen_pad {
		width:653px;
		z-index:10;
		position:relative;
	}
	div#system_center {
		width:700px;
		text-align:center;
		background-color:#eeeeee;
		position:relative;
	}
	
	.absolute_kaw {
    position:  absolute;
    padding:  20px;
    width : 500px;
    height : 600px;
    left:  -260px;                /* 左からの位置指定 */
    top: 100px;                  /* 上からの位置指定 */
    z-index:1;
	}
	
	.absolute_hit {
    position:  absolute;
    padding:  20px;
    width : 500px;
    height : 600px;
    left:  400px;                /* 左からの位置指定 */
    top: 280px;                  /* 上からの位置指定 */
    z-index:1;
	}
	
	.absolute_taj {
    position:  absolute;
    padding:  20px;
    width : 500px;
    height : 600px;
    left:  -310px;                /* 左からの位置指定 */
    top: 650px;                  /* 上からの位置指定 */
    z-index:1;
	}
	
	.absolute_bin {
    position:  absolute;
    padding:  20px;
    width : 500px;
    height : 600px;
    left:  430px;                /* 左からの位置指定 */
    top: 800px;                  /* 上からの位置指定 */
    z-index:1;
	}
}