@charset "utf-8";

/*============================
	Basic
 ============================*/
* { margin: 0px; padding: 0px; }
ul { list-style: none; }
img { border: none; }

body{
	background-color: #ffffff;
	font: 16px 'ƒƒCƒŠƒI',Meiryo,'ƒqƒ‰ƒMƒmŠÛƒS Pro W4','Hiragino Maru Gothic Pro','‚l‚r ‚oƒSƒVƒbƒN',sans-serif;
}

div.text { padding:5px 0px 20px 10px; }
div.center { text-align:center; }
div.right{ text-align: right; }
div.left{ text-align: left; }

div.textshadow_b {
	text-shadow:
		-1px -1px #000000,
		 1px -1px #000000,
		-1px  1px #000000,
		 1px  1px #000000;
	/* for IE */
	filter:
		dropshadow(color=#000000, offX= 0, offY=-1)
		dropshadow(color=#000000, offX= 1, offY= 0)
		dropshadow(color=#000000, offX= 0, offY= 1)
		dropshadow(color=#000000, offX=-1, offY= 0);
}

div.textshadow_w {
	text-shadow:
		-1px -1px #FFFFFF,
		 1px -1px #FFFFFF,
		-1px  1px #FFFFFF,
		 1px  1px #FFFFFF;
	/* for IE */
	filter:
		dropshadow(color=#FFFFFF, offX= 0, offY=-1)
		dropshadow(color=#FFFFFF, offX= 1, offY= 0)
		dropshadow(color=#FFFFFF, offX= 0, offY= 1)
		dropshadow(color=#FFFFFF, offX=-1, offY= 0);
}

/*============================
	Layout
 ============================*/
img.maximage{
	position: fixed !important;
}

#navi {
	float: left;
	position: relative;
	width: 250px;
	padding: 10px 10px;
}



#main {
	position: relative;
	width: 950px;
	margin: 0px auto;
	padding: 75px 20px 20px 0px;
}

#contentsTop, #contentsBottom {
	position: relative;
	height: 55px;
}

#contentsTop {
	background: no-repeat url(./frame_contents_top.png);
}

#contentsBottom {
	background: no-repeat url(./frame_contents_bottom.png);
}

#contents {
	position: relative;
	background: repeat-y url(./frame_contents.png);
	padding: 0px 20px;
}

@media screen and (max-width : 1320px) {
	#main {
		margin: 0px auto 0px 270px;
	}
}

@media screen and (max-height : 630px) {
	#rosebleu {
		position: relative;
		top: 15px;
		bottom: 0px;
		left: 0px;
	}
}

/*============================
	Style
 ============================*/
#rosebleu img.logo {
	width: 180px;
}

#main img.page_title {
	border-bottom: 1px dashed;
	margin: 0px 0px 20px;
}

/*============================
	navi
 ============================*/


/*
#menu li.active a {
	background-position: right top !important;
}
*/



/*============================
	page_top
 ============================*/
#page_top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-size: 10px;
	text-align: center;
	z-index: 1;
}

#page_top a {
	display: block;
	width: 60px;
	padding: 5px 5px;
	text-decoration: none;
	color: #FFFFFF;
	background: #999999;
	border-radius: 5px;
}


			html, body{margin: 0px; padding: 0px;}

			@media only screen and (min-width: 1150px) {
#rosebleu {
	position: fixed;
	bottom: 15px;
	text-align: center;
	width: 20%;
	font-size: 9px;
	z-index: 1;
	color: #FFFFFF;
}
			.frame_inner_box{margin: 20px;overflow: auto;height: 137px;}
			#update, #magazine {
				width: 380px;
				height: 180px;
				position: absolute;
				background: url(./frame_top.png) no-repeat;
				bottom: 30px;
				margin-left: 30px;
			}
				.leftbox{width: 20%;position: fixed;top: 0px;left: 0px;text-align: center;background-color: #fff;height: 100vh;}
				.rightbox{min-height: 100vh;background-position: center;background-size: cover;width: 80%;float: right;}
				.logo_ip{width: 90%;max-width: 200px;margin: 50px 0px;}


#menu {
	position: relative;width: 100%;max-width: 230px;margin: 0px auto;
}

#menu li a {
	display: block;
	width: 230px;
	height: 40px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#menu li.off div {
	display: block;
	width: 230px;
	height: 40px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#menu li a:hover {
	background-position: right top;
}

#menu li a.active {
    background-position: right top !important;
}
			
				#menu_story     { background: no-repeat url(./menu_story.png); }
				#menu_character { background: no-repeat url(./menu_character.png); }
				#menu_world     { background: no-repeat url(./menu_world.png); }
				#menu_gallery   { background: no-repeat url(./menu_gallery.png); }
				#menu_bonus     { background: no-repeat url(./menu_bonus.png); }
				#menu_download  { background: no-repeat url(./menu_download.png); }
				#menu_special   { background: no-repeat url(./menu_special.png); }
				#menu_spec      { background: no-repeat url(./menu_spec.png); }
				#menu_official      { background: no-repeat url(./menu_official.png); }
				#rosebleu_mobi{display: none;}
			}
			@media only screen and (max-width: 1549px) {
				.display_non{display: none;}
			}
			@media only screen and (max-width: 600px) {
				.rightbox{height: 400px !important;}
				#update{width: calc(100% - 60px) !important;padding-top: 450px !important;}
				#magazine{width: calc(100% - 60px) !important;padding-top: 0px !important;margin-bottom: 40px;}
				#magazine img{border-top: 0px !important;}
			}
			@media only screen and (max-width: 1149px) {
				#rosebleu_mobi{text-align: center;display: block;color: #fff;font-size: 12px;width: 100%;padding-bottom: 40px;padding-top: 40px;overflow: hidden;background-color: #ccc;}
				#rosebleu{display: none;}
				#update{width: 45%;float: left;padding-top: 550px;border-bottom: 2px solid #000;padding-bottom: 30px;margin-bottom: 20px;}
				#magazine{width: 45%;float: right;padding-top: 550px;margin-left: 0px !important;margin-right: 30px;border-bottom: 2px solid #000;padding-bottom: 30px;}
				#magazine img, #update img{margin-bottom: 30px;border-top: 2px solid #000;padding-top: 15px;}
				.frame_inner_box div{padding: 0px 10px;}
				.leftbox{width: 100%;position: fixed;top: 0px;left: 0px;text-align: center;background-color: #fff;height: 60px;}
				.rightbox{height: 500px;background-position: center;background-size: cover;width: 100%;margin-top: 60px;}
				#menu{margin-top: 20px;}
				#menu li{float: left;}
				#menu li a{color: #000;text-decoration: none;padding: 20px 5px;}
				#menu li a:hover{color: #555;}

.logo_ip {
  height: 50px;
  margin-top: 5px;
  float: left;
  margin-right: 20px;
  margin-left: 24px;
}
			}
			
			.top{background-image: url(./bg_top.jpg);}
			.story{background-image: url(./bg_story.jpg);}
			
			#update {
				bottom: 30px;
				margin-left: 30px;
			}
			#magazine {
				bottom: 30px;
				margin-left: 430px;
			}
			th, td{font-size: 13px;}