*{
  margin: 0;
  padding: 0;
}

img{
  border: 0px;
}

body {
  font-size: small;
  color: #444;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", verdana, arial, Sans-Serif;
  background-color: #e8e8e8;
  background-image: url(../img/bg.gif);
  background-repeat: repeat-x;
}

a { text-decoration: none; }
a:hover { text-decoration: underline }

#wrapper{
  margin: 0 auto;
  text-align: left;
  width: 770px;
}

#header {
  width: 770px;
}

#description{
  padding: 4px 15px;
  letter-spacing:2px;
  color: white;
}

#headerContent{
  position: relative;
  height: 217px;
}

#headerContent h1 a{
  margin-left: 5px;
  width: 194px;
  display: block;
  height: 0 !important; 
  height /**/: 68px; 
  padding: 68px 0 0 0;
  overflow: hidden;
}
#btnChangeColor{
  position: absolute;
  top: 22px;
  right: 30px;
}

#btnChangeColor li {
  list-style: none;
  display: block;  
  float: left;
  padding: 0 4px 0px 4px;
  width: 13px;
}

#btnChangeColor li a{
  display: block;
  width: 13px;
  height: 0 !important; 
  height /**/: 13px;
  padding-top: 13px;
  overflow: hidden;
}

#btnChangeColor li a.red{
  background: url(../img/btn_change_color_red.gif) no-repeat;
}
#btnChangeColor li a.yellow{
  background: url(../img/btn_change_color_yellow.gif) no-repeat;
}
#btnChangeColor li a.green{
  background: url(../img/btn_change_color_green.gif) no-repeat;
}
#btnChangeColor li a.blue{
  background: url(../img/btn_change_color_blue.gif) no-repeat;
}
#btnChangeColor li a.purple{
  background: url(../img/btn_change_color_purple.gif) no-repeat;
}
#btnChangeColor li a.black{
  background: url(../img/btn_change_color_black.gif) no-repeat;
}

#headerMenu {
  position: absolute;
  top: 182px;
  right: 30px;
}

#headerMenu li{
  list-style: none;
  background: url(../img/list_header_menu.gif) no-repeat;
  padding: 0 6px;
  display: block;
  float: left;
}

#headerMenu li.about  {  width: 106px; background: none;}
#headerMenu li.works  {  width: 58px;  }
#headerMenu li.profile{  width: 82px;  }
#headerMenu li.contact{  width: 58px;  }

#headerMenu li a {
  display: block;
  height: 0 !important; 
  height /**/: 24px; 
  padding: 24px 0 0 0;
  overflow: hidden;
}

#headerMenu li.about a:hover,
#headerMenu li.works a:hover,
#headerMenu li.profile a:hover,
#headerMenu li.contact a:hover{
  background-position: 0 -24px;
}

#headerMenu li.works a {
  background: url(../img/btn_header_menu_works.gif) no-repeat;
}

#headerMenu li.about a {
  background: url(../img/btn_header_menu_about.gif) no-repeat;
}
#headerMenu li.profile a {
  background: url(../img/btn_header_menu_profile.gif) no-repeat;
}

#headerMenu li.contact a {
  background: url(../img/btn_header_menu_contact.gif) no-repeat;
}

#main {
  width:770px;
  background: url(../img/bg_main.jpg);
}

#menu {
  width:264px;
  float:left;
}

#menu ul, dl{
  padding:17px 0 0 15px;
}

#menu li{
  padding-bottom: 7px;
  list-style: none;

}

#menu li a{
  display: block;
  width:236px;
  height: 0 !important; 
  height /**/: 61px; 
  padding: 61px 0 0 0;
  overflow: hidden;

}

#menu_about a { background: url(../img/btn_menu_about.jpg) no-repeat; }
#menu_about a:hover { background-position: 0 -70px; }
#menu_works a { background: url(../img/btn_menu_works.jpg) no-repeat; }
#menu_works a:hover { background-position: 0 -70px; }
#menu_profile a { background: url(../img/btn_menu_profile.jpg) no-repeat; }
#menu_profile a:hover { background-position: 0 -70px; }
#menu_contact a { background: url(../img/btn_menu_contact.jpg) no-repeat; }
#menu_contact a:hover { background-position: 0 -70px; }






#content {
  margin-top:17px;
  width:491px;
  float:left;
}

div.blogBnr{
  position: relative;
  height: 88px;
  margin:0 0 25px 0;
  background: url(../img/blog_bnr.jpg) no-repeat;
}

div.blogBnr p a{
  width: 491px;
  display: block;
  height: 0 !important; 
  height /**/: 88px; 
  padding: 88px 0 0 0;
  overflow: hidden;
}


#content h2{
  background: url(../img/bg_content_header03.gif) no-repeat;
  padding:1px 1px 0 1px;
  border-left-width: 4px;
  border-left-style: solid;
  text-indent:8px;
  line-height: 1.7em;  
}

#content .contentBody{
	padding:10px 10px;
}

#content .contentBody p{
  padding:6px 0;
  line-height: 1.4em;
 }

#content dd{
  margin-bottom: 10px;
}

#content #comment-text{
  font-size:100%;
}

#content .contentFooter{
  text-align:right;
}

#mainFooter{
clear:both;
padding: 20px 0 5px 15px;
width: 755px; 
}

#footer {
  text-indent:-10000px;
  width:770px;
  height:51px;
}






/* topここから */
#top h3 {
  border-bottom:1px dotted #999999;
  padding:2px 0 5px 0;
}

#top div.contentBody ul {
  background-color: #f4f4f4;
}

#top div.contentBody{
  position: relative;
}
#top div.contentBody p.icon_atom {
  position: absolute;
  top: 6px;
  left: 406px;
}
#top div.contentBody p.icon_rss {
  position: absolute;
  top: 6px;
  left: 446px;
}

#top #whatsnew_blog,
#top #whatsnew_works
{
  list-style: none;
  padding:4px 8px;
}

#top #whatsnew_blog li,
#top #whatsnew_works li
{
  line-height: 1.4em;
}

/* topここまで */






/* aboutここから */
#about p.contentFooter{
  padding-bottom:0;
}
/* aboutここまで */



/* profileここから */

#profile div.contentBodyImg {
  margin:10px 0 10px 0;
}

#profile div.contentBodyImg {
  float:left;
}

#profile div.contentBodyText {
  float:right;
  width:300px;
  background: url(../profile/img/member_bg.gif) no-repeat;
  padding-bottom:15px;
}

#profile p.nameend {
  border-bottom:1px dotted #999999;
}

#profile p.common {
  margin:5px 0 0 0;
  padding:0;
}

#profile p.personal {
  margin:0;
  padding:0 0 0 15px;
}


/* profileここまで */



/* worksここから */
#works p.entryFooter{
  text-align:right;
  padding:2px;
}

#works h3 {
  padding:5px 0 5px 0;
  border-bottom: 1px dotted #999999;
}

#works h3 a {
  text-decoration:none;
  color: #444;
}

/* worksここまで */



/* contactここから */
#contact div.contentBody dt{
  padding:4px 0 2px 0;
}

#contact span.err_str{
  color: red;
}
#contact #confirm dt{
  border-bottom:1px dotted #ccc;
  font-weight: bold;
}
#contact dd{
  margin: 6px 0 20px 0;
}
/* contactここまで */







/* blogここから */
#blog h2{
  font-size: 1.2em;
  border-left-width: 4px;
  border-left-style: solid;
  text-indent: 8px;
  line-height: 1.7em;  
}

#blog h2 a{
  text-decoration: none;
  color: #444;
}

#blog #content {
  margin-top: 8px;
}


#blog p.blog_bnr {
 margin: 0 0 25px 0;
}

#blog blockquote{
  margin: 10px 20px;
  border-left: 4px solid #ccc;
  padding:8px;
}

#blog p.entry_extended {
 text-align: right;
}

#blog p.entryFooter{
  text-align:right;
  padding: 2px;
}

#blog p.relatedEntryHeader{
  padding-top:10px;
  font-weight: bold;
}

#blog p.relatedEntry{
  padding:0px;
}

#blog p.entryTag{
  text-align:right;
  padding: 0 2px 30px 2px;
}

#blog div.contentBody h3{
  
  font-size:1em;
  background-color: #f4f4f4;
  margin-top:10px;
  padding: 4px;
}

#blog p.commentFooter {
  text-align: right;
  border-bottom: 1px dotted;
}

#blog p.trackbackFooter{
  text-align: right;
  border-bottom: 1px dotted;
}



#blog #pankuzu {
  padding:4px 15px;
}

#blog #blogMenu {
  width:264px;
  float:left;
  margin-top: 8px;
}

#blog #blogMenu dl{
  padding:0 15px;
}
#blog #blogMenu #feedBanner{
  position:relative;
}

#blog #blogMenu p.icon_atom{
  position: absolute;
  left:40px;
}
#blog #blogMenu p.icon_rss{
  position: absolute;
  left:80px;
}

#blog #blogMenu dt{
  border-top: 1px solid #C9CCB6;
  border-bottom: 1px solid #C9CCB6;  
  background-color:#E8EADD;
  padding: 1px 6px;
  font-weight: bold;
  font-size: 1em;
}

#blog #blogMenu dd{
  padding: 10px 8px 14px 8px;
}

#blog #blogMenu ul{
  padding:5px 0 15px 15px;
}

#blog #blogMenu li{
  list-style-type: circle;
  line-height: 1.4em;
}

#blog #blogMenuTags {
  text-align: center;
}

#blog #blogMenuTags a{
  color: #444;
}

#blog #blogMenuTags span{
  line-height:1.1em;
}

#about div.contentBody img.right,
#blog div.contentBody img.right
{
  float: right;
  margin:3px 0 10px 10px;
}

#about div.contentBody img.left,
#works div.contentBody img.left,
#blog div.contentBody img.left{
  float: left;
  margin:3px 10px 10px 0;
}