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


/* ----------------------------------------
*	TOP VISUAL
---------------------------------------- */
#top .miku{
	background-image:url(../images/miku2014_visual.jpg);
	background-position:top center;
}
#top .gumi{
	background-image:url(../images/gumi12-14_visual.jpg);
	background-position:top right;
}
#top .miku h2{
	background-image:url(../images/miku2014_jacket.jpg);
}
#top .gumi h2{
	background-image:url(../images/gumi12-14_jacket.jpg);
}
/* ----------------------------------------
*	miku2014
---------------------------------------- */
#miku2014{
	border-left:10px solid #fcc800;
	border-right:10px solid #fcc800;
}
#miku2014 .tracklist a{
	color:#fcc800;
}
/* ----------------------------------------
*	miku2013
---------------------------------------- */
#miku2013{
	border-left:10px solid #e8446c;
	border-right:10px solid #e8446c;
}
#miku2013 .tracklist a{
	color:#e8446c;
}
/* ----------------------------------------
*	miku2012
---------------------------------------- */
#miku2012{
	border-left:10px solid #4387c7;
	border-right:10px solid #4387c7;
}
#miku2012 .tracklist a{
	color:#4387c7;
}
/* ----------------------------------------
*	gumi12-14
---------------------------------------- */
#gumi12-14{
	border-left:10px solid #b7d200;
	border-right:10px solid #b7d200;
}
#gumi12-14 .tracklist a{
	color:#b7d200;
}
/* ----------------------------------------
*	gumi09-11
---------------------------------------- */
#gumi09-11{
	border-left:10px solid #f8b500;
	border-right:10px solid #f8b500;
}
#gumi09-11 .tracklist a{
	color:#f8b500;
}


/*/////////////////////////////////////////////////////////////////////

    style

/////////////////////////////////////////////////////////////////////*/

/* ----------------------------------------
*	common
---------------------------------------- */
html,body{
	height:100%;
	font-weight:bold;
}
a{
	color:#000000;
}
address{
	font-style:normal;
	font-size:12px;
	font-weight:normal;
}
.socialBtn{
	width:120px;
	overflow:hidden;
}
.socialBtn li{
	float:left;
	padding:0 5px;
}
.socialBtn li img{
	width:30px;
	height:30px;
}
.sp{
	display:none;
}
@media screen and (max-width: 800px) {
	.socialBtn{
		padding:20px 0;
	}
	.sp{
		display:block;
	}
	.pc{
		display:none;
	}
}


/* ----------------------------------------
*	TOP
---------------------------------------- */
#top{
	height:100%;
	width:100%;
}
#top .series{
	height:100%;
	width:50%;
	float:left;
	position:relative;
	background-repeat:no-repeat;
	background-size:cover;
}
#top .seriesInner{
	height:100%;
}
#top h2{
	position:absolute;
	width:25%;
	top:35%;
	background-repeat:no-repeat;
	background-size:cover;
}
#top .gumi h2{
	left:50px;
}
#top .miku h2{
	right:50px;
}
#top h2 img{
	width:100%;
	height:auto;
}

#topFooter{
	position: absolute;
	bottom:0;
	width:100%;
	padding:50px 0;
	background:#fff;
}
#topFooter .socialBtn{
	margin:0 auto 20px;
}
#topFooter address{
	text-align:center;
}
@media screen and (max-width: 800px) {
	#top{
		height:auto;
		padding:80px 10px 0 0;
	}
	#top .series{
		position:static;
		background:none;
		width:50%;
		height:auto;
	}
	#top .seriesInner{
		height:auto;
	}
	#top h2{
		position:static;
		width:auto;
		margin:10px 0 0 10px;
	}
	#top h2 img{
		opacity:0;
	}
}
/* ----------------------------------------
*	display:none
---------------------------------------- */
#container,
.album{
	display:none;
}
@media screen and (max-width: 800px) {
#container{
	display:block;
}
}
/* ----------------------------------------
*	main
---------------------------------------- */
main{
	padding-top:110px;
}
@media screen and (max-width: 800px) {
	main{
		padding-top:40px;
		border-bottom:1px solid #dddddd;
	}
}
/* ----------------------------------------
*	header
---------------------------------------- */
header{
	width:100%;
	position:fixed;
	top:0;
	height:120px;
	background-color:#fff;
	z-index:100;
}
header .miku{
	float:left;
	background-image:url(../images/parts_slash.png);
	background-repeat:no-repeat;
	background-position:top right;
	margin:25px 0 0 30px;
	padding:0 50px 0 0;
}
header .gumi{
	float:left;
	margin:25px 30px;
}
header h2{
	height:45px;
}
header .miku h2 img{
	height:28px;
	width:auto;
}
header .gumi h2 img{
	height:22px;
	width:auto;
}
header nav li{
	float:left;
	margin:0 20px 0 0;
}
header nav li img{
	height:20px;
	width:auto;
}
@media screen and (max-width: 800px) {
	header .miku,
	header .gumi,
	header nav li{
		float:none;
		margin:0;
		padding:0;
		background-image:none;
	}
	header{
		height:auto;
	}
	header h1{
		width:260px;
		float:left;
		padding:10px 0 0 15px;
	}
	header h1 img{
		width:100%;
		height:auto;
	}
	header #menu{
		float:right;
	}
	header #menu a{
		display:block;
		background-color:#000000;
		height:40px;
		width:40px;
		padding:10px;
	}
	header #menu a img{
		width:20px;
		height:auto;
	}
	header .gnav{
		display:none;
	}
	.gnav{
		border-top:1px solid #dddddd;
		background:#fff;
		text-align: left;
	}
	.gnav h2{
		padding:15px;
		height:auto;
		background-color:#f6f6f6;
	}
	.gnav .miku h2 img{
		height:18px;
		width:auto;
	}
	.gnav .gumi h2 img{
		height:16px;
		width:auto;
	}
	.gnav ul{
		border-bottom:1px solid #dddddd;
	}
	.gnav li a{
		display:block;
		border-top:1px solid #dddddd;
		padding:15px;
	}
	.gnav li a img{
		height:10px;
		width:auto;
	}
	.gnav p{
		text-align:right;
	}
	.gnav p a{
		display:block;
		border-bottom:1px solid #dddddd;
		padding:15px;
	}
	.gnav p a img{
		height:18px;
		width:auto;
	}
}

/* ----------------------------------------
*	social
---------------------------------------- */
#container .socialBtn{
	position:fixed;
	top:30px;
	right:30px;
	z-index:101;
}
@media screen and (max-width: 800px) {
	#container .socialBtn{
		position: static;
		margin:0 auto;
	}
}
/* ----------------------------------------
*	footer
---------------------------------------- */
footer{
	position:fixed;
	bottom:20px;
	right:30px;
	text-align:right;
}
footer p{
	margin-bottom:10px;
}
#pagetop img,
#index img{
	height:18px;
	width:auto;
}
@media screen and (max-width: 800px) {
	footer{
		position:static;
		text-align:center;
		background-color:#fff;
	}
	footer p{
		margin-bottom:0;
	}
	footer p a{
		display:block;
		padding:15px;
	}
	#pagetop{
		border-top:1px solid #dddddd;
	}
	#index{
		text-align:right;
		border-bottom:1px solid #dddddd;
	}
	footer address{
		font-size:10px;
		background-color:#000;
		padding:15px 0;
		color:#fff;
	}
	footer address img.sp{
		display:inline;
		height:10px;
		width:auto;
	}

}
/* ----------------------------------------
*	.album
---------------------------------------- */
.albumInner{
	padding:100px 0 100px 90px;
	max-width:700px;
	width:50%;
	box-sizing:border-box;
}
.visual{
	position:fixed;
	height:100%;
	width:100%;
	padding:110px 10px 0;
	text-align:right;
	bottom:0;
	right:0;
	z-index:-1;
}
.visual img{
	width:auto;
	height:100%;
}
.album h3 img{
	width:100%;
	height:auto;
}
.album nav{
	margin:30px 0 0;
}
.album nav li{
	float:left;
	padding:0 30px 0 0;
}
.album nav li img{
	height:18px;
	width:auto;
}
.album section{
	padding:100px 0 0;
}
.album h4{
	margin-bottom:30px;
}
.about figure{
	float:left;
	width:35%;
}
.about figure img{
	width:100%;
	height:auto;
}
.about .txt{
	float:right;
	width:60%;
}
.about .txt p{
	margin:0 0 10px;
}
.about .bannerArea{
	margin-top:30px;
	margin-right:-10px;
}
.about .bannerArea li{
	width:50%;
	float:left;
	padding:0 10px 0 0;
}
.about .bannerArea li img{
	width:100%;
	height:auto;
}
.tracklist ol{
	border-top:1px solid #eeeeee;
}
.tracklist li{
	border-bottom:1px solid #eeeeee;
	padding:0 15px;
}
.tracklist li:hover{
	background-color:rgba(255,255,255,0.50);
}
.tracklist li a{
	display:block;
	font-size:16px;
	padding:15px 0;
	background-image:url(../images/parts_arrow_right.png);
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-size:15px 15px;
}
.tracklist li a.active{
	background-image:url(../images/parts_arrow_bottom.png);
}
.tracklist .nico{
	padding:0 35px 15px;
	display:none;
}
.tracklist .nicoInner{
	position:relative;
	padding:62.65% 0 0;
	width:100%;
	height:100%;
}
.tracklist .nicoInner iframe,
.tracklist .nicoInner embed,
.tracklist .nicoInner object{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.tracklist .nicoInner div{
	position:absolute;
	top:0;
	left:0;
}
.tracklist .music{
	color:#000000;
}
.tracklist .name{
	font-size:10px;
}
@media screen and (max-width: 800px) {
	.albumInner{
		padding:0;
		max-width:100%;
		width:100%;
	}
	.visual{
		position:static;
		height:auto;
		padding:0;
		text-align:center;
	}
	.visual img{
		width:100%;
		height:auto;
	}
	.album h3{
		padding:10px;
	}
	.album nav{
		margin:10px auto 20px;
		width:194px;
	}
	.album nav li{
		padding:0 15px;
	}
	.album nav li img{
		height:13px;
		width:auto;
	}
	.album section{
		padding:0;
	}
	.album h4{
		margin:0;
		padding:15px 0;
		text-align:center;
		border-top:1px solid #eeeeee;
		border-bottom:1px solid #eeeeee;
	}
	.album h4 img{
		height:22px;
		width:auto;
	}
	.about figure{
		float:none;
		width:50%;
		margin:15px auto;
	}
	.about .txt{
		float: none;
		width:100%;
		padding:0 10px 15px;
	}
	.tracklist ol{
		border: none;
	}
	.tracklist .nico{
		padding:0 0 15px;
	}
	.tracklist li a{
		padding:15px 20px 15px 0;
	}
}