@charset "UTF-8";

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
body{font:12px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

ruby > rt{
  font-size: 80%;
}

/* common --------------------
*/
html,body{
  background: #fff;
  color: #000;
  font-size: 10px;
  font-family: Avenir, Helvetica, Arial, "Hiragino Kaku Gothic Pro", sans-serif;
}

.sml{
  font-size:12px;
}

.red{
  color:#c00;
}
.left{
  float:left;
}

.right{
  float:right;
}

.clearfix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix{ display:inline-table; }
/* mac os \*/
* html .clearfix{ height 1%; }
*+html .clearfix{ height 1%; }
.clearfix{ display:block; }
/**/



a{
  text-decoration:none;
  color:#03F;
}

a:hover{
  text-decoration:underline;
}




/*
	layout
*/
#r{
  width:100%;
}


#c{
  width:100%;
}



#side{
  position:fixed;
  top:0px;
  left:0px;
  z-index:5;
  background-color:#FFF;
  width:170px;
  min-height:100%;
  font-size:14px;
}



#main{
  margin:0 0 0 170px;
}




/*
	side
*/
#side a{
  color:#000;
}

#side a:hover{
  color:#00F;
}


#side #hd {
  text-align:center;
}

#side #hd h1 a{
  display:block;
  margin:33px 0 0 0;
  width:170px;
  height:90px;
  background-image:url(/img/toplogo.jpg);
  background-repeat:no-repeat;
  text-indent:-10000px;
}

#side #hd #meta{
  display:none;
}


#side #side_menu{
  margin:35px 0 0 0;
}


#side .menu_txt
{
  width:170px;
  text-align:center;
  font-style:italic;

}

#side .menu_txt a:hover{
  color:#00F;
  text-decoration:none;
}
#side .menu_txt a span.yaji{
  padding: 0 3px;
}
#side .menu_txt a:hover span.yaji{
  padding: 0;
}


#side #side_menu #member{
  margin:100px 0 0 0;
}

#side #side_menu #member .auth_name{
  cursor:pointer;
}

#side h2{
  margin:5px 0 0 4px;
}





/* ------------------------------------------------------------
	main
------------------------------------------------------------ */

#main h3{
  margin:30px 0 0 0;
  font-size:1.5em;
}
#main h3 span{
  padding: 3px 3px 0 3px;
}

#main .thumbnail{
  float:left;
  height: 240px;
  width: 210px;
  position:relative;
  padding: 0;
  margin: 20px 40px 20px 20px;
  text-align:center;
}
#main .thumbnail img{
  filter: none;
  -webkit-filter: grayscale(0%);

  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;

  border-radius: 5px;
  box-shadow: 2px 2px 7px #999;

}
#main .thumbnail img:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  box-shadow: 0 0 0 #999;
}


#main .thumbnail .discription h4{
  font-size: 12px;
  padding-bottom: 10px;
}

#main .thumbnail .discription{
  padding: 10px;
}

#main .thumbnail .discription ul li{
  display: inline;
  color: #999;
}
#main .thumbnail .discription ul li:first-child:after{
  content: " ● ";
}


/*
	detailpage
*/

#detail #main{
  margin:0px 0px 0px 190px;
}


#detail #main #img_main{
  margin:33px 0px 70px 0px;
}
#detail #main #season,
#detail #main #work_title{
  line-height:26px;
  font-weight:bold;
  font-style:italic;
  font-size:12px;
}

#detail #main #work_title{
  font-size:18px;
}


#detail #main #discription{
  margin:40px 0px 0px 0px;
  width:410px;
}


#detail #main table{
  margin:70px 0px 200px 0px;

}

#detail #main .tt_t{
  font-size:10px;
  width:50px;
  height:40px;
}

#detail #main .tt_c{
  font-size:14px;
}



/*
	about page
*/

#about #main {
  margin:0px 0px 0px 190px;
  font-size:16px;
}


#about #main .mds{
  font-weight:bold;
}

#about #main .slm{
  font-size:10px;
}


#aboutarea{
  padding:150px 0px 25px 0px;
  margin:0px 0px 75px 0px;
  width:420px;
}

#about #main #discription{
  letter-spacing:.1em;
  line-height:2.5em;
  font-size:11px;
}



#about #main #menber{
  margin:35px 0px 30px 0px;
}

#about #main .list_tbl{
  width:400px;
  font-size:14px;
  letter-spacing:.1em;
  line-height:3em;
}

#about #main .list_tbl .tw,
#about #main .list_tbl .hp{
  width:50px;
  text-align:right;
}

#about #main .list_tbl .name{
  font-size:14px;
}

#about #main .topm{
  margin-top:50px;
}

#about #main .glay{
  color:#999;
}

#about #main .blue{
  color:#00F;
}

#about #main .i{
  font-style:italic;
}


#about #main #mail{
  margin:75px 0px ;
}