@charset "UTF-8";/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
RESET_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
html{}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;}

table{
	border-collapse:collapse;
	border-spacing:0;}

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:normal;}

li{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;}

q:before,q:after{content:"";}

abbr,acronym{
	border:0;
	font-variant:normal;}

sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}

input,textarea,select{
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;}

input,textarea,select{
	*font-size:100%;}

legend{color:#000000;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　RESET_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
COMMONlayout_start
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*----basicsetting_start----*/
html{
    font-size:62.5%;}
body{
	background:#fff;
	color:#333;
    font-size:1.4rem; /*default14px*/
	line-height:2.3rem;
	font-family:Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif; /*ゴシックセット*/
	/*font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;*/ /*明朝セット*/
	text-align:left;
	-webkit-text-size-adjust:100%; /*viewport*/}
body{
	font-size:1.2rem; /*defaultOverRide*/
	line-height:1.8rem;
	word-wrap:break-word;
	word-break:break-all;}
/*----basicsetting_end----*/



/*----clear_start----*/
/*--clearfix--*/
.clearfix:after {
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;}
.clearfix {
	min-height:1px;}
* html .clearfix {
	height:1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/}
/*--clear--*/
.cf{
	clear:both;
	height:0;}
/*----clear_end----*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　COMMONlayout_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/






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



.contentswrapper{
	/*width:320px;*/
	margin:0 auto;
	padding:20px 0 0;
	overflow:hidden;}
	


/*----vis----*/
.vis{
	position:relative;
	text-align:center;
	width:100%;
	margin:0;}
.vis h1{
	background:url(../../kkbox2016/images/sp_kkbox_vis.png) top center no-repeat;
	background-size:900px 240px;
	height:240px;
	text-indent:-9999px;}



/*----download----*/
.download{
	position:relative;
	background:#fff url(../../kkbox2016/images/sp_kkbox_download.png) center top 10px no-repeat;
	background-size:250px 66px;
	width:250px;
	margin:-20px auto 0 auto;
	padding:80px 10px 10px  10px;
	border: 3px solid #c5151e;
    border-radius: 10px;}
.download a{
	position:absolute;
	top:48px;
	display:block;
	height:27px;
	text-indent:-9999px;
	outline:none;}
/*AppStore*/
.download .appstore a{
	left:10px;
	width:90px;}
/*GooglePlay*/
.download .googleplay a{
	left:102px;
	width:93px;}
/*Android APK*/
.download .androidapk a{
	left:198px;
	width:62px;}
	
.download .spec{
	color:#c5151e;
	font-size:0.8rem;
	width:250px;
	margin:0 auto;}
	
	
	
/*----gacha----*/
.gacha{
    background: #FFF url(../../kkbox2016/images/sp_kkbox_gacha.png) top center no-repeat;
	background-size:279px 243.5px;
	width:auto;
	height:243.5px;
	margin:50px auto 0;}
	
.gacha p{
	text-indent:-9999px;}



/*----kkbox_information----*/
.kkbox_information{
	background:#FFF;
	position:relative;
	width:100%;
	margin:50px auto 0;
	padding:0;}
	
.kkbox_information .about{
	position: relative;
    background: #e8e8e8 url(../../kkbox2016/images/kkbox_about_bg.gif) top center no-repeat;
	background-size:2200px 1098px;
    width: 100%;
	/*height:460px;*/
    margin: 0 auto;
    padding: 30px 0 0;}
	
.kkbox_information .about h3 {
	background:url(../../kkbox2016/images/kkbox_logo.png) top center no-repeat;
	background-size:128px 128px;
    text-indent: -9999px;
    width: 128px;
    height: 128px;
	margin: 0 auto;}
	
.kkbox_information .about p{
	/*text-indent: -9999px;*/
    width: 280px;
    margin: 20px auto 0;
    display: block;}

	
	
/*----present----*/
.present{
	background:#FFF url(../../kkbox2016/images/kkbox_bg_2.jpg) top center repeat-x;
	background-size:18px 433px;}
.present h2{
	background:url(../../kkbox2016/images/sp_kkbox_bg_title.png) top center no-repeat;
	background-size:900px 434px;
	width: 100%;
    height: 270px;
    margin: 0 auto;
    padding: 0;
    text-indent: -9999px;}
.present .about{
    background: #FFF;
    border: 3px solid #c5151e;
    border-radius: 10px;
    width: 294px;
    margin: 20px auto;
    padding: 0 0 40px;}
	
.present .about h3{
    display: block;
    width: 250px;
    height: 40px;
    margin: 35px auto 25px;
    text-indent: -9999px;
	background-size:445px 40px;
	background-position:left top;
    background-repeat: no-repeat;}
	
.present .about h3.headline_1{
	background-image:url(../../kkbox2016/images/sp_kkbox_headline_1.png);
	background-size:243px 80px;
    height: 80px;}
.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: 260px;
	margin:0 auto;}
	
.present .about p.dead{
    text-align: center;
    font-size: 20px;
    color: #b10f18;
    font-weight: bold;
    line-height: 1.6;
	padding:20px 0 0;}
	
.present .about p.id_search{
	padding-bottom:493px !important;
	background-image:url(../../kkbox2016/images/sp_id_search_way.png);
	background-repeat:no-repeat;
	background-size:262px 468px;
	background-position:center bottom;}
	
.present .about a.send_btn{
	background-image:url(../../kkbox2016/images/sp_kkbox_btn.png);
	background-position:center top;
	background-size:250px 47px;
	background-repeat:no-repeat;
	display:block;
	width:250px;
	height:47px;
	margin: 30px auto 0;
	text-indent:-9999px;}
	
.present .about a.send_btn_off{
	background-image:url(../../kkbox2016/images/sp_kkbox_btn_off.png);
	background-position:center top;
	background-size:250px 47px;
	background-repeat:no-repeat;
	display:block;
	width:250px;
	height:47px;
	margin: 30px auto 0;
	text-indent:-9999px;}
	
	
	
/*----event----*/
.event{
    height: 1460px;
    position: relative;
    background: #e70000;
    padding: 50px 0;
    margin: 50px 0 0;}
.event h2{
	background:url(../../kkbox2016/images/sp_kkbox_event_bg.png) top center no-repeat;
	background-size:900px 538px;
	width: 100%;
    height: 538px;
    margin: 0 auto;
    padding: 0;
    text-indent: -9999px;}
.event .about{
	background: url(../../kkbox2016/images/sp_kkbox_about_detail.png) top center no-repeat;
	background-size:360px 1181px;
    width: 100%;
    height: 1181px;
    margin: -250px auto;
    position: relative;}
	
.event .about a{
	position: absolute;
	text-indent:-9999px;
    top: 35px;
    left: 50%;
	margin:0 0 0 -96px;
    display: block;
    width: 193px;
    height: 193px;
    border-radius: 96px;
    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: 294px;
    margin: 20px auto;
    padding: 0 0 40px;}
	
.detail .about h3{
    display: block;
    width: 250px;
    height: 40px;
    margin: 20px auto 20px;
    text-indent: -9999px;
	background-size:445px 40px;
	background-position:left top;
    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: 260px;
    margin: 0 auto;}
	
.detail .cm {
	height: 955px;}
.detail .cm ul.cm_if{
    display: block;
    width: auto;
    position: relative;
    margin: 0 auto;}
.detail .cm ul.cm_if li{
    width: 250px;
    height: 195px;
    margin: 30px auto !important;
    padding: 0 !important;
    display: block;}
.detail .cm ul.cm_if li.cm_1{
	background: url(../../kkbox2016/images/cm_1.png) no-repeat;
	background-position:center -95px;}
.detail .cm ul.cm_if li.cm_2{
	background: url(../../kkbox2016/images/cm_2.png) no-repeat;
	background-position:center -95px;}
.detail .cm ul.cm_if li.cm_3{
    background: url(../../kkbox2016/images/cm_3.png) no-repeat;
	background-position:center -95px;}
.detail .cm ul.cm_if li.cm_4{
	background: url(../../kkbox2016/images/cm_4.png) no-repeat;
	background-position:center -95px;}

.detail .cm ul.cm_if li a{
	display:block;
	width:250px;
	height:144px;
	margin:0 auto;
	text-indent:-9999px;}
.detail .cm ul.cm_if li.cm_1 a{
	background: url(../../kkbox2016/images/sp_cm_1.png) top center no-repeat;
	background-size:250px 144px;}
.detail .cm ul.cm_if li.cm_2 a{
	background: url(../../kkbox2016/images/sp_cm_3.png) top center no-repeat;
	background-size:250px 144px;}
.detail .cm ul.cm_if li.cm_3 a{
    background: url(../../kkbox2016/images/sp_cm_2.png) top center no-repeat;
	background-size:250px 144px;}
.detail .cm ul.cm_if li.cm_4 a{
	background: url(../../kkbox2016/images/sp_cm_4.png) top center no-repeat;
	background-size:250px 144px;}
	
.detail .monst {}
.detail .about.monst p {
	padding-bottom:196px !important;
    background: url(../../kkbox2016/images/kkbox_monst_image.jpg) no-repeat;
	background-size:255px 186px;
    background-position: center bottom;}
	
.detail .link {
    background: url(../../kkbox2016/images/sp_kkbox_link_list.png) no-repeat;
    background-position: center top 80px;}
.detail .link ul.banner{
	display: block;
    width: 240px;
    height: 396px;
    margin: 0 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: 0px;
    left: 0px;}
.detail .link ul.banner li.youtube_bnr{
	top: 140px;
    left: 0px;}
.detail .link ul.banner li.facebook{
	top: 278px;
    left: 0px;}
	
.detail .link ul.banner li a{
    display: block;
    width: 100%;
    height: 75px;
	cursor:pointer;}
	
.detail .anime{
	position: relative;
    height: 580px;}
	
.detail .anime p{
	position: absolute;
    width: 250px;
    top: 250px;
    left: 20px;}
	
.detail .anime a.bnr{
	background: url(../../kkbox2016/images/anime_bnr.jpg) no-repeat;
    background-size: 240px 80px;
    display: block;
    width: 240px;
    position: absolute;
    top: 500px;
    left: 25px;
    height: 80px;
    text-indent: -9999px;}
	
.detail .anime_if_sp{
	display:none;}
	
.detail .anime_if_pc{
    width: 250px;
    height: 144px;
    margin: 30px auto !important;
    padding: 0 !important;
    display: block;}
	
.detail .anime_if_pc a, .anime_if_pc iframe{
	display:block;
	width:250px;
	height:144px;
	margin:0 auto;
	text-indent:-9999px;}
	
.detail .anime_if_pc a{
	background:url(../../kkbox2016/images/move_1.png) top center no-repeat;
	background-size:250px 144px;}


/*----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: 70px;
    height: 81px;
    margin: 25px auto 15px auto;
    text-indent: -9999px;}

/*address*/
.footercontents address{
	color:#222;
	font-size:1rem;
	line-height:1.8em;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　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;}
.bx-wrapper .bx-viewport{
	border:none;
	box-shadow:none;
	left:auto;}
.bx-controls-direction{
	display:none;}


/*ss*/	
.quest .library .library_optimize{
	width:130px;
	margin:15px auto 0 auto;}
	
.library .hideobj_left,
.library .hideobj_right{
	display:none;}
.library .bx-wrapper .bx-prev,
.library .bx-wrapper .bx-next{
	display:none;}

.library img{
	width:128px;
	border:1px solid #be1a21;}
	
.bx-wrapper .bx-pager.bx-default-pager a{
	background:#000;}

.library .bx-pager-link.active,
.library .bx-wrapper .bx-pager.bx-default-pager a:hover,
.library .bx-wrapper .bx-pager.bx-default-pager a.active {
	background:#FFF;}
	
.library .bx-wrapper .bx-pager {
	background:#be1a21;
	width:100px !important;
	height:10px;
	margin-left:15px !important;
	padding:5px 0 !important;

	/*border-radius*/	
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　PluginOverride_end
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/