@charset "utf-8";
/*---------------------------------------------------------------
artist.css
-----------------------------------------------------------------
table of contents

	1. Override
	2. Page Module
	3. Page Layout : Top
	4. Page Layout : Entry
	5. Browser Type
	6. Media Query

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

	1.	Override

===============================================================*/
.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
	
.clearfix{display: inline-block;} 

/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix {display:block;}
/* End Hack */ 

.aritist_ttl{
	font-size:14px;
	font-weight:bold;
	margin: 0 0 20px;
	width:100%;
}

.artist_name{
		width:290px;
		float:left;
		font-size:12px;
		line-height:20px;
	}

footer.global{
	clear: both;
	height: 107px;
	padding: 92px 0 0 0;
	position: relative;
}
footer.global nav{
	top:92px;
}
footer.global .deco{
	top: 101px;
}
.page-title{
	margin-bottom: 47px;
	padding: 0 0px 0 220px;
	width: 71px;
}

.caption{
	line-height: 18px;
	padding: 10px 0 0 0;
}


#side .inner{
	width: 104px;
}

#side ul{
	line-height: 1.4;
	padding-bottom: 52px;
	letter-spacing: 3px;
}

#side li{
	padding: 0 0 17px 0;
}

#side li a{
	font-size: 13px;
	letter-spacing:1px;
	line-height: 1.4!important;
	word-break: break-all;
}


/*===============================================================

	2.	Page Module

===============================================================*/
.history{
	padding: 0 0 30px 0;
	overflow: hidden;
	zoom: 1;
}

.history dt{
	clear: left;
	float: left;
}

/*===============================================================

	3.	Page Layout : Top

===============================================================*/
/*	#layout-btn
---------------------------------------------------------------*/
#layout-btn{
	display: block;
	position: absolute;
	right: 0;
	height: 29px;
	top: -5px;
	width: 35px;
}

#layout-btn a{
	background-image: url(../images/artist/btn_layout.gif);
	background-repeat: no-repeat;
	display: block;
	height: 100%;
	overflow: hidden;
	text-indent: -9999px;
	width: 100%;
	zoom: 1;
}

#layout-btn.line a{
	background-position: top left;
}

#layout-btn.line a:hover{
	background-position: bottom left;
}

#layout-btn.column a{
	background-position: top right;
}

#layout-btn.column a:hover{
	background-position: bottom right;
}

/*	#layout-line
---------------------------------------------------------------*/
#layout-line article{
	height: 355px;
	overflow: hidden;
	position: relative;
	zoom: 1;
}

#layout-line article .scroller{
	left: -19px;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 1500px;
	zoom: 1;
}

#layout-line article .scroller .scroll-inner{
	float: left;
	opacity: 0;
}

#layout-line article a{
	background: url(../images/null.gif);
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}


/* header */

#layout-line article header{
	background-color: #333;
	background-image: url(../images/icon_arrow_bg_fff05.png);
	background-position: 100% 19px;
	background-repeat: no-repeat;
	color: #fff;
	float: left;
	height: 265px;
	padding: 0 0 0 19px;
	width: 314px;
}

#layout-line article.hover header{
	background-image: url(../images/icon_arrow_bg_fff10.png);
}
/*
#artist.top #main article header.first{
	padding-left: 0!important;
}
*/
#layout-line article header .inner{
	height: 100%;
	position: relative;
}

#layout-line article header.first .inner{
	margin: 0 0 0 18px;
}

#layout-line article header h1{
	font-size: 18px;
	padding: 66px 0 0 0;
}

#layout-line article header dl{
	bottom: 0;
	left: 0;
	overflow: hidden;
	padding: 0 0 18px 0;
	position: absolute;
	width: 294px;
	zoom: 1;
}

#layout-line article header dl dt{
	clear: left;
	display: block;
	float: left;
}

#layout-line article header dl dd{
	/*padding: 0 0 0 43px;*/
	display: block;
	float: right;
	word-break: break-all;
}

/* .thumb-wrapper */

#layout-line article .thumb-wrapper{
	float: left;
	width: 333px;
}

#layout-line article .thumb-wrapper .thumb{
	background-color: #333;
	height: 265px;
	overflow: hidden;
	padding: 0 0 0 19px;
}

#layout-line article .thumb-wrapper .caption{
	font-size: 12px;
	padding: 10px 0 0 20px;
}


/*	#layout-column
---------------------------------------------------------------*/
#layout-column article{
	/*background-color: #333;
	color: #fff;*/
	margin: 0 0 4px 0;
	overflow: hidden;
	position: relative;
	zoom: 1;
}

#layout-column article.hover{
	background-color: #333;
	color: #fff;
}

#layout-column article header{
	float: right;
	overflow: hidden;
	zoom: 1;
}

#layout-column article header h1{
	font-size: 22px;
	float: left;
	letter-spacing: 3px;
	line-height: 90px;
}

#layout-column article header .text{
	display: block;
	float: right;
	line-height: 18px;
	padding: 7px 15px 0 0;
	width: 300px;
}

#layout-column article .thumb{
	float: left;
	height: 90px;
	overflow: hidden;
	position: relative;
	width: 314px;
}

#layout-column article .thumb .overlay{
	background-color: #fff;
	display: block;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#layout-column article a{
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}


/*===============================================================

	4.	Page Layout : Entry

===============================================================*/
#entry header{
	overflow: hidden;
	padding: 0 0 95px 0;
	zoom: 1;
}

#entry header .meta{
	float: right;
	margin-top:-10px;
}

#entry header .meta h1{
	font-size: 26px;
	letter-spacing: 3px;
	padding: 0 0 35px 0;
	line-height:2.5em;
	margin-top:-10px;
}

#entry header .meta .description{
	padding: 0 0 35px 0;
}

#entry header .meta dl{
	overflow: hidden;
	zoom: 1;
}

#entry header .meta dt{
	clear: left;
	float: left;
	/*font-weight: normal;*/
}

#entry header .meta dd{
	padding: 0 0 0 45px;
}

#entry header .thumb-wrapper{
	float: left;
	position: relative;
}

#entry header .thumb-wrapper .caption{
	/*bottom: 0;*/
	/*padding: 0 0 0 18px;*/
	padding: 10px 0 0 0;
	/*position: absolute;*/
}

#entry .caption{
	font-size: 12px;
}

#entry .box{
	padding: 0 0 80px 0;
}

#entry .large{
	clear: both;
}

#entry .left{
	clear: both;
	float: left;
}

#entry .right{
	float: right;
}

#entry-body{
	overflow: hidden;
	zoom: 1;
}
#entry-body .caption{
	padding-top:10px;
}


/*===============================================================

	5.	Browser Type

===============================================================*/
/*	for win
---------------------------------------------------------------*/
.win #layout-line article header h1{
	font-size: 17px;
	padding: 66px 0 0 0;
}

.win #layout-line article header dl dt{
	font-weight: bold;
	width: 53px;
}

.win #layout-line article header dl dd{
	width: 241px;
}

.win #layout-line article .thumb-wrapper .caption{
	font-size: 11px;
	letter-spacing: 1px;
	line-height: 1.4;
}

.win #layout-column article header h1{
	font-size: 21px;
}

/* #entry */

.win #entry header .meta h1{
	font-size: 26px;
	letter-spacing: 2px;
}

.win #entry dl.history dt{
	font-weight: bold;
	width: 53px;
}

.win #entry dl.history dd{
	padding: 0 0 0 53px;
}

.win #entry-body h2{
	font-weight: bold;
}

.win #entry .caption{
	font-size: 11px;
}

.win .history dt{
	font-weight: bold;
}

/* #side */

.win #side dl dt a{
	font-size: 12px;
}

.win #side dl li a{
	font-size: 12px;
}








/*	for mac
---------------------------------------------------------------*/
.mac #layout-line article header dl dt{
	font-weight: normal;
	width: 43px;
}

.mac #layout-line article header dl dd{
	width: 251px;
}

.mac #entry dl.history dt{
	font-weight: normal
	width: 43px;
}

.mac #entry dl.history dd{
	padding: 0 0 0 43px;
}

.mac #entry-body h2{
	font-weight: normal;
}

.mac .history dt{
	font-weight: normal;
}

.mac .ja .history dt{
	font-weight: bold;
}




/*===============================================================

	6.	Media Query

===============================================================*/
/*	for 480
---------------------------------------------------------------*/
@media screen and (max-width: 480px){

}

/*	for 1024
---------------------------------------------------------------*/
@media screen and (max-width: 1600px){

	/* #layout-column */

	.page-title{
		margin-bottom: 47px;
		padding: 0 0px 0 220px;
		width: 71px;
	}
	#layout-column article header{
		width: 666px;
	}

	#layout-column article header h1{
		padding: 0 18px;
		width: 314px;
	}
	
	/* #layout-line */
	#layout-column article header .text{
		display: block;
		float: right;
		line-height: 18px;
		padding: 7px 15px 0 0;
		width: 300px;
	}

	/* #entry */

	#entry header .thumb-wrapper{
		width: 647px;
	}

	#entry header .thumb-wrapper .caption{
		left: 647px;
		width: 314px;
	}

	#entry header .meta{
		width: 314px;
	}

	#entry .box{
		width: 480px;
	}

	#entry .large{;
		width: 980px;
	}
	#entry-body .caption{
		padding-top:10px;
	}

}

/*	for 1600
---------------------------------------------------------------*/
@media screen and (min-width: 1601px){

	/* #layout-column */

	.page-title{
		margin-bottom: 47px;
		padding: 0 0px 0 220px;
		width: 71px;
	}
	#layout-column article header{
		width: 964px;
	}

	#layout-column article header h1{
		padding: 0 20px 0 120px;
		width: 404px;
	}
	
	/* #layout-line */
	
	
	#layout-column article header .text{
		display: block;
		float: right;
		line-height: 18px;
		padding: 7px 115px 0 0;
		width: 300px;
	}

	/* #entry */

	#entry header .thumb-wrapper{
		width: 847px;
	}

	#entry header .thumb-wrapper .caption{
		left: 847px;
		width: 414px;
	}

	#entry header .meta{
		width: 414px;
	}

	#entry .box{
		width: 630px;
	}

	#entry .large{
		width: 1280px;
	}
	#entry-body .caption{
		padding-top:5px;
	}
	
}