@charset "utf-8";

/*common*/
.section {
	background-color: #000000;
}

/*localNav*/
#localNav {
	width: 100%;
	font-family: 'Anton';
	font-size: 26px;
	text-transform: uppercase;
	background-color: #001c58;
	text-align: center;
	line-height: 1;
}
#localNav.fixed {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3;
}
#localNav li {
	display: inline-block;
	margin: 0 10px;
}
#localNav a {
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 20px 0;
	box-sizing: border-box;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	-ms-transition: .3s;
}
#localNav a:hover,
#localNav li.current a {
	box-shadow: 0 -3px 0 0 rgba(255,255,255,1.00) inset; 
	color: #00a0e9;
}

@media screen and (max-width: 480px){
	#localNav.fixed {
		position: absolute;
	}
}



/*supportNav*/
#supportNav {
	display: table;
	position: fixed;
	left: 30px;
	top: 50%;
	z-index: 4;
	margin-top: -210px;
}
#supportNav .link {
	margin-bottom: 15px;
}


/*top*/
#top {
	position: absolute;
	top: 0;
}
body#work01 #mainVisual {
	background-image: url(../img/work01/img_main.jpg);
}
body#work02 #mainVisual {
	background-image: url(../img/work02/img_main.jpg);
}
body#work03 #mainVisual {
	background-image: url(../img/work03/img_main.jpg);
}
body#work04 #mainVisual {
	background-image: url(../img/work04/img_main.jpg);
}
#mainVisual {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: auto;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
}


@media all and (orientation: portrait), screen and (max-width: 640px) {
	#mainVisual {
		min-height: 960px;
		height: auto;
		align-items: stretch;
		justify-content: center;
		flex-direction: column;
		background-position: center;
		background-size: cover;
	}
}


#mainCopy {
	position: absolute;
	z-index: 2;
	height: 70%;
}
#mainCopy img {
	height: 100%;
}
#work01 #mainCopy {
	right:200px;
	top: 200px;
}
#work02 #mainCopy {
	left: 350px;
	top: 200px;
}
#work03 #mainCopy {
	left: 350px;
	top: 200px;
}
#work04 #mainCopy {
	left: 350px;
	top: 200px;
}

@media all and (orientation: portrait), screen and (max-width: 640px) {
	#mainCopy {
		position: absolute;
		z-index: 2;
		width: 200px;
		height: auto;
	}
	#mainCopy img {
		width: 100%;
		height: auto;
	}
	#work01 #mainCopy {
		right:80px;
		width: 200px;
		top: 250px;
	}
	#work02 #mainCopy {
		left: 220px;
		width: 200px;
		top: 250px;
	}
	#work03 #mainCopy {
		width: 200px;
		top: 250px;
	}
}



/*info*/
#info {
	width: 100%;
	text-align: center;
	padding: 100px 0;
	background-color: rgba(0,0,0,0.70);
}


/*track-credit*/
#track-credit {
	background-size: cover;
	background-color: #000000;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0 0 100px;
	text-align: center;
}
body#work01 #track-credit {
	background-image: url(../img/work01/bg_track-credit.jpg);
}
body#work02 #track-credit {
	background-image: url(../img/work02/bg_track-credit.jpg);
}
body#work03 #track-credit, body#work04 #track-credit {
	background-image: url(../img/work03/bg_track-credit.jpg);
}

#trackList, #credit {
	padding-top: 100px;
	background-color: transparent;
}

#informationLink {
	position: absolute;
	right: 40px;
	top: 40px;
}

/*special*/
#special {
	padding: 100px 0;
	text-align: center;
	background-color: #c3000f;
}

/*live*/
#live {
	padding: 100px 0;
	text-align: center;
	background-color: #1b1b1b;
}

/*movie*/
#movie {
	padding: 100px 0;
	text-align: center;
	background-color: #001c58;
	color: #000;
}
body#work03 #movie {
	background-color: #001c58;
}
#movie .video {
	margin-bottom: 40px;
}
#movie .video:last-child {
	margin-bottom: 0;
}

/*shop*/
#shop {
	font-size: 16px;
	padding: 50px 40px;
	text-align: center;
}
#shop .title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #00a0e9;
}
#shop .shopList li {
	display: inline-block;
	margin-bottom: 10px;
}
#shop .shopList li:before {
	content: '/';
	margin: 0 10px;
}
#shop .shopList li:first-child:before {
	content: '';
	margin: 0;
}
#shop a:hover {
	color: #00a0e9;
}

/*link*/
#link {
	font-size: 16px;
	padding: 50px 40px;
	text-align: center;
	background-color: #0b0b0b;
}
#link .title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #00a0e9;
}
#link .shopList li {
	display: inline-block;
	margin-bottom: 10px;
}
#link .shopList li:before {
	content: '/';
	margin: 0 10px;
}
#link .shopList li:first-child:before {
	content: '';
	margin: 0;
}
#link a:hover {
	color: #00a0e9;
}