@charset "UTF-8";

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

CSS : layout
DATE : 2012.11.14

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

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

[layout] 
	0. Base Layout
	1. Header
	2. Footer
	3. Content
	4. Modal
	98. NoscriptMassage
	99. Text

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

/* ------------------------------------------------------------
	0. Base Layout
------------------------------------------------------------ */

html{
	width: 100%;
	height: 100%;
}
body{
	width: 100%;
	height: 100%;
	background: #000;
}

#wrapper {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	background-image:url(../images/common/bg.jpg);
	background-position:left top;
	background-repeat:no-repeat;
	min-height: 100%;
}
* html #wrapper {
	height:100%;
}

#container {
	margin: 0;
	padding: 0 0 60px 0;
	width: 100%;
	overflow: hidden;
}

#header {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height:90px;
	overflow: hidden;
}
#footer {
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 60px;
	overflow: hidden;
	background:#000;
}
#contents {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	overflow: hidden;
}

/* ------------------------------------------------------------
	1. Header
------------------------------------------------------------ */

#header {
}

#header h1{
	float:left;
	margin: 28px 0 0 0;
	display:block;
}

#header h2{
	float:right;
	margin: 19px 0 0 0;
	display:block;
}
#header p{
	float:right;
	margin: 35px 0px 0 0;
	display:block;
}


/* ------------------------------------------------------------
	2. Footer
------------------------------------------------------------ */

#footer{
}

#footerInner{
	margin: 0 auto;
	padding: 0;
	width: 960px;
	height:100%;
	min-height:60px;
	overflow: hidden;
}

#footerNav{
	float:left;
	list-style:none;
	width: 430pxd;
	height: 15px;
	overflow:hidden;
	margin:20px 20px 0 0;
}
#footerNav li{
	float:left;
	margin:0 10px 0 0;
}
#footerNav li,
#footerNav li a{
	height: 15px;
	overflow:hidden;
	display:block;
}
#footerNav li a{
	background-repeat:no-repeat;
	background-position: 0 0;
}
#footerNav li a:hover{
	background-position: 0 -15px;
}

#footerNav li#footerNav_park,
#footerNav li#footerNav_park a{width:169px;}
#footerNav li#footerNav_park a{
	background-image:url(../images/common/btn_park.png);
}
#footerNav li#footerNav_about,
#footerNav li#footerNav_about a{width:139px;}
#footerNav li#footerNav_about a{
	background-image:url(../images/common/btn_about.png);
}
#footerNav li#footerNav_mtv,
#footerNav li#footerNav_mtv a{width:90px;}
#footerNav li#footerNav_mtv a{
	background-image:url(../images/common/btn_mtv.png);
}

#footerNav li span{
	display:none;
}


#snsNav {
	float:left;
	list-style:none;
	overflow:hidden;
	margin:20px 0 0 0;
}
#snsNav li {
	float:left;
}
.snsTwitter {
	width:95px;
}
.snsFacebook {
	width:90px;
}
.snsMixi {
	width:73px;
}

#copy{
	float:right;
	width: 236px;
	height: 11px;
	overflow:hidden;
	margin:20px 0 0 0;
	background:url(../images/common/copy.png);
}
#copy span{
	display:none;
}

/* ------------------------------------------------------------
	3. Content
------------------------------------------------------------ */

#contents{
}

/* sidebar */
#nav{
	float:left;
	margin: 0;
	padding: 0;
	width: 355px;
	overflow: hidden;
}
#nav ul{
	margin: 0;
	padding: 0;
	width: 355px;
	list-style:none;
	overflow: hidden;
}
#nav ul li{
	width: 355px;
	height:115px;
	background:url(../images/nav/bg_sidebar.png);
}
#nav ul li,
#nav ul li a{
	margin: 0;
	padding: 0;
	overflow: hidden;
	display:block;
}
#nav ul li a{
	width: 350px;
	height:110px;
	background-repeat:no-repeat;
	background-position:0 0;
}
#nav ul li.active a,
#nav ul li a:hover{
	background-position:0 -110px;
}
#nav ul li a span{
	display:none;
}

/* product */
#nav ul li#nav_product a{
	background-image:url(../images/nav/btn_products.png);
}

/* sub */
#nav ul li#nav_sub{
	height:140px;
	background:url(../images/nav/bg_sub.png) 0 bottom no-repeat;
}
#nav ul li#nav_sub ul li{
	height:24px;
	margin: 15px 0 0 0;
	background:none;
}

#nav ul li#nav_sub ul li a{
	height:24px;
	background-repeat:no-repeat;
	background-position:0 0;
	margin: 0 0 0 15px;
}
#nav ul li#nav_sub ul li a:hover{
	background-position:0 -24px;
}

#nav ul li#nav_sub ul li#nav_sub_tvcm a{
	width: 180px;
	background-image:url(../images/nav/btn_tvcm.png);
}
#nav ul li#nav_sub ul li#nav_sub_tech a{
	width: 265px;
	background-image:url(../images/nav/btn_tech.png);
}
#nav ul li#nav_sub ul li#nav_sub_voice a{
	width: 200px;
	background-image:url(../images/nav/btn_voice.png);
}
#nav ul li#nav_sub ul li#nav_sub_detail a{
	width: 180px;
	background-image:url(../images/nav/btn_detail.png);
}


/* articles */

#articles{
	float:right;
	margin: 0;
	padding: 0;
	width: 580px;
	overflow: hidden;
}

.article{
	margin: 0 0 20px;
	padding: 0;
	width: 580px;
	overflow: hidden;
}

.article_header{
	margin: 0 0 20px;
	padding: 0;
	width: 580px;
	overflow: hidden;
}
.title{
	margin: 0 0 10px;
	padding: 0;
	width: 580px;
	overflow: hidden;
}
.catch{
	margin: 0;
	padding: 0;
	width: 580px;
	overflow: hidden;
}


.original{
	margin: 0 0 20px;
	padding: 0;
	width: 580px;
	overflow: hidden;
}
.original h4{
	margin: 0 0 10px;
	padding: 0;
	width: 214px;
	height: 20px;
	background:url(../images/artist/title_original.png);
}
.original h4 span{
	display:none;
}
.original_movie{
	margin: 0;
	padding: 0;
	width: 580px;
	height:322px;
	overflow: hidden;
	display:block;
	background-repeat:no-repeat;
	background-position:0 0;
}
.original_movie:hover{
	background-position:0 -322px;
}

.original_movie span{
	display:none;
}


.article_content{
	margin: 0 0 20px;
	padding: 0;
	width: 580px;
	overflow: hidden;
}

.digest{
	float:left;
	margin: 0;
	padding: 0;
	width: 270px;
	overflow: hidden;
}

.digest h4{
	margin: 0 0 10px;
	padding: 0;
	width: 144px;
	height: 20px;
	background:url(../images/artist/title_digest.png);
}
.digest h4 span{
	display:none;
}
.digest_movie{
	margin: 0;
	padding: 0;
	width: 270px;
	height:151px;
	overflow: hidden;
	display:block;
	background-repeat:no-repeat;
	background-position:0 0;
}
.digest_movie:hover{
	background-position:0 -151px;
}

.digest_movie span{
	display:none;
}

.profile{
	float:right;
	margin: 0;
	padding: 0;
	width: 270px;
	overflow: hidden;
}
.profile h4{
	margin: 0 0 10px;
	padding: 0;
	width: 85px;
	height: 20px;
	background:url(../images/artist/title_profile.png);
}
.profile h4 span{
	display:none;
}

.text{
	margin: 0 0 20px;
	padding: 0;
	color:#FFF;
	overflow: hidden;
	-webkit-text-size-adjust:none;
}
.text.sp{
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 120%;
}

.link{
	margin: 0;
	padding: 0 0 0 20px;
	color:#FFF;
	overflow: hidden;
	-webkit-text-size-adjust:none;
	background:url(../images/artist/btn_arr.png) no-repeat left center;
}

/* ------------------------------------------------------------
	4. Modal
------------------------------------------------------------ */

.modal{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:999;
	background:url(../images/modal/bg_modal.png);
}
.modalinner{
	position:absolute;
	top:0;
	left:0;
	z-index:999;
}
.btn_close{
	position:absolute;
	right:20px;
	top:20px;
	width:31px;
	height:31px;
	overflow:hidden;
	z-index:999;
}
.btn_close a{
	width:31px;
	height:31px;
	overflow:hidden;
	display:block;
	background-repeat:no-repeat;
	background-position: 0 0;
	background-image:url(../images/modal/btn_close.png);
}
.btn_close a:hover{
	background-position: 0 -31px;
}
.btn_close a span{
	display:none;
}

/* about */

#modalAbout{
	display:none;
}
#modalAboutInner{
	width:960px;
	height:600px;
	background:url(../images/modal/about.png);
}

/* player */

#modalPlayer{
	display:none;
}
#modalPlayerInner{
	width:960px;
	height:570px;
}
#overlay_interview,
#overlay_digest{
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	width:960px;
	height:570px;
	display:none;
}

.movie_btn1,
.movie_btn2,
.movie_btn3,
.movie_btn_replay{
	display:block;
	overflow:hidden;
	background-repeat:no-repeat;
	background-position: 0 0;
}
.movie_btn1 span,
.movie_btn2 span,
.movie_btn3 span,
.movie_btn_replay span{
	display:none;
}

.movie_btn1{
	margin: 100px auto 10px;
	width:480px;
	height:160px;
}
.movie_btn1:hover{
	background-position: 0 -160px;
}

.movie_btn2,
.movie_btn3{
	margin: 0 auto 70px;
	width:480px;
	height:98px;
}
.movie_btn2:hover,
.movie_btn3:hover{
	background-position: 0 -98px;
}

.movie_btn_replay{
	margin: 0 auto;
	width:134px;
	height:25px;
	background-image:url(../images/modal/btn_replay.png);
}
.movie_btn_replay:hover{
	background-position: 0 -25px;
}

/* ------------------------------------------------------------
	98. NoscriptMassage
------------------------------------------------------------ */

#noscriptMessage {	
	margin: 50px 0 0 50px;
	width: 500px;
	padding: 70px 20px 20px;
	overflow: hidden;
	text-align: left;
	background: #000;
	color: #666;
}

/* ------------------------------------------------------------
	99. Text
------------------------------------------------------------ */

body{
	color: #666;
	font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
h1,h2,h3,
h1 a,h2 a,h3 a{
	color: #fff;
}

a,
a:active,
a:visited {
	color: #fff;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}