@charset "utf-8";

/*--------------------------------------------
 init
--------------------------------------------*/
*{
	margin:0;
	padding:0;
}
body {
	height: 100%;
	background-color:#000;
	font-family:"メイリオ", Meiryo, "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Verdana, Helvetica, sans-serif;
}
a img {border:0;}
li    {list-style-type:none;}
h1, h2, h3, h4, h5, h6 {clear:both; font-weight:normal;}

.kairi-vr-wrap {
	width:100%; min-width:980px;
	margin:0 auto;
	padding:0;
	border:0;
	font-style:normal;
	font-weight:normal;
	text-align:center;
	position:relative;
	overflow: hidden;
	font-size:0;
	line-height:0;
}
.kairi-vr-loading {
	position: absolute; left: 0; top: 38px; z-index: 9999;
	width: 100%; height: 2000px;
	background-color: #000;
}
.kairi-vr-loading div {
	width:120px; height: 70px;
	background: url(../images/loader.gif);
	position: fixed; left: 50%; top:50%;
	margin: -35px 0 0 -60px;
}

.kairi-vr-bg1 {
	width: 100%;
	background-image: url(../images/bg1.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
.kairi-vr-bgA {
	width: 100%; height: 2000px;
	overflow:hidden;
	position:relative;
	background-image:url(../images/bg_charA1.png);
	background-repeat:no-repeat;
	background-position:center top;
}
.kairi-vr-bgB {
	width: 1272px; height: 1336px;
	position: absolute; right: 50%; top: 248px;
	margin-right: -404px;
}
.kairi-vr-bgB img {
	position: absolute; left: 0; top: 0;
	display: none;
}
.kairi-vr-bgC {
	width: 1200px; height: 1484px;
	position: absolute; left: 50%; top: 226px;
	margin-left: -460px;
}
.kairi-vr-bgC img {
	position: absolute; left: 0; top: 0;
	display: none;
}

.kairi-vr-bgAnime {
	width: 100%; height: 510px;
	position: absolute; left: 0; top: 0;
	overflow: hidden;
}
.kairi-vr-bgAnime div {
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0;
	display: none;
}
.kairi-vr-bgAnime img {
	position: absolute; left: 50%; top:0;
	margin-left: -715px;
}
.kairi-vr-bgAnime_s {
	width: 100%; height: 460px;
	position: absolute; left: 0; top: 0;
	overflow: hidden;
	display: none;
}
.kairi-vr-bgAnime_s div {
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0;
	display: none;
}
.kairi-vr-bgAnime_s img {
	position: absolute; left: 50%; top:0;
	margin-left: -580px;
}
@media only screen and (max-width: 1220px) {
	.kairi-vr-bg1 {
		background-image: url(../images/bg1_s.jpg);
	}
	.kairi-vr-bgA {
		background-image:url(../images/bg_charA1_s.png);
	}
	.kairi-vr-bgB {
		top: 208px;
	}
	.kairi-vr-bgC {
		top: 186px;
	}
	.kairi-vr-bgAnime {
		display: none;
	}
	.kairi-vr-bgAnime_s {
		display: block;
	}
}

#kairi-vr-content {
	width:980px;
	position:absolute; left: 50%; top:0;
	margin-left: -490px;
	display: none;
}

h1 {
	position:absolute;
	top:0; left:0; z-index: 100;
	width:348px; height:264px;
}
@media only screen and (min-width: 1400px) {
	h1 {
		left:50%;
		margin-left: -700px;
	}
}
@media only screen and (max-width: 1220px) and (min-width: 1025px) {
	h1 {
		left:50%;
		margin-left: -512px;
		width:278px;
	}
	h1 img {
		width: 100%; height: auto;
	}
}
@media only screen and (max-width: 1024px) {
	h1 {
		width:278px;
	}
	h1 img {
		width: 100%; height: auto;
	}
}

h2 {
	margin:0 auto;
	padding-top:660px;
	width:700px; height:145px;
	background:url(../images/catch.png) left bottom no-repeat;
}

h3 {
	margin:0 auto;
	width:700px; height:120px;
	background:url(../images/lead.png) 0 0 no-repeat;
}

/* bgm
--------------------------------------------*/
#bgm {
	width:158px; height:36px;
	position:absolute; top: 0; right: 148px; z-index: 99;
	background:url(../images/bgm.png) no-repeat;
	cursor: pointer;
}
#bgm div {
	background: url(../images/bgm_off.gif) no-repeat;
	display: none;
}
#bgm div:hover {
	background-position: 0 -36px;
}
#bgm.bgm_set div {
	display: block;
}
#bgm.bgm_on div {
	background: url(../images/bgm_act.gif) no-repeat;
}
#bgm.bgm_on div:hover {
	background-position: 0 -36px;
}

/* lang
--------------------------------------------*/
#lang {
	width: 148px; height: 36px;
	position:absolute; top: 0; right: 0; z-index: 100;
}
#lang div {
	width:148px; height:36px;
	overflow: hidden;
	cursor: pointer;
}
#lang:hover div {
	background: url(../images/lang/btn.png) left -38px;
}
#lang:hover div img {
	display: none;
}
#lang ul {
	width: 148px; height: 128px;
	position: absolute; right: 0; top: 32px;
	display: none;
	opacity: 0;
}
#lang li {
	width: 148px; height: 32px;
	overflow: hidden;
}
#lang li a {
	width: 148px; height: 32px;
	display: block;
}
#lang li a:hover img{
	display: none;
}
#lang li:nth-child(1) a:hover { background: url(../images/lang/jp.png) center top;}
#lang li:nth-child(2) a:hover { background: url(../images/lang/en.png) center top;}
#lang li:nth-child(3) a:hover { background: url(../images/lang/ko.png) center top;}
#lang li:nth-child(4) a:hover { background: url(../images/lang/tw.png) center top;}

#lang.jp li:nth-child(1) { background: url(../images/lang/jp.png) right top;}
#lang.en li:nth-child(2) { background: url(../images/lang/en.png) right top;}
#lang.ko li:nth-child(3) { background: url(../images/lang/ko.png) right top;}
#lang.tw li:nth-child(4) { background: url(../images/lang/tw.png) right top;}

#lang.jp li:nth-child(1) img{ display: none; }
#lang.en li:nth-child(2) img{ display: none; }
#lang.ko li:nth-child(3) img{ display: none; }
#lang.tw li:nth-child(4) img{ display: none; }


/*event_bnr
--------------------------------------------*/
/*#event_bnr {
	margin:5px auto -5px auto;
	width:960px; height:260px;
}
#event_bnr a {
	display:block;
	background:url(../images/event/psvr_camp170928.png) 0 0 no-repeat;
}
#event_bnr a:hover {
	background-position:0 -260px;
}*/

/*event_bnr2
--------------------------------------------*/
#event_bnr2 {
	margin:0 auto;
	width:860px; height:205px;
}
#event_bnr2A a {
	display:block;
	background:url(../images/event/spoffer.png) 0 0 no-repeat;
}
#event_bnr2A a:hover {
	background-position:0 -205px;
}
#event_bnr2B {
	margin:0 auto;
	width:840px; height:60px;
}
#event_bnr2B li {
	width:420px; height:60px;
	float: left;
	overflow: hidden;
}
#event_bnr2B a {
	width:420px; height:60px;
	display:block;
}
#event_bnr2B a:hover img {
	display: none;
}
#event_bnr2_psvr:hover {
	background:url(../images/event/spoffer_btn_psvr.png) left center no-repeat;
}
#event_bnr2_steam:hover {
	background:url(../images/event/spoffer_btn_steam.png) left center no-repeat;
}
.open0 #event_bnr2_psvr,
.open1 #event_bnr2_psvr {
	background:url(../images/event/spoffer_btn_psvr.png) left bottom no-repeat;
	cursor: inherit;
}
.open2 #event_bnr2_steam {
	background:url(../images/event/spoffer_btn_steam.png) left bottom no-repeat;
	cursor: inherit;
}
.open0 #event_bnr2_psvr img,
.open1 #event_bnr2_psvr img,
.open2 #event_bnr2_steam img {
	display: none;
}

/*movie
--------------------------------------------*/
#movie {
	/*margin:20px auto 0 auto;*/
	margin:5px auto 0 auto;/*TYPE2*/
	width:960px; height:335px;
}
/*（以下、アニメ演出「mov_btn1.gif」付加時 及び「spacer.gif」差し替え時の共通設定）*/
#mov_btn1 {
	width:480px; height:335px;
	float:left;
}
#mov_btn1 a {
	display:block;
	width:480px; height:335px;
	background:url(../images/mov_btn_trl.png) 0 0 no-repeat;
}
#mov_btn1 a:hover {
	background-position:0 -335px;
}
/*（以下、アニメ演出「mov_btn2.gif」付加時 及び「spacer.gif」差し替え時の共通設定）*/
#mov_btn2 {
	width:480px; height:335px;
	float:left;
}
#mov_btn2 a {
	display:block;
	width:480px; height:335px;
	background:url(../images/mov_btn_pv.png) 0 0 no-repeat;
}
#mov_btn2 a:hover {
	background-position:0 -335px;
}

/*dl
--------------------------------------------*/
#dl {
	/*margin:20px auto 25px auto;*/
	/*margin:25px auto 0 auto;*//*dl下部に購入バナー追加時*/
	margin:20px auto 0 auto;/*dl下部に購入バナー追加時 TYPE2*/
	width:980px;
}

#dl ul {
	/*margin:5px auto 0 auto;*/
	margin:0 auto;/*dl下部に購入バナー追加時 TYPE2*/
}

#dl ul li {
	display:inline-block;
}

#dl ul li a#psstore {
	display:block;
	width:380px; height:80px;
	background:url(../images/dl_btn_ps.png) 0 0 no-repeat;
}
#dl ul li a#psstore:hover {
	background-position:0 -80px;
}
#dl ul li a#steam {
	display:block;
	width:380px; height:80px;
	background:url(../images/dl_btn_steam.png) 0 0 no-repeat;
}
#dl ul li a#steam:hover {
	background-position:0 -80px;
}

/*capt
--------------------------------------------*/
#capt {
	width:956px;
	margin:30px auto 0 auto;
	position: relative;
}
.capt_head {
	width:852px;
	margin:0 auto;
	position: relative;
	overflow: hidden;
}
.capt_head li {
	width:852px;
	float: left;
	display: none;
}
.capt_head li:first-child {
	display: block;
}
.slide_box {
	width:852px; height:308px;
	margin:0 auto;
	position: relative;
	overflow: hidden;
}
.slide_box li {
	width:852px; height:276px;
	float: left;
	font-size: 0;
}
.slide_box li div {
	width:426px; height:276px;
	display: inline-block;
}

/*（以下、アニメ演出「capt1.gif、capt2.gif」付加時 及び「spacer.gif」差し替え時の共通設定）*/
#capt .slide_box .captA1 { background:url(../images/captA1.png) 0 0 no-repeat;}
#capt .slide_box .captA2 { background:url(../images/captA2.png) 0 0 no-repeat;}
#capt .slide_box .captA3 { background:url(../images/captA3.png) 0 0 no-repeat;}
#capt .slide_box .captA4 { background:url(../images/captA4.png) 0 0 no-repeat;}

#capt .slide_box .captB1 { background:url(../images/captB1.png) 0 0 no-repeat;}
#capt .slide_box .captB2 { background:url(../images/captB2.png) 0 0 no-repeat;}
#capt .slide_box .captB3 { background:url(../images/captB3.png) 0 0 no-repeat;}
#capt .slide_box .captB4 { background:url(../images/captB4.png) 0 0 no-repeat;}

#capt .slide_box .captC1 { background:url(../images/captC1.png) 0 0 no-repeat;}
#capt .slide_box .captC2 { background:url(../images/captC2.png) 0 0 no-repeat;}
#capt .slide_box .captC3 { background:url(../images/captC3.png) 0 0 no-repeat;}
#capt .slide_box .captC4 { background:url(../images/captC4.png) 0 0 no-repeat;}
#capt .slide_box .captC5 { background:url(../images/captC5.png) 0 0 no-repeat;}
#capt .slide_box .captC6 { background:url(../images/captC6.png) 0 0 no-repeat;}

#capt .slide_prev {
	left:0; bottom:140px;
}
#capt .slide_next {
	right:0; bottom:140px;
}
.slide_prev {
	width:52px; height:60px;
	position: absolute;
	background:url(../images/slide_prev.png) 0 0 no-repeat;
	cursor: pointer;
}
.slide_next {
	width:52px; height:60px;
	position: absolute;
	background:url(../images/slide_next.png) 0 0 no-repeat;
	cursor: pointer;
}
.slide_prev:hover {
	background-position:0 -60px;
}
.slide_next:hover {
	background-position:0 -60px;
}

/*v-gate
--------------------------------------------*/
#v-gate {
	margin:0 auto;
	width:980px; height:265px;
	background:url(../images/v-gate_bg.png) 0 0 no-repeat;
}
#v-gate_head {
	margin:40px auto 0 auto;
}
#v-gate_btn {
	margin:0 auto;
	width:620px; height:70px;
}
#v-gate_btn a {
	display:block;
	width:620px; height:70px;
	background:url(../images/v-gate_btn.png) 0 0 no-repeat;
}
#v-gate_btn a:hover {
	background-position:0 -70px;
}

/*pre
--------------------------------------------*/
#pre {
	margin:0 auto;
	width:940px; height:210px;
	background:url(../images/pre_bg.png) 0 0 no-repeat;
}
#pre_btn {
	margin:0 auto;
	width:620px; height:70px;
}
#pre_btn a {
	display:block;
	width:620px; height:70px;
	background:url(../images/pre_btn.png) 0 0 no-repeat;
}
#pre_btn a:hover {
	background-position:0 -70px;
}

/*spec
--------------------------------------------*/
#spec {
	margin:-30px auto 0 auto;
}

/*foot
--------------------------------------------*/
#foot_bnr {
	padding-top:30px;
	margin:0 auto;
}
#foot_bnr li {
	display:inline-block;
	padding:0 10px;
}
#foot_bnr li a {
	display:block;
	width:200px;
	height:70px;
	background-repeat:no-repeat;
}
a#bnr_kairi {background-image:url(../images/bnr/bnr_kairi2.png);}
a#bnr_maportal {background-image:url(../images/bnr/bnr_maportal.png);}
#foot_bnr li a:hover {
	background-position:0 -70px;
}

a#jumptop {
	display:block;
	width:100px;
	height:110px;
	margin:0 auto;
	background:url(../images/jumptop.png) 0 0 no-repeat;
}
a#jumptop:hover {
	background-position:0 -110px;
}

#bishamon {
	position:absolute;
	bottom:10px; right:10px;
	width:190px; height:66px;
	display: none;
}
#bishamon a:hover {
	opacity:0.85;
}

/*spoffer
--------------------------------------------*/
#spoffer {
	width: 956px; height: 0;
	margin: 0 auto 30px auto;
	position: relative;
	overflow: hidden;
}
#spoffer_card {
	width: 852px;
	margin: 0 auto;
	overflow: hidden;
	opacity: 0;
}
#spoffer ul {
	width: 852px;
}
#spoffer li {
	width: 852px;
	float: left;
}
#spoffer .event_close {
	width: 40px; height: 40px;
	position: absolute; right: 60px; bottom:0;
	opacity: 0;
}
#spoffer .event_close img {
	opacity: 0.8;
	cursor: pointer;
}
#spoffer .event_close img:hover {
	opacity: 1;
}
#spoffer .slide_prev {
	left:0; top:260px;
	opacity: 0;
}
#spoffer .slide_next {
	right:0; top:260px;
	opacity: 0;
}

/*--------------------------------------------
 Colorbox Core Style:
--------------------------------------------*/
#colorbox, #cboxWrapper{position:absolute; top:0; left:0; z-index:99999;}
#cboxOverlay{position:absolute; top:0; left:0; z-index:99999; overflow:hidden; background-color:#000;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#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;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{}

/* User Style: */
#colorbox{outline:0;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc; display:none!important;}
/*#cboxLoadingGraphic{background:url(../colorbox/images/loading.gif) no-repeat center center;}*/

#cboxClose {
	width:38px; height:19px;
	padding:0; margin:0;
	position:absolute; top:0px; right:0px;
	border:0;overflow:visible;
	background:url(../colorbox/images/controls.png) no-repeat top center;
	text-indent:-9999px;
	display: none;
}
#cboxClose:active {outline:0;}
#cboxClose:hover{background-position:bottom center;}

.openMovie #cboxClose {
	display: block;
}

/*--------------------------------------------
 bxslider Style:
--------------------------------------------*/
.bx-wrapper {
	position: relative;
	*zoom: 1;
}
.bx-wrapper img {
	max-width: 100%;
	display: block;
}
/* PAGER */
.bx-pager {
	width: 100%; height:32px;
	position: absolute; left: 0; bottom: -32px;
	font-size: 0; text-align: center;
}
.bx-pager .bx-pager-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}
.bx-pager .bx-pager-item a {
	width:40px; height:32px;
	display: block;
	outline: 0;
	text-indent: -9999px;
	border-radius: 5px;
	background:url(../images/slide_navi.png) 0 0 no-repeat;
}
.bx-pager a:hover,
.bx-pager a.active {
	background-position:0 -32px;
}