@charset "utf-8";

/* //////////////////snavここから///////////////////// */

ul#slist {
	padding:0 0 0 0;
	margin:0 0 0 0;
	position: relative;
	top: -5px;
	left:-8px;
}

ul#slist li a{
	list-style-type: none;
	text-indent:-9999px;
	width:216px;
	height:48px;
}

ul#slist li.btn_story a {
	display:block;
	background-image: url(../img/khrecom/snav_btn_story.png);
	position: relative;
	top: -0px;
}

ul#slist li.btn_characters a {
	display:block;
	background-image: url(../img/khrecom/snav_btn_characters.png);
	position: relative;
	top: -16px;
}

ul#slist li.btn_world a {
	display:block;
	background-image: url(../img/khrecom/snav_btn_world.png);
	position: relative;
	top: -32px;
}

ul#slist li.btn_system a {
	display:block;
	background-image: url(../img/khrecom/snav_btn_system.png);
	position: relative;
	top: -48px;
}

ul#slist li.btn_newfeatures a {
	display:block;
	background-image: url(../img/khrecom/snav_btn_new.png);
	position: relative;
	top: -64px;
}

ul#slist li.btn_comingsoon {
	display:block;
	background-image: url(../img/khrecom/snav_btn_comingsoon.gif);
	position: relative;
	top: -64px;
}
/*オーバー時*/
ul#slist li a:hover{
	background-position: -216px 0px;
}

/*訪問時*/
ul#slist li a:active{
	background-position: -432px 0px;
}

ul#slist li .current{
	background-position: -432px 0px;
}



/* //////////////////snavここまで///////////////////// */


#container{

}

#top{
	margin: 0 auto;
	width: 690px;
	padding-left: 200px;
}

#top h3{
	width: 348px;
	margin: 0 auto;
	padding-top: 44px;
	padding-bottom: 44px;
}

#storyinner{
	margin: 0 auto;
	width: 890px;
	height: 700px;
}

.noeffect #storyinner{
	width: 690px;
	padding-left: 200px;
	margin: 0 auto;
}

.effect #storyinner{
	width: 690px;
	padding-left: 200px;
	margin: 0 auto;
	position: relative;
}

.effect #khrecom_title{
	position: absolute;
	top:0px;
	right:0px;
	z-index: 10;
}

.effect #khrecom_story_bg{
	position: absolute;
	top:0px;
	left:200px;
}

#khrecom_story_text_01{
	position: absolute;
	top: 80px;
	left: 266px;
}

#khrecom_story_text_02{
	position: absolute;
	top: 204px;
	left: 266px;
}

#khrecom_story_text_03{
	position: absolute;
	top: 359px;
	left: 266px;
}

#khrecom_story_text_04{
	position: absolute;
	top: 454px;
	left: 266px;
}

#khrecom_story_text_05{
	position: absolute;
	top: 551px;
	left: 266px;
}


/*----------

	CHARACTERS

----------*/

#charactersinner{
	position: relative;
	margin: 0 auto;
	width: 890px;
	height: 687px;
}

#charactesbg{
	position: absolute;
}

#bg01,
#bg02,
#bg03,
#bg04,
#bg05,
#bg06,
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#khrecom_characters_title{
	position: absolute;
	top:0px;
	right:0px;
	z-index: 10;
}

.bx-wrapper{
	width: 890px;
}

#characters .bx-viewport{
	height: 690px !important;
	z-index: 0;
}


#characters .bx-pager{
	position: absolute;
	width:200px;
	height:22px;
	top: 654px;
	left: 471px;
	z-index: 75;
}

.bx-pager-link{
	height:22px;
	width:22px;
	overflow: hidden;
	display: block;
	float: left;
	text-indent: -9999px;
	z-index: 50;
	cursor: pointer;
}

#characters .bx-prev{
	z-index: 75;
	left:215px;
	top:594px;
}
#characters .bx-next{
	z-index: 75;
	left:800px;
	top:594px;
}

.effect .bx-pager-link{
	background-image: url(../img/khrecom/khrecom_characters_pager.png);
}

.noeffect .bx-pager-link{
	background-image: url(../img/khrecom/khrecom_characters_pager.jpg);
}

.bx-pager-link.active{
	background-position: 0px -22px;
}

.effect #c01{
	position: relative;
	width: 890px;
	height: 581px;
}

#c0101,
#c0102,
#c0103,
#c0104,
#c0105,
#c0106{
	position: absolute;
	cursor: pointer;
}

.effect #c0101{
	top: 53px;
	left: 215px;
}
.effect #c0102{
	top: 53px;
	left: 402px;
}
.effect #c0103{
	top: 53px;
	left: 652px;
}
.effect #c0104{
	top: 325px;
	left: 215px;
}
.effect #c0105{
	top: 325px;
	left: 405px;
}

.effect #c0106{
	top: 325px;
	left: 665px;
}

.effect #c02,
.effect #c03,
.effect #c04,
.effect #c05,
.effect #c06,
.effect #c07{
	padding-left: 215px;
}

.noeffect #c01wrap,
.noeffect #c02wrap,
.noeffect #c03wrap,
.noeffect #c04wrap,
.noeffect #c05wrap,
.noeffect #c06wrap,
.noeffect #c07wrap
{
	position: absolute;
	top: 0;
	left: 0;
}

.noeffect #c0101{
	top: 54px;
	left: 215px;
}
.noeffect #c0102{
	top: 54px;
	left: 437px;
}
.noeffect #c0103{
	top: 54px;
	left: 656px;
}
.noeffect #c0104{
	top: 312px;
	left: 215px;
}
.noeffect #c0105{
	top: 312px;
	left: 405px;
}
.noeffect #c0106{
	top: 312px;
	left: 669px;
}

.effect .cmain{
}

.noeffect .cmain{
	margin-left: -70px;
}

.cscbtn{
	text-indent:-999999px;
	width:213px;
	height:120px;
	display:block;
	position: absolute;
}

.cscbtn:hover{
	background-position: 0px -120px;
}

#c01ss01{
	background-image: url(../img/khrecom/khrecom_characters_01_02_thumb.jpg);
	top:377px;
	left: 268px;
}

#c02ss01{
	background-image: url(../img/khrecom/khrecom_characters_01_03_thumb.jpg);
	top:357px;
	left: 268px;
}
#c03ss01{
	background-image: url(../img/khrecom/khrecom_characters_01_04_thumb.jpg);
	top:376px;
	left: 268px;
}
#c04ss01{
	background-image: url(../img/khrecom/khrecom_characters_01_05_thumb.jpg);
	top:344px;
	left: 268px;
}
#c05ss01{
	background-image: url(../img/khrecom/khrecom_characters_01_06_thumb.jpg);
	top:370px;
	left: 268px;
}
#c06ss01{
	background-image: url(../img/khrecom/khrecom_characters_01_07_thumb.jpg);
	top:351px;
	left: 268px;
}



/*----------

	O13

----------*/

#o13inner{
	position: relative;
	margin: 0 auto;
	width: 890px;
	height: 689px;
}

#characteso13bg{
	position: absolute;
}

#o13bg01,
#o13bg02,
#o13bg03,
#o13bg04,
#o13bg05,
#o13bg06,
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#o13 .bx-wrapper{
	position: absolute;
	top: -42px;
	left: 0px;
	height: 690px;
	width: 1000px;
	z-index: 50;
}

#o13 .bx-viewport{
	height: 690px !important;
	z-index: 0;
}

#o13 .bx-pager{
	position: absolute;
	width:200px;
	height:22px;
	top: 696px;
	left: 471px;
}

#o13 .bx-prev{
	left:215px;
	top:636px;
}
#o13 .bx-next{
	left:800px;
	top:636px;
}

#o13.noeffect .bx-pager{
	position: absolute;
	width:200px;
	height:22px;
	top: 654px;
	left: 471px;
}

#o13.noeffect .bx-prev{
	left:215px;
	top:594px;
}
#o13.noeffect .bx-next{
	left:800px;
	top:594px;
}



.effect #o01{
	position: relative;
	width: 890px;
	height: 581px;
}

#o0101,
#o0102,
#o0103,
#o0104,
#o0105,
#o0106{
	position: absolute;
	cursor: pointer;
}

.effect #o0101{
	top: 104px;
	left: 215px;
}
.effect #o0102{
	top: 48px;
	left: 402px;
}
.effect #o0103{
	top: 104px;
	left: 652px;
}
.effect #o0104{
	top: 381px;
	left: 215px;
}
.effect #o0105{
	top: 381px;
	left: 405px;
}

.effect #o0106{
	top: 381px;
	left: 645px;
}

.effect #o02,
.effect #o03,
.effect #o04,
.effect #o05,
.effect #o06,
.effect #o07
{
	padding-top: 42px;
}

.effect #o03 img{
	margin-top: -42px;
}

.noeffect #o01wrap,
.noeffect #o02wrap,
.noeffect #o03wrap,
.noeffect #o04wrap,
.noeffect #o05wrap,
.noeffect #o06wrap{
	position: absolute;
	top: 0;
	left: 0;
}

.noeffect #o0101{
	top: 62px;
	left: 215px;
}
.noeffect #o0102{
	top: 6px;
	left: 419px;
}
.noeffect #o0103{
	top: 62px;
	left: 660px;
}
.noeffect #o0104{
	top: 329px;
	left: 215px;
}
.noeffect #o0105{
	top: 321px;
	left: 409px;
}
.noeffect #o0106{
	top: 321px;
	left: 648px;
}

.effect .omain{
	position: absolute;
	left: 200px;
}

.noeffect .omain{
	position: absolute;
	top:0;
	left:0;
}


.oscbtn{
	text-indent:-999999px;
	width:213px;
	height:120px;
	display:block;
	position: absolute;
}

.oscbtn:hover{
	background-position: 0px -120px;
}

#o01ss01{
	background-image: url(../img/khrecom/khrecom_characters_02_02_thumb.jpg);
	top:420px;
	left: 268px;
}
#o02ss01{
	background-image: url(../img/khrecom/khrecom_characters_02_03_thumb.jpg);
	top:420px;
	left: 268px;
}
#o03ss01{
	background-image: url(../img/khrecom/khrecom_characters_02_04_thumb.jpg);
	top:436px;
	left: 268px;
}
#o04ss01{
	background-image: url(../img/khrecom/khrecom_characters_02_05_thumb.jpg);
	top:426px;
	left: 268px;
}
#o05ss01{
	background-image: url(../img/khrecom/khrecom_characters_02_06_thumb.jpg);
	top:443px;
	left: 268px;
}
#o06ss01{
	background-image: url(../img/khrecom/khrecom_characters_02_07_thumb.jpg);
	top:429px;
	left: 268px;
}

/*----------

	WORLD

----------*/

#worldinner{
	margin: 0 auto;
	width: 890px;
	height: 805px;
}

#world_title{
	float: right;
}

#khrecom_world_title{
	padding-left: 200px;
	width: 390px;
	height: 34px;
	margin: 0 auto;
	padding-top: 11px;
	clear: both;
}

#khrecom_world_text{
	padding-top: 16px;
	padding-left: 200px;
	padding-bottom: 54px;
	width: 407px;
	height: 89px;
	margin: 0 auto;
}

#worldslides{
	position: relative;
}

#wbg01,
#wbg02,
#wbg03,
#wbg04,
#wbg05,
#wbg06,
#wbg07,
#wbg08,
#wbg09,
#wbg10,
#wbg11,
#wbg12,
#wbg13
{
	position: absolute;
	top: 0px;
	left: 0px;
}

.w00icon{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 132px;
	height:160px;
	cursor: pointer;
}

.effect #w00,
.effect #w01,
.effect #w02,
.effect #w03,
.effect #w04,
.effect #w05,
.effect #w06,
.effect #w07,
.effect #w08,
.effect #w09,
.effect #w10,
.effect #w11,
.effect #w12,
.effect #w13
{
	position: relative;
	width: 890px;
	height: 542px;
}

#w0001{
	top:0px;
	left: 281px;
}
#w0002{
	top:0px;
	left: 413px;
}
#w0003{
	top:0px;
	left: 545px;
}
#w0004{
	top:0px;
	left: 677px;
}

#w0005{
	top:161px;
	left: 281px;
}
#w0006{
	top:161px;
	left: 413px;
}
#w0007{
	top:161px;
	left: 545px;
}
#w0008{
	top:161px;
	left: 677px;
}

#w0009{
	top:322px;
	left: 281px;
}
#w0010{
	top:322px;
	left: 413px;
}
#w0011{
	top:322px;
	left: 545px;
}
#w0012{
	top:322px;
	left: 677px;
}

.effect .wmain{
	position: absolute;
	left: 200px;
}

.noeffect .wmain{
	position: absolute;
	top:0;
	left:0;
}


.wscbtn{
	text-indent:-999999px;
	width:213px;
	height:120px;
	display:block;
	position: absolute;
}

.wscbtn:hover{
	background-position: 0px -120px;
}

#w01ss01{
	background-image: url(../img/khrecom/khrecom_world_01_thumb_01.jpg);
	top:314px;
	left: 215px;
}
#w02ss01{
	background-image: url(../img/khrecom/khrecom_world_02_thumb_01.jpg);
	top:335px;
	left: 215px;
}
#w02ss02{
	background-image: url(../img/khrecom/khrecom_world_02_thumb_02.jpg);
	top:335px;
	left: 438px;
}
#w03ss01{
	background-image: url(../img/khrecom/khrecom_world_03_thumb_01.jpg);
	top:308px;
	left: 215px;
}
#w04ss01{
	background-image: url(../img/khrecom/khrecom_world_04_thumb_01.jpg);
	top:290px;
	left: 215px;
}
#w05ss01{
	background-image: url(../img/khrecom/khrecom_world_05_thumb_01.jpg);
	top:330px;
	left: 215px;
}
#w06ss01{
	background-image: url(../img/khrecom/khrecom_world_06_thumb_01.jpg);
	top:315px;
	left: 215px;
}
#w07ss01{
	background-image: url(../img/khrecom/khrecom_world_07_thumb_01.jpg);
	top:276px;
	left: 215px;
}
#w08ss01{
	background-image: url(../img/khrecom/khrecom_world_08_thumb_01.jpg);
	top:319px;
	left: 215px;
}
#w09ss01{
	background-image: url(../img/khrecom/khrecom_world_09_thumb_01.jpg);
	top:320px;
	left: 215px;
}
#w10ss01{
	background-image: url(../img/khrecom/khrecom_world_10_thumb_01.jpg);
	top:324px;
	left: 215px;
}
#w11ss01{
	background-image: url(../img/khrecom/khrecom_world_11_thumb_01.jpg);
	top:314px;
	left: 215px;
}

#w12ss01{
	background-image: url(../img/khrecom/khrecom_world_12_thumb_01.jpg);
	top:310px;
	left: 215px;
}
#w12ss02{
	background-image: url(../img/khrecom/khrecom_world_12_thumb_02.jpg);
	top:310px;
	left: 438px;
}
#w12ss03{
	background-image: url(../img/khrecom/khrecom_world_12_thumb_03.jpg);
	top:310px;
	left: 661px;
}

#world .bx-pager{
	position: absolute;
	width:308px;
	height:22px;
	top: 513px;
	left: 389px;
}

.bx-pager-link{
	height:22px;
	width:22px;
	overflow: hidden;
	display: block;
	float: left;
	text-indent: -9999px;
	z-index: 50;
	cursor: pointer;
}

.bx-prev,
.bx-next{
	text-indent:-9999px;
	width:77px;
	height:77px;
	display:block;
	position: absolute;
}

.bx-prev{
	background-image: url(../img/khfm/khfm_character_prev.gif);
}

.bx-next{
	background-image: url(../img/khfm/khfm_character_next.gif);
}
.bx-prev:hover{
	background-position: 0px -77px;
}

.bx-next:hover{
	background-position: 0px -77px;
}

#world .bx-prev{
	left:215px;
	top:465px;
}

#world .bx-next{
	left:800px;
	top:465px;
}

/*----------

	SYSTEM

----------*/

#systeminner{
	position: relative;
	margin: 0 auto;
	height:878px;
	width: 690px;
	padding-left: 200px;
}

#system_title{
	float: right;
}

#khfm_system_title{
	padding-top: 16px;
	clear: both;
	width: 170px;
	height: 31px;
	margin: 0 auto;
}

#khfm_system_text{
	padding-top: 16px;
	width: 502px;
	height: 84px;
	margin: 0 auto;
	margin-bottom: 42px;
}

#systemcircle01{
	position: absolute;
	top: 0px;
	left: 25px;
}

#systemcircle02{
	position: absolute;
	top: 216px;
	right: 20px;
}


#systemcircle03{
	position: absolute;
	top: 431px;
	left: 25px;
}

#systemboxs01{
	position: relative;
}

#systemboxs02{
	position: relative;
}

#systemboxs03{
	position: relative;
}

#system01{
	position: absolute;
	top:0px;
	left: 221px;
}

#system02{
	position: absolute;
	top:101px;
	left: 221px;
}

#system03{
	position: absolute;
	top:234px;
	left: 25px;
}

#system04{
	position: absolute;
	top:334px;
	left: 25px;
}

#system05{
	position: absolute;
	top:457px;
	left: 221px;
}


#system01 .systemcheck,
#system02 .systemcheck{
	position: absolute;
	right: 15px;
	top:12px;
}

#system03 .systemcheck,
#system04 .systemcheck{
	position: absolute;
	left: 333px;
	top:12px;
}

#system05 .systemcheck{
	position: absolute;
	right: 15px;
	top:12px;
}
.systemcheck{
	text-indent:-9999px;
	width:95px;
	height:23px;
	display:block;
	background-image: url(../img/khfm/khfm_system_check.jpg);
}

.systemcheck:hover {
	background-position: 0px -23px;
}

/*----------

	NEW FEATURES

----------*/

#newfeaturesinner{
	position: relative;
	margin: 0 auto;
	height:880px;
	width: 690px;
	padding-left: 200px;
}

#newfeatures_title{
	float: right;
}

#khrecom_newfeatures_title{
	padding-top: 16px;
	clear: both;
	width: 149px;
	height: 34px;
	margin: 0 auto;
}

#khrecom_newfeatures_text{
	padding-top: 16px;
	width: 561px;
	height: 20px;
	margin: 0 auto;
	margin-bottom: 23px;
}

#khrecom_newfeatures_descbox{
	width: 653px;
	margin: 0 auto;
	clear: both;
}

#desc01 .deschead{
	margin-bottom: 0px;
	height: 17px;
}
#desc01 .desctext{
	margin-bottom: 11px;
	height: 76px;
}

#desc01 .thumb01left{
	float: left;
	height: 233px;
}

#desc01 .thumb01right{
	float: right;
	height: 233px;
}

#desc01 .thumb02left{
	margin-top: 25px;
	float: left;
	height: 233px;
}

#desc01 .thumb02right{
	margin-top: 25px;
	float: right;
	height: 233px;
}

#desc02{
	clear: both;
	padding-top: 22px;
	padding-bottom: 24px;
}
#desc03{
	padding-bottom: 18px;
}


.khrecom_newfeatures_thumb{
	text-indent:-999999px;
	display:block;
}

#khrecom_newfeatures_thumbsd01
{
	width: 200px;
	height: 153px;
}

#khrecom_newfeatures_thumbsd02
{
	width: 200px;
	height: 178px;
}

#khrecom_newfeatures_thumbsd01:hover
{
	background-position: 0px -153px;
}

#khrecom_newfeatures_thumbsd02:hover
{
	background-position: 0px -178px;
}

#khrecom_newfeatures_thumbhd01,
#khrecom_newfeatures_thumbhd02
{
	width: 364px;
	height: 233px;
}

#khrecom_newfeatures_thumbhd01:hover,
#khrecom_newfeatures_thumbhd02:hover
{
	background-position: 0px -233px;
}

#khrecom_newfeatures_thumbsd01{
	background-image: url(../img/khrecom/khrecom_newfeatures_thumb_sd_01.jpg);
}
#khrecom_newfeatures_thumbsd02{
	background-image: url(../img/khrecom/khrecom_newfeatures_thumb_sd_02.jpg);
}


#khrecom_newfeatures_thumbhd01{
	background-image: url(../img/khrecom/khrecom_newfeatures_thumb_hd_01.jpg);
}
#khrecom_newfeatures_thumbhd02{
	background-image: url(../img/khrecom/khrecom_newfeatures_thumb_hd_02.jpg);
}


/*----------

	NEXT

----------*/

#next{
	margin: 0 auto;
	width: 690px;
	height: 210px;
	padding-left: 200px;
}

#next_href {
	text-indent:-9999px;
	width:682px;
	height:194px;
	display:block;
	background-image: url(../img/khrecom/khrecom_btn_next.jpg);
}

#next_href:hover {
	background-position: 0px -194px;
}

#foot{
	margin: 0 auto;
	width: 690px;
	padding-left: 200px;
	height: 80px;
}

#foot_href {
	float: right;
	text-indent:-9999px;
	width:119px;
	height:23px;
	display:block;
	background-image: url(../img/shared/btn_pagetop.jpg);
}

#foot_href:hover {
	background-position: 0px -23px;
}