@charset "UTF-8";






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Layout_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
html,body{
	width:100%;
	height:100%;
	background:#FFF;}

.contentswrapper{
	/*width:940px;*/
	margin:0 auto;
	padding: 20px 0 0;}
	
p{
	color: #222;
    font-weight: bold;
    line-height: 2;}

a{color:#b10f18;}
	
	

/*----vis----*/
.vis{
	background:url(../../kkbox2016/images/kkbox_vis_bg.gif) top center repeat-y;
	background-size:100%;
	position:relative;
	text-align:center;
	width:100%;
	height:700px;
	margin:0;}
	
.vis h1{
    display: block;
    background: url(../../kkbox2016/images/kkbox_vis.jpg) top center no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
    margin: 0 auto;}
	
.vis .vis_mask{
background: url(../../kkbox2016/images/vis_mask.png) top center  repeat-x;
    width: 100%;
    height: 155px;
    position: absolute;
    top: 630px;}



/*----download----*/
.download{
    position: relative;
    background: #FFF url(../../kkbox2016/images/kkbox_download.png) no-repeat;
    background-position: center 15px;
    border: 3px solid #c5151e;
    border-radius: 10px;
    width: 960px;
    height: 60px;
    margin: -70px auto 0;
    padding: 90px 0 0 0;}
.download a{
	position:absolute;
	top: 22px;
	display:block;
	height:66px;
	text-indent:-9999px;
	outline:none;}
/*AppStore*/
.download .appstore a{
    left: 322px;
    top: 22px;
    width: 217px;}
/*GooglePlay*/
.download .googleplay a{
    left: 545px;
    top: 22px;
    width: 221px;}
/*Android APK*/
.download .androidapk a{
	left: 773px;
    top: 22px;
    width: 147px;}
	
.download .spec{
	color: #c5151e;
    font-size: 10px;
    width: 880px;
    margin: 4px auto 0;}
	
	
	
/*----gacha----*/
.gacha{
    background: #FFF url(../../kkbox2016/images/kkbox_gacha.jpg) top center no-repeat;
	width:auto;
	height:669px;
	margin:50px auto 0;}
	
.gacha p{
	text-indent:-9999px;}



/*----kkbox_information----*/
.kkbox_information{
	background:#FFF;
	position:relative;
	width:100%;
	margin:90px auto 0;
	padding:0;}
	
.kkbox_information .about{
	position: relative;
    background: #e8e8e8 url(../../kkbox2016/images/kkbox_about_bg.gif) top center no-repeat;
    width: 100%;
    margin: 0 auto;
    padding: 120px 0 78px;}
	
.kkbox_information .about h3 {
	background:url(../../kkbox2016/images/kkbox_logo.png) top center no-repeat;
    text-indent: -9999px;
    width: 323px;
    height: 323px;
	margin: 0 auto;}
	
.kkbox_information .about p{
    width: 960px;
    margin: 20px auto 0;
    display: block;}

	
	
/*----present----*/
.present{
	background:#FFF url(../../kkbox2016/images/kkbox_bg_2.jpg) top center repeat-x;}
	
.present h2{
	background:url(../../kkbox2016/images/kkbox_bg_title.jpg) top center no-repeat;
	width: 100%;
    height: 670px;
    margin: 0 auto;
    padding: 0;
    text-indent: -9999px;}
	
.present .about{
	background: #FFF;
    border: 3px solid #c5151e;
    border-radius: 10px;
    width: 960px;
    margin: -110px auto 0;
    padding: 0 0 40px;}
	
.present .about h3{
	display: block;
    width: 890px;
    height: 80px;
    margin: 40px auto 15px;
    text-indent: -9999px;
    background-position: top center;
    background-repeat: no-repeat;}
	
.present .about h3.headline_1{
	background-image:url(../../kkbox2016/images/kkbox_headline_1.png);}
	
.present .about h3.headline_2{
	background-image:url(../../kkbox2016/images/kkbox_headline_2.png);}
	
.present .about h3.headline_3{
	background-image:url(../../kkbox2016/images/kkbox_headline_3.png);}

.present .about p{
    color: #222;
    font-weight: bold;
    line-height: 2;
    width: 860px;
	margin:0 auto;}
	
.present .about p.dead{
    text-align: center;
    font-size: 20px;
    color: #b10f18;
    font-weight: bold;
    line-height: 1.6;
    margin: 20px auto 0px;}
	
.present .about p.id_search{
	background-image:url(../../kkbox2016/images/id_search_way.png);
	background-repeat:no-repeat;
	background-size:548px 290px;
	background-position:right center;}
	
.present .about a.send_btn{
	background-image:url(../../kkbox2016/images/kkbox_btn.jpg);
	background-repeat:no-repeat;
	display:block;
	width:580px;
	height:93px;
	margin: 60px auto 0;
	text-indent:-9999px;}

.present .about a.send_btn:hover{
	opacity:0.8;}
	
.present .about a.send_btn_off{
	background-image:url(../../kkbox2016/images/kkbox_btn_off.jpg);
	background-repeat:no-repeat;
	display:block;
	width:580px;
	height:93px;
	margin: 60px auto 0;
	text-indent:-9999px;}
	
	
	
/*----event----*/
.event{
    background: #e70000 url(../../kkbox2016/images/kkbox_event_bg_2.jpg);
    background-position: left 45px;
    background-repeat: repeat-x;
    height: 2590px;
    position: relative;
    padding: 45px 0;
    margin: 90px 0;}
.event h2{
	background:url(../../kkbox2016/images/kkbox_event_bg.jpg) top center no-repeat;
	width: 100%;
    height: 950px;
    margin: 0 auto;
    padding: 0;
    text-indent: -9999px;}
.event .about{
	background: url(../../kkbox2016/images/kkbox_about_detail.png) top center no-repeat;
    width: 1200px;
    height: 1944px;
    margin: -350px auto;
    position: relative;}
	
.event .about a{
	position: absolute;
	text-indent:-9999px;
    top: 50px;
    left: 100px;
    display: block;
    width: 400px;
    height: 400px;
    border-radius: 200px;
    cursor: pointer;}
	
.event .about p{
	text-indent:-9999px;
	position:absolute;
	display:none;}



/*----monst_detail----*/
.detail{
	margin:30px 0 0;}
	
.detail .about{
	background: #FFF;
    border: 3px solid #c5151e;
    border-radius: 10px;
    width: 960px;
    margin: 5px auto;
    padding: 0 0 40px;}
	
.detail .about h3{
    display: block;
    width: 890px;
    height: 80px;
    margin: 20px auto 20px;
    text-indent: -9999px;
    background-position: top center;
    background-repeat: no-repeat;}
	
.detail .about h3.headline_4{
	background-image:url(../../kkbox2016/images/kkbox_headline_4.png);}
.detail .about h3.headline_5{
	background-image:url(../../kkbox2016/images/kkbox_headline_5.png);}
.detail .about h3.headline_6{
	background-image:url(../../kkbox2016/images/kkbox_headline_6.png);}
.detail .about h3.headline_7{
	background-image:url(../../kkbox2016/images/kkbox_headline_7.png);}

.detail .about p{
    color: #222;
    font-weight: bold;
    line-height: 2;
    width: 310px;
    margin: -10px 65px 0;}
	
.detail .cm {
	height: 715px;}
	
.detail .cm ul.cm_if{
    display: block;
    width: 835px;
    position: relative;
    margin: 0 auto;}
	
.detail .cm ul.cm_if li{
	display:block;
	padding:0;
	width:414px;
	height:290px;
	position:absolute;}
	
.detail .cm ul.cm_if li.cm_1{
	background: url(../../kkbox2016/images/cm_1.png) top center no-repeat;
	top:0;}
.detail .cm ul.cm_if li.cm_2{
	background: url(../../kkbox2016/images/cm_2.png) top center no-repeat;
	top:0;
	right: 0;}
.detail .cm ul.cm_if li.cm_3{
    background: url(../../kkbox2016/images/cm_3.png) top center no-repeat;
    top:300px;}
.detail .cm ul.cm_if li.cm_4{
	background: url(../../kkbox2016/images/cm_4.png) top center no-repeat;
	top:300px;
	right: 0;}
	
.detail .cm ul.cm_if li a{
	display:block;
	width:414px;
	height:240px;
	margin:0;
	padding:0;
	text-indent:-9999px;}
	
.detail .monst {
    background: url(../../kkbox2016/images/kkbox_monst_image.jpg) no-repeat;
    background-position:395px 80px;}
	
.detail .link {
    background: url(../../kkbox2016/images/kkbox_link_list.jpg) no-repeat;
    background-position: center 100px;}
.detail .link ul.banner{
	display: block;
    width: 860px;
    height: 130px;
    margin: -12px auto 0;
    padding: 0;
    position: relative;}
	
.detail .link ul.banner li{
	display: block;
    width: 240px;
    padding: 0;
    position: absolute;}
	
.detail .link ul.banner li.official{
	top: 0;
    left: 42px;}
.detail .link ul.banner li.youtube_bnr{
	top: 0;
    left: 311px;}
.detail .link ul.banner li.facebook{
	top: 0px;
    left: 578px;}
	
.detail .link ul.banner li a{
    display: block;
    width: 100%;
    height: 75px;
	cursor:pointer;}
	
.detail .anime{
	position: relative;
    height: 630px;}
	
.detail .anime p{
	position: absolute;
    width: 480px;
    top: 470px;
    left: 65px;
    margin: 0;}
	
.detail .anime a.bnr{
    background: url(../../kkbox2016/images/anime_bnr.jpg) no-repeat;
    background-size: 320px 100px;
    display: block;
    width: 320px;
    position: absolute;
    top: 475px;
    left: 560px;
    height: 50px;
    color: #222;
    font-weight: bold;
    padding: 110px 0 0;}
	
.detail .anime_if_sp{
	display:none;}
	
.detail .anime_if_pc{
	width: 560px;
    height: 315px;
    margin: 20px auto !important;
    padding: 5px !important;
    display: block;
    background: #FFF;
    border-radius: 8px;
    border: 3px solid #cdcdcd;}
	
.detail .anime_if_pc a, .anime_if_pc iframe{
	display:block;
	width:560px;
	height:315px;
	margin:0 auto;
	text-indent:-9999px;}
	
.detail .anime_if_pc a{
	background:url(../../kkbox2016/images/move_1.png) top center no-repeat;
	background-size:560px 315px;}


/*----otherlinks----*/
.otherlinks{
	width:240px;
	margin:0 auto 30px auto;}
	



/*----footer----*/
.footer{
	background:#e9e9e9;
	color:#ffffff;
	width:100%;
	padding:0 0 50px 0;
	text-align:center;}
	
.footercontents{
	width:100%;
	margin:90px auto 0;}

/*links*/
.footercontents ul.links{
	background:#eee;
	width:100%;
	margin:0 auto 50px !important;
	padding:0;
	text-align:center;}
.footercontents ul.links li{
	display:inline-block;
	margin:2em 0.5em 2em 0.5em;
	padding-right:1em;
	border-right:1px #bbbbbb solid;}
.footercontents ul.links li:last-child{
	padding-right:0;
	border-right:none;}
.footercontents ul.links li a{
	color:#222;
	text-decoration:underline;}
	
/*xflag*/
.footercontents p a{
	display:block;
    background: url(//xflag.com/tw/common/images/promotion_logo_xflag.png) top center no-repeat;
    background-size: 100%;
    width: 100px;
    height: 115px;
    margin: 40px auto 30px auto;
    text-indent: -9999px;}

/*address*/
.footercontents address{
	color:#222;
	font-size:12px;
	line-height:1.8em;}


/*----hz----*/
.hz{
	background:url(../../sf4/images/hz.jpg) center no-repeat;
	width:100%;
	height: 250px;
	margin:0 auto;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Layout_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
PluginOverride_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*---Fancybox_start---*/
#fancybox-outer{
	background:#000000 !important;}
#fancybox-content{
	border-color:#000000 !important;}



/*----Bxslider_start----*/
.lodingbox_optimize{
	position:relative;
	overflow:hidden;}
.library_optimize .loadingcontents{
	position:absolute;}
.library_optimize .bx-wrapper .bx-viewport{
	background:none !important;
	border:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	box-shadow:none !important;
	margin:0 0 0 5px !important;}
.library_optimize .bx-wrapper .bx-pager.bx-default-pager a:hover,
.library_optimize .bx-wrapper .bx-pager.bx-default-pager a.active{}
.bx-controls-direction{}
.bx-controls-direction:hover{
	display:block;}



/*ss*/	
.quest .library .library_optimize{
	width:900px;
	margin:25px auto 0 auto !important;}
	
.quest .library .library_optimize .bx-wrapper{
	margin:0 !important;
	padding:0 !important;}
	
.quest .library .library_optimize li{
	width:260px;
	padding:0 10px 0 10px;}
	
.library span{
	display:block;
	border:none;}
.library li:first-child span{}
.library img{
	-ms-filter:"alpha( opacity=50 )";
	filter:alpha( opacity=50 );
	opacity:0.5;
	width:278px;
	border:1px solid #be1a21;}
.library img:hover{
	-ms-filter:"alpha( opacity=100 )";
	filter:alpha( opacity=100 );
	opacity:1;}
	
.library .bx-pager .bx-default-pager,
.library .bx-pager-item{
	display:none !important;}

.library .bx-wrapper .bx-viewport{
	background:transparent;
	border:none;
	box-shadow:none;}
	
.library .bx-wrapper .bx-prev,
.library .bx-wrapper .bx-next{
	display:none;}
.library .bx-wrapper .bx-viewport,{
	background:none !important;
	border:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	box-shadow:none !important;
	margin:0 0 0 5px !important;}
.library .bx-wrapper .bx-pager.bx-default-pager a:hover,
.library .bx-wrapper .bx-pager.bx-default-pager a.active{
	background:#86e817 !important;}
.bx-controls-direction{}
.bx-controls-direction:hover{
	display:block;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PluginOverride_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/