@charset "UTF-8";
/* reset and common
======================================================== */
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
body{
	color: #ffffff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.5;
	background: #000000 url(/pc/html/sg_gcc/img/bg_universe.jpg?v=20120918) left top repeat;
	margin: 0;
	padding: 0;
}
a {
	outline:none;
	overflow:hidden;
}
a,
a:visited{
	color: #ffffff;
}
a:hover{
	color: #faffc6;
}
h1,
h2,
h3,
p{
	width: auto;
	height: auto;
	background: none;
	padding: 0;
	margin: 0;
}
section{
	width: 100%;
	position: relative;
}
#wrapper {
	background-position: center top;
	background-repeat: no-repeat;
	min-height: 1787px;
	margin: 0;
	padding: 0;
	position: relative;
}
#contents {
	width: 950px;
	margin: 0 auto;
	padding: 32px 0 0 0;
	position: relative;
}
.logo-mobage,
.game_title,
.tagline,
.qr,
.movie_heading,
.about_heading,
.about_ttl1,
.about_ttl2,
.about_ttl3{
	background: url(/pc/html/sg_gcc/img/sprite_image201309.png?v=20130228) 0 0 no-repeat;
}


/* header
======================================================== */
header {
	background: url(/pc/html/sg_gcc/img/bg_header.png?v=20120918) center top repeat-x;
	width: 950px;
	height: 74px;
	position: absolute;
	left: 0;
	top:0;
	z-index: 2;
}
.logo-mobage {
	display: block;
	width: 151px;
	height: 25px;
	background-position: -678px -266px;
	margin: 8px 0 0 20px;
}
.logo-mobage a {
	display: block;
	width: 82px;
	height: 21px;
}
.socialNavWrapper {
	position: absolute;
	top: 0;
	left: 140px;
	width: 800px;
	margin: 0 0 0 0;
	font-size: 10pt;
}
.socialNav{
	display:block;
	list-style-type: none;
	height:21px;
	padding: 0 0 0 0;
	margin: 8px 0 0 0;
}
.socialNav li{
	float: left;
	display: block;
	margin: 0 0 0 0;
	padding: 0 15px 0 0;
}
.socialFb {
	width: 100px;
}
/* topBlock
======================================================== */
#topBlock {
	background: url(/pc/html/sg_gcc/img/cards_1.jpg?v=20120918) left top repeat-x;
	height: 700px;
	margin: 8px 0 0 0;
	padding: 0 0 0 0;
}
#topBlock2 {
	background: url(/pc/html/sg_gcc/img/cards_2.jpg?v=20120918) left 234px repeat-x;
	height: 700px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#topBlock3 {
	background: url(/pc/html/sg_gcc/img/cards_3.jpg?v=20120918) left 468px repeat-x;
	height: 700px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.topBlock_inner1 {
	background: url(/pc/html/sg_gcc/img/shadow_left.png?v=20120918) left top repeat-y;
	height: 700px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.topBlock_inner2 {
	background: url(/pc/html/sg_gcc/img/shadow_right.png?v=20120918) right top repeat-y;
	height: 700px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: relative;
}
.topBlock_content {
	padding: 98px 0 0 0;
}
.game_title {
	display: block;
	width: 535px;
	height: 205px;
	background-position: 0px 0px;
	margin: 0 auto;
}
.tagline {
	display: block;
	width: 950px;
	height: 61px;
	background-position: 0px -205px;
	margin: 104px auto 0 auto;
}
#topBlock .qr {
	display: block;
	width: 310px;
	height: 150px;
	background-position: -535px -21px;
	margin: 45px auto 0 auto;
}

/* movieBlock
======================================================== */
#movieBlock {
	margin: 20px 0;
}
.movie_heading {
	display: block;
	width: 675px;
	height: 144px;
	background-position: 0px -971px;
	margin: 0 auto 0 auto;
}
#movieList {
	width: 928px;
	min-height: 335px;
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
}

#movieList li {
	display: block;
	width: 444px;
	height: 335px;
	margin: 0 10px 30px 10px;
	padding: 0;
	float: left;
}
#movieList li a,
#movieList .comingsoon {
	display: block;
	width: 444px;
	height: 335px;
	margin: 0 auto;
	background: url(/pc/html/sg_gcc/img/sprite_movie20130920.png?v=20130920) left top no-repeat;
}
#movieList .comingsoon {
	background: url(/pc/html/sg_gcc/img/movie_comingsoon201309.png?v=20130911) left top no-repeat;
	background-position: 0px 0px;
}
#movieList #movie1 a {
	background-position: 0px 0px;
}
#movieList #movie1 a:hover {
	background-position: 0px -335px;
}
#movieList #movie2 a {
	background-position: -464px 0px;
}
#movieList #movie2 a:hover {
	background-position: -464px -335px;
}



/* aboutBlock
======================================================== */
#aboutBlock {
	margin: 20px 0;
}
.about_heading {
	display: block;
	width: 675px;
	height: 144px;
	background-position: 0px -266px;
	margin: 0 auto 0 auto;
}
.about1,
.about2,
.about3 {
	width: 306px;
	float: left;
}
.about2 {
	margin: 0 15px;
}
.about_ttl1,
.about_ttl2,
.about_ttl3 {
	display: block;
	width: 306px;
	height: 401px;
	margin: 0 0 10px 0;
}
.about_ttl1 {
	background-position: 0px -410px;
}
.about_ttl2 {
	background-position: -322px -410px;
}
.about_ttl3 {
	background-position: -643px -410px;
}
#aboutBlock p {
	margin: 10px 5px;
	font-size: 105%;
}
#aboutBlock p strong {
	color: #fff844;
}
#aboutBlock .qr {
	display: block;
	width: 678px;
	height: 150px;
	background-position: 0px -821px;
	margin: 30px auto;
}


/* footer
======================================================== */
footer {
	text-align: center;
	font-size: 75%;
	margin: 30px 0 0 0;
	padding-bottom: 30px;
}
.copyrights {
	margin: 10px 0;
}
.footnav {
	margin: 10px 0;
}
footer ul {
	padding: 20px 0 0 0;
	margin: 0 0 0 0;
	list-style-type: none;
}
footer li {
	display: inline;
	margin: 0 10px;
}
.wrapper_copy {
	display: inline-block;
	margin: 10px auto;
}
.wrapper_copy p {
	float: left;
	vertical-align: middle;
}
.wrapper_copy p.copyrights {
	padding-top: 6px;
}
/* clear fix
======================================================== */
#movieList ul:after,
.about_content:after {
	content: "";
	display: block;
	clear: both;
}
/* text hidden
======================================================== */
.logo-mobage,
.game_title,
.tagline,
.qr,
.movie_heading,
#movieList li a,
#movieList .comingsoon,
.about_heading,
.about_ttl1,
.about_ttl2,
.about_ttl3{
	white-space: nowrap;
	overflow: hidden;
	text-indent: -9999px;
}