@charset "utf-8";
/* CSS Document */

/*TOP系---------------------------------------*/

img#centering{
	margin:10px auto 5px;
	display:block;
}
p#kousin{
	background:url(../image/body/kousin.gif) no-repeat;
	width:63px;
	height:20px;
	text-indent:-9999px;
	margin:0 0 20px 25px;
}
.info{
	margin:0 0 5px 25px;
	color:#333;
}
.info_text{
	padding-left:2em;
}

/*個人情報系---------------------------------------*/
h2#profile_logo{
	background:url(../image/menu/profile_h2.gif) no-repeat;
	width:236px;
	height:34px;
	text-indent:-9999px;
	margin:10px 15px 30px 25px;
	float:left;
	display:inline;
}

div#profile{
	clear:both;
	padding:0 25px;
}

#otani_photo{
	float:left;
	margin-right:10px;
	margin-bottom:5px;
	display:block;
	width:100px;
	height:112px;
}

div#profile_text{
	float:left;
	height:112px;
	width:640px;
	color:#444;
}

h3#name{
	background:url(../image/body/name.gif) no-repeat;
	width:39px;
	height:14px;
	text-indent:-9999px;
	margin:3px 0 7px 0;
}

div#profile_text p{
	line-height:1.4;
}

span#profile_line{
	display:block;
	border-top:#CCC solid 1px;
	padding-top:4px;
	margin-top:4px;
}

ul.service_link{
	clear:both;
	margin-bottom:10px;
	display:block;
}

.service_link li{
	list-style-type:none;
	float:left;
	margin-right:4px;
}

div.web_service{
	clear:both;
}

/*clearfix*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
.clearfix{
	display:inline-table;
}
/* Hides from IE-mac*/
* html .clearfix{
	height:1%;
}
.clearfix{
	display:block;
}
/* End hide from IE-mac */

/*clearfixを使わないでfloat後のはみ出しを防ぐ方法。
http://css-happylife.com/log/css-template/000730.shtml
通常のclearfixの場合は、webcreators10月号P74
以下6行。
div.clearfix{
	overflow:hidden;
}
* html.clearfix{
	height:1%;
	width:750px;
} */

div#twitter_box{
	float:left;
	width:300px;
	margin-right:15px;
}

h3 a#twitter_logo{
	background:url(../image/body/twitter.gif) no-repeat;
	width:51px;
	height:14px;
	text-indent:-9999px;
	margin:0px 0 4px;
	display:block;
}

div#twitter_div{
	border:#bbb solid 1px;
	padding:5px;
}

div#twitter_div li{
	list-style:none;
	color:#444;
	margin:1em 0;
	line-height:1.3;
	font-size:0.95em;
}
div#twitter_div li a{
	color:#FF1100;
}

div#google_box{
	float:left;
	width:420px;
}

/*ブログ系---------------------------------------*/
h2#blog_logo{
	background:url(../image/menu/blog_h2.gif) no-repeat;
	width:236px;
	height:34px;
	text-indent:-9999px;
	margin:10px 15px 30px 25px;
	float:left;
	display:inline;
}

div.blog_box{
	clear:both;
	display:block;
	width:226px;
	margin-left:25px;
}
img.blog_logo{
	padding:2px;
	border:#666666 1px solid;
}

a#webs_title{
	width:117px;
	height:14px;
	background:url(../image/body/blog_title.gif) no-repeat;
	text-indent:-9999px;
	margin:8px 0 3px 0;
	display:block;
}

.blog_box p a{
	border-bottom:1px dotted #ff1100;
	color:#ff1100;
}
.blog_box p a:hover{
	border-bottom:1px solid #ff1100;
}

span.blog_text{
	display:block;
	margin-top:1em;
	font-size:0.95em;
	text-indent:1.5;
	color:#444;
}

/*写真系---------------------------------------*/
h2#photo_logo{
	background:url(../image/menu/photo_h2.gif) no-repeat;
	width:236px;
	height:34px;
	text-indent:-9999px;
	margin:10px 15px 30px 25px;
	float:left;
	display:inline;
}

div.photo_box{
	clear:both;
	float:left;
	width:750px;
	margin-bottom:20px;
	padding:0 25px;
}

div.photo_box_inner{
	position:relative;
	width:200px;
	height:92px;
	float:left;
	margin-right:20px;
	padding:3px;
	border:#DDD 2px solid;
}

div.photo_box_inner h3 a{
	width:89px;
	height:17px;
	text-indent:-9999px;
	margin:10px 0 10px 102px;
	display:block;
}

#doubutu_title{
	background:url(../image/photo/doubutu_title.gif) no-repeat;
}
#hito_title{
	background:url(../image/photo/hito_title.gif) no-repeat;
}
#kesiki_title{
	background:url(../image/photo/kesiki_title.gif) no-repeat;
}
#madokara_title{
	background:url(../image/photo/madokara_title.gif) no-repeat;
}
#genie_title{
	background:url(../image/photo/genie_title.gif) no-repeat;
}

/*box全体にリンクをかける方法。
"webcreators08'10月号P47掲載"*/

div.photo_box_inner img{
	position:absolute;
	z-index:1;
}

div.photo_box_inner p a{
	position:absolute;
	top:-2px;
	left:-2px;
	width:100px;
	height:56px;
	display:block;
	z-index:2;
	padding:43px 3px 3px 107px;
	text-decoration:none;
	color:#555;
}

div.photo_box_inner p a:hover{
	background-image:url(../image/photo/test.gif);
}

div.photo_box_inner p{
	font-size:0.85em;
}

/*制作系---------------------------------------*/
h2#output_logo{
	background:url(../image/menu/output_h2.gif) no-repeat;
	width:236px;
	height:34px;
	text-indent:-9999px;
	margin:10px 15px 30px 25px;
	float:left;
	display:inline;
}

#animaloon_title{
	background:url(../image/output/animaloon_title.gif) no-repeat;
}
#ciff_title{
	background:url(../image/output/ciff_title.gif) no-repeat;
}