@charset "utf-8";
/* CSS Document */

#body_wrap {
	overflow:hidden;
}

.contents {
	overflow: hidden;
	margin: 0 auto 50px;
	padding: 0;
}

/* #dl-container
--------------------------*/

#dl-container {
	position:relative;
	width: 768px;
	margin: 0 auto;
	padding: 0;
}

.dl_btn_back {
	position: relative;
	width: 472px;
	left: -35px;
	margin: 0 auto;
}

.bnr-container {
	margin: 0 auto 20px;
	padding-top: 20px;
	text-align: center;
}

.appstore_btn,
.googleplay_btn {
	position: absolute;
	top: 5px;
}

.appstore_btn img,
.googleplay_btn img {
	height: 71px;
}

.appstore_btn {
	left: 220px;
}

.googleplay_btn {
	left: 426px;
}

.dl_spec_btn {
	position: absolute;
	top: 87px;
	left: 472px;
	width: 193px;
}

/* /#dl-container */

/* #news-tw
--------------------------*/

#news-tw {
	overflow: hidden;
	position: relative;
	padding-bottom: 20px;
}


/*-- .slide_bnr --*/

.slide_bnr {
	position: relative;
	width: 400px;
	margin:9px 0 0 30px;
}

.tw_widget {
	position: absolute;
	display: block;
	width: 285px;
	height: 202px;
	top: 9px;
	right: 20px;
	overflow:hidden;
}

.tw_title {
	margin:0 0 10px 0;
}

.tw_title_txt {
	position:relative;
	margin-top:2px;
	width:110px;
}

.atto_gunbit{
	position: absolute;
	width: 100px;
	top: 13px;
	right: 2px
}

.sliderTop {
	width: 90%;
	margin: 0 auto;
}

.slick-slide img {
	width: 100%;
	height: auto;
}

.sliderTop .slick-slide {
	margin: 10px;
}

.sliderTop .slick-slide a {
	outline: none;
}

ul.infoText li a {
	color:white;
}

ul.infoText li a:hover {
	background: rgba(255,255,255,0.1);
}

.news {
	position: relative;
	width: 440px;
	margin: 59px 0 0 17px;

}

.news_title{
	position: relative;
	width: 90px;
	top: 2px;
	left: 14px;
}

.news-list{
	margin-left: 11px;
	overflow: auto;
	height: 286px;
	margin:9px 0 0 14px;
}

.no_link {
	pointer-events:none;
}

ul.infoText li a.no_link:hover {
	background:none;
}


.news-dates{
	letter-spacing: 2px;
	font-size:14px;
}

ul.news_category{
	display: flex;
	display: -webkit-flex;
	position:relative;
	left:-10px;
}

ul.news_category li{
	font-size:13px;
	font-weight:bold;
	padding: 2px 10px;
	margin-right:7px;
	letter-spacing: 0.6px;
	border-bottom:none;
	pointer-events:none;
}

ul.news_category li:first-child{
	margin-right:0;
}

ul.news_category li.ymd {
	display:block;
	letter-spacing: 1px;
}

li.informationIcon{
	background-color: #fd962f;
}

li.eventIcon{
	background-color: #20ab61;
}

li.updateIcon{
	background-color: #1da1f2;
}

li.maintenanceIcon{
	background-color: #ff1491;
}

li.bitIcon{
	background-color: #00ad9c;
}


/* 旧カテゴリ スタイル ↓del */

span.category-label.event{
	background-color: #20ab61;
}

span.category-label.oshirase{
	background-color: #fd962f;
}

span.category-label.important{
	background-color: #e4486b;
}

span.category-label.maintenance{
	background-color: #4376d7;
}

span.category-label.update {
		background-color: #1da1f2;
}

span.category-label.bit {
	background-color: #00ad9c;
}

.category-label{
	font-weight: bold;
	letter-spacing: 0.6px;
}

span.category-label{
	padding: 2px 10px;
}

.news-dates{
	letter-spacing: 2px;
}

span.category-label{
	padding: 2px 10px;
	font-size:14px;
}

/*  旧カテゴリ スタイル ↑del */


ul.news_category li.active{
	display:block;
}

.infoText h4{
	font-size:115%;
	font-weight:bold;
	text-decoration:underline;
	margin: 6px 0 0 0;
}

.infoText a{
	font-weight:bold;
	text-decoration:none;
	padding:22px 9px 18px;
	display:block;
}

.infoText li{
	border-bottom: solid 0.1px;
	border-color: #e6e6e6;
}

ul.infoText li p{
	padding-left:9px;
}

.time{
	font-weight: bold;
	letter-spacing: 1.0px;
	font-size: 14px;
}

.news-dates{
	letter-spacing: 2px;
}

/* twitter widget customize */

.SandboxRoot{
	color:white !important;
	}

.timeline-Widget{
	background-color:rgba(0,0,0,0.30) !important;
}

.front_menu{
	position:absolute;
	z-index:100;
}

.modal_sp{
	display:none;
}

#movie-00{
    width: 21.5vw;
    cursor: pointer;
    height: 23vw;
    top: -5.5vw;
    position: relative;
}

.invisibleBox-01, .invisibleBox-02{
	width: 420px;
	height: 240px;
	position: absolute;
	top: -5px;
	left: -5px;
	z-index: 15;
}

#kv-fade{
	width:100%;
}

#kv-fade li{
	width:100%;
}

#kv-fade li img{
	width:100%;
}

#update-bnr01{
	text-align: center;
	padding: 25px 0 0;
	width: 700px;
}

#update-bnr02{
	text-align: center;
	padding: 30px 0 15px;
	width: 700px;
}

#update-bnr03{
	text-align: center;
	padding: 55px 0 75px;
	width: 700px;
}

#update-bnr03 img{
	border:solid 1px gray;
}

.top_howto {
	position:relative;
	padding-bottom: 60px;
}

.TopHowtoImg_01{
	position:relative;
	width:100%;
}

.tht-box-a {
	position:relative;
}

.tht-box-a::after {
	position: absolute;
	background: url("https://img-www.gunbit-game.com/wp-content/themes/gunbit_pc/img/home/tophowto_img_01_kabe.png") no-repeat;
	background-position: left;
	background-size: 785px;
	width: 768px;
	height: 385px;
	display: block;
	content: '';
	top: 0;
	z-index: 2;
}

.tht-box-b {
	position:relative;
}

.TopHowtoImg_01_kabe {
	width: 100%;
	left:0;
	max-width: inherit;
	position: absolute;
}

.TopHowtoImg_01-1 {
	position: relative;
	width: 435px;
	margin: 14px 0 0 20px;
	z-index: 11;
}

.TopHowtoImg_01-2 {
	position: absolute;
	width: 240px;
	top: 74px;
	left: 40px;
	z-index:13;
}

.TopHowtoImg_01-3 {
	position: relative;
	width: 550px;
	margin: 30px 0 0 180px;
	z-index: 12;
}

.TopHowtoMovie_01 {
	position: relative;
	margin: 52px 0 0 59px;
	height: 231px;
	overflow: hidden;
	width: 410px;
	z-index: 14;
}

.TopHowtoMovie_01 iframe {
	position: relative;
	height: 350px;
	top: -60px;
	width: 410px;
}

.moreBtn-h {
	position: relative;
	width: 96%;
	display: block;
	margin: 40px auto 0;
	border-bottom: solid 2px white;
	height: 38px;
	text-align:right;
	z-index: 11;
}

.moreBtn-h img {
	margin-right: 12px;
}

.TopHowtoImg_02{
	position:relative;
	width:100%;
}

.tht-box-c {
	position:relative;
	padding-bottom: 26px;
}

.tht-box-c::after {
	position: absolute;
	background: url("https://img-www.gunbit-game.com/wp-content/themes/gunbit_pc/img/home/tophowto_img_02_kabe.png") no-repeat;
	background-size: 768px;
	width: 768px;
	height: 590px;
	display: block;
	top: 80px;
	left: -120px;
	content: '';
	z-index: 2;
}


.TopHowtoImg_02_kabe{
	width: 100%;
	left: -130px;
	margin-bottom: 140px;
}

.TopHowtoImg_02-1 {
	position: relative;
	width: 375px;
	margin: 62px 0 0 363px;
	z-index: 11;
}

.TopHowtoMovie_02 {
	position: relative;
	margin: 97px 0 0 310px;
	overflow: hidden;
	z-index: 13;
}

.TopHowtoMovie_02 iframe {
	position: relative;
	width: 408px;
	height: 230px;
	top: 0;
}

.tht-box-d {
	position:relative;
}

.TopHowtoImg_02-2 {
	position: absolute;
	top: 160px;
	left: 69px;
	width: 110px;
	z-index: 13;
}

.TopHowtoImg_02-3 {
	position: absolute;
	top: 38px;
	left: 237px;
	width: 105px;
	z-index: 13;
}

.TopHowtoImg_02-4 {
	position: absolute;
	top: 181px;
	left: 443px;
	width: 230px;
	z-index: 13;
}

.TopHowtoImg_02-5{
	position: relative;
	margin: 5px 0 0 34px;
	width: 660px;
	z-index: 12;
}

.moreBtn-B{
	position: relative;
	display: block;
	border-bottom: solid 2px white;
	width: 96%;
	margin: 45px auto 0;
	text-align: right;
}

.moreBtn-B img{
	margin-right: 12px;
	width: 242px;
	margin-bottom: 15px;
	position: relative;
}


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

@media screen and (min-width: 768px) {

	.tht-box-a::after {
		width:960px;
		height:481px;
		background-size:960px 481px;
	}

}

@media screen and (min-width: 960px) {

	/* #dl-container  960↑
	--------------------------*/

	#kv{
    width: 100vw;
		height:46.482vw;
    margin: 80px auto 0;
	}

	#dl-container {
		width: 960px;
    margin: 0 auto;
		padding: 0 0 20px;
	}

	.dl_btn_back{
    position: relative;
    width: 700px;
    margin: 0 auto;
		padding: 0;
		left: 0;
	}

	.dl_btn_back img {
		width:596px;
	}

	.appstore_btn,
	.googleplay_btn {
		top: 5px;
	}

	.appstore_btn {
    left: 255px;
	}

	.appstore_btn img,
	.googleplay_btn img {
		max-width: inherit;
		height: 90px;
	}

	.googleplay_btn {
		left: 519px;
	}

	.dl_spec_btn{
    position: absolute;
    width: 240px;
    left: 582px;
    top: 105px;
	}

	.slide_bnr {
    width: 500px;
		margin: 11px 0 0 56px;
	}

	.news {
		width: 516px;
    margin: 0 0 0 43px;
	}

	.news-list {
		height:294px;
		margin:10px 0 0 14px;
	}

	ul.news_category li{
		font-size:14px;
	}

	.movie_area{
		width: 424px;
    height: 238.5px;
    display: block;
	}

	.tw_widget {
    display: table-cell;
    position: absolute;
    width: 300px;
		height: 253px;
    left: 620px;
    top: 10px;
	}

	.SandboxRoot.env-bp-min .timeline-ShowMoreButton{
		width:170px;
	}

	.tw_title_txt{
		width:102px
	}

	.atto_gunbit{
    width: 123px;
    top: 6px;
    right: 1px;
	}

	.tw_title{
		margin-bottom: 5px;
	}

	.tw_in{
		position:relative;
		top: 5px
	}


	.top_howto{
		position:relative;
		width: 960px;
	}

	.TopHowtoImg_01{

	}

	.tht-box-a::after {
    background-size: 1080px;
    width: 1080px;
    height: 541px;
	}

	.TopHowtoImg_01-1{
    width: 568px;
    margin: -26px 0 0 40px;
	}

	.TopHowtoMovie_01 {
		width: 540px;
    height: 302px;
    margin: 38px 0 18px 59px;
	}

	.TopHowtoMovie_01 iframe {
		position:relative;
		width:540px;
		height:420px;
	}

	.TopHowtoImg_01-2{
		width: 282px;
    top: 40px;
    left: 47px;
	}

	.TopHowtoImg_01-3{
    width: 652px;
		margin: 0 0 0 274px;
	}

	.top_howto_01_movie{
    top: 163px;
    left: 59px;
    height: 302px;
    overflow: hidden;
	}

	.top_howto_01_movie iframe{
    height: 420px;
    top: -59px;
    width: 540px;
	}

	.moreBtn-h{
    width: 90%;
    display: block;
    height: 30px;
    margin: 65px auto 0;
    border-bottom: 2px white solid;
}

	.moreBtn-h img{
		margin-right: 12px;
		width:155px;
	}

	.moreBtn-B{
    display: block;
    border-bottom: solid 2px white;
    height: 32px;
    width: 92%;
    margin: 0 auto 23px;
}

	.moreBtn-B img{
		margin-right: 12px;
		width:242px;
	}

	.tht-box-c {
		padding-bottom:17px;
	}

	.tht-box-c::after {
		width:930px;
		height:715px;
		background-size:930px 715px;
		top: 97px;
    left: -119px;
	}

	.TopHowtoImg_02{
		position:relative;
    margin-bottom: 68px;
	}

	.TopHowtoImg_02_kabe{
    width: 930px;
    max-width: inherit;
    position: relative;
    left: -120px;
    top: -18px;
    margin-bottom: 135px;
	}

	.TopHowtoImg_02-1{
		width: 467px;
    margin: 75px 0 0 462px;
	}

	.TopHowtoImg_02-2{
    position: absolute;
    top: 217px;
    left: 71px;
    width: 152px;
	}

	.TopHowtoImg_02-3{
    position: absolute;
    top: 60px;
    left: 307px;
    width: 133px;
	}

	.TopHowtoImg_02-4{
    top: 238px;
    left: 567px;
    width: 304px;
	}

	.TopHowtoImg_02-5{
		width: 867px;
	}

	.TopHowtoMovie_02{
		width:483px;
		height:272px;
    margin: 146px 0 0 402px;
	}

	.TopHowtoMovie_02 iframe{
    position: relative;
    left: 1px;
    height: 400px;
    width: 483px;
    top: -64px;
	}

	.TopHowtoMovie_02_01{
    position: absolute;
    top: 173px;
    right: -16px;
	}

	.TopHowtoMovie_02_01 .movie_wrap{
		overflow: hidden;
    width: 541px;
	}

	.TopHowtoMovie_02_01 iframe{
		position: relative;
    top: 0px;
    left: -59px;
    height: 271px;
	}

	.top_howto_02_movie_02{
    position: absolute;
    top: 130px;
    right: 376px;
	}

	.top_howto_02_movie_02 .movie_wrap{
    overflow: hidden;
    width: 543px;
	}

	.top_howto_02_movie_02 iframe{
		position: relative;
    top: 0px;
    left: -59px;
    height: 271px;
	}

	.top_howto_02_movie_03{
    position: absolute;
    top: 24px;
    right: -16px;
	}

	.top_howto_02_movie_03 .movie_wrap{
    overflow: hidden;
    width: 541px;
	}

	.top_howto_02_movie_03 iframe{
    position: relative;
    top: 0px;
    left: -57px;
    height: 271px;
	}

	.movie_wrap iframe {
		box-shadow:3px 3px 15px 8px rgba(0,0,0,0.7);
	}

  .invisibleBox-01, .invisibleBox-02{
    width: 550px;
    height: 310px;
    position: absolute;
	}

}