/* CSS Document */

body{
	margin:0;
	padding:0;
	text-align:center;
	background:#ffffff;
	font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif;
	color:#222222;
	font-size:12px;
	letter-spacing:0.05em;
	line-height:150%;
}
a{text-decoration: underline; color: #333333;}
a:hover{text-decoration: none; color: #CCCCCC;}
hr{
	display:none;
}
h1, h2, h3, h4, h5, p, ul, li, dl, dt, dd, blockquote{
	margin:0;
	padding:0;
	font-size:100%;
	letter-spacing:0.05em;
	line-height:150%;
}




/* #layout
-------------------------------------------------------------*/
div#layout{
	width:702px;
	margin:16px auto 0;
	text-align:left;
	border-top:solid 1px #666666;
}
div#layoutInner{
	background:url(../images/left-bg.gif) left top repeat-y;
	border-left:solid 1px #666666;
	border-right:solid 1px #666666;
	border-bottom:solid 1px #666666;
}

/* #header
-------------------------------------------------------------*/
div#header{
	background:url(../images/header_bg.gif) repeat-x;
	width:100%;
	height:75px;
	overflow:hidden;
	text-indent:-9999px;
	position:relative;
}
div#header a{
	text-decoration:none;
}

div#header h1{
	float:left;
	width:163px;
	margin-right:30px;
}
div#header h1 a{
	display:block;
	height:75px;
	background:url(../images/header_logo.gif) no-repeat;
}


/* gNavi --------*/
div#gNavi{
	width:304px;
	height:75px;
	background-color: #CCCCCC;
	background:url(../images/gnavi_bg.gif) no-repeat;
	position:absolute;
	top:0;
	left:200px;
}

div#header ul, div#header li{
	margin:0;
	padding:0;
	list-style:none;
}
div#gNavi ul{
}
div#header li{
	position:absolute;
}
div#header li a, div#header li span{
	display:block;
}

li#works{
	top:46px;
	left:0;
	width:55px;
	height:29px;
}
li#works a, li#works span{
	height:29px;
	background:url(../images/header_works.gif);
}
li#works a:hover, li#works span{
	background:url(../images/header_works.gif) 0 -29px;
}
li#profile{
	top:46px;
	left:58px;
	width:51px;
	height:29px;
}
li#profile a, li#profile span{
	height:29px;
	background:url(../images/header_profile.gif);
}
li#profile a:hover, li#profile span{
	background:url(../images/header_profile.gif) 0 -29px;
}
li#link{
	top:46px;
	left:116px;
	width:43px;
	height:29px;
}
li#link a, li#link span{
	height:29px;
	background:url(../images/header_link.gif);
}
li#link a:hover, li#link span{
	background:url(../images/header_link.gif) 0 -29px;
}
li#blog{
	top:46px;
	left:174px;
	width:39px;
	height:29px;
}
li#blog a, #blog span{
	height:29px;
	background:url(../images/header_blog.gif);
}
li#blog a:hover, #blog span{
	background:url(../images/header_blog.gif) 0 -29px;
}
li#contact{
	top:46px;
	left:232px;
	width:58px;
	height:29px;
}
li#contact a, li#contact span{
	height:29px;
	background:url(../images/header_contact.gif);
}
li#contact a:hover, li#contact span{
	background:url(../images/header_contact.gif) 0 -29px;
}
li#web{
	top:-36px;
	left:31px;
	width:40px;
	height:27px;
}
li#web a, li#web span{
	height:27px;
	background:url(../images/header_web.gif);
}
li#web a:hover, li#web span{
	background:url(../images/header_web.gif) 0 -27px;
}
li#graphic{
	top:-36px;
	left:89px;
	width:60px;
	height:27px;
}
li#graphic a, li#graphic span{
	height:27px;
	background:url(../images/header_graphic.gif);
}
li#graphic a:hover, li#graphic span{
	background:url(../images/header_graphic.gif) 0 -27px;
}
li#ui{
	top:-36px;
	left:150px;
	width:30px;
	height:27px;
}
li#ui a, li#ui span{
	height:27px;
	background:url(../images/header_ui.gif);
}
li#ui a:hover, li#ui span{
	background:url(../images/header_ui.gif) 0 -27px;
}


/* #pageBody
-------------------------------------------------------------*/
div#pageBody{
	min-height:450px;
}



/* #pageTitle area
-------------------------------------------------------------*/
div#pageTitleLead{
	width:165px;
	float:left;
}

div#pageTitleLead h2{
	text-indent:-9999px;
	margin:10px 0 0 25px;
	width:107px;
	height:90px;
}
h2#worksTitle{
	background:url(../images/title/works.gif) no-repeat;
}
h2#webTitle{
	background:url(../images/title/web.gif) no-repeat;
}
h2#graphicTitle{
	background:url(../images/title/graphic.gif) no-repeat;
}
h2#uiTitle{
	background:url(../images/title/ui.gif) no-repeat;
}
h2#profileTitle{
	background:url(../images/title/profile.gif) no-repeat;
}
h2#linksTitle{
	background:url(../images/title/links.gif) no-repeat;
}
h2#blogTitle{
	background:url(../images/title/blog.gif) no-repeat;
}
div#pageTitleLead p{
	font-size:85%;
	margin:10px 15px;
}
div#pageTitleLead ul{
	margin:20px 15px 0 15px;
	list-style:none;
}
div#pageTitleLead li{
	margin:0;
	padding:0;
	list-style:none;
}
div#pageTitleLead li a{
	text-decoration: none;
	display: block;
	margin: 0px;
	padding: 3px 0px 3px 16px;
	background: url(../images/allow.gif) no-repeat left center;
}
div#pageTitleLead li a:hover{
	background: url(../images/allow-on.gif) no-repeat left center;
}
div#pageTitleLead li span{
	display: block;
	margin: 0px;
	padding: 3px 0px 3px 16px;
	background: #ffffff url(../images/allow-on.gif) no-repeat left center;
	border-top:dotted 2px #333333;
	border-bottom:dotted 2px #333333;
}



/* contents area
-------------------------------------------------------------*/
/* #main --------*/
div#main{
	float:right;
	width:500px;
}

/* .section common --------*/
div#main div.section{
	margin: 30px 0;
	padding: 0px;
	clear: both;
	display: inline-block; 
}
/* Mac版IEを除外 \*/ 
div#main div.section{
	 display: block; 
} 
/* */
div#main div.section:after{
	content: " ";
	font-size:1px;
	height:1px; 
	display: block; 
	clear: both; 
	height: 0; 
} 

div#main div.section h3{
	margin:0 25px 6px 0;
	padding: 6px 0;
	border-bottom: 2px dotted #999999;
	font-size:110%;
	line-height:100%;
}
div#main div.section p{
	margin:0 25px 0 0;
}
div#main div.section ul{
	margin:15px 25px 15px 0;
}
div#main div.section li{
	font-size:12px;
	list-style: inside square;
}
div.section blockquote {
	clear:both;
	margin: 15px 25px 15px 0;
	padding: 10px;
	border: 1px dotted #6699CC;
	font-size: 11px;
}
div.section table {
	margin: 15px 30px 15px 0;
}




/* contents area images:float left --------*/
.detail {
	font-size: 85%;
	padding: 1px 5px;
	background:#eeeeee;
	border:solid 1px #999999;
}
.cap-img {
	float: left;
	margin: 5px 10px 40px 0px;
	border: 1px solid #333333;
}
.prof-img {
	float: left;
	margin: 5px 10px 5px 0;
	border: 1px solid #000000;
}


/* #pagetop --------*/
div#pagetop{
	padding:0 20px 10px 0;
	text-align:right;
	font-size:90%;
	clear:both;
}
div#pagetop a{
	margin:-2.5em 0 0 0;
	padding:0 0 0 15px;
	background:url(../images/up.gif) left center no-repeat;
}



/* #footer
-------------------------------------------------------------*/
div#footer{
	margin:5px 0 15px;
	font-size:11px;
	line-height:100%;
}
ul#infoLabel1, ul#infoLabel1 li, ul#infoLabel2, ul#infoLabel2 li{
	margin:0;
	padding:0;
	list-style:none;
}
ul#infoLabel2{
	clear:left;
}
ul#infoLabel1 li{
	display:inline;
}
ul#infoLabel1 li a{
	display:block;
	float:left;
	width:80px;
	height:15px;
	text-indent:-9999px;
	text-decoration:none;
}
li#w3c a{
	background-image: url(../images/banner/w3c_xhtml.gif);
	background-repeat: no-repeat;
	margin:0 3px 0 0;
}
li#css a{
	background:url(../images/banner/w3c_css.gif) no-repeat;
	margin:0 15px 0 0;
}
li#mt3 a{
	font-size:85%;
	color:#555555;
}
p#copyright{
	float:right;
	font-size:90%;
	color:#333333;
}