/* MENU */
#leftmenu {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
@media screen and (max-width: 680px) {
#leftmenu, #rightmenu {
	width: 100%;
	float: none;
}
}
.menu_bumon {
	position: relative;
	text-align: center;
	width: 100%;
	text-align:left;
}
.menu_bumon_hint {
	margin: 0; padding: 0;
	position: absolute;
	bottom: 5%; right: 5%;
	z-index: 1;
	color: #ccc;
	font-size: x-small;
}
ul#menu_review {
	display: block
}
	ul#menu_review li {
		display: block;
		width: 100%;
	}
	ul#menu_review li a {
		display: block;
		background-image:url(../../images/result_toparrow.gif);
		background-position: 95% 30%;
		background-repeat: no-repeat;
	}
	ul#menu_review li a:hover {
		display: block;
		background-image:url(../../images/result_toparrow_h.gif);
		background-position: 95% 30%;
		background-repeat: no-repeat;
		background-color: rgba(200,0,0,.4);
	}
@media screen and (max-width: 330px) {
ul#menu_review li a, ul#menu_review li a:hover, ul#menu_perf li a, ul#menu_perf li a:hover {
		background-position: 98% center;
}
}


.auth_wrap {
	margin: 0 0 1.5em 1em;
	width: 80%;
	max-width: 550px;
	
}
@media screen and (max-width: 550px) {
.auth_wrap {
	margin: 1em 0 1.5em 0;
	width: 100%;
}
}
.author {
	color: #FFFFFF;
	position: relative;
	width: 109px;
	height: 133px;
	float: left;
	background-color: #0099FF;
	z-index: -1;
}
.author:after {
	display: block;
	position: absolute;
	background-image:url(../../images/goldwaku.png);
	content: "";
	top: 0; left: 0;
	width: 109px;
	height: 133px;
	z-index: 0;
	
}
@media screen and (max-width: 460px) {
.author {
	position: relative;
	width: 28%;
	height: auto;
	float: left;
	background-color: #000;
	z-index: -1;
		margin-left: 2%;
}
.author:after {
	display: block;
	position: absolute;
	background-image: none;
	content: "";
	top: 0; left: 0;
	width: 30%;
	height: auto;
	z-index: 0;
	
}

}
.bumon {
	position: absolute;
	top: 1%; right: 3%;
	width: 30%;
	max-width: 176px;
}
@media screen and (max-width: 1280px) {
.bumon {
	width: 25%;
	right: 1%;
}
    
    
}
@media screen and (max-width: 480px) {
.bumon {
	width: 24%;
	top: 4px;
	right: 1%;
}
}
.artistname {
	width: 65%;
	color: #FFF;
	font-size: 18px;
	float: left;
	margin-left: 1em;
	padding-top: 1%;
}
@media screen and (max-width: 460px) {
.artistname {
	width: 65%;
	color: #FFF;
	font-size: 18px;
	float: left;
	margin-left: 2%;
	padding-top: 1%;
}
}
.work, .jenre, .comments {
	color: #FFF;
	font-size: 18px;
	clear: both;
	margin: 0 0 1em 1em;
}
.comments_bun {
	display: block;
	margin: 0 0 0 1.5em;
	text-indent: 1em;
	width: 95%;
	max-width: 450px;
}
@media screen and (max-width: 480px) {
.comments_bun {
	width: 90%;
	margin: 0 0 0 1em;
		font-size: 90%;
}
}
.minigal {
	margin: 1.5em 0 0 1em;
}
.messageboard {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
.message {
	position: absolute;
	top: 30%; left: 0;
	color: #FF0000;
	font-size: x-small;
	padding: 0 10% 0 8%;
}
.shadow {
	text-shadow: 1px 1px 1px #999;
}
@media screen and (max-width: 480px) {
.work, .jenre, .comments, .minigal {
	margin: 1.5em 0 1.5em 0;
}
}

/* ***** header images ***** */
#sub_artist {
	width: 100%;
	max-width: 350px;
}

#sub_work, #sub_tech, #sub_com {
	width: 100%;
	max-width: 510px;
}
#sub_gal {
	display: inline;
}
#sub_gal_s {
	display: none;
}
@media screen and (max-width: 480px) {
#sub_gal {
	display: none;
}
#sub_gal_s {
	display: inline;
	width: 100%;
}
}
#name_x {
	margin: 0.2em 0 0 0;
}
#work_x, #work_oda, #tech_x, #tech_oda {
	margin: 0.5em 0 0 7em;
}
@media screen and (max-width: 550px) {
#work_x, #work_oda, #tech_x, #tech_oda {
	margin: 0.5em 0 0 1em;
}
}



/* images */


ul.bottomnavi_review {
	list-style-type: none;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3em;
	text-align: center;
}
	ul.bottomnavi_review li {
		float:left;
		display: block;
		margin-right: 10px;
	}

		ul.bottomnavi_review li#prevpage a {
			font-weight: bold;
			color: #FFF;
			text-decoration: none;
			display: block;
			background-image:url(../../images/result_back.png);
			width: 110px;
			height: 30px;
		}
		ul.bottomnavi_review li#prevpage a:hover {
			background-image:url(../../images/result_back_hover.png);
		}
		ul.bottomnavi_review li#nextpage a {
			font-weight: bold;
			color: #FFF;
			text-decoration: none;
			display: block;
			background-image:url(../../images/result_next.png);
			width: 110px;
			height: 30px;
		}
		ul.bottomnavi_review li#nextpage a:hover {
			background-image:url(../../images/result_next_hover.png);
		}
		ul.bottomnavi_review li#toppage a {
			font-weight: bold;
			color: #FFF;
			text-decoration: none;
			display: block;
			background-image:url(../../images/result_top.png);
			width: 90px;
			height: 30px;
		}
		ul.bottomnavi_review li#toppage a:hover {
			background-image:url(../../images/result_top_hover.png);
		}

#introduction {
	width: 73%;
	height: 116px;
	max-width: 526px;
	position: relative;
	line-height: 0;

}
@media screen and (max-width: 800px) {
#introduction {

	width: 100%;

}
 
    
}
@media screen and (max-width: 400px) {
#introduction {
	width: 100%;

}
    
    .review {
	font-size: small;
    margin: 4em 0 0 0;
}
    
 #pic {
	width: 90px;
	height: 90px;
	position: absolute;
	
}
#namespace {
	position: absolute;
    
	bottom: -10px; left: 90px;	
}    
    
    #name h1 {
	width: 100%;
	float: left;
	padding: 5px 5px 5px 5px;
    font-size: 200%;
    color:#fff;
}

#name h2 {
	width: 100%;
	float: left;
	padding: 0 5px 5px 5px;
    font-size: 100%;
    color:#c11920;
    font-weight: bold;
   
}
#name h3 {
	width: 100%;
	float: left;
	padding: 0 5px 5px 5px;
    font-size: 100%;
    color:#999;
    font-weight: bold;
   
  
}

#name h4 {
	width: 100%;
	float: left;
	padding: 0 5px 5px 5px;
    font-size: 100%;
    color:#ccc;
    
}
}



#pic {
	width: 90px;
	height: 90px;
	position: absolute;
	bottom: 0;
}
#namespace {
	position: absolute;
	bottom: -10px; left: 90px;	
}
#name {
	width: 100%;
	float: left;
	padding: 0 5px 5px 5px;
    	
    
}

#name h1 {
	width: 100%;
	float: left;
	padding: 0 5px 0px 5px;
	font-size: 220%;
	color:#333;
}

#name h2 {
	width: 100%;
	float: left;
	padding: 0 5px 0px 5px;
    font-size: 120%;
    color:#c11920;
    font-weight: bold;
    
   
}
#name h3 {
	width: 100%;
	float: left;
	padding: 0 5px 0px 5px;
	font-size: 120%;
	color:#666;
	font-weight: bold;
    
   
  
}

#name h4 {
	width: 100%;
	float: left;
	padding: 0 5px 0px 5px;
	font-size: 130%;
	color:#999;
    
}
#name img {	margin-right: 3px; vertical-align: bottom; }
	#s4 { width: 65%; max-width: 190px; }
	#s3 { width: 63%; max-width: 172px; }

#st20 {
	height: 20px;
	float: left;
	vertical-align: bottom;
}
#st40 {
	height: 40px;
	padding-top: 8px;
	float: left;
}
@media screen and (max-width: 600px) {
#st20 {
	height: auto;
	padding-top: 0;
	float: left;
}
#st40 {
	height: auto;
	padding-top: 0;
	float: left;
}
}

.review {
	color: #333;
	font-size: medium;
	font-weight: normal;
	width: 100%;
	max-width: 1000px;
	margin: 2em 0 0 0;
	letter-spacing: 0.05em;

}
@media screen and (max-width: 360px) {
.review {
	font-size: small;
    margin: 4em 0 0 0;
}
    
    #pic {
	width: 90px;
	height: 90px;
	position: absolute;
	bottom: -10px;
}
#namespace {
	position: absolute;
    top:0;
	bottom: -10px; left: 90px;	
}
    
    #name h1 {
	width: 100%;
	float: left;
	padding: 0 5px 0px 5px;
	font-size: 200%;
	color:#333;
}

#name h2 {
	width: 100%;
	float: left;
	padding: 0 5px 0px 5px;
    font-size: 100%;
    color:#c11920;
    font-weight: bold;
   
}
#name h3 {
	width: 100%;
	float: left;
	padding: 0 5px 5px 5px;
	font-size: 100%;
	color:#666;
	font-weight: bold;   
   
    
   
  
}

#name h4 {
	width: 100%;
	float: left;
	padding: 0 5px 5px 5px;
	font-size: 100%;
	color:#999;    
}
    
    
    .bumon {
	position: absolute;
	top: 1%; right: 3%;
	width: 30%;
	max-width: 176px;
        display:none;
}
}
	.review p {
	text-indent: 1.5em;
	margin-bottom: 1.5em;
	line-height: 2em;
	
	}
		a.strong {
			color: #FF6;
			font-weight: bold;
			padding: 0 5px;
			background: none;
			/*アニメーション指定*/
			transition-property: color, background;
			transition-duration:0.2s;
			transition-timing-function: linear;
			transition-delay:0;
		}
		a.strong:hover {
			text-decoration: none;
			color: #FC6;
			font-weight: bold;
			background: #333;
		}

		.review strong {
			color: #F9F;
			font-weight: bold;
		}

	
.award_grand {
	color: #FF0033;
	font-weight: bold;
}
.award_ex {
	color: #FFFF00;
	font-weight: bold;
}


#hide {
	 width: 100%;
	 height: 0;
	 overflow: hidden;
	 opacity: 0;
    	/*アニメーション指定*/
		transition-property: height, opacity;
		transition-duration:0.5s;
    	transition-timing-function: linear;
    	transition-delay:0s;
}
#hide.activ {
	height: auto;
	opacity: 1;
}