@charset "utf-8";

#wrap, #container
{
	min-height: 990px;
}

#content, #content div.tp, #content div.bttm
{
	height: 828px;
	overflow: hidden;
}

#content
{
	width: 100%;
	background: url(../img/character/content_bg.png) repeat-x 50% 52px;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -342px;
}

#content div.tp
{
	width: 1004px;
	position: absolute;
	left: 50%;
	margin-left: -502px;
	background: url(../img/character/content_bg_top.png) no-repeat 11px 12px;
}

#content h2
{
	width: 371px;
	height: 43px;
	background: url(../img/character/ttl.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	top: 401px;
	left: 27px;
}

#content p
{
	width: 584px;
	height: 43px;
	background: url(../img/character/txt.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	top: 465px;
	left: 27px;
}

#content ul
{
	width: 1000px;
	height: 150px;
	overflow: hidden;
	position: absolute;
	top: 543px;
	left: 2px;
	background: url(../img/character/thumb.png) no-repeat 11px 0;
}

#content ul li
{
	width: 192px;
	height: 104px;
	margin: 17px 29px 0;
	float: left;
	overflow: hidden;
}

#content ul li a
{
	display: block;
	width: 192px;
	height: 104px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: url(../img/character/bttn_play.png) no-repeat 50% 50%;
}

#ie #content ul li a
{
	background: #FFF;
	filter: alpha(opacity=0);
}

#wii #content ul li a, #ds #content ul li a
{
	visibility: hidden;
}

#content a#bttn
{
	display: block;
	width: 199px;
	height: 160px;
	position: absolute;
	top: 85px;
	left: 790px;
}

#modalbox
{
	width: 1012px;
	height: 502px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -251px 0 0 -506px;
	background: url(../img/character/rosetta_bg.png) no-repeat 308px 68px;
	visibility: hidden;
}

#modal.rossetta #modalbox{ visibility: visible; }

#modal.nomovie a#close
{
	margin: -240px 0 0 320px;
}

#modalbox p
{
	width: 433px;
	height: 53px;
	background: url(../img/character/rosetta_txt.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	margin: 15px 0 0 371px;
}

#modalbox iframe, #wiiu #modalbox iframe
{
	width: 480px;
	height: 270px;
	position: static;
	margin: 88px 0 0 336px;
}

#modal.nomovie #modalbox iframe
{
	visibility: visible;
}

#modalbox img.rosetta
{
	position: absolute;
	top: 24px;
	left: 0;
}

#modalbox img.balloon
{
	position: absolute;
	top: 0;
	left: 285px;
}