@charset "utf-8";

html,body{
	background:#000;
	color:#AAA;
	font-family:"メイリオ",Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#wrapper{
	font-size: 14px;
	line-height: 1.8em;
	height:auto;
	min-width:1024px;
	-webkit-text-size-adjust:none;
	margin: 0 auto;
	text-align:left;
	overflow:hidden;
}


.imgsp{
	display:block;
	overflow:hidden;
	text-indent:-9999px;
	text-align:left;
	vertical-align:middle;
	/zoom:1;
}


input.imgsp{
	cursor:pointer;
	border:none !important;
	font-family:"メイリオ",Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align:left !important;
}


/*------------------------------
メインビジュアル
-------------------------------*/

#main{
	height:710px;
}

.bg01{
	margin: 0 auto;
	background:url(../../images/lp2/bg_main.jpg)  center top no-repeat;
}

#header{
	font-size:0px;
	margin: 0 auto;
	width:1024px;
	position: relative;
	min-width:980px;
	height:610px;
}

#header .logo{
	position: absolute;
	left:0px;
	top:30px;
}

#header .catch{
	position: absolute;
	left:0px;
	bottom:50px;
}

/*------------------------------
バナー
-------------------------------*/

#header .banner{
	position: absolute;
	left:0px;
	bottom:-80px;
}

/*------------------------------
ムービー
-------------------------------*/

#header .movie{
	position:absolute;
	top:70px;
	right:0px;
}

/*------------------------------
ID作成ボタン
-------------------------------*/

#header .btn_box{
	position:absolute;
	bottom:-100px;
	left:50%;
	margin-left:200px;
}

#header .btn_id a{
	background:url(../../images/lp2/id/btn_id_main_off.png) no-repeat 0 0;
	display:block;
	width:310px;
	height:310px;
}

#header .btn_openid{
	height:24px;
	margin-right:-2px;
	overflow:hidden;
	position:absolute;
	top:182px;
	left:92px;
}

#header .btn_openid li{
	float:left;
	width:24px;
	margin-right:2px;
}

#header .btn_member{
	position:absolute;
	top:240px;
	left:20px;
}

#header .btn_member a{
	background:url(../../images/lp2/id/btn_member_off.png) no-repeat 0 0;
	display:block;
}



/*------------------------------
 タブ
-------------------------------*/

#navi{
	width: 700px;
	height: 90px;
	padding: 15px 0px;
	position:relative;
	margin: 0 auto;
}

#navi li{
	float:left;
	padding-right:5px;
}


/*------------------------------
	コンテンツ共通
-------------------------------*/

.content{
	width:1024px;
	position: relative;
	margin: 0 auto;
}

.content .title{
	background:url(../../images/lp2/sub_title_line.png) no-repeat left bottom;
	padding:25px 0px;
	margin-bottom:20px;
}

.content p{
	padding-bottom: 20px;
}

.content h3{
	padding-bottom: 10px;
}

.content .explain{
	font-size:10px;
	line-height: 1.3em;
}

.content .cont_left{
	float: left;
}


.content .cont_right{
	float: left;
}

/*------------------------------
	コンテンツ1（C9について）
-------------------------------*/


#block01{
	height:783px;
}

.bg02{
	background:url(../../images/lp2/contents01/bg_contents_01.jpg)  center top no-repeat;
	margin: 0 auto;
}

#block01 .thumb01{
	position: absolute;
	bottom: 180px;
	right: 0px;
}

#block01 .thumb02{
	position: absolute;
	bottom: 20px;
	right: 250px;
}

#block01 .thumb03{
	position: absolute;
	bottom: 20px;
	right: 0px;
}

/*------------------------------
	コンテンツ2（キャラクター）
-------------------------------*/

.chara_bg {
	margin: 0 auto;
	height: 807px;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	width: 100%;
}

.chara_bg li {
	height: 807px;
	position: absolute;
	z-index: 1;
	opacity: 0;
	width: 100%;
	top: 0px;
	left: 0px;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#block02{
	background-color:#1c1b19;
}

.chara_bg li.active {
	z-index: 2;
	opacity: 1;
	-webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.chara_bg01 {
	background:url(../../images/lp2/contents02/bg_01.jpg)  center top no-repeat;
}

.chara_bg02 {
	background:url(../../images/lp2/contents02/bg_02.jpg)  center top no-repeat;
}

.chara_bg03 {
	background:url(../../images/lp2/contents02/bg_03.jpg)  center top no-repeat;
}

.chara_bg04 {
	background:url(../../images/lp2/contents02/bg_04.jpg)  center top no-repeat;
}

.chara_bg05 {
	background:url(../../images/lp2/contents02/bg_05.jpg)  center top no-repeat;
}

/*ボイスキャスト*/

#block02 .cont_left p{
	line-height: 1.6em;
}


#block02 .cont_left .cv{
	position: absolute;
	bottom: 0px;
	right:  524px;
	width:  500px;
	height: 251px;
	background:url(../../images/lp2/contents02/cv_box.png)  center top no-repeat;
}

#block02 .content .cv .cv_name{
	font-size:20px;
	color:#fff;
	padding:20px 0px 0px 20px;
}

#block02 .content .cv .left_box{
	float:left;
	width:132px;
	padding:15px 0px 0px 20px;
}

#block02 .content .cv .right_box{
	float:left;
	width:300px;
	color:#fff;
	font-size:12px;
	line-height:1.5em;
	padding:15px 0px 0px 0px;
}

#block02 .content .cv .right_box .list_cv li{
	list-style-type:none;
}

#block02 .content .cv .right_box .btn_cv li{
	display: inline-block;
}

#block02 .content .cv .right_box p{
	padding: 5px 0px;
}

/*サムネイル*/

#block02 .thumb01{
	position: absolute;
	bottom: 0px;
	right: 250px;
}

#block02 .thumb02{
	position: absolute;
	bottom: 0px;
	right: 0px;
}

/*------------------------------
 スライドショー
-------------------------------*/

#block02{
	position: relative;
}

#block02 .content {
	min-width: 1024px;
	width: 100%;
	overflow: hidden;
	z-index: 10;
}

#block02 .slide_content {
	width:1024px;
	height:651px;
	overflow:hidden;
	margin: 0px auto 30px;
	position: relative;
}

#character{
	position:absolute;
	top:0px;
	left:0px;
}

#character .slide_content{
	width:1024px;
	float: left;
	position: relative;
}

/*タブ*/
#block02 #tab{
	width: 1024px;
	height: 50px;
	margin: 0 auto;
	padding: 0px 0px 60px;
	position: relative;
	z-index: 10;
}

#block02 #tab li{
	float:left;
}

/*NextPrev*/
#block02 .arrow {
	position: absolute;
	top:350px;
	z-index: 99;
}

#prev {
	left: 50%;
	margin-left: -586px;
}

#next{
	right: 50%;
	margin-right: -586px;
}



/*------------------------------
	コンテンツ3 （イメージソング）
-------------------------------*/

#block03{
	height:889px;
}

.bg04{
	background:url(../../images/lp2/contents03/song_bg.jpg)  center top no-repeat;
	margin: 0 auto;
}

#block03 p{
	padding: 50px 0px 10px 0px;
}

#block03 .cont_right .movie{
	position:absolute;
	top:70px;
	right:0px;
	text-align:center;
}

#block03 .content .cont_left{
	width: 500px;
}

#block03 .content .cont_left .prof01{
	width:501px;
	height:327px;
	padding-right: 0px;
	background:url(../../images/lp2/contents03/comment_box.png)  center top no-repeat;
}

#block03 .content .cont_right .prof02{
	width:501px;
	height:327px;
	margin-left: 20px;
	background:url(../../images/lp2/contents03/comment_box.png)  center top no-repeat;
}

#block03 .content .name{
	font-size:20px;
	text-align:left;
	color:#fff;
	padding-bottom:5px;
}

#block03 .content .name span{
	font-size:12px;
}

#block03 .content .left_box{
	float:left;
	width:165px;
	padding:15px 0px 0px 20px;
}

#block03 .content .right_box{
	float:left;
	width:300px;
	color:#fff;
	font-size:12px;
	line-height:1.5em;
	padding:20px 0px 0px 0px;
}

#block03 .prof01 .btn{
	padding-top: 10px;
}

#block03 #block_id{
	margin-top: 30px;
}

/*------------------------------
	ID登録エリア
-------------------------------*/

#block_id{
	height:112px;
}

.bg_id{
	background:url(../../images/lp2/id/bg_id.jpg) repeat-x;
	margin: 0 auto;
}

#block_id .btn_box{
	width:920px;
	padding:15px 0px;
	margin: 0 auto;
}

#block_id .btn_box .leftbox{
	float:left;
	position:relative;
	width:600px;
}

#block_id .btn_box .rightbox{
	float:right;
	width:300px;
}

#block_id .btn_box .btn_member{
	background:url(../../images/lp2/id/btn_member_off.jpg) no-repeat 0 0;
	display:block;
	width:260px;
	height:80px;
}

#block_id .btn_box .btn_member a{
	background:url(../../images/lp2/id/btn_member_off.jpg) no-repeat 0 0;
	display:block;
	width:260px;
	height:80px;
}

#block_id .btn_box .member_caption{
	padding:10px 34px;

}

#block_id .btn_box .btn_id{
	display:block;
	width:600px;
	height:80px;
}

#block_id .btn_box .btn_id a{
	background:url(../../images/lp2/id/btn_id_off.jpg) no-repeat 0 0;
	display:block;
	width:600px;
	height:80px;
}

/*---------------------------
OPENID SNSボタン
---------------------------*/

#openid01{
	position:absolute;
	top:170px;
	left:93px;
	width:130px;
	height:24px;
}

#openid02{
	position:absolute;
	top:23px;
	left:447px;
}

#sns{
	height:24px;
	margin-top:13px;
}

#sns li{
	width:26px;
	float:left;
}

#sns .imgsp{
	background-image:url(http://file.gameon.jp/images/pmang/template/openid.png);
	background-repeat:no-repeat;
	width:24px;
	height:24px;
}

.btn_google{
	background-position:0 -254px;
}

.btn_yahoo{
	background-position:-24px -254px;
}

.btn_twitter{
	background-position:-48px -254px;
}

.btn_facebook{
	background-position:-72px -254px;
}

.btn_mixi{
	background-position:-96px -254px;
}

/*------------------------------
 btn+twitter
-------------------------------*/

.twt_win{
	width:1024px;
	margin:0 auto;
	text-align:left;
}

.social_btn{
	height:50px;
	vertical-align:middle;
	/zoom:1;
}
.social_btn div{
	float:right;
	/zoom:1;
	vertical-align:middle;
	margin:0 4px 0 0;
}


#main iframe {
	visibility:hidden;
}

#main_win iframe {
	visibility:visible;
}
#main_win{
	min-width:980px;
	padding:30px 0 0;
	background:url(../../images/lp2/bg.gif) repeat-x center top;
	font-size:12px;
}


/*------------------------------------------------
製作者コメント
------------------------------------------------*/

#comment{
	width: 720px;
	height: 550px;
	font-size:14px;
	line-height:1.8em;
	color:#fff;
}

/*------------------------------------------------
バナー
------------------------------------------------*/

.banner_left{
	height:50px;
	text-align:left;
	margin:-10px 310px 0 12px;
	/margin:-16px 310px 0 12px;
	overflow:visible;
	/zoom:1;
}
.banner_all{
	text-align:center;
	overflow:visible;
	/zoom:1;
	font-size:0;
}

/*------------------------------------------------
フッター
------------------------------------------------*/

#footer{
	clear:both;
	font-size:10px;
	font-family:Verdana, Geneva, sans-serif;
	padding:15px 0;
	/zoom:1;
}
#footer .footer_navi{
	text-align:center;
}
#footer .footer_navi ul{
	display:table;
	/display:inline;
	/zoom:1;
	margin:0 auto;
}
#footer .footer_navi li{
	display:table-cell;
	/display:inline;
	/zoom:1;
	border-right:#4e4f4c solid 1px;
	padding:0 8px;
}
#footer .footer_navi li.last{
	border-right:none;
}
#footer .footer_navi li a{
	color:#898b84;
	text-decoration:none;
}
#footer .footer_navi li a:hover{
	color:#ffff11;
}
#footer .copyright{
	padding:15px 0 0;
	font-family:Verdana, Geneva, sans-serif;
}
a{
	color:#898b84;
	text-decoration:none;
}
a:hover{
	color:#ffff11;
}

/*--------------------------
◇Twitter
--------------------------*/
.twt_area{
	margin:-50px 0 0 290px;
	height:50px;
	overflow:hidden;
	/zoom:1;
	background:none !important;
}
.twtr-widget{
	width:690px !important;
	margin:0;
	height:24px;
	overflow:hidden;
	background:none !important;
	/zoom:1;
}
.twtr-widget *{
	background:none !important;
}
.twtr-bd,
.twtr-fullscreen .twtr-tweet-wrap,
.twtr-widget .twtr-tweet-wrap{
	padding:0 !important;
}
.twtr-tweet-text em,
.twtr-hd,
.twtr-ft{
	display:none !important;
}
.twtr-bd{
	height:24px !important;
	overflow:hidden;
}
.twtr-avatar,
.twtr-img img{
	width:24px !important;
	height:24px !important;
}
.twtr-tweet-text{
	margin-left:30px !important;
	font-size:10px;
	line-height:1.4 !important;
}
.twtr-widget .twtr-tweet{
	border:none !important;
}
#main #twtr-widget-1 .twtr-doc,
#main #twtr-widget-1 .twtr-hd a,
#main #twtr-widget-1 h3, #twtr-widget-1 h4,
#main #twtr-widget-1 .twtr-new-results,
#main #twtr-widget-1 .twtr-results-inner,
#main #twtr-widget-1 .twtr-timeline {
	background:none !important;
}



/*------------------------------------------------
TOPへ戻る
--------------------------------------------------*/

#btn_top{
	position:fixed;
	left:50%;
	bottom:30px;
	margin-left:530px;
	z-index: 99;
}


/*------------------------------------------------
	ライトボックス
--------------------------------------------------*/

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#colorbox,
#cboxWrapper {
	background:#151514;
	padding:40px 40px 15px 40px;
}

#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#151514; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
/*
#cboxTopLeft{width:100%; height:45px; background:#fcfbf9;}
#cboxBottomLeft{width:100%; height:45px; background:#fcfbf9;}
#cboxMiddleLeft{width:45px; background:#fcfbf9;}
#cboxMiddleRight{width:45px; background:#fcfbf9;}
*/
#cboxContent{background:#151514; /*overflow:hidden;*/}
		.cboxIframe{background:#151514;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:20px;}
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
#cboxClose{
	position:absolute;
	top:-29px;
	right:-29px;
	display:block;
	color:#444;
	text-indent:-9999px;
	background:url(../../images/lp2/close.png) no-repeat;
	width:25px;
	height:25px;
}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

.common-lightbox {
	overflow:hidden;
}

.common-lightbox object {
	width:1000px;
	margin:0px auto 0px auto;
}