@charset "utf-8";
/*  */
.home {background-image: url(../images/home/bg-home.jpg);}

/* top */
#logo{
	position:relative;
	width: 538px;
	top: 40px;/*34*/
	left: -17px;
	overflow:hidden;
	opacity: 0;
	}
#logo img{width:100%;}

/* game icon QR & download */

.download-box{ 
	position:relative;
	width:468px;/*294 530*/
	height:177px;/*225*/
	top: 35px;
	left:475px;/*100 430*/
	opacity: 0;
	background-image: url(../images/home/download-box2.png);
	background-repeat: no-repeat;
	background-size:contain;
	}
.download-box > img{ width:100%;display:none;}
.download-box > div{ position:absolute;width:100%;padding:18px 31px 0 31px;top:0px; text-align:center;}
.download-box .border-box div{ display:inline-block;width:33%;margin:-4px;margin-right:2px;}
.download-box .icon img{ width:95%;}
.download-box .qr img{ width:95%;}
.download-box div .gak img{ width:100%; margin: 0 0 2px 0;cursor:pointer;}
.dl_caution{
	position: absolute;
	bottom: -36px;
	color: #fff;
	font-size: 1.2em;
	background: #000;
	opacity: 0.7;
	padding: 4px;
	
}
#protagonistx{position:absolute;width:100%;height:100%;overflow:hidden;min-height:600px; }
.protagonistx-box{ 
	position:relative;
	width:1000px;
	margin:0 auto;
	}
.protagonistx{ 
	position:absolute;
	width:1148px;
	top:0;
	left:218px;
	opacity: 0;
	}
.protagonistx img{width:100%;}
.p-box{width:100%;display:none;}

/* youtube */

#gamebox {
	position: absolute;
	width: 520px;
	top: 430px;/*460 */
	left: 55px;/*30px*/
	/*right:63px;*/
	opacity: 0;
	}
#gamebox img{width:100%;}
#gamebox .box1{width:123px;display:inline-block;margin:-4px;margin-right:4px;}
#gamebox .box1 div img{width:100%;}
#gamebox .box2{width:393px;display:inline-block;margin:-4px;cursor:pointer;}

/* banner*/

.banner-box {
	position:relative;
	width: 1000px;
	height: 185px;
	background-attachment: scroll;
	background-image: url(../images/home/banner-box.png);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	margin:0 auto;
	margin-top:100px;/*35*/
	overflow:hidden;
	}
.banner-box .slider-box {width:840px;margin:0 auto; padding-top:16px;}
.banner-box .slider {
	position:relative;
    width:100%;
    margin:0 auto;
    }
.banner-box .slick-slide {
     margin: 0px 5px;
    }
.slick-slide div{
      margin:0px;
    }
.slick-slide img {
      width: 100%;
    }
.banner-box .slick-prev,
.banner-box .slick-next {
		width: 47px;
    	height: 47px;
		top:50%;
		margin-top:-21px;
		z-index:2;
    }
.banner-box .slick-prev:before,
.banner-box .slick-next:before {color: black; }
/*.banner-box .inner { width: 90%; margin: 0 auto;}
.bxslider img{width: 100%;}*/
.banner-box .slick-prev{background-image: url(../images/home/banner_l.png);}
.banner-box .slick-next{background-image: url(../images/home/banner_r.png);}
.banner-box .slick-prev:hover,
.banner-box .slick-prev:focus{
    	color: transparent;
    	outline: none;
		background-image: url(../images/home/banner_l.png);
	}
.banner-box .slick-next:hover,
.banner-box .slick-next:focus{
    color: transparent;
    outline: none;
	background-image: url(../images/home/banner_r.png);
	}
.banner-box .slick-prev{left: -40px;}
[dir='rtl'] .slick-prev{right: -40px;}
.banner-box .slick-next{right: -40px;}
[dir='rtl'] .slick-next{left: -40px;}

/* news&fb  */
.newsfb-box {margin-top:45px;/*51*/}
.newsfb-t{
	position:absolute;
	width:200px;
	height:29px;
	background-image:url(../images/home/newfb-t.png);
	top:-12px;
	left:50%;
	margin-left:-100px;
	z-index:1;
	}
.newsfb-box #box {position:relative;width:963px;margin:0 auto;padding:61px 0 20px 0;overflow:auto;}
.newsfb-box #box .box-co{width:100%;background-image:url(../images/home/news-box_05.png);}
.newsfb-box #box .box-tl,
.newsfb-box #box .box-tr{
	position:absolute;
	width:61px;
	height:61px;
	}
.newsfb-box #box .box-dl,
.newsfb-box #box .box-dr{
	position:absolute;
	width:20px;
	height:20px;
	}
.newsfb-box #box .box-tl{
	background-image:url(../images/home/news-box_01.png);
	top:0;
	left:0;
	}
.newsfb-box #box .box-tr{
	background-image: url(../images/home/news-box_03.png);
	background-position: 100% 0%;
	top: 0;
	right: 0;
	}
.newsfb-box #box .box-dl{
	background-image:url(../images/home/news-box_07.png);
	bottom:0;
	left:0;
	}
.newsfb-box #box .box-dr{
	background-image:url(../images/home/news-box_09.png);
	bottom:0;
	right:0;
	}
.newsfb-box #box .box-t{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	}	
.newsfb-box #box .box-t1{
	height:61px;
	background-image:url(../images/home/news-box_02.png);
	background-size:100% 100%;
	margin-left:61px;
	margin-right:61px;
	}
.newsfb-box #box .box-l{
	background-image: url(../images/home/news-box_04.png);
	background-size: 20px 100%;
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-attachment: scroll;
	}
.newsfb-box #box .box-r{
	background-image: url(../images/home/news-box_06.png);
	background-size: 20px 100%;
	padding-right: 20px;
	background-repeat: no-repeat;
	background-position: 100% 0%;
	background-attachment: scroll;
	}
.newsfb-box #box .box-b{
	position:absolute;
	width:100%;
	height:20px;
	bottom:0;
	left:0;
	}	
.newsfb-box #box .box-b1{
	height:20px;
	background-image:url(../images/home/news-box_08.png);
	background-size:100% 100%;
	margin-left:20px;
	margin-right:20px;
	}	
.newsfb-box #box .box-co .newsbox{ width:435px;height:300px; float:left;margin-top:17px;text-align:center;overflow:hidden;margin-left:15px;border-radius:10px; overflow:auto;-webkit-overflow-scrolling:touch;}
.newsfb-box #box .box-co .newsbox iframe{height:1000%;}
.newsfb-box #box .box-co .ofbbox{ width:435px; height:300px; float:right;margin-top:17px;text-align:center;overflow:hidden;}
.newsfb-box #box .box-co .ofbbox-title{
	position: relative;
	width: 100%;
	height:48px;
	left:-13px;
	background-image: url(../images/home/office-fb.png);
	background-position: 50% 0%;
	display:none;
	padding: 0 13px 0 13px;
	clear:both;
	}	
	

/*characteristic*/
.characteristic-box {
	background-attachment: scroll;
	background-image: url(../images/home/characteristic-bg.png);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	margin-top:38px;	
	}
.characteristic-box .content{ padding-bottom:8px;}
.characteristic-rim-bottom {
	/*height: 597px;*/
	background-attachment: scroll;
	background-image: url(../images/home/characteristic-rim.jpg);
	background-repeat: repeat-x;
	background-position: 50% 100%;
	}
.characteristic-title{
	background-image: url(../images/home/characteristic-title.png);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	}
.ch-box {width:1100px;margin:0 auto;padding-bottom:9px;}	
.ch-box .slider {
	position:relative;
    width:100%;
    margin:0 auto;
    }
.ch-box .slick-slide {margin: 0px 0px;}
.ch-box .slick-prev,
.ch-box .slick-next {
		width: 57px;
    	height: 77px;
		top:50%;
		margin-top:-41px;
		z-index:2;
    }
.ch-box .slick-prev:before,
.ch-box .slick-next:before {color: black; }
.ch-box .slick-prev{background-image: url(../images/home/slide_arrow_l.png);background-size: cover;}
.ch-box .slick-next{background-image: url(../images/home/slide_arrow_r.png);background-size: cover;}
.ch-box .slick-prev:hover,
.ch-box .slick-prev:focus{
    	color: transparent;
    	outline: none;
		background-image: url(../images/home/slide_arrow_l.png);
	}
.ch-box .slick-next:hover,
.ch-box .slick-next:focus{
    color: transparent;
    outline: none;
	background-image: url(../images/home/slide_arrow_r.png);
	}
.ch-box .slick-prev{left: 0px;}
[dir='rtl'] .ch-box .slick-prev{right: 0px;}
.ch-box .slick-next{right: 0px;}
[dir='rtl'] .ch-box .slick-next{left: 0px;}	

/*intelligence*/
.intelligence-box{
	/* 　攻略記事追加時削除お願いします　*/
	height: 50px;
}
.intelligence-title{
		min-width:1000px;
		height:121px;
		background-image: url(../images/home/information-title.png);
		background-repeat: no-repeat;
		background-position: 50% 0%;	
	}
.intelligence-box .content{padding:0 20px 80px 20px;}
.intelligence-box #box{
	position:relative;
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	}
.intelligence-box #box .box-co{
	width:100%;
	text-align:center;
	background-image:url(../images/home/information-box-05.png);
	}
.intelligence-box #box .box-tl,
.intelligence-box #box .box-tr,
.intelligence-box #box .box-dl,
.intelligence-box #box .box-dr {
	position:absolute;
	width:20px;
	height:20px;
	}
.intelligence-box #box .box-tl{
	background-image:url(../images/home/information-box-01.png);
	top:0;
	left:0;
	}
.intelligence-box #box .box-tr{
	background-image:url(../images/home/information-box-03.png);
	top:0;
	right:0;
	}
.intelligence-box #box .box-dl{
	background-image:url(../images/home/information-box-07.png);
	bottom:0;
	left:0;
	}
.intelligence-box #box .box-dr{
	background-image:url(../images/home/information-box-09.png);
	bottom:0;
	right:0;
	}
.intelligence-box #box .box-t{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	}	
.intelligence-box #box .box-t1{
	height:20px;
	background-image:url(../images/home/information-box-02.png);
	background-size:100% 100%;
	margin-left:20px;
	margin-right:20px;
	}
.intelligence-box #box .box-l{
	background-image: url(../images/home/information-box-04.png);
	background-size: 20px 100%;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-attachment: scroll;
	padding-left: 20px;
	}
.intelligence-box #box .box-r{
	background-image: url(../images/home/information-box-06.png);
	background-size: 20px 100%;
	background-repeat: no-repeat;
	background-position: 100% 0%;
	background-attachment: scroll;
	padding-right: 20px;
	}
.intelligence-box #box .box-b{
	position:absolute;
	width:100%;
	height:20px;
	bottom:0;
	left:0;
	}	
.intelligence-box #box .box-b1{
	height:20px;
	background-image:url(../images/home/information-box-08.png);
	background-size:100% 100%;
	margin-left:20px;
	margin-right:20px;
	}
.intelligence-box #box .box-co div{
	width: 300px;
	display: inline-block;
	margin:4px 2px 4px 2px;
	}
.intelligence-box #box .box-co div img{width:100%;cursor:pointer;}

/* sp */	

@media only screen and (max-width:640px){
	
	.home {background-image: url(../images/home/bg-home-sp.jpg);}
	#logo{width:95%;text-align:center;top:auto;left:auto; margin:0 auto;}
	.download-box{ 
		width:80%;
		height:auto;
		top:-25px;
		left:auto;
		margin:0 auto;
		padding-bottom: 15px;
		background-image:none;
	}
	.download-box > img{ display:block;}
	.download-box .icon img{ display:none;}
	.download-box .qr img{ display:none;}
	.download-box .border-box div{ width:100%;display:block;margin:0px;margin-right:0px;}
	.dl_caution{
		position: absolute;
		left: 0;
		right: 0;
		bottom: -13px;
		text-align: center;
		color: #fff;
		font-size: 1.2em;
	}
	.protagonistx-box{width:100%;}
	.protagonistx{ position:relative;width:100%;top:0;left:0;}
	.p-box{display:block;}
	
	/* game icon QR youtube*/
	#gamebox {
	position:relative;
	width:90%;
	top:auto;
	/*right:auto;*/
	left:auto;
	margin:0 auto;
	}
	#gamebox .box1{display:none;}
	#gamebox .box2{width:100%;}
	
	/* banner*/
	.banner-box {width:100%;background-image:url( none);height:auto;margin-top:20px;}
	.banner-box .slider-box {width:80%;padding-top:0px;}
	
	/* news&fb  */
	.newsfb-box #box{width:100%;}
	.newsfb-box #box .box-co{background-image:url(../images/home/news-box_05a.png);}
	.newsfb-box #box .box-t1{
		background-image:url(../images/home/news.png);
		background-size:auto;
		background-position: 50% 0%;
		}
	.newsfb-box #box .box-co .newsbox{ width:100%;margin:17px 0 17px 0;}	
	.newsfb-box #box .box-co .ofbbox{ width:100%;margin-top:17px;}
	.newsfb-box #box .box-co .ofbbox-title{display:block;}	
	
	/*characteristic*/
	.characteristic-box{margin-top:20px;}
	.characteristic-rim-bottom {height:auto;}
	.ch-box {width:100%;padding-top:40px;}
	.ch-box .slick-prev{left: -5px;}
	[dir='rtl'] .ch-box .slick-prev{right: -5px;}
	.ch-box .slick-next{right: -5px;}
	[dir='rtl'] .ch-box .slick-next{left: -5px;}	
	.ch-box .slick-prev,
	.ch-box .slick-next {
		width: 35px;
    	height: 47px;
		margin-top:-19px;
    }	
	
	/*intelligence*/
	.intelligence-box .content{padding:0 0 50px 0;}
	.intelligence-title{min-width:inherit;}
	.intelligence-box #box .box-tl{background-image:url(../images/home/information-box-01a.png);}
	.intelligence-box #box .box-tr{background-image:url(../images/home/information-box-03a.png);}
	.intelligence-box #box .box-co div{width:48%;}
	}
	
@media only screen and (max-width:480px){
	
	/*characteristic*/
	.characteristic-box{background-position: 50% -5px;}
	.characteristic-title{background-size: auto 45px;}
	.ch-box {padding-top:30px;}
	
	/*intelligence*/
	.intelligence-title{height:75px;background-position: 50% 100%;background-size: auto 95px;}
	.intelligence-box #box .box-co div{width:95%;}
	}