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

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-image:url(../images/bg.gif);
	background-position:top left;
	background-repeat:repeat;
    color:#fff;
	margin:0;
	padding:0;
	font-size:1em;
}

.container {
	width:1000px;
	margin:0 auto;
	overflow:hidden;
}

.contents {
	width:524px;
	margin:0 auto;
}

.gnavi {
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:17px;
	width:532px;
	margin:0;
	overflow:hidden;
	padding-bottom:3px;
}

.gnavi li {
	border:1px #fff solid;
}

.gnavi a {
	color:#000;
	height:27px;
	line-height:27px;
	
	display:block;
}

.gnavi li {
	width:120px;
	height:27px;
	line-height:27px;
	text-align:center;
	float:left;
	margin-right:14px;
	background-color:rgba(255,255,255,0.6);
}

.gnavi li.gnaviend {
	margin-right:0 !important;
	margin-left:2px;
}

.gnavi li a:hover, .gnavi li.gnavilive {
	border:1px #004C8F solid;
	height:27px;
	line-height:27px;
		color: #004C8F;
}

/*works page resisable*/
.box100 {
    height: 100px;
    background:#68BCBC;
}
.box200 {
    height: 200px;
    background:#71AAD7;
}
.box300 {
    height: 300px;
    background:#EBB056;
}

.alignleft { float: left; }


article {
    width:100%;
    margin:0 auto;
    background:#eee;
}

section {
    width: 120px;
    margin: 5px;
    overflow: hidden;
}
footer {
    width:150px;
    text-align:center;
    margin:0 auto;
}

/* animation
article,section {
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}
article {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}
section {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}
*/

/*work.html_workarea*/

.workarea {
	margin-top:40px;
	overflow:hidden;
	color:#000;
	font-size:8px;
	line-height:1.2;
}

.workarea ul {
	margin:0;
	padding:0;
	overflow:hidden;
}

.workarea ul li {
	height:160px;
	float:left;
	margin-right:23px;
	margin-bottom:24px;
	background-color:#fff;
	box-sizing: border-box;
	/*padding:5px;*/
	position:relative;
	text-align:center;
}

.workarea ul li.w249 {
	width:247px;
		border:#fff 1px solid;
		

}

.workarea ul li.w113 img {
	padding-top:5px;
}


.workarea ul li.w249 img {
	margin-top:30px;
}

.workarea ul li p {
	margin-left:5px;
}


.workarea ul li.w113 {
	width:113px;
	border:#fff 1px solid;
}



.workarea ul li.workend {
	margin-right:0 !important;
	margin-left:0 !important;
}

.copy {
	position:absolute;
	bottom:2px;
	text-align:left;
}


.w113 a {
	width:113px;
	height:160px;
	display:block;

}

.w249 a {
	width:247px;
	height:160px;
	display:block;

}

.w249 a img {
	padding-top:10px;
}

.w113 a:hover, .w249 a:hover {
	display:block;
	border:#004C8F 1px solid;
}

/*for firefox*/
@-moz-document url-prefix() {
	.workarea ul li.w249 {
	width:228px;
			/*padding-top:30px;*/

	border:#fff 1px solid;

}
	.workarea ul li.w113 {
	width:99px;
	border:#fff 1px solid;

}

.w113 a {
	width:99px;
	height:160px;
	display:block;

}

.w249 a {
	width:228px;
	height:160px;
	display:block;

}



}

/*about.html*/

.profile {
	margin-top:180px;
	background-color:rgba(255,255,255,0.6);
	color:#000;
	padding:10px;
	overflow:hidden;
}

.markleft {
	float:left;
	margin-right:10px;
}


.name {
	font-size:22px;
	font-weight:bold;
}

.history {
	font-size:0.8em;
	letter-spacing:0.1em;
text-align:justify;
text-justify:inter-ideograph;

}

.sign {
	width:480px;
	margin:40px auto;
}

/*contact.html*/

.contact {
	margin-top:90px;
	background-color:rgba(255,255,255,0.6);
	color:#000;
	padding:10px;
	overflow:hidden;
}


.eng {
	clear:both;
	font-size:0.8em;
	line-height:1.6;
text-align:justify;
text-justify:inter-ideograph;

}


.history a {
	color:#004C8F;
	font-weight:bold;
}

.history a:hover {
	color:#0f89f5;
	font-weight:bold;
}