@charset "UTF-8";
@import "common.css";

body {
}

/* -------------------------------------------------- */
/* 共通部分 */
/* -------------------------------------------------- */
/* ++++++++++ Header ++++++++++ */
header {
	background: #212121;
}
header div { height: 100px }
header div a {
	position: absolute;
	top: 20px; left: 0;
	width: 240px; height: 58px;
	text-indent: -9999px;
	background: url(../_img/top-logo.png) no-repeat 50% 50%;
}
header div a:hover {
	opacity: 0.6;
}
header h1 {
	margin-left: 250px;
	height: 100%;
	text-indent: -9999px;
	background: url(../_img/header-description.png) no-repeat 0 50%;
}
header .twitter-share-button {
	position: absolute !important;
	top: 40px; right: 50px;
	-webkit-transition: all 0ms !important;
	   -moz-transition: all 0ms !important;
		-ms-transition: all 0ms !important;
		 -o-transition: all 0ms !important;
			transition: all 0ms !important;
}
header nav {
	height: 40px;
	background-color: #212121;
	background-image: url(../_img/header-bg.png);
}
header ul {
	background-color: #212121;
	background-image: url(../_img/header-bg.png);
}
header li {
	float: left;
	margin-right: -1px;
	width: 166px; height: 100%;
	line-height: 40px;
	font-size: 16px;
	letter-spacing: 2px;
	font-weight: bold;
	color: #CCC;
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
}
header li:hover { background-color: rgba(0,0,0,0.25) }
header li a {
	display: block;
	color:#CCC;}
header li a:hover { color: #9A79A8 }
header ul::after {
	content: "";
	display: block;
	clear: both;
}

/* ++++++++++ Footer ++++++++++ */
footer {
	margin-top: 50px;
	padding-top: 30px;
	color:#CCC;
	background-color: #212121;
	background-image: url(../_img/header-bg.png);
}
footer::before {
	content: "";
	display: block;
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.2);
}
footer h5 {
	padding-bottom: 10px;
	font-size: 15px;
}
footer h5 p {
	float: left;
	width: 25%;
	text-align: left;
	font-weight: bold;
}
footer h5 p:nth-child(n+2) {
	display: none;
}
footer h5::after {
	content: "";
	display: block;
	clear: both;
}
footer a { color: #CCC }
footer a:hover { color: #9A79A8 }
footer nav {
	padding-bottom: 100px;
}
footer ul {
	float: left;
	width: 100%;
	text-align: left;
	overflow: hidden;
}
footer ul li {
	display: inline-block;
	left: -30px;
}
footer ul li::before {
	content: "　/　";
}

footer nav::after {
	content: "";
	display: block;
	clear: both;
}
footer div { background: #212121 }
footer div p {
	width: 1000px;
	margin: auto;
	padding: 10px 0;
	text-align: right;
}

#iphrase {
	z-index: 1001;
	margin-top: 10px;
	margin-bottom: 20px;
	width: 100%; height: 240px;
	background-color: #010101;
	line-height: 240px;
	-webkit-transition: line-height 0.5s linear, opacity 0.5s linear;
	transition: line-height 0.5s linear, opacity 0.5s linear;
}
#iphrase svg {
	vertical-align: middle;
}
#iphrase svg path {
	shape-rendering: geometricPrecision;
	stroke: #fff;
	fill: #000;
	stroke-width: .5;
	stroke-dasharray: 3000;
	stroke-dashoffset: 3000;
	-webkit-animation: DASH 2s ease-in 0.25s forwards;
	animation: DASH 2s ease-in 0.25s forwards;
}
@-webkit-keyframes DASH {
	0% {
		stroke-dashoffset: 3000;
		fill: #000;
	}
	30% {
		stroke-dashoffset: 2700;
		fill: #000;
	}
	45% {
		stroke-dashoffset: 1500;
		fill: #fff;
	}
	100% {
		stroke-dashoffset: 100;
		fill: #fff;
	}
}
@keyframes DASH {
	0% {
		stroke-dashoffset: 3000;
		fill: #000;
	}
	30% {
		stroke-dashoffset: 2700;
		fill: #000;
	}
	45% {
		stroke-dashoffset: 1500;
		fill: #fff;
	}
	100% {
		stroke-dashoffset: 100;
		fill: #fff;
	}
}
/* ++++++++++ Common ++++++++++ */
.sub-title-c1, .sub-title-c2 {
	height: 40px;
	line-height: 40px;
	letter-spacing: 1px;
	text-indent: 1em;
	font-weight: bold;
	text-align: left;
	color: #CCC;
	background: #212121 url(../_img/header-bg.png);
	border-left: 10px solid #212121;
}
.sub-title-c1 { width: 990px; font-size: 24px }
.sub-title-c2 { width: 490px; font-size: 19px }



/* -------------------------------------------------- */
/* TOP CONTENTS */
/* -------------------------------------------------- */
#wrapper {z-index: 10}
#top-slider {
	padding: 20px 0;
	height: 400px;
	width: 100%;
	background: #212121;
	color: #FFF;
	overflow: hidden;
}
#top-slider ul { cursor: default;
	overflow: visible;
	width: 100%; height: 400px;
}
#top-slider li {
	float: left;
	height: 100%;
	right: 0;
	-webkit-transition: all 600ms;
	   -moz-transition: all 600ms;
		-ms-transition: all 600ms;
		 -o-transition: all 600ms;
			transition: all 600ms;
}
#top-slider div {
	width: 1000px; height: 100%;
	margin: auto;
}

#top-slider p {
	display: block;
	width: 100%; height: 100%;
	margin: auto;
	background: rgba(0,0,0,0.5);
	background-size: cover;
	-webkit-filter: blur(10px);
	   -moz-filter: blur(10px);
		-ms-filter: blur(10px);
		 -o-filter: blur(10px);
			filter: blur(10px);
	-webkit-border-radius: 20px;
	   -moz-border-radius: 20px;
		-ms-border-radius: 20px;
		 -o-border-radius: 20px;
			border-radius: 20px;
}
#top-slider p::after {
	content: "";
	display: block;
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(33,33,33,0.3);
	-webkit-filter: blur(5px);
	   -moz-filter: blur(5px);
		-ms-filter: blur(5px);
		 -o-filter: blur(5px);
			filter: blur(5px);
}
#top-slider article {
	position: absolute; top: 0; left: 0;
	height: 100%;
}
#top-slider a { position: absolute; top: 50px; left: 75px }
#top-slider a:hover { opacity: 0.7 }
#top-slider img { width: 300px;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
	-ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
	-o-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
}
#top-slider h3, #top-slider h4, #top-slider h5 {
	position: absolute; left: 0;
	margin-left: 425px;
	text-align: left;
	letter-spacing: 0px;
}
/*	font-variant: small-caps;*/

#top-slider h3 {
	top: 50px;
	font-size: 25px;
	letter-spacing: 2px;
}
#top-slider h4 {
	top: 170px;
	margin-right: 50px;
	font-size: 30px;
	letter-spacing: 1px;
}
#top-slider h5 {
	bottom: 50px;
	font-size: 15px;
}
#top-slider q {
	padding: 0 5px;
	float: left;
	white-space: nowrap;
}
#top-slider q::before, #top-slider q::after { content: "" }

#top-slider .slider-next, #top-slider .slider-prev {
	cursor: pointer;
	position: absolute;
	width: 75px; height: 75px;
	line-height: 75px;
	font-size: 22px;
	background: rgba(0,0,0,0.5);
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
		-ms-border-radius: 50%;
		 -o-border-radius: 50%;
			border-radius: 50%;
}
#top-slider .slider-next:hover, #top-slider .slider-prev:hover {
	opacity: 0.7;
}

/* ++++++++++ TOP > Contents ++++++++++ */
#top-contents {
	margin-top: 50px;
	vertical-align: top;
}
#top-contents td {
	width: 500px;
}

/* ++++++++++ TOP > ADVERTISEMENT ++++++++++ */
#advertisement {
	text-align: left;
}
#advertisement h2 {
}
#advertisement a {
	display: block;
	width: 500px;
	margin: 10px 0 5px;
}
#advertisement a:hover {
	opacity: 0.8;
}

/* ++++++++++ TOP > MOVIE ++++++++++ */
#top-movie {
	margin-top: 10px;
}

.phone #top-movie {
	display: none;
}

#top-movie h2 {
	margin-bottom: 10px;
}
#top-movie iframe {
	float: left;
	width: 246px; height: 140px;
	border-right: 5px solid #FFF;
	border-bottom: 5px solid #FFF;
}
#top-movie::after {
	content: "";
	display: block;
	clear: both;
}

/* ++++++++++ TOP > twitter ++++++++++ */
#top-twitter {
	margin-top: 50px;
}
#top-twitter > * {
	-webkit-transition: all 0ms !important;
	   -moz-transition: all 0ms !important;
		-ms-transition: all 0ms !important;
		 -o-transition: all 0ms !important;
			transition: all 0ms !important;
}

/* -------------------------------------------------- */
/* WORKS CONTENTS */
/* -------------------------------------------------- */
#works-list a {
	display: inline-block;
	width: 200px; height: 200px;
	background-size: cover;
	border: 3px solid #FFF;
}
#works-list a p {
	overflow: hidden;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.6);
	opacity: 0;
}
#works-list a:hover p {
	opacity: 1;
}
#works-list a p b {
	display: block;
	margin-top: 80px;
	font-size: 12px;
	color: #FFF;
}
#works-list a p q {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #FFF;
}

/* ++++++++++ works > contents ++++++++++ */
#works-wrap {
	margin-top: 50px;
	margin-bottom: 50px;
	min-height: 400px;
	text-align: left;
}
#works-wrap img {
	position: absolute;
	top: 0; left: 0;
	width: 300px;
}
#works-wrap div {
	margin: 0 0 5px 340px;
	padding-left: 100px;
	line-height: 25px;
}
#works-wrap div::before {
	position: absolute;
	top: 0; left: 0;
	width: 70px;
	padding: 0 5px;
	font-size: 14px;
	color: #FFF;
	text-align: center;
	background: #212121;
	font-weight: normal;
}
#works-albumtitle { font-size: 22px; font-weight: bold; }
#works-albumtitle::before { content: "Title" }
#works-artist::before { content: "Artist" }
#works-release::before { content: "Release" }
#works-label::before { content: "Label" }
#works-tracklist {
	margin: 0 0 50px 340px;
}
#works-tracklist span {
	display: block;
	padding-top: 20px;
	padding-bottom: 10px;
	color: #EC407A;
	font-weight: bold;
	font-size: 16px;
}
#works-tracklist q::before { padding-right: 5px }
#works-tracklist q::after { padding-left: 5px }
#works-tracklist p {
	margin-left: 1em;
	font-size: 14px;
}
#works-ranking {
	position: absolute;
	top: 315px; left: 15px;
}
#works-ranking i {
	font-size: 14px;
	display: block;
	font-style: normal;
}
#works-link {
	padding: 0 !important;
	line-height: 25px;
	text-align: left;
}
#works-link p {
	display: inline-block;
	margin-right: 10px;
	background-color: #212121;
	background-image: url(../_img/header-bg.png);
	overflow: hidden;
}
#works-link a {
	display: block;
	width: 100%; height: 100%;
	padding: 5px 10px;
	color: #FFF;
	letter-spacing: 1px;
	font-size: 17px;
	white-space: nowrap;
}
#works-link a:hover {
	color: #9A79A8;
	background-color: rgba(0,0,0,0.25);
}

#otherworks {
	padding: 40px 0 20px;
	text-align: left;
}
#otherworks h4 {
	font-size: 28px;
}
#otherworks h5 {
	font-size: 20px;
}
#otherworks p:first-of-type {
	padding-top: 20px;
	font-size: 18px;
	line-height: 1.3
}
#otherworks a {
	display: inline-block;
	margin: 20px 0 0 0;
	border-bottom: 1px solid;
}

/* -------------------------------------------------- */
/* CREATORS CONTENTS */
/* -------------------------------------------------- */
#creator-list ul {
	background: #F5F5F5;
	width: 1000px;
}
#creator-list ul::after {
	content: "";
	display: block;
	clear: both;
}
#creator-list ul li {
	float: left;
	width: 250px; height: 250px;
	line-height: 250px;
	margin: 40px;
	color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-filter: grayscale(100%);
	   -moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		 -o-filter: grayscale(100%);
			filter: grayscale(100%);
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
	-ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
	-o-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
		0 2px 10px 0 rgba(0,0,0,0.12);
}
#creator-list ul li:hover {
	-webkit-filter: none;
	   -moz-filter: none;
		-ms-filter: none;
		 -o-filter: none;
			filter: none;
	-webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),
		0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),
		0 6px 20px 0 rgba(0,0,0,0.19);
	-ms-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),
		0 6px 20px 0 rgba(0,0,0,0.19);
	-o-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),
		0 6px 20px 0 rgba(0,0,0,0.19);
	box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),
		0 6px 20px 0 rgba(0,0,0,0.19);
}
#creator-list ul li a {
	display: block;
	width: 100%; height: 100%;
	font-size: 24px;
	color: #FFF;
	opacity: 0;
	-webkit-text-shadow: 0 0 5px #000;
	   -moz-text-shadow: 0 0 5px #000;
		-ms-text-shadow: 0 0 5px #000;
		 -o-text-shadow: 0 0 5px #000;
			text-shadow: 0 0 5px #000;
}
#creator-list ul li a:hover {
	opacity: 1;
}

/* -------------------------------------------------- */
/* CREATOR DATA */
/* -------------------------------------------------- */
#creator-data {
	margin: auto;
	width: 1000px;
	background: #EEE;
}
#creator-profile {
	height: 350px;
	padding-top: 20px;
}
#creator-image {
	position: absolute;
	top: 20px; left: 20px;
	width: 400px;
}
#creator-profile h2, #creator-profile h3,
#creator-profile h4, #creator-profile h5 {
	margin-left: 500px;
	line-height: 34px;
	text-align: left;
	font-weight: bold;
}
#creator-profile h3, #creator-profile h4, #creator-profile h5 {
	font-variant: small-caps;
}
#creator-profile h4::before {content: "("}
#creator-profile h4::after {content: ")"}
#creator-profile h5 { font-size: 16px }
#creator-works {margin-left: 50px}
#creator-works article {
	float: left;
	margin: 8px;
	width: 160px;/* min-height: 250px;*/
	font-size: 11px;
}
#creator-works article:nth-child(5n+1) {
	clear: both;
}
#creator-works article a {
	display: block;
	width: 100%; height: 100%;
	color: #666;
}
#creator-works article a:hover {
	color: #E91E63;
	opacity: 0.8;
}
#creator-works article img {
	width: 100%;
}
#creator-works article p, #creator-works article q {
	display: block;
	text-align: left;
	color: #666;
}
#creator-works article q { font-size: 10px }
#creator-works article q::before, #creator-works article q::after {content: ""}
#creator-works article a:hover p {
	color: #9A79A8;
}
#creator-works article a:hover q {
	color: #9A79A8;
}
#creator-works::after {
	content: "";
	display: block;
	clear: both;
}
#twitter-area {
	display: block;
	margin: -40px 0 50px 20px;
	width: 400px; height: 300px;
	background: #FFF;
}
#twitter-area .twitter-timeline {
	-webkit-transition: all 0ms !important;
	   -moz-transition: all 0ms !important;
		-ms-transition: all 0ms !important;
		 -o-transition: all 0ms !important;
			transition: all 0ms !important;
}
#creator-otherworks-title {
	text-align: left;
	font-size: 26px;
	padding: 80px 0 20px 60px;
}
#creator-otherworks-block {
	display: block;
	text-align: left;
	padding: 0px 60px 100px;
}
#creator-otherworks-block a {
	display: block;
	margin: 0 0 12px 0;
	padding: 4px 16px;
	font-size: 20px;
	color: #ffffff;
	background-color: #9E9E9E;
}
#creator-otherworks-block a:hover {
	background-color: #757575;
}
#creator-otherworks-block p {
	display: inline;
	padding: 0 20px 0 0;
}
#creator-otherworks-block span {
	font-size: 16px;
}

/* -------------------------------------------------- */
/* CONTACT CONTENTS */
/* -------------------------------------------------- */
#contact table {
	margin-top: 20px;
	width: 1000px;
	font-size: 24px;
	background: #212121;
	color: #FFF;
}
#contact table p {
	display: block;
}
#contact table td {padding: 10px 20px}
#contact input[required], #contact textarea {
	width: 100%;
	text-indent: 5px;
	text-align: left;
	font-size: 20px;
	background: #FFF;
	border: solid 3px #9A79A8;
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
		-ms-border-radius: 8px;
		 -o-border-radius: 8px;
			border-radius: 8px;
}
#contact input { height: 40px }
#contact textarea { height: 200px }
#contact input[type=submit] {
	margin-bottom: 20px;
	width: 360px; height: 45px;
	line-height: 45px;
	font-size: 22px;
	letter-spacing: 2px;
	color: #FFF;
	border: 2px solid #000;
	background-color: #424242;
	background-image: url(../_img/header-bg.png);
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
		-ms-border-radius: 8px;
		 -o-border-radius: 8px;
			border-radius: 8px;
}
#contact input[type=submit]:hover {
	cursor: pointer;
	border: 2px solid #9A79A8;
	background-color: #9A79A8;
}
#contact-send { line-height: 40px }

/* -------------------------------------------------- */
/* RECRUIT CONTENTS */
/* -------------------------------------------------- */
#recruit {
	width: 1000px;
	padding-bottom: 30px;
	background: #edf1f2;
	text-align: left;
}
#recruit h3 {
	margin: 20px 0 0 10px;
	font-size: 22px;
	line-height: 50px;
	font-weight: bold;
}
#recruit h3::before { content:"▶ " }
#recruit p {
	font-size: 15px;
	line-height: 30px;
	font-weight: normal;
	margin-left: 1.5em;
}
#recruit h4 {
	margin: 20px 0 0 2em;
	font-size: 22px;
	line-height: 50px;
	font-weight: bold;
}
#recruit h4::before { content:"▼ " }

/* -------------------------------------------------- */
/* ABOUT CONTENTS */
/* -------------------------------------------------- */
#about h3 {
	font-size: 28px;
	margin: 25px auto;
}
#about p { font-size: 15px }

#about-01 {
	margin-top: 100px;
	padding: 140px 0 300px;
	background-image: url(../_img/about-image6.png);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	color: #FFF;
}
#about table {
	margin: 100px auto;
}
#about th, #about td {
	padding: 8px 35px;
	line-height: 30px;
	border-top: 1px solid #212121;
	border-bottom: 1px solid #212121;
	vertical-align: top;
	font-weight: normal;
}
#about td {
	text-align: left;
}