/* MOBILE VERSION */
#wrap { position: relative; width: 100%; min-width: 320px; max-width: 1500px; display: table; }

#header { height: 130px; background-color: #000; color: #fff; font-weight: bold; opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ }
#header h1 { text-align: center; padding: 30px 0 20px 0; font-family: 'Arizonia',cursive; font-size: 3em; }

#menu { text-align: center; padding-bottom: 20px; }
#menu li { height: 30px; line-height: 30px; display: inline-block; padding: 0 10px; }
#menu li.on a { color: #FFFF00; }
#menu a { color: #fff; padding: 0 10px;}


#footer { position: absolute; top: 5px; right: 5px; font-weight: normal; font-size: 10px; }

#container { padding: 10px; }

#contents h2 { font-size: 17px; padding: 10px 0 15px 0; }

.tableStyle { width: 100%; border-top: #707070 1px solid; min-width: 320px; }
.tableStyle th { padding: 6px 0 7px 0; border-bottom: #707070 1px solid; background-color: #d4d4d4; }
.tableStyle td { padding: 6px 0 7px 0; text-align: center; border-bottom: #cdcdcd 1px solid; }
.tableStyle td:first-child { text-align: left; padding: 6px 10px 7px 10px; }
.tableStyle th:first-child { text-align: left; padding: 6px 10px 7px 10px; }
.tableStyle .line td { border-bottom: #666666 1px solid; }
.tableStyle .cons td { background-color: #ffffeb !important; font-weight: bold; }
.tableStyle .consulting td { background-color: #ECF9FF !important; }
.tableStyle .mark td { background-color: #FFF0F1 !important; }
.tableStyle tbody tr:nth-child(even) td { background-color: #f4f4f4; }


.portfolio { text-align: center; } 
.portfolio li { width: 150px; height: 113px; margin: 6px; display: inline-block; border: #cdcdcd 1px solid; overflow: hidden; position: relative;} 
.portfolio li img { width: 100%; height: 100%; }
.portfolio li span { 
	width: 0; height: 0;
	position: absolute; 
	top: -150px; left: -113px; 
	background-color: #000; 
	color: #fff;
	/* line-height: 113px; */ 
	padding: 40px 10px 0 10px;
	font-weight: bold;
	-webkit-transition: height 0.2s; /* Safari */
	transition: height 0.2s;
	opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */
	}
.portfolio li a { 
	cursor: default;
	}
.portfolio li a.hands { 
	cursor: pointer;
	}
.portfolio li a:hover span { 
	width: 130px; height: 73px; 
	top: 0; left: 0;
	}
.portfolio li a span.yellow { color: #FFFF00; }

#contents .goTop { clear: both; text-align: right; padding: 15px 0 30px 0; }

.resume { width: 100%; border-top: #707070 1px solid; min-width: 320px; margin-bottom: 28px; }
.resume th { border-bottom: #cdcdcd 1px solid; padding: 5px 10px 7px 10px; background-color: #f4f4f4; }
.resume td { border-bottom: #cdcdcd 1px solid; padding: 5px 10px 7px 10px; }

.resume.cnr td { text-align: center; }


.commentBox { margin-bottom: 40px; padding: 20px 5px;  }
.commentBox .year { font-size: 1.7rem; font-weight: bold; padding-bottom: 10px;  }







/* PC VERSION */
@media all and (min-width:1025px) {
	#header { width: 200px; display: table-cell; }
	#header h1 { padding: 30px 10px 80px 0; }
	/* #leftMenu h1 span { color: red; } */

	#menu { padding: 0 30px; }
	#menu li { display: block; padding: 0; text-align: left; }
	#menu li.on { padding-left: 10px;  }
	#menu a { padding: 0; }

	#container { }
	#contents h2 { font-size: 17px; padding: 3px 0 5px 7px; margin-bottom: 20px; border-top: #999999 1px solid; border-bottom: #999999 1px solid; }

	#contents { padding: 30px 30px 100px 30px; }

	#footer { position: static; width: 100%; padding: 100px 0 30px 0; }
		.copyright { text-align: center; }

	.tableStyle td:first-child { padding: 6px 0 7px 20px; }
	.tableStyle th:first-child { padding: 6px 0 7px 20px; }

	.portfolio {  } 
	.portfolio li { width: 200px; height: 150px; margin: 10px;  } 
	.portfolio li span { 
		width: 0; height: 0;
		top: 200px; left: 150px; 
		padding: 60px 10px 0 10px;
		}
	.portfolio li a:hover span { 
		width: 180px; height: 90px; 
		top: 0; left: 0;
		}

	.resume { width: 70%; }
}


@media all and (max-width:1024px) {
	.tableStyle .none480 { display: none; }
	.tableStyle th:last-child { display: none; }
	.tableStyle td:last-child { display: none; }

}


@media all and (min-width:768px) {
	.commentBox { width: 48%; padding: 1%; }
	.leftBox { float: left; }
	.rightBox { float: right; }
}


.portfolio2 { overflow: hidden;  } 
.portfolio2 li { width: 48%; min-height: 190px; overflow: hidden; float: left; position: relative; text-align: center; padding: 20px 1%  1%; } 
.portfolio2 li a { position: relative; display: block; cursor: default; margin: 0 auto; width: 100%; max-width: 192px; margin-bottom: 7px; }
.portfolio2 li a.hands { cursor: pointer; }
.portfolio2 li img { border: #dddddd 1px solid;  width: 99%;  }
/*.portfolio2 li span { background-color: #000; position:absolute; top: 0; left: 0; display: none; vertical-align: middle; width: 100%; height: 67%; opacity: .8; color: #fff; padding-top: 25%; line-height: 2; }*/
.portfolio2 li span { width: 0; height: 0; position: absolute;  top: -150px; left: -113px; background-color: #000; color: #fff; /* line-height: 113px; */ padding: 40px 10px 0 10px; font-weight: bold; -webkit-transition: height 0.2s; /* Safari */ transition: height 0.2s; opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ }
.portfolio2 li .hands span { background-color: #df0000; }
.portfolio2 li a:hover span { 
	width: 180px; height: 90px; 
	top: 0; left: 0;
	}
.portfolio2 li .clickView { width: 40%; height: auto; border: none; position: absolute; top: 0; right: 0;  }


@media all and (min-width: 540px) {
	.portfolio2 li { width: 31%; } 
}

/* PC VERSION */
@media all and (min-width:1025px) {
	.portfolio2 li { width: 23%; } 
}

/* TABLET VERSION */
@media all and (min-width:1280px)  {
	.portfolio2 li { width: 18%; } 
}