@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}

body{
	background: url("../images/content_bg.jpg") 50% 50%;
}

ul{
	list-style: none;
}

a{
	text-decoration: none;
	color: #ffffff;
}

a img{
	border: none; /*IE用*/
}

#wrapper{
	width: 930px;
	padding: 0 30px;
	margin: 0 auto;
	background: #000000;
	color: #00afcc;
	font-size: 100%;
	font-family: Arial,Helvetica,sans-serif;
	line-height: 150%;
}

#wrapper p,li{
	color: #fafdff;
}

#header{
	clear: both;
	overflow: hidden;
	position: relative;
}

#logo{
	margin: 30px 0px;
}

.greeting{
	position: absolute;
	right: 0px;
	top: 50px;
	width: 250px;
}


#globalNav li{
	float: left;
	margin-right: 50px;
}

.textposition{
	padding-top: 6px;
}

#content{
	padding: 30px 0;
}

#content h2 span{
	font-size: 50%;
}

#content h3{
	font-size: 130%;
}

#content h3 span{
	font-size: 50%;
}

#content h4{
	font-size: 120%;
}

#content h4 span{
	font-size: 60%;
}


/******フィルター機能******************************/

#filter ul{
	clear: both;
	overflow: hidden;
	margin: 20px 0 30px 0;
}

#filter ul li{
	margin-right: 20px;
	float: left;
}

.active{
	padding: 5px 2px;
	background: #00afcc;
}

#filter ul li a:hover{
	border-bottom: solid 1px #00afcc;
}



/******フィルター機能終了******************************/


#galleryWrap{
	position: relative;
	width: 904px;
	height: 904px;
	margin: 0 auto;
}


#gallery li{
	position: relative;
}

#gallery li img{
	position: absolute;
	left: 33px;
	top: 33px;
}

/*１つのコンテンツの半分のwidth113px,height113px*/
#gallery li.c01{
	position: absolute;
	left: 113px;
	top: 113px;
}

#gallery li.c02{
	position: absolute;
	left: 565px;
	top: 113px;
}

#gallery li.c03{
	position: absolute;
	left: 452px;
	top: 452px;
}

#gallery li.c04{
	position: absolute;
	left: 452px;
	top: 226px;
}

#gallery li.c05{
	position: absolute;
	left: 339px;
	top: 339px;
}

#gallery li.c06{
	position: absolute;
	left: 226px;
	top: 452px;
}

#gallery li.c07{
	position: absolute;
	left: 226px;
	top: 226px;
}

#gallery li.c08{
	position: absolute;
	left: 565px;
	top: 565px;
}

#gallery li.c09{
	position: absolute;
	left: 113px;
	top: 565px;
}

/*装飾ブロック*/
#gallery li.d0{
	position: absolute;
	left: 339px;
	top: 113px;
}

#gallery li.d1{
	position: absolute;
	left: 113px;
	top: 339px;
}

#gallery li.d2{
	position: absolute;
	left: 565px;
	top: 339px;
}

#gallery li.d3{
	position: absolute;
	left: 339px;
	top: 565px;
}


#gallery li.sumbnail{
	z-index: 5;
}

#gallery li.decorate{
	z-index: 3;
}


#footer{
	padding: 60px 0;
}

#footer h4{
	font-size: 120%;
}


#personal_info{
	clear: both;
	overflow: hidden;
	margin-bottom: 20px;
}

#personal_info h4{
	margin-bottom: 10px;
}

#personal_info p{
	margin-bottom: 15px;
}

#author_info{
	float: left;
	width: 100px;
	margin-right: 80px;
}

#skill_info{
	float: left;
	width: 400px;
	margin-right: 80px;
}

#skill_info li{
	float: left;
	padding: 3px;
	margin-right: 5px;
	margin-bottom: 5px;
	background: #666666;
	font-size: 90%;
}

#skill_detail .ht:hover{
	background: #ff3333;
	color: #000000;
}

#skill_detail .sty:hover{
	background: #cc9933;
	color: #000000;
}

#skill_detail .js:hover{
	background: #339999;
	color: #000000;
}

#skill_detail .jm:hover{
	background: #99cc00;
	color: #000000;
}

#skill_detail .wp:hover{
	background: #33ccff;
	color: #000000;
}

#skill_detail .php:hover{
	background: #9999ff;
	color: #000000;
}

#skill_detail .ps:hover{
	background: #0066ff;
	color: #66ccff;
}

#skill_detail .ai:hover{
	background: #cc9933;
	color: #ffcc00;
}

#skill_detail .fw:hover{
	background: #ffff00;
	color: #cc9933;
}

#skill_detail .dw:hover{
	background: #669933;
	color: #99cc33;
}

#sns_info{
	float: left;
	width: 240px;
}

#sns_info ul{
	clear: both;
	overflow: hidden;
}

#sns_info ul li{
	float: left;
	margin-right: 20px;
}

#sns_info ul li:hover{
	opacity: 0.8;
}


#copy{
	clear: both;
	overflow: hidden;
	margin-top: 60px;
}

/******トップページ＆各ページ共通部分終了***************/


/******aboutページ開始*********************************/

#summary{
	width: 600px;
	margin-bottom: 20px;
}

#summary h2{
	margin-bottom: 20px;
}

#profile{
	width: 600px;
}

#profile img{
	-webkit-border-radius: 50% 50%;
	-ms-border-radius: 50% 50%;
	-moz-border-radius: 50% 50%;
	-o-border-radius: 50% 50%;
	border-radius: 50% 50%;
}

#profile h4{
	margin-top: 20px;
}



/******aboutページ終了***************/


/******workページ開始*********************************/

.workBox{
	width: 930px;
	clear: both;
	overflow: hidden;
	margin-bottom: 100px;
}

.workContent{
	clear: both;
	overflow: hidden;
	margin-bottom: 50px;
}

#workWrap .workContent h3{
	font-size: 120%;
}

#workWrap .workContent h4{
	font-size: 100%;
}

.work_image{
	width: 500px;
	float: left;
	margin-right: 40px;
	padding-top: 30px;
}

.work_info{
	width: 380px;
	float: left;
	padding-top: 30px;
}

.work_info h3{
	margin-bottom: 10px;
}

#workWrap .workBox .work_info .attention{
	color: #ff00ff;
	margin-top: 15px;
}

.work_info h4{
	margin: 15px 0 5px 0;
}

.to_site{
	margin-top: 30px;
}

.to_site a{
	font-weight: bold;
	padding: 5px 10px;
	margin-top: 15px;
	background: #00afcc;
}

.to_site a:hover{
	background: #434da2;
}

.to_top{
	float: right;
	border-bottom: solid 1px #666666;
}

.to_top:hover{
	background: #666666;
}


/******workページ終了*********************************/


/******contactページ開始*********************************/


#contactContent{
	width: 600px;
}

#contactContent h2{
	margin-bottom: 20px;
}

input,textarea{
	background: #333333;
	border: solid 1px #666666;
	color: #ffffff;
	outline: none;
	padding: 0.1em;
	font-size: 16px;
}

input:focus,textarea:focus{
	border: solid 1px #00afcc;
}

#contactContent dt{
	margin-top: 20px;
}

#contactContent #submit{
	padding: 3px 6px;
	background: #00afcc;
	font-size: 14px;
}

#contactContent #submit:hover{
	background: #434da2;
	cursor: pointer;
}


dl dd.error input,
dl dd.error textarea{
	border: solid 1px #d8bfd8;
}

#contactContent dl dd p.error{
	color: #ffb6c1;
	font-weight: bold;
	
}


/******contactページ終了*********************************/


/******フォーム送信済みページ開始*********************************/
#sendForm{
	height: 500px;
}

#sendForm a{
	border-bottom: solid 1px #666666;
}

#sendForm a:hover{
	background: #666666;
}

/******フォーム送信済みページ終了*********************************/


/******ふわふわ粒子演出(IE8以下非対応)*********************************/

#content{
	position: relative;
	overflow:hidden;
}

#galleryWrap{
	position: relative;
	z-index: 10;
}

#aboutWrap{
	position: relative;
	z-index: 10;
}

#workWrap{
	position: relative;
	z-index: 10;
}

#contactWrap{
	position: relative;
	z-index: 10;
}


#world{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}

#onlywork #world{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}


/******ふわふわ粒子演出終了*********************************/