@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
html, body { margin:0; padding:0; }
body { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; font-size:14px; }
img { border:none; vertical-align: bottom; max-width:850px;}
br { letter-spacing:0; }
form { margin:0;}

h3,h4{ font-family: 'Open Sans', sans-serif; font-weight:800;}

a:link, a:visited, a:hover, a:active { text-decoration:none; }
a:link, a:visited { color:#333333;}
a:hover, a:active { color:#cc0000;}
#top { text-align:center; margin:230px auto 100px auto; vertical-align:middle; }
#top h1 { font-family: 'Open Sans', sans-serif; font-weight:800; font-size:24px; margin:0; padding:0; line-height:24px; }
#top #menu { margin:20px auto; }
#top #menu ul { width:510px; margin:0 auto; padding:0; display:block; overflow:auto; }
#top #menu li { margin:0 auto; padding:0; list-style:none; }
#top #menu li { float:left; padding:5px 10px; }
#top #menu li a:link, #top #menu li a:visited { color:#000000; font-family:'Open Sans', sans-serif; font-weight:800; font-size:12px; text-decoration:none; }
#top #menu li a:hover, #top #menu li a:active { color:#999999; }

#clear { clear:both;}
#header { width:100%; margin:0; padding: 0; background:#ffffff; position: fixed; top:0; left:0; z-index:1; }
* html div#header { position: absolute; top: expression(eval(document.documentElement.scrollTop+0));
}
#header #head { width:950px; height:84px; margin:0 auto; padding:10px 0; }
#header #logo { width:400px; height:80px; display:block; float:left;}
#header #logo img { float:left;}
#header #logo h1 { font-family: 'Open Sans', sans-serif; font-size:20px; margin:0; padding:0 0 0 10px; line-height:80px; float:left; }
#header img { }
#header #menu { width:510px; float:right; padding:0 0 0 0; }
#header #menu ul { margin:0; padding:0; }
#header #menu li { margin:0 10px; padding:5px 0; float:left; list-style:none; height:40px; font-family:'Open Sans', sans-serif; font-weight:800; font-size:12px; line-height:70px; }
#header #menu li a:link, #header #menu li a:visited { color:#000000; text-decoration:none; }
#header #menu li a:hover, #header #menu li a:active { color:#999999; }
#header #menu li.current { color:#000000; border-bottom:#e2022b solid 3px; }
#contents { width:950px; margin:0 auto; padding:120px 0 30px 0; }
.profile { width:300px; padding:20px 10px; line-height:28px; float:left; }
.work { width:560px; padding:20px; margin:0 0 0 345px; line-height:28px; _letter-spacing:1px; *letter-spacing:1px;
letter-spacing:1px\9; }
.work dt { font-weight:bold;}
.work dd { margin:0; padding:0 0 0 20px; }

.contacts { text-align:center; padding:50px auto 20px auto; }
.contacts .con { font-size:14px; padding:3px; width:380px; }
.contacts table { margin:10px auto;}
#submit { width:50px; height:26px; margin:0 0 0 90px;}
#back { width:50px; height:26px; float:left; position: relative; left: 400px; top: -27px; right: 0px; bottom: 0px; }
.formbutton { font-size: 11px; background: white; color: #494949; border-top: 1px solid #D4D2CF; border-left: 1px solid #D4D2CF; border-bottom: 1px solid #868686; border-right: 1px solid #868686; margin: 1px 0 0 0; }

#blog { width:750px; margin:0 0 0 0; float:right; }
#blog #clear { height:20px;}
#blog800 { width:810px; margin:0 0 0 0; float:right;} 
#blog img { max-width:750px;}
#project { }
#project h3 {}
#project h4, #project .txt, #project .gallery { width:90%; margin:auto;}
#project h4 { height:50px;}
#project .space { margin:100px;}

#project #categorylist { width:935px; margin:0; padding:0 0 15px 15px;}
#project #categorylist dt, #project #categorylist dd { float:left; line-height:150%; padding:0 0 15px 15px; }
#project #item { width:227px; padding:0 5px; float:left;}
#project #item img { margin:10px 13px;}
#project .contenttitle h2 #edit { font-size:10px; line-height:24px; font-weight:normal; float:right; }
#blog800 .contenttitle h2 #edit { font-size:10px; line-height:24px; font-weight:normal; float:right; }

#works { }
#works #categorylist { width:935px; margin:0; padding:0 0 15px 15px;}
#works #categorylist dt, #works #categorylist dd { float:left; line-height:150%; padding:0 0 15px 15px; }
#works #item { width:940px; padding:0 5px; float:left;}
#works #item img { margin:10px 13px;}
#works .contenttitle { width:900px;}
#works .contenttitle h2 #edit { font-size:10px; line-height:24px; font-weight:normal; float:right; }

#koten img { max-width:150px;}

#leftside { width:170px; margin:0; padding:0; float:left; position:fixed; }
#leftside dl { margin:20px 0 20px 15px;}
#leftside dt { margin:0 0 5px 0; font-family:'Open Sans', sans-serif; font-weight:800;}
#leftside dd { margin:0 0 0 10px; padding:0;}
#leftsidep { width:100px; height:1000px; margin:0; padding:0; float:left; position:fixed; background:url(project_side.jpg) top left no-repeat;}

/*-------------------------------------------------
  Item styles
-------------------------------------------------*/
.contenttitle h2 { clear: both; font-size: 18px; padding: 0 0 6px 0; margin: 0; line-height:20px; }
.contenttitle h2 a:link, .contenttitle h2 a:visited { color:#333333;}
.contentbody { font-size:14px; text-align: justify; padding: 15px 0 30px 0; line-height:150%; }
/*-------------------------------------------------
  Item info
-------------------------------------------------*/
.contentitemcategory { background: url(img/bgcategory.gif) center left no-repeat; font-size: 12px; line-height: 12px; padding: 0 5px 0 14px; }
.contentitempostedby { background: url(img/bgpostedby.gif) center left no-repeat; font-size: 12px; line-height: 12px; padding: 0 5px 0 12px; }
.contentitemcomments { background: url(img/bgcomment.gif) center left no-repeat; font-size: 12px; line-height: 12px; padding: 0 5px 0 13px; }
.contentitemedit { background: url(img/bgedit.gif) center left no-repeat; font-size: 12px; line-height: 12px; padding: 0 5px 0 11px; }
.contentitemdate { background: url(img/bgedit.gif) center left no-repeat; font-size: 12px; padding-left: 12px; margin-left: 15px; }
.contentitem { padding: 2px 10px 0px 10px; margin: 0 0 6px; }
.contentitem1 { display: inline; }
.contentitem2 { display: inline; background: url(img/dotv.gif) left repeat-y; padding: 0 0 0 10px; }
.contentitem3 { display: inline; background: url(img/dotv.gif) left repeat-y; padding: 0 0 0 10px; }
.contentitem4 { display: inline; padding: 0 0 0 10px; background: url(img/dotv.gif) left repeat-y; }
.contentadddate { display: inline; padding: 0 0 0 10px; background: url(img/dotv.gif) left repeat-y; }
/*Clendar*/
#leftside table { margin:0; padding:0; border:0;}
table.calendar { background-color:#ffffff; border-collapse: collapse; font-family: 'Open Sans', sans-serif; font-weight:800; border:0 solid #333333; margin:5px 0; }
table.calendar caption { color:#aaa; letter-spacing:1px; padding:4px 0; text-align:center; }
table.calendar th, table.calendar td { border:0 solid #333333; font-size:12px; font-weight:400; width:18px; height:16px; margin:0; padding:2px; }
table.calendar th { text-align:right; }
table.calendar td { text-align:right; }
tr.calendardateheaders { background-color:#ffffff; color:#333333; }
td.blank { background-color:#ffffff; }
td.saturday { background-color:#ffffff; color:#3399FF; }
td.sunday { background-color:#ffffff; color:#FF6666; }
td.holiday { background-color:#fff3ee; color:#FF6666; }
td.today { background-color:#ffffcc; color:#666666; }
table.calendar a:link, table.calendar a:visited { background:none; padding:0; text-decoration:underline; }
table.calendar a:hover { text-decoration:underline; color:#000000; }
table.calendar { margin:0 auto; }
#counter { margin:10px 0; }


.leftbox,
.rightbox { font-size: larger; width: auto; height: auto; text-align: center; vertical-align: middle; }
.leftbox { float: left; padding:0 8px 15px 0; }
.rightbox { float: right; padding:0 0 15px 8px; }
.centerbox { text-align:center; padding:0 0 15px 0;}
.nospace .leftbox { margin:0; padding:0;}

/* For Photoswipe */
.gallery { list-style: none; padding: 0; margin:0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { float: left; width: 10%; height:85px; overflow:hidden; }
.gallery li a { display: block; margin: 0; border:none; }
.gallery li img { display: block; width: 100%; height: auto; }


/* For inline examples only */
#PhotoSwipeTarget { width: 100%; height: 200px; }

#Indicators { text-align: center; margin-top: 20px; }
#Indicators span { display: inline-block; height: 10px; width: 10px; margin: 0 10px 0 0; padding: 0; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px; background: #c5c5c5; overflow:hidden; }
#Indicators span.current{ background: #EEBF02; }
/* ////For Photoswipe */

#footer { font-family:'Open Sans', sans-serif; font-weight:800; position:fixed; bottom: 0px; background-color:#ffffff; width:100%; padding:10px 0 5px 0; text-align:center; }