@charset "utf-8";

/******************************************************************************************************************************

	TOP PAGE

#bg01.top {background:url(/saga_sg/images/bg.jpg) center center no-repeat; background-size:4000px auto; opacity:0; transition:opacity 2s ease-out; top:0; left:-25%; height:200%;}
#bg01.top.anim {opacity:1;}
#bg01.top.end {opacity:0 !important; transition:0.55s;}

#bg02.top {background:url(/saga_sg/images/mv2.jpg) center top no-repeat; background-size:3000px auto; opacity:0; top:-240px; left:-35%; height:200%; transition:1s opacity ease-out;}
#bg02.top.anim {opacity:1;}
#bg02.top.end {opacity:0 !important; transition:0.55s;}

#bg03.top {background:url(/saga_sg/images/bg03.jpg) center top no-repeat; background-size:1920px auto; opacity:0; transition:opacity 1.5s ease-out;}
#bg03.top.anim {opacity:1;}
#bg03.top.loop {z-index:-1;}
#bg03.top.end {opacity:0 !important; transition:0.55s;}

#bg04.top {background:url(/saga_sg/images/mv2.jpg) center top no-repeat; background-size:2300px auto; opacity:0; left:-45%;}
#bg04.top.anim {opacity:1;}
#bg04.top.loop {z-index:-1;}
#bg04.top.end {opacity:0 !important; transition:0.55s;}

#bg01.top.onemore,
#bg02.top.onemore,
#bg04.top.onemore,
#bg03.top.onemore {opacity:0 !important; transition:0 !important;}
	
*/
#bg01.top {background:url(/saga_sg/images/bg.jpg) center top no-repeat; background-size:4000px auto; opacity:0; top:-340px; left:-20%;/* transition:left 15s ease-out, opacity 1s ease-out;*/ height:200%; transition:1s opacity ease-out;}
#bg01.top.anim {opacity:1;}
#bg01.top.end {opacity:0 !important; transition:0.55s;}

#bg02.top {background:url(/saga_sg/images/bg.jpg) center center no-repeat; background-size:4000px auto; opacity:0; transition:opacity 2s ease-out; top:0; left:-25%; height:200%;}
#bg02.top.anim {opacity:1;}
#bg02.top.end {opacity:0 !important; transition:0.55s;}

#bg03.top {background:url(/saga_sg/images/bg03.jpg) center top no-repeat; background-size:1920px auto; opacity:0; transition:opacity 2s ease-out/*, transform 5s ease-out; -moz-transition:opacity 1s ease-out, transform 5s ease-out; -moz-transform:scale3d(2,2,2); -webkit-transform:scale3d(2,2,2); -o-transform:scale3d(2,2,2); -ms-transform:scale3d(2,2,2)*/;}
#bg03.top.anim {opacity:1;}
#bg03.top.loop {z-index:-1;}
#bg03.top.end {opacity:0 !important; transition:0.55s;}
#bg01.top.onemore,
#bg02.top.onemore,
#bg03.top.onemore {opacity:0 !important; transition:0 !important;}

/*
#bg03.top.anim {opacity:1; -moz-transform:scale3d(1,1,1); -webkit-transform:scale3d(1,1,1); -o-transform:scale3d(1,1,1); -ms-transform:scale3d(1,1,1);}
#bg03.top.end {opacity:0 !important; transition:1s;}
*/
.ie9 #bg03.top {opacity:1; display:block;}

.whatsnew {background:rgba(255,255,255,0.8); height:41px; position:fixed; left:0; top:115px; width:100%; z-index:200; min-width:1140px;}
.whatsnew .wrap h2 {float:left; font-size:0; line-height:1; padding:10px 0 0 27px;}
.whatsnew .wrap .tic div.item {float:left; zoom:1; overflow:hidden; padding:13px 20px 0 15px; color:#000; vertical-align:top; text-align:left;}
.whatsnew .wrap .tic div.item time {display:inline-block; font-size:12px; color:#b41430; font-weight:bold; float:left; position:relative; top:1px;}
.whatsnew .wrap .tic div.item p {font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block;}
.whatsnew .wrap .tic div.item p a {color:#b41430;}
main#top {width:100%;}

#top p.toplogo {width:555px; height:291px; position:absolute; right:50%; top:29px; z-index:201;margin-right:-571px; text-indent:200%;}
/*
#top p.toplogo {width:555px; height:291px; position:absolute; right:50%; top:42px; z-index:201;margin-right:-571px; text-indent:200%;}
*/

#top p.toplogo:before{content:''; background:url(/saga_sg/common/images/logo.png) -300px top no-repeat; width:155px; height:23px; position:absolute; left:300px; top:-19px;}
#top p.toplogo:after {content:''; background:url(/saga_sg/common/images/logo.png) left -23px no-repeat; width:555px; height:291px; position:absolute; left:0; top:4px;}

#top section.info {background:rgba(0,0,0,0.8); width:364px; height:768px; padding:216px 0 0; margin:41px 96px 0 0; float:right; font-size:0; line-height:1;}
#top section.info {background:rgba(0,0,0,0.8); width:364px; height:783px; padding:220px 0 0; margin:41px 96px 0 0; float:right; font-size:0; line-height:1;}
#top section.info h2 {margin-bottom:26px;}
#top section.info p + p {margin-top:25px;}
#top section.info p a {display:inline-block; background:#fff; position:relative;}
#top section.info p a img {transition:0.5s;}
#top section.info p a:hover img {opacity:0.8;}
#top section.info p.special {margin-top:14px;}
#top section.info p.special a:after{content:''; background:url(/saga_sg/images/bnr_special_weapon.png) left top no-repeat; width:310px; height:129px; position:absolute; left:0; top:-20px;}

/*
#top section.info {background:rgba(0,0,0,0.8); width:364px; height:783px; padding:220px 0 0; margin:41px 96px 0 0; float:right; font-size:0; line-height:1;}
#top section.info h2 {margin-bottom:44px;}
#top section.info p + p {margin-top:27px;}
#top section.info p a {display:inline-block; background:#fff; position:relative;}
#top section.info p a img {transition:0.5s;}
#top section.info p a:hover img {opacity:0.8;}
#top section.info p.blog a:after{content:''; background:url(/saga_sg/images/blog_chara.png) left top no-repeat; width:310px; height:109px; position:absolute; left:0; top:0;}
*/

#top section.links {background:rgba(0,0,0,1); width:100%; padding:0 0 30px; margin:0; font-size:0; line-height:1;}
#top section.links h2 {font-size:12px; color:#fff; position:absolute; left:27px; bottom:15px; z-index:10;}
#top section.links a {color:#fff; text-decoration:none; display:block; background:#fff;}
#top section.links a h2{left:56px;}
#top section.links h2 span {font-size:0; line-height:1;}
#top section.links div.item {display:inline-block; position:relative; text-align:left; overflow:hidden;}
#top section.links div.item time {position:absolute; left:152px; bottom:42px; font-size:12px; z-index:10;}
#top section.links div.item time:before{content:'Update'; color:#9d9d9d; padding-right:6px;}
#top section.links div.item p{color:#9d9d9d; font-size:18px; position:absolute; left:124px; bottom:36px; z-index:10;}
#top section.links div.item.characters p {left:170px;}
#top section.links div.item.characters time {left:212px;}
#top section.links div.item.system p {left:142px;}
#top section.links div.item.system time {left:174px;}
#top section.links div.item.special time {left:170px;}
#top section.links ul.bnr {clear:both; zoom:1; padding:40px 20px 0; margin-bottom:-20px;}
#top section.links ul.bnr li {display:inline-block; padding:0 10px 20px;}
#top section.links ul.bnr li img {width:340px; height:100px;}
#top section.links a img {transition:0.5s; position:relative; z-index:0; -moz-transform:scale3d(1,1,1); -webkit-transform:scale3d(1,1,1); -o-transform:scale3d(1,1,1); -ms-transform:scale3d(1,1,1);}
#top section.links a:hover img{opacity:0.8;/* -moz-transform:scale3d(1.1,1.1,1.1); -webkit-transform:scale3d(1.1,1.1,1.1); -o-transform:scale3d(1.1,1.1,1.1); -ms-transform:scale3d(1.1,1.1,1.1);*/}

#top ul.sns {font-size:0; line-height:1; text-align:center; background:#000; padding:0 0 30px;}
#top ul.sns li {display:inline-block; padding:0 10px;}
#top ul.sns li a img{transition:0.5s;}
#top ul.sns li a:hover img{opacity:0.8;/* -moz-transform:scale3d(1.1,1.1,1.1); -webkit-transform:scale3d(1.1,1.1,1.1); -o-transform:scale3d(1.1,1.1,1.1); -ms-transform:scale3d(1.1,1.1,1.1);*/}

#top p.spec {color:#c2c2c2; font-size:14px; line-height:25px; background:#000; border-top:1px solid #666; padding:20px;}
#top div.spec {color:#c2c2c2; font-size:14px; line-height:25px; background:#000; border-top:1px solid #666; padding:20px;}
#top div.spec h3,#top div.spec p {display:inline-block;}
#top div.spec h3{position:relative; padding-right:0.7em;}
#top div.spec h3:after{content:'：'; position:absolute; right:-0.3em; top:0;}
#top div.spec p + h3 {padding-left:1.75em;}

@media (min-width:1921px){
	#bg03.top{background-size:100% auto; width:100%; left:0;}
}
@media (min-width:2301px){
	#bg04.top{background-size:100% auto; width:100%; left:0;}
}