@charset "utf-8";
/*--------------------------------------------------
	common
--------------------------------------------------*/
.imgsp{
	overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/*--------------------------------------------------
	レイアウト
--------------------------------------------------*/
html, body {
	background-color:#000000;
}
body{
	position: relative;
}

#wrapper{
	background-color:#000000;
	overflow: hidden;
}
#wrapper,
#visual,
#portalbar,
.footer.footer_s,
.footer .inner{
	min-width: 1100px !important;
}

#wrapper .block{
	position: relative;
	background-size: cover;
	width: 100%;
}
#wrapper .block .inner{
	position: relative;
	width: 1100px;
	margin: auto;
	text-align: center;
	box-sizing: border-box;
}

/*--------------------------------------------------
	ビジュアル
--------------------------------------------------*/

#visual{
	width: 100%;
	height: 1500px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

#visual .box01,
#visual .box02,
#visual .box03,
#visual .box04,
#visual .box05,
#visual .box06{
	overflow: hidden;
	background-color: #242121;
}

#visual .box01{
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#visual .box02{
	width: 25%;
	height: 50%;
	position: absolute;
	top: 0;
	left: 50%;
}

#visual .box03{
	width: 25%;
	height: 50%;
	position: absolute;
	top: 0;
	right: 0;
}

#visual .box04{
	width: 17%;
	height: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
}

#visual .box05{
	width: 17%;
	height: 50%;
	position: absolute;
	top: 50%;
	left: 67%;
}

#visual .box06{
	width: 16%;
	height: 50%;
	position: absolute;
	top: 50%;
	right: 0%;
}

#visual .outbox,
#visual .middlebox,
#visual .inbox{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition-property: all;
	/*transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);*/
}

#visual .box01 .outbox,
#visual .box02 .outbox,
#visual .box03 .outbox{
	left: -50%;
	transition-duration: .4s;
}

#visual .box01 .middlebox,
#visual .box02 .middlebox,
#visual .box03 .middlebox{
	left: -35%;
	transition-duration: .4s;
}

#visual .box01 .inbox,
#visual .box02 .inbox,
#visual .box03 .inbox{
	left: 50%;
	transition-duration: .4s;
}

#visual .box04 .outbox,
#visual .box05 .outbox,
#visual .box06 .outbox{
	left: 50%;
	transition-duration: .4s;
}

#visual .box04 .middlebox,
#visual .box05 .middlebox,
#visual .box06 .middlebox{
	left: 35%;
	transition-duration: .4s;
}

#visual .box04 .inbox,
#visual .box05 .inbox,
#visual .box06 .inbox{
	left: -50%;
	transition-duration: .4s;
}

#visual .box01 .outbox,
#visual .box01 .inbox{
	transition-delay: 0s;
}

#visual .box02 .outbox,
#visual .box02 .inbox{
	transition-delay: .05s;
}

#visual .box03 .outbox,
#visual .box03 .inbox{
	transition-delay: .1s;
}

#visual .box04 .outbox,
#visual .box04 .inbox{
	transition-delay: .15s;
}

#visual .box05 .outbox,
#visual .box05 .inbox{
	transition-delay: .2s;
}

#visual .box06 .outbox,
#visual .box06 .inbox{
	transition-delay: .25s;
}

#visual .bg{
	position: relative;
	background-size: cover !important;
	width: 100%;
	height: 100%;
}
#visual .box02 .bg::after,
#visual .box03 .bg::after{
	position: absolute;
	top: 0;
	left: 10px;
}
#visual .box01 .bg{
	background: url(../../../../../images/member/update/2018/2/header/box01/bg.jpg) no-repeat center top;
}
#visual .box02 .bg{
	background: url(../../../../../images/member/update/2018/2/header/box02/bg.jpg) no-repeat center center;
}
#visual .box02 .bg::after{
	content: url(../../../../../images/member/update/2018/2/header/box02/mark.png);
}
#visual .box03 .bg{
	background: url(../../../../../images/member/update/2018/2/header/box03/bg.jpg) no-repeat center top;
}
#visual .box03 .bg::after{
	content: url(../../../../../images/member/update/2018/2/header/box03/mark.png);
}
#visual .box04 .bg{
	background: url(../../../../../images/member/update/2018/2/header/box04/bg.jpg) no-repeat center top;
}
#visual .box05 .bg{
	background: url(../../../../../images/member/update/2018/2/header/box05/bg.jpg) no-repeat center top;
}
#visual .box06 .bg{
	background: url(../../../../../images/member/update/2018/2/header/box06/bg.jpg) no-repeat center top;
}


#visual .box01 .bg h1{
	background: url(../../../../../images/member/update/2018/2/header/box01/main_ttl.png) no-repeat center top;
	background-size: contain;
	width: 100%;
	padding-top: 254px;
}
/* ブレンドモード ソフトライト*/
/* Firefox Chrome .soft-light */
/* IE .no-soft-light */
.soft-light {
	mix-blend-mode: soft-light;
	opacity:1 !important;
}
.no-soft-light {opacity: 0.15;}

#visual .box01 .bg h1 img{
	max-width: 100%;
	height: auto;
}

#visual .box01 .bg .chara{
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: url(../../../../../images/member/update/2018/2/header/box01/img_fighter.png) no-repeat center bottom;
}

#visual .box01 ul{
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
#visual .box01 ul li{
	position: relative;
	padding: 23px 18px;
}
#visual .box01 ul li:first-of-type::after{
	content: "";
	position: absolute;
	top: 24px;
	right: 0;
	width: 1px;
	height: 32px;
	background-color: rgba(255,255,255,0.1);
}

#visual .box01 ul li a{
	opacity: 0.4;
	transition: opacity .3s ease-out;
}
#visual .box01 ul li a:hover{
	opacity: 1;
}
#visual .box01 ul li a img{
	max-width: initial !important;
}



#visual .bg img{
	position: relative;
	max-width: 100%;
	height: auto;
}

#visual > div:nth-of-type(n + 2) a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	padding: 0 2%;
	box-sizing: border-box;
}
#visual > div:nth-of-type(n + 2) a::before,
#visual > div:nth-of-type(n + 2) a::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#visual > div:nth-of-type(n + 2) a::after{ /* ホバー時スクリーン */
	transform: translateX(-100%);
	z-index: 1;
	transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
#visual > div:nth-of-type(n + 2) a:hover::after{ /* ホバー時スクリーン */
	transform: translateX(0);
}

#visual .box02 a{
	align-items: center !important;
}
#visual .box02 a::after{
	background-color: rgba(168,3,85,0.5);
}

#visual .box03 a{
	padding-bottom: 22px !important;
}
#visual .box03 a::before{
	background: linear-gradient(to bottom, rgba(255,132,19,0) 50%,rgba(246,86,26,1) 80%,rgba(240,55,30,1) 100%);
}
#visual .box03 a::after{
	background-color: rgba(250,117,17,0.5);
}

#visual .box04 a{
	padding-bottom: 40px !important;
}
#visual .box04 a::before{
	background: linear-gradient(to bottom, rgba(26,31,101,0) 0%,rgba(26,31,101,0) 40%,rgba(26,31,101,1) 75%,rgba(26,31,101,1) 100%);
}
#visual .box04 a::after{
	background-color: rgba(24,27,87,0.5);
}

#visual .box05 a{
	padding-bottom: 40px !important;
}
#visual .box05 a::before{
	background: linear-gradient(to bottom, rgba(14,88,135,0) 0%,rgba(14,88,135,0) 40%,rgba(14,88,135,1) 75%,rgba(14,88,135,1) 100%);
}
#visual .box05 a::after{
	background-color: rgba(5,83,136,0.5);
}

#visual .box06 a{
	padding-bottom: 19px !important;
}
#visual .box06 a::before{
	background: linear-gradient(to bottom, rgba(232,38,84,0) 0%,rgba(232,38,84,0) 40%,rgba(232,38,84,0.8) 75%,rgba(232,38,84,1) 100%);
}
#visual .box06 a::after{
	background-color: rgba(222,38,82,0.5);
}


/* グラデーション */
#visual .box01 .bg .grada{
	background: linear-gradient(to bottom, rgba(50,31,28,0) 0%,rgba(50,31,28,0) 60%,rgba(50,31,28,1) 100%);
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/*--------------------------------------------------
	ビジュアル アニメーション
--------------------------------------------------*/

#visual .outbox.on,
#visual .middlebox.on,
#visual .inbox.on{
	opacity: 1;
	left: 0;
}


/*--------------------------------------------------
	各コンテンツ　リンクボタン
--------------------------------------------------*/
.btn{
	margin: auto;
	box-sizing: border-box;
}
.btn img{
	opacity: 0;
	transition: opacity .3s ease-out;
}
.btn:hover img{
	opacity: 1;
}

/*--------------------------------------------------
	block01
--------------------------------------------------*/
#block01{
	background: url(../../../../../images/member/update/2018/2/con01/bg.jpg) no-repeat center top;
	height: 980px;
}
#block01::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url(../../../../../images/member/update/2018/2/con01/line.png) no-repeat center -146px;
	width: 100%;
	height: 100%;
}


#block01 .inner{
	padding-top: 96px;
}

#block01 .lead{
	margin: 10px 0 35px;
}

#preview_voice,
#preview_voice .btn_voice{
	display: flex;
	justify-content: center;
	align-items: center;
}
#preview_voice .btnV_box{
	width: 340px;
	height: 222px;
	margin-top: -40px;
	padding-top: 20px;
	box-sizing: border-box;
}
#preview_voice .extra9{
	background: url(../../../../../images/member/update/2018/2/con01/bg_extra9.png) no-repeat center top;
}
#preview_voice .extra10{
	background: url(../../../../../images/member/update/2018/2/con01/bg_extra10.png) no-repeat center top;
}

#preview_voice .btnV_box dt{
	margin-bottom: 18px;
}

#preview_voice .btn_voice li{
	margin: 0 6px;
}
#preview_voice .btn_voice li a{
	opacity: 0.3;
	transition: opacity .3s ease-out;
}
#preview_voice .btn_voice li a.on,
#preview_voice .btn_voice li a:hover{
	opacity: 1;
}

#preview_voice .cv{
	margin: 0 -10px;
}


#block01 .dsc{
	margin-top: -65px;
}

#block01 .btn{
	background: url(../../../../../images/member/update/2018/2/con01/btn_off.png) no-repeat center top;
	width: 468px;
	height: 78px;
	padding-top: 6px;
}


/*--------------------------------------------------
	block02
--------------------------------------------------*/
#block02{
	background: url(../../../../../images/member/update/2018/2/con02/bg.jpg) no-repeat center top;
	height: 800px;
}
#block02::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../../../../../images/member/update/2018/2/con02/grad.png) no-repeat center top;
	width: 100%;
	height: 236px;
}

#block02 .inner{
	height: 100%;
	padding-top: 90px;
}

#block02 .chr{
	position: absolute;
	bottom: 0;
	left: -65px;
	width: 1395px;
	height: 574px;
}
#block02 .chr .blur{
	background: url(../../../../../images/member/update/2018/2/con02/chr_blur.png) no-repeat -29px 10px;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
}
#block02 .chr .blur.no-multiply{
	display: none;
}

#block02 .chr .img{
	position: absolute;
	bottom: 0;
}


#block02 .btn{
	position: relative;
	background: url(../../../../../images/member/update/2018/2/con02/btn_off.png) no-repeat center top;
	width: 390px;
	height: 116px;
	margin-top: 250px;
	z-index: 1;
}


/*--------------------------------------------------
	block03
--------------------------------------------------*/
#block03{
	background: url(../../../../../images/member/update/2018/2/con03/bg.jpg) no-repeat center top;
	height: 830px;
}

#block03 .inner{
	padding: 58px 52px 0;
	text-align: left !important;
}

#block03 .board{
	background: url(../../../../../images/member/update/2018/2/con03/board.png) no-repeat center top;
	width: 815px;
	height: 556px;
	margin: 10px 0 5px -5px;
	padding: 46px 71px;
	box-sizing: border-box
}
#block03 .board p:nth-child(n + 2){
	margin: 30px 0 0 -40px;
}

#block03 .boss{
	position: absolute;
	top: 0;
	right: -800px;
	background: url(../../../../../images/member/update/2018/2/con03/boss.png) no-repeat center top;
	width: 1303px;
	height: 830px;
}

#block03 .btn{
	background: url(../../../../../images/member/update/2018/2/con03/btn_off.png) no-repeat center top;
	width: 260px;
	height: 54px;
	margin-left: -2px;
}


/*--------------------------------------------------
	block04
--------------------------------------------------*/
#block04{
	background: url(../../../../../images/member/update/2018/2/con04/bg.jpg) no-repeat center top;
	height: 1325px;
}

#block04 .inner{
	padding-top: 60px;
}

#block04 .lead{
	margin: 25px 0 40px;
}

#block04 .table{
	width: 1000px;
	margin: auto;
	text-align: left;
}

#block04 .note{
	margin: -15px  120px 60px 0;
	text-align: right;
	color: #fff;
	font-size: 11px;
}

#block04 .btn{
	background: url(../../../../../images/member/update/2018/2/con04/btn_off.png) no-repeat center top;
	width: 386px;
	height: 109px;
}


/*--------------------------------------------------
	block05
--------------------------------------------------*/
#block05{
	background-color: #e71f4e;
	background: linear-gradient(270deg, #e71f4e, #f38b1e, #a6dc2a, #26e48d, #3496ea, #a334e8,#e71f4e,#f38b1e,#a6dc2a, #26e48d, #3496ea, #a334e8);
	background-size: 600% 600% !important;
	height: 1860px;
	animation: bg_gradient 120s linear infinite;
}
#block05::before{
	content: "";
	position: absolute;
	bottom: 130px;
	width: 100%;
	height: 900px;
	transform: skewY(-10deg);
	background-color: rgba(255,255,255,0.1);
}

@keyframes bg_gradient { 
	0%,
	100%{
		background-position:0% 51%
	}
	50%{
		background-position:100% 50%
	}
}


#block05 .inner{
	padding-top: 64px;
}

#block05 .inner > div:first-of-type{
	margin-bottom: 72px;
}

#block05 .slider{
	width: 1000px;
	margin: auto;
}

#block05 .inner > div:first-of-type .lead{
	margin: 30px 0 42px;
}
#block05 .inner > div:nth-of-type(2) .lead{
	margin: -117px 168px 50px 0;
	text-align: right;
}

#block05 .btn{
	background: url(../../../../../images/member/update/2018/2/con05/btn_off.png) no-repeat center top;
	width: 360px;
	height: 80px;
	margin-top: 60px;
}


/*----------------------------------------------------------------------------
 slick
----------------------------------------------------------------------------*/
.slick-slide{
	
	outline: none;
}
.slick-slide img{
	margin: auto;
}

/* 矢印 */
.slick-next,
.slick-prev{
	position: absolute;
	top: 40%;
	width: 4%;
	width: 54px;
	z-index: 1;
	transition: opacity .3s ease-out;
}
.slick-prev{
	left: 0;
}
.slick-next{
	right: 0;
}
.slick-next:hover,
.slick-prev:hover{
	opacity: 0.8;
}
.slick-next.slick-disabled,
.slick-prev.slick-disabled{
	cursor: default;
	opacity: 0.1;
	pointer-events: none;
}

/* ナビ */
.nav-dots{
	text-align: center;
	display: flex;
	justify-content: center;
	margin-top: 30px
}

.nav-dots li{
	margin: 0 7.5px;
}
.nav-dots li button{
	position: relative;
	text-indent: -9999px;
	width: 40px;
	height: 6px;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	appearance: none;
	 -webkit-appearance: none;
}
.nav-dots li button::before{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.1);
	cursor: pointer;
}
.nav-dots li button:hover::before{
	opacity: 0.8;
}
.nav-dots li.slick-active button::before{
	background-color: #fff;
}


/*--------------------------------------------------
	TOPへ戻る
--------------------------------------------------*/
#btn_top{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 86px;
	height: 86px;
	display: none;
	z-index: 10;
}
#btn_top a{
	display: block;
	background: url(../../../../../images/member/update/2018/2/btn_top_off.png) no-repeat center top;
	width: 86px;
	height: 86px;
	backface-visibility: hidden;
}

/*--------------------------------------------------
	footer
--------------------------------------------------*/
.footer.footer_s{
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: transparent!important;
	color: #fff !important;
}
.footer.footer_s a{
	color: #fff !important;
}