@charset "utf-8";
/* ========================================

	SERVICE CSS

	--------------------
	LSN
	-------------------
	   
========================================== */

/* webfont
--------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Nixie+One');
@import url('https://fonts.googleapis.com/css?family=Bungee+Hairline|Megrim|Raleway+Dots|Unica+One');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');


/* base
============================== */
html, body{ background:#FFF; }

#home #membersContent li .tit,
#home #membersContent .spsiteInfo .title,
.pageTit::before,
header #gnav li a,
.sectionTit,
#home #topInfoArea #txtBnr dt,
#home #topInfoArea .box dt,
.btn .more:before{ font-family: 'Unica One', cursive; letter-spacing:-0.02em; }

.cat,
.date,
.up::after,
#pageTop a ::before{
	font-family: 'Unica One', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo;
	font-size:13px;
}

.up::after{ background:#F85658; border-radius:2px; font-size:13px; }
#home #topInfoArea #latestNews,
#home #topInfoArea #nextLive{ width:300px; margin-bottom: 15px; }

#bnr ul{ text-align:left; }
#home #topics #bnr li{ margin-bottom:40px; }
#home #topics #bnr li:last-child{ margin:0; }

.discList .thumb{ border: solid 1px #DDD; }

/* layout
============================== */

#home #topInfoArea .box{ background:transparent; border:solid 1px #000;	 }
#home #topInfoArea .box a{ color:#000; padding:20px; background:rgba(255,255,255,0.9); }
#home #membersContent{ background:#000; }
#home #topInfoArea .box .date{ margin-bottom:0; }
#home #topInfoArea .box#latestNews dt::before,
#home #topInfoArea .box#nextLive dt::before{ font-size:30px; }
#home #topInfoArea{ width: 310px; display:block; bottom:10px; }

#home #topYouTube{ bottom:60px; }
#home section:nth-child(odd){ background:#151515; }
#home section:nth-child(even){ background:#FFF; }
#home #membersContent .spsiteInfo{ border-color:#666; }

#pageTop a ::before{ font-size:15px; color:#737373; }
#pageTop a::after{ font-size:15px; position: absolute; top: -1.2px; color:#737373; }

footer{ background:#000; }
.pageTit::before{ font-size:80px; }
.detail{ padding-top:0; }
.back a{ padding:0 5px; }
.back a::after{ height:1px; bottom:0; }
.back a::before,
.nodata::after{ font-family: 'Unica One', cursive; }

.catList li a{ font-size:22px; font-family: 'Unica One', cursive; }

#news #wrap,#media #wrap,#live #wrap{
	/*background: url(/image/top/bg_white.jpg) repeat center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;*/
	background:#FFF;
}

/*
#live #wrap{
	background:#000;
	/*background: url(/image/top/bg.jpg) repeat center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	color:#FFF;
}
*/

/* loading */

#loading {
	width:100%;
	height:100%;
	background:#000;
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	margin: 0;
}
#loading .bar {
	width: 30%;
	height: 1px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #333;
}
#loading .bar span { display:block; width:0; height: 1px; background: #fff; }
#loading .percent {
	width:100%;
	color:#999;
	text-align:center;
	font-size:11px;
	padding-top:30px;
	position:absolute;
	top:50%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#loading .percent span {
	font-family: 'Unica One', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo;
	font-size:16px;
	margin:0 5px 0 0;
}

#home #keyVisual .anchor::before, #home #keyVisual .anchor::after{ background:#000; }
#bio .area .text{ padding: 20px 0 10px; margin-left: 0; border-bottom: solid 1px #000; }
#bio #rukaArea .text{ border:none; }
#bio .area{ margin-bottom:20px; }

.addTit{
	font-family: 'Unica One', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo;
	font-size:50px;
	text-align:center;
	padding:30px 0 20px; 
}
#bio dt{
	font-family: 'Unica One', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo;
	font-size:18px;
	text-align:center;
}
#bio dd{
	font-family: 'Unica One', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo;
	font-size:30px;
	text-align:center;
	margin-bottom:25px;
}
#bio #rukaArea dt{
	font-family: 'Unica One', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo;
	font-size:20px;
	line-height:1.3em;
}
#bio #rukaArea dd{
	line-height:1.2em;
	font-size:55px;
	font-family: 'Unica One', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo;
	margin-bottom: 30px;
}

/* pager */
#pager{ font-family: 'Unica One', sans-serif; }
#pager *::after{
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background: none;
	position: relative;
	bottom: 0;
	left: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
#pager a { display: inline-block; position: relative;  }
#pager b {
	display: inline-block;
	font-weight: normal;
	color: #000;
	position: relative;
}
#pager a:hover{ color: #000;}
#pager a::after,
#pager b::after{
	content: '';
	display: block;
	width: 0;
	height: 1px;
	background: #000;
	position: relative;
	bottom: 0;
	left: 0;
}
#pager a:hover::after,
#pager b::after{ width: 100%; }

#pager a[title*="next"]::after{ content:"\f105"; background: none;}
#pager a[title*="next"]:hover::after{ width: 0; opacity: 0.5; }

#pager a[title*="prev"]::after,
#pager a[title*="prev"]:hover::after{ background: none; left: -6px; }

#pager a[title*="prev"]{ height: 9px;}
#pager a[title*="prev"]:hover{ top:0; opacity: 0.5; }


/* PC only
============================== */
@media screen and (min-width: 960px) {

	#home.firstNav header h1 a svg { width: 200px; height: 78px; }
	#home #live .infoList li .date{ line-height:1.1em; }
	#home.firstNav header h1{ width:200px; margin-top:10px; }
	#home header h1 a svg { width: 150px; height: 50px; }
	header{ background:#000; }
	#home #keyVisual .anchor{ height:25px; }
	#home #keyVisual .anchor::before,
	#home #keyVisual .anchor::after{ height: 2px; }
	#home #keyVisual .anchor::after { left: -11px; }

	header #gnav{ text-align: center; }
	header #gnav .gnav li{ padding:0; }
	#home.firstNav header{ color:#000; }

	header #gnav li a{
		display: inline-block;
		padding:0 5px;
		position: relative;
		text-shadow: 0 0 5px rgba(255,255,255,1);
		font-size:20px;
		font-weight:normal;
		color:#FFF;
		transition: .3s;
	}

	header .socialList li.twitter a::before{ color:#FFF; }
	header h1{ width:85px !important; }
	.firstNav header h1 a img{ display:none; transition: .3s; }
	header h1 a img{ display:block; transition: .3s; }
	header h1 a:hover{ opacity:0.9; }
	#home.firstNav #gnav li a, #home.firstNav .socialList li a:before {
		color: #000;
	}
	header #gnav li a:hover{ color:#FFF; }
	header #gnav li a:after{
		position: absolute;
		bottom: 10px;
		left: 0;
		content: '';
		width: 0;
		height: 1px;
		background-color: #FFF;
		transition: .3s;
	}
	.firstNav header #gnav li a:after{ background-color: #000; }
	header #gnav li a:hover::after { width: 100%; }

	#home #topInfoArea #txtBnr dt,
	#home #topInfoArea .box dt{ margin-bottom:7px; font-size:22px; }
	.infoList .date{ font-size:15px; letter-spacing:0.05em; margin-bottom:5px; }

	.cat{ font-size:20px; margin-bottom:5px; }
	#media .infoList .cat{ margin-bottom:3px; }
	#home #topInfoArea #nextLive.box .date{ font-size:20px; margin-bottom:1px; }
	#home #topInfoArea .box a:hover{ background:#000; color:#fff; }

	.btn .more{ font-family: 'Unica One', cursive; font-weight:bold; padding:0 3px; }
	.btn .more:before{ font-family: 'Unica One', cursive; font-weight:normal; }
	.btn .more::after{ height:1px; background:#000; bottom: 0px; }

	#home #live .infoList li{ margin-bottom:15px; }
	#home #live .infoList li.nodata{ font-family: 'Unica One', cursive; font-size:18px; }
	.infoList li{ margin-bottom:30px; }
	.infoList li a{ display: block; padding:20px; position: relative; }

	.sectionTit{ font-size:80px; }

	#home #membersContent li .tit{ font-size: 35px; }
	#home #membersContent .spsiteInfo .title{ font-size: 35px; margin-bottom:20px; }
	.spsiteInfo .txt{ font-size:16px; }

	#home #membersContent li:last-child{ margin-right:0; }
	#home #membersContent li .txt{ font-size:16px; line-height:1.6em; }


	/* hover */

	#home .sectionTit::before{ font-size:80px; }
	.infoList li a:hover{ background:rgba(0,0,0,1); color:#fff; opacity:1; }
	#live .infoList li a:hover{ color:#aaa; opacity:1; }
	#home #live .infoList li a:hover{ background:transparent; opacity:1; }

	/*
	#live .infoList li a:hover{
		background:rgba(0,0,0,0.4);
		color:#fff;
		opacity:1;
	}
	*/

	#home #membersContent .sectionTit::before{
		width: 580px;
		height: 81px;
		margin: 0 auto;
		content: "";
		background: url(/image/top/tit_members.png);
		background-size: 580px 81px;
	}
	.infoList .tit{ font-size:14px; line-height:1.6em; }
	footer .copyright{ font-size:13px; color:#666; }
	#home #membersContent .spsiteInfo .qr{ top: 46px; }

}
/* tablet only
============================== */
@media screen and (max-width: 960px) {

	body{ background:#fff; }
	footer{ border-bottom:solid 1px #000; }
	#home section{ padding:80px 8%; }
	#home #keyVisual{ background-size:contain; background-position: 0 0; }
	#home section:nth-child(odd){ background-size: 900px; -webkit-background-size: 900px; -moz-background-size: 900px; }
	#home section:nth-child(even){ background-size: 900px; -webkit-background-size: 900px; -moz-background-size: 900px; }

	#home header h1{ left:0; }
	header #navBtn{ height:40px; }
	#home header h1 svg{ width:170px; }

	#home #topInfoArea .box .tit{ position:relative; padding-right: 10%; }
	#home #topInfoArea .box .tit:after {
		content: "\f105";
		font: normal normal normal 14px/1 FontAwesome;
		font-size: 14px;
		color: #555 !important;
		position: absolute;
		right: 10px;
		top: 14px;
		color: #FFF;
	}
	#home #topYouTube{bottom:21.5%;}
	
	#home #topInfoArea{ display: block; width: 300px; bottom: 11%;}
	#home #topInfoArea #nextLive { margin-left: 0; }

	#home #topInfoArea #txtBnr dt,
	#home #topInfoArea .box dt::before{ font-size:28px; }

	#home #topInfoArea #txtBnr dt,
	#home #topInfoArea .box dt{ margin-bottom:15px; }

	#home #live .infoList li .date{ line-height:2em; font-size:14px; }
	#home #membersContent .sectionTit::before{ font-size:50px; }
	header #navBtn span{ background:#666; }
	#home #keyVisual .anchor{ height: 85px; margin-left: -20px; }
	#home #keyVisual .anchor::before{ left:11px; }
	#home #keyVisual .anchor::before, #home #keyVisual .anchor::after { height:3px; }

	#home #membersContent li { flex-basis: 30%; webkit-flex-basis: 28%; -ms-flex-preferred-size: 28%; margin: 0 5% 5% 0; }
	#home #live .infoList{ margin-bottom:3%; }
	#home #membersContent li:last-child{ margin-right:0; }
	#home #membersContent li{ flex-basis: 47%; }

	header #gnav li a {
		text-decoration: none;
		font-weight: normal;
		color: #FFF;
		font-size: 40px;
		letter-spacing: 0.03em;
	}
	#home #topics #bnr li{ width:100%; }
	.infoList .tit{ font-size:18px; }
	#media .infoList .cat{ margin-bottom:3px; }
	#home #membersContent .spsiteInfo .txt{ width: 70%; font-size:14px; }
	.btn a{ font-size:20px; margin-top:3%; }
	#home #live .infoList li .date{ margin: 0 25px 5px 0; }
	.sectionTit{ margin-bottom:60px; }
	#home #membersContent .spsiteInfo .qr{ top:35px; }
	
	#headerInner{ background:rgba(0,0,0,0.8); }
	.socialList li.youtube a::before,
	.socialList li.twitter a::before{ color:#fff;}
	footer .copyright{ color:#666;}

}