@charset "utf-8";
/* ==================================================================
CSS information
style info : INDEX
================================================================== */


/* --------------------------------------------------------
COMMON
-------------------------------------------------------- */
@media screen and (min-width: 641px) {
	.btn_ov a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block;}
	.btn_ov a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);}

	.btn_ov a { display: block; position: relative; overflow: hidden;}
	.btn_ov a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; background: rgba(255, 255, 255, 0.2); transition: all 0.3s; transform: scale(1, 0.1);}
	.btn_ov a:hover::after { opacity: 1; transform: scale(1, 1);}

}

/* --------------------------------------------------------
#contsLoad
-------------------------------------------------------- */
#contsLoad { position: relative; width: 100%; height: 100px; top: 0px; left: 0px; z-index: 900; }
#contsLoad.more { position: relative; height: 100px; display: block; background: #f00; }
#contsLoad_icon { position: absolute; top: 0px; left: 50%; width: 50px; height: 50px; margin-top: -0px; margin-left: -25px; text-align: center;  z-index: 901; perspective: 100px;}
#contsLoad_icon img { display: block; animation: nowloadingAnime 2s infinite linear both; backface-visibility: visible; }
/*#contsLoad { display: none; }*/
@keyframes nowloadingAnime {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(360deg); }
}



/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
#mainvisual { border-bottom: 1px solid #3c3c3c; position: relative; z-index: 1; }

#mainvisualList_bg { display: none;}
#mainvisualList {}
#mainvisualList li img { opacity: 0;}

#mainvisual .bx-wrapper { margin: 0 auto;}
#mainvisual .bx-wrapper .bx-pager { padding-top: 0;}
#mainvisual .bx-wrapper .bx-pager .bx-pager-item { width: calc(30/640*100%); padding-top: calc(30/640*100%); margin: 0 calc(10/640*100%); position: relative;}
#mainvisual .bx-wrapper .bx-pager.bx-default-pager a { border: 2px solid #626262; background: #000; position: absolute; top: 0; width: 100%; height: 100%; margin: 0; border-radius: 100px; }
#mainvisual .bx-wrapper .bx-pager.bx-default-pager a:hover,
#mainvisual .bx-wrapper .bx-pager.bx-default-pager a.active { background: #fff; border-color: #fff; }

#mainvisual .bx-wrapper .bx-pager,
#mainvisual .bx-wrapper .bx-controls-auto { bottom: 0; margin-bottom: calc(-16/640*100%); }

@media screen and (min-width: 641px) {
	#mainvisualList_bg { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
	
	#mainvisual { background: #0a0c13;}
	#mainvisualList { margin: 0 auto; }	
	#mainvisualList li { text-align: center;}
	#mainvisualList li a { display: block; text-align: center;}
	#mainvisualList li img { margin: 0 auto;}
	
	#mainvisual .bx-wrapper .bx-pager .bx-pager-item { width: calc(20/1280*100%); padding-top: calc(20/1280*100%); margin: 0 calc(10/1280*100%); position: relative;}
	#mainvisual .bx-wrapper .bx-pager.bx-default-pager a { border-width: 1px;}
	#mainvisual .bx-wrapper .bx-pager,
	#mainvisual .bx-wrapper .bx-controls-auto { margin-bottom: calc(-12/1280*100%); }

}

@media screen and (min-width: 1281px) {
	#mainvisualList_bg:not(.m00) { background-repeat: repeat-x; background-size: auto; }
	#mainvisual .bx-wrapper .bx-pager .bx-pager-item { width: 20px; padding-top: 20px; margin: 0 10px; }
	#mainvisual .bx-wrapper .bx-pager,
	#mainvisual .bx-wrapper .bx-controls-auto { margin-bottom: -12px; }
}
@media screen and (min-width: 1601px) {
}

/* --------------------------------------------------------
#contentsMain
-------------------------------------------------------- */
#contentsMain { padding-top: calc(100/640*100%); padding-bottom: calc(40/640*100%); background: rgba(22,22,22,0.8); }
.flexbox {}
@media screen and (max-width: 640px) {
#information ,
#twitter { margin-bottom: calc(80/580*100%);} 
}
@media screen and (min-width: 641px) {
	#contentsMain { padding-top: calc(80/1280*100%); padding-bottom: calc(40/1280*100%);}
	.flexbox { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
	
	#information ,
	#twitter { max-width: 600px; width: calc(600/1230*100%); margin-bottom: calc(40/1230*100%);}
	#lineup { max-width: 1230px; width: 100%;}
}
@media screen and (min-width: 1281px) {
	#contentsMain { padding-top: 80px; padding-bottom: 40px;}
}



/* #information
-------------------------------------------------------- */
#information { position: relative;}
#information h2 { width: 100%; margin-bottom: calc(40/580*100%);}
#information h2 img { width: calc(300/580*100%);}
#information .information_btn { width: calc(200/580*100%); margin: 0 auto;}
#information .information_btn a { background: #646464; display: block; border-radius: 6px; }

/* #information_list
-------------------------------------------------------- */
#information_list { }
#information_list article { width: 100%; padding-bottom: calc(30/640*100vw); margin-bottom: calc(30/640*100vw);}
#information_list article .articleInner { width: 100%; }
#information_list article a { display: block; position: relative; text-decoration: none; color: #fff; width: 100%; }

#information_list article .picBox { position: relative; }
#information_list article .textBox { position: relative; }
#information_list article .cate { width: calc(120/346*100%); border-width: 0 2px; border-style: solid; margin-bottom: calc(10/346*100%);}
#information_list article .cate.cno1 { background: #2f6ecc; border-color: #5b98f3;}
#information_list article .cate.cno2 { background: #aa1f49; border-color: #dd5880;}
#information_list article .cate.cno3 { background: #3c3cc1; border-color: #7171f4;}
#information_list article .cate.cno4 { background: #157087; border-color: #1db1d7;}
#information_list article .cate.cno5 { background: #b7781f; border-color: #e5a548;}
#information_list article .cate.cno6 { background: #61377a; border-color: #9759bc;}
#information_list article .text { line-height: 1.61; margin-bottom: calc(10/346*100%);}
#information_list article .date { color: #b4b4b4;}


@media screen and (max-width: 640px) {
#information .information_btn a { border-radius: 8px 4px; box-shadow:0px 3px 3px -3px #fff inset,0px -3px 1px -2px #000 inset; }
#information_list article { border-bottom: 1px solid #3c3c3c; }
#information_list article .articleInner { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; }
#information_list article .picBox { width: calc(214/580*100%); }
#information_list article .textBox { width: calc(346/580*100%); font-size: 1.3rem; }
}
@media screen and (min-width: 641px) {
	#information { }
	#information h2 { width: 100%; padding-bottom: calc(9/600*100%); margin-bottom: calc(20/600*100%);}
	#information h2 img { width: calc(148/600*100%);}
	#information .information_btn { position: absolute; top: 0; right: 0; width: calc(75/600*100%); margin-top: calc(-4/600*100%);}
	#information .information_btn a { background: #3c3c3c; display: block; border-radius: 3px;}

	#information_list { min-height: 200px;}
	#information_list article { max-width: 290px; width: calc(290/600*100%); padding-bottom: 0; margin-bottom: calc(20/1280*100vw);}
	#information_list article:last-child , #information_list article:nth-last-child(2) { margin-bottom: 0;}
	#information_list article { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between;}
	#information_list article .articleInner { border: 1px solid #3c3c3c; }
	#information_list article a { }
	
	#information_list article .textBox { padding: calc(15/288*100%) calc(20/288*100%); font-size: calc(14/1280*100vw); }
	#information_list article .cate { width: calc(80/248*100%); margin-bottom: calc(16/248*100%);}
	#information_list article .text { line-height: 1.61; margin-bottom: 0;}
	#information_list article .date { position: absolute; top: 0; right: calc(20/288*100%); margin-top: calc(15/288*100%); font-size: 1.2rem;}

	#information_list article a::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: transparent; border: 1px solid #3c3c3c; opacity: 0;}
	#information_list article a::before { -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; }
	#information_list article a:hover::before { background: #3c3c3c; opacity: 1;}
	#information_list article a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; }
	#information_list article a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);}

	#information_list article .mfpYt .picBox::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; 
		background: rgba(0,0,0,0.5) url(../_common/img/icon_play.svg) center center no-repeat; background-size: 30%; opacity: 0;}
	#information_list article .mfpYt:hover .picBox::after { opacity: 1;}

}
@media screen and (min-width: 1281px) {
	#information_list article { margin-bottom: 20px;}
	#information_list article .textBox { font-size: 1.4rem;}
}





/* #twitter
-------------------------------------------------------- */
#twitter { position: relative;}
#twitter h2 { width: 100%; margin-bottom: calc(30/580*100%);}
#twitter h2 img { width: calc(390/580*100%);}
#twitter .twitter_btn { width: calc(200/580*100%); margin: 0 auto;}
#twitter .twitter_btn a { background: #1c94e0; display: block; border-radius: 6px; }

@media screen and (max-width: 640px) {
#twitter .twitter_btn a { border-radius: 8px 4px; box-shadow:0px 3px 3px -3px #fff inset,0px -3px 1px -2px #000 inset; }
#twitter .twitter_box { position: relative; margin-bottom: calc(20/580*100%);}
/* #twitter .twitter_box iframe { min-height: 300px!important; height: 300px!important; min-width: 100%!important; width: 640px!important; max-width: 100%!important;} */
#twitter .twitter_box { height: 300px; overflow-y: auto; }
}
@media screen and (min-width: 641px) {
	#twitter { }
	#twitter h2 { width: 100%; padding-bottom: calc(9/600*100%); margin-bottom: calc(20/600*100%);}
	#twitter h2 img { width: calc(318/600*100%);}

	#twitter .twitter_btn { position: absolute; top: 0; right: 0; width: calc(85/600*100%); margin-top: calc(-4/600*100%);}
	#twitter .twitter_btn a { border-radius: 3px;}

	/* #twitter .twitter_box { overflow: hidden; position: relative; height: 100%;} */
	#twitter .twitter_box { overflow-y: auto; position: relative; height: 100%;}
	#twitter .twitter_box iframe { height: 100%;}

}
@media screen and (min-width: 1281px) {
	#twitter { margin-bottom: 40px; }
}



/* #lineup
-------------------------------------------------------- */
#lineup { position: relative;}
#lineup h2 { width: 100%; margin-bottom: calc(30/580*100%);}
#lineup h2 img { width: calc(172/580*100%);}

#lineup_list { width: 100%; }
#lineup_list .lineup_list_block { border: 1px solid #000; width: 100%; padding-bottom: calc(25/580*100%); margin-bottom: calc(20/580*100%); }
#lineup_list .lineup_list_block .btn { width: calc(524/580*100%); margin: 0 auto;}
#lineup_list .lineup_list_block .btn a { display: block; background: #000; border-radius: 8px 4px; box-shadow:2px 3px 3px -3px #fff inset,0px -3px 3px -3px #000 inset; border: 1px solid #000;}

#lineup_list .bx-wrapper { margin: 0 auto calc(60/580*100%);}
#lineup_list .bx-wrapper .bx-controls { padding-top: 0%;}
#lineup_list .bx-wrapper .bx-pager { padding-top: 0; }
#lineup_list .bx-wrapper .bx-pager .bx-pager-item { width: calc(30/580*100%); padding-top: calc(30/580*100%); margin: 0 calc(10/580*100%); position: relative;}
#lineup_list .bx-wrapper .bx-pager.bx-default-pager a { border: 2px solid #626262; background: #000; position: absolute; top: 0; width: 100%; height: 100%; margin: 0; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }
#lineup_list .bx-wrapper .bx-pager.bx-default-pager a:hover,
#lineup_list .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; }

#lineup_list .bx-wrapper .bx-pager,
#lineup_list .bx-wrapper .bx-controls-auto { bottom: -4.6875%; }


#lineup_list #kh3 .bx-wrapper .bx-pager.bx-default-pager a:hover,
#lineup_list #kh3 .bx-wrapper .bx-pager.bx-default-pager a.active { background: #3e5990; border-color: #3e5990; }
#lineup_list #kh3.lineup_list_block { 
background: -webkit-linear-gradient(top, rgba(5,13,23,1) 0%,rgba(11,21,40,1) 60%,rgba(18,30,58,1) 100%); 
background: linear-gradient(to bottom, rgba(5,13,23,1) 0%,rgba(11,21,40,1) 60%,rgba(18,30,58,1) 100%); 
}
#lineup_list #kh3.lineup_list_block .btn a { background: #3e5990; }

#lineup_list #khhd_fcp .bx-wrapper .bx-pager.bx-default-pager a:hover,
#lineup_list #khhd_fcp .bx-wrapper .bx-pager.bx-default-pager a.active { background: #9e2d5f; border-color: #9e2d5f; }
#lineup_list #khhd_fcp.lineup_list_block { 
background: -webkit-linear-gradient(top, rgba(23,5,15,1) 0%,rgba(40,11,26,1) 60%,rgba(58,17,37,1) 100%);
background: linear-gradient(to bottom, rgba(23,5,15,1) 0%,rgba(40,11,26,1) 60%,rgba(58,17,37,1) 100%);
}
#lineup_list #khhd_fcp.lineup_list_block .btn a { background: #9e2d5f; }

#lineup_list #khhd1_2 .bx-wrapper .bx-pager.bx-default-pager a:hover,
#lineup_list #khhd1_2 .bx-wrapper .bx-pager.bx-default-pager a.active { background: #90873e; border-color: #90873e; }
#lineup_list #khhd1_2.lineup_list_block { 
background: -webkit-linear-gradient(top, rgba(24,21,6,1) 0%,rgba(43,40,12,1) 60%,rgba(61,54,20,1) 100%);
background: linear-gradient(to bottom, rgba(24,21,6,1) 0%,rgba(43,40,12,1) 60%,rgba(61,54,20,1) 100%);
}
#lineup_list #khhd1_2.lineup_list_block .btn a { background: #90873e; }

#lineup_list #kh_mom .bx-wrapper .bx-pager.bx-default-pager a:hover,
#lineup_list #kh_mom .bx-wrapper .bx-pager.bx-default-pager a.active { background: #9b978e; border-color: #9b978e; }
#lineup_list #kh_mom.lineup_list_block { 
background: -webkit-linear-gradient(top, rgba(34,33,32,1) 0%,rgba(52,51,49,1) 60%,rgba(84,83,81,1) 100%);
background: linear-gradient(to bottom, rgba(34,33,32,1) 0%,rgba(52,51,49,1) 60%,rgba(84,83,81,1) 100%);
}
#lineup_list #kh_mom.lineup_list_block .btn a { background: #959084; }

@media screen and (max-width: 640px) {
}
@media screen and (min-width: 641px) {
	#lineup { }
	#lineup h2 { width: 100%; padding-bottom: calc(9/1230*100%); margin-bottom: calc(20/1230*100%);}
	#lineup h2 img { width: calc(85/1230*100%);}

	#lineup_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
	#lineup_list .lineup_list_block { max-width: 290px; width: calc(290/1230*100%); padding-bottom: calc(14/1230*100%); margin-bottom: 0; }
	#lineup_list .lineup_list_block { padding-bottom: calc(14/1280*100vw); }
	#lineup_list .lineup_list_block .btn { width: calc(260/290*100%); margin: 0 auto;}
	#lineup_list .lineup_list_block .btn a { border-radius: 8px 4px; }
}
@media screen and (min-width: 1281px) {
	#lineup_list .lineup_list_block { padding-bottom: 14px; }
}