@charset "utf-8";

/**
 *
 *  index
 *
 */

/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,
sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
img{border:0;vertical-align:top;}
em{font-style:italic;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:0;padding:0;}
input,select,textarea{font-family:inherit;font-style:inherit;font-weight:inherit;font-size:100%;margin:0;padding:0;vertical-align:middle;}
input:focus,textarea:focus,select:focus{outline:none;}


/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/
html{
	overflow-y: scroll;
}


/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/
body{
	min-width: 1000px;
	background: #d2f4fa;
	color: #fff;
	font-family: '游ゴシック',YuGothic,'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size: 12px;
	font-size: 75%\9;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
  body{font-size:75%;}
}

@media screen and (max-width:640px){
	body{
		min-width: 320px;
	}
}


/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/
a{
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:link,
a:visited{
	color:;
	text-decoration:;
}
a:hover{
	color:;
	text-decoration:;
	outline: none;
}
a:active{
	outline: none;
}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
#Page{
}
.inner{
	padding: 0 20px;
}

@media screen and (max-width:640px){
	.inner{
		padding: 0 10px;
	}
}

/*--------------------------------------------------------------------------
   Header
---------------------------------------------------------------------------*/
#Header{
	overflow: hidden;
}
#Header .logo{
	text-align: center;
}

.header-btn{
	display: none;
}

/* header-nav
-----------------------------------------------------------------*/
.header-nav{
	display: block;
	margin-top: 20px;
	padding: 0 20px;
}
.header-nav ul{
	overflow: hidden;
	width: 100%;
}
.header-nav li{
	float: left;
	width: 20%;
	height: 40px;
	text-align: center;
}
.header-nav a{
	display: block;
	background: #263238;
	color: #fff;
	font-size: 117%;
	text-decoration: none;
	line-height: 40px;
	transition: all .3s;
}
.header-nav a:hover{
	background: #212121;
	transform: scale(1.1);
}

.header-close{
	display: none;
}

@media screen and (max-width:640px){
	#Header .logo img{
		width: 100%;
		height: auto;
	}

	.header-btn{
		display: block;
		float: right;
		margin: 10px 10px 0 0;
	}
	.header-btn a{
		display: block;
		position: relative;
		width: 25px;
		height: 21px;
	}
	.header-btn span{
		display: inline-block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background: #fff;
	}
	.header-btn span:nth-child(1){
		top: 0;
	}
	.header-btn span:nth-child(2){
		top: 9px;
	}
	.header-btn span:nth-child(3){
		bottom: 0;
	}

	/* header-nav
	-----------------------------------------------------------------*/
	.header-nav{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background: rgba(38,50,56,.8);
	}
	.header-nav ul{
		box-sizing: border-box;
		padding: 20px;
	}
	.header-nav li{
		float: none;
		width: 100%;
		height: auto;
		border-bottom: 1px dashed #fff;
	}
	.header-nav a{
		padding: 20px 0;
		background: none;
		font-size: 12px;
		line-height: 1;
	}
	.header-nav a:hover{
		background: none;
		transform: scale(1);
	}

	.header-close{
		display: block;
		width: 100%;
	}
	.header-close a{
		display: block;
		width: 70%;
		margin: 0 auto;
		background: #263238;
		text-align: center;
	}
	.header-close a:hover{
		background: #263238;
	}
}

/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
#Footer{
}
#Footer .copyright{
	text-align: center;
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#Content{
	padding: 20px 0;
}

@media screen and (max-width:640px){
	#Content{
		padding: 10px 0;
	}
}


/*--------------------------------------------------------------------------
   Player
---------------------------------------------------------------------------*/
.player{
	background: #263238;
}
.player-inner{
	overflow: hidden;
	padding: 10px;
}

/* Display
-----------------------------------------------------------------*/
.disp{
	float: left;
	width: 65.3%;
}

/* disp-menu */
.disp-menu{
	height: 40px;
}
.disp-menu-list{
	overflow: hidden;
	height: 100%;
}
.disp-menu-item{
	float: left;
	width: 20%;
	text-align: center;
}
.disp-menu-item a{
	display: block;
	background: #3F51B5;
	line-height: 40px;
	color: #fff;
	font-size: 117%;
	text-decoration: none;
	transition: all .3s;
}
.disp-menu-item a:hover{
	background: #1A237E;
}
.disp-menu-item.is-active a{
	background: #000;
}

/* disp-main */
.disp-main{
	overflow: hidden;
	position: relative;
	height: 0;
	padding-top: 56.25%;
	background: #000;
}
.disp-item{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.disp-item.cyber{
	top: 0;
}
.disp-item.vlive,
.disp-item.fc2{
	top: -100%;
}

/* disp-tool */
.disp-tool{
	position: relative;
	height: 40px;
	background: #212121;
}
.disp-tool .twitter{
	margin-left: 5px;
	padding-top: 5px;
}

.disp-tool-list{
	display: table;
	position: absolute;
	top: 4px;
	right: 10px;
}
.disp-tool-item{
	display: table-cell;
	height: 40px;
	vertical-align: middle;
}
.disp-tool-item a{
	display: inline-block;
	width: 22px;
	height: 22px;
	transition: all .2s;
}
.disp-tool-item.type01 a{ background-image: url(../images/ico_reload.png);}
.disp-tool-item.type01 a:hover{	background-image: url(../images/ico_reload_on.png);}

/* Chat
-----------------------------------------------------------------*/
.chat{
	float: right;
	width: 34%;
	margin-left: 0.69%;
}
.chat-main{
	overflow: hidden;
	position: relative;
	height: 0;
	padding-top: 107.7%;
	padding-bottom: 80px;
}
.chat-item{
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}
.chat-item.irc{
	top: 0;
}


@media screen and (max-width:640px){
	.player-inner{
		padding: 5px;
	}

	/* Display
	-----------------------------------------------------------------*/
	.disp{
		float: none;
		width: 100%;
	}

	/* disp-menu */
	.disp-menu{
		height: 30px;
	}
	.disp-menu-item{
		width: 50%;
	}
	.disp-menu-item a{
		line-height: 30px;
		font-size: 10px;
	}

	/* disp-tool */
	.disp-tool{
		display: none;
	}

	/* Chat
	-----------------------------------------------------------------*/
	.chat{
		float: none;
		width: 100%;
		margin: 0;
	}
	.chat-main{
		padding-top: 50%;
		padding-bottom: 0;
	}
}


/*--------------------------------------------------------------------------
   Info
---------------------------------------------------------------------------*/
.info{
	overflow: hidden;
	margin-top: 30px;
}
.info-main{
	float: left;
	width: 65.3%;
	text-align: center;
}
.info-side{
	float: right;
	width: 34%;
	margin-left: 0.69%;
}

/* youtube */
#youtube{
}
.youtube-ttl{
	font-size: 150%;
}
#youtube ul{
	overflow: hidden;
	width: 100%;
	margin: 0 -1% 10px;
}
#youtube li{
	box-sizing: border-box;
	float: left;
	width: 23%;
	margin: 0 1%;
}
#youtube li a{
	color: #fff;
	transition: all .2s;
}
#youtube li a:hover{
	opacity: .8;
	text-decoration: none;
}
#youtube li img{
	width: 100%;
	height: auto;
}
#youtube li p{
	overflow: hidden;
	height: 65px;
	text-align: left;
}

/* info-main */
.info-list{
	overflow: hidden;
	width: 100%;
	margin-top: 20px;
}
.info-list li{
	float: left;
	width: 48%;
}
.info-list li + li{
	margin-left: 3%;
}
.info-list iframe{
	width: 100%;
}


.notice{
	text-align: right;
}
.notice li{
}
.notice a{
	color: #ef9a9a;
}
.notice a:hover{
	text-decoration: none;
}


@media screen and (max-width:640px){
	.info{
		margin-top: 15px;
	}
	.info-main{
		float: none;
		width: 100%;
	}
	.info-side{
		float: none;
		width: 100%;
		margin: 15px 0 0 0;
	}

	/* info-main */
	.info-list{
		margin-top: 15px;
	}
	.info-list li{
		float: none;
		width: 100%;
	}
	.info-list li + li{
		margin: 0;
	}
	.info-list iframe{
		box-sizing: border-box;
	}

	.youtube-ttl{
		font-size: 16px;
	}
	#youtube ul{
		margin: 0;
	}
	#youtube li{
		width: 50%;
		margin: 0;
	}
}

/*--------------------------------------------------------------------------
   Other
---------------------------------------------------------------------------*/

/* clearfix
-----------------------------------------------------------------*/
.cf:before,
.cf:after{
	content: "";
	display: table;
}
.cf:after{
	clear: both;
}
.cf{
	zoom: 1;
}