@charset "UTF-8";

#more{
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color:#fff;
	z-index:110;
	min-width:480px;
	transform:translate3d(0px,0px,1px);
	-webkit-transform:translate3d(0px,0px,1px);
	transition:background .5s ease-in-out .5s; 
	-webkit-transition:background .5s ease-in-out .5s; 
}
#more.ylw{
	background-color:#fdd93f;
}
#more.ppl{
	background-color:#baa6ff;
}

#morearea{
	position:relative;
	margin:0 auto;
	top:100px;
}

#moreheader{
	position:absolute;
	top:-100px;
	height:80px;
	width:100%;
	background-color:#fff;
	z-index:100;
	-moz-transform:translate3d(0,0,1px);
	-webkit-transform:translate3d(0,0,1px);
	-o-transform:translate3d(0,0,1px);
	-ms-transform:translate3d(0,0,1px);
	
	transition:background .5s ease-in-out .5s; 
	-webkit-transition:background .5s ease-in-out .5s; 
}
.ylw #moreheader{
	background-color:#fdd93f;
}
.ppl #moreheader{
	background-color:#baa6ff;
}
#moreheader .logo{
	position:absolute;
	top:8px;
	left:0px;
}
#moreheader .closeBtn{
	position:absolute;
	top:24px;
	right:15px;
}

#moreheader .shareArea{
	position:absolute;
	top:50%;
	left:125px;	
}
#moreheader .shareArea li.hatena{ width:70px;}
#moreheader .shareArea li.hatena iframe{ width:60px !important;}
.ie #moreheader .shareArea li.fb{}
.ie #moreheader .shareArea li.tw{}
.ie #moreheader .shareArea li.google{ width:100px;}
.ie #moreheader .shareArea li.google iframe{ width:100px !important;}

#moreclosebtn{
	position:absolute;
	top:24px;
	right:0px;
}
#moreclosebtn a{
	position:relative;
	width:130px;
	height:34px;
	display:block;
}
#moreclosebtn a img{
	position:absolute;
}

#morebox{
	position:relative;
	height:100%;
}

#morescrollbararea{
	position:absolute;
	right:-20px;
	top:0px;
	width:10px;
	height:100%;
	max-height:480px;
}